krz/hn

A brutalist web client for Hacker News. brutalist hacker-news minimal web-client https://hn.krz.sh

Commit 08a5a5cb70

08a5a5cb7022ba350df3de3ca5cd8c9d9467baad

parent: 5c33255b6a

Unsigned

cmc <hello@cleberg.net> · 2023-06-01 15:45 UTC 

enhancement: add CSS and minification

Layout: unified · split

README.md +9 −1
@@ -13,13 +13,14 @@ how to deploy the project on a live system.
13 13
14- A web server (e.g., Nginx or Apache) 14- A web server (e.g., Nginx or Apache)
15- PHP 15- PHP
16- Optional: [minify](https://github.com/tdewolff/minify/tree/master/cmd/minify)
16 17
17### Installing 18### Installing
18 19
19Install the dependencies, using the web server of your choice: 20Install the dependencies, using the web server of your choice:
20 21
21``` 22```
22sudo apt install nginx-full php 23sudo apt install nginx-full php minify
23``` 24```
24 25
25Clone the repo: 26Clone the repo:
@@ -28,6 +29,13 @@ Clone the repo:
28git clone https://git.sr.ht/~cmc/hn/ 29git clone https://git.sr.ht/~cmc/hn/
29``` 30```
30 31
32If you need to minify CSS changes:
33
34```
35# executed in the top-level `hn` dir
36minify -o static/styles.min.css static/styles.css
37```
38
31## Deployment 39## Deployment
32 40
33Deployment is as easy as copying the code to your webroot. No special packages 41Deployment is as easy as copying the code to your webroot. No special packages
static/styles.css added +43
@@ -0,0 +1,43 @@
1/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2button,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}
3
4/* custom css */
5body {
6 padding: 1rem;
7 font-family: system-ui, sans-serif;
8}
9
10body > main > div {
11 margin-bottom: 1rem;
12}
13
14body > main > div > p {
15 margin-top: 0.5rem;
16}
17
18a {
19 text-decoration: none;
20}
21
22footer {
23 border-top: 1px solid black;
24}
25
26@media (prefers-color-scheme: dark) {
27 body {
28 background-color: #000;
29 color: #ccc;
30 }
31
32 h1,h2,h3,h4,h5,h6 {
33 color: #fff;
34 }
35
36 a,a:hover,a:visited {
37 color: #0f0;
38 }
39
40 footer {
41 border-color: #ccc;
42 }
43}
static/styles.min.css added +1
@@ -0,0 +1 @@
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
templates/template.html +1 −1
@@ -10,7 +10,7 @@
10 <meta name="description" content="{page_description}"> 10 <meta name="description" content="{page_description}">
11 <link rel="canonical" href="{canoncial_url}"> 11 <link rel="canonical" href="{canoncial_url}">
12 <link rel="icon" href="/favicon.ico"> 12 <link rel="icon" href="/favicon.ico">
13 <link rel="stylesheet" href="/static/styles.css"> 13 <link rel="stylesheet" href="/static/styles.min.css">
14</head> 14</head>
15 15
16<body> 16<body>