From d97c7b9df6b2efc14a4d362cf3d1a504c54b0972 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Tue, 2 May 2023 11:51:10 +0200
Subject: [PATCH] fix: retrecir sidebar

Fixes #13
---
 scss/components/_cards.scss   |  13 ++-
 scss/components/_menus.scss   |  20 ++---
 scss/custom/_global.scss      |   5 +-
 scss/definitions/_sizing.scss |   7 +-
 scss/mixins/_panels.scss      |  10 +--
 style.css                     | 164 +++++++++++++++++-----------------
 6 files changed, 108 insertions(+), 111 deletions(-)

diff --git a/scss/components/_cards.scss b/scss/components/_cards.scss
index 406db10..bfe4c2a 100644
--- a/scss/components/_cards.scss
+++ b/scss/components/_cards.scss
@@ -5,8 +5,8 @@
  *
 */
 
-$card-bigpad: $lineheight;
-$card-smallpad: $lineheight_half;
+$card-bigpad: $lineheight_rel;
+$card-smallpad: $lineheight_rel / 4;
 
 .card {
     @include panel($card-bigpad);
@@ -35,7 +35,7 @@ $card-smallpad: $lineheight_half;
         &::before {
             font-family: "ForkAwesome";
             content:$symbol;
-            padding-right:$lineheight_half;
+            padding-right: $lineheight_rel / 4;
         }
     }
 }
@@ -52,11 +52,8 @@ ul.card-list, .card > ul {
     padding:0;
     margin:0;
     li.list-element {
-        line-height:$lineheight;
-        padding-right:$lineheight_half;
-        padding-left:$lineheight_quarter;
-        padding-top:$lineheight_quarter;
-        padding-bottom:$lineheight_quarter;
+        line-height:$lineheight_rel / 2;
+        padding: $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 2;
         margin:0;
     }
 }
diff --git a/scss/components/_menus.scss b/scss/components/_menus.scss
index b6a6d6a..d7c969e 100644
--- a/scss/components/_menus.scss
+++ b/scss/components/_menus.scss
@@ -3,7 +3,6 @@
 .menu {
   display: flex;
   flex-direction: column;
-  padding: $lineheight/4;
 
   ul,
   li {
@@ -16,8 +15,8 @@
   a:visited {
     @include shape-style($lineheight_half);
     display: flex;
-    line-height: $lineheight;
-    padding: $lineheight_quarter;
+    line-height: $lineheight_rel;
+    padding: $lineheight_rel / 4;
     margin: 0;
     justify-content: space-between;
     align-items: center;
@@ -72,6 +71,7 @@
 
 .toolbar {
   flex-direction: row;
+  padding: $lineheight_rel/4;
 
   ul {
     display: flex;
@@ -89,9 +89,9 @@
     strong,
     &.toolbar-element {
       display: block;
-      padding: $lineheight/3;
-      padding-left: $lineheight/2;
-      padding-right: $lineheight/2;
+      padding: $lineheight_rel/3;
+      padding-left: $lineheight_rel/2;
+      padding-right: $lineheight_rel/2;
     }
   }
 }
@@ -102,12 +102,12 @@ ul.menu h1,
 .menu h2,
 ul.menu h2 {
   position: relative;
-  left: -$lineheight_quarter;
+  left: -$lineheight_rel / 4;
   font-weight: $fontweight_hyper;
-  padding-top: $lineheight_quarter;
-  padding-bottom: $lineheight_quarter;
+  padding-top: $lineheight_rel / 4;
+  padding-bottom: $lineheight_rel / 4;
   font-size:1em;
-  line-height:$lineheight;
+  line-height:$lineheight_rel;
 }
 
 .menu-label {
diff --git a/scss/custom/_global.scss b/scss/custom/_global.scss
index f2ab863..96c995c 100644
--- a/scss/custom/_global.scss
+++ b/scss/custom/_global.scss
@@ -100,13 +100,13 @@ header h1 {
     grid-template-columns: 1fr;
     grid-template-rows: auto;
     row-gap: $lineheight;
-    column-gap: 3rem;
+    column-gap: 1.5rem;
     grid-template-areas:
     "main"
     "side";
 
     @include lg() {
-      grid-template-columns: auto 360px;
+      grid-template-columns: auto 300px;
       grid-template-areas: "main side";
     }
 }
@@ -117,6 +117,7 @@ header h1 {
 
 .sidebar {
     grid-area: side;
+    font-size: 0.8rem;
 }
 
 ul.tag-list {
diff --git a/scss/definitions/_sizing.scss b/scss/definitions/_sizing.scss
index 618de7c..4682d27 100644
--- a/scss/definitions/_sizing.scss
+++ b/scss/definitions/_sizing.scss
@@ -6,15 +6,16 @@ $baseline: 1.6;
 $lineheight: $baseline * 1rem;
 $lineheight_half: $lineheight/2;
 $lineheight_quarter: $lineheight/4;
+$lineheight_rel: $baseline * 1em;
 
 $card-header-vmargin: 0px;
 $card-header-hmargin: 0px;
-$card-header-padding: $lineheight;
+$card-header-padding: $lineheight_rel;
 $card-header-width: 100%;
 $card-header-position:0px;
 // Buttons
-$button_large: $lineheight;
-$button_small: $lineheight_quarter;
+$button_large: $lineheight_rel;
+$button_small: $lineheight_rel / 4;
 $button-group-margin: 0;
 
 // Responsives sizes
diff --git a/scss/mixins/_panels.scss b/scss/mixins/_panels.scss
index a9cb999..7418838 100644
--- a/scss/mixins/_panels.scss
+++ b/scss/mixins/_panels.scss
@@ -33,9 +33,9 @@
     padding-right:$card-header-padding;
     padding-bottom: $size/2!important;
     margin:$card-header-hmargin;
-    margin-bottom:$lineheight_half;
-    margin-top:$lineheight_half;
-    line-height:$lineheight;
+    margin-bottom:$lineheight_rel / 2;
+    margin-top:$lineheight_rel / 2;
+    line-height:$lineheight_rel;
     white-space: nowrap;
 
     position:relative;
@@ -55,11 +55,11 @@
 
     h1, h2, h3, h4, h5, h6, h7, h8, h9, h10  {
         font-family:$basefont;
-        font-size:1rem;
+        font-size:1em;
         padding:0px;
         margin:0px;
         color:$color-font-light;
         font-weight: $fontweight_big;
-        line-height:$lineheight;
+        line-height:$lineheight_rel;
     }
 }
diff --git a/style.css b/style.css
index 0ed355c..575bb11 100644
--- a/style.css
+++ b/style.css
@@ -1040,11 +1040,11 @@ code {
  *
 */
 .btn {
-  padding: 1.6rem;
-  padding-top: 0.5333333333rem;
-  padding-bottom: 0.5333333333rem;
-  margin: 0.8rem;
-  margin-top: 0.5333333333rem;
+  padding: 1.6em;
+  padding-top: 0.5333333333em;
+  padding-bottom: 0.5333333333em;
+  margin: 0.8em;
+  margin-top: 0.5333333333em;
   margin-bottom: 1.6rem;
   line-height: 1.6rem;
   height: auto;
@@ -1061,11 +1061,11 @@ code {
     margin-bottom: 0; }
 
 .btn-small, .badge {
-  padding: 0.4rem;
-  padding-top: 0.1333333333rem;
-  padding-bottom: 0.1333333333rem;
-  margin: 0.2rem;
-  margin-top: 0.1333333333rem;
+  padding: 0.4em;
+  padding-top: 0.1333333333em;
+  padding-bottom: 0.1333333333em;
+  margin: 0.2em;
+  margin-top: 0.1333333333em;
   margin-bottom: 1.6rem;
   line-height: 1.6rem;
   height: auto;
@@ -1074,18 +1074,18 @@ code {
   background-color: transparent;
   transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
   font-weight: 400;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
+  padding-left: 0.4em;
+  padding-right: 0.4em;
   text-decoration: none; }
   .btn-small:hover, .btn-small:active, .badge:hover, .badge:active {
     background-color: transparent; }
 
 strong.btn-fake {
-  padding: 1.6rem;
-  padding-top: 0.5333333333rem;
-  padding-bottom: 0.5333333333rem;
-  margin: 0.8rem;
-  margin-top: 0.5333333333rem;
+  padding: 1.6em;
+  padding-top: 0.5333333333em;
+  padding-bottom: 0.5333333333em;
+  margin: 0.8em;
+  margin-top: 0.5333333333em;
   margin-bottom: 1.6rem;
   line-height: 1.6rem;
   height: auto;
@@ -1124,7 +1124,7 @@ strong.btn-fake {
     border-color: transparent; }
 
 .btn-toolbar {
-  padding: 0 1.6rem; }
+  padding: 0 1.6em; }
 
 .btn-group > .btn {
   border-radius: 4px 4px 4px 4px;
@@ -1161,11 +1161,11 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
     display: none; }
   .breadcrumb li.breadcrumb-item a, .breadcrumb li.breadcrumb-item > span {
     display: inline-block;
-    padding: 1.6rem;
-    padding-top: 0.5333333333rem;
-    padding-bottom: 0.5333333333rem;
-    margin: 0.8rem;
-    margin-top: 0.5333333333rem;
+    padding: 1.6em;
+    padding-top: 0.5333333333em;
+    padding-bottom: 0.5333333333em;
+    margin: 0.8em;
+    margin-top: 0.5333333333em;
     margin-bottom: 1.6rem;
     line-height: 1.6rem;
     height: auto;
@@ -1215,11 +1215,11 @@ nav.pagination {
     text-align: center;
     width: 100%; }
   nav.pagination .page-numbers, nav.pagination .next, nav.pagination .prev {
-    padding: 0.4rem;
-    padding-top: 0.1333333333rem;
-    padding-bottom: 0.1333333333rem;
-    margin: 0.2rem;
-    margin-top: 0.1333333333rem;
+    padding: 0.4em;
+    padding-top: 0.1333333333em;
+    padding-bottom: 0.1333333333em;
+    margin: 0.2em;
+    margin-top: 0.1333333333em;
     margin-bottom: 1.6rem;
     line-height: 1.6rem;
     height: auto;
@@ -1228,10 +1228,10 @@ nav.pagination {
     background-color: transparent;
     transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
     font-weight: 400;
-    padding-left: 0.4rem;
-    padding-right: 0.4rem;
-    margin-right: 0.05rem;
-    margin-left: 0.05rem;
+    padding-left: 0.4em;
+    padding-right: 0.4em;
+    margin-right: 0.05em;
+    margin-left: 0.05em;
     text-decoration: none; }
     nav.pagination .page-numbers:hover, nav.pagination .page-numbers:active, nav.pagination .next:hover, nav.pagination .next:active, nav.pagination .prev:hover, nav.pagination .prev:active {
       background-color: transparent; }
@@ -1270,14 +1270,14 @@ nav.pagination {
   flex-direction: column;
   color: #212529; }
   .card > * {
-    margin-left: 0.8rem;
-    margin-right: 0.8rem; }
+    margin-left: 0.8em;
+    margin-right: 0.8em; }
     .card > *:first-child, .card > *.sr-only:first-child ~ * {
-      margin-top: 1.6rem; }
+      margin-top: 1.6em; }
       .card > *:first-child.card-header, .card > *.sr-only:first-child ~ *.card-header {
         margin-top: 0px; }
     .card > *:last-child {
-      margin-bottom: 1.6rem; }
+      margin-bottom: 1.6em; }
       .card > *:last-child.card-header {
         margin-bottom: 0px; }
   .card-body {
@@ -1285,14 +1285,14 @@ nav.pagination {
   .card-header {
     font-size: 1.1em;
     font-weight: 300;
-    padding: 0.8rem;
-    padding-left: 1.6rem;
-    padding-right: 1.6rem;
-    padding-bottom: 0.8rem !important;
+    padding: 0.8em;
+    padding-left: 1.6em;
+    padding-right: 1.6em;
+    padding-bottom: 0.8em !important;
     margin: 0px;
-    margin-bottom: 0.8rem;
-    margin-top: 0.8rem;
-    line-height: 1.6rem;
+    margin-bottom: 0.8em;
+    margin-top: 0.8em;
+    line-height: 1.6em;
     white-space: nowrap;
     position: relative;
     left: 0px;
@@ -1309,12 +1309,12 @@ nav.pagination {
       border-bottom-right-radius: 8px; }
     .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10 {
       font-family: Open Sans, sans-serif;
-      font-size: 1rem;
+      font-size: 1em;
       padding: 0px;
       margin: 0px;
       color: #fefefe;
       font-weight: 300;
-      line-height: 1.6rem; }
+      line-height: 1.6em; }
     .card-header .fa {
       margin-right: 0.5em; }
 
@@ -1323,11 +1323,8 @@ ul.card-list, .card > ul {
   padding: 0;
   margin: 0; }
   ul.card-list li.list-element, .card > ul li.list-element {
-    line-height: 1.6rem;
-    padding-right: 0.8rem;
-    padding-left: 0.4rem;
-    padding-top: 0.4rem;
-    padding-bottom: 0.4rem;
+    line-height: 0.8em;
+    padding: 0.4em, 0.4em, 0.4em, 0.8em;
     margin: 0; }
 
 .list-check li.list-element {
@@ -1335,14 +1332,14 @@ ul.card-list, .card > ul {
   .list-check li.list-element::before {
     font-family: "ForkAwesome";
     content: "";
-    padding-right: 0.8rem; }
+    padding-right: 0.4em; }
 
 .list-cross li.list-element {
   list-style: none; }
   .list-cross li.list-element::before {
     font-family: "ForkAwesome";
     content: "";
-    padding-right: 0.8rem; }
+    padding-right: 0.4em; }
 
 .list-danger li.list-element::before {
   color: #e33d22; }
@@ -1353,14 +1350,14 @@ ul.card-list, .card > ul {
 .smallcard-header {
   font-size: 1.1em;
   font-weight: 300;
-  padding: 0.8rem;
-  padding-left: 1.6rem;
-  padding-right: 1.6rem;
-  padding-bottom: 0.8rem !important;
+  padding: 0.8em;
+  padding-left: 1.6em;
+  padding-right: 1.6em;
+  padding-bottom: 0.8em !important;
   margin: 0px;
-  margin-bottom: 0.8rem;
-  margin-top: 0.8rem;
-  line-height: 1.6rem;
+  margin-bottom: 0.8em;
+  margin-top: 0.8em;
+  line-height: 1.6em;
   white-space: nowrap;
   position: relative;
   left: 0px;
@@ -1377,18 +1374,17 @@ ul.card-list, .card > ul {
     border-bottom-right-radius: 8px; }
   .smallcard-header h1, .smallcard-header h2, .smallcard-header h3, .smallcard-header h4, .smallcard-header h5, .smallcard-header h6, .smallcard-header h7, .smallcard-header h8, .smallcard-header h9, .smallcard-header h10 {
     font-family: Open Sans, sans-serif;
-    font-size: 1rem;
+    font-size: 1em;
     padding: 0px;
     margin: 0px;
     color: #fefefe;
     font-weight: 300;
-    line-height: 1.6rem; }
+    line-height: 1.6em; }
 
 /* Menu handling */
 .menu {
   display: flex;
-  flex-direction: column;
-  padding: 0.4rem; }
+  flex-direction: column; }
   .menu ul,
   .menu li {
     list-style: none;
@@ -1400,8 +1396,8 @@ ul.card-list, .card > ul {
     border-radius: 4px 4px 4px 4px;
     background-color: transparent;
     display: flex;
-    line-height: 1.6rem;
-    padding: 0.4rem;
+    line-height: 1.6em;
+    padding: 0.4em;
     margin: 0;
     justify-content: space-between;
     align-items: center;
@@ -1434,7 +1430,8 @@ ul.card-list, .card > ul {
     outline-color: #212529; }
 
 .toolbar {
-  flex-direction: row; }
+  flex-direction: row;
+  padding: 0.4em; }
   .toolbar ul {
     display: flex;
     flex-direction: row;
@@ -1446,9 +1443,9 @@ ul.card-list, .card > ul {
     .toolbar li em,
     .toolbar li strong, .toolbar li.toolbar-element {
       display: block;
-      padding: 0.5333333333rem;
-      padding-left: 0.8rem;
-      padding-right: 0.8rem; }
+      padding: 0.5333333333em;
+      padding-left: 0.8em;
+      padding-right: 0.8em; }
 
 .menu-divider,
 .menu ul h1,
@@ -1456,20 +1453,20 @@ ul.menu h1,
 .menu h2,
 ul.menu h2 {
   position: relative;
-  left: -0.4rem;
+  left: -0.4em;
   font-weight: 800;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
+  padding-top: 0.4em;
+  padding-bottom: 0.4em;
   font-size: 1em;
-  line-height: 1.6rem; }
+  line-height: 1.6em; }
 
 .menu-label {
   border: 0px solid rgba(0, 0, 0, 0.3);
   border-radius: 4px 4px 4px 4px;
   background-color: transparent;
   transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem; }
+  padding-left: 0.4em;
+  padding-right: 0.4em; }
   .menu-label:hover, .menu-label:active {
     background-color: transparent; }
 
@@ -1480,17 +1477,17 @@ ul.menu h2 {
   border: none;
   margin: 0;
   margin-bottom: 1.6rem;
-  padding: 0.8rem;
+  padding: 0.4em;
   font-size: 0.8rem; }
   .toast > * {
-    margin-left: 0.4rem;
-    margin-right: 0.4rem; }
+    margin-left: 0.2em;
+    margin-right: 0.2em; }
     .toast > *:first-child, .toast > *.sr-only:first-child ~ * {
-      margin-top: 0.8rem; }
+      margin-top: 0.4em; }
       .toast > *:first-child.card-header, .toast > *.sr-only:first-child ~ *.card-header {
         margin-top: 0px; }
     .toast > *:last-child {
-      margin-bottom: 0.8rem; }
+      margin-bottom: 0.4em; }
       .toast > *:last-child.card-header {
         margin-bottom: 0px; }
   .toast a {
@@ -2649,17 +2646,18 @@ header h1 {
   grid-template-columns: 1fr;
   grid-template-rows: auto;
   row-gap: 1.6rem;
-  column-gap: 3rem;
+  column-gap: 1.5rem;
   grid-template-areas: "main" "side"; }
   @media (min-width: 992px) {
     .container-blog {
-      grid-template-columns: auto 360px;
+      grid-template-columns: auto 300px;
       grid-template-areas: "main side"; } }
 .fullwidth {
   grid-column: span 2; }
 
 .sidebar {
-  grid-area: side; }
+  grid-area: side;
+  font-size: 0.8rem; }
 
 ul.tag-list {
   display: flex;