From 068e43c3092e8ba457fb52b34eeebc5fbb732f6a Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 5 Dec 2022 08:27:16 -0500 Subject: [PATCH 01/35] Change colours of site elements Make it a little better for the eyes, and add some visual hierarchy. For both light/dark theme browsers. Also changed 6 digit Hex codes to similar 3 digit codes for some savings --- main.css | 45 ++++++++++++++++++++++++++------------------- 1 file changed, 26 insertions(+), 19 deletions(-) diff --git a/main.css b/main.css index db1ced0..4956b3d 100644 --- a/main.css +++ b/main.css @@ -5,22 +5,24 @@ header hr{display:none} body{ max-width:54rem; margin:.2rem;padding:0 .62rem; -font:1.2rem/1.62 sans-serif; +font:1.2rem/1.62 sans-serif;color:#444; display:-webkit-flex;display:-ms-flexbox;display:flex; flex-direction:column} main{flex:1 0 auto} nav>a{ padding:.2rem 0; display:block; -border-top:1px dotted #000} +border-top:1px dotted #101} nav>a:first-child{border:none} h1,h2,h3,h4,h5,h6{line-height:1} header h1{margin:1.4rem 52px 1.2rem auto} +h1{color:#000}h2{color:#111}h3{color:#222} +h4,h5,h6{color:#333} a{text-decoration:none} -a:link,a:visited{color:#087CA7} -a:hover,a:visited:hover{color:#09B2DC} +a:link,a:visited{color:#07C} +a:hover,a:visited:hover{color:#1AE} ul{padding-left:0;margin-left:0;list-style:inside} ul li{margin:.35rem} @@ -29,11 +31,11 @@ li>ul{margin-left:1em} .tag{ font-size:.8rem;vertical-align:middle; padding:.2rem;border-radius:.33rem; -background:#191919;color:#FFF} +background:#777;color:#FFF} pre{ -background:#191919;color:#FFF; +background:#EEE;padding:12px; white-space:pre-wrap;overflow-x:auto; -padding:12px;border:1px solid #FFF} +border:1px solid #DDD} .page-nav{ float:right; padding:14px;border:1px solid; @@ -41,12 +43,11 @@ margin:1.4rem;margin-right:auto} footer p{margin:0} table{text-align:left;width:100%;border-collapse:collapse} -td,th{border:1px solid #222;padding:9px 6px} -th{padding:12px;color:#FFF} -thead th{background:#191919} -tbody th{background:#292929} -tr:nth-child(even){background:#FEFEFE} -tr:hover{background:#DEDEDE} +td,th{border:1px solid #CCC;padding:9px 6px} +th{padding:12px} +thead tr{background:#FFF} +tbody tr:nth-child(odd){background:#EEE} +tbody tr:hover{background:#DDD} .burger-container{ position:absolute;height:24px;width:30px; @@ -61,7 +62,7 @@ transition:transform 300ms cubic-bezier(.4,1,.5,1)} #burger-toggle:checked~nav{display:block} #burger-toggle:checked+.burger-container .burger::before{margin-top:0;transform:rotate(45deg)} #burger-toggle:checked+.burger-container .burger::after{margin-top:0;transform:rotate(-45deg)} -#burger-toggle:checked+.burger-container .burger{background:rgba(255,255,255,0)} +#burger-toggle:checked+.burger-container .burger{background:rgba(0,0,0,0)} @media print{body{max-width:none}} @media(min-width:720px){ @@ -78,11 +79,17 @@ transition:transform 300ms cubic-bezier(.4,1,.5,1)} header h1{margin-right:auto} } @media(prefers-color-scheme:dark){ - body{color:#FFF;background:#191919} + body{color:#CCC;background:#101} a:link,a:visited{color:#9CF} - a:hover,a:visited:hover{color:#DA4167} - nav>a{border-color:#FFF} - .tag{background:#FFF;color:#000} - .burger,.burger::after,.burger::before{background:#FFF} + a:hover,a:visited:hover{color:#C34} + nav>a{border-color:#EEE} + .burger,.burger::after,.burger::before{background:#EEE} + h1{color:#FFF}h2{color:#EEE} + h3,h4,h5,h6{color:#DDD} + td,th{border-color:#444} + thead tr{background:#101} + tbody tr:nth-child(odd){background:#222} + tbody tr:hover{background:#333} + pre{background:#333;color:#EEE;border-color:#555} } From 1e757424e48addaa3dfccb9e4288d2563031a51a Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 5 Dec 2022 11:12:10 -0500 Subject: [PATCH 02/35] Increase font-size, whitespace, and restyle .tag --- main.css | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/main.css b/main.css index 4956b3d..7c4baf0 100644 --- a/main.css +++ b/main.css @@ -1,10 +1,10 @@ html,body{height:100%} -html{font-size:14px} +html{font-size:15px} header{position:relative} header hr{display:none} body{ -max-width:54rem; -margin:.2rem;padding:0 .62rem; +max-width:768px; +padding:0 1rem; font:1.2rem/1.62 sans-serif;color:#444; display:-webkit-flex;display:-ms-flexbox;display:flex; flex-direction:column} @@ -30,19 +30,21 @@ li>ul{margin-left:1em} .tag{ font-size:.8rem;vertical-align:middle; -padding:.2rem;border-radius:.33rem; -background:#777;color:#FFF} +padding:.2rem .5rem;border-radius:.33rem; +border:1px solid #9CF} pre{ -background:#EEE;padding:12px; +background:#EEE;padding:1rem; white-space:pre-wrap;overflow-x:auto; -border:1px solid #DDD} +border:1px solid #DDD;border-radius:6px} .page-nav{ float:right; padding:14px;border:1px solid; margin:1.4rem;margin-right:auto} footer p{margin:0} -table{text-align:left;width:100%;border-collapse:collapse} +table{text-align:left;width:100%; +border-collapse:collapse; +margin:24px 0} td,th{border:1px solid #CCC;padding:9px 6px} th{padding:12px} thead tr{background:#FFF} @@ -91,5 +93,6 @@ transition:transform 300ms cubic-bezier(.4,1,.5,1)} tbody tr:nth-child(odd){background:#222} tbody tr:hover{background:#333} pre{background:#333;color:#EEE;border-color:#555} + .tag{border-color:#359} } From f85aa54698b43e854930d88759c51cd33415ccbe Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 5 Dec 2022 11:25:04 -0500 Subject: [PATCH 03/35] Correct the selectable area of burger nav Since negative margin was used that part of the burger icon wasn't selectable. Changed so no negative margin, which makes it aesthetically worse, but functionally better. --- main.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/main.css b/main.css index 7c4baf0..cc44cea 100644 --- a/main.css +++ b/main.css @@ -52,18 +52,18 @@ tbody tr:nth-child(odd){background:#EEE} tbody tr:hover{background:#DDD} .burger-container{ -position:absolute;height:24px;width:30px; +position:absolute;height:21px;width:30px; cursor:pointer;top:34px;right:10px} #burger-toggle,#burger-toggle~nav{display:none} .burger,.burger::after,.burger::before{ position:absolute;background:#000; height:4px;width:30px;border-radius:2px;content:""; transition:transform 300ms cubic-bezier(.4,1,.5,1)} -.burger::before{margin-top:-8px} -.burger::after{margin-top:8px} +.burger::before{margin-top:8px} +.burger::after{margin-top:16px} #burger-toggle:checked~nav{display:block} -#burger-toggle:checked+.burger-container .burger::before{margin-top:0;transform:rotate(45deg)} -#burger-toggle:checked+.burger-container .burger::after{margin-top:0;transform:rotate(-45deg)} +#burger-toggle:checked+.burger-container .burger::before{margin-top:8px;transform:rotate(45deg)} +#burger-toggle:checked+.burger-container .burger::after{margin-top:8px;transform:rotate(-45deg)} #burger-toggle:checked+.burger-container .burger{background:rgba(0,0,0,0)} @media print{body{max-width:none}} From ec6d1e48fef53ecba38fee1ebbff79fd75b3f31d Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 5 Dec 2022 11:26:45 -0500 Subject: [PATCH 04/35] Add .sr (screen reader) styling to CSS Makes element non-visible, but still readible to screen-readers, and passes accessibility checks (such as contrast, and size errors) --- main.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/main.css b/main.css index cc44cea..37ac845 100644 --- a/main.css +++ b/main.css @@ -40,6 +40,11 @@ border:1px solid #DDD;border-radius:6px} float:right; padding:14px;border:1px solid; margin:1.4rem;margin-right:auto} +.sr{ +position:absolute;overflow:hidden; +left:-9999px;top:auto; +width:1px;height:1px; +} footer p{margin:0} table{text-align:left;width:100%; From 86ecf2e234ad94cd62e4f5a40b7c865d500e4820 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 5 Dec 2022 11:50:57 -0500 Subject: [PATCH 05/35] Add .sr "Burger menu" text into the navigation --- 404.html | 2 +- about.html | 2 +- blog/blog-thoughts-220822.html | 2 +- blog/burger-menu.html | 2 +- blog/index.html | 2 +- blog/ive-started-a-blog.html | 2 +- blog/my-steamdeck-arrived.html | 2 +- blog/reducing-homelab.html | 2 +- cv.html | 2 +- equipment.html | 2 +- guides/add-domain-to-server.html | 2 +- guides/add-php-to-nginx.html | 2 +- guides/adminer-setup.html | 2 +- guides/backup-mysql-mariadb.html | 2 +- guides/backup-with-cron.html | 2 +- guides/backup-with-rdiff.html | 2 +- guides/backup-with-rsync.html | 2 +- guides/certbot-ssl.html | 2 +- guides/get-a-domain-name.html | 2 +- guides/guide-to-server-hosting.html | 2 +- guides/index.html | 2 +- guides/initial-server-setup.html | 2 +- guides/install-kvm-virtual-machine.html | 2 +- guides/install-mysql-mariadb.html | 2 +- guides/nginx-install.html | 2 +- guides/nginx-proxy.html | 2 +- guides/nginx-web-optimisation.html | 2 +- guides/password-protect-webpage.html | 2 +- guides/server-install-debian.html | 2 +- guides/set-static-ip.html | 2 +- guides/setup-git-server.html | 2 +- guides/setup-kvm-bridge.html | 2 +- guides/setup-nginx-website.html | 2 +- guides/setup-qemu-kvm.html | 2 +- guides/sql-cheatsheet.html | 2 +- guides/virsh-cheatsheet.html | 2 +- guides/vm-seperation-of-concerns.html | 2 +- guides/web-dev-101.html | 2 +- guides/webpage-to-website.html | 2 +- guides/your-first-webpage.html | 2 +- index.html | 2 +- projects.html | 2 +- recipes/index.html | 2 +- recipes/woky-beef-stew.html | 2 +- sitemap.html | 2 +- support.html | 2 +- websites.html | 2 +- 47 files changed, 47 insertions(+), 47 deletions(-) diff --git a/404.html b/404.html index f67d98a..a625d84 100644 --- a/404.html +++ b/404.html @@ -16,7 +16,7 @@

Error 404

- +