Media queries for device width

blog_server/src/service/index.rs

@@ -16,7 +16,7 @@ pub async fn handle(Extension(posts): Extension<ConcurrentPostsStore>) -> Html {
         })
         .with_body(template::main_page(html! {
             section .content_section {
-                h2 { "Who I am" }
+                h2 { "About me" }
                 p {
                     "Hi! I'm Tom, a computer science student and hobbyist programmer."
                 }

static/styles/main.css

@@ -94,17 +94,18 @@ body {
 }
 
 #page_nav {
-    display: flex;
+    /* display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-between; */
     padding: 1rem 1rem;
     margin: 0 auto;
     max-width: 60rem;
 }
 
 #page_nav #title_box {
-    font-size: 2rem;
+    font-size: 1.5rem;
     font-weight: 800;
+    margin-bottom: 0.5rem;
 }
 
 #page_nav #right_nav_box {
@@ -118,11 +119,15 @@ body {
     display: grid;
     grid-template-columns: repeat(5, auto);
     grid-template-rows: 100%;
-    column-gap: 1.5rem;
+    /* column-gap: 1.5rem; */
+    column-gap: 1rem;
     margin-top: 0;
     margin-bottom: 0;
     padding: 0;
-    font-size: 1.5rem;
+    /* font-size: 1.5rem; */
+    font-size: 1.2rem;
+    overflow-x: auto;
+    white-space: nowrap;
 }
 
 #page_nav li {
@@ -157,9 +162,8 @@ body {
     margin: 0;
     padding: 0;
     display: grid;
-    grid-template-columns: repeat(3, auto);
+    grid-template-rows: repeat(3, auto);
-    column-gap: 1rem;
+    row-gap: 0.5rem;
-    width: fit-content;
     font-size: 0.9rem;
 }
 
@@ -190,7 +194,7 @@ body {
 
 #content {
     margin: 0 auto;
-    padding: 2rem 1rem 4rem 1rem;
+    padding: 1rem;
     max-width: 60rem;
 }
 
@@ -247,7 +251,7 @@ li {
 }
 
 .article_title {
-    font-size: 3rem;
+    font-size: 2rem;
     margin-top: 0.5rem;
     margin-bottom: 1rem;
 }
@@ -291,7 +295,8 @@ li {
     padding-top: 1rem;
     padding-bottom: 1rem;
     margin: 0;
-    font-size: 1rem;
+    font-size: 0.9rem;
+    overflow-x: auto;
 }
 
 .codeblock_code code {
@@ -309,7 +314,6 @@ li {
 
 .codeblock_banner {
     background-color: #94BFBE;
-    /* background-color: #706677; */
 }
 
 .article_content img {
@@ -321,6 +325,47 @@ li {
     box-shadow: 3px 3px 10px #C9C9C9;
 }
 
+@media screen and (min-width: 22em) {
+    #page_nav #title_box {
+        font-size: 2rem;
+    }
+
+    .article_title {
+        font-size: 2.5rem;
+    }
+
+    .codeblock_code {
+        font-size: 1rem;
+    }
+}
+
+@media screen and (min-width: 40em) {
+    #page_nav {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+    
+    #page_nav #title_box {
+        margin-bottom: 0;
+    }
+
+    #content {
+        padding: 2rem 1rem 4rem 1rem;
+    }
+
+    .article_title {
+        font-size: 3rem;
+    }
+}
+
+@media screen and (min-width: 50rem) {
+    #page_nav ul {
+        column-gap: 1.5rem;
+        font-size: 1.5rem;
+    }
+}
+
 /* 
 Palette
 #94BFBE