Layouts reorganisation, moving images, new layout for single app!

static/css/blocks.css

@@ -40,7 +40,3 @@
     opacity: 1;
     max-height: 100%;
 }
-
-.padding-container {
-    padding: 1em;
-}

static/css/common.css

@@ -9,6 +9,14 @@ body {
     --footer-background: #111111; 
 }
 
+.content-center {
+    max-width: 75em;
+}
+
+.padding-container {
+    padding: 1em;
+}
+
 /* button */
 
 a[role=button] {
@@ -44,19 +52,51 @@ a[role=button].primary:hover, a[role=button].secondary:hover {
 
 /* format */
 
+.fill-width {
+    width: 100%;
+}
+
 .center {
-    margin-right: auto;
-    margin-left: auto;
+    margin-right: auto !important;
+    margin-left: auto !important;
+}
+
+img.center {
+    display: block;
+    max-width: 100%;
+}
+
+.vertical-center {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+    max-height: 100%;
+}
+
+/* workaround for sometimes images don't position correctly vertically */
+.vertical-center-img {
+    margin: auto;
+}
+
+.text-left {
+    text-align: left;
 }
 
 .text-center {
     text-align: center;
 }
 
-.right-center {
+.text-right {
     text-align: right;
 }
 
+.text-white {
+    color: white;
+}
+
+.text-white .icon-monochrome {
+    filter: invert(96%) sepia(0%) saturate(0%) hue-rotate(119deg) brightness(104%) contrast(104%);
+}
+
 .icon-as-text {
     width: 1em;
     height: 1em;
@@ -72,10 +112,16 @@ a[role=button].primary:hover, a[role=button].secondary:hover {
 
 h1 {
     font-size: xx-large;
+    font-family: var(--light-font);
 }
 
 h2 {
     font-size: x-large;
+    font-family: var(--light-font);
+}
+
+p {
+    line-height: 1.5em;
 }
 
 .grid {
@@ -88,6 +134,10 @@ h2 {
     display: flex !important;
 }
 
+.flex-right {
+    justify-content: flex-end;
+}
+
 /* Columns */
 .columns-container {
     display: flex;
@@ -100,3 +150,37 @@ h2 {
 .col3 {
     width: 33%;
 }
+
+.col2-3 {
+    width: 66%;
+}
+
+.col2 {
+    width: 50%;
+}
+
+@media screen and (max-width: 700px) {
+    :not(footer) > .columns-container {
+        display: block;
+    }
+    
+    .column {
+        width: 100%;
+    }
+    
+    .column > img {
+        width: 100%;
+    }
+    
+    .column .text-right, .column.text-right, .column .text-left, .column.text-left {
+        text-align: center;
+    }
+    
+     {
+        text-align: center;
+    }
+    
+    .column .flex-right {
+        justify-content: center;
+    }
+}

static/css/font.css

@@ -5,7 +5,7 @@
 
 @font-face {
   font-family: "Metropolis";
-  src: url(/fonts/metropolis/Metropolis-Regular.otf) format("opentype");
+  src: url(/fonts/metropolis/Metropolis-Bold.otf) format("opentype");
   font-weight: bold;
 }
 

static/css/sections.css

@@ -8,6 +8,14 @@ section.section1 {
     padding-right: 1em;
 }
 
+section.section-header {
+    height: calc(100vh - 4em);
+}
+
+section.section-header > div {
+    height: 100%;
+}
+
 .section-end-triangle {
     width: 0;
     height: 0;