From dc6cb63fbe66a8e6a4defa68187e80ca26b9508a Mon Sep 17 00:00:00 2001 From: Maruan Al-Shedivat Date: Sun, 26 Feb 2017 14:57:28 -0500 Subject: [PATCH] Second round of style cleaning --- _config.yml | 5 +- _news/announcement_2.md | 18 +- _pages/about.md | 2 +- _pages/poetry.md | 15 -- _projects/1_project.markdown | 40 ++-- _projects/2_project.markdown | 38 ++-- _projects/3_project.markdown | 38 ++-- _projects/4_project.markdown | 38 ++-- _projects/5_project.markdown | 38 ++-- _projects/6_project.markdown | 41 ++-- _sass/_base.scss | 189 ------------------ _sass/_code.scss | 2 +- _sass/_gallery.scss | 42 ++++ _sass/_header.scss | 33 ++-- _sass/_layout.scss | 327 ------------------------------- _sass/_links.scss | 116 ++++++----- _sass/_pages.scss | 14 ++ _sass/_pagination.scss | 2 +- _sass/_posts.scss | 84 ++++---- _sass/_profile.scss | 43 ++++ _sass/_projects.scss | 41 ++++ _sass/_publications.scss | 88 +++++++++ _sass/_tables.scss | 2 +- _sass/_typography.scss | 31 ++- _sass/_variables.scss | 121 +++++------- _sass/basscss/_buttons-blue.scss | 2 +- _sass/basscss/_color-base.scss | 2 +- assets/css/main.scss | 32 ++- blog/index.html | 5 - 29 files changed, 568 insertions(+), 881 deletions(-) delete mode 100644 _pages/poetry.md create mode 100644 _sass/_gallery.scss delete mode 100644 _sass/_layout.scss create mode 100644 _sass/_pages.scss create mode 100644 _sass/_profile.scss create mode 100644 _sass/_projects.scss create mode 100644 _sass/_publications.scss diff --git a/_config.yml b/_config.yml index 03b67d2..fc3fb13 100644 --- a/_config.yml +++ b/_config.yml @@ -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 diff --git a/_news/announcement_2.md b/_news/announcement_2.md index 8d83f65..b086a49 100644 --- a/_news/announcement_2.md +++ b/_news/announcement_2.md @@ -13,21 +13,19 @@ Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptow #### Hipster list 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. -
-
+*** + 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. -
- We do not grow absolutely, chronologically. We grow sometimes in one dimension, and not in another, unevenly. We grow partially. We are relative. We are mature in one realm, childish in another. - —Anais Nin -
+> We do not grow absolutely, chronologically. We grow sometimes in one dimension, and not in another, unevenly. We grow partially. We are relative. We are mature in one realm, childish in another. +> —Anais Nin 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. diff --git a/_pages/about.md b/_pages/about.md index 6d171e2..e5aa936 100644 --- a/_pages/about.md +++ b/_pages/about.md @@ -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. diff --git a/_pages/poetry.md b/_pages/poetry.md deleted file mode 100644 index 1143bc0..0000000 --- a/_pages/poetry.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -layout: page -permalink: /poetry/ -title: poetry -description: Showcase your writing, short stories, or poems. Replace this text with your description. ---- - - diff --git a/_projects/1_project.markdown b/_projects/1_project.markdown index 8f9d73b..8864d09 100644 --- a/_projects/1_project.markdown +++ b/_projects/1_project.markdown @@ -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 + ---
- - - + + +
- 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.
- +
- This image can also have a caption. It's like magic. + This image can also have a caption. It's like magic.
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.
- - + +
- 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.
-


+

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: -
- - -
+
+ + +
diff --git a/_projects/2_project.markdown b/_projects/2_project.markdown index 97602a1..20acfe9 100644 --- a/_projects/2_project.markdown +++ b/_projects/2_project.markdown @@ -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 + ---
- - - + + +
- 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.
- +
- This image can also have a caption. It's like magic. + This image can also have a caption. It's like magic.
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.
- - + +
- 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.
@@ -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: -
- - -
+
+ + +
diff --git a/_projects/3_project.markdown b/_projects/3_project.markdown index 830e4ec..440510e 100644 --- a/_projects/3_project.markdown +++ b/_projects/3_project.markdown @@ -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 + ---
- - - + + +
- 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.
- +
- This image can also have a caption. It's like magic. + This image can also have a caption. It's like magic.
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.
- - + +
- 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.
@@ -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: -
- - -
+
+ + +
diff --git a/_projects/4_project.markdown b/_projects/4_project.markdown index fca6df6..cd56bfd 100644 --- a/_projects/4_project.markdown +++ b/_projects/4_project.markdown @@ -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 + ---
- - - + + +
- 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.
- +
- This image can also have a caption. It's like magic. + This image can also have a caption. It's like magic.
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.
- - + +
- 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.
@@ -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: -
- - -
+
+ + +
diff --git a/_projects/5_project.markdown b/_projects/5_project.markdown index d69ab66..5173c03 100644 --- a/_projects/5_project.markdown +++ b/_projects/5_project.markdown @@ -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 + ---
- - - + + +
- 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.
- +
- This image can also have a caption. It's like magic. + This image can also have a caption. It's like magic.
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.
- - + +
- 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.
@@ -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: -
- - -
+
+ + +
diff --git a/_projects/6_project.markdown b/_projects/6_project.markdown index 10c5e87..a4d6119 100644 --- a/_projects/6_project.markdown +++ b/_projects/6_project.markdown @@ -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 + ---
- - - + + +
- 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.
- +
- This image can also have a caption. It's like magic. + This image can also have a caption. It's like magic.
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.
- - + +
- 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.
-


- - 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: -
- - -
+
+ + +
diff --git a/_sass/_base.scss b/_sass/_base.scss index e84da7a..939d41d 100644 --- a/_sass/_base.scss +++ b/_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; - } } diff --git a/_sass/_code.scss b/_sass/_code.scss index b7b274b..f26c13d 100644 --- a/_sass/_code.scss +++ b/_sass/_code.scss @@ -10,7 +10,7 @@ code { } code { - color: #7a7a7a; + color: $text-color; } pre { diff --git a/_sass/_gallery.scss b/_sass/_gallery.scss new file mode 100644 index 0000000..54ac67a --- /dev/null +++ b/_sass/_gallery.scss @@ -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; +} diff --git a/_sass/_header.scss b/_sass/_header.scss index abc1abc..7462f92 100644 --- a/_sass/_header.scss +++ b/_sass/_header.scss @@ -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{ diff --git a/_sass/_layout.scss b/_sass/_layout.scss deleted file mode 100644 index 598818b..0000000 --- a/_sass/_layout.scss +++ /dev/null @@ -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; -} diff --git a/_sass/_links.scss b/_sass/_links.scss index 9c50696..2aabd62 100644 --- a/_sass/_links.scss +++ b/_sass/_links.scss @@ -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; +// } diff --git a/_sass/_pages.scss b/_sass/_pages.scss new file mode 100644 index 0000000..852fd18 --- /dev/null +++ b/_sass/_pages.scss @@ -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; +} diff --git a/_sass/_pagination.scss b/_sass/_pagination.scss index 1919713..918f560 100644 --- a/_sass/_pagination.scss +++ b/_sass/_pagination.scss @@ -26,7 +26,7 @@ .pagination a:hover, .pagination a:focus { background: white; - color: #477dca; + color: $theme-color; } .pagination a:active { diff --git a/_sass/_posts.scss b/_sass/_posts.scss index 91f5a06..ff85470 100644 --- a/_sass/_posts.scss +++ b/_sass/_posts.scss @@ -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; } diff --git a/_sass/_profile.scss b/_sass/_profile.scss new file mode 100644 index 0000000..8e12dae --- /dev/null +++ b/_sass/_profile.scss @@ -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; +} diff --git a/_sass/_projects.scss b/_sass/_projects.scss new file mode 100644 index 0000000..2713d2e --- /dev/null +++ b/_sass/_projects.scss @@ -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; +} diff --git a/_sass/_publications.scss b/_sass/_publications.scss new file mode 100644 index 0000000..df2090b --- /dev/null +++ b/_sass/_publications.scss @@ -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; +} diff --git a/_sass/_tables.scss b/_sass/_tables.scss index ea0bd42..41abe35 100644 --- a/_sass/_tables.scss +++ b/_sass/_tables.scss @@ -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, diff --git a/_sass/_typography.scss b/_sass/_typography.scss index 9dce6d8..b3cf8c2 100644 --- a/_sass/_typography.scss +++ b/_sass/_typography.scss @@ -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; } diff --git a/_sass/_variables.scss b/_sass/_variables.scss index d4dbde9..1c152e1 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -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; diff --git a/_sass/basscss/_buttons-blue.scss b/_sass/basscss/_buttons-blue.scss index c2373a9..1d22140 100644 --- a/_sass/basscss/_buttons-blue.scss +++ b/_sass/basscss/_buttons-blue.scss @@ -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; diff --git a/_sass/basscss/_color-base.scss b/_sass/basscss/_color-base.scss index 486b02e..2ef5b9c 100644 --- a/_sass/basscss/_color-base.scss +++ b/_sass/basscss/_color-base.scss @@ -6,7 +6,7 @@ body { } a { - color: $blue; + color: $theme-color; text-decoration: none; } diff --git a/assets/css/main.scss b/assets/css/main.scss index a91961b..39dad4b 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -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'; diff --git a/blog/index.html b/blog/index.html index a17585b..4b935ac 100644 --- a/blog/index.html +++ b/blog/index.html @@ -5,9 +5,6 @@ layout: default

{{ site.blog_name }}

{{ site.blog_description }}

-
-
-
@@ -17,8 +14,6 @@ layout: default

{{ post.title }}

{{ post.date | date: '%B %-d, %Y — %H:%M' }}

{{ post.description }}

-
-
{% endfor %}