1 columna, body max width

1 files changed, 35 insertions, 47 deletions

diff --git a/style.css b/style.css
index 8d3c696..61167ed 100644
--- a/style.css
+++ b/style.css
@@ -15,6 +15,16 @@
         --blue:      #268bd2;
         --cyan:      #2aa198;
         --green:     #859900;
+        --header-font-size: 175%;
+        --column-min-width: 25ex;
+        --border-width: 1px;
+        --padding: 2ex;
+        --margin: 2ex;
+        --content-padding-left: 9ex;
+        --content-padding-right: 5ex;
+        --body-max-width: 140ex;
+        --body-min-width: 75ex;
+        --body-font-size: 110%;
 }
 
 @font-face {
@@ -53,12 +63,17 @@ body {
         font-family: 'Libertinus';
         color: var(--base1);
         background-color: var(--base02);
-        font-size: 110%;
+        font-size: var(--body-font-size);
+        min-width: var(--body-min-width);
+        max-width: var(--body-max-width);
+        margin: auto;
 }
 
 section {
-        margin: 2ex;
-        padding: 1ex;
+        border: var(--border-width) solid var(--blue);
+        background-color: var(--base03);
+        margin: var(--margin);
+        padding: var(--padding);
 }
 
 p::first-letter {
@@ -71,19 +86,21 @@ em {
 }
 
 strong {
-        color: var(--red);
+        color: var(--orange);
+}
+
+header,
+footer {
+        text-align: center;
 }
 
 :link,
 :visited {
-        color: var(--blue);
+        color: var(--cyan);
 }
 
-.header {
-        text-align: center;
+.header header {
         font-size: 200%;
-        color: var(--base1);
-        background-color: var(--base03);
 }
 
 .logo {
@@ -92,16 +109,7 @@ strong {
 }
 
 .navigation {
-        padding: 1ex;
-        color: var(--base1);
-        background-color: var(--base03);
-}
-
-.footer {
-        padding: 1ex;
         text-align: center;
-        color: var(--base1);
-        background-color: var(--base03);
 }
 
 .main {
@@ -109,41 +117,21 @@ strong {
         justify-content: center;
 }
 
-.column {
-        color: var(--base01);
-        background-color: var(--base3);
-}
-
-.column-header {
-        text-align: center;
-        font-size: 175%;
-        color: var(--base01);
-        background-color: var(--base2);
-}
-
-
-.left,
-.right {
-        min-width: 10ex;
-        max-width: 25ex;
+.column header {
+        font-size: var(--header-font-size);
+        background-color: var(--base02);
 }
 
-.left,
-.right,
-.content {
-        float: left;
+.left {
+        min-width: var(--column-min-width);
 }
 
 .content {
         text-indent: 4ex;
         text-align: justify;
-        min-width: 30ex;
-        max-width: 80ex;
-        padding-left: 8ex;
-        padding-right: 4ex;
-        padding-top: 4ex;
-        padding-bottom: 1ex;
-        color: var(--base1);
-        background-color: var(--base03);
+        padding-left: var(--content-padding-left);
+        padding-right: var(--content-padding-right);
+        padding-top: 2ex;
+        padding-bottom: 5ex;
 }