Add Google fonts

Author: jgthms

_includes/google-fonts.html

@@ -0,0 +1,14 @@
+<script async type="text/javascript">
+  WebFontConfig = {
+    google: { families: [ 'Source+Sans+Pro:400,700,400italic,700italic:latin', 'Source+Code+Pro::latin' ] }
+  };
+  (function() {
+    var wf = document.createElement('script');
+    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
+      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
+    wf.type = 'text/javascript';
+    wf.async = 'true';
+    var s = document.getElementsByTagName('script')[0];
+    s.parentNode.insertBefore(wf, s);
+  })();
+</script>

_layouts/single.html

@@ -37,6 +37,7 @@
       </section>
     </main>
     {% include modals/share.html %}
+    {% include google-fonts.html %}
     <script src="{{site.url}}/javascript/clipboard.min.js"></script>
     <script src="{{site.url}}/javascript/main.js"></script>
     <script src="{{site.url}}/javascript/single.js"></script>

css/website.css

@@ -50,6 +50,7 @@ <h2 class="header-title">
       </section>
     </main>
     {% include modals/share.html %}
+    {% include google-fonts.html %}
     <script src="{{site.url}}/javascript/clipboard.min.js"></script>
     <script src="{{site.url}}/javascript/main.js"></script>
     <script src="{{site.url}}/javascript/index.js"></script>

index.html

@@ -8,6 +8,7 @@
     "build-autoprefix": "postcss --use autoprefixer --output css/website.css css/website.css",
     "build-clean": "rm css/website.css",
     "build-sass": "node-sass --output-style compressed css/website.sass css/website.css",
+    "develop": "node-sass --output-style expanded css/website.sass css/website.css",
     "start": "npm run build-sass -- --watch"
   },
   "keywords": [

package.json

@@ -3,6 +3,7 @@ html
   font-size: 16px
   -moz-osx-font-smoothing: grayscale
   -webkit-font-smoothing: antialiased
+  max-width: 100vw
   min-width: 300px
   overflow-x: hidden
   text-rendering: optimizeLegibility

sass/base.sass

@@ -130,7 +130,7 @@
 
 +mobile
   .example
-    padding: 2rem 1rem 0
+    padding: 2rem 2rem 0
   .example-preview
     margin-top: 1rem
   .example-complements

sass/example.sass

@@ -8,6 +8,7 @@
   background-repeat: no-repeat
   background-size: 100% 4rem
   border-top: 2px solid $primary
+  overflow: hidden
   padding-bottom: 3rem
   padding-top: 2rem
   &:first-child
@@ -17,10 +18,11 @@
     border-top-color: $purple
 
 .property-links
-  float: right
+  align-items: center
+  display: flex
   font-size: 0.7rem
+  justify-content: flex-end
   opacity: 0.5
-  padding: 0.25rem 0
   transition-duration: $speed
   transition-property: opacity
   a
@@ -98,10 +100,15 @@
   .property-header
     padding-left: 2rem
     padding-right: 2rem
+  .property-links
+    margin-bottom: 0.5rem
 
 +desktop
   .list
     margin-top: $header-height
   .property-header
     padding-left: 3rem
     padding-right: 3rem
+  .property-links
+    float: right
+    padding: 0.25rem 0