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;

static/icons/platform/Firefox.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm8.003 8.657c-1.276-3.321-4.46-4.605-5.534-4.537 3.529 1.376 4.373 6.059 4.06 7.441-.307-1.621-1.286-3.017-1.872-3.385 3.417 8.005-4.835 10.465-7.353 7.687.649.168 1.931.085 2.891-.557.898-.602.983-.638 1.56-.683.686-.053-.041-1.406-1.539-1.177-.616.094-1.632.819-2.88.341-1.508-.576-1.46-2.634.096-2.015.337-.437.088-1.263.088-1.263.452-.414 1.022-.706 1.37-.911.228-.135.829-.507.795-1.23-.123-.096-.32-.219-.766-.193-1.736.11-1.852-.518-1.967-.808.078-.668.524-1.534 1.361-1.931-1.257-.193-2.28.397-2.789 1.154-.809-.174-1.305-.183-2.118-.031-.316-.24-.666-.67-.878-1.181 1.832-2.066 4.499-3.378 7.472-3.378 5.912 0 8.263 4.283 8.003 6.657z"/></svg>