add in social media section

_config.yml

@@ -30,6 +30,10 @@ plugins:
 
 permalink: /blog/:title/
 
+collections:
+  social-posts:
+    output: true
+
 # Exclude from processing.
 # The following items will not be processed, by default. Create a custom list
 # to override the default setting.

_includes/page-header.html

@@ -3,5 +3,6 @@
     <nav class="col-4">
         <a href="/">Home</a>
         <a href="/blog">Blog</a>
+        <a href="/social">Posts</a>
     </nav>
 </header>

_includes/social-media-posts.html

@@ -0,0 +1,19 @@
+{% for post in site.social-posts limit:5 %}
+    <div class="post col-12 grid">
+        <div class="col-6_sm-12-middle image-container">
+            <a href="{{ post.url }}"><img class="post-image" src="{{post.image}}"></a>
+        </div>
+        <div class="side col-6_sm-12">
+            <h2><a href="{{ post.url }}" class="title-link">{{ post.title }}</a></h2>
+            <p class="date">{{ post.date | date: "%b %d, %Y" }}</p>
+            <p class="excerpt">{{ post.excerpt }}</p>
+            <div class="cats">
+                {% for category in post.categories %}
+                <!--<a href="/category/{{ category | slugize }}/">#{{ category }}</a>-->
+                #{{ category }}
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+{% endfor %}
+

_layouts/social-post.html

@@ -0,0 +1,12 @@
+---
+layout: default
+---
+<main class="post">
+    {% include page-header.html %}
+
+    <div class="content">
+        {{content}}
+    </div>
+</main>
+
+{% include footer.html %}

_social-posts/background-attachment.md

@@ -0,0 +1,23 @@
+---
+layout: social-post
+type: "SocialPosts"
+title: "CSS: Background Attachment"
+image: /assets/images/background-attachment.png
+excerpt: "A CSS property of background-attachment: fixed allows you create a cool effect of a scrolling window over content"
+---
+{:.center}
+# {{ page.title }}
+
+
+{:.post-content}
+A CSS property of background-attachment: fixed allows you create a cool effect 
+of a scrolling window over content. This way you can create graceful transitions 
+over content. Check out on our [codepen](https://codepen.io/the_dev_diaries/pen/RvBMPV)
+to see it in action.
+
+
+{:.image .center}
+![css image]({{page.image}})
+
+{:.center}
+<a href="https://www.instagram.com/p/Buk6AuBHRRN/" target="_blank">Instagram Post</a>

_social-posts/reverse-terminal-search.md

@@ -0,0 +1,22 @@
+---
+layout: social-post
+type: "SocialPosts"
+title: "Terminal: Reverse Terminal Search"
+image: /assets/images/reverse-terminal-search.gif
+excerpt: "Reverse terminal search: reverse-i-search: Press the ctrl key and the r key simultaneously. A prompt will appear that will allow you to search from your history."
+---
+{:.center}
+# {{ page.title }}
+
+
+{:.post-content}
+Reverse terminal search: reverse-i-search: Press the ctrl key and the r key 
+simultaneously. A prompt will appear that will allow you to search from your 
+history. You’ll see the latest command from your history that matches your 
+search term. Read more about it [here](https://codeburst.io/use-reverse-i-search-to-quickly-navigate-through-your-history-917f4d7ffd37)
+
+{:.image .center}
+![terminal shot]({{page.image}})
+
+{:.center}
+<a href="https://www.instagram.com/p/BumEjZ_Hvy3/" target="_blank">Instagram Post</a>

assets/css/app.css

@@ -5140,6 +5140,13 @@ main {
   .home .post:hover {
     box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); }
 
+.post-header {
+  padding: 50px;
+  color: #707070;
+  font-weight: 500;
+  text-transform: uppercase;
+  text-align: center; }
+
 .cats {
   padding-top: 10px; }
   @media (max-width: 48em) {
@@ -5152,8 +5159,10 @@ main {
 
 .posts {
   padding-top: 50px; }
-  .posts .post:hover {
-    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); }
+  .posts .post {
+    padding: 20px 0; }
+    .posts .post:hover {
+      box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); }
 
 .post h1 {
   color: #707070; }

assets/css/main.css

@@ -41,6 +41,13 @@ main {
   .home .post:hover {
     box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); }
 
+.post-header {
+  padding: 50px;
+  color: #707070;
+  font-weight: 500;
+  text-transform: uppercase;
+  text-align: center; }
+
 .cats {
   padding-top: 10px; }
   @media (max-width: 48em) {
@@ -53,5 +60,7 @@ main {
 
 .posts {
   padding-top: 50px; }
-  .posts .post:hover {
-    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); }
+  .posts .post {
+    padding: 20px 0; }
+    .posts .post:hover {
+      box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); }

blog.html

@@ -6,6 +6,7 @@
 <main>
     {% include page-header.html %}
 
+    <h1 class="post-header">Blog</h1>
     <div class="posts">
         {% include blog-posts.html %}
     </div>

scss/main.scss

@@ -54,6 +54,14 @@ main {
     }
 }
 
+.post-header {
+    padding: 50px;
+    color: $gray;
+    font-weight: 500;
+    text-transform: uppercase;
+    text-align: center;
+}
+
 .cats {
     padding-top: 10px;
 
@@ -71,7 +79,10 @@ main {
 
 .posts {
     padding-top: 50px;
-    .post:hover {
-        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+    .post {
+        padding: 20px 0;
+        &:hover {
+            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+        }
     }
 }

social.html

@@ -0,0 +1,18 @@
+---
+layout: default
+title: Social Media
+---
+
+<main>
+    {% include page-header.html %}
+
+    <h1 class="post-header">Social Media Posts</h1>
+
+    <div class="posts">
+        {% include social-media-posts.html %}
+    </div>
+
+</main>
+
+{% include footer.html %}
+