From c15ec87fb86a5920cd358d09124605f0d7d70176 Mon Sep 17 00:00:00 2001
From: TheThomaas <thethomaas@protonmail.ch>
Date: Sat, 25 Nov 2023 13:20:06 +0100
Subject: [PATCH] Update styles, inspired by Andy Bell

---
 src/assets/css/styles.scss | 430 ++++++++++++++++++++++---------------
 1 file changed, 262 insertions(+), 168 deletions(-)

diff --git a/src/assets/css/styles.scss b/src/assets/css/styles.scss
index fefefbe..0d4e59e 100644
--- a/src/assets/css/styles.scss
+++ b/src/assets/css/styles.scss
@@ -1,200 +1,294 @@
+@use 'components/reset';
+@use 'components/skip-link';
+
 :root {
-    --light-1: #fdfdfe;
-    --light-2: #ddd;
-    --light-3: #fed;
-    --dark-1: #333;
-    --dark-2: #212121;
-    --light-transparent-1: rgba(125,125,125, 0.75);
-    --dark-transparent-1: rgba(200,195,190,0.15);
+    --color-dark: #333;
+    --color-dark-shade: #212121;
+    --color-light: #fdfdfe;
+    --color-light-glare: #ddd;
+    --color-mid: #666;
+    --color-mid-glare: #b3b3b3;
+    --color-primary: #5bf;
+    --color-primary-shade: #4396cd;
+    --color-light-trans: rgba(125,125,125, 0.75);
+    --color-dark-trans: rgba(200,195,190,0.15);
 
-    --color-1: #5bf;
-    --color-2: #4396cd;
+    --background-color: var(--color-light);
+    --text-color: var(--color-dark);
+    --link-focus: var(--color-dark-shade);
 
-    --background-color: var(--light-1);
-    --text-color: var(--dark-1);
-    /* --link-color: var(--color-1); */
-    --link-focus: var(--dark-2);
+    --wrapper-width: clamp(16rem, 93vw, 85rem);
+
+    --space-m: clamp(1.5rem,1.43rem + 0.33vw,1.6875rem);
+    --space-m-l: clamp(1.5rem,1.24rem + 1.30vw,2.25rem);
+    --space-s-l: clamp(1rem, 0.57rem + 2.17vw, 2.25rem);
+    --space-l-xl: clamp(2rem,1.52rem + 2.39vw,3.375rem);
+    --gutter: var(--space-s-l);
 }
 
 @media (prefers-color-scheme: dark){
     :root {
-        --background-color: var(--dark-2);
-        --text-color: var(--light-2);
-        --link-color: var(--color-1);
-        --link-focus: var(--light-3);
-    }
-    body {
-        a{color:var(--link-color);}
-        a:focus{outline-color:var(--link-focus);}
+        --background-color: var(--color-dark-shade);
+        --text-color: var(--color-light-glare);
+        --link-color: var(--color-primary);
     }
 }
 
-body{
+:focus-visible {
+    outline: 2px solid var(--text-color);
+    outline-offset: .25rem;
+}
+
+[role='list'] {
+    padding: 0;
+}
+
+a {
+    color: currentColor;
+    text-decoration-color: var(--color-primary);
+    text-decoration-thickness: 2px;
+    text-underline-offset: .2ex;
+
+    &:hover {
+        text-underline-offset: .1ex;
+    }
+    &:not([class]) {
+        text-decoration-skip-ink: auto;
+    }
+
+    .article-head & {
+        text-transform: uppercase;
+        font-size: 1rem;
+    }
+}
+time {
+    font-style: italic;
+
+    .article-head & {
+        text-transform: uppercase;
+        font-size: 1rem;
+    }
+}
+svg {
+    inline-size: 1em;
+    block-size: 1em;
+}
+blockquote, dl, figcaption, li, p {
+    max-width: 65ch;
+}
+ul, ol {
+    list-style-position: outside;
+    padding-inline-start: .4rem;
+
+    .article-head & {
+        margin: 0;
+    }
+}
+hr {
+    border: none;
+      border-top-width: medium;
+      border-top-style: none;
+      border-top-color: currentcolor;
+    border-top: 1px solid var(--color-mid);
+    margin: var(--space-l-xl) 0 !important;
+    max-width: 55rem;
+    transform: translateY(-1px);
+}
+
+body {
     color: var(--text-color);
     background-color: var(--background-color);
-    font-size: 18px;
     font: 1.2rem/1.5 Century Gothic, sans-serif;
     margin: 0;
-    padding: 0;
-    // max-width: 600px;
-    // max-width: 55ch;
-    // margin: 0 auto;
-    // padding: 2.5rem 1.75rem;
-}
-// header{
-//     outline: 2px solid var(--light-2);
-//     outline-offset: 1rem;
-// }
-h1,h2,h3,h4,h5,h6{
-    line-height: 1.2; 
-    font-family: Arial, serif;
-}
-h1{
-    font-size: 2.45rem;
-}
-a:focus{
-    outline: 0.2rem solid var(--link-focus);
-    outline-offset: 0.4rem;
-}
-p{
-    margin-bottom: 2rem;
-}
-section, aside, footer{
-    margin: 2.5rem auto;
-}
-ul{
-    margin-top: -1.25rem;
-    margin-bottom: 2.25rem;
-}
-b{
-    background-color: var(--dark-transparent-1);
-    padding: 0.4rem;
-    margin: -0.4rem;
-
-}
-dt{
-    font-weight: bold;
-    margin-top: 1rem; 
-}
-
-dt:target{
-    background-color: var(--dark-transparent-1);
-    padding: 0.2rem;
-    margin: 0.8rem -0.2rem 0 -0.2rem;
-    outline: 2px solid var(--light-transparent-1);
-
-}
-
-
-
-
-
-
-/* Skip Link */
-.skip-link {
-    clip: rect(1px, 1px, 1px, 1px);
-    display: block;
-    block-size: 1px;
-    overflow: hidden;
-    position: absolute;
-    inline-size: 1px;
-    top: 1rem;
-    left: 1rem;
-    z-index: 999;
-}
-  
-  .skip-link:focus {
-    clip: auto;
-    block-size: auto;
-    overflow: visible;
-    inline-size: auto;
-    color: var(--text-color);
-    padding: .2rem .4rem;
-    line-height: 1;
-}
-
-/* Body */
-body {
     display: flex;
     flex-direction: column;
 }
 
-/* Header */
-header {
+.text-base {
+    font-size: clamp(1rem, .96rem + .22vw, 1.125rem);
+}
+
+.wrapper {
+    margin-inline: auto;
+    padding-inline: var(--gutter);
+    position: relative;
+    inline-size: var(--wrapper-width);
+}
+.repel {
+    align-items: var(--repel-vertical-alignment, center);
     display: flex;
+    flex-wrap: wrap;
+    gap: var(--gutter, var(--space-s-l));
     justify-content: space-between;
-    padding: .4rem 1rem;
-
-    nav {
-        padding: 0 1rem;
-    }
-
-    ul {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        display: flex;
-        flex-wrap: wrap;
-        gap: .6rem;
-
-        li {
-            padding: .6rem .4rem;
-        }
-
-        a {
-            color: var(--text-color);
-            text-decoration: none;
-            border-bottom: 2px solid var(--link-color);
-            padding-bottom: .1rem;
-
-            &:focus, &:hover {
-                padding-bottom: 0;
-            }
-        }
-    }
 }
-
-footer {
-    display: flex;
+.justify-center {
     justify-content: center;
-    padding: .4rem 1rem;
-    margin: 0;
+}
+.cluster, .grid {
+    gap: var(--gutter, var(--space-s-l));
+}
+.cluster {
+    align-items: var(--cluster-vertical-alignment,center);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: var(--cluster-horizontal-alignment,flex-start);
+}
+.flow > * + * {
+    margin-block-start: var(--flow-space, 1em);
+}
+.prose {
+    --flow-space: var(--space-m-l);
+    line-height: 1.8;
+    max-width: 50rem;
+}
+.region {
+    padding-block: var(--region-space, var(--space-l-xl));
+}
 
-    nav {
-        padding: 0 1rem;
+
+
+
+header {
+    .repel {
+        --gutter: 0.5rem var(--space-m);
+        padding-block: var(--space-m);
     }
 
-    ul {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        display: inline-flex;
-        flex-wrap: wrap;
-        gap: .6rem;
-
-        li {
-            padding: .6rem .4rem;
+    nav {
+        ul {
+            margin: 0;
         }
+    }
+}
+.brand {
+    color: var(--color-mid);
+    display: inline-block;
+    font-size: 2.5rem;
+    height: 2.5rem;
+}
 
-        a {
-            color: var(--text-color);
-            text-decoration: none;
-            border-bottom: 2px solid var(--link-color);
-            padding-bottom: .1rem;
+// h1,h2,h3,h4,h5,h6{
+//     line-height: 1.2; 
+//     font-family: Arial, serif;
+// }
+// h1{
+//     font-size: 2.45rem;
+// }
+// a:focus{
+//     outline: 0.2rem solid var(--link-focus);
+//     outline-offset: 0.4rem;
+// }
+// p{
+//     margin-bottom: 2rem;
+// }
+// section, aside, footer{
+//     margin: 2.5rem auto;
+// }
+// b{
+//     background-color: var(--color-dark-trans);
+//     padding: 0.4rem;
+//     margin: -0.4rem;
+// }
+// dt{
+//     font-weight: bold;
+//     margin-top: 1rem; 
+// }
+// dt:target{
+//     background-color: var(--color-dark-trans);
+//     padding: 0.2rem;
+//     margin: 0.8rem -0.2rem 0 -0.2rem;
+//     outline: 2px solid var(--color-light-trans);
+// }
 
-            &:focus, &:hover {
-                padding-bottom: 0;
-            }
-        }
+
+
+.separate {
+    gap: 0;
+
+    & > *:not(:last-child):after {
+        content: var(--separator, "");
+        margin-inline: 1rem;
     }
 }
 
 
-/* Main */
-main {
-    max-width: 600px;
-    max-width: 55ch;
-    margin: 0 auto;
-    padding: 2.5rem 1.75rem;
-    flex: auto;
-}
\ No newline at end of file
+
+// /* Header */
+// header {
+//     display: flex;
+//     justify-content: space-between;
+//     padding: .4rem 1rem;
+
+//     nav {
+//         padding: 0 1rem;
+//     }
+
+//     ul {
+//         margin: 0;
+//         padding: 0;
+//         list-style-type: none;
+//         display: flex;
+//         flex-wrap: wrap;
+//         gap: .6rem;
+
+//         li {
+//             padding: .6rem .4rem;
+//         }
+
+//         a {
+//             color: var(--text-color);
+//             text-decoration: none;
+//             border-bottom: 2px solid var(--link-color);
+//             padding-bottom: .1rem;
+
+//             &:focus, &:hover {
+//                 padding-bottom: 0;
+//             }
+//         }
+//     }
+// }
+
+// footer {
+//     display: flex;
+//     justify-content: center;
+//     padding: .4rem 1rem;
+//     margin: 0;
+
+//     nav {
+//         padding: 0 1rem;
+//     }
+
+//     ul {
+//         margin: 0;
+//         padding: 0;
+//         list-style-type: none;
+//         display: inline-flex;
+//         flex-wrap: wrap;
+//         gap: .6rem;
+
+//         li {
+//             padding: .6rem .4rem;
+//         }
+
+//         a {
+//             color: var(--text-color);
+//             text-decoration: none;
+//             border-bottom: 2px solid var(--link-color);
+//             padding-bottom: .1rem;
+
+//             &:focus, &:hover {
+//                 padding-bottom: 0;
+//             }
+//         }
+//     }
+// }
+
+
+// /* Main */
+// main {
+//     max-width: 600px;
+//     max-width: 55ch;
+//     margin: 0 auto;
+//     padding: 2.5rem 1.75rem;
+//     flex: auto;
+// }
\ No newline at end of file