From ecafb6544b646403b2ec10429ea2ecb98342f2a6 Mon Sep 17 00:00:00 2001
From: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
Date: Thu, 22 Oct 2015 14:59:20 -0400
Subject: [PATCH] Add profile property to about.md

---
 _layouts/about.html | 18 ++++++++++++++++++
 _pages/about.md     | 15 ++++++++++++---
 _sass/_layout.scss  | 29 ++++++++++++++++++++---------
 3 files changed, 50 insertions(+), 12 deletions(-)
 create mode 100644 _layouts/about.html

diff --git a/_layouts/about.html b/_layouts/about.html
new file mode 100644
index 0000000..c314ee5
--- /dev/null
+++ b/_layouts/about.html
@@ -0,0 +1,18 @@
+---
+layout: page
+---
+
+{% if page.profile %}
+  <div class="profile col one {{ page.profile.align }}">
+    {% if page.profile.image %}
+      <img class="one" src="/img/{{ page.profile.image }}">
+    {% endif %}
+    {% if page.profile.address %}
+      <div class="address">
+        {{ page.profile.address }}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}
+
+{{ content }}
diff --git a/_pages/about.md b/_pages/about.md
index 8f07e87..7528559 100644
--- a/_pages/about.md
+++ b/_pages/about.md
@@ -1,14 +1,23 @@
 ---
-layout: page
+layout: about
 permalink: /
 title: your name
 description: <a href="">Affiliations</a>. Address. Contacts. Moto. Etc.
+
+profile:
+  align: right
+  image: prof_pic.jpg
+  address: >
+    <p>555 your office number</p>
+    <p>123 your address street</p>
+    <p>Your City, State 12345</p>
+
 news: true
 social: true
 ---
 
-<img class="col one right" src="/img/prof_pic.jpg">
+Write your biography here. Tell the world about yourself. Link to your favorite [subreddit](http://reddit.com). You can put a picture in, too. The code is already in, just name your picture `prof_pic.jpg` and put it in the `img/` folder.
 
-Write your biography here. Tell the world about yourself. Link to your favorite [subreddit](http://reddit.com). You can put a picture in, too. The code is already in, just name your picture "prof_pic.jpg" and put it in the img folder.
+Put your address / P.O. box / other info right below your picture. You can also disable any these elements by editing `profile` property of the YAML header of your `about.md`.
 
 Link to your social media connections, too. This theme is set up to use [Font Awesome icons](http://fortawesome.github.io/Font-Awesome/){:target="\_blank"} and [Academicons](https://jpswalsh.github.io/academicons/){:target="\_blank"}, like the ones below. Add your Facebook, Twitter, LinkedIn, Google Scholar, or just disable all of them.
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 7564496..bf810f6 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -70,6 +70,17 @@ display: line;
     }
 }
 
+/**
+ * Profile
+ */
+.profile {
+  margin-right: 20px;
+  img { width: 100%; }
+}
+.address {
+  p { margin: 0; }
+}
+
 /**
  * News block   **********************************************************
  */
@@ -111,17 +122,17 @@ width: 100%;
  * Pagination   **********************************************************
  */
 .pagination{
-max-width: -webkit-calc(800px - (#{$horizontal-spacing-unit} * 2));
-text-align: center;
-width: 100%;
-position: fixed;
-bottom: 50px;
+  max-width: -webkit-calc(800px - (#{$horizontal-spacing-unit} * 2));
+  text-align: center;
+  width: 100%;
+  position: fixed;
+  bottom: 50px;
 }
 .paginationicon {
-font-size: 50px;
-a {
-color: $theme-color;
-    }
+  font-size: 50px;
+  a {
+    color: $theme-color;
+  }
 }
 
 /**