Second round of style cleaning
This commit is contained in:
Maruan Al-Shedivat
parent
86044fdbce
commit
dc6cb63fbe
@ -28,7 +28,7 @@ contact_note: >
|
||||
# Blog
|
||||
# -----------------------------------------------------------------------------
|
||||
blog_name: al-folio
|
||||
blog_description: simple whitespace theme for academics
|
||||
blog_description: a simple whitespace theme for academics
|
||||
|
||||
# Pagination
|
||||
paginate: 4
|
||||
@ -60,9 +60,6 @@ collections:
|
||||
projects:
|
||||
output: true
|
||||
permalink: /projects/:path/
|
||||
poetry:
|
||||
output: true
|
||||
permalink: /poetry/:path/
|
||||
|
||||
news_limit: 5
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -18,6 +18,6 @@ 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.
|
||||
|
||||
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>
|
||||
@ -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: post
|
||||
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>
|
||||
|
||||
@ -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: post
|
||||
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>
|
||||
|
||||
@ -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: post
|
||||
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>
|
||||
|
||||
@ -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: post
|
||||
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>
|
||||
|
||||
@ -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: post
|
||||
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>
|
||||
|
||||
@ -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: post
|
||||
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>
|
||||
|
||||
189
_sass/_base.scss
189
_sass/_base.scss
@ -1,12 +1,5 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6,
|
||||
p, blockquote, pre, hr,
|
||||
dl, dd, ol, ul, figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
@ -27,168 +20,6 @@ body {
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/************************************************************/
|
||||
|
||||
/**
|
||||
* Basic styling
|
||||
*/
|
||||
body {
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
line-height: $base-line-height;
|
||||
font-weight: 100;
|
||||
color: $text-color;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Set `margin-bottom` to maintain vertical rhythm
|
||||
*/
|
||||
p, blockquote, pre,
|
||||
ul, ol, dl, figure,
|
||||
%vertical-rhythm {
|
||||
margin-bottom: $vertical-spacing-unit / 2;
|
||||
}
|
||||
|
||||
.alignright {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
hr {
|
||||
/* Inset, by Dan Eden */
|
||||
border: 0;
|
||||
height: 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Figures
|
||||
*/
|
||||
figure > img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
|
||||
/**
|
||||
* Lists
|
||||
*/
|
||||
ul, ol {
|
||||
margin-left: $horizontal-spacing-unit;
|
||||
}
|
||||
|
||||
li {
|
||||
> ul,
|
||||
> ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Headings
|
||||
*/
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 100;
|
||||
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));
|
||||
@ -197,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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ code {
|
||||
}
|
||||
|
||||
code {
|
||||
color: #7a7a7a;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
pre {
|
||||
|
||||
42
_sass/_gallery.scss
Normal file
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;
|
||||
}
|
||||
@ -20,37 +20,36 @@
|
||||
float: right;
|
||||
line-height: $nav-height;
|
||||
.page-link{
|
||||
line-height: $base-line-height;
|
||||
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;
|
||||
}
|
||||
}
|
||||
// @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;
|
||||
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{
|
||||
|
||||
@ -1,327 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* 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: 19%; }
|
||||
.announcement { width: 81%; }
|
||||
|
||||
tr { text-align: left; }
|
||||
td {
|
||||
padding: 5px 0;
|
||||
vertical-align: top;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*****************************************************************************
|
||||
* Social
|
||||
*****************************************************************************/
|
||||
.social {
|
||||
border-top: 1px solid $grey-color-light;
|
||||
margin-top: 50px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
/*****************************************************************************
|
||||
* 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;
|
||||
// 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 $grey-color-light;
|
||||
color: $grey-color-light;
|
||||
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;
|
||||
}
|
||||
|
||||
/*****************************************************************************
|
||||
* 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;
|
||||
}
|
||||
@ -1,53 +1,79 @@
|
||||
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;
|
||||
color: $text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
article a, .news a {
|
||||
color: $theme-color;
|
||||
font-weight: 100;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Correct issues with buttons
|
||||
button,
|
||||
.button {
|
||||
text-shadow: none;
|
||||
background-image: none;
|
||||
.social a {
|
||||
color: $text-color;
|
||||
|
||||
&:hover { color: $theme-color; }
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
// 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;
|
||||
// }
|
||||
|
||||
14
_sass/_pages.scss
Normal file
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;
|
||||
}
|
||||
@ -26,7 +26,7 @@
|
||||
|
||||
.pagination a:hover, .pagination a:focus {
|
||||
background: white;
|
||||
color: #477dca;
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.pagination a:active {
|
||||
|
||||
@ -1,48 +1,52 @@
|
||||
|
||||
.posts {
|
||||
margin: 0;
|
||||
.post-header {
|
||||
margin-bottom: $vertical-spacing-unit;
|
||||
}
|
||||
.post-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
.posts .post {
|
||||
margin-bottom: 0.75em;
|
||||
border-bottom: thin solid #f3f3f3;
|
||||
> li {
|
||||
border-bottom: 1px solid $light-gray;
|
||||
padding-bottom: $space-3;
|
||||
padding-top: $space-3;
|
||||
}
|
||||
}
|
||||
|
||||
.posts .post:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: .375em;
|
||||
padding-bottom: 0;
|
||||
.post-title {
|
||||
font-size: 42px;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
// @include media-query($on-laptop) {
|
||||
// font-size: 36px;
|
||||
// }
|
||||
}
|
||||
|
||||
.post-link .post-title {
|
||||
margin-top: 0;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
.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-footer {
|
||||
@extend .italic;
|
||||
|
||||
margin-top: .75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post-footer .avatar {
|
||||
margin: 2rem 0;
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.meta,
|
||||
.post-meta {
|
||||
width: auto;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
padding: .25em 0;
|
||||
color: #7a7a7a;
|
||||
font-style: italic;
|
||||
color: $grey-color;
|
||||
font-size: $small-font-size;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.related-post-title {
|
||||
border-bottom: thin solid #f3f3f3;
|
||||
.post-link {
|
||||
display: block;
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
43
_sass/_profile.scss
Normal file
43
_sass/_profile.scss
Normal file
@ -0,0 +1,43 @@
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
41
_sass/_projects.scss
Normal file
41
_sass/_projects.scss
Normal file
@ -0,0 +1,41 @@
|
||||
.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;
|
||||
}
|
||||
88
_sass/_publications.scss
Normal file
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;
|
||||
}
|
||||
@ -7,7 +7,7 @@ table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 1.5;
|
||||
font-size: 1.125rem;
|
||||
// font-size: 1.125rem;
|
||||
// Cells
|
||||
> thead,
|
||||
> tbody,
|
||||
|
||||
@ -1,24 +1,37 @@
|
||||
html {
|
||||
font-size: $base-font-size;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
body {
|
||||
color: $text-color;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
abbr {
|
||||
border-bottom: $abbr-border-bottom;
|
||||
cursor: help;
|
||||
border-bottom: $abbr-border-bottom;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 0.707rem;
|
||||
font-size: 0.707rem;
|
||||
}
|
||||
|
||||
sup {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
top: -0.9ex;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
top: -0.9ex;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
div.equation {
|
||||
margin: $space-1 0;
|
||||
}
|
||||
|
||||
@ -2,9 +2,10 @@
|
||||
/******************************************************************************/
|
||||
|
||||
// Typography
|
||||
$base-font-size: 14px !default;
|
||||
$base-font-size: 16px !default;
|
||||
$small-font-size: 0.875rem !default;
|
||||
$bold-font-weight: bold !default;
|
||||
$font-family: 'Merriweather', 'PT Serif', Georgia, 'Times New Roman', serif !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;
|
||||
@ -35,44 +36,46 @@ $viewport-medium: 48em;
|
||||
$viewport-large: 64em;
|
||||
|
||||
// Colors
|
||||
$red: #FF3636 !default;
|
||||
// $red: #f95020 !default;
|
||||
$orange: #F29105 !default;
|
||||
// $orange: #ffcc22 !default;
|
||||
$blue: #2698BA !default;
|
||||
// $blue: #0076df !default;
|
||||
$dark-blue: #00369f !default;
|
||||
$green: #00ab37 !default;
|
||||
// $green: #11D68B !default;
|
||||
// $green: #00cf26 !default;
|
||||
$dark-green: #009f06 !default;
|
||||
$light-green: #ddffdd !default;
|
||||
$lime_green: #B7D12A !default;
|
||||
$purple: #B509AC !default;
|
||||
// $purple: #f92080 !default;
|
||||
$yellow: #efcc00 !default;
|
||||
$light-pink: #ffdddd !default;
|
||||
$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;
|
||||
|
||||
$dark-gray: #333 !default;
|
||||
$mid-gray: #777 !default;
|
||||
$light-gray: #ccc !default;
|
||||
$lighter-gray: #eee !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%);
|
||||
$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;
|
||||
$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
|
||||
$theme-color: $purple;
|
||||
$theme-color: $purple;
|
||||
$text-color: $mid-gray;
|
||||
$background-color: white;
|
||||
|
||||
// Links
|
||||
$link-color: $theme-color;
|
||||
$link-hover-color: darken($theme-color, 40%);
|
||||
$link-color: $theme-color;
|
||||
$link-hover-color: darken($theme-color, 40%);
|
||||
|
||||
// Breakpoints
|
||||
$breakpoint-md: '(min-width: 52em)';
|
||||
@ -84,6 +87,10 @@ $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;
|
||||
@ -141,52 +148,12 @@ $footer-bg-color: $grey-color-dark;
|
||||
$footer-font-weight: 300;
|
||||
$footer-font-size: .75rem;
|
||||
|
||||
// Spacing
|
||||
$spacing-unit: 30px;
|
||||
$on-palm: 600px;
|
||||
$on-laptop: 800px;
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
// Theme
|
||||
$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;
|
||||
|
||||
|
||||
$base-font-family: Helvetica, Arial, sans-serif;
|
||||
$base-font-size: 16px;
|
||||
$small-font-size: $base-font-size * 0.875;
|
||||
$base-line-height: 1.5;
|
||||
|
||||
$spacing-unit: 30px;
|
||||
|
||||
$background-color: #ffffff;
|
||||
$brand-color: #2a7ae2;
|
||||
|
||||
$on-palm: 600px;
|
||||
$on-laptop: 800px;
|
||||
$img-height: 275px;
|
||||
$caption-font-size: 12px;
|
||||
$caption-color: #aaa;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.button-blue {
|
||||
color: white;
|
||||
background-color: $blue;
|
||||
background-color: $theme-color;
|
||||
border-radius: $border-radius;
|
||||
transition-duration: .1s;
|
||||
transition-timing-function: ease-out;
|
||||
|
||||
@ -6,7 +6,7 @@ body {
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
color: $theme-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@ -3,36 +3,30 @@
|
||||
---
|
||||
@charset "utf-8";
|
||||
|
||||
// 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 'variables';
|
||||
|
||||
@import 'basscss';
|
||||
|
||||
@import 'base';
|
||||
@import 'header';
|
||||
@import 'layout';
|
||||
@import 'footer';
|
||||
@import 'pagination';
|
||||
@import 'posts';
|
||||
@import 'clearfix';
|
||||
@import 'positions';
|
||||
|
||||
@import 'header';
|
||||
@import 'footer';
|
||||
@import 'pages';
|
||||
@import 'posts';
|
||||
|
||||
@import 'projects';
|
||||
@import 'profile';
|
||||
@import 'pagination';
|
||||
@import 'publications';
|
||||
|
||||
@import 'blockquotes';
|
||||
@import 'clearfix';
|
||||
@import 'code';
|
||||
@import 'gallery';
|
||||
@import 'gists';
|
||||
// @import 'links';
|
||||
@import 'links';
|
||||
@import 'measure';
|
||||
@import 'media-queries';
|
||||
@import 'social-icons';
|
||||
|
||||
@ -5,9 +5,6 @@ layout: default
|
||||
<div class="header-bar">
|
||||
<h1>{{ site.blog_name }}</h1>
|
||||
<h2>{{ site.blog_description }}</h2>
|
||||
<br/>
|
||||
<hr>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -17,8 +14,6 @@ layout: default
|
||||
<h2><a class="post-title" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h2>
|
||||
<p class="post-meta">{{ post.date | date: '%B %-d, %Y — %H:%M' }}</p>
|
||||
<p>{{ post.description }}</p>
|
||||
<br/>
|
||||
<hr/>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user