bundling de css usando o esbuild

6 files changed, 72 insertions, 62 deletions

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/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/static/style.css b/styles/base.css
index 91362c0..e4f3bdd 100644
--- a/static/style.css
+++ b/styles/base.css
@@ -57,11 +57,21 @@ pre {
 	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;
@@ -70,46 +80,12 @@ pre {
 	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;
 }
@@ -119,39 +95,14 @@ pre {
 	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/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 */
+}
+