junior-jekyll-theme 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 71676f92073b6b62600a849e1eb23c271edd0dc7
+  data.tar.gz: 97b504e8f4ce18a1003d44d461b2b749c328648a
+SHA512:
+  metadata.gz: a01a663432945236beb31854b72477034c8064c8219534679390a5203da5e1b62df8e66d59a497a14eaca5c888a4b8477b145a637474ea3f996873eb5acef3b2
+  data.tar.gz: d84b09747b154b3b867f515606aac59e9f0c3ded2b2ca79a109067d872c6e2f20decd74068415d63f589d3f304204079f881a781022c3bb50a402cb52c7f566c

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Jonathon Belotti
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,152 @@
+<p align="center">
+  <img src="mockups/rsz_junior.png"/>
+</p>
+
+# Junior
+-----
+
+*Junior* is a blog/portfolio theme for [Jekyll](http://jekyllrb.com), the static site generator. It's designed and developed by [@jonobelotti_IO](https://twitter.com/jonobelotti_IO).
+
+
+See Junior in action with [the demo site](https://thundergolfer.github.io/junior-theme).
+
+## Contents
+
+- [Preview](#preview)
+- [Usage](#usage)
+- [Options](#options)
+  - [Rems, `font-size`, and scaling](#rems-font-size-and-scaling)
+- [Development](#development)
+- [Author](#author)
+- [License](#license)
+
+## Preview
+
+##### Landing Page
+
+![Junior main page](mockups/junior-front-page.png)
+
+##### Dropdown Menu
+
+![Junior menu dropdown](mockups/junior-menu.png)
+
+##### Example Blog Post
+
+![Junior blog post](mockups/junior-post.png)
+
+##### Resumé
+
+Attractive, no-fuss resumé page that includes a PDF-print link (right) with CSS configured to ensure fidelity between screen and paper page.
+
+![Junior resumé](mockups/junior-resume.png)
+
+##### Open Source Showcase
+
+Connects, using Github's API, with your public profile and pulls your projects (ordered by Stars). Coming soon, you will also be able to showcase significant PRs. *Tag colours are also matched to the project's Github language colour-coding.*
+
+![Junior open source showcase](mockups/junior-open-source.png)
+
+##### Project Portfolio Visual Showcase
+
+![Junior visual portfolio](mockups/junior-main-portfolio.png)
+
+##### Project Page
+
+![Junior project page](mockups/junior-portfolio-single.png)
+
+##### About
+
+![Junior about](mockups/junior-about.png)
+
+##### Contact
+
+![Junior contact](mockups/junior-contact.png)
+
+## Usage
+
+### 1. Install dependencies
+
+Poole is built on Jekyll and uses its built-in SCSS compiler to generate our CSS. Before getting started, you'll need to install the Jekyll gem:
+
+```bash
+$ gem install jekyll
+```
+
+**Windows users:** Windows users have a bit more work to do, but luckily [@juthilo](https://github.com/juthilo) has your back with his [Run Jekyll on Windows](https://github.com/juthilo/run-jekyll-on-windows) guide.
+
+**Need syntax highlighting?** *Junior* includes support for Pygments or Rouge, so install your gem of choice to make use of the built-in styling. Read more about this [in the Jekyll docs](http://jekyllrb.com/docs/templates/#code_snippet_highlighting).
+
+### 2a. Quick start
+
+To help anyone with any level of familiarity with Jekyll quickly get started, *Junior* includes everything you need for a basic Jekyll site. To that end, just download *Junior* and start up Jekyll.
+
+### 2b. Roll your own Jekyll site
+
+Folks wishing to use Jekyll's templates and styles can do so with a little bit of manual labor. Download *Junior* and then copy what you need (likely `_layouts/`, `*.html` files, `atom.xml` for RSS, and `public/` for CSS, JS, etc.).
+
+### 3. Running locally
+
+To see your Jekyll site with *Junior* applied, start a Jekyll server. In Terminal, from `/junior-theme` (or whatever your Jekyll site's root directory is named):
+
+```bash
+> jekyll serve # You might need "bundle exec jekyll serve"
+```
+Open <http://localhost:4000> in your browser, and voilà.
+
+### 4. Serving it up
+
+If you host your code on GitHub, you can use [GitHub Pages](https://pages.github.com) to host your project.
+
+1. Fork this repo and switch to the `gh-pages` branch.
+  1. If you're [using a custom domain name](https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages), modify the `CNAME` file to point to your new domain.
+  2. If you're not using a custom domain name, **modify the `baseurl` in `_config.yml`** to point to your GitHub Pages URL. Example: for a repo at `github.com/username/junior`, use `http://username.github.io/junior/`. **Be sure to include the trailing slash.**
+3. Done! Head to your GitHub Pages URL or custom domain.
+
+No matter your production or hosting setup, be sure to verify the `baseurl` option file and `CNAME` settings. Not applying this correctly can mean broken styles on your site.
+
+## Options
+
+Junior includes some customizable options, typically applied via classes on the `<body>` element.
+
+
+### Rems, `font-size`, and scaling
+
+*Junior* is built almost entirely with `rem`s (instead of pixels). `rem`s are like `em`s, but instead of building on the immediate parent's `font-size`, they build on the root element, `<html>`.
+
+By default, we use the following:
+
+```css
+html {
+  font-size: 16px;
+  line-height: 1.5;
+}
+@media (min-width: 38em) {
+  html {
+    font-size: 20px;
+  }
+}
+
+```
+
+To easily scale your site's typography and components, simply customize the base `font-size`s here.
+
+
+## Development
+
+*Junior* has two branches, but only one is used for active development.
+
+- `master` for development.  **All pull requests should be to submitted against `master`. Cheers**
+- `gh-pages` for our hosted site, which includes our analytics tracking code. **Please avoid using this branch.**
+
+CSS is handled via Jeykll's built-in Sass compiler. Source Sass files are located in `_sass/`, included into `styles.scss`, and compile to `styles.css`.
+
+## Credit
+
+* [Pixyll theme](https://github.com/johnotander/pixyll) was used as a base for development of this theme.
+* [Junior.IO's](http://www.junior.io/) website design served as inspiration for this theme's look.
+
+## License
+
+Open sourced under the [MIT license](LICENSE).
+
+<3

data/_includes/ajaxify_content_form.html

@@ -0,0 +1,30 @@
+<script>
+    var contactForm = document.querySelector('form'),
+    inputEmail = contactForm.querySelector('[name="email"]'),
+    textAreaMessage = contactForm.querySelector('[name="content"]'),
+    sendButton = contactForm.querySelector('button');
+
+    sendButton.addEventListener('click', function(event){
+      event.preventDefault();
+
+      sendButton.innerHTML = '{{ site.text.contact.ajax.sending }}';
+
+      var xhr = new XMLHttpRequest();
+      xhr.open('POST', '//formspree.io/{{ site.email }}', true);
+      xhr.setRequestHeader("Accept", "application/json")
+      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
+
+      xhr.send(
+        "email=" + inputEmail.value +
+        "&message=" + textAreaMessage.value);
+
+      xhr.onloadend = function (res) {
+        if (res.target.status === 200){
+          sendButton.innerHTML = '{{ site.text.contact.ajax.sent }}';
+        }
+        else {
+          sendButton.innerHTML = '{{ site.text.contact.ajax.error }}';
+        }
+      }
+    });
+</script>

data/_includes/css/portfolio.css

@@ -0,0 +1,931 @@
+/* HTML5 ✰ Boilerplate
+ * ==|== normalize ==========================================================
+ */
+
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
+  display: block;
+}
+
+audio, canvas, video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+
+audio:not([controls]) {
+  display: none;
+}
+
+[hidden] {
+  display: none;
+}
+
+html {
+  z-index: -10;
+  font-size: 100%;
+  overflow-y: scroll;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.231;
+}
+
+body, button, input, select, textarea {
+  font-family: sans-serif;
+  color: #222;
+}
+
+::-moz-selection {
+  background: #fe57a1;
+  color: #fff;
+  text-shadow: none;
+}
+
+::selection {
+  background: #fe57a1;
+  color: #fff;
+  text-shadow: none;
+}
+
+a {
+  color: #00e;
+  -webkit-transition: color 200ms linear;
+  -moz-transition: color 200ms linear;
+  transition: color 200ms linear;
+}
+
+a:visited {
+  color: #551a8b;
+}
+
+a:hover {
+  color: #06e;
+}
+
+a:focus {
+  outline: thin dotted;
+}
+
+a:hover, a:active {
+  outline: 0;
+}
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+b, strong {
+  font-weight: bold;
+}
+
+blockquote {
+  margin: 1em 40px;
+}
+
+dfn {
+  font-style: italic;
+}
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 1em 0;
+  padding: 0;
+}
+
+ins {
+  background: #ff9;
+  color: #000;
+  text-decoration: none;
+}
+
+mark {
+  background: #ff0;
+  color: #000;
+  font-style: italic;
+  font-weight: bold;
+}
+
+pre, code, kbd, samp {
+  font-family: monospace, monospace;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+q {
+  quotes: none;
+}
+
+q:before, q:after {
+  content: "";
+  content: none;
+}
+
+small {
+  font-size: 85%;
+}
+
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+ul, ol {
+  margin: 1em 0;
+  padding: 0 0 0 40px;
+}
+
+dd {
+  margin: 0 0 0 40px;
+}
+
+nav ul, nav ol {
+  list-style: none;
+  list-style-image: none;
+  margin: 0;
+  padding: 0;
+}
+
+img {
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+  vertical-align: middle;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+figure {
+  margin: 0;
+}
+
+form {
+  margin: 0;
+}
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+label {
+  cursor: pointer;
+}
+
+legend {
+  border: 0;
+  *margin-left: -7px;
+  padding: 0;
+}
+
+button, input, select, textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+  *vertical-align: middle;
+}
+
+button, input {
+  line-height: normal;
+  *overflow: visible;
+}
+
+table button, table input {
+  *overflow: auto;
+}
+
+button, input[type="button"], input[type="reset"], input[type="submit"] {
+  cursor: pointer;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+}
+
+input[type="checkbox"], input[type="radio"] {
+  box-sizing: border-box;
+}
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  resize: vertical;
+}
+
+input:valid, textarea:valid {
+}
+
+input:invalid, textarea:invalid {
+  background-color: #f0dddd;
+}
+
+p a{
+  text-decoration: underline;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td {
+  vertical-align: top;
+}
+
+
+/* ==|== primary styles =====================================================
+   Author:
+   ========================================================================== */
+
+  body {
+    font-family: 'Open Sans', sans-serif;
+    min-width: 100%;
+    display: none;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  a {
+    font-family: 'Open Sans', sans-serif;
+    text-decoration: none;
+    color: #000;
+    font-size: 14px;
+  }
+
+  a:active, a:visited {
+    color: #000;
+  }
+
+  /*
+  header {
+    padding-top:30px;
+    padding-bottom:30px;
+    font-family: 'Libre Baskerville', serif;
+    font-family: 'Open Sans', sans-serif;
+    text-align: center;
+    position: fixed;
+    width: 100%;
+    left: 0px;
+    top: 0px;
+    height: 50px;
+    z-index: 50;
+    background-color:white;
+  }
+
+  header .inner{
+    border-top: 10px solid black;
+    border-bottom: 1px solid #000;
+    position: relative;
+    margin: 0 30px;
+  }
+
+  header h1, header .initials {
+    position: absolute;
+    display: inline-block;
+    float: left;
+    left: 0px;
+    font-weight: normal;
+    font-size: 16px;
+    margin: 10px 0;
+  }
+
+  header .initials {
+    display: none;
+  }
+
+  header nav {
+    display: inline-block;
+  }
+
+  header .main-nav {
+    width: 100%;
+    margin: 0px auto;
+  }
+
+  header .sub-nav {
+    right: 0;
+    top: 0;
+    position: absolute;
+  }
+
+  header .mobile-nav {
+    display: none;
+    text-align: right;
+  }
+
+  header nav ul li {
+    display: inline-block;
+    margin: 0 0px;
+    padding: 10px;
+  }
+
+  header nav.sub-nav ul li {
+    margin: 0 0 0 10px;
+  }
+
+  header nav ul li a {
+
+  }
+  */
+
+  .github-icon{
+    background-image:url("/images/github-icon.png");
+    background-size:30px 30px;
+    height:30px;
+    width:30px;
+  }
+  .github-icon.light{
+    background-image:url("/images/github-icon-white.png");
+  }
+
+  .project .progress{
+    position: absolute;
+    bottom:0px;
+    left:0px;
+    z-index: 11;
+    width:100%;
+    height:50px;
+    background-color:rgba(255,255,255,0.3);
+    opacity: 0.5;
+  }
+
+  .project .progress .under-construction{
+    background-image:url(images/under-construction.png);
+    width:26px;
+    height:26px;
+    background-size:26px 26px;
+    position: absolute;
+    z-index: 11;
+    top:12px;
+    left:12px;
+  }
+
+  .project .progress-bar{
+    position: absolute;
+    top:0px;
+    left:0px;
+    z-index: 10;
+    height:100%;
+    background-color:rgba(255,255,255,0.8);
+  }
+
+  .project .github-icon{
+    position: absolute;
+    bottom:10px;
+    right:10px;
+    opacity: 0.3;
+    z-index: 12;
+  }
+
+  #container {
+    /*margin-top: 80px; */
+    margin-bottom: 30px;
+  }
+
+  .projects {
+    position: relative;
+    margin: 0 15px ;
+    padding-bottom: 5%;
+  }
+
+  .projects li {
+    display: inline-block;
+    list-style: none;
+    /*width: 33.3333%;*/
+    float: left;
+  }
+
+  .projects li .project {
+    background-size: contain;
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+    margin: 30px 15px 0 15px;
+    background-color: #ccc;
+    -webkit-transition: all 200ms linear;
+    -moz-transition: all 200ms linear;
+    transition: all 200ms linear;
+    position: relative;
+  }
+
+  .projects li .aspect-two-one {
+    padding-bottom: 66.67%;
+  }
+
+  .projects .cover {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 15;
+    opacity: 0;
+    top: 0;
+    left: 0;
+    -webkit-transition: opacity 200ms linear;
+    -moz-transition: opacity 200ms linear;
+    transition: opacity 200ms linear;
+    background-color: rgba(255,255,255,0.9);
+    text-align: center;
+  }
+
+  a .cover {
+    background-image: none;
+  }
+
+  .projects .cover:hover {
+    opacity: 1;
+    color:#111;
+  }
+
+  .projects .cover .project-details{
+    top:50%;
+    margin-top:-25px;
+    position: absolute;
+    height:50px;
+    width:100%;
+  }
+
+  .projects .cover .project-details span{
+    clear:both;
+    display: block;
+    line-height: 20px;
+    font-size:15px;
+    font-weight:bold;
+  }
+
+  .projects .thumb {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index:5;
+    top: 0;
+    left: 0;
+  }
+
+  /* ==|== Project Post links ======================================== */
+
+  .next-project, .prev-project{
+    position: fixed;
+    top:50%;
+    margin-top:-11px;
+    height:22px;
+    width:22px;
+    font-size:30px;
+    font-weight:bold;
+    font-family:arial;
+    opacity: 0.3;
+    -webkit-transition: 200ms linear all;
+    -moz-transition: 200ms linear all;
+    transition: 200ms linear all;
+  }
+
+  .next-project:hover, .prev-project:hover{
+    opacity: 1;
+  }
+
+  .next-project{
+    background-image: url("//images/chevron-left-black.png");
+    left: 30px;
+  }
+
+  .prev-project{
+    background-image: url("//images/chevron-right-black.png");
+    right: 30px;
+  }
+
+  .next-project.background--dark{
+    background-image: url("//images/chevron-left-white.png");
+  }
+
+  .prev-project.background--dark{
+    background-image: url("//images/chevron-right-white.png");
+  }
+
+  .underlined-link{
+    text-decoration: underline;
+    display: inline-block;
+  }
+
+  /* ==|== STATIC page styles ======================================== */
+
+  .static-page{
+    text-align: center;
+    padding-top: 100px;
+  }
+
+  /* ==|== POST page styles ======================================== */
+
+  #post-container{
+    margin: 0px;
+  }
+
+  #post-container .post-wide p{
+    /*margin: 30px;*/
+  }
+
+  .post-narrow{
+    width: 940px;
+    text-align: center;
+    margin: 0 auto;
+    max-width: 100%;
+  }
+
+  .post-narrow h2{
+    margin-top: 100px;
+  }
+
+  .post p{
+    font-size: 16px;
+    line-height: 24px;
+    max-width: 620px;
+    color: #494949;
+    margin-bottom: 20px;
+    margin-right: auto;
+    margin-left: auto;
+    display: block;
+    clear: both;
+  }
+
+  .post .meta{
+    color: #aaa;
+    font-size: 12px;
+    margin-bottom: 100px;
+  }
+
+  #showcase__password{
+    width:240px;
+    font-size: 13px;
+    -webkit-box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.075);
+    -moz-box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.075);
+    display: block;
+    height: 34px;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.428571429;
+    color: #555555;
+    vertical-align: middle;
+    background-color: #ffffff;
+    border: 1px solid #cccccc;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    margin-bottom:100px;
+    margin-left:auto;
+    margin-right:auto;
+  }
+
+  .post .showcase.passworded{
+    // display: none;
+  }
+
+  .showcase__password__screen{
+    display: none;
+  }
+
+  .post .showcase iframe,
+  .post .showcase img {
+    margin-bottom: 100px;
+    max-width: 100%;
+  }
+
+  .post .showcase h2{
+    margin-bottom: 40px;
+  }
+
+  .post .meta a,
+  .post .meta strong{
+    color: #494949;
+    font-size: 12px;
+    font-weight: bold;
+  }
+  .post .meta a:hover{
+    color: blue;
+  }
+  .separator {
+    width: 460px;
+    height: 2px;
+    margin: 30px auto 30px auto;
+    background: #444;
+  }
+
+  .post-wide{
+    position: relative;
+    text-align: center;
+  }
+
+  .post-wide-hero{
+    margin-top:30px;
+    width:100%;
+    height:350px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    z-index: -1;
+    position: relative;
+  }
+
+  .post-wide h2{
+    margin-top:100px;
+  }
+
+  .post-wide .showcase img{
+    max-width: 100%;
+  }
+
+
+  /* ==|== non-semantic helper classes ======================================== */
+  .ir {
+    display: block;
+    border: 0;
+    text-indent: -999em;
+    overflow: hidden;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    text-align: left;
+    direction: ltr;
+  }
+
+  .ir br {
+    display: none;
+  }
+
+  .hidden {
+    display: none !important;
+    visibility: hidden;
+  }
+
+  .visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
+  }
+
+  .invisible {
+    visibility: hidden;
+  }
+
+  .clearfix:before, .clearfix:after {
+    content: "";
+    display: table;
+  }
+
+  .clearfix:after {
+    clear: both;
+  }
+
+  .clearfix {
+    zoom: 1;
+  }
+
+
+
+  /* ==|== media queries ====================================================== */
+
+
+
+  @media only screen and (max-width: 1024px) {
+    header {
+      top: 0px;
+      width: 100%;
+      left: 0px;
+      padding: 15px 0 15px;
+    }
+
+    .projects {
+      margin: 0 7.5px;
+    }
+
+    .projects li {
+      width: 60vw;
+      height: 60vw;
+    }
+
+    /*#container {
+      margin-top: 65px;
+    }*/
+
+    .projects li .project {
+      margin: 15px 7.5px 0 7.5px;
+    }
+
+    header .inner{
+      margin: 0 15px;
+    }
+  }
+
+  @media only screen and (max-width: 600px) {
+    header h1 {
+      display: none;
+    }
+
+    header .initials {
+      display: inline-block;
+    }
+
+    .post p{
+      font-size:14px;
+      line-height: 20px;
+      padding: 0 10px;
+      margin-left: 30px;
+      margin-right: 30px;
+    }
+
+    .post h2{
+      margin-left: 30px;
+      margin-right: 30px;
+    }
+
+    .projects{
+      margin-bottom:15px;
+    }
+
+    #container{
+      margin-bottom:0px;
+    }
+
+    .next-project{
+      left:15px;
+    }
+
+    .prev-project{
+      right:15px;
+    }
+
+    .post .meta{
+      margin-bottom:55px;
+    }
+
+    .post-wide-hero{
+      background-size: 320px auto ;
+      height:200px;
+    }
+
+    .post-narrow h2{
+      margin-top:55px;
+    }
+
+    .post-wide h2{
+      margin-top:55px;
+    }
+
+    h2{
+    }
+
+    .next-project, .prev-project{
+      height:14px;
+      width:14px;
+      background-size:14px 14px;
+      font-size:30px;
+      font-weight:bold;
+      font-family:arial;
+      opacity: 0.3;
+      -webkit-transition: 200ms linear all;
+      -moz-transition: 200ms linear all;
+      transition: 200ms linear all;
+    }
+  }
+
+  @media only screen and (max-width: 480px) {
+
+    header nav {
+      display: none;
+    }
+
+    header nav.mobile-nav {
+      display: block;
+    }
+
+    .projects li {
+      width: 60vw;
+      height: 60vw;
+    }
+  }
+
+  @media only screen and (min-width: 1900px) {
+    .projects li {
+      width: 25%;
+    };
+  }
+
+
+  /* ==|== print styles ======================================================= */
+
+  @media print {
+    * {
+      background: transparent !important;
+      color: black !important;
+      text-shadow: none !important;
+      filter: none !important;
+      -ms-filter: none !important;
+    }
+
+    a, a:visited {
+      text-decoration: underline;
+    }
+
+    a[href]:after {
+      content: " (" attr(href) ")";
+    }
+
+    abbr[title]:after {
+      content: " (" attr(title) ")";
+    }
+
+    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
+      content: "";
+    }
+
+    pre, blockquote {
+      border: 1px solid #999;
+      page-break-inside: avoid;
+    }
+
+    thead {
+      display: table-header-group;
+    }
+
+    tr, img {
+      page-break-inside: avoid;
+    }
+
+    img {
+      max-width: 100% !important;
+    }
+    @    page {
+      margin: 0.5cm;
+    }
+
+    p, h2, h3 {
+      orphans: 3;
+      widows: 3;
+    }
+
+    h2, h3 {
+      page-break-after: avoid;
+    };
+  }