chore: update css

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

config.toml

@@ -1,32 +1,27 @@
-base_url = "https://blog.henrygressmann.de"
-build_search_index = true
-compile_sass = true
-description = "a blog about software development, technology and other stuff"
-generate_feed = true
+base_url="https://blog.henrygressmann.de"
+build_search_index=true
+compile_sass=true
+description="a blog about software development, technology and other stuff"
+generate_feed=true
 
-taxonomies = [
-  {name = "tags"},
-  {name = "series", feed = true},
-]
+taxonomies=[{name="tags"}, {name="series", feed=true}]
 
-title = "henry's blog"
+title="henry's blog"
 
 [markdown]
-extra_syntaxes_and_themes = ["highlight_themes", "syntaxes"]
-highlight_code = true
-highlight_theme = "dracula"
+extra_syntaxes_and_themes=["highlight_themes", "syntaxes"]
+highlight_code=true
+highlight_theme="dracula"
 
 [extra]
-accent_color = "blue"
-background_color = "green"
-
-logo_text = "henry's blog"
+accent_color="blue"
+background_color="green"
 
 # Whether to show links to earlier and later posts
 # on each post page (defaults to true).
-enable_post_view_navigation = true
+enable_post_view_navigation=true
 
 # The text shown at the bottom of a post,
 # before earlier/later post links.
 # Defaults to "Thanks for reading! Read other posts?"
-post_view_navigation_prompt = "Thanks for reading! Read other posts?"
+post_view_navigation_prompt="Thanks for reading! Read other posts?"

content/rust-os/1-hello-riscv/index.md

@@ -26,7 +26,7 @@ This series requires pre-requisite knowledge of Rust or a similar programming la
 
 To follow along, I've also created a [GitHub Repo](https://github.com/explodingcamera/pogos) with a branch for each part of the series. You can find the code for this part [here](https://github.com/explodingcamera/pogos/tree/part-1).
 
-{{toc}}
+<!-- {{toc}} -->
 
 # CPU Architectures and RISC-V
 

content/rust-os/2-shell/index.md

@@ -20,7 +20,7 @@ The first thing I want to do is create a simple shell that will allow us to run
 
 Like I mentioned in the previous post, we can't yet use heap allocated data structures, so we'll start with implementing a Global Allocator. This will allow us to use APIs like `Box` and `Vec` anywhere in our kernel which will make our lives much easier.
 
-{{toc}}
+<!-- {{toc}} -->
 
 # Memory Allocators
 

sass/footer.scss

@@ -1,21 +1,18 @@
 @import "variables";
 
 .footer {
+  position: absolute;
+  display: flex;
+  bottom: 0;
   padding: 40px 0;
   flex-grow: 0;
-  opacity: 0.5;
-  margin-top: auto;
 
   &__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin: 0;
     max-width: 100%;
-
-    @media (max-width: $tablet-max-width) {
-      flex-direction: column;
-    }
   }
 
   a {
@@ -34,28 +31,24 @@
       text-align: center;
     }
 
-    & > a {
-      margin-right: 10px;
-      @media (max-width: $tablet-max-width) {
-        margin: 0;
+    &>a {
+      opacity: 0.3;
+      transition: opacity 0.2s ease-in-out;
+      text-decoration: none;
+
+      &:hover {
+        opacity: 1;
       }
-    }
 
-    @media (max-width: $tablet-max-width) {
-      flex-direction: column;
-      margin-top: 10px;
+      margin-right: 10px;
     }
   }
 
-  .copyright-theme-sep {
-    @media (max-width: $tablet-max-width) {
-      display: none;
-    }
-  }
+
 
   .copyright-theme {
     @media (max-width: $tablet-max-width) {
       font-size: 0.75rem;
     }
   }
-}
+}

sass/header.scss

@@ -13,88 +13,27 @@
 }
 
 .header {
-  display: flex;
-  flex-direction: column;
-  position: relative;
+  height: 4rem;
 
-  &__inner {
+  ul {
+    list-style: none;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  &__logo {
-    display: flex;
-    flex: 1;
-    // margin: 0 20px;
-
-    display: flex;
-    // justify-content: center;
-
-    // &:after {
-    //   content: '';
-    //   background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 16px);
-    //   display: block;
-    //   width: 100%;
-    //   right: 10px;
-    // }
-
-    a {
-      flex: 0 0 auto;
-      max-width: 100%;
-    }
-  }
+    gap: .5rem;
 
-  .menu {
-    margin: 20px 0;
+    li {
+      color: var(--color);
+      font-size: 2rem;
+      opacity: .3;
+      transition: opacity 0.2s ease-in-out;
 
-    &__inner {
-      display: flex;
-      flex-wrap: wrap;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-
-      li {
-        &.active {
-          color: var(--accent-alpha-70);
-        }
-
-        &:not(:last-of-type) {
-          margin-right: 20px;
-          margin-bottom: 10px;
-          flex: 0 0 auto;
-        }
+      a {
+        text-decoration: none;
       }
-    }
 
-    &__sub-inner {
-      position: relative;
-      list-style: none;
-      padding: 0;
-      margin: 0;
-
-      &:not(:only-child) {
-        margin-left: 20px;
-      }
-
-      &-more {
-        @include menu;
-        top: 35px;
-        left: 0;
-
-        &-trigger {
-          color: var(--accent);
-          user-select: none;
-          cursor: pointer;
-        }
-
-        li {
-          margin: 0;
-          padding: 5px;
-          white-space: nowrap;
-        }
+      &:hover,
+      &.active {
+        opacity: 0.6;
       }
     }
   }
-}
+}

sass/logo.scss

@@ -1,15 +1,10 @@
 .logo {
-  color: var(--accent);
-
-  color: var(--accent);
-  background: linear-gradient(123deg, #00ffe8 30%, #effbff 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
-
+  color: var(--color);
   display: flex;
   align-items: center;
   text-decoration: none;
-}
+  font-size: 3rem;
+  margin: 0;
+  opacity: .3;
+  padding: .8rem 1.4rem;
+}