Add sister websites

Author: jgthms

_includes/sister.html

@@ -0,0 +1,20 @@
+<footer class="sisters">
+  <div class="sister sister--htmlreference container">
+    <h4 class="sister-title">
+      Check out our sister website:<br>
+      <strong>HTML Reference</strong> 😃
+    </h4>
+    <a class="sister-banner" href="http://htmlreference.io">
+      <img src="{{site.url}}/images/html-reference-logo.png" alt="HTML Reference logo">
+    </a>
+  </div>
+  <div class="sister sister--bulma container">
+    <h4 class="sister-title">
+      Need a CSS framework?<br>
+      Try out <strong>Bulma</strong> 😎
+    </h4>
+    <a class="sister-banner" href="http://bulma.io">
+      <img src="{{site.url}}/images/bulma-logo.png" alt="Bulma logo">
+    </a>
+  </div>
+</footer>

css/website.css

@@ -19,6 +19,7 @@
 @import "../sass/example"
 @import "../sass/modal"
 @import "../sass/keyframes"
+@import "../sass/sister"
 
 @import "../sass/elements"
 

css/website.sass

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

images/bulma-logo.png

@@ -0,0 +1,44 @@
+.sisters
+  background-color: $background
+
+.sister-banner
+  display: flex
+
+.sister--htmlreference
+  .sister-banner img
+    height: 48px
+
+.sister--bulma
+  .sister-banner img
+    height: 48px
+
++mobile
+  .sisters
+    padding: 40px 20px
+    text-align: center
+    .sister + .sister
+      margin-top: 40px
+  .sister-banner
+    justify-content: center
+    margin-top: 10px
+
++desktop
+  .sisters
+    padding: 60px
+    .sister
+      align-items: center
+      display: flex
+      padding-left: 1rem
+      & + .sister
+        margin-top: 60px
+  .sister-title
+    flex-grow: 1
+  .sister-banner
+    flex-shrink: 0
+    width: 420px
+  .sister--htmlreference
+    .sister-banner img
+      height: 72px
+  .sister--bulma
+    .sister-banner img
+      height: 64px