Improve site responsivity for mobilemain

Images do not small with small width, responsively change.

Header fix as well, but forgot what I did.

1 files changed, 20 insertions, 8 deletions

diff --git a/static/style.css b/static/style.css
index 594cbc2..8aa9ffc 100644
--- a/static/style.css
+++ b/static/style.css
@@ -13,25 +13,30 @@ html {
 header {
    display: flex;
    flex-direction: row;
+   background-color: var(--primary-header-color);
 }
 
 /* part of header w/ title and nav */
 #left-header {
    display: flex;
    flex-direction: column;
-   flex-grow: 4;}
+   }
+
 #site-title {
    margin: 0px;
    font-family: sans-serif;
    padding-left: 0.4rem;
    background-color: var(--primary-header-color);
-   color: white;}
+   color: white;
+}
+
 nav {
    display: flex;
    padding-left: 0.2rem;
    padding-bottom: 3px;
 	display: inline;
-   background-color: var(--primary-header-color);}
+   background-color: var(--primary-header-color);
+}
 
 
 
@@ -40,12 +45,17 @@ nav {
    background-image: url("/bg.gif");
    display: flex;
    background-repeat: repeat;
-   min-width: 50%;}
+   flex-grow: 1;
+   }
+
 #image-gradient {
    flex-grow: 1;
-     background: linear-gradient(to right, var(--primary-header-color) 0%, var(--primary-header-color) 20%, rgba(255,0,0,0));}
+     background: linear-gradient(to right, var(--primary-header-color) 0%, var(--primary-header-color) 20%, rgba(255,0,0,0));
+  }
+
 .nav-item {
-   color: white;}
+   color: white;
+}
 
 
 
@@ -53,7 +63,7 @@ nav {
 body {
    margin-top: 1rem;
    background-color: var(--bg-color);
-	max-width: 60%;
+	max-width: 40rem;
 }
 
  /* main content */
@@ -64,7 +74,9 @@ main {
 
 /* images are centered and fixed-width */
 img {
-   max-width: 50%;
+   width: 100%;
+   max-width: 23rem;
+   height: auto;
    display: block;
    margin: 0 auto;
    image-rendering: pixelated;