diff --git a/css/style.css b/css/style.css index 158c1cb..3abc00c 100644 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,10 @@ -.container { +*, ::after, ::before { + box-sizing: border-box; +} + +.item-container { --grid-layout-gap: 8px; - --grid-column-count: 3; + --grid-column-count: 6; --grid-item--min-width: 150px; --gap-count: calc(var(--grid-column-count) - 1); @@ -30,7 +34,6 @@ h2.bot { padding: 1rem; background-color: #80cbc4; border: 1px solid black; - font-size: clamp(1rem, -0.8750rem + 8.3333vw, 2rem); text-align: center; cursor: pointer; color: #073642 @@ -89,12 +92,11 @@ h2.bot { padding: 2rem; width: 80%; /* Could be more or less, depending on screen size */ text-align: center; - font-size: 32px; } body, html { margin: 0; - padding: .5rem; + padding: 0; } input[type="button"], @@ -147,6 +149,49 @@ section { 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 { width: 100%; box-sizing: border-box; diff --git a/tmpl/index.tmpl b/tmpl/index.tmpl index f824cd5..8c436a7 100644 --- a/tmpl/index.tmpl +++ b/tmpl/index.tmpl @@ -9,68 +9,69 @@ -

Playlists

+
+

Playlists

-
-
- {{ range .Playlists }} -
{{ .Title }}
- {{ end}} -
Stop
-
-
- -
-
- - - -
-
- -
-

- -
- - - - - - - -
- - - +
+
+ {{ range .Playlists }} +
{{ .Title }}
+ {{ end}} +
Stop
-
-
-
+ -

Ambiance

+
+
+ + + +
+
-
-
- {{ range .Ambiance }} -
{{ . }}
- {{ end}} -
Stop
-
-
+
+

-
-
- - - -
-
+
+ + + - + + - -
+ +

Ambiance

+ +
+
+ {{ range .Ambiance }} +
{{ . }}
+ {{ end}} +
Stop
+
+
+ +
+
+ + + +
+
+ + +