Merge pull request #2 from alshedivat/dev

Theme upgrade
This commit is contained in:
Maruan 2017-05-27 13:49:05 -07:00 committed by GitHub
commit 5e6460fdd7
84 changed files with 2107 additions and 1023 deletions

View File

@ -1,6 +1,6 @@
The MIT License (MIT)
Copyright (c) 2016 Maruan Al-Shedivat.
Copyright (c) 2017 Maruan Al-Shedivat.
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in

View File

@ -1,17 +1,24 @@
# al-folio
[![demo](https://img.shields.io/badge/theme-demo-brightgreen.svg)](https://alshedivat.github.io/al-folio/)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/alshedivat/al-folio/blob/master/LICENSE)
A simple and clean [Jekyll](https://jekyllrb.com/) theme for academics.
**al-folio** is based on [\*folio theme](https://github.com/bogoli/-folio).
The original theme was published by [Lia Bogoev](http://liabogoev.com) and copyrighted under the MIT license.
[![Screenshot](assets/img/full-screenshot.png)](https://alshedivat.github.io/al-folio/)
Originally, **al-folio** was based on the [\*folio theme](https://github.com/bogoli/-folio) (published by [Lia Bogoev](http://liabogoev.com) and under the MIT license).
Since then, it got a full re-write of the styles and many additional cool features.
The emphasis is on whitespace, transparency, and academic usage: [theme demo](https://alshedivat.github.io/al-folio/).
## Getting started
For more about how to use Jekyll, check out [this tutorial](https://www.taniarascia.com/make-a-static-website-with-jekyll/).
Why Jekyll? Read this [blog post](https://karpathy.github.io/2014/07/01/switching-to-jekyll/)!
## Features
Emphasis on whitespace, transparency, and academic usage: [theme demo](https://alshedivat.github.io/al-folio/).
To learn more on how to use Jekyll, you can refer to, e.g., [this tutorial](https://www.taniarascia.com/make-a-static-website-with-jekyll/).
To know *why Jekyll*, you can read this [blog post](https://karpathy.github.io/2014/07/01/switching-to-jekyll/).
### Ergonomic Publications
#### Ergonomic Publications
Your publications page is generated automatically from your BibTex bibliography.
Simply edit `_bibliography/papers.bib`.
@ -19,30 +26,42 @@ You can also add new `*.bib` files and customize the look of your publications h
Keep meta-information about your co-authors in `_data/coauthors.yml` and Jekyll will insert links to their webpages automatically.
### Collections
#### Collections
This Jekyll theme implements collections to let you break up your work into categories.
The example is divided into news, poetry, and projects, but easily revamp this into apps, short stories, courses, or 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.
The example is divided into news and projects, but easily revamp this into apps, short stories, courses, or whatever your creative work is.
Three different layouts are included—the poetry layout, for a simple list of entries, the blog layout (`blog/index.html`), for more detailed descriptive list of entries, and the portfolio layout.
> To do this, edit the collections in the `_config.yml` file, create a corresponding folder, and create a landing page for your collection, similar to `_pages/projects.md`.
Two different layouts are included: the blog layout, for a list of detailed descriptive list of entries, and the projects layout.
The projects 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.
### Theming
#### Theming
Six beautiful theme colors have been selected to choose from.
The default is purple, but quickly change it by editing the `_sass/base.scss` file in line 40.
The color variable are listed there, as well.
The default is purple, but quickly change it by editing `$theme-color` variable in the `_sass/variables.scss` file (line 72).
Other color variables are listed there, as well.
### Photos
#### 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.
Easily create beautiful grids within your blog posts and projects pages:
### Code Highlighting
<p align="center">
<a href="https://alshedivat.github.io/al-folio/projects/1_project/">
<img src="assets/img/photos-screenshot.png" width="75%">
</a>
</p>
#### Code Highlighting
This theme implements Jekyll's built in code syntax highlighting with Pygments.
Just use a liquid tag to delineate your code:
{% highlight python %} code code code {% endhighlight %}
Just use the liquid tags `{% highlight python %}` and `{% endhighlight %}` to delineate your code:
<p align="center">
<a href="https://alshedivat.github.io/al-folio/blog/2015/code/">
<img src="assets/img/code-screenshot.png" width="75%">
</a>
</p>
## Contributing

View File

@ -1,16 +1,22 @@
# -----------------------------------------------------------------------------
# Site settings
# -----------------------------------------------------------------------------
name: Your Name
email: you@example.com
description: > # this means to ignore newlines until "url:"
A simple, whitespace theme for academics. Based on [*folio](https://github.com/bogoli/-folio) design.
footer_text: >
Powered by <a href="http://jekyllrb.com/" target="_blank">Jekyll</a> with <a href="https://github.com/alshedivat/al-folio">al-folio</a> theme.
Hosted by <a href="https://pages.github.com/" target="_blank">GitHub Pages</a>.
Photos from <a href="https://unsplash.com" target="_blank">Unsplash</a>.
url: # the base hostname & protocol for your site
baseurl: /al-folio # the subpath of your site, e.g. /blog/
last_updated: # leave blank if you don't want to display last updated
# Social
# -----------------------------------------------------------------------------
# Social integration
# -----------------------------------------------------------------------------
github_username: # put your github username
twitter_username: # put your twitter username
linkedin_username: # put your linkedin username
@ -18,17 +24,33 @@ scholar_authorid: # put your google scholar author id
contact_note: >
You can even add a little note about which of these is the best way to reach you.
# Footer text
footer_text: >
Powered by <a href="http://jekyllrb.com/" target="_blank">Jekyll</a> with <a href="https://github.com/alshedivat/al-folio">al-folio</a> theme.
Hosted by <a href="https://pages.github.com/" target="_blank">GitHub Pages</a>.
Photos from <a href="https://unsplash.com" target="_blank">Unsplash</a>.
# -----------------------------------------------------------------------------
# Blog
# -----------------------------------------------------------------------------
blog_name: al-folio
blog_description: simple whitespace theme for academics
blog_description: a simple whitespace theme for academics
# Pagination
paginate: 4
permalink: /blog/:year/:title/
paginate_path: /blog/page:num/
text:
pagination:
newer: 'Newer'
older: 'Older'
# Comments
disqus_shortname: al-folio # put your disqus shortname
# Optional features
show_social_icons: false
enable_anchorjs: false
enable_katex: true
# -----------------------------------------------------------------------------
# Collections
# -----------------------------------------------------------------------------
collections:
news:
defaults:
@ -38,9 +60,8 @@ collections:
projects:
output: true
permalink: /projects/:path/
poetry:
output: true
permalink: /poetry/:path/
news_limit: 5
# -----------------------------------------------------------------------------
# Jekyll settings
@ -50,11 +71,6 @@ collections:
markdown: kramdown
highlighter: pygments
# Pagination
paginate: 15
permalink: /blog/:year/:title/
paginate_path: /blog/page:num/
# Includes
include: ['_pages']
@ -89,8 +105,8 @@ scholar:
query: "@*"
# -----------------------------------------------------------------------------
# Other advanced settings (don't touch if you are not sure)
# Other settings
# -----------------------------------------------------------------------------
fontawesome_version: "4.6.3"
jquery_version: "1.12.4"
katex_version: "0.6.0"
katex_version: "0.7.1"
anchorjs_version: "3.2.2"

View File

@ -1,9 +1,11 @@
<footer class="site-footer">
<footer>
<div class="wrapper">
<p class="small">
© Copyright {{ site.time | date: '%Y' }} {{ site.name }}.
{{ site.footer_text }}</p>
&copy; Copyright {{ site.time | date: '%Y' }} {{ site.name }}.
{{ site.footer_text }}
{% if site.last_updated %}
Last updated: {{ site.last_updated }}.
{% endif %}
</div>
</footer>

View File

@ -6,6 +6,8 @@
<title>{{ site.name }}{% if page.title and page.url != "/" %} | {{ page.title }}{% endif %}</title>
<meta name="description" content="{{ site.description }}">
<link rel="shortcut icon" href="{{ '/assets/img/favicon.ico' | prepend: site.baseurl | prepend: site.url }}">
<link rel="stylesheet" href="{{ '/assets/css/main.css' | prepend: site.baseurl | prepend: site.url }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
</head>

View File

@ -2,6 +2,13 @@
<div class="wrapper">
{% if page.layout != "about" %}
<span class="site-title">
{% assign name = site.name | split: ' ' %}
<strong>{{ name | first }}</strong> {{ name | last }}
</span>
{% endif %}
<nav class="site-nav">
<div class="trigger">
@ -18,6 +25,9 @@
{% endif %}
{% endfor %}
<!-- CV link -->
<!-- <a class="page-link" href="{{ '/assets/pdf/CV.pdf' | prepend: site.baseurl | prepend: site.url }}">vitae</a> -->
</div>
</nav>

View File

@ -4,11 +4,33 @@
<!-- Load Common JS -->
<script src="{{ '/assets/js/common.js' | prepend: site.baseurl | prepend: site.url }}"></script>
{% if site.enable_katex %}
<!-- Load KaTeX -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex_version }}/katex.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex_version }}/katex.min.js"></script>
<script src="{{ '/assets/js/katex.js' | prepend: site.baseurl | prepend: site.url }}"></script>
{% endif %}
{% if site.enable_anchorjs %}
<!-- Load Anchor JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/anchor-js/{{ site.anchorjs_version }}/anchor.min.js"></script>
<script>
anchors.options.visible = 'always';
anchors.add('article h2, article h3, article h4, article h5, article h6');
</script>
{% endif %}
<!-- Include custom icon fonts -->
<link rel="stylesheet" href="{{ '/assets/css/font-awesome.min.css' | prepend: site.baseurl | prepend: site.url }}">
<link rel="stylesheet" href="{{ '/assets/css/academicons.min.css' | prepend: site.baseurl | prepend: site.url }}">
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview');
</script>

View File

@ -2,7 +2,8 @@
<h2>news</h2>
{% if site.news %}
<table>
{% for item in site.news reversed %}
{% assign news = site.news | reverse %}
{% for item in news limit: site.news_limit %}
<tr>
<td class="date">{{ item.date | date: "%b %-d, %Y" }}</td>
<td class="announcement">

23
_includes/pagination.html Normal file
View File

@ -0,0 +1,23 @@
{% if paginator.total_pages != 1 %}
<div class="pagination clearfix mb1 mt4">
<div class="left">
{% if paginator.previous_page %}
{% if paginator.page == 2 %}
<a class="pagination-item" href="{{ site.baseurl }}/blog/">{{ site.text.pagination.newer }}</a>
{% else %}
<a class="pagination-item" href="{{ paginator.previous_page_path | prepend: site.baseurl }}">{{ site.text.pagination.newer }}</a>
{% endif %}
{% else %}
<span class="pagination-item disabled">{{ site.text.pagination.newer }}</span>
{% endif %}
</div>
<div class="right">
{% if paginator.next_page %}
<a class="pagination-item" href="{{ paginator.next_page_path | prepend: site.baseurl }}">{{ site.text.pagination.older }}</a>
{% else %}
<span class="pagination-item disabled">{{ site.text.pagination.older }}</span>
{% endif %}
</div>
<div class="pagination-meta">Page {{ paginator.page }} of {{ paginator.total_pages }}</div>
</div>
{% endif %}

View File

@ -2,14 +2,18 @@
---
{% if entry.abbr %}
<abbr>[{{entry.abbr}}]</abbr>
{% if site.data.venues[entry.abbr] %}
<abbr>[<a href="{{site.data.venues[entry.abbr].url}}" target="_blank">{{entry.abbr}}</a>]</abbr>
{% else %}
<abbr>[{{entry.abbr}}]</abbr>
{% endif %}
{% endif %}
<div id="{{entry.key}}">
{% if entry.type == "thesis" %}
{{reference}}
{% else %}
<span class="title">{{entry.title}}.</span>
<span class="title">{{entry.title}}</span>
<span class="author">
{% for author in entry.author_array %}
{% unless forloop.last %}
@ -23,7 +27,7 @@
{% endif %}
{% endif %}
{% else %}
{% if entry.author_array.length > 1 %} and {% endif %}
and
{% if author.last == site.scholar.last_name %}
<em>{{author.last}}, {{author.first}}</em>
{% else %}
@ -37,7 +41,6 @@
{% endfor %}
</span>
{% if entry.type != "book" %}
<span class="periodical">
{% if entry.type == "article" %}
<em>{{entry.journal}}</em>
@ -48,24 +51,15 @@
{{entry.year}}
{% endif %}
</span>
{% endif %}
{% if entry.type == "book" %}
<span class="publisher">
{% if entry.publisher %}
<em>{{entry.publisher}}</em>
{% endif %}
{% if entry.year %}
{{entry.year}}
{% endif %}
</span>
{% endif %}
{% endif %}
<span class="links">
{% if entry.abstract %}
[<a class="abstract">Abs</a>]
{% endif %}
{% if entry.arxiv %}
[<a href="http://arxiv.org/abs/{{ entry.arxiv }}" target="_blank">arXiv</a>]
{% endif %}
{% if entry.html %}
[<a href="{{ entry.html }}" target="_blank">HTML</a>]
{% endif %}

View File

@ -12,4 +12,19 @@ layout: default
{{ content }}
</article>
{% if site.disqus_shortname and page.comments %}
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '{{ site.disqus_shortname }}';
var disqus_identifier = '{{ page.id }}';
var disqus_title = {{ page.title | jsonify }};
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
{% endif %}
</div>

View File

@ -13,21 +13,19 @@ Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptow
#### Hipster list
<ul>
<li>brunch</li>
<li>fixie</li>
<li>raybans</li>
<li>messenger bag</li>
<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>
> 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
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.

View File

@ -1,7 +1,7 @@
---
layout: about
permalink: /
title: your name
title: <strong>Your</strong> Name
description: <a href="">Affiliations</a>. Address. Contacts. Moto. Etc.
profile:
@ -16,8 +16,8 @@ news: true
social: true
---
Write your biography here. Tell the world about yourself. Link to your favorite [subreddit](http://reddit.com). You can put a picture in, too. The code is already in, just name your picture `prof_pic.jpg` and put it in the `img/` folder.
Write your biography here. Tell the world about yourself. Link to your favorite [subreddit](http://reddit.com){:target="\_blank"}. You can put a picture in, too. The code is already in, just name your picture `prof_pic.jpg` and put it in the `img/` folder.
Put your address / P.O. box / other info right below your picture. You can also disable any these elements by editing `profile` property of the YAML header of your `_pages/about.md`. Edit `_bibliography/papers.bib` and Jekyll will render your [publications page](/publications/) automatically.
Put your address / P.O. box / other info right below your picture. You can also disable any these elements by editing `profile` property of the YAML header of your `_pages/about.md`. Edit `_bibliography/papers.bib` and Jekyll will render your [publications page](/al-folio/publications/) automatically.
Link to your social media connections, too. This theme is set up to use [Font Awesome icons](http://fortawesome.github.io/Font-Awesome/){:target="\_blank"} and [Academicons](https://jpswalsh.github.io/academicons/){:target="\_blank"}, like the ones below. Add your Facebook, Twitter, LinkedIn, Google Scholar, or just disable all of them.

View File

@ -1,15 +0,0 @@
---
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" }}</p>
</li>
{% endfor %}
</ul>

View File

@ -1,25 +0,0 @@
---
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

View File

@ -1,48 +0,0 @@
---
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

View File

@ -1,29 +0,0 @@
---
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

View File

@ -8,21 +8,21 @@ Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptow
#### Hipster list
<ul>
<li>brunch</li>
<li>fixie</li>
<li>raybans</li>
<li>messenger bag</li>
<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
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.

View File

@ -7,24 +7,24 @@ 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="/assets/img/9.jpg">
<img class="col three" src="{{ site.baseurl }}/assets/img/9.jpg">
</div>
<div class="img_row">
<img class="col three" src="{{ site.baseurl }}/assets/img/9.jpg">
<img class="col three" src="{{ site.baseurl }}/assets/img/7.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.
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="/assets/img/8.jpg">
<img class="col one" src="/assets/img/10.jpg">
<img class="col two first" src="{{ site.baseurl }}/assets/img/8.jpg">
<img class="col one last" src="{{ site.baseurl }}/assets/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="/assets/img/11.jpg">
<img class="col one" src="/assets/img/12.jpg">
<img class="col one" src="/assets/img/7.jpg">
<img class="col one first" src="{{ site.baseurl }}/assets/img/11.jpg">
<img class="col one" src="{{ site.baseurl }}/assets/img/12.jpg">
<img class="col one last" src="{{ site.baseurl }}/assets/img/7.jpg">
</div>

View File

@ -16,20 +16,20 @@ Produces something like this:
int main(int argc, char const \*argv[])
{
string myString;
string myString;
cout << "input a string: ";
getline(cin, myString);
int length = myString.length();
cout << "input a string: ";
getline(cin, myString);
int length = myString.length();
char charArray = new char * [length];
char charArray = new char * [length];
charArray = myString;
for(int i = 0; i < length; ++i){
cout << charArray[i] << " ";
}
charArray = myString;
for(int i = 0; i < length; ++i){
cout << charArray[i] << " ";
}
return 0;
return 0;
}
{% endhighlight %}

View File

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

View File

@ -1,6 +1,6 @@
---
layout: post
title: Project
layout: page
title: Project 2
description: a project with a background image
img: /assets/img/2.jpg
---
@ -9,38 +9,38 @@ Every project has a beautiful feature shocase page. It's easy to include images,
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: /assets/img/12.jpg
---
---
layout: page
title: Project
description: a project with a background image
img: /assets/img/12.jpg
---
<div class="img_row">
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
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 }}/assets/img/5.jpg" alt="" title="example image"/>
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
This image can also have a caption. It's like magic.
This image can also have a caption. It's like magic.
</div>
You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images.
<div class="img_row">
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these.
You can also have artistically styled 2/3 + 1/3 images, like these.
</div>
@ -49,7 +49,7 @@ You can also put regular text between your rows of images. Say you wanted to wri
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>
<div class="img_row">
<img class="col two" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/>
</div>

View File

@ -1,6 +1,6 @@
---
layout: post
title: Project
layout: page
title: Project 3
description: a project that redirects to another website
img:
redirect: https://unsplash.com
@ -10,38 +10,38 @@ Every project has a beautiful feature shocase page. It's easy to include images,
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: /assets/img/12.jpg
---
---
layout: page
title: Project
description: a project with a background image
img: /assets/img/12.jpg
---
<div class="img_row">
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
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 }}/assets/img/5.jpg" alt="" title="example image"/>
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
This image can also have a caption. It's like magic.
This image can also have a caption. It's like magic.
</div>
You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images.
<div class="img_row">
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these.
You can also have artistically styled 2/3 + 1/3 images, like these.
</div>
@ -50,7 +50,7 @@ You can also put regular text between your rows of images. Say you wanted to wri
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>
<div class="img_row">
<img class="col two" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/>
</div>

View File

@ -1,6 +1,6 @@
---
layout: post
title: Project
layout: page
title: Project 4
description: another without an image
img:
---
@ -9,38 +9,38 @@ Every project has a beautiful feature shocase page. It's easy to include images,
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: /assets/img/12.jpg
---
---
layout: page
title: Project
description: a project with a background image
img: /assets/img/12.jpg
---
<div class="img_row">
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
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 }}/assets/img/5.jpg" alt="" title="example image"/>
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
This image can also have a caption. It's like magic.
This image can also have a caption. It's like magic.
</div>
You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images.
<div class="img_row">
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these.
You can also have artistically styled 2/3 + 1/3 images, like these.
</div>
@ -49,7 +49,7 @@ You can also put regular text between your rows of images. Say you wanted to wri
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>
<div class="img_row">
<img class="col two" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/>
</div>

View File

@ -1,6 +1,6 @@
---
layout: post
title: Project
layout: page
title: Project 5
description: a project with a background image
img: /assets/img/1.jpg
---
@ -9,38 +9,38 @@ Every project has a beautiful feature shocase page. It's easy to include images,
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: /assets/img/12.jpg
---
---
layout: page
title: Project
description: a project with a background image
img: /assets/img/12.jpg
---
<div class="img_row">
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
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 }}/assets/img/5.jpg" alt="" title="example image"/>
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
This image can also have a caption. It's like magic.
This image can also have a caption. It's like magic.
</div>
You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images.
<div class="img_row">
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these.
You can also have artistically styled 2/3 + 1/3 images, like these.
</div>
@ -49,7 +49,7 @@ You can also put regular text between your rows of images. Say you wanted to wri
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>
<div class="img_row">
<img class="col two" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/>
</div>

View File

@ -1,6 +1,6 @@
---
layout: post
title: Project
layout: page
title: Project 6
description: a project with no image
img:
---
@ -9,47 +9,44 @@ Every project has a beautiful feature shocase page. It's easy to include images,
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: /assets/img/12.jpg
---
---
layout: page
title: Project
description: a project with a background image
img: /assets/img/12.jpg
---
<div class="img_row">
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
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 }}/assets/img/5.jpg" alt="" title="example image"/>
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
This image can also have a caption. It's like magic.
This image can also have a caption. It's like magic.
</div>
You can also put regular text between your rows of images. Say you wanted to write a little bit about your project before you posted the rest of the images. You describe how you toiled, sweated, *bled* for your project, and then.... you reveal it's glory in the next row of images.
<div class="img_row">
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
</div>
<div class="col three caption">
You can also have artistically styled 2/3 + 1/3 images, like these.
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>
<div class="img_row">
<img class="col two" src="/img/6.jpg"/>
<img class="col one" src="/img/11.jpg"/>
</div>

View File

@ -1,208 +1,25 @@
/**
* Reset some basic elements
*/
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
margin: 0;
padding: 0;
@charset "UTF-8";
html, body {
height: auto;
min-height: 100%;
}
img {
max-width: none;
}
em img {
max-width: 100%;
margin-left: 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: $purple;
/************************************************************/
/**
* 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%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/**
* 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;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
height: 0;
margin: 20px 0;
}
/**
* 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;
margin-bottom: $vertical-spacing-unit / 2;
}
/**
* Links
*/
a {
color: $text-color;
text-decoration: none;
/*
&:visited {
color: darken($brand-color, 15%);
}
*/
&:hover {
color: $theme-color;
text-decoration: none;
}
}
article a, .news a {
color: $theme-color;
font-weight: 100;
&:hover {
text-decoration: underline;
}
}
.social a {
color: $text-color;
&:hover { color: $theme-color; }
}
/**
* 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;
}
}
/**
* Equations
*/
div.equation {
margin: 20px 0;
}
/**
* Wrapper
*/
.wrapper {
max-width: -webkit-calc(800px - (#{$horizontal-spacing-unit} * 2));
max-width: calc(800px - (#{$horizontal-spacing-unit} * 2));
@ -211,24 +28,4 @@ div.equation {
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;
}
}

25
_sass/_basscss.scss Normal file
View File

@ -0,0 +1,25 @@
/*!
BASSCSS
Next-level CSS toolkit - basscss.com
Made with love by Jxnblk - ©2014 Brent Jackson
MIT License http://opensource.org/licenses/MIT
*/
@import 'basscss/base-buttons';
@import 'basscss/base-forms';
@import 'basscss/base-reset';
@import 'basscss/base-typography';
@import 'basscss/buttons-blue';
@import 'basscss/syntax-highlighting';
@import 'basscss/color-base';
@import 'basscss/colors';
@import 'basscss/utility-headings';
@import 'basscss/utility-typography';
@import 'basscss/utility-white-space';

16
_sass/_blockquotes.scss Normal file
View File

@ -0,0 +1,16 @@
blockquote {
border-left: 5px solid #7a7a7a;
font-style: italic;
margin-left: $space-1;
padding: $space-1;
}
blockquote footer {
background-color: #fff;
border-color: transparent;
color: #7a7a7a;
font-size: .85rem;
font-style: normal;
text-align: left;
padding: 0;
}

8
_sass/_clearfix.scss Normal file
View File

@ -0,0 +1,8 @@
.clearfix:before, .clearfix:after {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
}

75
_sass/_code.scss Normal file
View File

@ -0,0 +1,75 @@
pre,
pre code {
background-color: transparent;
border-radius: $pre-border-radius;
}
pre,
code {
font-family: $monospace-font-family;
}
code {
color: $code-color;
font-size: 85%;
padding-bottom: 0.1em;
padding-left: 0.2em;
padding-right: 0.2em;
padding-top: 0.1em;
}
pre {
padding: 1.125em;
line-height: 1.11;
overflow-x: scroll;
margin-bottom: 0.88em;
background-color: $pre-background-color;
}
.highlight .p {
font-size: 1.125rem;
line-height: 1;
}
pre {
counter-reset: line-numbering;
white-space: pre;
overflow-x: auto;
word-break: inherit;
word-wrap: inherit;
}
pre a {
background-image: none;
}
pre a::before {
content: counter(line-numbering);
counter-increment: line-numbering;
padding-right: 1em; /* space after numbers */
width: 25px;
text-align: right;
opacity: 0.7;
display: inline-block;
color: $light-gray;
margin-right: 16px;
font-size: 13px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
pre a:first-of-type::before {
padding-top: 10px;
}
pre a:last-of-type::before {
padding-bottom: 10px;
}
pre a:only-of-type::before {
padding: 10px;
}

35
_sass/_footer.scss Normal file
View File

@ -0,0 +1,35 @@
.site {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
.site-wrap {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
footer {
background-color: $grey-color-dark;
border-top: $footer-border-top;
color: $footer-color;
font-size: $footer-font-size;
font-weight: $footer-font-weight;
padding: $footer-padding;
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
a { color: #fff; }
a:hover { color: $theme-color; }
}

42
_sass/_gallery.scss Normal file
View File

@ -0,0 +1,42 @@
figure > img {
display: block;
}
figcaption {
font-size: $small-font-size;
}
.blankbox {
background: $theme-color;
}
.img_row {
height: $img-height;
width: 100%;
overflow: hidden;
box-sizing:border-box;
}
.col {
width: 100%;
height: 100%;
float: left;
object-fit: cover;
box-sizing:border-box;
padding: $img-spacing;
}
.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;
}

8
_sass/_gists.scss Normal file
View File

@ -0,0 +1,8 @@
.gist,
.gist .highlight .p {
font-size: .75rem;
}
.gist .lines {
width: 100%;
}

61
_sass/_header.scss Normal file
View File

@ -0,0 +1,61 @@
.site-header {
border-bottom: 1px solid $grey-color-light;
background-color: #fff;
opacity: 0.95;
position:fixed;
left:0px;
top:0px;
width:100%;
z-index: 50;
}
.site-title {
font-size: 20px;
line-height: $nav-height;
letter-spacing: -1px;
margin-bottom: 0;
}
.site-nav {
float: right;
line-height: $nav-height;
.page-link{
line-height: $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{
border-bottom: 1px solid $light-gray;
font-size: 20px;
display: block;
opacity: 0.75;
width: 100%;
text-align: center;
padding-top: 25px;
padding-bottom: $space-4;
line-height: 3em;
z-index: 25;
h1{
color: $theme-color;
font-size:75px;
}
h2{
font-size:25px;
}
}

View File

@ -1,408 +0,0 @@
/*****************************************************************************
* 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;
}
}
/*****************************************************************************
* Profile
*****************************************************************************/
.profile {
.left { margin-right: 10px };
.right { margin-left: 10px };
img {
box-shadow: 0 0 5px $grey-color;
width: 100%;
}
}
.address {
font-family: monospace;
p { margin: 0; }
}
/*****************************************************************************
* News
*****************************************************************************/
.news {
border-top: 1px solid $grey-color-light;
margin-top: 30px;
padding-top: 20px;
h2 { margin-bottom: 10px; }
table {
border-collapse: collapse;
width: 100%;
.date { width: 20%; }
.announcement { width: 80%; }
tr { text-align: left; }
td { padding: 5px 0;}
}
}
/*****************************************************************************
* Social
*****************************************************************************/
.social {
border-top: 1px solid $grey-color-light;
margin-top: 50px;
padding-top: 20px;
}
/*****************************************************************************
* Footer
*****************************************************************************/
.site-footer {
border-top: 1px solid $grey-color-dark;
background-color: $grey-color-dark;
color: #aaa;
font-size: 72%;
padding: 2px;
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
p { margin-bottom: 0; }
a { color: #fff; }
a:hover { color: $theme-color; }
}
/*****************************************************************************
* 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 {
display: block;
font-size: 60px;
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 {
color: $grey-color;
font-size: $small-font-size;
margin-bottom: 0px;
}
.post-link {
display: block;
font-size: 42px;
}
/*****************************************************************************
* Publications
*****************************************************************************/
.publications {
h2 {
color: $theme-color;
font-size: 32px;
margin: 40px 0;
text-align: center;
}
}
.year {
border-bottom: 1px solid $grey-color-light;
color: $grey-color-light;
margin: 0 -2.5em 40px -2em;
padding-bottom: 5px;
text-align: right;
}
.bibliography {
margin-bottom: 20px;
margin-top: 20px;
list-style-type: circle;
li {
margin: 10px 0;
position: relative;
span { display: block; }
.title { font-weight: bolder; }
.author {
a {
border-bottom: 1px dashed $theme-color;
&:hover {
border-bottom-style: solid;
text-decoration: none;
}
}
> em { border-bottom: 1px solid; }
}
a.abstract, a.bibtex { cursor: pointer; }
.hidden {
font-size: $small-font-size;
max-height: 0px;
overflow: hidden;
text-align: justify;
-webkit-transition: 0.15s ease;
-moz-transition: 0.15s ease;
-ms-transition: 0.15s ease;
-o-transition: 0.15s ease;
transition: all 0.15s ease;
p {
line-height: 1.4em;
margin: 10px;
}
pre {
font-size: 1em;
line-height: 1.4em;
padding: 10px;
}
}
.hidden.open {
max-height: 100em;
-webkit-transition: 0.15s ease;
-moz-transition: 0.15s ease;
-ms-transition: 0.15s ease;
-o-transition: 0.15s ease;
transition: all 0.15s ease;
}
span.abstract.hidden {
border: dashed 1px $background-color;
}
span.abstract.hidden.open {
border-color: $grey-color;
}
}
abbr {
position: absolute;
left: -7em;
}
}
.star {
color: $theme-color;
font-style: normal;
}
/*****************************************************************************
* Projects
*****************************************************************************/
.project {
box-sizing: border-box;
float: left;
height: 250px;
padding: 10px;
vertical-align: middle;
width: 33.33%;
}
.thumbnail {
overflow: hidden;
height: 230px;
width: 100%;
}
.thumbnail img{
height: auto;
position: relative;
left: -25%;
top: -5%;
width: 500px;
}
.thumbnail a{
float: left;
height: 230px;
position: relative;
width: 100%;
}
.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;
}
/** Poem formatting ********************************************/
.poem-title {
font-size: 24px;
letter-spacing: -1px;
line-height: 1;
@include media-query($on-laptop) {
font-size: 16px;
}
}
/**
* 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;
}

79
_sass/_links.scss Normal file
View File

@ -0,0 +1,79 @@
a {
color: $text-color;
text-decoration: none;
&:hover {
color: $theme-color;
text-decoration: none;
}
}
article a, .news a {
color: $theme-color;
font-weight: 100;
&:hover {
text-decoration: underline;
}
}
.social a {
color: $text-color;
&:hover { color: $theme-color; }
}
// a {
// color: $link-color;
// background-image: linear-gradient(to top,
// rgba(0,0,0,0) 13%,
// rgba($link-color,.8) 13%,
// rgba($link-color,.8) 18%,
// rgba(0,0,0,0) 17%
// );
// text-shadow: white 1px 0px 0px, white -1px 0px 0px;
// }
//
// a:hover,
// a:focus,
// a:active {
// border: 0;
// color: $link-hover-color;
// text-decoration: none;
// background-image: linear-gradient(to top,
// rgba(0,0,0,0) 13%,
// rgba($link-hover-color,.8) 13%,
// rgba($link-hover-color,.8) 17%,
// rgba(0,0,0,0) 17%
// );
// text-shadow: white 1px 0px 0px, white -1px 0px 0px;
// }
//
// // Correct issues with buttons
// button,
// .button {
// text-shadow: none;
// background-image: none;
// }
//
// .button:hover,
// .button:focus,
// .button:active {
// color: white;
// text-shadow: none;
// background-image: none;
// }
//
// .anchorjs-link {
// text-shadow: none;
// background-image: none;
// }
// .anchorjs-link:hover,
// .anchorjs-link:focus,
// .anchorjs-link:active{
// border: 0;
// color: $link-hover-color;
// text-shadow: none;
// background-image: none;
// }

4
_sass/_measure.scss Normal file
View File

@ -0,0 +1,4 @@
.measure {
margin: 0 auto;
max-width: $measure-width;
}

63
_sass/_media-queries.scss Normal file
View File

@ -0,0 +1,63 @@
@media screen and (min-width: $viewport-small) {
html {
font-size: 16px;
}
h1,
.h1 {
font-size: $h1;
}
.site-header {
text-align: left;
}
.site-nav {
margin-top: 0;
}
.site-header a {
font-size: $h4;
}
.site-header .site-title {
font-size: $h3;
float: left;
}
.site-header .site-nav {
float: right;
}
blockquote {
margin-left: $space-3;
padding: $space-3;
}
.social-icons-left {
text-align: left;
}
.social-icons-right {
text-align: right;
}
}
@media screen and (min-width: $viewport-medium) {
html {
font-size: 18px;
}
}
@media screen and (min-width: $viewport-large) {
html {
font-size: 20px;
}
}
@media screen and (min-width: $viewport-large + 14) {
em img {
max-width: $measure-width + 14;
margin-left: -7em;
}
}

14
_sass/_pages.scss Normal file
View File

@ -0,0 +1,14 @@
.page-content {
padding: 100px 0; /* VERTICAL PADDING FOR TITLE ON EVERY PAGE */
}
.page-heading {
font-size: 20px;
}
.contacticon {
display: block;
font-size: 60px;
margin: 10px;
}
.center{
text-align: center;
}

52
_sass/_pagination.scss Normal file
View File

@ -0,0 +1,52 @@
.pagination {
font-size: 1rem;
font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif;
font-weight: 300;
text-align: center;
}
.pagination a, .pagination .disabled {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background: #fafafa;
border-radius: 0.1875em;
border: 1px solid #f3f3f3;
color: #333333;
padding: 1em 1.5em;
}
.pagination .disabled, .pagination .pagination-meta {
opacity: 0.5;
}
.pagination .pagination-meta {
overflow: hidden;
}
.pagination a:hover, .pagination a:focus {
background: white;
color: $theme-color;
}
.pagination a:active {
background: #f7f7f7;
}
.pagination .button {
font-size: 1rem;
font-weight: 300;
letter-spacing: 1px;
}
.button-disabled {
opacity: 0.55;
background-color: #999;
}
.button-disabled:hover,
.button-disabled:active,
.button-disabled:focus {
cursor: not-allowed;
background-color: #999;
}

7
_sass/_positions.scss Normal file
View File

@ -0,0 +1,7 @@
.left {
float: left;
}
.right {
float: right;
}

52
_sass/_posts.scss Normal file
View File

@ -0,0 +1,52 @@
.post-header {
margin-bottom: $vertical-spacing-unit;
}
.post-list {
margin: 0;
padding: 0;
list-style: none;
> li {
border-bottom: 1px solid $light-gray;
padding-bottom: $space-3;
padding-top: $space-3;
}
}
.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 {
color: $grey-color;
font-size: $small-font-size;
margin-bottom: 0px;
}
.post-link {
display: block;
font-size: 42px;
}

44
_sass/_profile.scss Normal file
View File

@ -0,0 +1,44 @@
.profile {
float: right !important;
img {
box-shadow: 0 0 5px $grey-color;
width: 100%;
}
}
.address {
font-family: monospace;
p { margin: 0; }
}
.news {
border-top: 1px solid $grey-color-light;
margin-top: 30px;
padding-top: 20px;
h2 {
font-weight: bold;
margin-top: 0;
margin-bottom: 10px;
}
table {
border-collapse: collapse;
width: 100%;
.date { width: 19%; }
.announcement { width: 81%; }
tr { text-align: left; }
td {
padding: 5px 0;
vertical-align: top;
border: none;
}
}
}
.social {
border-top: 1px solid $grey-color-light;
margin-top: 50px;
padding-top: 20px;
}

57
_sass/_projects.scss Normal file
View File

@ -0,0 +1,57 @@
.project {
box-sizing: border-box;
float: left;
height: 250px;
padding: 10px;
vertical-align: middle;
width: 33.33%;
.thumbnail {
overflow: hidden;
height: 200px;
width: 100%;
img {
height: auto;
position: relative;
left: -25%;
top: -5%;
width: 500px;
}
a {
float: left;
height: 230px;
position: relative;
width: 100%;
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;
h1 {
font-size: 1.5rem;
margin: 0;
}
p {
color: $grey-color-light;
}
}
&:hover {
span {
display: block;
}
}
}
}
}

88
_sass/_publications.scss Normal file
View File

@ -0,0 +1,88 @@
.publications {
h2 {
color: $theme-color;
// border-bottom: 1px solid $theme-color;
// border-top: 1px solid $theme-color;
font-size: 32px;
margin-bottom: 30px;
// padding: 20px 0;
text-align: center;
}
}
.year {
border-top: 1px solid $light-gray;
color: $light-gray;
margin: 0 -3em -2.5ex -2em;
padding-top: 1ex;
text-align: right;
}
.bibliography {
margin-bottom: 50px;
margin-top: 20px;
list-style-type: circle;
li {
margin: 10px 0;
position: relative;
span { display: block; }
.title { font-weight: bolder; }
.author {
a {
border-bottom: 1px dashed $theme-color;
&:hover {
border-bottom-style: solid;
text-decoration: none;
}
}
> em {
border-bottom: 1px solid;
font-style: normal;
}
}
a.abstract, a.bibtex { cursor: pointer; }
.hidden {
font-size: $small-font-size;
max-height: 0px;
overflow: hidden;
text-align: justify;
-webkit-transition: 0.15s ease;
-moz-transition: 0.15s ease;
-ms-transition: 0.15s ease;
-o-transition: 0.15s ease;
transition: all 0.15s ease;
p {
line-height: 1.4em;
margin: 10px;
}
pre {
font-size: 1em;
line-height: 1.4em;
padding: 10px;
}
}
.hidden.open {
max-height: 100em;
-webkit-transition: 0.15s ease;
-moz-transition: 0.15s ease;
-ms-transition: 0.15s ease;
-o-transition: 0.15s ease;
transition: all 0.15s ease;
}
span.abstract.hidden {
border: dashed 1px $background-color;
}
span.abstract.hidden.open {
border-color: $grey-color;
}
}
abbr {
position: absolute;
left: -7em;
}
}
.star {
color: $theme-color;
font-style: normal;
}

25
_sass/_social-icons.scss Normal file
View File

@ -0,0 +1,25 @@
.social-icons-left, .social-icons-right {
text-align: center;
float: none;
}
.social-icons {
font-size: 1.25rem;
padding: 0.5em 0 0 0;
width: 100%;
}
.social-icons a.fa {
cursor: pointer;
opacity: 0.8;
padding: 0.2em;
}
.social-icons a.fa:hover {
opacity: 1;
}
.social-icons iframe[title=Flattr] {
position: relative;
top: 0.1em;
}

45
_sass/_tables.scss Normal file
View File

@ -0,0 +1,45 @@
/*
Table styles copied from Bootstrap
Copyright (c) 2013 Twitter, Inc
*/
table {
width: 100%;
max-width: 100%;
margin-bottom: 1.5;
// font-size: 1.125rem;
// Cells
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
padding: 12px;
line-height: 1.2;
vertical-align: top;
border-top: 1px solid #333;
}
}
}
// Bottom align for column headings
> thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #333;
}
// Remove top border from thead by default
> caption + thead,
> colgroup + thead,
> thead:first-child {
> tr:first-child {
> th,
> td {
border-top: 0;
}
}
}
// Account for multiple tbody instances
> tbody + tbody {
border-top: 2px solid #333;
}
}

37
_sass/_typography.scss Normal file
View File

@ -0,0 +1,37 @@
html {
font-size: $base-font-size;
}
body {
color: $text-color;
font-weight: 100;
}
abbr {
border-bottom: $abbr-border-bottom;
cursor: help;
}
p {
color: #333;
line-height: 1.5;
}
small,
.small {
font-size: 0.707rem;
}
sup {
position: relative;
vertical-align: middle;
top: -0.9ex;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 100;
}
div.equation {
margin: $space-1 0;
}

160
_sass/_variables.scss Normal file
View File

@ -0,0 +1,160 @@
/******************************************************************************/
// Typography
$base-font-size: 16px !default;
$small-font-size: 0.875rem !default;
$bold-font-weight: bold !default;
$font-family: Helvetica, Arial, sans-serif !default;
$line-height: 1.5 !default;
$heading-font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif !default;
$heading-font-weight: 900 !default;
$heading-line-height: 1.25 !default;
$monospace-font-family: 'Source Code Pro', Consolas, monospace !default;
$h1: 2.998rem !default;
$h2: 1.5rem !default;
$h3: 1.25rem !default;
$h4: 1rem !default;
$h5: .875rem !default;
$h6: .75rem !default;
$h00: 4rem !default;
$h0: 3rem !default;
$h00-responsive: 8vw !default;
$h0-responsive: 6vw !default;
$h1-responsive: 4vw !default;
$h00-responsive-max: 7.68rem !default;
$h0-responsive-max: 5.76rem !default;
$h1-responsive-max: 3.84rem !default;
$abbr-border-bottom: 1px black dotted;
// Page width
$measure-width: 42rem !default;
// Viewport widths
$viewport-small: 32em;
$viewport-medium: 48em;
$viewport-large: 64em;
// Colors
$red: #FF3636 !default;
$red-1: #f95020 !default;
$orange: #F29105 !default;
$orange-1: #ffcc22 !default;
$blue: #2698BA !default;
$blue-1: #0076df !default;
$dark-blue: #00369f !default;
$green: #00ab37 !default;
$green-1: #11D68B !default;
$green-2: #00cf26 !default;
$dark-green: #009f06 !default;
$light-green: #ddffdd !default;
$lime_green: #B7D12A !default;
$purple: #B509AC !default;
$pink: #f92080 !default;
$light-pink: #ffdddd !default;
$yellow: #efcc00 !default;
$white: #fff !default;
$dark-gray: #333 !default;
$mid-gray: #666 !default;
$light-gray: #ccc !default;
$lighter-gray: #eee !default;
$grey-color: #828282;
$grey-color-light: lighten($grey-color, 40%);
$grey-color-dark: darken($grey-color, 25%);
$darken-1: rgba(#000,.0625) !default;
$darken-2: rgba(#000,.125) !default;
$darken-3: rgba(#000,.25) !default;
$darken-4: rgba(#000,.5) !default;
$theme-color: $purple;
$code-color: $dark-gray;
$text-color: $mid-gray;
$background-color: white;
// Links
$link-color: $theme-color;
$link-hover-color: darken($theme-color, 40%);
// Breakpoints
$breakpoint-md: '(min-width: 52em)';
$breakpoint-xl: '(min-width: 96em)';
// Whitespace
$space-1: .5rem !default;
$space-2: 1rem !default;
$space-3: 2rem !default;
$space-4: 4rem !default;
$horizontal-spacing-unit: 50px;
$vertical-spacing-unit: 40px;
$nav-height: 56px;
// Buttons
$button-font-size: inherit !default;
$button-font-weight: normal !default;
$button-line-height: 1.125rem !default;
$button-padding-y: .5rem !default;
$button-padding-x: 1rem !default;
$button-font-family: $heading-font-family;
// Forms
$form-field-font-size: 1rem !default;
$form-field-height: 2.25rem !default;
$form-field-padding-y: .5rem !default;
$form-field-padding-x: .5rem !default;
// Borders
$border-color: $light-gray !default;
$border-width: 1px !default;
$border-radius: 3px !default;
// Forms
$form-field-font-size: 1rem;
$form-field-height: 2.25rem;
$form-field-padding-y: .5rem;
$form-field-padding-x: .5rem;
// Code
$pre-border-radius: 0;
$pre-background-color: #fafafa;
$hljs-comment: $mid-gray;
$hljs-keyword: $dark-blue;
$hljs-name: $dark-gray;
$hljs-number: $dark-green;
$hljs-string: $red;
$hljs-title: $red;
$hljs-type: $dark-blue;
$hljs-tag: $dark-blue;
$hljs-attribute: $dark-green;
$hljs-regexp: $dark-green;
$hljs-symbol: $purple;
$hljs-built-in: $dark-blue;
$hljs-preprocessor: $mid-gray;
$hljs-deletion: $light-pink;
$hljs-addition: $light-green;
$hljs-change: $dark-blue;
$hljs-chunk: $light-gray;
// Header
$nav-height: 56px;
// Footer
$footer-border-top: thin solid $grey-color-dark;
$footer-padding: $space-1;
$footer-color: $light-gray;
$footer-bg-color: $grey-color-dark;
$footer-font-weight: 300;
$footer-font-size: .75rem;
/******************************************************************************/
/* portfolio tinkering */
$img_spacing: 5px;
$img-height: 275px;
$caption-font-size: 12px;
$caption-color: #aaa;

View File

@ -0,0 +1,28 @@
/* Basscss Base Buttons */
button,
.button {
font-family: $button-font-family;
font-size: $button-font-size;
font-weight: $button-font-weight;
text-decoration: none;
cursor: pointer;
display: inline-block;
box-sizing: border-box;
line-height: $button-line-height;
padding: $button-padding-y $button-padding-x;
margin: 0;
height: auto;
border: 1px solid transparent;
vertical-align: middle;
-webkit-appearance: none;
}
::-moz-focus-inner {
border: 0;
padding: 0;
}
.button:hover {
text-decoration: none;
}

View File

@ -0,0 +1,57 @@
/* Basscss Base Forms */
input,
select,
textarea,
fieldset {
font-size: $form-field-font-size;
margin-top: 0;
margin-bottom: $space-1;
}
input[type=text],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week] {
box-sizing: border-box;
height: $form-field-height;
padding: $form-field-padding-y $form-field-padding-x;
vertical-align: middle;
-webkit-appearance: none;
}
select {
box-sizing: border-box;
line-height: 1.75;
padding: $form-field-padding-y $form-field-padding-x;
}
select:not([multiple]) {
height: $form-field-height;
vertical-align: middle;
}
textarea {
box-sizing: border-box;
line-height: 1.75;
padding: $form-field-padding-y $form-field-padding-x;
}
.fieldset-reset {
padding: 0;
margin-left: 0;
margin-right: 0;
border: 0;
}
.fieldset-reset legend {
padding: 0;
}

View File

@ -0,0 +1,20 @@
body,
button {
margin: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
}
img {
max-width: 100%;
}
svg {
max-height: 100%;
}

View File

@ -0,0 +1,101 @@
/* Basscss Base Typography */
body {
font-family: $font-family;
line-height: $line-height;
font-size: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $heading-font-family;
font-weight: $heading-font-weight;
line-height: $heading-line-height;
margin-top: 1em;
margin-bottom: .5em;
}
p,
dl,
ol,
ul {
font-size: $h4;
margin-top: 0;
margin-bottom: $space-2;
}
ol,
ul {
padding-left: $space-3;
}
pre,
code,
samp {
font-family: $monospace-font-family;
font-size: inherit;
}
pre {
margin-top: 0;
margin-bottom: $space-2;
overflow-x: scroll;
}
hr {
margin-top: $space-3;
margin-bottom: $space-3;
}
blockquote {
margin-top: $space-3;
margin-bottom: $space-3;
margin-left: 0;
padding-left: $space-2;
padding-right: $space-2;
}
blockquote,
blockquote p {
font-size: $h3;
font-style: italic;
}
h1,
.h1 {
font-size: $h1;
}
h2,
.h2 {
font-size: $h2;
}
h3,
.h3 {
font-size: $h3;
}
h4,
.h4 {
font-size: $h4;
}
h5,
.h5 {
font-size: $h5;
}
h6,
.h6 {
font-size: $h6;
}
.list-reset {
list-style: none;
padding-left: 0;
}

View File

@ -0,0 +1,27 @@
.button-blue {
color: white;
background-color: $theme-color;
border-radius: $border-radius;
transition-duration: .1s;
transition-timing-function: ease-out;
transition-property: box-shadow, background-color;
}
.button-blue:hover {
opacity: .875;
}
.button-blue:active,
.button-blue.is-active {
box-shadow: inset 0 0 0 32px rgba(#000,.125), inset 0 2px 3px 0 rgba(#000,.25);
}
.button-blue:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(white, .5), 0 0 1px 4px rgba($blue, .5);
}
.button-blue:disabled,
.button-blue.is-disabled {
opacity: .5;
}

View File

@ -0,0 +1,28 @@
/* Basscss Color Base */
body {
color: $dark-gray;
background-color: white;
}
a {
color: $theme-color;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
pre,
code {
background-color: $lighter-gray;
border-radius: $border-radius;
}
hr {
border: 0;
border-bottom-style: solid;
border-bottom-width: $border-width;
border-bottom-color: $border-color;
}

View File

@ -0,0 +1,97 @@
/* Basscss Colors */
.dark-gray {
color: $dark-gray;
}
.white {
color: white;
}
.blue {
color: $blue;
}
.mid-gray {
color: $mid-gray;
}
.light-gray {
color: $light-gray;
}
.lighter-gray {
color: $lighter-gray;
}
.red {
color: $red;
}
.green {
color: $green;
}
.yellow {
color: $yellow;
}
.orange {
color: $orange;
}
.bg-dark-gray {
background-color: $dark-gray;
}
.bg-white {
background-color: white;
}
.bg-blue {
background-color: $blue;
}
.bg-mid-gray {
background-color: $mid-gray;
}
.bg-light-gray {
background-color: $light-gray;
}
.bg-lighter-gray {
background-color: $lighter-gray;
}
.bg-red {
background-color: $red;
}
.bg-green {
background-color: $green;
}
.bg-yellow {
background-color: $yellow;
}
.bg-orange {
background-color: $orange;
}
.bg-darken-1 {
background-color: $darken-1;
}
.bg-darken-2 {
background-color: $darken-2;
}
.bg-darken-3 {
background-color: $darken-3;
}
.bg-darken-4 {
background-color: $darken-4;
}

View File

@ -0,0 +1,119 @@
.highlight {
-webkit-text-size-adjust: none;
}
.highlight .c,
.highlight .cs,
.highlight .cm,
.highlight .cp,
.highlight .c1 {
color: $hljs-comment;
font-style: italic;
}
.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kr,
.highlight .kt,
.highlight .kp {
color: $hljs-keyword;
}
.highlight .na,
.highlight .nb,
.highlight .nc,
.highlight .no,
.highlight .nd,
.highlight .ni,
.highlight .ne,
.highlight .nf,
.highlight .nl,
.highlight .nn,
.highlight .nx {
color: $hljs-name;
}
.highlight .mi,
.highlight .il {
color: $hljs-number;
}
.highlight .s,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .s2,
.highlight .s3,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .sr,
.highlight .ss,
.highlight .s1 {
color: $hljs-string;
}
.hljs-title,
.hljs-id,
.scss .hljs-preprocessor {
color: $hljs-title;
font-weight: bold;
}
.highlight .k {
font-weight: normal;
}
.highlight .nc,
.highlight .no {
color: $hljs-type;
}
.highlight .o {
color: $hljs-tag;
font-weight: normal;
}
.highlight .nb {
color: $hljs-attribute;
}
.highlight .sr {
color: $hljs-regexp;
}
.highlight .ss {
color: $hljs-symbol;
}
.hljs-built_in {
color: $hljs-built-in;
}
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
color: $hljs-preprocessor;
font-weight: bold;
}
.hljs-deletion {
background: $hljs-deletion;
}
.hljs-addition {
background: $hljs-addition;
}
.diff .hljs-change {
background: $hljs-change;
}
.hljs-chunk {
color: $hljs-chunk;
}

View File

@ -0,0 +1,37 @@
/* Basscss Utility Headings */
.h00 {
font-size: $h00;
}
.h0 {
font-size: $h0;
}
@media #{$breakpoint-md} {
.h00-responsive {
font-size: $h00-responsive;
}
.h0-responsive {
font-size: $h0-responsive;
}
.h1-responsive {
font-size: $h1-responsive;
}
}
@media #{$breakpoint-xl} {
.h00-responsive {
font-size: $h00-responsive-max;
}
.h0-responsive {
font-size: $h0-responsive-max;
}
.h1-responsive {
font-size: $h1-responsive-max;
}
}

View File

@ -0,0 +1,38 @@
/* Basscss Utility Typography */
.bold {
font-weight: $bold-font-weight;
}
.regular {
font-weight: normal;
}
.italic {
font-style: italic;
}
.caps {
text-transform: uppercase;
letter-spacing: .2em;
}
.left-align {
text-align: left;
}
.center {
text-align: center;
}
.right-align {
text-align: right;
}
.justify {
text-align: justify;
}
.nowrap {
white-space: nowrap;
}

View File

@ -0,0 +1,182 @@
/* Basscss Utility White Space */
.m0 {
margin: 0;
}
.mt0 {
margin-top: 0;
}
.mr0 {
margin-right: 0;
}
.mb0 {
margin-bottom: 0;
}
.ml0 {
margin-left: 0;
}
.m1 {
margin: $space-1;
}
.mt1 {
margin-top: $space-1;
}
.mr1 {
margin-right: $space-1;
}
.mb1 {
margin-bottom: $space-1;
}
.ml1 {
margin-left: $space-1;
}
.m2 {
margin: $space-2;
}
.mt2 {
margin-top: $space-2;
}
.mr2 {
margin-right: $space-2;
}
.mb2 {
margin-bottom: $space-2;
}
.ml2 {
margin-left: $space-2;
}
.m3 {
margin: $space-3;
}
.mt3 {
margin-top: $space-3;
}
.mr3 {
margin-right: $space-3;
}
.mb3 {
margin-bottom: $space-3;
}
.ml3 {
margin-left: $space-3;
}
.m4 {
margin: $space-4;
}
.mt4 {
margin-top: $space-4;
}
.mr4 {
margin-right: $space-4;
}
.mb4 {
margin-bottom: $space-4;
}
.ml4 {
margin-left: $space-4;
}
.mxn1 {
margin-left: -$space-1;
margin-right: -$space-1;
}
.mxn2 {
margin-left: -$space-2;
margin-right: -$space-2;
}
.mxn3 {
margin-left: -$space-3;
margin-right: -$space-3;
}
.mxn4 {
margin-left: -$space-4;
margin-right: -$space-4;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.p1 {
padding: $space-1;
}
.py1 {
padding-top: $space-1;
padding-bottom: $space-1;
}
.px1 {
padding-left: $space-1;
padding-right: $space-1;
}
.p2 {
padding: $space-2;
}
.py2 {
padding-top: $space-2;
padding-bottom: $space-2;
}
.px2 {
padding-left: $space-2;
padding-right: $space-2;
}
.p3 {
padding: $space-3;
}
.py3 {
padding-top: $space-3;
padding-bottom: $space-3;
}
.px3 {
padding-left: $space-3;
padding-right: $space-3;
}
.p4 {
padding: $space-4;
}
.py4 {
padding-top: $space-4;
padding-bottom: $space-4;
}
.px4 {
padding-left: $space-4;
padding-right: $space-4;
}

0
assets/css/academicons.min.css vendored Executable file → Normal file
View File

0
assets/css/font-awesome.min.css vendored Executable file → Normal file
View File

61
assets/css/main.scss Executable file → Normal file
View File

@ -4,46 +4,31 @@
@charset "utf-8";
@import 'variables';
// 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;
@import 'basscss';
$spacing-unit: 30px;
@import 'base';
@import 'clearfix';
@import 'positions';
$text-color: #111;
$background-color: #fdfdfd;
$brand-color: #2a7ae2;
@import 'header';
@import 'footer';
@import 'pages';
@import 'posts';
$grey-color: #828282;
$grey-color-light: lighten($grey-color, 40%);
$grey-color-dark: darken($grey-color, 25%);
@import 'projects';
@import 'profile';
@import 'pagination';
@import 'publications';
$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"
;
@import 'blockquotes';
@import 'code';
@import 'gallery';
@import 'gists';
@import 'links';
@import 'measure';
@import 'media-queries';
@import 'social-icons';
@import 'tables';
@import 'typography';

0
assets/fonts/academicons.eot Executable file → Normal file
View File

0
assets/fonts/academicons.svg Executable file → Normal file
View File

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 110 KiB

0
assets/fonts/academicons.ttf Executable file → Normal file
View File

0
assets/fonts/academicons.woff Executable file → Normal file
View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 410 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 270 KiB

After

Width:  |  Height:  |  Size: 195 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.1 MiB

After

Width:  |  Height:  |  Size: 574 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 MiB

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 MiB

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 MiB

After

Width:  |  Height:  |  Size: 4.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.1 MiB

After

Width:  |  Height:  |  Size: 3.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 955 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 MiB

After

Width:  |  Height:  |  Size: 3.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 MiB

After

Width:  |  Height:  |  Size: 4.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 595 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

View File

@ -5,20 +5,17 @@ layout: default
<div class="header-bar">
<h1>{{ site.blog_name }}</h1>
<h2>{{ site.blog_description }}</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 %}
{% 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>
</li>
{% endfor %}
</ul>
{% include pagination.html %}