updating style and content

1 files changed, 44 insertions, 22 deletions

diff --git a/zola/static/style.css b/zola/static/style.css
index e1297bc..a97d4b9 100644
--- a/zola/static/style.css
+++ b/zola/static/style.css
@@ -16,18 +16,28 @@
         --cyan:      #2aa198;
         --green:     #859900;
         --header-font-size: 150%;
-        --column-min-width: 20ex;
+        --left-column-min-width: 18ex;
         --border-width: 1px;
         --padding: 2ex;
         --margin: 2ex;
-        --content-padding-left: 9ex;
+        --content-padding-left: 10ex;
         --content-padding-right: 5ex;
         --body-max-width: 130ex;
-        --body-min-width: 75ex;
-        --body-font-size: 115%;
-        --first-letter-font-size: 140%;
-        --content-width: 100ex;
+        --body-min-width: 70ex;
+        --body-font-size: 18px;
+        --first-letter-font-size: 120%;
+        --max-content-width: 80ex;
         --dt-font-size: 120%;
+        --primary-color: var(--base1);
+        --secondary-color: var(--yellow);
+        --content-background-color: var(--base03);
+        --filling-background-color: var(--base02);
+        --text-color: var(--primary-color);
+        --font-family: 'Libertinus';
+        --link-text-color: var(--cyan);
+        --highlight-text-color: var(--secondary-color);
+        --primary-border-color: var(--secondary-color);
+        --secondary-border-color: var(--base00);
 }
 
 @font-face {
@@ -63,9 +73,9 @@
 }
 
 body {
-        font-family: 'Libertinus';
-        color: var(--base1);
-        background-color: var(--base02);
+        font-family: var(--font-family);;
+        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);
@@ -73,28 +83,34 @@ body {
 }
 
 section {
-        border: var(--border-width) solid var(--blue);
-        background-color: var(--base03);
+        border: var(--border-width) solid var(--secondary-border-color);
+        background-color: var(--content-background-color);
         margin: var(--margin);
         padding: var(--padding);
 }
 
-em {
-        color: var(--yellow);
+section.mainheader {
+        border: var(--border-width) solid var(--primary-border-color);
 }
 
+em,
 strong {
-        color: var(--orange);
+        color: var(--highlight-text-color);
 }
 
 article p::first-letter {
         font-size: var(--first-letter-font-size);
-        color: var(--orange);
+        color: var(--highlight-text-color);
 }
 
-article {
+article p {
         text-indent: 4ex;
         text-align: justify;
+        margin-top: 1ex;
+        margin-bottom: 1ex;
+}
+
+article {
         padding-top: 2ex;
         padding-bottom: 5ex;
 }
@@ -108,13 +124,18 @@ footer {
         text-align: center;
 }
 
+h1,
+h2 {
+        border-top: 1px solid var(--primary-color);
+}
+
 :link,
 :visited {
-        color: var(--cyan);
+        color: var(--link-text-color);
 }
 
-.header header {
-        font-size: 200%;
+.mainheader header {
+        font-size: 220%;
 }
 
 .logo {
@@ -132,16 +153,17 @@ footer {
 }
 
 .column header {
+        border: var(--border-width) solid var(--primary-border-color);
         font-size: var(--header-font-size);
-        background-color: var(--base02);
+        background-color: var(--filling-background-color);
 }
 
 .left {
-        min-width: var(--column-min-width);
+        min-width: var(--left-column-min-width);
 }
 
 .content {
-        width: var(--content-width);
+        max-width: var(--max-content-width);
         padding-left: var(--content-padding-left);
         padding-right: var(--content-padding-right);
 }