diff --git a/content/project/apollo/cover.png b/content/project/apollo/cover.png new file mode 100644 index 0000000..8f84a20 Binary files /dev/null and b/content/project/apollo/cover.png differ diff --git a/content/project/apollo/index.md b/content/project/apollo/index.md index b8889ac..73300dc 100644 --- a/content/project/apollo/index.md +++ b/content/project/apollo/index.md @@ -4,4 +4,5 @@ date = "2025-05-25" template = "song.html" [extra] src = "apollo.mp3" +cover_src = "cover.png" +++ diff --git a/sass/_base.scss b/sass/_base.scss index 559a0e5..edd03f6 100644 --- a/sass/_base.scss +++ b/sass/_base.scss @@ -26,7 +26,7 @@ body { body { background-color: c.$base; } -h1, h2, h3, h4, h5, h6, p, a{ +li, h1, h2, h3, h4, h5, h6, p, a{ color: c.$text; font-family: "Source Code VF"; } diff --git a/sass/_font.css b/sass/_font.css index a20f436..66d1c0c 100644 --- a/sass/_font.css +++ b/sass/_font.css @@ -9,12 +9,12 @@ font-weight: 200 900; font-style: normal; font-stretch: normal; - src: url('/font/WOFF2/VF/SourceCodeVF-Upright.ttf.woff2') format('woff2-variations'), - url('/font/WOFF2/VF/SourceCodeVF-Upright.ttf.woff2') format('woff2 supports variations'), - url('/font/WOFF/VF/SourceCodeVF-Upright.ttf.woff') format('woff-variations'), - url('/font/WOFF/VF/SourceCodeVF-Upright.ttf.woff') format('woff supports variations'), - url('/font/VF/SourceCodeVF-Upright.ttf') format('truetype-variations'), - url('/font/VF/SourceCodeVF-Upright.ttf') format('truetype supports variations'); + src: url('/font/source-code-pro/WOFF2/VF/SourceCodeVF-Upright.ttf.woff2') format('woff2-variations'), + url('/font/source-code-pro/WOFF2/VF/SourceCodeVF-Upright.ttf.woff2') format('woff2 supports variations'), + url('/font/source-code-pro/WOFF/VF/SourceCodeVF-Upright.ttf.woff') format('woff-variations'), + url('/font/source-code-pro/WOFF/VF/SourceCodeVF-Upright.ttf.woff') format('woff supports variations'), + url('/font/source-code-pro/VF/SourceCodeVF-Upright.ttf') format('truetype-variations'), + url('/font/source-code-pro/VF/SourceCodeVF-Upright.ttf') format('truetype supports variations'); } @font-face{ @@ -22,10 +22,10 @@ font-weight: 200 900; font-style: italic; font-stretch: normal; - src: url('/font/WOFF2/VF/SourceCodeVF-Italic.ttf.woff2') format('woff2-variations'), - url('/font/WOFF2/VF/SourceCodeVF-Italic.ttf.woff2') format('woff2 supports variations'), - url('/font/WOFF/VF/SourceCodeVF-Italic.ttf.woff') format('woff-variations'), - url('/font/WOFF/VF/SourceCodeVF-Italic.ttf.woff') format('woff supports variations'), - url('/font/VF/SourceCodeVF-Italic.ttf') format('truetype-variations'), - url('/font/VF/SourceCodeVF-Italic.ttf') format('truetype supports variations'); + src: url('/font/source-code-pro/WOFF2/VF/SourceCodeVF-Italic.ttf.woff2') format('woff2-variations'), + url('/font/source-code-pro/WOFF2/VF/SourceCodeVF-Italic.ttf.woff2') format('woff2 supports variations'), + url('/font/source-code-pro/WOFF/VF/SourceCodeVF-Italic.ttf.woff') format('woff-variations'), + url('/font/source-code-pro/WOFF/VF/SourceCodeVF-Italic.ttf.woff') format('woff supports variations'), + url('/font/source-code-pro/VF/SourceCodeVF-Italic.ttf') format('truetype-variations'), + url('/font/source-code-pro/VF/SourceCodeVF-Italic.ttf') format('truetype supports variations'); } diff --git a/sass/song.scss b/sass/song.scss index 5115f7b..ef35c79 100644 --- a/sass/song.scss +++ b/sass/song.scss @@ -4,13 +4,31 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ +@use '_icons'; + + +main { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + #player { - margin: auto; + padding-bottom: 50px; + width: 100%; display: flex; flex-direction: column; justify-content: center; } +#cover { + padding-top: 35px; + width: 100%; + max-width: 300px; + margin: auto; +} + #title { text-align: center; } @@ -21,20 +39,22 @@ } #playbutton { - width: 8%; + width: 15%; + max-width: 65px; aspect-ratio: 1/1; - margin-right: 15px; + margin-right: min(15px, 2%); background: #313244; border: none; color: #cba6f7; border-radius: 100%; line-height: 100%; text-align: center; + font-size: min(8cqw, 40px); } .seek { -webkit-appearance: none; - margin-left: 15px; + margin-left: min(15px, 2%); width: 100%; height: 8px; } diff --git a/templates/song.html b/templates/song.html index e09e7c9..ef9d3bd 100644 --- a/templates/song.html +++ b/templates/song.html @@ -8,6 +8,9 @@ {% endblock title %} {% block content %}