Continuing pages.

static/css/blocks.css

@@ -40,3 +40,4 @@
     opacity: 1;
     max-height: 100%;
 }
+

static/css/common.css

@@ -25,11 +25,11 @@ a[role=button] {
     cursor: pointer;
 }
 
-a[role=button].primary {
+.primary {
     background-color: var(--primary-color);
 }
 
-a[role=button].secondary {
+.secondary {
     background-color: var(--secondary-color);
 }
 
@@ -75,6 +75,7 @@ img.center {
 /* workaround for sometimes images don't position correctly vertically */
 .vertical-center-img {
     margin: auto;
+    max-height: 100%;
 }
 
 .text-left {
@@ -101,6 +102,7 @@ img.center {
     width: 1em;
     height: 1em;
     margin-right: 0.4em;
+    vertical-align: middle;
 }
 
 .icon-larger-text {
@@ -108,6 +110,7 @@ img.center {
     height: 1.4em;
     margin-right: 0.4em;
     margin-top: -0.2em;
+    vertical-align: middle;
 }
 
 h1 {
@@ -120,6 +123,10 @@ h2 {
     font-family: var(--light-font);
 }
 
+h3 {
+    font-family: var(--light-font);
+}
+
 p {
     line-height: 1.5em;
 }
@@ -134,17 +141,35 @@ p {
     display: flex !important;
 }
 
+.inline {
+    display: inline !important;
+}
+
 .flex-right {
     justify-content: flex-end;
 }
 
+.flex-center {
+    justify-content: center;
+}
+
 /* Columns */
 .columns-container {
     display: flex;
 }
 
-.column {
-    flex: auto;
+.col1:not(.col1-fill) {
+    width: 33%;
+    margin-right: auto !important;
+    margin-left: auto !important;
+}
+
+.col1.col1-fill {
+    width: 100%;
+}
+
+.col2 {
+    width: 50%;
 }
 
 .col3 {
@@ -155,8 +180,16 @@ p {
     width: 66%;
 }
 
-.col2 {
-    width: 50%;
+.col4 {
+    width: 25%;
+}
+
+.col3-4 {
+    width: 75%;
+}
+
+.col5 {
+    width: 20%;
 }
 
 @media screen and (max-width: 700px) {
@@ -168,7 +201,7 @@ p {
         width: 100%;
     }
     
-    .column > img {
+    .section-header .column > img {
         width: 100%;
     }
     
@@ -176,11 +209,11 @@ p {
         text-align: center;
     }
     
-     {
-        text-align: center;
-    }
-    
     .column .flex-right {
         justify-content: center;
     }
+    
+    .col1:not(.col1-fill) {
+        width: 100%;
+    }
 }

static/css/header.css

@@ -3,13 +3,12 @@ nav {
     font-size: 1.3em;
     height: 3em;
     background: var(--nav-background);
-    width: 100%;
+    width: 100vw;
     font-family: var(--light-font);
 }
 
 nav .nav-flex {
     display: flex;
-    flex-direction: row;
 }
 
 nav .navbar-brand {

static/css/sections.css

@@ -9,7 +9,7 @@ section.section1 {
 }
 
 section.section-header {
-    height: calc(100vh - 4em);
+    min-height: calc(100vh - 4em);
 }
 
 section.section-header > div {