Skip to content

Commit

Permalink
Basic modifications of the *folio theme
Browse files Browse the repository at this point in the history
@alshedivat
alshedivat committed Oct 19, 2015
0 parents commit 1e8dff5
Showing 46 changed files with 3,143 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
_site
.sass-cache
.DS_store
41 changes: 41 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# al-folio
A simple and clean theme for academics. Based on [\*folio](http://liabogoev.com/-folio).

## Academic Features

### Ergonomic Publications



## Original Features
The following are features inherited from [\*folio](http://liabogoev.com/-folio).

### Collections
This Jekyll theme implements collections to let you break up your work into categories. The example is divided into poetry and portfolio, but easily revamp this into recipes, apps, short stories, limmericks, whatever your creative work is.
> To do this, edit the collections in the config file, create a corresponding folder, and update the portfolio and poetry source files.
Three different layouts are included—the poetry layout, for a simple list of entries, the blog layout (index.html), for more detailed descriptive list of entries, and the portfolio layout. The portfolio layout overlays a descriptive hoverover on a background image. If no image is provided, the square is auto-filled with the chosen theme color. Thumbnail sizing is not necessary, as the grid crops images perfectly.

### Portfolio Specifics
You can easily add full pages for each of the projects in your portfolio. If you want one to link to an external website, create a file for it in \_portfolio, and fill in the YAML front matter as you would for another, but with a redirect, like so:

---
layout: post
title: Project
description: a project that redirects to another website
img:
redirect: https://otherpage.com
---

### Theming
Six beautiful theme colors have been selected to choose from. The default is red, but quickly change it by editing the \_base.scss file in line 40. The color variable are listed there, as well.

### Photos
Photo formatting is made simple using rows of a 3-column system. Make photos 1/3, 2/3, or full width. Easily create beautiful grids within your blog posts and projects pages.

### Code Highlighting
This theme implements Jekyll's built in code syntax highlighting with Pygments. Just use a liquid tag to delineate your code:

## License

MIT
1,677 changes: 1,677 additions & 0 deletions _bibliography/references.bib

Large diffs are not rendered by default.

52 changes: 52 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# Site settings
name: Your Name
email: you@example.com
description: > # this means to ignore newlines until "baseurl:"
A simple, whitespace theme for academics. Based on *folio theme.
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

# Build settings
markdown: redcarpet
highlighter: pygments

include: ['_pages']

# Pagination
paginate: 15
permalink: /blog/:year/:title/
paginate_path: /blog/page:num/

# Collections
collections:
projects:
output: true
permalink: /projects/:path/
poetry:
output: true
permalink: /poetry/:path/

# Jekyll-Scholar
scholar:

style: apa
locale: en

sort_by: year
order: descending

source: /_bibliography/
bibliography: references.bib
bibliography_template: "{{reference}}"

replace_strings: true
join_strings: true

details_dir: bibliography
details_layout: bibtex.html
details_link: Details

query: "@*"
7 changes: 7 additions & 0 deletions _includes/footer.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<footer class="site-footer">

<div class="wrapper">
<p class="small">© Copyright {{ site.time | date: '%Y' }} {{ site.name }}. Powered by <a href="">Jekyll</a>. Theme <a href="">al-folio</a> by <a href="https://github.com/alshedivat">alshedivat</a>.</p>
</div>

</footer>
13 changes: 13 additions & 0 deletions _includes/head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>{{ site.name }}{% if page.title and page.url != "/" %} | {{ page.title }}{% endif %}</title>
<meta name="description" content="{{ site.description }}">

<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
24 changes: 24 additions & 0 deletions _includes/header.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<header class="site-header">

<div class="wrapper">

<nav class="site-nav">

<div class="trigger">
<a class="page-link" href="{{ site.baseurl }}/">home</a>

<!-- {{ site.title }} instead of blog -->
<a class="page-link" href="{{ "/blog/" | prepend: site.baseurl }}">blog</a>

{% for page in site.pages %}
{% if page.title and page.url != "/" %}
<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
{% endif %}
{% endfor %}

</div>
</nav>

</div>

</header>
21 changes: 21 additions & 0 deletions _layouts/default.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>

{% include head.html %}

<body>

{% include header.html %}


<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>

{% include footer.html %}

</body>

</html>
15 changes: 15 additions & 0 deletions _layouts/page.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
layout: default
---
<div class="post">

<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
<h5 class="post-description">{{ page.description }}</h5>
</header>

<article class="post-content">
{{ content }}
</article>

</div>
15 changes: 15 additions & 0 deletions _layouts/post.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
layout: default
---
<div class="post">

<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
<p class="post-meta">{{ page.date | date: "%B %-d, %Y — %H:%M" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
</header>

<article class="post-content">
{{ content }}
</article>

</div>
28 changes: 28 additions & 0 deletions _pages/about.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
layout: page
permalink: /
title: your name
description: Affiliations. Address. Contacts. Moto. Etc.
---

<img class="col one right" src="/img/prof_pic.jpg">

<br/>
Write your biography here. Tell the world about yourself. Link to your favorite <a href="http://reddit.com" target="blank">subreddit</a>. 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.

Link to your social media connections, too. This theme is set up to use <a href="http://fortawesome.github.io/Font-Awesome/" target="blank">Font Awesome icons</a>, like the ones below. Add your Facebook, Twitter, LinkedIn, or just disable all of them.


<br/>
<hr/>
<br/>
<span class="contacticon center">
<a href="mailto:you@example.com"><i class="fa fa-envelope-square"></i></a>
<a href="https://github.com" target="_blank"><i class="fa fa-github-square"></i></a>
<a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin-square"></i></a>
<a href="https://twitter.com" target="_blank"><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.
</div>
15 changes: 15 additions & 0 deletions _pages/poetry.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
layout: page
permalink: /poetry/
title: poetry
description: Showcase your writing, short stories, or poems. Replace this text with your description.
---

<ul class="post-list">
{% for poem in site.poetry reversed %}
<li>
<h2><a class="poem-title" href="{{ poem.url | prepend: site.baseurl }}">{{ poem.title }}</a></h2>
<p class="post-meta">{{ poem.date | date: '%B %-d, %Y — %H:%M' }}</p>
</li>
{% endfor %}
</ul>
47 changes: 47 additions & 0 deletions _pages/projects.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
---
layout: page
title: projects
permalink: /projects/
---

{% for project in site.projects %}

{% if project.redirect %}
<div class="project">
<div class="thumbnail">
<a href="{{ project.redirect }}" target="_blank">
{% if project.img %}
<img class="thumbnail" src="{{ project.img }}"/>
{% else %}
<div class="thumbnail blankbox"></div>
{% endif %}
<span>
<h1>{{ project.title }}</h1>
<br/>
<p>{{ project.description }}</p>
</span>
</a>
</div>
</div>
{% else %}

<div class="project ">
<div class="thumbnail">
<a href="{{ site.baseurl }}{{ project.url }}">
{% if project.img %}
<img class="thumbnail" src="{{ project.img }}"/>
{% else %}
<div class="thumbnail blankbox"></div>
{% endif %}
<span>
<h1>{{ project.title }}</h1>
<br/>
<p>{{ project.description }}</p>
</span>
</a>
</div>
</div>

{% endif %}

{% endfor %}
8 changes: 8 additions & 0 deletions _pages/publications.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
layout: page
permalink: /publications/
title: publications
description: Publications by categories in reversed chronological order. Generated by jekyll-scholar. Replace this text with your description.
---

{% bibliography %}
8 changes: 8 additions & 0 deletions _pages/teaching.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
layout: page
permalink: /teaching/
title: teaching
description: Materials for courses you taught. Replace this text with your description.
---

Courses you taught.
1 change: 1 addition & 0 deletions _plugins/ext.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
require 'jekyll/scholar'
25 changes: 25 additions & 0 deletions _poetry/2015-05-05-emperor.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
---
layout: post
title: The Emperor of Ice Cream
date: 2015-07-06 07:59:00
---

Call the roller of big cigars,
The muscular one, and bid him whip
In kitchen cups concupiscent curds.
Let the wenches dawdle in such dress
As they are used to wear, and let the boys
Bring flowers in last month's newspapers.
Let be be finale of seem.
The only emperor is the emperor of ice-cream.

Take from the dresser of deal.
Lacking the three glass knobs, that sheet
On which she embroidered fantails once
And spread it so as to cover her face.
If her horny feet protrude, they come
To show how cold she is, and dumb.
Let the lamp affix its beam.
The only emperor is the emperor of ice-cream.

### Wallace Stevens
48 changes: 48 additions & 0 deletions _poetry/2015-07-06-soliloquy.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
---
layout: post
title: Soliloquy Of The Solipsist
date: 2015-07-06 07:59:00
---
I?
I walk alone;
The midnight street
Spins itself from under my feet;
When my eyes shut
These dreaming houses all snuff out;
Through a whim of mine
Over gables the moon's celestial onion
Hangs high.

I
Make houses shrink
And trees diminish
By going far; my look's leash
Dangles the puppet-people
Who, unaware how they dwindle,
Laugh, kiss, get drunk,
Nor guess that if I choose to blink
They die.

I
When in good humor,
Give grass its green
Blazon sky blue, and endow the sun
With gold;
Yet, in my wintriest moods, I hold
Absolute power
To boycott any color and forbid any flower
To be.

I
Know you appear
Vivid at my side,
Denying you sprang out of my head,
Claiming you feel
Love fiery enough to prove flesh real,
Though it's quite clear
All you beauty, all your wit, is a gift, my dear,
From me.


### Sylvia Plath
29 changes: 29 additions & 0 deletions _poetry/2015-08-06-fantasy.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
layout: post
title: In That Other Fantasy Where We Live Forever
date: 2015-08-06 07:59:00
---
we were never caught

we partied the southwest, smoked it from L.A. to El Dorado
worked odd jobs between delusions of escape
drunk on the admonitions of parents, parsons & professors
driving faster than the road or law allowed.
our high-pitched laughter was young, heartless & disrespected
authority. we could be heard for miles in the night

the Grand Canyon of a new manhood.
womanhood discovered
like the first sighting of Mount Wilson

we rebelled against the southwestern wind

we got so naturally ripped, we sprouted wings,
crashed parties on the moon, and howled at the earth

we lived off love. It was all we had to eat

when you split you took all the wisdom
and left me the worry

### Wanda Coleman
28 changes: 28 additions & 0 deletions _posts/2015-03-15-formatting-and-links.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
layout: post
title: a post with formatting and links
date: 2015-03-15 16:40:16
description: march & april, looking forward to summer
---
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. <a href="https://www.pinterest.com" target="blank">Pinterest</a> DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade <a href="https://en.wikipedia.org/wiki/Cold-pressed_juice" target="blank">cold-pressed</a> meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.

#### Hipster list
<ul>
<li>brunch</li>
<li>fixie</li>
<li>raybans</li>
<li>messenger bag</li>
</ul>

Hoodie Thundercats retro, tote bag 8-bit Godard craft beer gastropub. Truffaut Tumblr taxidermy, raw denim Kickstarter sartorial dreamcatcher. Quinoa chambray slow-carb salvia readymade, bicycle rights 90's yr typewriter selfies letterpress cardigan vegan.

<hr>
<br/>
Pug heirloom High Life vinyl swag, single-origin coffee four dollar toast taxidermy reprehenderit fap distillery master cleanse locavore. Est anim sapiente leggings Brooklyn ea. Thundercats locavore excepteur veniam eiusmod. Raw denim Truffaut Schlitz, migas sapiente Portland VHS twee Bushwick Marfa typewriter retro id keytar.

<blockquote>
We do not grow absolutely, chronologically. We grow sometimes in one dimension, and not in another, unevenly. We grow partially. We are relative. We are mature in one realm, childish in another.
—Anais Nin
</blockquote>

Fap aliqua qui, scenester pug Echo Park polaroid irony shabby chic ex cardigan church-key Odd Future accusamus. Blog stumptown sartorial squid, gastropub duis aesthetic Truffaut vero. Pinterest tilde twee, odio mumblecore jean shorts lumbersexual.
30 changes: 30 additions & 0 deletions _posts/2015-05-15-images.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
---
layout: post
title: a post with images
date: 2015-05-15 21:01:00
description: this is what included images could look like
---
Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Fingerstache four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch.

<div class="img_row">
<img class="col three" src="/img/9.jpg">
</div>
<div class="img_row">
<img class="col three" src="{{ site.baseurl }}/img/9.jpg">
</div>
<div class="col three caption">
A simple, elegant caption looks good between image rows, after each row, or doesn't have to be there at all.
</div>
<div class="img_row">
<img class="col two" src="/img/8.jpg">
<img class="col one" src="/img/10.jpg">
</div>

Slow-carb four dollar toast Helvetica pop-up. Kale chips next level literally trust fund Pitchfork. Jean shorts Pinterest beard, farm-to-table irony craft beer swag tofu 8-bit Banksy. Quinoa forage fanny pack, pug hashtag Echo Park heirloom Schlitz tote bag artisan Neutra mumblecore 90's shabby chic raw denim.


<div class="img_row">
<img class="col one" src="/img/11.jpg">
<img class="col one" src="/img/12.jpg">
<img class="col one" src="/img/7.jpg">
</div>
35 changes: 35 additions & 0 deletions _posts/2015-07-15-code.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
layout: post
title: a post with code
date: 2015-07-15 15:09:00
description: an example of a blog post with some code
---
This theme implements a built-in Jekyll feature, the use of Pygments, for sytanx highlighting. It supports more than 100 languages. This example is in C++. All you have to do is wrap your code in a liquid tag:

{% raw %}
{% highlight c++ %} <br/> code code code <br/> {% endhighlight %}
{% endraw %}

Produces something like this:

{% highlight c++ %}

int main(int argc, char const *argv[])
{
string myString;

cout << "input a string: ";
getline(cin, myString);
int length = myString.length();

char charArray = new char * [length];

charArray = myString;
for(int i = 0; i < length; ++i){
cout << charArray[i] << " ";
}

return 0;
}

{% endhighlight %}
55 changes: 55 additions & 0 deletions _projects/1_project.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
layout: post
title: Project
description: a project with a background image
img: /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:

---
layout: post
title: Project
description: a project with a background image
img: /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"/>
</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"/>
</div>
<div class="col three caption">
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"/>
</div>
<div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these.
</div>


<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:

<div class="img_row">
<img class="col two" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/>
</div>
55 changes: 55 additions & 0 deletions _projects/2_project.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
layout: post
title: Project
description: a project with a background image
img: /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:

---
layout: post
title: Project
description: a project with a background image
img: /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"/>
</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"/>
</div>
<div class="col three caption">
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"/>
</div>
<div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these.
</div>


<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:

<div class="img_row">
<img class="col two" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/>
</div>
56 changes: 56 additions & 0 deletions _projects/3_project.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
layout: post
title: Project
description: a project that redirects to another website
img:
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:

---
layout: post
title: Project
description: a project with a background image
img: /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"/>
</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"/>
</div>
<div class="col three caption">
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"/>
</div>
<div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these.
</div>


<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:

<div class="img_row">
<img class="col two" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/>
</div>
55 changes: 55 additions & 0 deletions _projects/4_project.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
layout: post
title: Project
description: another without an image
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:

---
layout: post
title: Project
description: a project with a background image
img: /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"/>
</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"/>
</div>
<div class="col three caption">
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"/>
</div>
<div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these.
</div>


<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:

<div class="img_row">
<img class="col two" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/>
</div>
55 changes: 55 additions & 0 deletions _projects/5_project.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
layout: post
title: Project
description: a project with a background image
img: /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:

---
layout: post
title: Project
description: a project with a background image
img: /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"/>
</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"/>
</div>
<div class="col three caption">
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"/>
</div>
<div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these.
</div>


<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:

<div class="img_row">
<img class="col two" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/>
</div>
55 changes: 55 additions & 0 deletions _projects/6_project.markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
layout: post
title: Project
description: a project with no image
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:

---
layout: post
title: Project
description: a project with a background image
img: {{ site.baseurl }}/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"/>
</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"/>
</div>
<div class="col three caption">
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"/>
</div>
<div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these.
</div>


<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:

<div class="img_row">
<img class="col two" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/>
</div>
225 changes: 225 additions & 0 deletions _sass/_base.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
/**
* Reset some basic elements
*/
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
margin: 0;
padding: 0;
}



/** Variables **********************************************/
$base-font-family: Helvetica, sans-serif;
$base-line-height: 1.5em;
$horizontal-spacing-unit: 50px;
$vertical-spacing-unit: 40px;
$nav-height: 56px;

/* portfolio tinkering */
$img_spacing: 5px;
$img_height: 275px;
$caption_font_size: 12px;
$caption_color: #aaa;

/* COLORS */
$red: #FF3636;
$orange: #F29105;
$blue: #2698BA;
$green: #11D68B;
$lime_green: #B7D12A;
$purple: #B509AC;


$grey-color-dark: #333; /* footer */
$grey-color-light: #ddd; /* navigation bar border */
$text-color: #666;

/* Set theme color *************************/
$theme-color: darken($red, 30%);


/************************************************************/

/**
* Basic styling
*/
body {
font-family: $base-font-family;
font-size: $base-font-size;
line-height: $base-line-height;
font-weight: 100;
color: $text-color;
background-color: $background-color;
-webkit-text-size-adjust: 100%;
}



/**
* Set `margin-bottom` to maintain vertical rhythm
*/
p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm {
margin-bottom: $vertical-spacing-unit / 2;
}

.alignright {
float: right;
}


hr{
/* Inset, by Dan Eden */
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);

}


/**
* Figures
*/
figure > img {
display: block;
}

figcaption {
font-size: $small-font-size;
}



/**
* Lists
*/
ul, ol {
margin-left: $horizontal-spacing-unit;
}

li {
> ul,
> ol {
margin-bottom: 0;
}
}



/**
* Headings
*/
h1, h2, h3, h4, h5, h6 {
font-weight: 100;
}


/**
* Links
*/
a {
color: $text-color;
text-decoration: none;
/*
&:visited {
color: darken($brand-color, 15%);
}
*/
&:hover {
color: $theme-color;
text-decoration: none;
}
}

article a {
color: $theme-color;
font-weight: 100;

&:hover {
text-decoration: none;
}
}



/**
* Blockquotes
*/
blockquote {
color: $text-color;
border-left: 10px solid $grey-color-light;
padding-left: $horizontal-spacing-unit / 2;
font-size: 18px;
font-style: italic;

> :last-child {
margin-bottom: 0;
}
}



/**
* Code formatting
*/
pre,
code {
font-size: 15px;
border-radius: 3px;
background-color: $grey-color-light;
}

code {
padding: 1px 5px;
}

pre {
padding: 8px 12px;
overflow-x: scroll;

> code {
border: 0;
padding-right: 0;
padding-left: 0;
}
}



/**
* Wrapper
*/

.wrapper {
max-width: -webkit-calc(800px - (#{$horizontal-spacing-unit} * 2));
max-width: calc(800px - (#{$horizontal-spacing-unit} * 2));
margin-right: auto;
margin-left: auto;
padding-right: $horizontal-spacing-unit;
padding-left: $horizontal-spacing-unit;
@extend %clearfix;

@include media-query($on-laptop) {
max-width: -webkit-calc(800px - (#{$horizontal-spacing-unit}));
max-width: calc(800px - (#{$horizontal-spacing-unit}));
padding-right: $spacing-unit / 2;
padding-left: $spacing-unit / 2;
}
}


/**
* Clearfix
*/
%clearfix {
&:before,
&:after {
content: "";
display: table;
clear: both;
}
}
277 changes: 277 additions & 0 deletions _sass/_layout.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,277 @@

/**
* Site header **********************************************************
*/
.site-header {
border-bottom: 1px solid $grey-color-light;
background-color: #fff;
opacity: 0.75;
position:fixed;
left:0px;
top:0px;
height:56px;
width:100%;
z-index: 50;
}

.site-title {
font-size: 20px;
line-height: $nav-height;
letter-spacing: -1px;
margin-bottom: 0;
&:hover {
text-decoration: none;
color: $theme-color;
}
}
.site-nav {
float: right;
line-height: $nav-height;
.page-link{
line-height: $base-line-height;
// Gaps between nav items, but not on the first one
&:not(:first-child) {
margin-left: 10px;
}
}
@include media-query($on-palm) {
position: fixed;
top: 0px;
right: 10px;
text-align: right;
&:hover .trigger {
display: block;
padding-bottom: 5px;
}
.page-link {
display: line;
}
}
}

.header-bar{
left: 0px;
top: 0px;
position: relative;
font-size: 20px;
display: block;
opacity: 0.75;
width: 100%;
text-align: center;
padding-top: 25px;
line-height: 3em;
z-index: 25;
h1{
color: $theme-color;
font-size:75px;
}
h2{
font-size:25px;
}
}

/**
* Site footer **********************************************************
*/
.site-footer {
border-top: 1px solid $grey-color-dark;
font-size: 10px;
background-color: $grey-color-dark;
padding: 2px;
color: #aaa;
position:fixed;
left:0px;
bottom:0px;
height:25px;
width:100%;
}
/**
* Pagination **********************************************************
*/
.pagination{
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;
}
}
/**
* Page content **********************************************************
*/
.page-content {
padding: 100px 0; /* VERTICAL PADDING FOR TITLE ON EVERY PAGE */
}
.page-heading {
font-size: 20px;
}
.post-list {
margin: 0px 0;
list-style: none;
> li {
margin-bottom: $vertical-spacing-unit;
}
}
.contacticon {
font-size: 60px;
display:block;
margin: 10px;
}
.center{
text-align: center;
}
/**
* Posts **********************************************************
*/
.post-header {
margin-bottom: $vertical-spacing-unit;
}
.post-title {
font-size: 42px;
letter-spacing: -1px;
line-height: 1;
margin-bottom: 10px;
@include media-query($on-laptop) {
font-size: 36px;
}
}
.post-content {
h2 {
font-size: 42px;
@include media-query($on-laptop) {
font-size: 28px;
}
}
h3 {
font-size: 30px;
@include media-query($on-laptop) {
font-size: 22px;
}
}
h4 {
font-size: 20px;
@include media-query($on-laptop) {
font-size: 18px;
}
}
}
.post-meta {
font-size: $small-font-size;
color: $grey-color;
margin-bottom: 0px;
}
.post-link {
display: block;
font-size: 42px;
}

/** Poem formatting ********************************************/
.poem-title {
font-size: 24px;
letter-spacing: -1px;
line-height: 1;
@include media-query($on-laptop) {
font-size: 16px;
}
}


/**
* Portfolio grid **********************************************************
*/
// Nicolas Gallagher's micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.project {
width: 33.33%;
height: 250px;
float: left;
vertical-align: middle;
box-sizing: border-box;
padding: 10px;
}
.thumbnail{
width: 100%;
height: 230px;
overflow: hidden;
}
.thumbnail img{
width: 500px;
height: auto;
position: relative;
left: -25%;
top: -5%;
}
.thumbnail a{
float: left;
position: relative;
width: 100%;
height: 230px;
}
.thumbnail a span {
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.4);
color: $grey-color-light;
padding: 40px;
text-align: center;
}
.thumbnail a:hover span {
display: block;
}
/**
* Portfolio pages **********************************************************
*/
.blankbox{
background: $theme-color;
}
.img_row{
height: $img_height;
width: 100%;
overflow: hidden;
box-sizing:border-box;
padding: $img_spacing;
}
.col{
width: 100%;
height: 100%;
float: left;
object-fit: cover;
box-sizing:border-box;
padding: $img_spacing;
}
.right{
float: right;
}
.one {
width:33.33%;
}
.two {
width: 66.66%;
}
.three{
width: 100%;
}
.caption{
height: 100%;
color: $caption_color;
text-align: center;
vertical-align: middle;
font-size: $caption_font_size;
}
67 changes: 67 additions & 0 deletions _sass/_syntax-highlighting.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/**
* Syntax highlighting styles
*/
.highlight {
background: #fff;
@extend %vertical-rhythm;

.c { color: #998; font-style: italic } // Comment
.err { color: #a61717; background-color: #e3d2d2 } // Error
.k { font-weight: bold } // Keyword
.o { font-weight: bold } // Operator
.cm { color: #998; font-style: italic } // Comment.Multiline
.cp { color: #999; font-weight: bold } // Comment.Preproc
.c1 { color: #998; font-style: italic } // Comment.Single
.cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
.gd { color: #000; background-color: #fdd } // Generic.Deleted
.gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
.ge { font-style: italic } // Generic.Emph
.gr { color: #a00 } // Generic.Error
.gh { color: #999 } // Generic.Heading
.gi { color: #000; background-color: #dfd } // Generic.Inserted
.gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
.go { color: #888 } // Generic.Output
.gp { color: #555 } // Generic.Prompt
.gs { font-weight: bold } // Generic.Strong
.gu { color: #aaa } // Generic.Subheading
.gt { color: #a00 } // Generic.Traceback
.kc { font-weight: bold } // Keyword.Constant
.kd { font-weight: bold } // Keyword.Declaration
.kp { font-weight: bold } // Keyword.Pseudo
.kr { font-weight: bold } // Keyword.Reserved
.kt { color: #458; font-weight: bold } // Keyword.Type
.m { color: #099 } // Literal.Number
.s { color: #d14 } // Literal.String
.na { color: #008080 } // Name.Attribute
.nb { color: #0086B3 } // Name.Builtin
.nc { color: #458; font-weight: bold } // Name.Class
.no { color: #008080 } // Name.Constant
.ni { color: #800080 } // Name.Entity
.ne { color: #900; font-weight: bold } // Name.Exception
.nf { color: #900; font-weight: bold } // Name.Function
.nn { color: #555 } // Name.Namespace
.nt { color: #000080 } // Name.Tag
.nv { color: #008080 } // Name.Variable
.ow { font-weight: bold } // Operator.Word
.w { color: #bbb } // Text.Whitespace
.mf { color: #099 } // Literal.Number.Float
.mh { color: #099 } // Literal.Number.Hex
.mi { color: #099 } // Literal.Number.Integer
.mo { color: #099 } // Literal.Number.Oct
.sb { color: #d14 } // Literal.String.Backtick
.sc { color: #d14 } // Literal.String.Char
.sd { color: #d14 } // Literal.String.Doc
.s2 { color: #d14 } // Literal.String.Double
.se { color: #d14 } // Literal.String.Escape
.sh { color: #d14 } // Literal.String.Heredoc
.si { color: #d14 } // Literal.String.Interpol
.sx { color: #d14 } // Literal.String.Other
.sr { color: #009926 } // Literal.String.Regex
.s1 { color: #d14 } // Literal.String.Single
.ss { color: #990073 } // Literal.String.Symbol
.bp { color: #999 } // Name.Builtin.Pseudo
.vc { color: #008080 } // Name.Variable.Class
.vg { color: #008080 } // Name.Variable.Global
.vi { color: #008080 } // Name.Variable.Instance
.il { color: #099 } // Literal.Number.Integer.Long
}
24 changes: 24 additions & 0 deletions blog/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
layout: default
---

<div class="header-bar">
<h1>al-folio</h1>
<h2>simple whitespace theme for academics</h2>
<br/>
<hr>
<br/>
</div>


<ul class="post-list">
{% for post in paginator.posts %}
<li>
<h2><a class="post-title" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h2>
<p class="post-meta">{{ post.date | date: '%B %-d, %Y — %H:%M' }}</p>
<p>{{ post.description }}</p>
<br/>
<hr/>
</li>
{% endfor %}
</ul>
49 changes: 49 additions & 0 deletions css/main.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";



// Our variables
$base-font-family: Helvetica, Arial, sans-serif;
$base-font-size: 16px;
$small-font-size: $base-font-size * 0.875;
$base-line-height: 1.5;

$spacing-unit: 30px;

$text-color: #111;
$background-color: #fdfdfd;
$brand-color: #2a7ae2;

$grey-color: #828282;
$grey-color-light: lighten($grey-color, 40%);
$grey-color-dark: darken($grey-color, 25%);

$on-palm: 600px;
$on-laptop: 800px;



// Using media queries with like this:
// @include media-query($palm) {
// .wrapper {
// padding-right: $spacing-unit / 2;
// padding-left: $spacing-unit / 2;
// }
// }
@mixin media-query($device) {
@media screen and (max-width: $device) {
@content;
}
}



// Import partials from `sass_dir` (defaults to `_sass`)
@import
"base",
"layout",
"syntax-highlighting"
;
Binary file added img/1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/10.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/11.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/12.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/4.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/5.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/6.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/7.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/8.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/9.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/prof_pic.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1e8dff5

Please sign in to comment.