Overall improvements and fixes
This commit is contained in:
Maruan Al-Shedivat
parent
4b73664d56
commit
5f0fbde387
52
_config.yml
52
_config.yml
@ -1,4 +1,7 @@
|
||||
# ------------------------------------------------------------------------------
|
||||
# Site settings
|
||||
# ------------------------------------------------------------------------------
|
||||
|
||||
name: Your Name
|
||||
email: you@example.com
|
||||
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
|
||||
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
|
||||
markdown: kramdown
|
||||
@ -28,19 +59,6 @@ include: ['_pages']
|
||||
# Emoji support
|
||||
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
|
||||
scholar:
|
||||
@ -64,6 +82,8 @@ scholar:
|
||||
|
||||
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"
|
||||
katex_version: "0.1.1"
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
<h2>news</h2>
|
||||
{% if site.news %}
|
||||
<table>
|
||||
{% for item in site.news %}
|
||||
{% for item in site.news reversed %}
|
||||
<tr>
|
||||
<td class="date">{{ item.date | date: "%B %-d, %Y" }}</td>
|
||||
<td class="date">{{ item.date | date: "%b %-d, %Y" }}</td>
|
||||
<td class="announcement">
|
||||
{% if item.inline %}
|
||||
{{ item.content | remove: '<p>' | remove: '</p>' | emojify }}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<div class="social">
|
||||
<span class="contacticon center">
|
||||
<a href="mailto:you@example.com"><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://github.com" 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://twitter.com" target="_blank" title="Twitter"><i class="fa fa-twitter-square"></i></a>
|
||||
<a href="mailto:{{ site.email }}"><i class="fa fa-envelope-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/{{ site.github_username }}" target="_blank" title="GitHub"><i class="fa fa-github-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/{{ site.twitter_username }}" target="_blank" title="Twitter"><i class="fa fa-twitter-square"></i></a>
|
||||
</span>
|
||||
|
||||
<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>
|
||||
|
||||
@ -5,4 +5,4 @@ title: publications
|
||||
description: Publications by categories in reversed chronological order. Generated by jekyll-scholar. Replace this text with your description.
|
||||
---
|
||||
|
||||
{% bibliography %}
|
||||
{% bibliography --max 20 %}
|
||||
|
||||
@ -2,42 +2,42 @@
|
||||
layout: post
|
||||
title: Project
|
||||
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.
|
||||
|
||||
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
|
||||
title: Project
|
||||
description: a project with a background image
|
||||
img: /img/12.jpg
|
||||
img: /assets/img/12.jpg
|
||||
---
|
||||
|
||||
|
||||
<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 }}/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/1.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 }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<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.
|
||||
</div>
|
||||
<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 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>
|
||||
|
||||
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">
|
||||
<img class="col two" src="{{ site.baseurl }}/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/img/11.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 }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
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/>
|
||||
|
||||
|
||||
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">
|
||||
<img class="col two" src="/img/6.jpg"/>
|
||||
|
||||
@ -2,42 +2,42 @@
|
||||
layout: post
|
||||
title: Project
|
||||
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.
|
||||
|
||||
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
|
||||
title: Project
|
||||
description: a project with a background image
|
||||
img: /img/12.jpg
|
||||
img: /assets/img/12.jpg
|
||||
---
|
||||
|
||||
|
||||
<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 }}/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/1.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 }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<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.
|
||||
</div>
|
||||
<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 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>
|
||||
|
||||
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">
|
||||
<img class="col two" src="{{ site.baseurl }}/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/img/11.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 }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
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/>
|
||||
|
||||
|
||||
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">
|
||||
<img class="col two" src="/img/6.jpg"/>
|
||||
|
||||
@ -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.
|
||||
|
||||
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
|
||||
title: Project
|
||||
description: a project with a background image
|
||||
img: /img/12.jpg
|
||||
img: /assets/img/12.jpg
|
||||
---
|
||||
|
||||
|
||||
<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 }}/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/1.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 }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<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.
|
||||
</div>
|
||||
<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 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>
|
||||
|
||||
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">
|
||||
<img class="col two" src="{{ site.baseurl }}/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/img/11.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 }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
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/>
|
||||
|
||||
|
||||
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">
|
||||
<img class="col two" src="/img/6.jpg"/>
|
||||
|
||||
@ -2,42 +2,42 @@
|
||||
layout: post
|
||||
title: Project
|
||||
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.
|
||||
|
||||
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
|
||||
title: Project
|
||||
description: a project with a background image
|
||||
img: /img/12.jpg
|
||||
img: /assets/img/12.jpg
|
||||
---
|
||||
|
||||
|
||||
<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 }}/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/1.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 }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<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.
|
||||
</div>
|
||||
<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 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>
|
||||
|
||||
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">
|
||||
<img class="col two" src="{{ site.baseurl }}/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/img/11.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 }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
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/>
|
||||
|
||||
|
||||
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">
|
||||
<img class="col two" src="/img/6.jpg"/>
|
||||
|
||||
@ -2,42 +2,42 @@
|
||||
layout: post
|
||||
title: Project
|
||||
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.
|
||||
|
||||
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
|
||||
title: Project
|
||||
description: a project with a background image
|
||||
img: /img/12.jpg
|
||||
img: /assets/img/12.jpg
|
||||
---
|
||||
|
||||
|
||||
<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 }}/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/1.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 }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<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.
|
||||
</div>
|
||||
<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 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>
|
||||
|
||||
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">
|
||||
<img class="col two" src="{{ site.baseurl }}/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/img/11.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 }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
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/>
|
||||
|
||||
|
||||
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">
|
||||
<img class="col two" src="/img/6.jpg"/>
|
||||
|
||||
@ -2,42 +2,42 @@
|
||||
layout: post
|
||||
title: Project
|
||||
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.
|
||||
|
||||
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
|
||||
title: Project
|
||||
description: a project with a background image
|
||||
img: {{ site.baseurl }}/img/12.jpg
|
||||
img: /assets/img/12.jpg
|
||||
---
|
||||
|
||||
|
||||
<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 }}/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/1.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 }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<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.
|
||||
</div>
|
||||
<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 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>
|
||||
|
||||
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">
|
||||
<img class="col two" src="{{ site.baseurl }}/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/img/11.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 }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
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/>
|
||||
|
||||
|
||||
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">
|
||||
<img class="col two" src="/img/6.jpg"/>
|
||||
|
||||
@ -95,7 +95,7 @@ display: line;
|
||||
width: 100%;
|
||||
|
||||
tr { text-align: left; }
|
||||
td { padding: 5px;}
|
||||
td { padding: 5px 0;}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,8 +3,8 @@ layout: default
|
||||
---
|
||||
|
||||
<div class="header-bar">
|
||||
<h1>al-folio</h1>
|
||||
<h2>simple whitespace theme for academics</h2>
|
||||
<h1>{{ site.blog_name }}</h1>
|
||||
<h2>{{ site.blog_description }}</h2>
|
||||
<br/>
|
||||
<hr>
|
||||
<br/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user