From d2dd8aca869535eae62a8376a3060aa4d2ce256e Mon Sep 17 00:00:00 2001 From: esquizo Date: Sun, 14 Jun 2026 10:18:36 -0300 Subject: bundling de css usando o esbuild --- .gitignore | 1 + Makefile | 7 ++- static/style.css | 157 --------------------------------------------------- style.css | 3 + styles/base.css | 108 +++++++++++++++++++++++++++++++++++ styles/navbar.css | 32 +++++++++++ styles/scanlines.css | 20 +++++++ 7 files changed, 169 insertions(+), 159 deletions(-) delete mode 100644 static/style.css create mode 100644 style.css create mode 100644 styles/base.css create mode 100644 styles/navbar.css create mode 100644 styles/scanlines.css diff --git a/.gitignore b/.gitignore index 2d19fc7..44b8ac0 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ *.html +static/style.css diff --git a/Makefile b/Makefile index 6371769..bd13903 100644 --- a/Makefile +++ b/Makefile @@ -15,10 +15,10 @@ RSS = blog/index.rss URL ?= http://localhost:8000 -all: $(PAGES) blog/index.rss +all: $(PAGES) blog/index.rss static/style.css clean: - rm -f $(PAGES) $(RSS) dist.tar.gz + rm -f $(PAGES) $(RSS) dist.tar.gz static/style.css dist: all tar -cv static $(RSS) $(PAGES) | gzip > dist.tar.gz @@ -30,6 +30,9 @@ blog/index.rss: blog/posts.csv blog/index.html: blog/posts.csv templates/base.m4 m4 -DPAGECONTENT="$$(./csv2index.sh /blog < $<)" templates/base.m4 > $@ +static/style.css: style.css styles/base.css styles/navbar.css styles/scanlines.css + esbuild style.css --bundle --minify --outfile=static/style.css + %.html: %.md templates/base.m4 m4 -DPAGECONTENT="$$(./genpage.sh < $<)" templates/base.m4 > $@ diff --git a/static/style.css b/static/style.css deleted file mode 100644 index 91362c0..0000000 --- a/static/style.css +++ /dev/null @@ -1,157 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - color: #999; - background-color: #000; - - width: 90%; - max-width: 1000px; - margin: 20px auto; - font-size: 16px; -} - -header { - margin: auto; -} - -header h1 { - display: inline; - margin: 1px; -} - -header h2 { - margin: 1px; -} - -main { - display: flex; - flex-direction: column; - line-height: 1.6; -} - -main > div { - margin: 5px; -} - -footer { - font-size: 0.8rem; - text-align: center; - opacity: 0.7; -} - -a, a:visited { - color: #0077aa; -} - -a:hover { - color: #00aaee; -} - -pre { - max-width: 100%; - overflow: auto; - background: #050505; - padding: 10px; - border: 1px dashed #999; -} - -.header-container { - display: flex; - flex-direction: column; -} - -.content { - padding: 5px; - flex-grow: 1; - overflow: auto; - border: dashed 1px #999; - background: #050505; -} - -.navbar { - display: block; - padding-top: 5px; -} - -.navbar ul { - list-style-type: none; - margin: 0px; - padding: 0px; - display: flex; - flex-wrap: wrap; - gap: 10px; -} - -.navbar li a { - display: block; - color: #999; - text-decoration: none; - border: dashed 1px; - text-align: center; - padding: 5px 10px; -} - -.navbar li a:hover { - display: block; - color: #000; - background-color: #999; -} - -.bottom-align { - display: flex; - flex-direction: column; - justify-content: flex-end; -} - -.esquizo { - width: 100px; - display: inline; -} - -.image-container { - text-align: center; -} - -.image-container > img { - display: inline; - max-width: 100%; -} - -.scanlines::before { - content: " "; - display: block; - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: repeating-linear-gradient( - rgba(18, 16, 16, 0) 0px, - rgba(18, 16, 16, 0) 1px, - rgba(0, 0, 0, 0.25) 1px, - rgba(0, 0, 0, 0.25) 2px - ); - background-size: 100% 100%; - z-index: 10; - pointer-events: none; /* Allows users to click elements underneath */ -} - -@media (min-width: 1000px) { - .header-container { - justify-content: center; - flex-direction: row; - } - - .navbar ul { - display: flex; - flex-direction: column; - gap: 0px; - width: 125px; - } - - main { - flex-direction: row; - } -} diff --git a/style.css b/style.css new file mode 100644 index 0000000..bb893b5 --- /dev/null +++ b/style.css @@ -0,0 +1,3 @@ +@import 'styles/base.css'; +@import 'styles/navbar.css'; +@import 'styles/scanlines.css'; diff --git a/styles/base.css b/styles/base.css new file mode 100644 index 0000000..e4f3bdd --- /dev/null +++ b/styles/base.css @@ -0,0 +1,108 @@ +* { + box-sizing: border-box; +} + +body { + color: #999; + background-color: #000; + + width: 90%; + max-width: 1000px; + margin: 20px auto; + font-size: 16px; +} + +header { + margin: auto; +} + +header h1 { + display: inline; + margin: 1px; +} + +header h2 { + margin: 1px; +} + +main { + display: flex; + flex-direction: column; + line-height: 1.6; +} + +main > div { + margin: 5px; +} + +footer { + font-size: 0.8rem; + text-align: center; + opacity: 0.7; +} + +a, a:visited { + color: #0077aa; +} + +a:hover { + color: #00aaee; +} + +pre { + max-width: 100%; + overflow: auto; + background: #050505; + padding: 10px; + border: 1px dashed #999; +} + +nav { + display: block; + padding-top: 5px; +} + +.header-container { + display: flex; + flex-direction: column; +} + +.esquizo { + width: 100px; + display: inline; +} + +.content { + padding: 5px; + flex-grow: 1; + overflow: auto; + border: dashed 1px #999; + background: #050505; +} + +.bottom-align { + display: flex; + flex-direction: column; + justify-content: flex-end; +} + +.image-container { + text-align: center; +} + +.image-container > img { + display: inline; + max-width: 100%; +} + +@media (min-width: 1000px) { + .header-container { + justify-content: center; + flex-direction: row; + } + + main { + flex-direction: row; + } +} + diff --git a/styles/navbar.css b/styles/navbar.css new file mode 100644 index 0000000..2b70356 --- /dev/null +++ b/styles/navbar.css @@ -0,0 +1,32 @@ +.navbar ul { + list-style-type: none; + margin: 0px; + padding: 0px; + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.navbar li a { + display: block; + color: #999; + text-decoration: none; + border: dashed 1px; + text-align: center; + padding: 5px 10px; +} + +.navbar li a:hover { + display: block; + color: #000; + background-color: #999; +} + +@media (min-width: 1000px) { + .navbar ul { + display: flex; + flex-direction: column; + gap: 0px; + width: 125px; + } +} diff --git a/styles/scanlines.css b/styles/scanlines.css new file mode 100644 index 0000000..e48074b --- /dev/null +++ b/styles/scanlines.css @@ -0,0 +1,20 @@ + +.scanlines::before { + content: " "; + display: block; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: repeating-linear-gradient( + rgba(18, 16, 16, 0) 0px, + rgba(18, 16, 16, 0) 1px, + rgba(0, 0, 0, 0.25) 1px, + rgba(0, 0, 0, 0.25) 2px + ); + background-size: 100% 100%; + z-index: 10; + pointer-events: none; /* Allows users to click elements underneath */ +} + -- cgit v1.2.3