Add friends section

Author: janniks

_sass/minima/_base.scss

@@ -30,6 +30,15 @@ body {
 
 
 
+/**
+ * Set heading font style
+ */
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Londrina Solid", sans-serif;
+}
+
+
+
 /**
  * Set `margin-bottom` to maintain vertical rhythm
  */

_sass/minima/_layout.scss

@@ -62,7 +62,7 @@
   transition: border 1s;
 
   &.sticky {
-    position: fixed;
+    position: sticky;
     top: 0;
     width: 100%;
 
@@ -282,6 +282,34 @@ hr {
 
 
 
+/**
+ * Friends Section
+ */
+.friends {
+  .friends-row {
+    text-align: center;
+
+    .friends-member {
+      display: inline-block;
+      margin: 0 20px 8px 20px;
+
+      a {
+        text-decoration: none;
+      }
+
+      img {
+        display: block;
+        margin: 16px 0;
+        width: 96px;
+        height: 96px;
+        border-radius: 50%;
+      }
+    }
+  }
+}
+
+
+
 /**
  * Posts
  */

index.html

@@ -57,3 +57,44 @@ <h2>Family</h2>
 </div>
 
 <hr>
+
+<div class="friends">
+	<h2>Friends</h2>
+
+	<div class="friends-row gold">
+		<div class="friends-member">
+			<a href="https://twitter.com/random">
+				<img src="https://placehold.it/333x333" alt="">
+				<div>Random Company</div>
+			</a>
+		</div>
+		<div class="friends-member">
+			<a href="https://twitter.com/random">
+				<img src="https://placehold.it/333x333" alt="">
+				<div>Random Company</div>
+			</a>
+		</div>
+		<div class="friends-member">
+			<a href="https://twitter.com/random">
+				<img src="https://placehold.it/333x333" alt="">
+				<div>Random Company</div>
+			</a>
+		</div>
+	</div>
+	<div class="friends-row silver">
+		<div class="friends-member">
+			<a href="https://twitter.com/random">
+				<img src="https://placehold.it/333x333" alt="">
+				<div>Random Company</div>
+			</a>
+		</div>
+		<div class="friends-member">
+			<a href="https://twitter.com/random">
+				<img src="https://placehold.it/333x333" alt="">
+				<div>Random Company</div>
+			</a>
+		</div>
+	</div>
+</div>
+
+<hr>