Dev (#27)

* fixed css fuckup

Signed-off-by: Ash Entwisle <ash.entwisle@protonmail.com>

* tweaked css

Signed-off-by: Ash Entwisle <ash.entwisle@protonmail.com>

* tweaked css

Signed-off-by: Ash Entwisle <ash.entwisle@protonmail.com>

---------

Signed-off-by: Ash Entwisle <ash.entwisle@protonmail.com>

src/styles/base.scss

@@ -62,13 +62,13 @@ a {
   transition: color 0.1s;
 
   text-decoration: underline;
-  text-decoration-style: wavy;
+  //text-decoration-style: wavy;
   
   transition: text-decoration-style 0.1s;
 
   // on hover, make line straight in 0.1s 
   &:hover {
-    text-decoration-style: solid;
+    text-decoration-style: none;
     transition: text-decoration-style 0.1s;
 
     color: $col-light-4;

src/styles/components/header.scss

@@ -78,7 +78,7 @@ header {
 
 
       &:hover {
-        text-decoration: underline;
+        text-decoration: none;
         text-decoration-style: solid;
         text-decoration-thickness: 1.5px;
 

src/styles/components/markdown.scss

@@ -115,10 +115,13 @@ main {
 
     img {
       display: block;
+      margin-top: 10px;
+      margin-bottom: 10px;
       margin-left: auto;
       margin-right: auto;
-      max-width: 80%;
       max-height: 400px;
+      // dynamic width, 40% of the container
+      width: 40%;
 
       // curve the edges of the image
       border-radius: 10px;
@@ -129,6 +132,15 @@ main {
       flex-direction: row;
       justify-content: center;
       align-items: center;
+
+      // if less than 400, make the images stack
+      @media (max-width: 400px) {
+        flex-direction: column;
+        img {
+          width: 80%;
+        }
+      }
+
     }
   }
 

src/styles/pages/blog.scss

@@ -58,7 +58,7 @@ main {
 
           .blog_post_title {
             text-decoration: underline;
-            text-decoration-style: wavy;
+            //text-decoration-style: wavy;
             
             color: $col-fg-accent;
           }