Apply new brand on the website (#538)

* use Iter typeface - part of the Flatpak rebrand - replace illustration with photo - update logos - less bold headings - remove absolute sizing to allow to scaling Fixes #537
flatpak · Jun 6, 2022 · 9450466 · 9450466
1 parent 2591490
commit 9450466
Show file tree

Hide file tree

Showing 35 changed files with 149 additions and 156 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,6 @@
 /.cache
 .DS_Store
 /Gemfile.lock
+.jekyll-cache
+.gem
+_site
diff --git a/source/_footer.haml b/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"

diff --git a/source/_logo.svg b/source/_logo.svg
diff --git a/source/favicon.ico b/source/favicon.ico
diff --git a/source/fonts/Inter.var.woff2 b/source/fonts/Inter.var.woff2
diff --git a/source/fonts/Overpass-Bold-Italic.ttf b/source/fonts/Overpass-Bold-Italic.ttf
diff --git a/source/fonts/Overpass-Bold.ttf b/source/fonts/Overpass-Bold.ttf
diff --git a/source/fonts/Overpass-ExtraLight Italic.ttf b/source/fonts/Overpass-ExtraLight Italic.ttf
diff --git a/source/fonts/Overpass-ExtraLight.ttf b/source/fonts/Overpass-ExtraLight.ttf
diff --git a/source/fonts/Overpass-Light-Italic.ttf b/source/fonts/Overpass-Light-Italic.ttf
diff --git a/source/fonts/Overpass-Light.ttf b/source/fonts/Overpass-Light.ttf
diff --git a/source/fonts/Overpass-Regular-Italic.ttf b/source/fonts/Overpass-Regular-Italic.ttf
diff --git a/source/fonts/Overpass-Regular.ttf b/source/fonts/Overpass-Regular.ttf
diff --git a/source/fonts/SourceCodePro-ExtraLight.otf b/source/fonts/SourceCodePro-ExtraLight.otf
diff --git a/source/fonts/SourceCodePro-Light.otf b/source/fonts/SourceCodePro-Light.otf
diff --git a/source/fonts/SourceCodePro-Regular.otf b/source/fonts/SourceCodePro-Regular.otf
diff --git a/source/fonts/SourceCodePro-Semibold.otf b/source/fonts/SourceCodePro-Semibold.otf
diff --git a/source/fonts/SourceSansPro-ExtraLight.otf b/source/fonts/SourceSansPro-ExtraLight.otf
diff --git a/source/fonts/SourceSansPro-Light.otf b/source/fonts/SourceSansPro-Light.otf
diff --git a/source/fonts/SourceSansPro-Regular.otf b/source/fonts/SourceSansPro-Regular.otf
diff --git a/source/fonts/SourceSansPro-Semibold.otf b/source/fonts/SourceSansPro-Semibold.otf
diff --git a/source/img/apple-touch-icon.png b/source/img/apple-touch-icon.png
diff --git a/source/img/apple-touch-icon.svg b/source/img/apple-touch-icon.svg
diff --git a/source/img/banner.svgz b/source/img/banner.svgz
diff --git a/source/img/container.webp b/source/img/container.webp
diff --git a/source/img/favicon.png b/source/img/favicon.png
diff --git a/source/img/favicon.svg b/source/img/favicon.svg
diff --git a/source/img/favicon.xcf.bz2 b/source/img/favicon.xcf.bz2
diff --git a/source/img/favicon152.png b/source/img/favicon152.png
diff --git a/source/img/favicon57.png b/source/img/favicon57.png
diff --git a/source/img/flatpak-logos.zip b/source/img/flatpak-logos.zip
diff --git a/source/img/logo.svgz b/source/img/logo.svgz
diff --git a/source/index.html.haml b/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

diff --git a/source/stylesheets/fonts.css b/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");
 }