8 files changed, 42 insertions, 36 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index becf68a..648a4fc 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -7,6 +7,11 @@ img::selection {
     background-color: prop(--colors --select --img-bg);
 }
 
+:focus {
+    outline:        2px solid prop(--colors --fg-lo);
+    outline-offset: 3px;
+}
+
 html,
 pre,
 code {
@@ -71,13 +76,13 @@ ol {
 
 li {
     position:     relative;
-    padding-left: $subcontent--indent;
+    padding-left: prop(--dims --indent);
 
     &::before {
         display:     inline-block;
         position:    absolute;
-        width:       $subcontent--indent;
-        margin-left: -1 * $subcontent--indent;
+        width:       prop(--dims --indent);
+        margin-left: calc(-1 * #{prop(--dims --indent)});
         color:       prop(--colors --fg-hi);
         font-family: $font-fam--mono;
     }
@@ -166,19 +171,19 @@ p {
 
 :link,
 :visited {
-    color: var(--link--idle--fg);
+    color: prop(--colors --link --idle);
 }
 
 hr {
     height:           1px;
     margin:           ($line-height * 1em) 0;
     border:           0;
-    background-color: prop(--colors --obj);
+    background-color: prop(--colors --obj-hi);
 }
 
 blockquote,
 pre {
     margin:       ($line-height * 1em) 0 0 1px;
-    padding-left: calc(#{$subcontent--indent} - 3px);
+    padding-left: calc(#{prop(--dims --indent)} - 3px);
     border-left:  2px solid prop(--colors --obj);
 }
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 52723a3..2fd7b53 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -12,26 +12,26 @@ $unit-intervals: (
     '':    0
 );
 
-$font-fam--text:     'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
-$font-fam--large:    'Garet', $font-fam--text;
-$font-fam--mono:     'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
-$font-size:          16px;
-$line-height:        1.7;
-$content--width:     42rem;
-$subcontent--indent: 2em;
+$font-fam--text:  'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+$font-fam--large: 'Garet', $font-fam--text;
+$font-fam--mono:  'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
+$font-size:       16px;
+$line-height:     1.7;
+$content--width:  42rem;
 
-$gray0: hsl(220, 0%, 6%);
-$gray1: hsl(220, 0%, 9%);
-$gray2: hsl(220, 0%, 15%);
-$gray3: hsl(220, 0%, 20%);
-$gray4: hsl(220, 0%, 33%);
-$gray5: hsl(220, 0%, 54%);
-$gray6: hsl(220, 0%, 73%);
-$gray7: hsl(220, 0%, 100%);
+$gray0: hsl(220, 7%, 6%);
+$gray1: hsl(220, 7%, 9%);
+$gray2: hsl(220, 7%, 15%);
+$gray3: hsl(220, 7%, 20%);
+$gray4: hsl(220, 7%, 33%);
+$gray5: hsl(220, 7%, 54%);
+$gray6: hsl(220, 7%, 73%);
+$gray7: hsl(220, 7%, 100%);
 
 @include store((
     --dims: (
-        --outer: 4rem,
+        --outer:  4rem,
+        --indent: 2rem,
     ),
     --colors: (
         --bg-hi: $gray0, // Darker background
@@ -57,6 +57,10 @@ $gray7: hsl(220, 0%, 100%);
             --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5),
             --fg:     var(--colors--bg-hi),
         ),
+
+        --link: (
+            --idle: var(--colors--fg-lo)
+        )
     )
 ));
 
@@ -81,10 +85,6 @@ $gray7: hsl(220, 0%, 100%);
 
     --code-block--fg: var(--colors--fg-hi);
 
-    --link--idle--fg:  var(--colors--fg-lo);
-    --link--hover--bg: var(--link--idle--fg);
-    --link--hover--fg: #000;
-
     --page--link--idle--fg:    var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
     --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%);  // var(--fg-lo); // #f59458;
     --page--link--hover--bg:   var(--page--link--idle--fg);
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 37d4b0e..f444daf 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -50,7 +50,8 @@
             color:           currentColor;
             text-decoration: none;
 
-            &:hover {
+            &:hover,
+            &:focus {
                 transform:        translateY(#{prop(--dims --hover-offset)});
                 background-color: prop(--colors --hover --bg);
                 color:            prop(--colors --hover --fg);
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index cf02d04..4e809a4 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -8,10 +8,10 @@
 
     @include component(namespace()) {
         display:         flex;
+        position:        relative;
         align-items:     center;
         justify-content: space-between;
         height:          prop(--dims --outer, $global: true);
-        font-size:       1 / 16 * 15em;
 
         @include element('content') {
             width:        100%;
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
index 580e70b..3df48d2 100644
--- a/assets/css/components/_project.scss
+++ b/assets/css/components/_project.scss
@@ -22,7 +22,8 @@
             color:           currentColor;
             text-decoration: none;
 
-            &:hover {
+            &:hover,
+            &:focus {
                 @include element('picture') {
                     opacity: .75;
                     filter:  blur(0);
@@ -64,11 +65,5 @@
             max-width:  calc(100% - 2em);
             box-shadow: 0 .8em 2.5em rgba(#000, .25);
         }
-
-        @include media('<=sm') {
-            @include element('picture') {
-                mask-image: iro-easing-gradient(linear, to top, rgba(#000, .75) 2em, ease, #000 17em);
-            }
-        }
     }
 }
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 9b3a862..5f41f29 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -16,7 +16,7 @@
         h1 {
             transform:      translateX(-.06em);
             font-family:    $font-fam--large;
-            font-weight:    550;
+            font-weight:    600;
             text-transform: none;
         }
 
diff --git a/content/personal/index.md b/content/personal/index.md
index 235ae57..c15099f 100644
--- a/content/personal/index.md
+++ b/content/personal/index.md
@@ -3,3 +3,6 @@ title: Personal Notebook
 layout: categorized_list
 create_feed: true
 ---
+
+Welcome to the personal section of my website!
+Here you can find content I don't want to be easily accessible for all visitors.
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 7ac643d..916be94 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,6 +1,8 @@
 <section class="l-section l-section--fullscreen l-section--no-head">
     <div class="l-container l-container--pad-x l-container--pad-y l-container--content">
+        <div class="s-body">
 $body$
+        </div>
 
         $for(pages.by_category)$
             <h2>