improve header layout in articles

workshops-de · Jun 25, 2024 · 9307445 · 9307445
1 parent 228d1d8
commit 9307445
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -18,7 +18,7 @@
     <div class="ratio mb-4" style="--bs-aspect-ratio: 30%;">
       <img src="{{page.header_image}}" class="rounded w-100" style="object-fit: cover;" />
     </div>
-    <div class="row mb-5 gx-5">
+    <div class="row mb-5 gx-6">
       <div class="col-md-12 col-lg-8 mb-2">
         <h1 class="header-post-title">{{ page.title }}</h1>
 
@@ -55,7 +55,7 @@ <h1 class="header-post-title">{{ page.title }}</h1>
           {{ content }}
         </div>
       </div>
-      <div class="col-lg-3 d-none d-lg-block">
+      <div class="col-lg-4 d-none d-lg-block">
         <div class="position-sticky c-top-4 ms-2">
           <p class="text-muted text-uppercase"><small>Inhaltsverzeichnis</small></p>
           <nav id="toc" data-toggle="toc"></nav>

diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -40,6 +40,16 @@ $spacers: map-merge((
   5: ($spacer * 3),
   6: ($spacer * 6)
 ), $spacers);
+$gutters: (
+  0: 0,
+  1: $spacer * .25,
+  2: $spacer * .5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3,
+  6: $spacer * 4.5,
+  7: $spacer * 6
+);
 
 // Links
 $link-decoration: none;