cleaned up sidebar

themes/saturn/layouts/partials/sidebar.html

@@ -1,16 +1,21 @@
+<div class="main-sidebar">
     <div class="header-nav">
         <header>
+            <div class="profile">
                 <a class="sitetitle" href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>
-        <div id="quote">
+                <img width="100px" src="/images/avatar.jpg">
-            <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>
+                        <li class="social">
+                            <a rel="me" href="{{ .URL }}">
+                                <span class="social {{.Params.class}}"></span>
+                            </a>
+                        </li>
                         {{ end }}
                     </ul>
                 </div>
+            </div>
         </header>
         <nav>
             <ul>
@@ -19,4 +24,8 @@
                 {{ end }}
             </ul>
         </nav>
+        <div id="quote">
+            <p id="subtitle">.</p>
+        </div>
+    </div>
 </div>

themes/saturn/static/css/main.css

@@ -64,7 +64,6 @@ body {
     scrollbar-width: none;
     padding: 0;
     margin: 0;
-    overscroll-behavior: none;
 }
 
 body::-webkit-scrollbar {
@@ -114,40 +113,80 @@ a.summary {
     margin: 0 auto;
     padding: 0;
     flex: 1;
+    min-height: 100vh;
+}
+
+.main-sidebar {
+    width: 20%;
 }
 
 .header-nav {
-    width: 350px;
     position: sticky;
     top: 0px;
+    min-height: 100vh;
+    text-align: center;
+    display: flex;
+    flex-flow: column;
 }
 
 header {
-    display: flex;
+    flex: 1 1 35%;
-    flex-flow: row wrap;
-    flex-shrink: 0;
-    position: sticky;
-    top: 0px;
-    height: 300px;
 }
 
 header h1 {
     font-family: "Genesis", 'Courier New', Courier, monospace;
-    font-size: 1.5rem;
+    font-size: 1.3rem;
     color: var(--pewter-blue);
     width: 350px;
 }
 
+header ul.social {
+    list-style-type: none;
+    margin: 0;
+    padding: 15px 0;
+    text-align: center;
+}
+
+header li.social {
+    display: inline;
+}
+
+header li.social a {
+    display: inline-block;
+    padding: 0 10px;
+    color: var(--secondary-link);
+}
+
 header a.sitetitle {
     text-decoration: none;
 }
 
+p#subtitle {
+    text-align: center;
+}
+
+span.social {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    color: white;
+}
+
+span.masto {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.2595 13.9898C20.9852 15.4006 18.8033 16.9446 16.2974 17.2439C14.9907 17.3998 13.7041 17.5431 12.3321 17.4802C10.0885 17.3774 8.31809 16.9446 8.31809 16.9446C8.31809 17.163 8.33156 17.371 8.3585 17.5655C8.65019 19.7797 10.5541 19.9124 12.3576 19.9742C14.1779 20.0365 15.7987 19.5254 15.7987 19.5254L15.8735 21.1711C15.8735 21.1711 14.6003 21.8548 12.3321 21.9805C11.0814 22.0493 9.52849 21.9491 7.71973 21.4703C3.79684 20.432 3.12219 16.2504 3.01896 12.0074C2.98749 10.7477 3.00689 9.55981 3.00689 8.56632C3.00689 4.22771 5.84955 2.95599 5.84955 2.95599C7.2829 2.29772 9.74238 2.0209 12.2993 2H12.3621C14.919 2.0209 17.3801 2.29772 18.8133 2.95599C18.8133 2.95599 21.6559 4.22771 21.6559 8.56632C21.6559 8.56632 21.6916 11.7674 21.2595 13.9898ZM18.3029 8.9029C18.3029 7.82924 18.0295 6.97604 17.4805 6.34482C16.9142 5.71359 16.1726 5.39001 15.2522 5.39001C14.187 5.39001 13.3805 5.79937 12.8473 6.61819L12.3288 7.48723L11.8104 6.61819C11.2771 5.79937 10.4706 5.39001 9.40554 5.39001C8.485 5.39001 7.74344 5.71359 7.17719 6.34482C6.62807 6.97604 6.3547 7.82924 6.3547 8.9029V14.1562H8.43597V9.05731C8.43597 7.98246 8.88822 7.4369 9.79281 7.4369C10.793 7.4369 11.2944 8.08408 11.2944 9.36376V12.1547H13.3634V9.36376C13.3634 8.08408 13.8646 7.4369 14.8648 7.4369C15.7694 7.4369 16.2216 7.98246 16.2216 9.05731V14.1562H18.3029V8.9029Z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+span.email {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+span.rss {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3 3C12.9411 3 21 11.0589 21 21H18C18 12.7157 11.2843 6 3 6V3ZM3 10C9.07513 10 14 14.9249 14 21H11C11 16.5817 7.41828 13 3 13V10ZM3 17C5.20914 17 7 18.7909 7 21H3V17Z'%3E%3C/path%3E%3C/svg%3E");
+}
 
 nav {
-    flex: 0 0 100px;
+    flex: 3 1 55%;
     text-align: right;
-    position: sticky;
-    top: 300px;
 }
 
 nav ul {
@@ -248,25 +287,6 @@ footer {
     top: 450px;
 }
 
-footer div {
-}
-
-footer ul.social {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-}
-
-footer li.social {
-    display: inline;
-}
-
-footer li.social a {
-    display: inline-block;
-    padding: 0 10px;
-    color: var(--secondary-link);
-}
 
 #webmentions img { max-height: 1.2em; margin-right: -1ex; }
 
@@ -331,7 +351,7 @@ a.hover-links:hover {
     visibility: visible;
 }
 
-@media only screen and (max-width: 450px) {
+@media only screen and (max-width: 500px) {
     div.nav {
         border: none;
     }
@@ -340,17 +360,27 @@ a.hover-links:hover {
         background-color: var(--content-bg);
     }
 
+    main {
+        padding: 0 45px;
+    }
+
     .big {
         flex-direction: column;
         width: unset;
     }
 
+    .header-nav {
+        position: unset;
+        min-height: unset;
+    }
+
     .column {
         border: none;
         background: none;
         max-width: unset;
         margin: 0 auto;
         padding: 0.2rem;
+        min-height: unset;
     }
 
     #content {