silva
/
new_site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Overall improvements and fixes

This commit is contained in:
Maruan Al-Shedivat 2015-10-24 14:54:29 -04:00
parent 4b73664d56
commit 5f0fbde387
12 changed files with 113 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
_config.yml
View File

@ -1,4 +1,7 @@
# ------------------------------------------------------------------------------
# Site settings # Site settings
# ------------------------------------------------------------------------------
name: Your Name name: Your Name
email: you@example.com email: you@example.com
description: > # this means to ignore newlines until "baseurl:" description: > # this means to ignore newlines until "baseurl:"
@ -6,8 +9,36 @@ description: > # this means to ignore newlines until "baseurl:"
url: # the base hostname & protocol for your site url: # the base hostname & protocol for your site
baseurl: # the subpath of your site, e.g. /blog/ baseurl: # the subpath of your site, e.g. /blog/
twitter_username: twitter_username
github_username: github_username # Social
github_username: # put your github username
twitter_username: # put your twitter username
linkedin_username: # put your linkedin username
scholar_authorid: # put your google scholar author id
contact_note: >
You can even add a little note about which of these is the best way to reach you.
# Blog
blog_name: al-folio
blog_description: simple whitespace theme for academics
# Collections
collections:
news:
defaults:
layout: post
output: true
permalink: /news/:path/
projects:
output: true
permalink: /projects/:path/
poetry:
output: true
permalink: /poetry/:path/
# ------------------------------------------------------------------------------
# Jekyll settings
# ------------------------------------------------------------------------------
# Build settings # Build settings
markdown: kramdown markdown: kramdown
@ -28,19 +59,6 @@ include: ['_pages']
# Emoji support # Emoji support
emoji_dir: /assets/img/emoji emoji_dir: /assets/img/emoji
# Collections
collections:
news:
defaults:
layout: post
output: true
permalink: /news/:path/
projects:
output: true
permalink: /projects/:path/
poetry:
output: true
permalink: /poetry/:path/
# Jekyll-Scholar # Jekyll-Scholar
scholar: scholar:
@ -64,6 +82,8 @@ scholar:
query: "@*" query: "@*"
# Advanced (don't touch if you are not sure what it is) # ------------------------------------------------------------------------------
# Other advanced settings (don't touch if you are not sure)
# ------------------------------------------------------------------------------
jquery_version: "1.11.1" jquery_version: "1.11.1"
katex_version: "0.1.1" katex_version: "0.1.1"

4
_includes/news.html
View File

@ -2,9 +2,9 @@
<h2>news</h2> <h2>news</h2>
{% if site.news %} {% if site.news %}
<table> <table>
{% for item in site.news %} {% for item in site.news reversed %}
<tr> <tr>
<td class="date">{{ item.date | date: "%B %-d, %Y" }}</td> <td class="date">{{ item.date | date: "%b %-d, %Y" }}</td>
<td class="announcement"> <td class="announcement">
{% if item.inline %} {% if item.inline %}
{{ item.content | remove: '<p>' | remove: '</p>' | emojify }} {{ item.content | remove: '<p>' | remove: '</p>' | emojify }}

12
_includes/social.html
View File

@ -1,13 +1,13 @@
<div class="social"> <div class="social">
<span class="contacticon center"> <span class="contacticon center">
<a href="mailto:you@example.com"><i class="fa fa-envelope-square"></i></a> <a href="mailto:{{ site.email }}"><i class="fa fa-envelope-square"></i></a>
<a href="https://scholar.google.com" target="_blank" title="Google Scholar"><i class="ai ai-google-scholar-square"></i></a> <a href="https://scholar.google.com/citations?authorid={{ site.scholar_authorid }}" target="_blank" title="Google Scholar"><i class="ai ai-google-scholar-square"></i></a>
<a href="https://github.com" target="_blank" title="GitHub"><i class="fa fa-github-square"></i></a> <a href="https://github.com/{{ site.github_username }}" target="_blank" title="GitHub"><i class="fa fa-github-square"></i></a>
<a href="https://www.linkedin.com" target="_blank" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a> <a href="https://www.linkedin.com/in/{{ site.linkedin_username }}" target="_blank" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a>
<a href="https://twitter.com" target="_blank" title="Twitter"><i class="fa fa-twitter-square"></i></a> <a href="https://twitter.com/{{ site.twitter_username }}" target="_blank" title="Twitter"><i class="fa fa-twitter-square"></i></a>
</span> </span>
<div class="col three caption"> <div class="col three caption">
You can even add a little note about which of these is the best way to reach you. {{ site.contact_note }}
</div> </div>
</div> </div>

2
_pages/publications.md
View File

@ -5,4 +5,4 @@ title: publications
description: Publications by categories in reversed chronological order. Generated by jekyll-scholar. Replace this text with your description. description: Publications by categories in reversed chronological order. Generated by jekyll-scholar. Replace this text with your description.
--- ---
{% bibliography %} {% bibliography --max 20 %}

22
_projects/1_project.markdown
View File

@ -2,42 +2,42 @@
layout: post layout: post
title: Project title: Project
description: a project with a background image description: a project with a background image
img: /img/12.jpg img: /assets/img/12.jpg
--- ---
Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width. Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.
To give your project a background in the portfolio page, just add the img tag to the front matter like so: To give your project a background in the portfolio page, just add the img tag to the front matter like so:
--- ---
layout: post layout: post
title: Project title: Project
description: a project with a background image description: a project with a background image
img: /img/12.jpg img: /assets/img/12.jpg
--- ---
<div class="img_row"> <div class="img_row">
<img class="col one" src="{{ site.baseurl }}/img/1.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/2.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/3.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles. Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
</div> </div>
<div class="img_row"> <div class="img_row">
<img class="col three" src="{{ site.baseurl }}/img/5.jpg" alt="" title="example image"/> <img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
This image can also have a caption. It's like magic. This image can also have a caption. It's like magic.
</div> </div>
You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images. You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images.
<div class="img_row"> <div class="img_row">
<img class="col two" src="{{ site.baseurl }}/img/6.jpg" alt="" title="example image"/> <img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/11.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these. You can also have artistically styled 2/3 + 1/3 images, like these.
@ -47,7 +47,7 @@ You can also put regular text between your rows of images. Say you wanted to wri
<br/><br/><br/> <br/><br/><br/>
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
<div class="img_row"> <div class="img_row">
<img class="col two" src="/img/6.jpg"/> <img class="col two" src="/img/6.jpg"/>

22
_projects/2_project.markdown
View File

@ -2,42 +2,42 @@
layout: post layout: post
title: Project title: Project
description: a project with a background image description: a project with a background image
img: /img/2.jpg img: /assets/img/2.jpg
--- ---
Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width. Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.
To give your project a background in the portfolio page, just add the img tag to the front matter like so: To give your project a background in the portfolio page, just add the img tag to the front matter like so:
--- ---
layout: post layout: post
title: Project title: Project
description: a project with a background image description: a project with a background image
img: /img/12.jpg img: /assets/img/12.jpg
--- ---
<div class="img_row"> <div class="img_row">
<img class="col one" src="{{ site.baseurl }}/img/1.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/2.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/3.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles. Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
</div> </div>
<div class="img_row"> <div class="img_row">
<img class="col three" src="{{ site.baseurl }}/img/5.jpg" alt="" title="example image"/> <img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
This image can also have a caption. It's like magic. This image can also have a caption. It's like magic.
</div> </div>
You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images. You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images.
<div class="img_row"> <div class="img_row">
<img class="col two" src="{{ site.baseurl }}/img/6.jpg" alt="" title="example image"/> <img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/11.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these. You can also have artistically styled 2/3 + 1/3 images, like these.
@ -47,7 +47,7 @@ You can also put regular text between your rows of images. Say you wanted to wri
<br/><br/><br/> <br/><br/><br/>
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
<div class="img_row"> <div class="img_row">
<img class="col two" src="/img/6.jpg"/> <img class="col two" src="/img/6.jpg"/>

20
_projects/3_project.markdown
View File

@ -8,37 +8,37 @@ redirect: https://unsplash.com
Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width. Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.
To give your project a background in the portfolio page, just add the img tag to the front matter like so: To give your project a background in the portfolio page, just add the img tag to the front matter like so:
--- ---
layout: post layout: post
title: Project title: Project
description: a project with a background image description: a project with a background image
img: /img/12.jpg img: /assets/img/12.jpg
--- ---
<div class="img_row"> <div class="img_row">
<img class="col one" src="{{ site.baseurl }}/img/1.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/2.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/3.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles. Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
</div> </div>
<div class="img_row"> <div class="img_row">
<img class="col three" src="{{ site.baseurl }}/img/5.jpg" alt="" title="example image"/> <img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
This image can also have a caption. It's like magic. This image can also have a caption. It's like magic.
</div> </div>
You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images. You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images.
<div class="img_row"> <div class="img_row">
<img class="col two" src="{{ site.baseurl }}/img/6.jpg" alt="" title="example image"/> <img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/11.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these. You can also have artistically styled 2/3 + 1/3 images, like these.
@ -48,7 +48,7 @@ You can also put regular text between your rows of images. Say you wanted to wri
<br/><br/><br/> <br/><br/><br/>
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
<div class="img_row"> <div class="img_row">
<img class="col two" src="/img/6.jpg"/> <img class="col two" src="/img/6.jpg"/>

22
_projects/4_project.markdown
View File

@ -2,42 +2,42 @@
layout: post layout: post
title: Project title: Project
description: another without an image description: another without an image
img: img:
--- ---
Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width. Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.
To give your project a background in the portfolio page, just add the img tag to the front matter like so: To give your project a background in the portfolio page, just add the img tag to the front matter like so:
--- ---
layout: post layout: post
title: Project title: Project
description: a project with a background image description: a project with a background image
img: /img/12.jpg img: /assets/img/12.jpg
--- ---
<div class="img_row"> <div class="img_row">
<img class="col one" src="{{ site.baseurl }}/img/1.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/2.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/3.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles. Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
</div> </div>
<div class="img_row"> <div class="img_row">
<img class="col three" src="{{ site.baseurl }}/img/5.jpg" alt="" title="example image"/> <img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
This image can also have a caption. It's like magic. This image can also have a caption. It's like magic.
</div> </div>
You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images. You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images.
<div class="img_row"> <div class="img_row">
<img class="col two" src="{{ site.baseurl }}/img/6.jpg" alt="" title="example image"/> <img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/11.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these. You can also have artistically styled 2/3 + 1/3 images, like these.
@ -47,7 +47,7 @@ You can also put regular text between your rows of images. Say you wanted to wri
<br/><br/><br/> <br/><br/><br/>
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
<div class="img_row"> <div class="img_row">
<img class="col two" src="/img/6.jpg"/> <img class="col two" src="/img/6.jpg"/>

22
_projects/5_project.markdown
View File

@ -2,42 +2,42 @@
layout: post layout: post
title: Project title: Project
description: a project with a background image description: a project with a background image
img: /img/1.jpg img: /assets/img/1.jpg
--- ---
Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width. Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.
To give your project a background in the portfolio page, just add the img tag to the front matter like so: To give your project a background in the portfolio page, just add the img tag to the front matter like so:
--- ---
layout: post layout: post
title: Project title: Project
description: a project with a background image description: a project with a background image
img: /img/12.jpg img: /assets/img/12.jpg
--- ---
<div class="img_row"> <div class="img_row">
<img class="col one" src="{{ site.baseurl }}/img/1.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/2.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/3.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles. Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
</div> </div>
<div class="img_row"> <div class="img_row">
<img class="col three" src="{{ site.baseurl }}/img/5.jpg" alt="" title="example image"/> <img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
This image can also have a caption. It's like magic. This image can also have a caption. It's like magic.
</div> </div>
You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images. You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images.
<div class="img_row"> <div class="img_row">
<img class="col two" src="{{ site.baseurl }}/img/6.jpg" alt="" title="example image"/> <img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/11.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these. You can also have artistically styled 2/3 + 1/3 images, like these.
@ -47,7 +47,7 @@ You can also put regular text between your rows of images. Say you wanted to wri
<br/><br/><br/> <br/><br/><br/>
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
<div class="img_row"> <div class="img_row">
<img class="col two" src="/img/6.jpg"/> <img class="col two" src="/img/6.jpg"/>

22
_projects/6_project.markdown
View File

@ -2,42 +2,42 @@
layout: post layout: post
title: Project title: Project
description: a project with no image description: a project with no image
img: img:
--- ---
Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width. Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.
To give your project a background in the portfolio page, just add the img tag to the front matter like so: To give your project a background in the portfolio page, just add the img tag to the front matter like so:
--- ---
layout: post layout: post
title: Project title: Project
description: a project with a background image description: a project with a background image
img: {{ site.baseurl }}/img/12.jpg img: /assets/img/12.jpg
--- ---
<div class="img_row"> <div class="img_row">
<img class="col one" src="{{ site.baseurl }}/img/1.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/2.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/3.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles. Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
</div> </div>
<div class="img_row"> <div class="img_row">
<img class="col three" src="{{ site.baseurl }}/img/5.jpg" alt="" title="example image"/> <img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
This image can also have a caption. It's like magic. This image can also have a caption. It's like magic.
</div> </div>
You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images. You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images.
<div class="img_row"> <div class="img_row">
<img class="col two" src="{{ site.baseurl }}/img/6.jpg" alt="" title="example image"/> <img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/img/11.jpg" alt="" title="example image"/> <img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div> </div>
<div class="col three caption"> <div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these. You can also have artistically styled 2/3 + 1/3 images, like these.
@ -47,7 +47,7 @@ You can also put regular text between your rows of images. Say you wanted to wri
<br/><br/><br/> <br/><br/><br/>
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above: The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
<div class="img_row"> <div class="img_row">
<img class="col two" src="/img/6.jpg"/> <img class="col two" src="/img/6.jpg"/>

2
_sass/_layout.scss
View File

@ -95,7 +95,7 @@ display: line;
width: 100%; width: 100%;
tr { text-align: left; } tr { text-align: left; }
td { padding: 5px;} td { padding: 5px 0;}
} }
} }

4
blog/index.html
View File

@ -3,8 +3,8 @@ layout: default
--- ---
<div class="header-bar"> <div class="header-bar">
<h1>al-folio</h1> <h1>{{ site.blog_name }}</h1>
<h2>simple whitespace theme for academics</h2> <h2>{{ site.blog_description }}</h2>
<br/> <br/>
<hr> <hr>
<br/> <br/>