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 {

static/icons/code.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z"/></svg>

static/icons/download.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z"/></svg>

static/icons/frameworks.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 14v-11h-11v-3h-7v3h-3v2h3v16h16v3h2v-3h3v-7h-3zm-11-9h9v9h-9v-9zm12 14h-17v-17h3v1h-2v1h2v2h-2v1h2v2h-2v1h2v2h-2v1h2v2h-2v1h2v2h1v-2h2v2h1v-2h2v2h1v-2h2v2h1v-2h2v2h1v-2h1v3z"/></svg>

static/icons/keyboard.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 11v10h-20v-10h20zm2-2h-24v14h24v-14zm-18 3h-3v2h3v-2zm3 0h-2v2h2v-2zm3 0h-2v2h2v-2zm3 0h-2v2h2v-2zm3 0h-2v2h2v-2zm3 0h-2v2h2v-2zm-4 6h-10v2h10v-2zm4-3h-4v2h4v-2zm-14 0h-4v2h4v-2zm3 0h-2v2h2v-2zm3 0h-2v2h2v-2zm3 0h-2v2h2v-2zm-4.357-9.812c-1.037-.043-2.293-.086-3.049-1.027-.393-.489-.594-1.136-.594-1.847 0-.422.071-.867.217-1.314l1.206.363c-.205.634-.269 1.506.172 2.054.45.56 1.392.512 2.376.584 2.135.156 3.03 1.423 3.03 2.678 0 .461-.121.92-.345 1.321h-1.569c1.016-.804 1.059-2.706-1.444-2.812z"/></svg>

static/icons/platform/Universal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0v19h24v-19h-24zm22 14h-20v-12h20v12zm-6.599 7l2.599 3h-12l2.599-3h6.802z"/></svg>

static/icons/touch.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.793 8.951c1.062-.757 2.542-.239 2.912 1-.655-.502-1.528-.482-2.2-.002-.677.482-.976 1.303-.716 2.082-1.05-.755-1.055-2.325.004-3.08zm3.164 10.8c.841.283 3.443 1.003 6.458 3.249l5.585-3.984c-1.448-2.031-1.05-3.452-2.489-5.471-.726-1.017-1.222-1.294-1.845-1.294-.22 0-.456.035-.724.084l.507.71c.306.428-.34.889-.646.46l-.452-.634c-.149-.21-.357-.281-.596-.281-.345 0-.753.148-1.141.237l.615.862c.304.428-.34.889-.646.46l-.533-.747c-.148-.208-.353-.28-.586-.28-.359 0-.787.17-1.186.271l.65.912c.306.429-.343.887-.646.46l-2.638-3.693c-.817-1.148-2.612.07-1.765 1.259l3.895 5.461c-.418-.154-1.152-.295-1.632-.295-1.481.003-2.051 1.628-.185 2.254zm-2.715-2.751h-6.242v-14h18v7.516c1.359.555 2.391 2.046 3 3.372v-10.888c0-1.104-.896-2-2-2h-20c-1.104 0-2 .896-2 2v14c0 1.104.896 2 2 2h6.825c-.111-.69.002-1.358.417-2z"/></svg>

static/icons/wrench.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4.5.257l3.771 3.771c.409 1.889-2.33 4.66-4.242 4.242l-3.771-3.77c-.172.584-.258 1.188-.258 1.792 0 1.602.607 3.202 1.83 4.426 1.351 1.351 3.164 1.958 4.931 1.821.933-.072 1.852.269 2.514.931l9.662 9.662c.578.578 1.337.868 2.097.868 1.661 0 3.001-1.364 2.966-3.03-.016-.737-.306-1.47-.868-2.033l-9.662-9.663c-.662-.661-1.002-1.581-.931-2.514.137-1.767-.471-3.58-1.82-4.93-1.225-1.224-2.825-1.83-4.428-1.83-.603 0-1.207.086-1.791.257zm17.5 20.743c0 .553-.447 1-1 1-.553 0-1-.448-1-1s.447-1 1-1 1 .447 1 1z"/></svg>