2
LICENSE
@ -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
|
||||
|
59
README.md
@ -1,17 +1,24 @@
|
||||
# al-folio
|
||||
|
||||
[](https://alshedivat.github.io/al-folio/)
|
||||
[](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.
|
||||
[](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
|
||||
|
||||
|
56
_config.yml
@ -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"
|
||||
|
@ -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>
|
||||
© Copyright {{ site.time | date: '%Y' }} {{ site.name }}.
|
||||
{{ site.footer_text }}
|
||||
{% if site.last_updated %}
|
||||
Last updated: {{ site.last_updated }}.
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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
@ -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 %}
|
@ -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 %}
|
||||
|
@ -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>
|
||||
|
@ -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.
|
||||
|
@ -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.
|
||||
|
@ -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>
|
@ -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
|
@ -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
|
@ -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
|
@ -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.
|
||||
|
@ -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>
|
||||
|
@ -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 %}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
233
_sass/_base.scss
@ -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
@ -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
@ -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
@ -0,0 +1,8 @@
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
75
_sass/_code.scss
Normal 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
@ -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
@ -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
@ -0,0 +1,8 @@
|
||||
.gist,
|
||||
.gist .highlight .p {
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.gist .lines {
|
||||
width: 100%;
|
||||
}
|
61
_sass/_header.scss
Normal 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;
|
||||
}
|
||||
}
|
@ -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
@ -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
@ -0,0 +1,4 @@
|
||||
.measure {
|
||||
margin: 0 auto;
|
||||
max-width: $measure-width;
|
||||
}
|
63
_sass/_media-queries.scss
Normal 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
@ -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
@ -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
@ -0,0 +1,7 @@
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
52
_sass/_posts.scss
Normal 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
@ -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
@ -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
@ -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
@ -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
@ -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
@ -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
@ -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;
|
28
_sass/basscss/_base-buttons.scss
Normal 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;
|
||||
}
|
57
_sass/basscss/_base-forms.scss
Normal 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;
|
||||
}
|
20
_sass/basscss/_base-reset.scss
Normal 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%;
|
||||
}
|
101
_sass/basscss/_base-typography.scss
Normal 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;
|
||||
}
|
27
_sass/basscss/_buttons-blue.scss
Normal 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;
|
||||
}
|
28
_sass/basscss/_color-base.scss
Normal 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;
|
||||
}
|
97
_sass/basscss/_colors.scss
Normal 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;
|
||||
}
|
119
_sass/basscss/_syntax-highlighting.scss
Normal 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;
|
||||
}
|
37
_sass/basscss/_utility-headings.scss
Normal 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;
|
||||
}
|
||||
}
|
38
_sass/basscss/_utility-typography.scss
Normal 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;
|
||||
}
|
182
_sass/basscss/_utility-white-space.scss
Normal 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
0
assets/css/font-awesome.min.css
vendored
Executable file → Normal file
61
assets/css/main.scss
Executable file → Normal 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
0
assets/fonts/academicons.svg
Executable file → Normal file
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 110 KiB |
0
assets/fonts/academicons.ttf
Executable file → Normal file
0
assets/fonts/academicons.woff
Executable file → Normal file
BIN
assets/img/1.jpg
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 410 KiB |
Before Width: | Height: | Size: 2.9 MiB After Width: | Height: | Size: 1.1 MiB |
Before Width: | Height: | Size: 2.7 MiB After Width: | Height: | Size: 1.3 MiB |
Before Width: | Height: | Size: 270 KiB After Width: | Height: | Size: 195 KiB |
BIN
assets/img/2.jpg
Before Width: | Height: | Size: 5.1 MiB After Width: | Height: | Size: 574 KiB |
BIN
assets/img/3.jpg
Before Width: | Height: | Size: 13 MiB After Width: | Height: | Size: 1.9 MiB |
BIN
assets/img/4.jpg
Before Width: | Height: | Size: 5.2 MiB After Width: | Height: | Size: 1.8 MiB |
BIN
assets/img/5.jpg
Before Width: | Height: | Size: 14 MiB After Width: | Height: | Size: 4.3 MiB |
BIN
assets/img/6.jpg
Before Width: | Height: | Size: 6.1 MiB After Width: | Height: | Size: 3.0 MiB |
BIN
assets/img/7.jpg
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 955 KiB |
BIN
assets/img/8.jpg
Before Width: | Height: | Size: 9.1 MiB After Width: | Height: | Size: 3.4 MiB |
BIN
assets/img/9.jpg
Before Width: | Height: | Size: 12 MiB After Width: | Height: | Size: 4.3 MiB |
BIN
assets/img/code-screenshot.png
Normal file
After Width: | Height: | Size: 47 KiB |
BIN
assets/img/full-screenshot.png
Normal file
After Width: | Height: | Size: 595 KiB |
BIN
assets/img/photos-screenshot.png
Normal file
After Width: | Height: | Size: 1.8 MiB |
@ -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 %}
|
||||
|