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
|
||||
|
||||
|
|
|
|||
|
|
@ -21,13 +21,11 @@ Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptow
|
|||
|
||||
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>
|
||||
|
|
@ -44,7 +44,7 @@ You can also put regular text between your rows of images. Say you wanted to wri
|
|||
</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:
|
||||
|
|
|
|||
|
|
@ -44,9 +44,6 @@ You can also put regular text between your rows of images. Say you wanted to wri
|
|||
</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">
|
||||
|
|
|
|||
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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
border: 0;
|
||||
color: $link-hover-color;
|
||||
color: $text-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;
|
||||
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Correct issues with buttons
|
||||
button,
|
||||
.button {
|
||||
text-shadow: none;
|
||||
background-image: none;
|
||||
article a, .news a {
|
||||
color: $theme-color;
|
||||
font-weight: 100;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
.button:focus,
|
||||
.button:active {
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
background-image: none;
|
||||
.social a {
|
||||
color: $text-color;
|
||||
|
||||
&:hover { color: $theme-color; }
|
||||
}
|
||||
|
||||
.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;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.posts .post {
|
||||
margin-bottom: 0.75em;
|
||||
border-bottom: thin solid #f3f3f3;
|
||||
.post-title {
|
||||
font-size: 42px;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
// @include media-query($on-laptop) {
|
||||
// font-size: 36px;
|
||||
// }
|
||||
}
|
||||
|
||||
.posts .post:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: .375em;
|
||||
padding-bottom: 0;
|
||||
.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-link .post-title {
|
||||
margin-top: 0;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@ html {
|
|||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
body {
|
||||
color: $text-color;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
abbr {
|
||||
border-bottom: $abbr-border-bottom;
|
||||
cursor: help;
|
||||
|
|
@ -22,3 +27,11 @@ sup {
|
|||
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;
|
||||
|
|
@ -36,25 +37,26 @@ $viewport-large: 64em;
|
|||
|
||||
// Colors
|
||||
$red: #FF3636 !default;
|
||||
// $red: #f95020 !default;
|
||||
$red-1: #f95020 !default;
|
||||
$orange: #F29105 !default;
|
||||
// $orange: #ffcc22 !default;
|
||||
$orange-1: #ffcc22 !default;
|
||||
$blue: #2698BA !default;
|
||||
// $blue: #0076df !default;
|
||||
$blue-1: #0076df !default;
|
||||
$dark-blue: #00369f !default;
|
||||
$green: #00ab37 !default;
|
||||
// $green: #11D68B !default;
|
||||
// $green: #00cf26 !default;
|
||||
$green-1: #11D68B !default;
|
||||
$green-2: #00cf26 !default;
|
||||
$dark-green: #009f06 !default;
|
||||
$light-green: #ddffdd !default;
|
||||
$lime_green: #B7D12A !default;
|
||||
$purple: #B509AC !default;
|
||||
// $purple: #f92080 !default;
|
||||
$yellow: #efcc00 !default;
|
||||
$pink: #f92080 !default;
|
||||
$light-pink: #ffdddd !default;
|
||||
$yellow: #efcc00 !default;
|
||||
|
||||
$white: #fff !default;
|
||||
$dark-gray: #333 !default;
|
||||
$mid-gray: #777 !default;
|
||||
$mid-gray: #666 !default;
|
||||
$light-gray: #ccc !default;
|
||||
$lighter-gray: #eee !default;
|
||||
|
||||
|
|
@ -67,8 +69,9 @@ $darken-2: rgba(#000,.125) !default;
|
|||
$darken-3: rgba(#000,.25) !default;
|
||||
$darken-4: rgba(#000,.5) !default;
|
||||
|
||||
// Theme color
|
||||
$theme-color: $purple;
|
||||
$text-color: $mid-gray;
|
||||
$background-color: white;
|
||||
|
||||
// Links
|
||||
$link-color: $theme-color;
|
||||
|
|
@ -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