second layout concept

themes/saturn/layouts/_default/baseof.html

@@ -5,11 +5,9 @@
         <div class="big">
         {{- partial "sidebar.html" . -}}
         <div class="column">
-            {{- partial "header.html" . -}}
             <main>
                 {{- block "main" . }}{{- end }}
             </main>
-            {{- partial "footer.html" . -}}
         </div>
         </div>
     </body>

themes/saturn/layouts/partials/sidebar.html

@@ -1,7 +1,22 @@
-<nav>
+<div class="header-nav">
+    <header>
+        <a class="sitetitle" href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>
+        <div id="quote">
+            <p id="subtitle">.</p>
+        </div>
+        <div id="social-links">
+            <ul class="social">
+                {{ range site.Menus.social }}
+                <li class="social"><a rel="me" href="{{ .URL }}">{{ .Name }}</a></li>
+                {{ end }}
+            </ul>
+        </div>
+    </header>
+    <nav>
         <ul>
             {{ range site.Menus.main }}
                 <li><a href="{{ .URL }}">{{ .Name }}</a></li>
             {{ end }}
         </ul>
-</nav>
+    </nav>
+</div>

themes/saturn/static/css/main.css

@@ -62,6 +62,9 @@ body {
     color: var(--primary-text);
     font-family: 'Krub', sans-serif;
     scrollbar-width: none;
+    padding: 0;
+    margin: 0;
+    overscroll-behavior: none;
 }
 
 body::-webkit-scrollbar {
@@ -74,6 +77,7 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 p {
+    height: fit-content;
     line-height: 1.5;
 }
 
@@ -101,43 +105,49 @@ a.summary {
 .big {
     display: flex;
     flex-direction: row;
-    margin: 0 auto;
-    padding-top: 100px;
-    width: 40rem;
 }
 
 .column {
     display: flex;
     flex-direction: column;
     gap: 10px;
-    max-width: 1000px;
-    margin: 10px auto;
-    min-height: 800px;
+    margin: 0 auto;
+    padding: 0;
     flex: 1;
 }
 
+.header-nav {
+    width: 350px;
+    position: sticky;
+    top: 0px;
+}
+
 header {
     display: flex;
     flex-flow: row wrap;
     flex-shrink: 0;
-    margin: 10px auto;
+    position: sticky;
+    top: 0px;
+    height: 300px;
 }
 
 header h1 {
     font-family: "Genesis", 'Courier New', Courier, monospace;
     font-size: 1.5rem;
     color: var(--pewter-blue);
+    width: 350px;
 }
 
 header a.sitetitle {
     text-decoration: none;
 }
 
+
 nav {
     flex: 0 0 100px;
-    width: fit-content;
     text-align: right;
-    padding-top: 100px;
+    position: sticky;
+    top: 300px;
 }
 
 nav ul {
@@ -169,7 +179,7 @@ main {
     flex: 1;
     display: flex;
     background-color: rgba(23,33,33,0.7);
-    padding: 0 25px;
+    padding: 0 150px;
     flex-flow: row wrap;
     /* gap: 20px; */
     z-index: 1;
@@ -230,16 +240,15 @@ li.page-item {
 
 
 footer {
-    display: flex;
-    flex-direction: column;
     padding: 0 0 15px 0px;
     text-align: center;
     color: var(--secondary-text);
     border-top: 1px solid var(--secondary-text);
+    position: sticky;
+    top: 450px;
 }
 
 footer div {
-    flex: 1;
 }
 
 footer ul.social {
@@ -284,8 +293,9 @@ footer li.social a {
 }
 
 .links-column {
-    flex: 1 1 33%;
+    flex: 1 1 300px;
     overflow-wrap: break-word;
+    height: fit-content;
 }
 
 .hover-links {