enhancement: add CSS and minification

4 files changed, 54 insertions, 2 deletions

diff --git a/README.md b/README.md
index 7d24b7e..54bf1d8 100644
--- a/README.md
+++ b/README.md
@@ -13,13 +13,14 @@ how to deploy the project on a live system.
 
 - A web server (e.g., Nginx or Apache)
 - PHP
+- Optional: [minify](https://github.com/tdewolff/minify/tree/master/cmd/minify)
 
 ### Installing
 
 Install the dependencies, using the web server of your choice:
 
 ```
-sudo apt install nginx-full php
+sudo apt install nginx-full php minify
 ```
 
 Clone the repo:
@@ -28,6 +29,13 @@ Clone the repo:
 git clone https://git.sr.ht/~cmc/hn/
 ```
 
+If you need to minify CSS changes:
+
+```
+# executed in the top-level `hn` dir
+minify -o static/styles.min.css static/styles.css
+```
+
 ## Deployment
 
 Deployment is as easy as copying the code to your webroot. No special packages 
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..5f847f3
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,43 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
+
+/* custom css */
+body {
+        padding: 1rem;
+        font-family: system-ui, sans-serif;
+}
+
+body > main > div {
+	margin-bottom: 1rem;
+}
+
+body > main > div > p {
+	margin-top: 0.5rem;
+}
+
+a {
+	text-decoration: none;
+}
+
+footer {
+	border-top: 1px solid black;
+}
+
+@media (prefers-color-scheme: dark) {
+        body {
+        	background-color: #000;
+        	color: #ccc;
+        }
+        
+        h1,h2,h3,h4,h5,h6 {
+        	color: #fff;
+    	}
+        
+        a,a:hover,a:visited {
+        	color: #0f0;
+        }
+        
+        footer {
+        	border-color: #ccc;
+    	}
+}
diff --git a/static/styles.min.css b/static/styles.min.css
new file mode 100644
index 0000000..3d34535
--- /dev/null
+++ b/static/styles.min.css
@@ -0,0 +1 @@
+/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:initial}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}body{padding:1rem;font-family:system-ui,sans-serif}body>main>div{margin-bottom:1rem}body>main>div>p{margin-top:.5rem}a{text-decoration:none}footer{border-top:1px solid #000}@media(prefers-color-scheme:dark){body{background-color:#000;color:#ccc}h1,h2,h3,h4,h5,h6{color:#fff}a,a:hover,a:visited{color:#0f0}footer{border-color:#ccc}}
\ No newline at end of file
diff --git a/templates/template.html b/templates/template.html
index a531a3b..31272ab 100644
--- a/templates/template.html
+++ b/templates/template.html
@@ -10,7 +10,7 @@
 	<meta name="description" content="{page_description}">
 	<link rel="canonical" href="{canoncial_url}">
 	<link rel="icon" href="/favicon.ico">
-	<link rel="stylesheet" href="/static/styles.css">
+	<link rel="stylesheet" href="/static/styles.min.css">
 </head>
 
 <body>