ngn/dumb
1
0
Fork 0
Code Issues 1 Pull Requests 3 Actions Packages Activity

refactor: add esbuild and modulerize css into seperate files

Browse Source
This commit is contained in:
rramiachraf 2024-03-06 17:32:10 +01:00
parent edc2b04198
commit c8747c0182
13 changed files with 548 additions and 463 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,2 +1,4 @@
dumb dumb
views/*_templ.go views/*_templ.go
esbuild
static/*.css

10
Makefile
View File

@ -1,8 +1,12 @@
VERSION=`git rev-parse --short HEAD` VERSION=`git rev-parse --short HEAD`
gentempl: gentempl:
@command -v templ &> /dev/null || go install github.com/a-h/templ/cmd/templ@latest command -v templ &> /dev/null || go install github.com/a-h/templ/cmd/templ@latest
build:gentempl esbuild:
templ generate && go build -ldflags="-X 'github.com/rramiachraf/dumb/data.Version=$(VERSION)' -s -w" [ ! -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: fmt:
templ fmt . templ fmt .

460
static/style.css
View File

@ -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;
}
}

14
style/album.css Normal file
View File

@ -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;
}

34
style/annotation.css Normal file
View File

@ -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;
}
}

31
style/error.css Normal file
View File

@ -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;
}
}

48
style/footer.css Normal file
View File

@ -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;
}
}

52
style/home.css Normal file
View File

@ -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;
}
}

30
style/layout.css Normal file
View File

@ -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);
;
}
}

135
style/lyrics.css Normal file
View File

@ -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;
}
}

64
style/main.css Normal file
View File

@ -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;
}
}

17
style/navbar.css Normal file
View File

@ -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;
}
}

114
style/search.css Normal file
View File

@ -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;
}
}