From b4bb95e339b2769730d40979d4f7f36c5dfed2dc Mon Sep 17 00:00:00 2001
From: SimonFJ20 <simonfromjakobsen@gmail.com>
Date: Wed, 15 May 2024 02:51:37 +0200
Subject: [PATCH] login register

---
 public/favicon.ico                            | Bin 11454 -> 13054 bytes
 public/index.html                             |  17 +++--
 public/login/index.html                       |  36 +++++++++++
 public/reader/index.html                      |  15 +++--
 public/register/index.html                    |  36 +++++++++++
 .../{reader/style.css => static/common.css}   |  21 ++----
 public/static/index.css                       |  25 ++++++++
 public/{script.js => static/index.js}         |   2 +-
 public/static/login.css                       |  47 ++++++++++++++
 public/static/reader.css                      |  18 ++++++
 public/{reader/script.js => static/reader.js} |   0
 public/static/register.css                    |  47 ++++++++++++++
 public/style.css                              |  60 ------------------
 13 files changed, 236 insertions(+), 88 deletions(-)
 create mode 100644 public/login/index.html
 create mode 100644 public/register/index.html
 rename public/{reader/style.css => static/common.css} (70%)
 create mode 100644 public/static/index.css
 rename public/{script.js => static/index.js} (97%)
 create mode 100644 public/static/login.css
 create mode 100644 public/static/reader.css
 rename public/{reader/script.js => static/reader.js} (100%)
 create mode 100644 public/static/register.css
 delete mode 100644 public/style.css

diff --git a/public/favicon.ico b/public/favicon.ico
index a9ebba4c1f73d2af822b7f50a1a8c83e67292d78..add4bd44ff8e50207b50b2bc7f2ed1413b06920a 100644
GIT binary patch
literal 13054
zcmciI1(Y4d5(eN60TMVs(BK3oxI@t3?(XjH4hed2cMI<Bp5X58!GpUdq~86St!3D^
zb~gt)XVP<LdV1>bs`{&{XB!&2)c*D9(@^_=%7!6xH8k{WXlUqNJ8G92cB>t(x7J1)
zX{5-bYuBz#=Xq`9kw=bEMj0i>8*jXFZ}!<|kLRC%KD6P(hnN2M-+zy<zy3OIy6L7k
z>7<ilz<>d<=bn4U8f&Z(M;viPy!hgaO=CTi&y|NO^9&m{EasYPu9$MlDP!uXr;aJ6
zm?C=h>J^huK6&))*|YT1O*dUkHPuvQ%sAtWQ^rg*(L^!nq?3l<<BmISj6eSP<$SWq
zCJXXA;DIlX#OF7BV~#my88_BgW5p9sJdvW6{);cZh*M8JHMZDdi}0@Q-Mg2=n)L47
zJLaE%{#bnR#bfQY*N&Zc-Z{41a?99myY1q(+ir`YLx(oa_2-{|2KnckZ@!peh8fBM
zpL1AYOl;nhnCG5*?s9+ZvB!=v#uy`Jn{BqHIpL^cOq{OObl!wFagI9bsPXZ~9|u|J
z;ri>ZkNx-GzsNM<gcF7}BhSPWPaHGPJaf?Zth3G<%P+rt88gp3^TZ~bY!Vx7v{AVR
zGrgJ1obSH-ZW-UFPoE-l;+bZeX$tl^=9r`0w|0|EGD*Qpzl$ugNc8L1ui#=Y*%Djo
zu!^rsmoDL;KSz!w$7i2?7U!RTer&M82C?X(ixxexsp+SmzQ|$S=bd-n@_sVSGRrKn
z;)*NAs;jOVYpu0bISx4BfY@-u4GYfeuDh<uZWms7;i7Z4YOUBS{bdi&1QSe9)^N!s
zmrN)v_M2_CS+Q|8m9_~}VsR~P)ph!VZ{L0Qjbo2Jw!D{p%sJ<rG2@IgmUZ+SRzAVj
z7Fb|`CL3LEz4c<1RaS{L*IYBsJMX;Me*5jq7&iRlk3SX}pLyn)vNr6G9l}G8&e;cD
zTE`!L_@Rt{`|Y<|#D;U4-(W9%EOnRI^e}sbuN`;Xab-Q(9-Ub8zJ2?~f(tGfE3B|W
z!NiwfW25e|QTkqg{q+M*HoEuTd&e%j>{2jqzWL_y{`>D2du7`&uxGksi?F%YR)eY9
z+8VpsYO58y?AEPY=~KU(Zn|l(i<xGcsqh`WEwjur!4BCZ3~(CbH%@_V_uY4oU3c9z
z%nOro?B|$cjw!xFm#3X}THJc;t;HT-WCznuJ8jX~5=$)6mbliw&DQ3_wVSC+va!d-
z7F(>WFWt})pIdg>WlLOGXPtG5PGBVWLJKVv8*jXE@Ht#c=i<i>JM0ioJ@r(HEe9QR
zP@I1H>2c+iS4RK-{mXo809Sqg{rCS6uT3BwxcQIC8h`K+81VxiBRjn;wbW9@hpaUY
z*?Q}(<EW#KDlzcTLl2F;_S!3U+G(ev(}NE_xU2~qHtz7l50AU<x+~s!=bgCr+H2#M
zTW*OfuDBuw4<1}>lJ4lZ+BzV9T|=sK^GiOk+;Ynm{n5+POE2BTD|j0BoN>k(apH+5
z#tA2!5SLtXNt|-ZDP>*w9L{9pu=C^BUVAMbdE}A!@WT(|-h1zjd+xa>9)9@Y*l)l6
zip^KwUzgx@49<7ROT>CMMxXeDP4X%6oqxe~)>&u81s7ZpH{X17+;GDUao~Xm7JZ$0
z=9zKnrI(g5k3IHSi7_91@Ik@$?YG~?WtUwRufP6!;TagKtqyVP9$I~mJOL&#m=CVI
z?z%;GxY!qL7hZT_+<o`mB}X~>=%WjVz)pYkYn=``<d70$=xoT4A@R~nFBQG>M=|1!
zH{OUxAAPjx)pZM9=L1bIs-1|ve2|^uK|CSepM3Jkas2Ve7k)hZ?6V91yYJf7S6^N1
z@PP*&C_eYlLl2d8uon0P-)ytZHid(pe){Q>%iMqe{Y|f}Q`}As&zIqUF#(^XKf%Ff
z#j%xETB-25yal()IpG)Y=#lTaMxSzW{)w0I5Uek}@IuK0`DV3sO6WQs%6H)u{E6q;
zCyaC{cNZt{p8Ikt^6s|VZo&6(&AI2E8;?K!c(K8A&N-*7h1h8xIV7Kz!^8I8d+)`K
zH{O`9Eqxv0);%;|B<F;YO~Hm+$VaDgDfuC+@<(}xb#RFFIFs(^o*l?f#0&8c{+C~V
zIi7p&xp?K3SBekn<@DL=7P^BE<otShleo9~>Z=!7x7uo}qN6?b*rVt`oa3Jkb%mVK
zI#>g_r<_NQ=Dsz;rSyeM@uwO<uBM)lUy3u?Iw)@4!*YK9BWGE8<&{fJ^V`7=<sTPc
zd~pmKG^q5~Tyss~9_t{7^c>yELHTL=pZw&TZ@wv*@a9`@y;ZQi`R1GDJZtKdp>E+j
z@IcNjXJMaYlyhyn?Y4y<;lr7C-g#%>Ke9de;DbdUYJ1Na%m47HSb}e@$>*PcUTiS?
zPd@pi#6-HIPk4>1whoBgp&`{do#PGhPpv^0VgviZ6?CUAfAYyE<EyW}Dl)Q7KBt!N
z(W6Jvxv^ro9EFdHoow@`pMDB)9!?nLY3x>PeD>LA<D!c$Y7(bI!nZT1X|l?R`i<}4
z6uC2ByZrLYLyanTq$~KuY&hg_>H_%yeY06I^DTN7!`ZX^%w7(R)&@p%$W6ryWAD4~
zz9vc95xw2pIgxkbH@uj3Y5&AwZ$f?o-|e^G9s>ssEcK0iQjL$_<)rEc`Lmn_-^1|h
zufG;tY#6>@e)*;B$M8dYI$wVIWf^B47|jV|wY3YPl>yZ`#BF(|n1&DVomx&T7O&W(
zn$7#kDKCK&Cy<%#$;aqWTsNMr(VzT;ABuN>{P9P@{M~oo6<xyl+i$-Wd&Q;3;GV48
z$=Hhc?OslNcui~;>(r_l=hQ6x&K?DQsBz?tFv`E=l<bb*Sbu9l*VaY-f5#nnlo)3{
z@DVQZE<A!$=!?C&1`o_^^wn2iE$fl;brxej&sT5>E*B5@5B=d4GUGq>41K}J@8tdP
zu~#_QrQF4MdKAOySlpJ!<T;<iC-@Q$c&rc1?A-5+8+bZfyUJ=|Kt8LM6_eHDY6ToG
zK4&d1Z{$Dh&B5N(-*8=Z)m0^b#(DOV*fRUH|4X;@#OCOn{P4o)Iy<CSbE+k*owcxj
z?3&GIYeD>WFXgka&=+j-D|H^M;uy}y@obadi)(ZPn;5}o@QyufcC1zxN7M`Qm5)C9
zs7Y>k#Ru~1(?;bn){HHvC+XT@-!)siV44lc=k($e{u9IG9<Zss<zZx2<KYLj0lyLt
zyq~?o2Lm0k=Od3iG7dZJu);HJ7!L9~$NT1jTioM!^aO{vZtcu%E#;>Cwc46NX!B=2
zC+C949*-Do|4N?4kJLGAjcwYCz>U_IU%*Fy<fIp|4hP{EH4wXnOALS?HZ?Kbi8b~+
zt*iCHY2N2P8@C2H!J6>JY;6K+b~B%$A9%zDdoE%i8zm!b_K?`4I)FdOvE?3gWbX*)
ziJfW+F(3D4e8(GNpfTzpHf%lFzZ^&Y;2m`3S!=?tts4%8k-cYY2BFQL`3yPvo_#Sk
z%Er_HJMOq+u}^%Vrr}d!h1#2*?TgyOV8i@WOt;6WW{{)Wf591SkpAdgKB@*(Q;k0Q
z=tXb#Z15Ld;b_>{r<#iX;m_74pk_DonSJ)zr}!M*u}yliuDMSuF2c(n*{c`=FPZEq
zkqiIHU0`E#;+^Z{!;#_$|HM!D(we9T<$ZD`xh@;>e*O&~+hDiV)(k?MKl3^3$2MW|
zPJ6oel>X?2Z;BWE%3AOde2Eiq0XwD>--|LYlheS=cf>fps-9K9I>dCmgHNni=79Xz
zI>>R^sqa16+62?W&3ul{Sx>P+4bFC)i;48c7wr@BFLuYqtcATNxm@m1sM%qM1MfTV
zAADk-L;REH;1n^?w-$MeG49E==^Pi)xqXjpEkJ1VQa+bG-?3i49r7=j<TUC(`m^uC
zUg#D-zymWo6_YbA(+xi1b1;&du3&QRepQb!;aG<;bS@WQqxKGPm)0hjR&FM??Cs0L
zCl2Bo_%gR)fBX*z;&<^vE`|Ft|6-GAfABd^nX`U{Sv>@&d*a`xpMF|$HtPVNdBsS+
zp~2V+gbrO!e7+(1zD<9yu~U4io`6j(;dkE6SF+~eUvew<NOt;z?dP9=F7Xl8tbgzg
zT^Z+^`oTGD@=|kHGjTHUk*`BQS{c+FA0EVI>{8t%rtv-bi#R4$>E$$XD!CQBe2kpr
zCAY)hB)|g;Tg=~TBC$h#=z995o)20td3v^1MDNh$oP#a;{^wg2`@}5{d+lrz--&DD
zE)L}*c!2)cCT__+6*^;g>Q^}FH0vPP)PZ6@eu3Gz<XiK=XkD`<klH$T&GU}-IfouT
z{)h8%3)|##_Mh>i8c3c&XJQ$A;+<H|m*7i#gAX?O4n4udm;9|k9%^Iw@TuqJd2CpW
zu^x?WNMfnU(ml`X>2o4^lW*eUpja;-lf&RwIf(pIjwrUn2B)}f?b#-o=!!n*Mhu`Y
zxO~&E9x%e~V848p|2gOn2i4l}+VN6i8Bu(rjW$~O#_t=0?+fxV`HI{VF13<xDC|@X
z&+q7t-_RRuaPcX<zkNx3@Ko`+2RHpC@6sQx#WB^E_&VF?T=v}k{RI1zm(riyi~i&*
zFsjw%igbrd;luT85he$j@h43DEYIP~zi)C5ADy#n`xR^xK0cnUvzV&S<y`V?I#j>l
zPx+@DOl*M9L5FG~d4_ySoxrA&OUTPE^WcBEuath5J&e}E+Td9}NO$5<wyK=YYdLqP
zIfl;UF}~l*ebqX0R5q#xb>J7=B8MhR=2!RxmOS81f22bPK1rX0%~;&RwsEd?;^%Vj
zY|Zg?=6BAeXP^FtO+JQ0)e`CgI+Txz4Pv0Uz&`2Ey5pC`#Q(@lb{JfzPj;&3r|`ON
zoE|=LhTm6POL#^kPRKFYC|gzU@<AB!D4r4L#lC^H{fX2e|D!)Vn6lzOGV`g#>K^}O
zkL;37X3R8BeZ;S`wS>*JTHRWAoX9!#>Q8aPexce=4MT@8vQZq$Mq$j@jvvy_=##vz
zv0pgpw3=VT>bEhOSIeo{bhg&;x!##rk@M>Lpgc{CphGo-8c!`xhinu+F+z@w+vSjQ
zX!7Dg{^Z=X%rW7nZwG9~iFfi%eYLfPue0}Zel>&ddA_x%r&Evi4A_xapZf{yRGi58
zl{uCk9tVtiu@WZvs@%XK26;zgOfMp|Cx6XG>*i5&CO$nM^vy+{rk+>Viy885Tq9re
zT|%CXYaDVb`LQ1NuwS^H!^B>l!=(oCJxadB_N%Qud?Rwd`W|(?zcrPwu^||JFO!$r
z-(suz{l(s%yoTIr9PyD}VO7_`>bm>JnnS)T{&dvuMg&*&*(yf)8jSX}<n{jE45!-L
zpiB9UxSz3~?066kI_00RiYf9|wUzqc_fvZ<&0AHDfAhThUfl2RPsM%pFMpBS(1H5N
zAvO=FeS5&K_(yF4qh3xfcFOVk*7nKixuy1R;%RB_<}%o$wVx;clT*%<-+09iIPG=&
z=0Z2VMZhc%vR`J8s-@P_yZ@_eEy<JD>>c79dl|6XN90dzSRRS<#ZJw6)z4h}Z!mOe
zd`*wWzE{IwXI-OVn7&&yME_dfqt*|q^}Q<n;KtwI)q3~!#%J%o-}>5orSDSf``3Q!
zYn^_$zV@rUuc`0X`1}9+-^%#D4IS(IHIDnc|LZ;d{(65y^M2RH>$SeW7iC`?SAN&z
sF8!~~eh>X?eY#}-=ihj(N7vf#($}6RxOE|j-U3)Z3({BLUodO<AJtrT4*&oF

literal 11454
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
Fe*su&e&PTC

diff --git a/public/index.html b/public/index.html
index 288708a..b245da1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,17 +3,22 @@
     <head>
         <meta charset="utf-8">
         <link rel="icon" type="image/x-icon" href="/favicon.ico">
-        <link rel="stylesheet" href="style.css">
-        <script src="script.js" defer></script>
-        <title>grill blog</title>
+        <link rel="stylesheet" href="/static/common.css">
+        <link rel="stylesheet" href="/static/index.css">
+        <script src="/static/index.js" defer></script>
+        <title>Materiel</title>
     </head>
     <body>
         <header>
-            <h1>grill blog</h1>
+            <a href="/">
+                <h1>Materiel</h1>
+            </a>
         </header>
-        <div id="articles">dasdasdasd</div>
+        <main>
+            <div id="articles">dasdasdasd</div>
+        </main>
         <footer>
-            Copyright © 2024- The authors or something idk
+            Copyright © 2024 S. F. Jakobsen
         </footer>
     </body>
 </html>
diff --git a/public/login/index.html b/public/login/index.html
new file mode 100644
index 0000000..c40b742
--- /dev/null
+++ b/public/login/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <link rel="icon" type="image/x-icon" href="/favicon.ico">
+        <link rel="stylesheet" href="/static/common.css">
+        <link rel="stylesheet" href="/static/login.css">
+        <script src="/static/login.js" defer></script>
+        <title>Materiel</title>
+    </head>
+    <body>
+        <header>
+            <a href="/">
+                <h1>Materiel</h1>
+            </a>
+        </header>
+        <main>
+            <form method="post">
+                <h1>Login</h1>
+                <label for="username">Username</label>
+                <input id="username" name="username" type="text">
+                <br>
+                <label for="password">Password</label>
+                <input id="password" name="password" type="password">
+                <br>
+                <div id="action">
+                    <input type="submit" value="Login">
+                    <a href="/register">Create new account</a>
+                </div>
+            </form>
+        </main>
+        <footer>
+            Copyright © 2024 S. F. Jakobsen
+        </footer>
+    </body>
+</html>
diff --git a/public/reader/index.html b/public/reader/index.html
index 13cb320..60fb1d6 100644
--- a/public/reader/index.html
+++ b/public/reader/index.html
@@ -3,22 +3,25 @@
     <head>
         <meta charset="utf-8">
         <link rel="icon" type="image/x-icon" href="/favicon.ico">
-        <link rel="stylesheet" href="style.css">
-        <script src="script.js" defer></script>
-        <title>grill blog reader</title>
+        <link rel="stylesheet" href="/static/common.css">
+        <link rel="stylesheet" href="/static/reader.css">
+        <script src="/static/reader.js" defer></script>
+        <title>Materiel</title>
     </head>
     <body>
         <header>
-            <h1>grill blog</h1>
+            <a href="/">
+                <h1>Materiel</h1>
+            </a>
         </header>
         <main>
-            <a href="..">Go back</a>
+            <a href="/">Go back</a>
             <div id="article">
                 <p>Loading...</p>
             </div>
         </main>
         <footer>
-            Copyright © 2024- The authors or something idk
+            Copyright © 2024 S. F. Jakobsen
         </footer>
     </body>
 </html>
diff --git a/public/register/index.html b/public/register/index.html
new file mode 100644
index 0000000..4818d86
--- /dev/null
+++ b/public/register/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <link rel="icon" type="image/x-icon" href="/favicon.ico">
+        <link rel="stylesheet" href="/static/common.css">
+        <link rel="stylesheet" href="/static/register.css">
+        <script src="/static/register.js" defer></script>
+        <title>Materiel</title>
+    </head>
+    <body>
+        <header>
+            <a href="/">
+                <h1>Materiel</h1>
+            </a>
+        </header>
+        <main>
+            <form method="post">
+                <h1>Register</h1>
+                <label for="username">Username</label>
+                <input id="username" name="username" type="text">
+                <br>
+                <label for="password">Password</label>
+                <input id="password" name="password" type="password">
+                <br>
+                <div id="action">
+                    <input type="submit" value="Register">
+                    <a href="/login">Login instead</a>
+                </div>
+            </form>
+        </main>
+        <footer>
+            Copyright © 2024 S. F. Jakobsen
+        </footer>
+    </body>
+</html>
diff --git a/public/reader/style.css b/public/static/common.css
similarity index 70%
rename from public/reader/style.css
rename to public/static/common.css
index 7bfdff5..b6a615d 100644
--- a/public/reader/style.css
+++ b/public/static/common.css
@@ -1,4 +1,5 @@
 
+
 * {
     box-sizing: border-box;
 }
@@ -21,6 +22,11 @@ header {
     padding: 16px;
 }
 
+header a {
+    color: unset;
+    text-decoration: none;
+}
+
 header h1 {
     margin: 0;
 }
@@ -34,21 +40,6 @@ p {
 }
 
 main {
-    text-align: left;
-    max-width: 800px;
-    margin-left: auto;
-    margin-right: auto;
     padding-left: 16px;
     padding-right: 16px;
 }
-
-#content {
-    margin: auto;
-    max-width: 600px;
-}
-
-#content p {
-    word-wrap: normal;
-}
-
-
diff --git a/public/static/index.css b/public/static/index.css
new file mode 100644
index 0000000..39861ea
--- /dev/null
+++ b/public/static/index.css
@@ -0,0 +1,25 @@
+a {
+    color: unset;
+    text-decoration: none;
+}
+
+
+#articles {
+    text-align: left;
+    max-width: 1500px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.article {
+    border-top: 2px solid;
+    border-bottom: 2px solid;
+    margin: 16px;
+    padding-left: 32px;
+    padding-right: 32px;
+}
+
+.article:hover {
+    cursor: pointer;
+}
+
diff --git a/public/script.js b/public/static/index.js
similarity index 97%
rename from public/script.js
rename to public/static/index.js
index 8928ab3..ce27f17 100644
--- a/public/script.js
+++ b/public/static/index.js
@@ -29,7 +29,7 @@ async function main() {
     const articles = await requestArticles();
 
     articlesDiv.innerHTML = articles.map((article) => `
-        <a href="/reader/?id=${article.id}">
+        <a href="/reader?id=${article.id}">
             <div class="article">
                 <h1>${article.title}</h1>
                 </p><i>${article.author}, ${
diff --git a/public/static/login.css b/public/static/login.css
new file mode 100644
index 0000000..36766c6
--- /dev/null
+++ b/public/static/login.css
@@ -0,0 +1,47 @@
+
+
+form {
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+    align-items: start;
+    text-align: left;
+    gap: 0.2em;
+
+}
+
+br {
+    margin-top: 10px;
+}
+
+
+#action {
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    max-width: 200px;
+    align-items: start;
+    text-align: center;
+    gap: 0.2em;
+}
+
+form > *, #action > * {
+    padding: 0.5em;
+    width: 100%;
+}
+
+form h1 {
+    margin: 0;
+    padding-left: 0;
+    padding-right: 0;
+    text-align: center;
+    font-size: 1.5em;
+    border-bottom: 2px solid;
+    margin-bottom: 0.5em;
+}
+
+a {
+    color: unset;
+}
+
diff --git a/public/static/reader.css b/public/static/reader.css
new file mode 100644
index 0000000..5b8d2f7
--- /dev/null
+++ b/public/static/reader.css
@@ -0,0 +1,18 @@
+
+main {
+    text-align: left;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#content {
+    margin: auto;
+    max-width: 600px;
+}
+
+#content p {
+    word-wrap: normal;
+}
+
+
diff --git a/public/reader/script.js b/public/static/reader.js
similarity index 100%
rename from public/reader/script.js
rename to public/static/reader.js
diff --git a/public/static/register.css b/public/static/register.css
new file mode 100644
index 0000000..36766c6
--- /dev/null
+++ b/public/static/register.css
@@ -0,0 +1,47 @@
+
+
+form {
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+    align-items: start;
+    text-align: left;
+    gap: 0.2em;
+
+}
+
+br {
+    margin-top: 10px;
+}
+
+
+#action {
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    max-width: 200px;
+    align-items: start;
+    text-align: center;
+    gap: 0.2em;
+}
+
+form > *, #action > * {
+    padding: 0.5em;
+    width: 100%;
+}
+
+form h1 {
+    margin: 0;
+    padding-left: 0;
+    padding-right: 0;
+    text-align: center;
+    font-size: 1.5em;
+    border-bottom: 2px solid;
+    margin-bottom: 0.5em;
+}
+
+a {
+    color: unset;
+}
+
diff --git a/public/style.css b/public/style.css
deleted file mode 100644
index 291f469..0000000
--- a/public/style.css
+++ /dev/null
@@ -1,60 +0,0 @@
-
-* {
-    box-sizing: border-box;
-}
-
-:root {
-    color-scheme: dark;
-}
-
-body {
-    margin: 0;
-    height: 100vh;
-    text-align: center;
-}
-
-header {
-    border-bottom: 2px solid;
-    margin-left: 16px;
-    margin-right: 16px;
-    margin-bottom: 16px;
-    padding: 16px;
-}
-
-header h1 {
-    margin: 0;
-}
-
-footer {
-    padding: 32px;
-}
-
-p {
-    line-height: 1.6em;
-}
-
-a {
-    color: unset;
-    text-decoration: none;
-}
-
-
-#articles {
-    text-align: left;
-    max-width: 1500px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.article {
-    border-top: 2px solid;
-    border-bottom: 2px solid;
-    margin: 16px;
-    padding-left: 32px;
-    padding-right: 32px;
-}
-
-.article:hover {
-    cursor: pointer;
-}
-