Add profile property to about.md

This commit is contained in:
Maruan Al-Shedivat 2015-10-22 14:59:20 -04:00
parent 8a3e818873
commit ecafb6544b
3 changed files with 50 additions and 12 deletions

18
_layouts/about.html Normal file
View File

@ -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 }}

View File

@ -1,14 +1,23 @@
--- ---
layout: page layout: about
permalink: / permalink: /
title: your name title: your name
description: <a href="">Affiliations</a>. Address. Contacts. Moto. Etc. 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 news: true
social: 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. 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.

View File

@ -70,6 +70,17 @@ display: line;
} }
} }
/**
* Profile
*/
.profile {
margin-right: 20px;
img { width: 100%; }
}
.address {
p { margin: 0; }
}
/** /**
* News block ********************************************************** * News block **********************************************************
*/ */
@ -111,17 +122,17 @@ width: 100%;
* Pagination ********************************************************** * Pagination **********************************************************
*/ */
.pagination{ .pagination{
max-width: -webkit-calc(800px - (#{$horizontal-spacing-unit} * 2)); max-width: -webkit-calc(800px - (#{$horizontal-spacing-unit} * 2));
text-align: center; text-align: center;
width: 100%; width: 100%;
position: fixed; position: fixed;
bottom: 50px; bottom: 50px;
} }
.paginationicon { .paginationicon {
font-size: 50px; font-size: 50px;
a { a {
color: $theme-color; color: $theme-color;
} }
} }
/** /**