From 9124ac21ae40092f6a9cc55d1296226eb76c2524 Mon Sep 17 00:00:00 2001
From: Jonny Barnes <jonny@jonnybarnes.uk>
Date: Sat, 11 Nov 2023 17:28:07 +0000
Subject: [PATCH] style: Revamp CSS styles for improved layout and readability

- Modify `public/assets/app.css` with updates to CSS variables, grid templates, and class styles
- Add class `pagination` to `<nav>` element in `resources/views/templates/pagination.blade.php`
- Update `public/assets/app.css.br` with changes
- Add flex layout and margin styles to `.h-feed`, `.h-entry`, and `.pagination` classes in `resources/css/layout.css`
---
 public/assets/app.css                          |   2 +-
 public/assets/app.css.br                       | Bin 974 -> 1036 bytes
 resources/css/layout.css                       |  17 +++++++++++++++++
 resources/views/templates/pagination.blade.php |   2 +-
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/public/assets/app.css b/public/assets/app.css
index b401b340..d04d4d8e 100644
--- a/public/assets/app.css
+++ b/public/assets/app.css
@@ -1 +1 @@
-:root{--font-family-headings:"Archer SSm A","Archer SSm B",serif;--font-family-body:"Verlag A","Verlag B",sans-serif;--font-family-monospace:"Operator Mono SSm A","Operator Mono SSm B",monospace;--font-size-sm:0.75rem;--font-size-base:1rem;--font-size-md:1.25rem;--font-size-lg:1.5rem;--font-size-xl:1.75rem;--font-size-xxl:2rem;--font-size-xxxl:2.25rem;--color-primary:#334700;--color-secondary:#e3ffb7;--color-link:#00649e;--color-link-visited:#bc7aff;--color-primary-shadow:rgba(16,25,0,.4)}@supports (color:color(display-p3 0 0 0)){:root{--color-primary:color(display-p3 0.21567 0.27838 0.03615);--color-secondary:color(display-p3 0.91016 0.99842 0.74082);--color-link:color(display-p3 0.01045 0.38351 0.63618);--color-link-visited:color(display-p3 0.70467 0.47549 0.99958);--color-primary-shadow:color(display-p3 0.06762 0.09646 0.00441/0.4)}}@supports (color:oklch(0% 0 0)){:root{--color-primary:oklch(36.8% 0.1 125.505deg);--color-secondary:oklch(96.3% 0.1 125.505deg);--color-link:oklch(48.09% 0.146 241.41deg);--color-link-visited:oklch(70.44% 0.21 304.41deg);--color-primary-shadow:oklch(19.56% 0.054 125.505deg/40%)}}body{background-color:var(--color-secondary);color:var(--color-primary);font-family:var(--font-family-body);font-size:var(--font-size-md)}code{font-family:var(--font-family-monospace)}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-headings)}.grid{display:grid;grid-template-columns:5vw 1fr 5vw;grid-template-rows:-webkit-min-content 1fr -webkit-min-content;grid-template-rows:min-content 1fr min-content;row-gap:1rem}#site-header{grid-column:2/3;grid-row:1/2}main{grid-row:2/3}footer,main{grid-column:2/3}footer{grid-row:3/4}footer .iwc-logo{max-width:85vw}footer .footer-actions{-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:1rem}a{color:var(--color-link)}a:visited{color:var(--color-link-visited)}#site-header a:visited,a.auth:visited{color:var(--color-link)}.hljs{border-radius:.5rem}.h-card .hovercard{-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--color-secondary);border-radius:1rem;-webkit-box-shadow:0 .5rem .5rem .5rem var(--color-primary-shadow);box-shadow:0 .5rem .5rem .5rem var(--color-primary-shadow);display:none;-ms-flex-direction:column;flex-direction:column;gap:.5rem;opacity:0;padding:1rem;position:absolute;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:100}.h-card .hovercard .u-photo{max-width:6rem}.h-card .hovercard .social-icon{height:1rem;width:1rem}.h-card:hover .hovercard{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1}.h-entry{-webkit-border-start:1px solid var(--color-primary);-webkit-padding-start:.5rem;border-inline-start:1px solid var(--color-primary);padding-inline-start:.5rem}.h-entry .reply-to{font-style:italic}.h-entry .post-info a{text-decoration:none}.h-entry .note-metadata{-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:1rem}.h-entry .note-metadata .syndication-links{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}.h-entry .note-metadata .syndication-links a{text-decoration:none}.h-entry .note-metadata .syndication-links a svg{height:1rem;width:1rem}
+:root{--font-family-headings:"Archer SSm A","Archer SSm B",serif;--font-family-body:"Verlag A","Verlag B",sans-serif;--font-family-monospace:"Operator Mono SSm A","Operator Mono SSm B",monospace;--font-size-sm:0.75rem;--font-size-base:1rem;--font-size-md:1.25rem;--font-size-lg:1.5rem;--font-size-xl:1.75rem;--font-size-xxl:2rem;--font-size-xxxl:2.25rem;--color-primary:#334700;--color-secondary:#e3ffb7;--color-link:#00649e;--color-link-visited:#bc7aff;--color-primary-shadow:rgba(16,25,0,.4)}@supports (color:color(display-p3 0 0 0)){:root{--color-primary:color(display-p3 0.21567 0.27838 0.03615)}}@supports (color:oklab(0% 0 0)){:root{--color-primary:oklch(36.8% 0.1 125.505deg)}}@supports (color:color(display-p3 0 0 0)){:root{--color-secondary:color(display-p3 0.91016 0.99842 0.74082)}}@supports (color:oklab(0% 0 0)){:root{--color-secondary:oklch(96.3% 0.1 125.505deg)}}@supports (color:color(display-p3 0 0 0)){:root{--color-link:color(display-p3 0.01045 0.38351 0.63618)}}@supports (color:oklab(0% 0 0)){:root{--color-link:oklch(48.09% 0.146 241.41deg)}}@supports (color:color(display-p3 0 0 0)){:root{--color-link-visited:color(display-p3 0.70467 0.47549 0.99958)}}@supports (color:oklab(0% 0 0)){:root{--color-link-visited:oklch(70.44% 0.21 304.41deg)}}@supports (color:color(display-p3 0 0 0)){:root{--color-primary-shadow:color(display-p3 0.06762 0.09646 0.00441/0.4)}}@supports (color:oklab(0% 0 0)){:root{--color-primary-shadow:oklch(19.56% 0.054 125.505deg/40%)}}body{background-color:var(--color-secondary);color:var(--color-primary);font-family:var(--font-family-body);font-size:var(--font-size-md)}code{font-family:var(--font-family-monospace)}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-headings)}.grid{display:grid;grid-template-columns:5vw 1fr 5vw;grid-template-rows:-webkit-min-content 1fr -webkit-min-content;grid-template-rows:min-content 1fr min-content;row-gap:1rem}#site-header{grid-column:2/3;grid-row:1/2}main{grid-column:2/3;grid-row:2/3}.h-feed{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:2rem}.h-entry h1:first-of-type,.h-entry p:first-of-type{-webkit-margin-before:0;margin-block-start:0}.pagination{-webkit-margin-before:1rem;margin-block-start:1rem}footer{grid-column:2/3;grid-row:3/4}footer .iwc-logo{max-width:85vw}footer .footer-actions{-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:1rem}a{color:var(--color-link)}a:visited{color:var(--color-link-visited)}#site-header a:visited,a.auth:visited{color:var(--color-link)}.hljs{border-radius:.5rem}.h-card .hovercard{-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--color-secondary);border-radius:1rem;-webkit-box-shadow:0 .5rem .5rem .5rem var(--color-primary-shadow);box-shadow:0 .5rem .5rem .5rem var(--color-primary-shadow);display:none;-ms-flex-direction:column;flex-direction:column;gap:.5rem;opacity:0;padding:1rem;position:absolute;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:100}.h-card .hovercard .u-photo{max-width:6rem}.h-card .hovercard .social-icon{height:1rem;width:1rem}.h-card:hover .hovercard{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1}.h-entry{-webkit-border-start:1px solid var(--color-primary);-webkit-padding-start:.5rem;border-inline-start:1px solid var(--color-primary);padding-inline-start:.5rem}.h-entry .reply-to{font-style:italic}.h-entry .post-info a{text-decoration:none}.h-entry .note-metadata{-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:1rem}.h-entry .note-metadata .syndication-links{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}.h-entry .note-metadata .syndication-links a{text-decoration:none}.h-entry .note-metadata .syndication-links a svg{height:1rem;width:1rem}
diff --git a/public/assets/app.css.br b/public/assets/app.css.br
index 26e19ed9c524beb1f2c01de69398134b3d3129c4..b71b212b9b58e79e4d48533f859adcf90f24b13d 100644
GIT binary patch
literal 1036
zcmV+n1oQhFHV^<Dg>hp&QRIJm5g`tRiOR3p{HmpdnY@@R-}_&ss200(PGd~WS}T7>
z5obF*sdeh$5#3af)xCS2&8w@B$W$1F#bF$B3D;h7xvrEY$5@V?{QK<f#`AL-hx16b
z)bJQg*P(z#uKzn|h;d3Myc@uxFW)!P++cG*i0icxzw_fv{GDU;LlHDO6f=hA{ZMm;
zhIhrE+kk+5OB35z^Ek43G^zbRwy|g~NBj|{p$OgaR*VgS(!YI^1%0(4@%-G4BPKzp
ztg~70Ec&Py$!TJ_h-_d^<kc`)jOY|v?9>vNYi3aEe0~>#IRPidPi3wVR(BQy9Y3Gb
z*b|3P4r<od(0687ava5vIFjx9kD1TNMTTx!$tvCGb^@36yItZ9pEidwjD$V%c3w7Z
z7l8)*t{3;nA63mpVpRwL4z;<|ptk)@h^H)04!`+K^%hVs^G8_>4q4SqiZcyOs2Dnm
zDs*)Ro^60Y)Ld#)=VA*DZd3x+y~i4%mM_<0D#m2IB$j1cArlrUE#0c<tIDY)Y)vdd
zW;aN9s;~twUhGjKGDM=n;w1oPJb+9hs61>`jEg+>!i}@ewc2B~dw<*u^RUj*|2#-G
zU9Uy}Dpeg^<*a}h6+chCMUD2PRjX9DEz3xxNPiDjJ>M)Iw^w2(_TsRNBRbiqD%F2y
zh)tuAri8S<k%N`9@VG{j|KG*teh}LrDEP~u&{63_Q?#&)3WdvKNd%&L^8`=}GVZKT
z)qBCA^i`voL`+w*g=A3TK(m{8kZ#<=K|w-ur$;yrHq}!(qUI}CbL3FW)A^2rsXc+5
z?m8FHNiVAz5o-T{G^;Z`lDd*h&^gfjh}6&{VxO9v$?IrF4EUeRQSJiWf?B7&t}J}1
zdcv3no?HgbO)H^Ozz*f}$Y}qWvmPCA7(<Usoel;!Oe~ALg>TlD-uU6#cQpUM!|2-<
z?jAcxjvw|1*2jIvyG|zFTz^g~fplt{>P%Y~iq*RF6@Qlt)T>#Xmpo57rF*Kre5}hc
zy*_o~z^<4_B4-|mtJP0+fxENB_A{a&{ko`b@@b=9uEw;M{w+?aBFb*55#0-sW?l}p
zL!12w*6ImkloVkm3NS5p{%kPBPfWk*kMKNt6fNRBX)rA(hHiZ*CJkwF4{PFU<E5JD
z<uC@gqD3rc#AdEoW`cn@aD31N0xz4wN!1e?wIF9`;c?%L3nle@IV(cqVq`W{M$TKw
zdDCq0aQJYq2N!ASh<XM{;*Ri$qN}gfj}fZD6s@ujhfk-ciR;1wLhPBw16rGM3MyT2
z2z0yA_=&^M|4uuGs(y!9j?Z9Rsj=D9^;9`{zyd090dfE4PAAV)ox%*r%uzX!82>Xl
GNlyS&F8)~n

literal 974
zcmV;<12Oy?gbe^3g>mEaqR7@egebzH@S@tL+O%pkcM&OFeBXb{Fv&K}jezYmE>^9X
zk5R;PJwSC%B@YhRZ3S6fuBFY?{rIB07pB6JQ!m^FHrs<-$pU~YC%6Bs3hY2A0;B7E
zrwWZVeGKQKA1N@060dlMQV3JN;iCZz^73mVt)<H81eZ$>zw2wo{%$bp<c&fXv)M%J
zI(2N(;3WIA7a(Od-iIN?+(*{eCQbi`A<UWxVSk9JDGGLc6vv)G>EF5!61>`%xV~{;
z6O$nHcD72dGLNoCmb|SYgQ$_bOeTXVx{EejwFGKRE5C20x5ku5k(2yw&K1J?#b84F
zyBn6(k&T%TXx8`8w=KEgxNiKqy2{;Y{FwQuXd*ghimWn+*DYXw=yb|?!=+83tRZ2K
zJl>q8bz^9-pO%oupKAt3)!b!rgEW+!ctD{tWXwG+b@oDoi{uhT!b@1BXX(~0-R(3V
z$;})hLyos}Sge5=Phc|9zVS!fRj$B}w*WY*K{b9J@sh>K;m_J~6EIkJuE+=gp0^@&
zyV+tX#$?=*JOi|Bg3LyQmpb7@vk5j?Zt^${w`kpHxx-GppN@pM+TrqlPQ^0r6*B<N
zRjwVaC4dMOR3RQhg)5Z$J~4D(jZBKxN-M>1>xJ7Kur1rMeXRpJsXzTGl!nmc%oEZX
zp*oVF7B=V+tSA4!!}>MBm<A;*mmx#Ch`k?BZ%Y&^j3kkY>eL))94%k9W8Zs|3Gk&b
z!%Pe!IZiSuaY1vAc#>g!l6<ZJiO0VL4FeG!cNR{)PPPW5zgKAKCi5FV9Hr^<|2vF2
zZqRs|yx7w3(yuUDMpmstL0BG@GJT0k3mecnKUY7Z>GVUKXH=j=@~ZD}S7#$9_ug{`
zMj@LNgK2c2C^4)QsnHFn_p`W5o+n3Xix|>%&6sWfCQMxWc_fp@LqoijBH#FkI7xC<
zdn5&PMG<E=E|N_yZO|h9SjN&lMyUWmIVmxtI}RtA$SU`W9Tg&W$~}lbT;CzW>~q#J
z;Zx})wwy3S_`Lk1KcIQk=m!k*q`;J%Xu4gd0(r*Ji~8^yoO87=co74+VjSd*o~|vH
zVPqf@94>+iH`Zk5TyjF8w&jQ#C-)UyD3S9a)0XZu=3>Zf^7C%l4{oImiN=HEQ!7YZ
zprtOK6oI6k5DzJ0R3mt6Hv>2Y8zMiKmwt7q@(NIR@*!S5a3E(F-3I@^8^WZq*Av$~
wv3ATW`qLoC=S3T-#!9E_F>>PKpNPaQ;Qq~5b#}4hR7ippPUTuK{#!W-7v4nIXaE2J

diff --git a/resources/css/layout.css b/resources/css/layout.css
index 18cb9448..f5d702ec 100644
--- a/resources/css/layout.css
+++ b/resources/css/layout.css
@@ -15,6 +15,23 @@ main {
   grid-row: 2 / 3;
 }
 
+.h-feed {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.h-entry {
+  & p:first-of-type,
+  & h1:first-of-type {
+    margin-block-start: 0;
+  }
+}
+
+.pagination {
+  margin-block-start: 1rem;
+}
+
 footer {
   grid-column: 2 / 3;
   grid-row: 3 / 4;
diff --git a/resources/views/templates/pagination.blade.php b/resources/views/templates/pagination.blade.php
index 47d7234f..bbe417bd 100644
--- a/resources/views/templates/pagination.blade.php
+++ b/resources/views/templates/pagination.blade.php
@@ -1,5 +1,5 @@
 @if ($paginator->hasPages())
-    <nav role="navigation">
+    <nav role="navigation" class="pagination">
         <div>
             @if ($paginator->onFirstPage())
                 <span>