Basic modifications of the *folio theme
This commit is contained in:
Maruan Al-Shedivat
commit
1e8dff52bc
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
_site
|
||||
.sass-cache
|
||||
.DS_store
|
||||
41
README.md
Normal file
41
README.md
Normal file
@ -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
|
||||
1677
_bibliography/references.bib
Normal file
1677
_bibliography/references.bib
Normal file
File diff suppressed because it is too large
Load Diff
52
_config.yml
Normal file
52
_config.yml
Normal file
@ -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
_includes/footer.html
Normal file
7
_includes/footer.html
Normal file
@ -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
_includes/head.html
Normal file
13
_includes/head.html
Normal file
@ -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
_includes/header.html
Normal file
24
_includes/header.html
Normal file
@ -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
_layouts/default.html
Normal file
21
_layouts/default.html
Normal file
@ -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
_layouts/page.html
Normal file
15
_layouts/page.html
Normal file
@ -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
_layouts/post.html
Normal file
15
_layouts/post.html
Normal file
@ -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
_pages/about.md
Normal file
28
_pages/about.md
Normal file
@ -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
_pages/poetry.md
Normal file
15
_pages/poetry.md
Normal file
@ -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
_pages/projects.md
Normal file
47
_pages/projects.md
Normal file
@ -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
_pages/publications.md
Normal file
8
_pages/publications.md
Normal file
@ -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
_pages/teaching.md
Normal file
8
_pages/teaching.md
Normal file
@ -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
_plugins/ext.rb
Normal file
1
_plugins/ext.rb
Normal file
@ -0,0 +1 @@
|
||||
require 'jekyll/scholar'
|
||||
25
_poetry/2015-05-05-emperor.markdown
Normal file
25
_poetry/2015-05-05-emperor.markdown
Normal file
@ -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
_poetry/2015-07-06-soliloquy.markdown
Normal file
48
_poetry/2015-07-06-soliloquy.markdown
Normal file
@ -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
_poetry/2015-08-06-fantasy.markdown
Normal file
29
_poetry/2015-08-06-fantasy.markdown
Normal file
@ -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
_posts/2015-03-15-formatting-and-links.markdown
Normal file
28
_posts/2015-03-15-formatting-and-links.markdown
Normal file
@ -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
_posts/2015-05-15-images.markdown
Normal file
30
_posts/2015-05-15-images.markdown
Normal file
@ -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
_posts/2015-07-15-code.markdown
Normal file
35
_posts/2015-07-15-code.markdown
Normal file
@ -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
_projects/1_project.markdown
Normal file
55
_projects/1_project.markdown
Normal file
@ -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
_projects/2_project.markdown
Normal file
55
_projects/2_project.markdown
Normal file
@ -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
_projects/3_project.markdown
Normal file
56
_projects/3_project.markdown
Normal file
@ -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
_projects/4_project.markdown
Normal file
55
_projects/4_project.markdown
Normal file
@ -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
_projects/5_project.markdown
Normal file
55
_projects/5_project.markdown
Normal file
@ -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
_projects/6_project.markdown
Normal file
55
_projects/6_project.markdown
Normal file
@ -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
_sass/_base.scss
Normal file
225
_sass/_base.scss
Normal file
@ -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
_sass/_layout.scss
Normal file
277
_sass/_layout.scss
Normal file
@ -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
_sass/_syntax-highlighting.scss
Normal file
67
_sass/_syntax-highlighting.scss
Normal file
@ -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
blog/index.html
Normal file
24
blog/index.html
Normal file
@ -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
css/main.scss
Executable file
49
css/main.scss
Executable file
@ -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"
|
||||
;
|
||||
BIN
img/10.jpg
Normal file
BIN
img/10.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
img/11.jpg
Normal file
BIN
img/11.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
BIN
img/12.jpg
Normal file
BIN
img/12.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 270 KiB |
BIN
img/prof_pic.jpg
Normal file
BIN
img/prof_pic.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 MiB |
Loading…
Reference in New Issue
Block a user