fix style for better view on mobile

1 files changed, 10 insertions, 9 deletions

diff --git a/zola/static/style.css b/zola/static/style.css
index becd310..55c4dbf 100644
--- a/zola/static/style.css
+++ b/zola/static/style.css
@@ -16,17 +16,15 @@
         --cyan:      #2aa198;
         --green:     #859900;
         --header-font-size: 150%;
-        --left-column-min-width: 18ex;
+        --left-column-width: 22ex;
         --border-width: 1px;
         --padding: 2ex;
         --margin: 2ex;
-        --content-padding-left: 10ex;
-        --content-padding-right: 5ex;
+        --content-padding-left: 8ex;
+        --content-padding-right: 4ex;
         --body-max-width: 130ex;
-        --body-min-width: 70ex;
-        --body-font-size: 16px;
+        --body-font-size: 17px;
         --first-letter-font-size: 120%;
-        --max-content-width: 80ex;
         --dt-font-size: 120%;
         --primary-color: var(--base1);
         --secondary-color: var(--yellow);
@@ -77,7 +75,6 @@ body {
         color: var(--text-color);
         background-color: var(--filling-background-color);
         font-size: var(--body-font-size);
-        min-width: var(--body-min-width);
         max-width: var(--body-max-width);
         margin: auto;
 }
@@ -149,7 +146,9 @@ h2 {
 
 .main {
         display: flex;
+        flex-wrap: wrap;
         justify-content: center;
+        align-items: flex-start;
 }
 
 .column header {
@@ -159,11 +158,13 @@ h2 {
 }
 
 .left {
-        min-width: var(--left-column-min-width);
+        flex-shrink: 0;
+        width: var(--left-column-width);
 }
 
 .content {
-        max-width: var(--max-content-width);
+        flex-grow: 1;
+        flex-basis: 0;
         padding-left: var(--content-padding-left);
         padding-right: var(--content-padding-right);
 }