feat: improve mobile css

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

Author: explodingcamera

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

@@ -1,6 +1,6 @@
 +++
 transparent = true
-title = "Creating a Kernel in Rust #2: Shell"
+title = "Operating Systems in Rust #2: Shell"
 description = "Creating a simple shell for our kernel to run commands and help us debug"
 date = 2023-07-08
 

sass/footer.scss

@@ -1,12 +1,16 @@
 @import "variables";
 
 .footer {
-  margin-left: 45px;
   position: absolute;
   display: flex;
   bottom: 0;
-  padding: 40px 0;
+  padding: 2rem 2rem;
   flex-grow: 0;
+  width: 100%;
+
+  @media (max-width: $phone-max-width) {
+    justify-content: center;
+  }
 
   &__inner {
     display: flex;

sass/header.scss

@@ -14,9 +14,16 @@
 
 .header {
   height: 6rem;
-  margin-left: 45px;
+  margin: 0 3rem;
 
   ul {
+    display: flex;
+
+    @media (max-width: $phone-max-width) {
+      justify-content: space-evenly;
+    }
+
+
     padding: 40px 0;
     margin: 0;
     list-style: none;

sass/main.scss

@@ -311,10 +311,6 @@ ol {
   li {
     position: relative;
   }
-
-  @media (max-width: $phone-max-width) {
-    margin-left: 20px;
-  }
 }
 
 ol ol {
@@ -329,12 +325,11 @@ ol ol {
   padding: .5rem 5rem;
   padding-bottom: 5rem;
   max-width: 60rem;
-  min-height: calc(100vh - 7rem);
+  min-height: calc(100vh - 6rem);
   margin: 0 auto;
 
   @media (max-width: $phone-max-width) {
-    padding: 20px;
-    margin-top: -5rem;
+    padding: 2rem;
   }
 }
 

sass/pagination.scss

@@ -57,7 +57,7 @@
     max-width: 80%;
   }
 
-  + .button {
+  +.button {
     margin-left: 10px;
   }
 
@@ -74,4 +74,4 @@
     white-space: nowrap;
     overflow: hidden;
   }
-}
+}

sass/post.scss

@@ -2,22 +2,37 @@
 
 li>div.year-pad {
   height: 4rem;
+
+  @media (max-width: $phone-max-width) {
+    height: 4.5rem;
+  }
 }
 
 li>div.year {
   position: absolute;
   z-index: -1;
   user-select: none;
-  top: .4rem;
+  top: 0.9rem;
   left: -2rem;
 
   h2 {
+    line-height: 1;
     font-size: 6rem;
     margin: 0;
     color: var(--background);
     opacity: 0.3;
     -webkit-text-stroke: 1px var(--color);
   }
+
+
+  @media (max-width: $phone-max-width) {
+    top: 0rem;
+    left: 0rem;
+
+    h2 {
+      font-size: 4rem;
+    }
+  }
 }
 
 .posts {