ydeng/audioshowkit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved styling of tutorial and generated music playlist display.

Browse Source
This commit is contained in:
Harrison Deng
2022-04-19 17:14:40 -05:00
parent 622a85828c
commit b16dc05a54
9 changed files with 47 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
tutorials/MusicPlayer.html
View File

@@ -2,12 +2,12 @@
<html lang="en">
<head>
<link rel="stylesheet" href="./assets/css/prism.css" />
<link rel="stylesheet" href="./assets/css/main.css" />
<script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
</head>
<body>
<script src="./assets/js/audioshowkit.js"></script>
<div>
<h1>Creating a Music Player</h1>
<p>One of the most basic principles behind AudioShowKit is the {@link MusicPlayer}. The song player acts as an easy way for developers to set up a list of songs with simple generated controls while exposing more complex events if needed.</p>

2
tutorials/MusicPlaylist.html
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<link rel="stylesheet" href="./assets/css/prism.css" />
<link rel="stylesheet" href="./assets/css/main.css" />
<script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
</head>

2
tutorials/VisMusicPlayer.html
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<link rel="stylesheet" href="./assets/css/prism.css" />
<link rel="stylesheet" href="./assets/css/main.css" />
<script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
</head>

14
tutorials/assets/css/main.css Normal file
View File

@@ -0,0 +1,14 @@
@import url("./prism.css");
.result {
background-repeat: repeat;
background-image: url("../textures/45degree_fabric.webp");
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 2.5rem;
border-radius: 5px;
box-shadow: inset;
}

BIN
tutorials/assets/textures/45degree_fabric.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB