Apply new brand on the website

.gitignore

@@ -4,3 +4,6 @@
 /.cache
 .DS_Store
 /Gemfile.lock
+.jekyll-cache
+.gem
+_site

source/_footer.haml

@@ -2,8 +2,8 @@
   .container
     .row
       .col-lg-3.col-lg-offset-1.col-sm-3.hidden-xs
-        %a.navbar-brand.page-scroll{:href => "#page-top"} 
-          =image_tag '/img/logo.svgz', :title => 'Flatpak', :class => 'full'
+        %a.navbar-brand.page-scroll{:href => "#page-top"}
+          =partial "logo.svg"
       %ul.col-lg-7.col-lg-offset-0.col-sm-8.col-sm-offset-0.col-xs-7.col-xs-offset-2
         %li.toplevel
           = link_to "Home", "/index.html"

source/index.html.haml

@@ -3,20 +3,12 @@ title: Flatpak—the future of application distribution
 description: The days of chasing multiple Linux distributions are over. Standalone apps for Linux are here!
 ---
 
-%section.imagebanner.centered
+%section.imagebanner
   .container
     .row.largegap
-      .col-lg-12
+      .col-lg-10.col-lg-offset-1
         %h1.section-heading 
-          The future of 
-          %span.emphasize apps on Linux
-        %p Flatpak is a next-generation technology for building and distributing desktop applications on Linux
-
-%section.illustration.centered
-  .container
-    .row
-      .col-lg-8.col-lg-offset-2
-        = image_tag '/img/delivery_truck2.png'
+          The future of apps on Linux
 
 %section#appsplash.bg-secondary
   .container
@@ -44,7 +36,7 @@ description: The days of chasing multiple Linux distributions are over. Standalo
   .container
     .row.centered
       .col-sm-10.col-sm-offset-1
-        %iframe{'width'=>'100%','height'=>'440', 'src'=>'https://www.youtube.com/embed/jDVCITRWGgs', 'frameborder'=>'0', 'allowfullscreen'=>'true'}
+        %iframe.full{'width'=>'100%', 'src'=>'https://www.youtube.com/embed/jDVCITRWGgs', 'frameborder'=>'0', 'allowfullscreen'=>'true'}
           =link_to 'Flatpak 1.0', 'https://youtu.be/jDVCITRWGgs'
     .row.centered
       .col-sm-6.col-sm-offset-3

source/stylesheets/fonts.css

@@ -1,127 +1,21 @@
-/* Oblique */
+/* --------------------------------------------------------------------------
+[EXPERIMENTAL] Multi-axis, single variable font.
 
-/*
-@font-face {
-  font-family: "Overpass";
-  src: local("Overpass ExtraLight Italic"),
-        local(Overpass-ExtraLight-Italic),    
-        url(../fonts/Overpass-ExtraLight-Italic.ttf);
-  font-style: italic;
-  font-weight: 200;
-}
+Slant axis is not yet widely supported (as of February 2019) and thus this
+multi-axis single variable font is opt-in rather than the default.
 
-@font-face {
-  font-family: "Overpass";
-  src: local("Overpass Light Italic"),
-        local(Overpass-Light-Italic),
-        url(../fonts/Overpass-Light-Italic.ttf);
-  font-style: italic;
-  font-weight: 300;
-}
+When using this, you will probably need to set font-variation-settings
+explicitly, e.g.
 
+  * { font-variation-settings: "slnt" 0deg }
+  .italic { font-variation-settings: "slnt" 10deg }
 
-@font-face {
-  font-family: "Overpass";
-  src: local("Overpass Italic"),
-        local(Overpass-Italic),
-        local(Overpass-Regular-Italic),    
-        url(../fonts/Overpass-Regular-Italic.ttf);
-  font-style: italic;
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "Overpass";
-  src: local("Overpass Bold Italic"),
-        local(Overpass-Bold-Italic),
-        local(Overpass-Bold-Italic),
-        url(../fonts/Overpass-Bold-Italic.ttf);
-  font-style: italic;
-  font-weight: 700;
-}
 */
-
-
-/* Normal */
-
-/*
-@font-face {
-  font-family: "Overpass";
-  src: local("Overpass ExtraLight"),
-        local(Overpass-ExtraLight),    
-        url(../fonts/Overpass-ExtraLight.ttf); 
-  font-style: normal;
-  font-weight: 200;
-}
-
-@font-face {
-  font-family: "Overpass";
-  src: local("Overpass Light"),
-        local(Overpass-Light),    
-        url(../fonts/Overpass-Light.ttf); 
-  font-style: normal;
-  font-weight: 300;
-}
-
-
-@font-face {
-  font-family: "Overpass";
-  src: local("Overpass Regular"),
-        local(Overpass),
-        local(Overpass-Regular),    
-        url(../fonts/Overpass-Regular.ttf); 
-  font-style: normal;
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "Overpass";
-  src: local("Overpass Bold"),
-        local(Overpass-Bold),
-        local(Overpass-Bold),    
-        url(../fonts/Overpass-Bold.ttf); 
-  font-style: normal;
-  font-weight: 700;
-}
-*/
-
-@font-face {
-  font-family: "Source Sans Pro";
-  src: local("Source Sans Pro ExtraLight"),
-        local(SourceSansProExtraLight),
-        local(SourceSansPro-ExtraLight),    
-        url(../fonts/SourceSansPro-ExtraLight.otf); 
-  font-style: normal;
-  font-weight: 200;
-}
-
-@font-face {
-  font-family: "Source Sans Pro";
-  src: local("Source Sans Pro Light"),
-        local(SourceSansProLight),
-        local(SourceSansPro-Light),    
-        url(../fonts/SourceSansPro-Light.otf); 
-  font-style: normal;
-  font-weight: 300;
-}
-
-@font-face {
-  font-family: "Source Sans Pro";
-  src: local("Source Sans Pro Regular"),
-        local(SourceSansPro),
-        local(SourceSansPro-Regular),    
-        url(../fonts/SourceSansPro-Regular.otf); 
-  font-style: normal;
-  font-weight: 400;
-}
-
 @font-face {
-  font-family: "Source Sans Pro";
-  src: local("Source Sans Pro SemiBold"),
-        local(SourceSansProSemiBold),
-        local(SourceSansPro-SemiBold),    
-        url(../fonts/SourceSansPro-Semibold.otf); 
-  font-style: bold;
-  font-weight: 600;
+  font-family: 'Inter';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url("../fonts/Inter.var.woff2?v=3.19") format("woff2");
 }