steino
/
dndmusicbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: steino:f205d4e46af5a3240a8ecef2c8b58f2e080b8d6c
Branches Tags
steino:reisen
steino:master
steino:youtube
steino:react
steino:nostruct
steino:makefile
steino:haste/handle-touch
..
compare: steino:aa8c052c93de705b810ffcf5ced3e631b30a781c
Branches Tags
steino:reisen
steino:master
steino:youtube
steino:react
steino:nostruct
steino:makefile
steino:haste/handle-touch

No commits in common. "f205d4e46af5a3240a8ecef2c8b58f2e080b8d6c" and "aa8c052c93de705b810ffcf5ced3e631b30a781c" have entirely different histories.
f205d4e46a ... aa8c052c93

2 changed files with 61 additions and 107 deletions
Show Stats Expand all files Collapse all files

55
css/style.css
View File

@ -1,10 +1,6 @@
*, ::after, ::before { .container {
box-sizing: border-box;
}
.item-container {
--grid-layout-gap: 8px; --grid-layout-gap: 8px;
--grid-column-count: 6; --grid-column-count: 3;
--grid-item--min-width: 150px; --grid-item--min-width: 150px;
--gap-count: calc(var(--grid-column-count) - 1); --gap-count: calc(var(--grid-column-count) - 1);
@ -34,6 +30,7 @@ h2.bot {
padding: 1rem; padding: 1rem;
background-color: #80cbc4; background-color: #80cbc4;
border: 1px solid black; border: 1px solid black;
font-size: clamp(1rem, -0.8750rem + 8.3333vw, 2rem);
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
color: #073642 color: #073642
@ -92,11 +89,12 @@ h2.bot {
padding: 2rem; padding: 2rem;
width: 80%; /* Could be more or less, depending on screen size */ width: 80%; /* Could be more or less, depending on screen size */
text-align: center; text-align: center;
font-size: 32px;
} }
body, html { body, html {
margin: 0; margin: 0;
padding: 0; padding: .5rem;
} }
input[type="button"], input[type="button"],
@ -149,49 +147,6 @@ section {
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: var(--bs-gutter-x, 0.75rem);
padding-left: var(--bs-gutter-x, 0.75rem);
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container-sm, .container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container-md, .container-sm, .container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1320px;
}
}
.u-full-width { .u-full-width {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;

7
tmpl/index.tmpl
View File

@ -9,11 +9,10 @@
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
</head> </head>
<body> <body>
<div class="container">
<h2 class="bot">Playlists</h2> <h2 class="bot">Playlists</h2>
<section> <section>
<div id="items" class="item-container"> <div id="items" class="container">
{{ range .Playlists }} {{ range .Playlists }}
<div class="item" data-id="{{ .Id }}">{{ .Title }}</div> <div class="item" data-id="{{ .Id }}">{{ .Title }}</div>
{{ end}} {{ end}}
@ -45,12 +44,13 @@
<input id="next" name="next" type="button" value="next"> <input id="next" name="next" type="button" value="next">
</div> </div>
</div> </div>
</div>
</section> </section>
<h2 class="bot">Ambiance</h2> <h2 class="bot">Ambiance</h2>
<section> <section>
<div id="ambiance" class="item-container"> <div id="ambiance" class="container">
{{ range .Ambiance }} {{ range .Ambiance }}
<div class="item drag" data-id="{{ . }}">{{ . }}</div> <div class="item drag" data-id="{{ . }}">{{ . }}</div>
{{ end}} {{ end}}
@ -73,7 +73,6 @@
<p>Waiting for bot..</p> <p>Waiting for bot..</p>
</div> </div>
</div> </div>
</div>
<script src="/js/script.js"></script> <script src="/js/script.js"></script>
</body> </body>
</html> </html>