IIIT-Delhi · peey · Jun 30, 2018 · Jun 30, 2018 · Jun 30, 2018 · Jun 30, 2018
diff --git a/site/_config.yml b/site/_config.yml
@@ -13,6 +13,9 @@
 # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
+
+# Metadata
+
 title: Byld
 email: [email protected]
 author: Peeyush Kushwaha, Viresh Gupta
@@ -22,12 +25,25 @@ description: >- # this means to ignore newlines until "baseurl:"
   Google search results) and in your feed.xml site description.
 keywords: Byld, IIIT-Delhi, Software Development, Club, Programming
 lang: en-IN
-favicon: "/assets/images/favicon.png"
+fb_username: byld.iiitd
+github_username:  IIIT-Delhi
+
+# Config
 
 baseurl: "/byldWebsite" # the subpath of your site, e.g. /blog
 url: "https://virresh.github.io" # the base hostname & protocol for your site, e.g. http://example.com
-fb_username: byld.iiitd
-github_username:  IIIT-Delhi
+favicon: "/assets/images/favicon.png"
+collections:
+  members:
+    output: true
+    permalink: /:collection/:name
+defaults:
+  -
+    scope:
+      path: ""
+      type: "members"
+    values:
+      layout: "member-page"
 
 # Build settings
 markdown: kramdown

diff --git a/site/_includes/head.html b/site/_includes/head.html
@@ -1,7 +1,7 @@
 <!-- HEAD Start -->
 
 <head>
-  <title>{% if page.title %}{{page.title}} | {% endif %}{{site.title}} | IIIT-Delhi </title>
+  <title> {% if page.title %}{{page.title}} | {% endif %}{{site.title}} | IIIT-Delhi </title>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="author" content="{{site.author}}">
@@ -23,6 +23,8 @@
   <link href="{{ 'assets/css/techtalks.css' | relative_url }}" rel="stylesheet">  
   {% elsif page.title == 'Members' %}
   <link href="{{ 'assets/css/members.css' | relative_url }}" rel="stylesheet">
+  {% elsif page.collection == 'members' %}
+  <link href="{{ 'assets/css/member-pages.css' | relative_url }}" rel="stylesheet">
   {% endif %}
   <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,500,600,700,900' rel='stylesheet' type='text/css'>
 

diff --git a/site/_layouts/member-page.html b/site/_layouts/member-page.html
@@ -0,0 +1,39 @@
+<!-- Subpage Layout Start -->
+
+<!DOCTYPE html>
+<html lang="{{ site.lang }}">
+
+  {% include head.html %}
+
+  <body id="page-top">
+    <div id="page-container">
+
+    {% include navigation.html %}
+
+    <div class="container-fluid">
+      <div class="row-fluid" id="per-member-page-container">
+        <div class="col-md-12">
+          <div class="above-the-line">
+            <span class="member-name">{{page.name}}</span>
+          </div>
+          <!-- We're in control of the display above the line - allows us to maintain consistency. But allow arbitary HTML below the line -->
+          <!-- Allowing it would give people freedom to make their page their own, because otherwise they may not be interested in making their page at all. -->
+          <!-- Stuff which custom HTML would allow - Github links, fontawesome icons, embed tweets, embed buttons to github, show off your stackexchange points, etc-->
+          <hr class="member-content-separation-line">
+          <div class="member-content">
+            {{ content }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="page-bottom">
+      {% include footer.html %}
+    </div>
+    </div> <!-- page container ends -->
+
+    {% include js.html %}
+  </body>
+</html>
+
+<!-- Subpage Layout End -->
diff --git a/site/_members/bob.md b/site/_members/bob.md
@@ -0,0 +1,21 @@
+---
+name: Bob, The
+---
+
+<p> Bob is an avid bylder </p>
+
+Here's bob's twitter feed:
+
+<div  style="height:300px; width: 500px; overflow: scroll;">
+  <a class="twitter-timeline" href="https://twitter.com/BobtheBuilder?ref_src=twsrc%5Etfw">Tweets by BobtheBuilder</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
+</div>
+
+Bob doesn't have a GitHub account, but Bob wants you to follow IIITD's account on GitHub
+<!-- Place this tag where you want the button to render. -->
+<a class="github-button" href="https://github.com/IIIT-Delhi" data-size="large" aria-label="Follow @IIIT-Delhi on GitHub">Follow @IIIT-Delhi</a>
+<!-- Place this tag in your head or just before your close body tag. -->
+<script async defer src="https://buttons.github.io/buttons.js"></script>
+
+In his free time, Bob answers questions on the StackExchange network
+
+<a href="https://stackexchange.com/users/11683/jon-skeet"><img src="https://stackexchange.com/users/flair/11683.png" width="208" height="58" alt="profile for Jon Skeet on Stack Exchange, a network of free, community-driven Q&amp;A sites" title="profile for Peeyush Kushwaha on Stack Exchange, a network of free, community-driven Q&amp;A sites" /></a>
diff --git a/site/assets/css/member-pages.css b/site/assets/css/member-pages.css
@@ -0,0 +1,29 @@
+#per-member-page-container {
+  padding: 150px 10px 30px; /* top side bottom */
+}
+
+.member-content-separation-line {
+  border-top: 1px solid #cecece;
+}
+
+/**
+ * Note: the below 3 rules are to make the footer stay at the bottom even if user's page's content is too short
+ * See https://stackoverflow.com/a/27812717
+ * Problem with absolute positioning layout is that if screen height is too small (mobile devices), then the footer overlaps the content
+ * Problem with css table based layout is I'm unable to get the heights to work
+ * In browsers which don't support flexbox or viewport units ( <= IE10 & opera mini), the footer will simply appear not at the bottom of the page if the content is too short, nothing else should be affected
+ */
+#page-bottom {
+  margin-top: auto;
+}
+
+#page-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+body {
+  min-height: 100vh;
+}
+