From c8747c0182b6281657e9b536db811c27f99a7cbf Mon Sep 17 00:00:00 2001 From: rramiachraf <51409801+rramiachraf@users.noreply.github.com> Date: Wed, 6 Mar 2024 17:32:10 +0100 Subject: [PATCH] refactor: add esbuild and modulerize css into seperate files --- .gitignore | 2 + Makefile | 10 +- static/style.css | 460 ------------------------------------------- style/album.css | 14 ++ style/annotation.css | 34 ++++ style/error.css | 31 +++ style/footer.css | 48 +++++ style/home.css | 52 +++++ style/layout.css | 30 +++ style/lyrics.css | 135 +++++++++++++ style/main.css | 64 ++++++ style/navbar.css | 17 ++ style/search.css | 114 +++++++++++ 13 files changed, 548 insertions(+), 463 deletions(-) delete mode 100644 static/style.css create mode 100644 style/album.css create mode 100644 style/annotation.css create mode 100644 style/error.css create mode 100644 style/footer.css create mode 100644 style/home.css create mode 100644 style/layout.css create mode 100644 style/lyrics.css create mode 100644 style/main.css create mode 100644 style/navbar.css create mode 100644 style/search.css diff --git a/.gitignore b/.gitignore index 8373007..10a5ccb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ dumb views/*_templ.go +esbuild +static/*.css diff --git a/Makefile b/Makefile index 73839ca..20a1806 100644 --- a/Makefile +++ b/Makefile @@ -1,8 +1,12 @@ VERSION=`git rev-parse --short HEAD` gentempl: - @command -v templ &> /dev/null || go install github.com/a-h/templ/cmd/templ@latest -build:gentempl - templ generate && go build -ldflags="-X 'github.com/rramiachraf/dumb/data.Version=$(VERSION)' -s -w" + command -v templ &> /dev/null || go install github.com/a-h/templ/cmd/templ@latest +esbuild: + [ ! -f ./esbuild ] && curl -fsSL https://esbuild.github.io/dl/latest | sh +build:gentempl esbuild + templ generate + cat ./style/*.css | ./esbuild --loader=css --minify > ./static/style.css + go build -ldflags="-X 'github.com/rramiachraf/dumb/data.Version=$(VERSION)' -s -w" fmt: templ fmt . diff --git a/static/style.css b/static/style.css deleted file mode 100644 index 74e5968..0000000 --- a/static/style.css +++ /dev/null @@ -1,460 +0,0 @@ -/* inter-regular - cyrillic_greek_latin_vietnamese */ -@font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - src: url('/static/fonts/inter-v12-cyrillic_greek_latin_vietnamese-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */ - url('/static/fonts/inter-v12-cyrillic_greek_latin_vietnamese-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} - -/* inter-500 - cyrillic_greek_latin_vietnamese */ -@font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - src: url('/static/fonts/inter-v12-cyrillic_greek_latin_vietnamese-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */ - url('/static/fonts/inter-v12-cyrillic_greek_latin_vietnamese-500.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} - -/* inter-700 - cyrillic_greek_latin_vietnamese */ -@font-face { - font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ - font-family: 'Inter'; - font-style: normal; - font-weight: 700; - src: url('/static/fonts/inter-v12-cyrillic_greek_latin_vietnamese-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */ - url('/static/fonts/inter-v12-cyrillic_greek_latin_vietnamese-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} - -* { - margin: 0; - padding: 0; -} - -html { - font-size: 62.5%; -} - -body { - font-size: 1.5rem; - font-family: inter; - background-color: #f9f9f9; -} - -#lyrics { - color: #171717; - line-height: 2.5rem; - flex-basis: 0; - flex-shrink: 0; - flex-grow: 1; -} - -#lyrics a { - color: inherit; -} - -#lyrics a, .annotation { - background-color: #ddd; - color: inherit; -} - -#lyrics a:hover { - background-color: #ccc; -} - -nav { - background-color: #ffcd38; - display: flex; - align-items: center; - justify-content: center; - padding: 0.5rem; -} - -nav img { - width: 50px; -} - -a { - text-decoration: none; -} - -#metadata { - display: flex; - flex-direction: column; - gap: 2rem; - flex-basis: 0; -} - -#metadata h1 { - font-size: 2rem; - color: #171717; -} - -#metadata h2 { - font-size: 1.4rem; - color: #1e1e1e; - font-weight: 500; -} - -#metadata-info { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -#album-artwork { - width: 24rem; - border-radius: 3px; - box-shadow: 0 1px 1px #ddd; -} - -#container { - display: grid; - padding: 5rem 0; - grid-template-columns: 24rem calc(1024px - 56rem) 24rem; - width: 1024px; - margin: 0 auto; - gap: 4rem; - flex: 1; -} - -#credits { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -#title { - font-size: 2rem; - color: #1b1a17; -} - -#credits summary { - font-size: 1.4rem; - cursor: pointer; - color: #1e1e1e; -} - -#lyrics-album-container { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -#album-tracklist{ - display: flex; - flex-direction: column; - gap: 1rem; - flex-basis: 0; - flex-shrink: 0; - flex-grow: 1; -} - -.annotation #iframed-link{ - font-weight: 500; - background-color: #ffcd38; - padding: 2px 6px; -} - -#credits p { - font-size: 1.3rem; - padding: 0.5rem; - color: #171717; -} - -#info { - display: flex; - flex-direction: column; - gap: 2rem; - flex-basis: 0; -} - -#about { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -#about p { - font-size: 1.4rem; - color: #171717; - line-height: 1.8rem; - cursor: pointer; -} - -.annotation { - padding: 1rem; - border-radius: 4px; - background: #eee; - border: 1px solid #ddd; - color: #222; -} - -.annotation img { - max-width: 100%; - height: auto; -} - -.annotation a { - background: none; - font-weight: 500; -} - -.annotation ul { - padding-left: 1em; -} - -.hidden { - display: none; -} - -#home { - display: flex; - flex-direction: column; - gap: 1.5rem; - align-items: center; - padding: 2rem; - flex-grow: 1; -} - -#home div { - text-align: center; -} - -#home h1 { - font-weight: 600; - font-size: 2.2rem; - color: #222; -} - -#home p { - color: #333; -} - -#home code { - background-color: #eee; - padding: 0.3rem 1rem; - border-radius: 0.5rem; - color: #333; -} - -footer { - background-color: #ffcd38; - padding: 1rem 0; -} - -#footer-container { - width: 1024px; - display: flex; - justify-content: space-between; - align-items: center; - margin: 0 auto; -} - -#footer-links { - display: flex; - gap: 1rem; -} - -#version { - font-size: 1.3rem; - color: #1b1b1b; -} - -footer a { - font-weight: 500; - color: #1b1a17; - transition: 0.3s ease text-decoration; - font-size: 1.4rem; - text-transform: uppercase; -} - -footer a:hover { - text-decoration: underline; -} - -#app { - display: flex; - flex-direction: column; - min-height: 100vh; -} - -#error { - display: flex; - flex-direction: column; - gap: 1rem; - align-items: center; - justify-content: center; - padding: 2rem; - flex-grow: 1; -} - -#error h1 { - font-size: 5rem; - color: #111; -} - -#error p { - text-transform: uppercase; - font-size: 1.6rem; - color: #222; - text-align: center; -} - -.main { - flex-grow: 1; -} - -#search-page { - display: flex; - flex-direction: column; - gap: 3rem; - padding: 2rem 1rem; -} - -@media screen and (min-width: 800px) { - #search-page { - width: 80rem; - margin: 0 auto; - } -} - -#search-input { - width: 100%; - padding: 1rem 2rem; - box-sizing: border-box; - border-radius: 5px; - border: 1px solid #ddd; - color: #222; -} - -#search-results { - display: flex; - flex-direction: column; - gap: 1rem; -} - -#search-results h1 { - text-align:center; - color: #111; - font-size: 2.5rem; -} - -#search-item { - display: flex; - height: 8rem; - border: 1px solid #eee; - border-radius: 5px; - gap: 1rem; - padding: 1rem; - box-shadow: 0 1px 1px #ddd; -} - -#search-item h2 { - font-size: 1.8rem; - color: #222; -} - -#search-item span { - font-size: 1.3rem; - color: #333; -} - -#search-item img { - width: 8rem; - border-radius: 5px; -} - -@media screen and (max-width: 1080px) { - #container { - padding: 3rem 2rem; - display: flex; - flex-direction: column; - gap: 3rem; - width: calc(100vw - 4rem);; - } - - #metadata { - align-items: center; - } - - #footer_container { - width: 100%; - padding: 0 2rem; - box-sizing: border-box; - } -} - -/* dark mode */ -@media (prefers-color-scheme: dark) { - body { - background-color: #181d31; - } - - nav, - footer { - background-color: #fec260; - } - - #lyrics { - color: #ccc; - } - - #lyrics a, .annotation { - background-color: #272d44; - color: inherit; - } - - - #lyrics a:hover { - background-color: #32384f; - } - - #metadata h1 { - color: #ddd; - } - - #metadata h2, - #credits p { - color: #eee; - } - - #title { - color: #ddd; - } - - #about p, - #credits summary { - color: #ccc; - } - - #home h1, #error h1 { - color: #eee; - } - - #home p, #error p{ - color: #ddd; - } - - #search-input { - background-color: #ddd; - } - - #search-page h1 { - color: #eee; - } - - #search-item { - border: 1px solid #888; - } - - #search-item h2 { - color: #ddd; - } - - #search-item span { - color: #bbb; - } -} diff --git a/style/album.css b/style/album.css new file mode 100644 index 0000000..59335b3 --- /dev/null +++ b/style/album.css @@ -0,0 +1,14 @@ +#album-artwork { + width: 24rem; + border-radius: 3px; + box-shadow: 0 1px 1px #ddd; +} + +#album-tracklist { + display: flex; + flex-direction: column; + gap: 1rem; + flex-basis: 0; + flex-shrink: 0; + flex-grow: 1; +} diff --git a/style/annotation.css b/style/annotation.css new file mode 100644 index 0000000..ee9ed07 --- /dev/null +++ b/style/annotation.css @@ -0,0 +1,34 @@ +.annotation #iframed-link { + font-weight: 500; + background-color: #ffcd38; + padding: 2px 6px; +} + +.annotation { + padding: 1rem; + border-radius: 4px; + background: #eee; + border: 1px solid #ddd; + color: #222; +} + +.annotation img { + max-width: 100%; + height: auto; +} + +.annotation a { + background: none; + font-weight: 500; +} + +.annotation ul { + padding-left: 1em; +} + +@media (prefers-color-scheme: dark) { + .annotation { + background-color: #272d44; + color: inherit; + } +} diff --git a/style/error.css b/style/error.css new file mode 100644 index 0000000..6036ede --- /dev/null +++ b/style/error.css @@ -0,0 +1,31 @@ +#error { + display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; + justify-content: center; + padding: 2rem; + flex-grow: 1; +} + +#error h1 { + font-size: 5rem; + color: #111; +} + +#error p { + text-transform: uppercase; + font-size: 1.6rem; + color: #222; + text-align: center; +} + +@media (prefers-color-scheme: dark) { + #error h1 { + color: #eee; + } + + #error p { + color: #ddd; + } +} diff --git a/style/footer.css b/style/footer.css new file mode 100644 index 0000000..2a7e073 --- /dev/null +++ b/style/footer.css @@ -0,0 +1,48 @@ +footer { + background-color: #ffcd38; + padding: 1rem 0; +} + +footer a { + font-weight: 500; + color: #1b1a17; + transition: 0.3s ease text-decoration; + font-size: 1.4rem; + text-transform: uppercase; +} + +footer a:hover { + text-decoration: underline; +} + +#footer-container { + width: 1024px; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; +} + +#footer-links { + display: flex; + gap: 1rem; +} + +#version { + font-size: 1.3rem; + color: #1b1b1b; +} + +@media screen and (max-width: 1080px) { + #footer_container { + width: 100%; + padding: 0 2rem; + box-sizing: border-box; + } +} + +@media (prefers-color-scheme: dark) { + footer { + background-color: #fec260; + } +} diff --git a/style/home.css b/style/home.css new file mode 100644 index 0000000..fdd34bf --- /dev/null +++ b/style/home.css @@ -0,0 +1,52 @@ +#home { + display: flex; + flex-direction: column; + gap: 1.5rem; + align-items: center; + padding: 2rem; + flex-grow: 1; +} + +#home div { + text-align: center; +} + +#home h1 { + font-weight: 600; + font-size: 2.2rem; + color: #222; +} + +#home p { + color: #333; +} + +#home code { + background-color: #eee; + padding: 0.3rem 1rem; + border-radius: 0.5rem; + color: #333; +} + +#search-input { + width: 100%; + padding: 1rem 2rem; + box-sizing: border-box; + border-radius: 5px; + border: 1px solid #ddd; + color: #222; +} + +@media (prefers-color-scheme: dark) { + #home h1 { + color: #eee; + } + + #home p { + color: #ddd; + } + + #search-input { + background-color: #ddd; + } +} diff --git a/style/layout.css b/style/layout.css new file mode 100644 index 0000000..3fef342 --- /dev/null +++ b/style/layout.css @@ -0,0 +1,30 @@ +#app { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +#container { + display: grid; + padding: 5rem 0; + grid-template-columns: 24rem calc(1024px - 56rem) 24rem; + width: 1024px; + margin: 0 auto; + gap: 4rem; + flex: 1; +} + +.main { + flex-grow: 1; +} + +@media screen and (max-width: 1080px) { + #container { + padding: 3rem 2rem; + display: flex; + flex-direction: column; + gap: 3rem; + width: calc(100vw - 4rem); + ; + } +} diff --git a/style/lyrics.css b/style/lyrics.css new file mode 100644 index 0000000..25cec9d --- /dev/null +++ b/style/lyrics.css @@ -0,0 +1,135 @@ +#lyrics { + color: #171717; + line-height: 2.5rem; + flex-basis: 0; + flex-shrink: 0; + flex-grow: 1; +} + +#lyrics a { + color: inherit; + background-color: #ddd; + color: inherit; +} + +#lyrics a:hover { + background-color: #ccc; +} + +#metadata { + display: flex; + flex-direction: column; + gap: 2rem; + flex-basis: 0; +} + +#metadata h1 { + font-size: 2rem; + color: #171717; +} + +#metadata h2 { + font-size: 1.4rem; + color: #1e1e1e; + font-weight: 500; +} + +#metadata-info { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +#info { + display: flex; + flex-direction: column; + gap: 2rem; + flex-basis: 0; +} + +#about { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +#about p { + font-size: 1.4rem; + color: #171717; + line-height: 1.8rem; + cursor: pointer; +} + +#title { + font-size: 2rem; + color: #1b1a17; +} + + +#lyrics-album-container { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +#credits { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + + +#credits summary { + font-size: 1.4rem; + cursor: pointer; + color: #1e1e1e; +} + +#credits p { + font-size: 1.3rem; + padding: 0.5rem; + color: #171717; +} + +.hidden { + display: none; +} + +@media screen and (max-width: 1080px) { + #metadata { + align-items: center; + } +} + +@media (prefers-color-scheme: dark) { + #lyrics { + color: #ccc; + } + + #lyrics a { + background-color: #272d44; + color: inherit; + } + + #lyrics a:hover { + background-color: #32384f; + } + + #metadata h1 { + color: #ddd; + } + + #metadata h2, + #credits p { + color: #eee; + } + + #title { + color: #ddd; + } + + #about p, + #credits summary { + color: #ccc; + } +} diff --git a/style/main.css b/style/main.css new file mode 100644 index 0000000..a9d1a6c --- /dev/null +++ b/style/main.css @@ -0,0 +1,64 @@ +/* inter-regular - cyrillic_greek_latin_vietnamese */ +@font-face { + font-display: swap; + /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + src: url('/static/fonts/inter-v12-cyrillic_greek_latin_vietnamese-regular.woff2') format('woff2'), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url('/static/fonts/inter-v12-cyrillic_greek_latin_vietnamese-regular.woff') format('woff'); + /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* inter-500 - cyrillic_greek_latin_vietnamese */ +@font-face { + font-display: swap; + /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + src: url('/static/fonts/inter-v12-cyrillic_greek_latin_vietnamese-500.woff2') format('woff2'), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url('/static/fonts/inter-v12-cyrillic_greek_latin_vietnamese-500.woff') format('woff'); + /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* inter-700 - cyrillic_greek_latin_vietnamese */ +@font-face { + font-display: swap; + /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + src: url('/static/fonts/inter-v12-cyrillic_greek_latin_vietnamese-700.woff2') format('woff2'), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url('/static/fonts/inter-v12-cyrillic_greek_latin_vietnamese-700.woff') format('woff'); + /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +* { + margin: 0; + padding: 0; +} + +html { + font-size: 62.5%; +} + +body { + font-size: 1.5rem; + font-family: inter; + background-color: #f9f9f9; +} + + +a { + text-decoration: none; +} + +@media (prefers-color-scheme: dark) { + body { + background-color: #181d31; + } +} diff --git a/style/navbar.css b/style/navbar.css new file mode 100644 index 0000000..c4f3f5c --- /dev/null +++ b/style/navbar.css @@ -0,0 +1,17 @@ +nav { + background-color: #ffcd38; + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem; +} + +nav img { + width: 50px; +} + +@media (prefers-color-scheme: dark) { + nav { + background-color: #fec260; + } +} diff --git a/style/search.css b/style/search.css new file mode 100644 index 0000000..4764891 --- /dev/null +++ b/style/search.css @@ -0,0 +1,114 @@ +#search-page { + display: flex; + flex-direction: column; + gap: 3rem; + padding: 2rem 1rem; +} + +@media screen and (min-width: 800px) { + #search-page { + width: 80rem; + margin: 0 auto; + } +} + +#search-results { + display: flex; + flex-direction: column; + gap: 1rem; +} + +#search-results h1 { + text-align: center; + color: #111; + font-size: 2.5rem; +} + +#search-item { + display: flex; + height: 8rem; + border: 1px solid #eee; + border-radius: 5px; + gap: 1rem; + padding: 1rem; + box-shadow: 0 1px 1px #ddd; +} + +#search-item h2 { + font-size: 1.8rem; + color: #222; +} + +#search-item span { + font-size: 1.3rem; + color: #333; +} + +#search-item img { + width: 8rem; + border-radius: 5px; +} + +#search-input { + width: 100%; + padding: 1rem 2rem; + box-sizing: border-box; + border-radius: 5px; + border: 1px solid #ddd; + color: #222; +} + +#search-results { + display: flex; + flex-direction: column; + gap: 1rem; +} + +#search-results h1 { + text-align: center; + color: #111; + font-size: 2.5rem; +} + +#search-item { + display: flex; + height: 8rem; + border: 1px solid #eee; + border-radius: 5px; + gap: 1rem; + padding: 1rem; + box-shadow: 0 1px 1px #ddd; +} + +#search-item h2 { + font-size: 1.8rem; + color: #222; +} + +#search-item span { + font-size: 1.3rem; + color: #333; +} + +#search-item img { + width: 8rem; + border-radius: 5px; +} + +@media (prefers-color-scheme: dark) { + #search-page h1 { + color: #eee; + } + + #search-item { + border: 1px solid #888; + } + + #search-item h2 { + color: #ddd; + } + + #search-item span { + color: #bbb; + } +}