Build with images

css/bulma.css

@@ -289,11 +289,21 @@ table th {
 }
 
 .container {
-  margin: 0 auto;
+  margin: 0 20px;
-  max-width: 960px;
   position: relative;
 }
 
+@media screen and (min-width: 980px) {
+  .container {
+    margin: 0 auto;
+    max-width: 960px;
+  }
+  .container.is-fluid {
+    margin: 0 20px;
+    max-width: none;
+  }
+}
+
 .fa {
   font-size: 21px;
   text-align: center;
@@ -1583,6 +1593,11 @@ table th {
   margin-bottom: 20px;
 }
 
+.title a:hover,
+.subtitle a:hover {
+  border-bottom: 1px solid;
+}
+
 .title {
   color: #222324;
   font-size: 28px;
@@ -1750,6 +1765,80 @@ table th {
   font-size: 14px;
 }
 
+.image {
+  display: block;
+  position: relative;
+}
+
+.image img {
+  display: block;
+}
+
+.image.is-square img, .image.is-1by1 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-16by9 img, .image.is-2by1 img {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.image.is-square, .image.is-1by1 {
+  padding-top: 100%;
+}
+
+.image.is-4by3 {
+  padding-top: 75%;
+}
+
+.image.is-3by2 {
+  padding-top: 66.6666%;
+}
+
+.image.is-16by9 {
+  padding-top: 56.25%;
+}
+
+.image.is-2by1 {
+  padding-top: 50%;
+}
+
+.image.is-16x16 {
+  height: 16px;
+  width: 16px;
+}
+
+.image.is-24x24 {
+  height: 24px;
+  width: 24px;
+}
+
+.image.is-32x32 {
+  height: 32px;
+  width: 32px;
+}
+
+.image.is-48x48 {
+  height: 48px;
+  width: 48px;
+}
+
+.image.is-64x64 {
+  height: 64px;
+  width: 64px;
+}
+
+.image.is-96x96 {
+  height: 96px;
+  width: 96px;
+}
+
+.image.is-128x128 {
+  height: 128px;
+  width: 128px;
+}
+
 .message-body {
   border: 1px solid #d3d6db;
   border-radius: 3px;
@@ -2252,61 +2341,117 @@ table th {
   width: 25%;
 }
 
-.columns.is-mobile > .column.is-1-mobile {
+.columns.is-mobile > .column.is-offset-half {
+  margin-left: 50%;
+}
+
+.columns.is-mobile > .column.is-offset-third {
+  margin-left: 33.3333%;
+}
+
+.columns.is-mobile > .column.is-offset-quarter {
+  margin-left: 25%;
+}
+
+.columns.is-mobile > .column.is-1 {
   flex: none;
   width: 8.33333%;
 }
 
-.columns.is-mobile > .column.is-2-mobile {
+.columns.is-mobile > .column.is-offset-1 {
+  margin-left: 8.33333%;
+}
+
+.columns.is-mobile > .column.is-2 {
   flex: none;
   width: 16.66667%;
 }
 
-.columns.is-mobile > .column.is-3-mobile {
+.columns.is-mobile > .column.is-offset-2 {
+  margin-left: 16.66667%;
+}
+
+.columns.is-mobile > .column.is-3 {
   flex: none;
   width: 25%;
 }
 
-.columns.is-mobile > .column.is-4-mobile {
+.columns.is-mobile > .column.is-offset-3 {
+  margin-left: 25%;
+}
+
+.columns.is-mobile > .column.is-4 {
   flex: none;
   width: 33.33333%;
 }
 
-.columns.is-mobile > .column.is-5-mobile {
+.columns.is-mobile > .column.is-offset-4 {
+  margin-left: 33.33333%;
+}
+
+.columns.is-mobile > .column.is-5 {
   flex: none;
   width: 41.66667%;
 }
 
-.columns.is-mobile > .column.is-6-mobile {
+.columns.is-mobile > .column.is-offset-5 {
+  margin-left: 41.66667%;
+}
+
+.columns.is-mobile > .column.is-6 {
   flex: none;
   width: 50%;
 }
 
-.columns.is-mobile > .column.is-7-mobile {
+.columns.is-mobile > .column.is-offset-6 {
+  margin-left: 50%;
+}
+
+.columns.is-mobile > .column.is-7 {
   flex: none;
   width: 58.33333%;
 }
 
-.columns.is-mobile > .column.is-8-mobile {
+.columns.is-mobile > .column.is-offset-7 {
+  margin-left: 58.33333%;
+}
+
+.columns.is-mobile > .column.is-8 {
   flex: none;
   width: 66.66667%;
 }
 
-.columns.is-mobile > .column.is-9-mobile {
+.columns.is-mobile > .column.is-offset-8 {
+  margin-left: 66.66667%;
+}
+
+.columns.is-mobile > .column.is-9 {
   flex: none;
   width: 75%;
 }
 
-.columns.is-mobile > .column.is-10-mobile {
+.columns.is-mobile > .column.is-offset-9 {
+  margin-left: 75%;
+}
+
+.columns.is-mobile > .column.is-10 {
   flex: none;
   width: 83.33333%;
 }
 
-.columns.is-mobile > .column.is-11-mobile {
+.columns.is-mobile > .column.is-offset-10 {
+  margin-left: 83.33333%;
+}
+
+.columns.is-mobile > .column.is-11 {
   flex: none;
   width: 91.66667%;
 }
 
+.columns.is-mobile > .column.is-offset-11 {
+  margin-left: 91.66667%;
+}
+
 @media screen and (max-width: 768px) {
   .column.is-half-mobile {
     flex: none;
@@ -2320,50 +2465,92 @@ table th {
     flex: none;
     width: 25%;
   }
+  .column.is-offset-half-mobile {
+    margin-left: 50%;
+  }
+  .column.is-offset-third-mobile {
+    margin-left: 33.3333%;
+  }
+  .column.is-offset-quarter-mobile {
+    margin-left: 25%;
+  }
   .column.is-1-mobile {
     flex: none;
     width: 8.33333%;
   }
+  .column.is-offset-1-mobile {
+    margin-left: 8.33333%;
+  }
   .column.is-2-mobile {
     flex: none;
     width: 16.66667%;
   }
+  .column.is-offset-2-mobile {
+    margin-left: 16.66667%;
+  }
   .column.is-3-mobile {
     flex: none;
     width: 25%;
   }
+  .column.is-offset-3-mobile {
+    margin-left: 25%;
+  }
   .column.is-4-mobile {
     flex: none;
     width: 33.33333%;
   }
+  .column.is-offset-4-mobile {
+    margin-left: 33.33333%;
+  }
   .column.is-5-mobile {
     flex: none;
     width: 41.66667%;
   }
+  .column.is-offset-5-mobile {
+    margin-left: 41.66667%;
+  }
   .column.is-6-mobile {
     flex: none;
     width: 50%;
   }
+  .column.is-offset-6-mobile {
+    margin-left: 50%;
+  }
   .column.is-7-mobile {
     flex: none;
     width: 58.33333%;
   }
+  .column.is-offset-7-mobile {
+    margin-left: 58.33333%;
+  }
   .column.is-8-mobile {
     flex: none;
     width: 66.66667%;
   }
+  .column.is-offset-8-mobile {
+    margin-left: 66.66667%;
+  }
   .column.is-9-mobile {
     flex: none;
     width: 75%;
   }
+  .column.is-offset-9-mobile {
+    margin-left: 75%;
+  }
   .column.is-10-mobile {
     flex: none;
     width: 83.33333%;
   }
+  .column.is-offset-10-mobile {
+    margin-left: 83.33333%;
+  }
   .column.is-11-mobile {
     flex: none;
     width: 91.66667%;
   }
+  .column.is-offset-11-mobile {
+    margin-left: 91.66667%;
+  }
 }
 
 @media screen and (min-width: 769px) {
@@ -2379,50 +2566,92 @@ table th {
     flex: none;
     width: 25%;
   }
+  .column.is-offset-half, .column.is-offset-half-tablet {
+    margin-left: 50%;
+  }
+  .column.is-offset-third, .column.is-offset-third-tablet {
+    margin-left: 33.3333%;
+  }
+  .column.is-offset-quarter, .column.is-offset-quarter-tablet {
+    margin-left: 25%;
+  }
   .column.is-1, .column.is-1-tablet {
     flex: none;
     width: 8.33333%;
   }
+  .column.is-offset-1, .column.is-offset-1-tablet {
+    margin-left: 8.33333%;
+  }
   .column.is-2, .column.is-2-tablet {
     flex: none;
     width: 16.66667%;
   }
+  .column.is-offset-2, .column.is-offset-2-tablet {
+    margin-left: 16.66667%;
+  }
   .column.is-3, .column.is-3-tablet {
     flex: none;
     width: 25%;
   }
+  .column.is-offset-3, .column.is-offset-3-tablet {
+    margin-left: 25%;
+  }
   .column.is-4, .column.is-4-tablet {
     flex: none;
     width: 33.33333%;
   }
+  .column.is-offset-4, .column.is-offset-4-tablet {
+    margin-left: 33.33333%;
+  }
   .column.is-5, .column.is-5-tablet {
     flex: none;
     width: 41.66667%;
   }
+  .column.is-offset-5, .column.is-offset-5-tablet {
+    margin-left: 41.66667%;
+  }
   .column.is-6, .column.is-6-tablet {
     flex: none;
     width: 50%;
   }
+  .column.is-offset-6, .column.is-offset-6-tablet {
+    margin-left: 50%;
+  }
   .column.is-7, .column.is-7-tablet {
     flex: none;
     width: 58.33333%;
   }
+  .column.is-offset-7, .column.is-offset-7-tablet {
+    margin-left: 58.33333%;
+  }
   .column.is-8, .column.is-8-tablet {
     flex: none;
     width: 66.66667%;
   }
+  .column.is-offset-8, .column.is-offset-8-tablet {
+    margin-left: 66.66667%;
+  }
   .column.is-9, .column.is-9-tablet {
     flex: none;
     width: 75%;
   }
+  .column.is-offset-9, .column.is-offset-9-tablet {
+    margin-left: 75%;
+  }
   .column.is-10, .column.is-10-tablet {
     flex: none;
     width: 83.33333%;
   }
+  .column.is-offset-10, .column.is-offset-10-tablet {
+    margin-left: 83.33333%;
+  }
   .column.is-11, .column.is-11-tablet {
     flex: none;
     width: 91.66667%;
   }
+  .column.is-offset-11, .column.is-offset-11-tablet {
+    margin-left: 91.66667%;
+  }
 }
 
 @media screen and (min-width: 980px) {
@@ -2438,50 +2667,92 @@ table th {
     flex: none;
     width: 25%;
   }
+  .column.is-offset-half-desktop {
+    margin-left: 50%;
+  }
+  .column.is-offset-third-desktop {
+    margin-left: 33.3333%;
+  }
+  .column.is-offset-quarter-desktop {
+    margin-left: 25%;
+  }
   .column.is-1-desktop {
     flex: none;
     width: 8.33333%;
   }
+  .column.is-offset-1-desktop {
+    margin-left: 8.33333%;
+  }
   .column.is-2-desktop {
     flex: none;
     width: 16.66667%;
   }
+  .column.is-offset-2-desktop {
+    margin-left: 16.66667%;
+  }
   .column.is-3-desktop {
     flex: none;
     width: 25%;
   }
+  .column.is-offset-3-desktop {
+    margin-left: 25%;
+  }
   .column.is-4-desktop {
     flex: none;
     width: 33.33333%;
   }
+  .column.is-offset-4-desktop {
+    margin-left: 33.33333%;
+  }
   .column.is-5-desktop {
     flex: none;
     width: 41.66667%;
   }
+  .column.is-offset-5-desktop {
+    margin-left: 41.66667%;
+  }
   .column.is-6-desktop {
     flex: none;
     width: 50%;
   }
+  .column.is-offset-6-desktop {
+    margin-left: 50%;
+  }
   .column.is-7-desktop {
     flex: none;
     width: 58.33333%;
   }
+  .column.is-offset-7-desktop {
+    margin-left: 58.33333%;
+  }
   .column.is-8-desktop {
     flex: none;
     width: 66.66667%;
   }
+  .column.is-offset-8-desktop {
+    margin-left: 66.66667%;
+  }
   .column.is-9-desktop {
     flex: none;
     width: 75%;
   }
+  .column.is-offset-9-desktop {
+    margin-left: 75%;
+  }
   .column.is-10-desktop {
     flex: none;
     width: 83.33333%;
   }
+  .column.is-offset-10-desktop {
+    margin-left: 83.33333%;
+  }
   .column.is-11-desktop {
     flex: none;
     width: 91.66667%;
   }
+  .column.is-offset-11-desktop {
+    margin-left: 91.66667%;
+  }
 }
 
 .columns {
@@ -2502,20 +2773,13 @@ table th {
   display: flex;
 }
 
-@media screen and (min-width: 769px) {
+.columns.is-gapless {
-  .columns:not(.is-desktop) {
+  margin-left: 0;
-    display: flex;
+  margin-right: 0;
-  }
-}
-
-@media screen and (min-width: 980px) {
-  .columns.is-desktop {
-    display: flex;
-  }
 }
 
 .columns.is-gapless:not(:last-child) {
-  margin: 0 0 20px;
+  margin-bottom: 20px;
 }
 
 .columns.is-gapless > .column {
@@ -2546,6 +2810,18 @@ table th {
   }
 }
 
+@media screen and (min-width: 769px) {
+  .columns:not(.is-desktop) {
+    display: flex;
+  }
+}
+
+@media screen and (min-width: 980px) {
+  .columns.is-desktop {
+    display: flex;
+  }
+}
+
 .navbar-item .title,
 .navbar-item .subtitle {
   margin-bottom: 0;
@@ -2688,6 +2964,12 @@ table th {
   vertical-align: top;
 }
 
+.table th.table-narrow,
+.table td.table-narrow {
+  white-space: nowrap;
+  width: 1%;
+}
+
 .table th.table-link,
 .table td.table-link {
   padding: 0;
@@ -3507,6 +3789,10 @@ a.menu-block:hover {
   border-bottom: none;
 }
 
+.hero .tabs.is-boxed a {
+  padding: 8px 15px;
+}
+
 .hero.is-alt {
   background: #f5f7fa;
   color: #aeb1b5;
@@ -4091,7 +4377,7 @@ a.menu-block:hover {
 
 .section {
   background: white;
-  padding: 40px 20px;
+  padding: 40px 0;
 }
 
 .section + .section {
@@ -4099,9 +4385,6 @@ a.menu-block:hover {
 }
 
 @media screen and (min-width: 980px) {
-  .section {
-    padding: 40px 0;
-  }
   .section.is-medium {
     padding: 120px 0;
   }