website

commit 24a09434def23d067d80bcced53343d33e7f37ff
parent 8916981943cb541da1f1127294a33831c96e9ae6
Author: Michael Neuper <michael@michaelneuper.com>
Date:   Mon, 30 Oct 2023 22:11:42 +0200

Add sidebar

Diffstat:
M
config.toml
 | 
2
+-
M
layouts/_default/baseof.html
 | 
12
+++++++++---
M
layouts/partials/header.html
 | 
11
+++++++++++
M
static/css/styles.css
 | 
53
++++++++++++++++++++++++++++++++++++++++++++++++++++-

4 files changed, 73 insertions(+), 5 deletions(-)
diff --git a/config.toml b/config.toml
@@ -48,7 +48,7 @@ email = "michael@michaelneuper.com"
 name = "Michael Neuper"
 
 [params]
-title="Hi, I'm Michael"
+title="Michael Neuper"
 description = "Michael's Personal Website"
 footnote = """
 Follow me on <a class=link href=https://github.com/michaelneuper target=_blank rel=noopener>GitHub</a> or
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -71,9 +71,15 @@
 
 <body>
   <div id="wrapper">
-    {{ partial "header.html" . }}
-    {{ block "main" . }}{{ end }}
-    {{ partial "footer.html" . }}
+    <div class="container">
+        <div class="side-panel">
+        {{ partial "header.html" . }}
+        </div>
+        <div class="main-content">
+        {{ block "main" . }}{{ end }}
+        {{ partial "footer.html" . }}
+        </div>
+    </div>
   </div>
 
   <!-- custom css -->
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -7,6 +7,17 @@
   </h1>
 
   <nav>
+
+    <!-- <div class="nav-bar-item">
+        <ul>
+          {{ range .Site.Menus.main }}
+          <li>
+            <a class="link" href="{{ .URL | safeURL }}">{{ .Name }}</a>
+          </li>
+          {{ end }}
+        </ul>
+      </div> -->
+
     {{ range .Site.Menus.main }}
     <span class="nav-bar-item">
       <a class="link" href="{{ .URL | safeURL }}">{{ .Name }}</a>
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -32,6 +32,10 @@
     background-color: var(--base02);
   }
 
+  .side-panel {
+    background-color: var(--base02);
+  }
+
   blockquote {
     background: var(--base02);
   }
@@ -66,7 +70,7 @@
   }
 
   header {
-    background: var(--base03);
+    background: var(--base02);
     border-bottom: 0px;
   }
   h2 a {
@@ -120,6 +124,10 @@
     background: var(--base3);
   }
 
+  .side-panel {
+    background-color: var(--base2);
+  }
+
   a:link {
     color: var(--blue);
   }
@@ -196,3 +204,45 @@ button.copyButton {
 button.copyButton:hover {
     opacity: 1;
 }
+
+#wrapper {
+    padding-left: 0;
+}
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.side-panel {
+    width: 300px;
+    position: fixed;
+    top: 0;
+    height: 100vh;
+    overflow-y: auto;
+    z-index: 1;
+
+    @media (max-width: 768px) {
+        position: static;
+        width: 100%;
+        height: auto;
+    }
+}
+
+.main-content {
+    flex: 1;
+    /* max-width: calc(100% - 300px); */
+    max-width: 80%;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding-left: 300px;
+
+    @media (max-width: 768px) {
+        padding-left: 0;
+        margin: 20px;
+    }
+}
+
+.menus .ul {
+    list-style: none !important;
+}
+\ No newline at end of file