perf: examples/site performance enchancements (#91)

- prevent the iframe with the YouTube video from rendering instead of just hiding it with CSS
- add a build step to optimize JPG and SVG images
- add display=swap to the Google Fonts query string, effectively adding font-display: swap to the fonts stylesheet
- prevent FOIT and improve font loading

examples/site/assets/styles/_layout.scss

@@ -1,36 +1,4 @@
-// SPACINGS
-$spacing2XS: 2px;
-$spacingXS: 4px;
-$spacingSM: 8px;
-$spacingMD: 12px;
-$spacingLG: 18px;
-$spacingXL: 24px;
-$spacing2XL: 32px;
-$spacing3XL: 44px;
-
-// SIZINGS
-$sizing2XS: 60px;
-$sizingXS: 100px;
-$sizingSM: 200px;
-$sizingMD: 300px;
-$sizingLG: 500px;
-$sizingXL: 640px;
-$sizing2XL: 860px;
-$sizing3XL: 1300px;
-
-$page-width: $sizing3XL;
-
-@mixin tablet-large {
-  @media (max-width: 1100px) { @content; }
-}
-
-@mixin tablet {
-  @media (max-width: $sizing2XL) { @content; }
-}
-
-@mixin phone {
-  @media (max-width: $sizingXL) { @content; }
-}
+@import './utils';
 
 .page {
   position: relative;
@@ -137,4 +105,4 @@ $page-width: $sizing3XL;
   @include tablet {
     order: 2;
   }
-}
+}

examples/site/assets/styles/_shared.scss

@@ -1,32 +1,21 @@
-@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:400,400i,900');
-@import '@/assets/styles/_layout.scss';
+@import './utils';
+@import './layout';
 
-$purple: #5623EE;
-$mauve: #A494D3;
-$mauve700: darken($mauve, 20%);
-$white: #fff;
-$gray100: #FBFAFD;
-$gray400: #F6F5FB;
-$gray700: #EAE6F6;
-$gray900: #79738F;
-$black: #000010;
+html {
+  opacity: 0;
 
-$primary: $purple;
-$secondary: $mauve;
-$cardInsetShadow: $gray100;
-$cardColor: $gray400;
-$cardShadow: $gray700;
-
-$borderRadiusCard: 7px;
-$borderRadiusButton: 4px;
-
-$smallText: 16px;
+  &.fonts-loaded,
+  &.fonts-failed {
+    opacity: 1;
+    transition: opacity 0.3s ease-in;
+  }
+}
 
 .page, .navbar, #faq {
+  @include font-family($source-sans-pro);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
-  font-family: 'Source Sans Pro', sans-serif;
   font-weight: 400;
   font-size: 20px;
 }
@@ -36,7 +25,7 @@ pre {
 }
 
 code, .mono {
-  font-family: 'Source Code Pro', monospace;
+  @include font-family($source-code-pro);
   &.inline {
     background-color: $cardColor;
     border-radius: $borderRadiusButton;
@@ -113,6 +102,7 @@ footer {
 }
 
 button, .button {
+  @include font-family($source-code-pro);
   display: inline-block;
   background-color: $primary;
   position: relative;
@@ -121,7 +111,6 @@ button, .button {
   padding: 11px 30px 9px;
   font-size: 20px;
   font-weight: 900;
-	font-family: 'Source Code Pro', monospace;
   letter-spacing: 1.4px;
 	color: $white;
 	text-decoration: none;
@@ -223,7 +212,7 @@ button, .button {
 
 .card-code {
   @extend .card;
-  font-family: 'Source Code Pro', monospace;
+  @include font-family($source-code-pro);
   padding: $spacingLG;
   width: 100%;
   height: $sizingLG;