Difference between revisions of "Template:Stockholm2"

(Created page with "<html> <style> →‎******************************** DEFAULT WIKI SETTINGS *******************************: #sideMenu, #top_title {display:none;} #content { padding:0px; w...")
 
Line 3: Line 3:
 
<style>
 
<style>
  
−
/********************************* DEFAULT WIKI SETTINGS  ********************************/
+
/* ==========================================================================
 +
  Table of Contents
 +
  ========================================================================== */
  
−
#sideMenu, #top_title {display:none;}
+
/*
−
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
+
−
body {background-color:white; }
+
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
  
−
/********************************* MENU ********************************/
+
    0.  Normalize
−
/* Wrapper for the menu */
+
    1.  Icons
−
.menu_wrapper {
+
    2. General
−
width:150px;
+
    3.  Utilities
−
height:100vh;
+
    4.  General
−
position:fixed;
+
    5.  Single Post
−
padding:0px;
+
    6.  Tag Archive
−
float:left;
+
    7.  Read Next
−
background-color:#f2f2f2;
+
    8.  Third Party Elements
−
text-align:left;
+
    9.  Pagination
−
}
+
    10.  Footer
 +
    11. Media Queries (Tablet)
 +
    12. Media Queries (Mobile)
 +
    13. Animations
  
−
/* styling for the menu items */
+
*/
−
.menu_item {
+
−
width:100%;
+
−
margin:-2px 0px 0px -20px;
+
−
padding: 10px 10px; 
+
−
border-bottom: 1px solid #d3d3d3;
+
−
font-weight:bold;
+
−
color:#000000;
+
−
cursor: pointer;
+
−
}
+
  
−
/* when hovering on a menu item */
+
/* ==========================================================================
−
.menu_item:hover {
+
  0. Normalize.css v2.1.3 | MIT License | git.io/normalize | (minified)
−
color:#000000;
+
  ========================================================================== */
−
background-color: #72c9b6;
+
−
}
+
  
−
/* decoration icon for the menu buttons*/
+
article, aside, details,
−
.icon {
+
figcaption, figure,
−
float:right;
+
footer, header, hgroup,
−
font-size:16px;  
+
main, nav, section,
−
font-weight:bold;  
+
summary { display: block; }
−
}
+
audio, canvas, video { display: inline-block; }
−
+
audio:not([controls]) { display: none; height: 0; }
−
/* this is the icon for when the content is collapsed */
+
[hidden], template { display: none; }
−
.plus::before {
+
html {
−
content: "+";  
+
  font-family: sans-serif;
−
}
+
  -ms-text-size-adjust: 100%;
−
/* this is the icon for when the content is expanded */
+
  -webkit-text-size-adjust: 100%;
−
.less::before {
+
}
−
content: "–";  
+
body { margin: 0; }
−
}
+
a { background: transparent; }
 +
a:focus { outline: thin dotted; }
 +
a:active, a:hover { outline: 0; }
 +
h1 { font-size: 2em; margin: 0.67em 0; }
 +
abbr[title] { border-bottom: 1px dotted; }
 +
b, strong { font-weight: 700; }
 +
dfn { font-style: italic; }
 +
hr {
 +
  -moz-box-sizing: content-box;
 +
  box-sizing: content-box;
 +
  height: 0;
 +
}
 +
mark { background: #FF0; color: #000; }
 +
code, kbd, pre,
 +
samp { font-family: monospace, serif; font-size: 1em; }
 +
pre { white-space: pre-wrap; }
 +
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
 +
small { font-size: 80%; }
 +
sub, sup {
 +
  font-size: 75%;
 +
  line-height: 0;
 +
  position: relative;
 +
  vertical-align: baseline;
 +
}
 +
sup { top: -0.5em; }
 +
sub { bottom: -0.25em; }
 +
img { border: 0; }
 +
svg:not(:root) { overflow: hidden; }
 +
figure { margin: 0; }
 +
fieldset {
 +
  border: 1px solid #c0c0c0;
 +
  margin: 0 2px;
 +
  padding: 0.35em 0.625em 0.75em;
 +
}
 +
legend { border: 0; padding: 0; }
 +
button, input, select,
 +
textarea { font-family: inherit; font-size: 100%; margin: 0; }
 +
button, input { line-height: normal; }
 +
button, select { text-transform: none; }
 +
button, html input[type="button"],
 +
input[type="reset"], input[type="submit"] {
 +
  -webkit-appearance: button;
 +
  cursor: pointer;
 +
}
 +
button[disabled], html input[disabled] { cursor: default; }
 +
input[type="checkbox"],
 +
input[type="radio"] { box-sizing: border-box; padding: 0; }
 +
input[type="search"] {
 +
  -webkit-appearance: textfield;
 +
  -moz-box-sizing: content-box;
 +
  -webkit-box-sizing: content-box;
 +
  box-sizing: content-box;
 +
}
 +
input[type="search"]::-webkit-search-cancel-button,
 +
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
 +
button::-moz-focus-inner,
 +
input::-moz-focus-inner { border: 0; padding: 0; }
 +
textarea { overflow: auto; vertical-align: top; }
 +
table { border-collapse: collapse; border-spacing: 0; }
  
−
/* styling for the ul that creates the buttons */
 
−
ul.menu_items {
 
−
width:100%;
 
−
margin-left:0px;
 
−
padding:0px;
 
−
list-style: none;
 
−
}
 
  
−
/* styling for the li that are the menu items */
+
/* ==========================================================================
−
.menu_items li {
+
  1. Icons - Sets up the icon font and respective classes
−
width:90%;
+
  ========================================================================== */
−
margin-top:-2px;
+
−
padding: 15px 0px 15px 15px ;
+
−
display:block;
+
−
border-bottom: 1px solid #d3d3d3; 
+
−
text-align:left;
+
−
font-weight:bold;
+
−
text-decoration:none;
+
−
color:#000000;
+
−
list-style-type:none;
+
−
cursor:pointer;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
+
−
}
+
  
−
.menu_item a {
+
/* Import the font file with the icons in it */
−
width: 100%;
+
@font-face {
−
margin-left: -20px;
+
    font-family: "casper-icons";
−
padding: 11px 90px 12px 20px;
+
    src:url("../fonts/casper-icons.eot?v=1");
−
text-decoration: none;
+
    src:url("../fonts/casper-icons.eot?v=1#iefix") format("embedded-opentype"),
−
color:black;
+
        url("../fonts/casper-icons.woff?v=1") format("woff"),
−
}
+
        url("../fonts/casper-icons.ttf?v=1") format("truetype"),
 +
        url("../fonts/casper-icons.svg?v=1#icons") format("svg");
 +
    font-weight: normal;
 +
    font-style: normal;
 +
}
  
−
/* When hovering on a menu item */
+
/* Apply these base styles to all icons */
−
.menu_items li:hover {  
+
[class^="icon-"]:before, [class*=" icon-"]:before {
−
background-color:#72c9b6;
+
    font-family: "casper-icons", "Raleway", sans-serif;
−
color: #000000;
+
    speak: none;
−
}
+
    font-style: normal;
 +
    font-weight: normal;
 +
    font-variant: normal;
 +
    text-transform: none;
 +
    line-height: 1;
 +
    text-decoration: none !important;
 +
    -webkit-font-smoothing: antialiased;
 +
    -moz-osx-font-smoothing: grayscale;
 +
}
  
−
/* styling for the submenus */
+
/* Each icon is created by inserting the correct character into the
−
.submenu {
+
  content of the :before pseudo element. Like a boss. */
−
width:100%;  
+
.icon-ghost:before {
−
display: none;
+
    content: "\f600";
−
font-weight:bold;
+
}
−
cursor:pointer;  
+
.icon-feed:before {
 +
    content: "\f601";
 +
}
 +
.icon-twitter:before {
 +
    content: "\f602";
 +
    font-size: 1.1em;
 +
}
 +
.icon-google-plus:before {
 +
    content: "\f603";
 +
}
 +
.icon-facebook:before {
 +
    content: "\f604";
 +
}
 +
.icon-arrow-left:before {
 +
    content: "\f605";
 +
}
 +
.icon-stats:before {
 +
    content: "\f606";
 +
}
 +
.icon-location:before {
 +
    content: "\f607";
 +
    margin-left: -3px; /* Tracking fix */
 +
}
 +
.icon-link:before {
 +
    content: "\f608";
 +
}
 +
.icon-menu:before {
 +
    content: "\f609";
 +
}
 +
/*
 +
    IMPORTANT: When making any changes to the icon font, be sure to increment
 +
    the version number by 1 in the @font-face rule. `?v=1` becomes `?v=2`
 +
    This forces browsers to download the new font file.
 +
*/
  
−
}
 
  
−
/* moving the margin for the submenu ul list */
+
/* ==========================================================================
−
ul.submenu {
+
  2. General - Setting up some base styles
−
width: 100%;
+
  ========================================================================== */
−
margin: 10px 0px -11px 0px;
+
−
list-style: none;
+
−
}
+
  
−
/*styling for the submenu buttons */
+
html {
−
.submenu li {  
+
    height: 100%;
−
width: 100%;  
+
    max-height: 100%;
−
margin-left: 10px;
+
    font-size: 62.5%;
−
margin-bottom: 0px;
+
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
−
}
+
}
  
 +
body {
 +
    height: 100%;
 +
    max-height: 100%;
 +
    font-family: "Lato", serif;
 +
    letter-spacing: 0.01rem;
 +
    font-size: 1.8rem;
 +
    line-height: 1.75em;
 +
    color: #3A4145;
 +
    -webkit-font-feature-settings: 'kern' 1;
 +
    -moz-font-feature-settings: 'kern' 1;
 +
    -o-font-feature-settings: 'kern' 1;
 +
    text-rendering: geometricPrecision;
 +
}
  
−
/* hover state for the submenu buttons */
+
::-moz-selection {
−
.submenu li a {
+
    background: #D6EDFF;
−
width: 100%;
+
}
−
padding: 5px 10px;
+
−
display: inline-block;
+
−
border-bottom: 1px solid #d3d3d3;
+
−
background-color:white;
+
−
text-decoration:none;
+
−
color:#000000;  
+
−
}
+
  
 +
::selection {
 +
    background: #D6EDFF;
 +
}
  
 +
h1, h2, h3,
 +
h4, h5, h6 {
 +
    -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
 +
    -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
 +
    -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
 +
    color: #2E2E2E;
 +
    line-height: 1.15em;
 +
    margin: 0 0 0.4em 0;
 +
    font-family: "Raleway", sans-serif;
 +
    text-rendering: geometricPrecision;
 +
}
  
−
.submenu li a:hover  {
+
h1 {
−
background-color:#000000;  
+
    font-size: 5rem;
−
color: #72c9b6;
+
    letter-spacing: -2px;
−
}
+
    text-indent: -3px;
 +
}
  
 +
h2 {
 +
    font-size: 3.6rem;
 +
    letter-spacing: -1px;
 +
}
  
−
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
+
h3 {
−
.collapsable_menu_control {  
+
    font-size: 3rem;
−
width:100%;
+
}
−
padding: 15px 0px;
+
−
display:none;
+
−
background-color:#000000;
+
−
text-align:center; 
+
−
font-weight:bold;
+
−
color:#72c9b6;
+
−
cursor:pointer;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;  
+
−
}
+
  
−
/* when hovering on that button */
+
h4 {
−
.collapsable_menu_control:hover {  
+
    font-size: 2.5rem;
−
background-color: #72c9b6;
+
}
−
color:#000000;
+
−
}
+
  
−
/********************************* CONTENT OF THE PAGE ********************************/
+
h5 {
 +
    font-size: 2rem;
 +
}
  
−
/* Wrapper for the content */
+
h6 {
−
.content_wrapper {
+
    font-size: 2rem;
−
width: 85%;
+
}
−
margin-left:150px;
+
−
padding:10px 0px;
+
−
float:left;
+
−
background-color:white;  
+
−
}
+
  
−
/*LAYOUT */
+
a {
−
.column  {  
+
    color: #4A4A4A;
−
padding: 10px 0px;
+
    transition: color 0.3s ease;
−
float:left;
+
}
−
background-color:white;  
+
−
}
+
  
−
.full_size {
+
a:hover {
−
width:100%;  
+
    color: #111;
−
}
+
}
  
−
.full_size img {  
+
p, ul, ol, dl {
−
padding: 10px 15px;
+
    -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
−
width:96.5%;  
+
    -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
−
}
+
    -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
 +
    margin: 0 0 1.75em 0;
 +
    text-rendering: geometricPrecision;
 +
}
  
−
.half_size {
+
ol, ul {
−
width: 50%;
+
    padding-left: 3rem;
−
}
+
}
−
.half_size img {
+
−
padding: 10px 15px;
+
−
width: 93%;  
+
−
}
+
  
 +
ol ol, ul ul,
 +
ul ol, ol ul {
 +
    margin: 0 0 0.4em 0;
 +
    padding-left: 2em;
 +
}
  
−
.clear {
+
dl dt {
−
clear:both;
+
    float: left;
−
}
+
    width: 180px;
 +
    overflow: hidden;
 +
    clear: left;
 +
    text-align: right;
 +
    text-overflow: ellipsis;
 +
    white-space: nowrap;
 +
    font-weight: 700;
 +
    margin-bottom: 1em;
 +
}
  
−
.highlight {  
+
dl dd {
−
width: 90%;  
+
    margin-left: 200px;
−
margin: auto;
+
    margin-bottom: 1em
−
padding: 15px 5px;
+
}
−
background-color: #f2f2f2;
+
−
}
+
  
−
.judges-will-not-evaluate {
+
li {
−
border: 4px solid #72c9b6;
+
    margin: 0.4em 0;
−
display: block;
+
}
−
margin: 5px 15px;
+
−
width: 95%;
+
−
font-weight:bold;
+
−
}
+
  
 +
li li {
 +
    margin: 0;
 +
}
  
−
/*STYLING */
+
hr {
 +
    display: block;
 +
    height: 1px;
 +
    border: 0;
 +
    border-top: #EFEFEF 1px solid;
 +
    margin: 3.2em 0;
 +
    padding: 0;
 +
}
  
−
/* styling for the titles */
+
blockquote {
−
.content_wrapper h1, .content_wrapper h2 {
+
    -moz-box-sizing: border-box;
−
padding:5px 15px;  
+
    box-sizing: border-box;
−
border-bottom:0px;  
+
    margin: 1.75em 0 1.75em -2.2em;
−
color:#72c9b6;
+
    padding: 0 0 0 1.75em;
 +
    border-left: #4A4A4A 0.4em solid;
 +
}
  
−
}
+
blockquote p {
−
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {  
+
    margin: 0.8em 0;
−
padding:5px 15px;  
+
    font-style: italic;
−
border-bottom:0px;
+
}
−
color: #000000;
+
−
}
+
  
 +
blockquote small {
 +
    display: inline-block;
 +
    margin: 0.8em 0 0.8em 1.5em;
 +
    font-size: 0.9em;
 +
    color: #CCC;
 +
}
  
−
/* font and text */
+
blockquote small:before { content: "\2014 \00A0"; }
−
.content_wrapper p {  
+
−
padding:0px 15px;
+
−
font-size: 13px;
+
−
font-family:Tahoma, Geneva, sans-serif;  
+
−
}
+
  
−
/* Links */
+
blockquote cite {
−
.content_wrapper a {  
+
    font-weight: 700;
−
font-weight: bold;
+
}
−
text-decoration: underline;
+
−
text-decoration-color:#72c9b6;
+
−
color: #72c9b6;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;
+
−
}
+
  
−
/* hover for the links */
+
blockquote cite a { font-weight: normal; }
−
.content_wrapper a:hover {  
+
−
text-decoration:none;
+
−
color:#000000;
+
−
}
+
  
−
/* non numbered lists */
+
mark {
−
.content_wrapper ul {
+
    background-color: #fdffb6;
−
padding:0px 20px;
+
}
−
font-size: 13px;
+
−
font-family:Tahoma, Geneva, sans-serif;  
+
−
}
+
  
−
/* numbered lists */
+
code, tt {
−
.content_wrapper ol {
+
    padding: 1px 3px;
−
padding:0px;  
+
    font-family: Inconsolata, monospace, sans-serif;
−
font-size: 13px;
+
    font-size: 0.85em;
−
font-family:Tahoma, Geneva, sans-serif;  
+
    white-space: pre-wrap;
−
}
+
    border: #E3EDF3 1px solid;
 +
    background: #F7FAFB;
 +
    border-radius: 2px;
 +
}
  
−
/* Table */
+
pre {
−
.content_wrapper table {  
+
    -moz-box-sizing: border-box;
−
width: 97%;  
+
    box-sizing: border-box;
−
margin:15px 10px;  
+
    margin: 0 0 1.75em 0;
−
border: 1px solid #d3d3d3;  
+
    border: #E3EDF3 1px solid;
−
border-collapse: collapse;  
+
    width: 100%;
−
}
+
    padding: 10px;
 +
    font-family: Inconsolata, monospace, sans-serif;
 +
    font-size: 0.9em;
 +
    white-space: pre;
 +
    overflow: auto;
 +
    background: #F7FAFB;
 +
    border-radius: 3px;
 +
}
  
−
/* table cells */
+
pre code, pre tt {
−
.content_wrapper  td {  
+
    font-size: inherit;
−
padding: 10px;
+
    white-space: pre-wrap;
−
vertical-align: text-top;  
+
    background: transparent;
−
border: 1px solid #d3d3d3;  
+
    border: none;
−
border-collapse: collapse;  
+
    padding: 0;
−
}
+
}
  
−
/* table headers */
+
kbd {
−
.content_wrapper th {  
+
    display: inline-block;
−
padding: 10px;  
+
    margin-bottom: 0.4em;
−
vertical-align: text-top;  
+
    padding: 1px 8px;
−
border: 1px solid #d3d3d3;  
+
    border: #CCC 1px solid;
−
border-collapse: collapse;  
+
    color: #666;
−
background-color:#f2f2f2;  
+
    text-shadow: #FFF 0 1px 0;
−
}
+
    font-size: 0.9em;
 +
    font-weight: 700;
 +
    background: #F4F4F4;
 +
    border-radius: 4px;
 +
    box-shadow:
 +
        0 1px 0 rgba(0, 0, 0, 0.2),
 +
        0 1px 0 0 #fff inset;
 +
}
  
−
/* Button class */
+
table {
−
.button_click {  
+
    -moz-box-sizing: border-box;
−
margin: 10px auto;
+
    box-sizing: border-box;
−
padding: 15px; width:12%; 
+
    margin: 1.75em 0;
−
text-align:center;  
+
    width: 100%;
−
font-weight:bold;
+
    max-width: 100%;
−
background-color: #72c9b6;
+
    background-color: transparent;
−
cursor:pointer; 
+
}
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;  
+
−
-ms-transition: all 0.4s ease;  
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;  
+
−
}
+
  
−
/* button class on hover */
+
table th,
−
.button_click:hover {
+
table td {
−
background-color:#000000;  
+
    padding: 8px;
−
color:#72c9b6;
+
    line-height: 20px;
−
}
+
    text-align: left;
 +
    vertical-align: top;
 +
    border-top: #EFEFEF 1px solid;
 +
}
  
−
/********************************* RESPONSIVE STYLING ********************************/
+
table th { color: #000; }
  
−
/* IF THE SCREEN IS LESS THAN 1000PX */
+
table caption + thead tr:first-child th,
 +
table caption + thead tr:first-child td,
 +
table colgroup + thead tr:first-child th,
 +
table colgroup + thead tr:first-child td,
 +
table thead:first-child tr:first-child th,
 +
table thead:first-child tr:first-child td {
 +
    border-top: 0;
 +
}
  
−
@media only screen and (max-width: 1000px) {
+
table tbody + tbody { border-top: #EFEFEF 2px solid; }
  
−
#content {width:100%; }
+
table table table { background-color: #FFF; }
−
.menu_wrapper {width:15%;}
+
−
.content_wrapper {margin-left: 15%;}
+
−
.menu_item {display:block;}
+
−
.icon {display:none;}
+
−
.highlight {padding:10px 0px;}
+
−
}
+
  
 +
table tbody > tr:nth-child(odd) > td,
 +
table tbody > tr:nth-child(odd) > th {
 +
    background-color: #F6F6F6;
 +
}
  
−
/* IF THE SCREEN IS LESS THAN 680PX */
+
table.plain tbody > tr:nth-child(odd) > td,
 +
table.plain tbody > tr:nth-child(odd) > th {
 +
  background: transparent;
 +
}
  
−
@media only screen and (max-width: 680px) {
+
iframe, .fluid-width-video-wrapper {
−
.collapsable_menu_control { display:block;}
+
    display: block;
−
.menu_item {display:none;}
+
    margin: 1.75em 0;
−
.menu_wrapper { width:100%; height: 15%; position:relative;}
+
}
−
.content_wrapper {width:100%; margin-left:0px;}
+
 
−
.column.half_size {width:100%; }
+
/* When a video is inside the fitvids wrapper, drop the
−
.column img { width: 100%; padding: 5px 0px;}
+
margin on the iframe, cause it breaks stuff. */
−
.icon {display:block;}
+
.fluid-width-video-wrapper iframe {
−
.highlight {padding:15px 5px;}
+
    margin: 0;
−
}
+
}
 +
 
 +
 
 +
/* ==========================================================================
 +
  3. Utilities - These things get used a lot
 +
  ========================================================================== */
 +
 
 +
/* Clears shit */
 +
.clearfix:before,
 +
.clearfix:after {
 +
    content: " ";
 +
    display: table;
 +
}
 +
.clearfix:after { clear: both; }
 +
.clearfix { zoom: 1; }
 +
 
 +
/* Hides shit */
 +
.hidden {
 +
    text-indent: -9999px;
 +
    visibility: hidden;
 +
    display: none;
 +
}
 +
 
 +
/* Creates a responsive wrapper that makes our content scale nicely */
 +
.inner {
 +
    position: relative;
 +
    width: 80%;
 +
    max-width: 710px;
 +
    margin: 0 auto;
 +
}
 +
 
 +
/* Centres vertically yo. (IE8+) */
 +
.vertical {
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
}
 +
 
 +
/* Wraps the main content & footer */
 +
.site-wrapper {
 +
    position: relative;
 +
    z-index: 10;
 +
    min-height: 100%;
 +
    background: #fff;
 +
    -webkit-transition: -webkit-transform 0.5s ease;
 +
            transition: transform 0.5s ease;
 +
}
 +
 
 +
body.nav-opened .site-wrapper {
 +
    overflow-x: hidden;
 +
    -webkit-transform: translate3D(-240px, 0, 0);
 +
        -ms-transform: translate3D(-240px, 0, 0);
 +
            transform: translate3D(-240px, 0, 0);
 +
    -webkit-transition: -webkit-transform 0.3s ease;
 +
            transition: transform 0.3s ease;
 +
}
 +
 
 +
 
 +
/* ==========================================================================
 +
  4. General - The main styles for the the theme
 +
  ========================================================================== */
 +
 
 +
/* Big cover image on the home page */
 +
.main-header {
 +
    position: relative;
 +
    display: table;
 +
    width: 100%;
 +
    height: 100vh;
 +
    margin-bottom: 5rem;
 +
    text-align: center;
 +
    background: #222 no-repeat center center;
 +
    background-size: cover;
 +
    overflow: hidden;
 +
}
 +
 
 +
.logo {
 +
  position: fixed;
 +
  top: 0;
 +
  left: 0;
 +
  z-index: 200;
 +
}
 +
 
 +
#navigator-opener {
 +
  position: fixed; /* stick the nav */
 +
  width: 100%; /* make the nav full width of the screen */
 +
  top: 0; /* keep nav stuck at the very top of the screen */
 +
  height: 100px;
 +
  z-index: 99;
 +
}
 +
 
 +
.navigation:hover,
 +
#navigator-opener:hover + .navigation,
 +
.logo:hover + div + div {
 +
  display: flex;
 +
  display: -webkit-flex;
 +
}
 +
 
 +
.navigation {
 +
        display: none;
 +
        position: fixed; /* stick the nav */
 +
        width: 100%; /* make the nav full width of the screen */
 +
        top: 0; /* keep nav stuck at the very top of the screen */
 +
        height: 230px;
 +
        z-index: 100; /* move nav to the front of the content */
 +
        text-align: right; /* styling */
 +
        background-color: white; /* styling */
 +
        justify-content: center;
 +
        border-bottom: 1px solid lightgrey;
 +
    }
 +
 
 +
    .nav-content{
 +
      display: flex;
 +
      width: 1300px;
 +
      justify-content: flex-end;
 +
    }
 +
 
 +
    .nav-items{
 +
      display: flex;
 +
      flex-direction: row;
 +
      align-items: center;
 +
    }
 +
 
 +
    .site-wrapper {
 +
        margin-top: 50px; /* This is here to keep content from going behind the menu on page load */
 +
    }
 +
 
 +
    .navigation div a {
 +
        color: #b5b5b5; /* styling */
 +
        text-decoration: none;
 +
        padding: 7px 15px;
 +
        font-family: Raleway;
 +
    }
 +
 
 +
    .navigation div a:hover {
 +
        color: black; /* styling */
 +
    }
 +
 
 +
.main-header .inner {
 +
    width: 80%;
 +
}
 +
 
 +
.main-nav {
 +
    position: relative;
 +
    padding: 35px 40px;
 +
    margin: 0 0 30px 0;
 +
}
 +
 
 +
.main-nav a {
 +
    text-decoration: none;
 +
    font-family: 'Raleway', sans-serif;
 +
}
 +
 
 +
/* Navigation */
 +
body.nav-opened .nav-cover {
 +
    position: fixed;
 +
    top: 0;
 +
    left: 0;
 +
    right: 240px;
 +
    bottom: 0;
 +
    z-index: 200;
 +
}
 +
 
 +
.nav {
 +
    position: fixed;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    z-index: 5;
 +
    width: 240px;
 +
    opacity: 0;
 +
    background: #111;
 +
    margin-bottom: 0;
 +
    text-align: left;
 +
    overflow-y: auto;
 +
    -webkit-transition: -webkit-transform 0.5s ease,
 +
                        opacity 0.3s ease 0.7s;
 +
            transition: transform 0.5s ease,
 +
                        opacity 0.3s ease 0.7s;
 +
}
 +
 
 +
body.nav-closed .nav {
 +
    -webkit-transform: translate3D(97px, 0, 0);
 +
        -ms-transform: translate3D(97px, 0, 0);
 +
            transform: translate3D(97px, 0, 0);
 +
}
 +
 
 +
body.nav-opened .nav {
 +
    opacity: 1;
 +
    -webkit-transition: -webkit-transform 0.3s ease,
 +
                        opacity 0s ease 0s;
 +
            transition: transform 0.3s ease,
 +
                        opacity 0s ease 0s;
 +
    -webkit-transform: translate3D(0, 0, 0);
 +
        -ms-transform: translate3D(0, 0, 0);
 +
            transform: translate3D(0, 0, 0);
 +
}
 +
 
 +
.nav-title {
 +
    position: absolute;
 +
    top: 45px;
 +
    left: 30px;
 +
    font-size: 16px;
 +
    font-weight: 100;
 +
    text-transform: uppercase;
 +
    color: #fff;
 +
}
 +
 
 +
.nav-close {
 +
    position: absolute;
 +
    top: 38px;
 +
    right: 25px;
 +
    width: 20px;
 +
    height: 20px;
 +
    padding: 0;
 +
    font-size: 10px;
 +
}
 +
 
 +
.nav-close:focus {
 +
    outline: 0;
 +
}
 +
 
 +
.nav-close:before,
 +
.nav-close:after {
 +
    content: '';
 +
    position: absolute;
 +
    top: 0;
 +
    width: 20px;
 +
    height: 1px;
 +
    background: rgb(150,150,150);
 +
    top: 15px;
 +
    -webkit-transition: background 0.15s ease;
 +
            transition: background 0.15s ease;
 +
}
 +
 
 +
.nav-close:before {
 +
    -webkit-transform: rotate(45deg);
 +
        -ms-transform: rotate(45deg);
 +
            transform: rotate(45deg);
 +
}
 +
 
 +
.nav-close:after {
 +
    -webkit-transform: rotate(-45deg);
 +
        -ms-transform: rotate(-45deg);
 +
            transform: rotate(-45deg);
 +
}
 +
 
 +
.nav-close:hover:before,
 +
.nav-close:hover:after {
 +
    background: rgb(255,255,255);
 +
}
 +
 
 +
.nav ul {
 +
    padding: 90px 9% 5%;
 +
    list-style: none;
 +
    counter-reset: item;
 +
}
 +
 
 +
.nav li:before {
 +
    display: block;
 +
    float: right;
 +
    padding-right: 4%;
 +
    padding-left: 5px;
 +
    text-align: right;
 +
    font-size: 1.2rem;
 +
    vertical-align: bottom;
 +
    color: #B8B8B8;
 +
    content: counter(item, lower-roman);
 +
    counter-increment: item;
 +
}
 +
.nav li {
 +
    margin: 0;
 +
}
 +
.nav li a {
 +
    text-decoration: none;
 +
    line-height: 1.4;
 +
    font-size: 1.4rem;
 +
    display: block;
 +
    padding: 0.6rem 4%;
 +
    overflow: hidden;
 +
    white-space: nowrap;
 +
    text-overflow: ellipsis;
 +
}
 +
.nav li a:after {
 +
    display: inline-block;
 +
    content: " .......................................................";
 +
    color: rgba(255,255,255,0.2);
 +
    margin-left: 5px;
 +
}
 +
.nav .nav-current:before {
 +
    color: #fff;
 +
}
 +
.nav .nav-current a:after {
 +
    content: " ";
 +
    border-bottom: rgba(255,255,255,0.5) 1px solid;
 +
    width: 100%;
 +
    height: 1px;
 +
}
 +
 
 +
.nav a:link,
 +
.nav a:visited {
 +
    color: #B8B8B8;
 +
}
 +
 
 +
.nav li.nav-current a,
 +
.nav a:hover,
 +
.nav a:active,
 +
.nav a:focus {
 +
    color: #fff;
 +
}
 +
 
 +
.subscribe-button {
 +
    -webkit-box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
    box-sizing: border-box;
 +
    display: block;
 +
    position: absolute;
 +
    bottom: 30px;
 +
    left: 30px;
 +
    right: 30px;
 +
    height: 38px;
 +
    padding: 0 20px;
 +
    color: #111 !important; /* Overides `.nav a:link, .nav a:visited` colour */
 +
    text-align: center;
 +
    font-size: 12px;
 +
    font-family: "Raleway", sans-serif;
 +
    text-transform: uppercase;
 +
    text-decoration: none;
 +
    line-height: 35px;
 +
    border-radius: 3px;
 +
    background: #fff;
 +
    transition: all ease 0.3s;
 +
}
 +
.subscribe-button:before {
 +
    font-size: 9px;
 +
    margin-right: 6px;
 +
}
 +
 
 +
 
 +
/* Create a bouncing scroll-down arrow on homepage with cover image */
 +
.scroll-down {
 +
    display: block;
 +
    position: absolute;
 +
    z-index: 100;
 +
    bottom: 45px;
 +
    left: 50%;
 +
    margin-left: -16px;
 +
    width: 34px;
 +
    height: 34px;
 +
    font-size: 34px;
 +
    text-align: center;
 +
    text-decoration: none;
 +
    color: rgba(255,255,255,0.7);
 +
    -webkit-transform: rotate(-90deg);
 +
    -ms-transform: rotate(-90deg);
 +
    transform: rotate(-90deg);
 +
    -webkit-animation: bounce 4s 2s infinite;
 +
    animation: bounce 4s 2s infinite;
 +
}
 +
 
 +
/* Stop it bouncing and increase contrast when hovered */
 +
.scroll-down:hover {
 +
    color: #fff;
 +
    -webkit-animation: none;
 +
    animation: none;
 +
}
 +
 
 +
/* Put a semi-opaque radial gradient behind the icon to make it more visible
 +
  on photos which happen to have a light background. */
 +
.home-template .main-header:after {
 +
    display: block;
 +
    content: " ";
 +
    width: 150px;
 +
    height: 130px;
 +
    border-radius: 100%;
 +
    position: absolute;
 +
    bottom: 0;
 +
    left: 50%;
 +
    margin-left: -75px;
 +
    background: radial-gradient(ellipse at center,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
 +
}
 +
 
 +
/* Hide when there's no cover image or on page2+ */
 +
.no-cover .scroll-down,
 +
.no-cover.main-header:after,
 +
.archive-template .scroll-down,
 +
.archive-template .main-header:after {
 +
    display: none
 +
}
 +
 
 +
/* Appears in the top left corner of your home page */
 +
.blog-logo {
 +
    display: block;
 +
    float: left;
 +
    background: none !important; /* Makes sure there is never a background */
 +
    border: none !important; /* Makes sure there is never a border */
 +
}
 +
 
 +
.blog-logo img {
 +
    -webkit-box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
    box-sizing: border-box;
 +
    display: block;
 +
    height: 38px;
 +
    padding: 1px 0 5px 0;
 +
    width: auto;
 +
}
 +
 
 +
.menu-button {
 +
    -webkit-box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
    box-sizing: border-box;
 +
    display: inline-block;
 +
    float: right;
 +
    height: 38px;
 +
    padding: 0 15px;
 +
    border-style: solid;
 +
    border-width: 1px;
 +
    opacity: 1;
 +
    text-align: center;
 +
    font-size: 12px;
 +
    text-transform: uppercase;
 +
    line-height: 35px;
 +
    white-space: nowrap;
 +
    border-radius: 3px;
 +
    transition: all 0.5s ease;
 +
}
 +
.menu-button:before {
 +
    font-size: 12px;
 +
    font-weight: bold;
 +
    margin-right: 6px;
 +
    position: relative;
 +
    top: 1px;
 +
}
 +
.menu-button:hover {
 +
    background: #fff;
 +
}
 +
.menu-button:focus {
 +
    outline: 0;
 +
}
 +
 
 +
/* When the navigation is closed */
 +
.nav-closed .menu-button {
 +
    color: #fff;
 +
    border-color: rgba(255, 255, 255, 0.6);
 +
}
 +
.nav-closed .menu-button:hover {
 +
    color: #222;
 +
}
 +
 
 +
/* When the navigation is closed and there is no cover image */
 +
.nav-closed .no-cover .menu-button {
 +
    border-color: #BFC8CD;
 +
    color: #9EABB3;
 +
}
 +
.nav-closed .no-cover .menu-button:hover {
 +
    border-color: #555;
 +
    color: #555;
 +
}
 +
 
 +
/* When the navigation is opened */
 +
.nav-opened .menu-button {
 +
    padding: 0 12px;
 +
    background: #111;
 +
    border-color: #111;
 +
    color: #fff;
 +
    -webkit-transform: translate3D(94px, 0, 0);
 +
        -ms-transform: translate3D(94px, 0, 0);
 +
            transform: translate3D(94px, 0, 0);
 +
    transition: all 0.3s ease;
 +
}
 +
 
 +
.nav-opened .menu-button .word {
 +
    opacity: 0;
 +
    transition: all 0.3s ease;
 +
}
 +
 
 +
/* Special styles when overlaid on an image*/
 +
.main-nav.overlay {
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    right: 0;
 +
    height: 70px;
 +
    border: none;
 +
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
 +
}
 +
.no-cover .main-nav.overlay {
 +
    background: none;
 +
}
 +
 
 +
/* The details of your blog. Defined in ghost/settings/ */
 +
.page-title {
 +
    margin: 10px 0 10px 0;
 +
    font-size: 5rem;
 +
    letter-spacing: -1px;
 +
    font-weight: 700;
 +
    font-family: "Raleway", sans-serif;
 +
    color: #fff;
 +
}
 +
 
 +
.page-description {
 +
    margin: 0;
 +
    font-size: 2rem;
 +
    line-height: 1.5em;
 +
    font-weight: 400;
 +
    font-family: "Lato", serif;
 +
    letter-spacing: 0.01rem;
 +
    color: rgba(255,255,255,0.8);
 +
}
 +
 
 +
.no-cover.main-header {
 +
    min-height: 160px;
 +
    max-height: 40vh;
 +
    background: #f5f8fa;
 +
}
 +
 
 +
.no-cover .page-title {
 +
    color: rgba(0,0,0,0.8);
 +
}
 +
 
 +
.no-cover .page-description {
 +
    color: rgba(0,0,0,0.5);
 +
}
 +
 
 +
/* Add subtle load-in animation for content on the home page */
 +
.home-template .page-title {
 +
    -webkit-animation: fade-in-down 0.6s;
 +
    animation: fade-in-down 0.6s;
 +
    -webkit-animation-delay: 0.2s;
 +
    animation-delay: 0.2s;
 +
}
 +
.home-template .page-description {
 +
    -webkit-animation: fade-in-down 0.9s;
 +
    animation: fade-in-down 0.9s;
 +
    -webkit-animation-delay: 0.1s;
 +
    animation-delay: 0.1s;
 +
}
 +
 
 +
/* Every post, on every page, gets this style on its <article> tag */
 +
.post {
 +
    position: relative;
 +
    width: 80%;
 +
    max-width: 710px;
 +
    margin: 4rem auto;
 +
    padding-bottom: 4rem;
 +
    border-bottom: #EBF2F6 1px solid;
 +
    word-wrap: break-word;
 +
}
 +
 
 +
/* Add a little circle in the middle of the border-bottom on our .post
 +
  just for the lolz and stylepoints. */
 +
.post:after {
 +
    display: block;
 +
    content: "";
 +
    width: 7px;
 +
    height: 7px;
 +
    border: #E7EEF2 1px solid;
 +
    position: absolute;
 +
    bottom: -5px;
 +
    left: 50%;
 +
    margin-left: -5px;
 +
    background: #FFF;
 +
    border-radius: 100%;
 +
    box-shadow: #FFF 0 0 0 5px;
 +
}
 +
 
 +
body:not(.post-template) .post-title {
 +
    font-size: 3.6rem;
 +
}
 +
 
 +
.post-title a {
 +
    text-decoration: none;
 +
}
 +
 
 +
.post-excerpt p {
 +
    margin: 0;
 +
    font-size: 0.9em;
 +
    line-height: 1.7em;
 +
}
 +
 
 +
.read-more {
 +
    text-decoration: none;
 +
}
 +
 
 +
.post-meta {
 +
    display: block;
 +
    margin: 1.75rem 0 0 0;
 +
    font-family: "Raleway", sans-serif;
 +
    font-size: 1.5rem;
 +
    line-height: 2.2rem;
 +
    color: #9EABB3;
 +
}
 +
 
 +
.author-thumb {
 +
    width: 24px;
 +
    height: 24px;
 +
    float: left;
 +
    margin-right: 9px;
 +
    border-radius: 100%;
 +
}
 +
 
 +
.post-meta a {
 +
    color: #9EABB3;
 +
    text-decoration: none;
 +
}
 +
 
 +
.post-meta a:hover {
 +
    text-decoration: underline;
 +
}
 +
 
 +
.user-meta {
 +
    position: relative;
 +
    padding: 0.3rem 40px 0 100px;
 +
    min-height: 77px;
 +
}
 +
 
 +
.post-date {
 +
    display: inline-block;
 +
    margin-left: 8px;
 +
    padding-left: 12px;
 +
    border-left: #d5dbde 1px solid;
 +
    text-transform: uppercase;
 +
    font-size: 1.3rem;
 +
    white-space: nowrap;
 +
}
 +
 
 +
.user-image {
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
}
 +
 
 +
.user-name {
 +
    display: block;
 +
    font-weight: 700;
 +
}
 +
 
 +
.user-bio {
 +
    display: block;
 +
    max-width: 440px;
 +
    font-size: 1.4rem;
 +
    line-height: 1.5em;
 +
}
 +
 
 +
.publish-meta {
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    padding: 4.3rem 0 4rem 0;
 +
    text-align: right;
 +
}
 +
 
 +
.publish-heading {
 +
    display: block;
 +
    font-weight: 700;
 +
}
 +
 
 +
.publish-date {
 +
    display: block;
 +
    font-size: 1.4rem;
 +
    line-height: 1.5em;
 +
}
 +
 
 +
 
 +
/* ==========================================================================
 +
  5. Single Post - When you click on an individual post
 +
  ========================================================================== */
 +
 
 +
.post-template .post-header {
 +
  margin-bottom: 3.4rem;
 +
}
 +
 
 +
.post-template .post-title {
 +
    margin-bottom: 0;
 +
}
 +
 
 +
.post-template .post-meta {
 +
    margin: 0;
 +
}
 +
 
 +
.post-template .post-date {
 +
    padding: 0;
 +
    margin: 0;
 +
    border: none;
 +
}
 +
 
 +
/* Stop elements, such as img wider than the post content, from
 +
  creating horizontal scroll - slight hack due to imperfections
 +
  with browser width % calculations and rounding */
 +
.post-template .content {
 +
    overflow: hidden;
 +
    margin-top: 100px;
 +
}
 +
 
 +
/* Tweak the .post wrapper style */
 +
.post-template .post {
 +
    margin-top: 0;
 +
    border-bottom: none;
 +
    padding-bottom: 0;
 +
}
 +
 
 +
/* Kill that stylish little circle that was on the border, too */
 +
.post-template .post:after {
 +
    display: none;
 +
}
 +
 
 +
/* Keep images centered, and allow images wider than the main
 +
  text column to break out. */
 +
.post-content img {
 +
    display: block;
 +
    max-width: 126%;
 +
    height: auto;
 +
    padding: 0.6em 0;
 +
    /* Centers an image by (1) pushing its left edge to the
 +
      center of its container and (2) shifting the entire image
 +
      in the opposite direction by half its own width.
 +
      Works for images that are larger than their containers. */
 +
    position: relative;
 +
    left: 50%;
 +
    -webkit-transform: translateX(-50%); /* for Safari and iOS */
 +
    -ms-transform: translateX(-50%); /* for IE9 */
 +
    transform: translateX(-50%);
 +
}
 +
 
 +
.footnotes {
 +
    font-style: italic;
 +
    font-size: 1.3rem;
 +
    line-height: 1.6em;
 +
}
 +
 
 +
.footnotes li {
 +
    margin: 0.6rem 0;
 +
}
 +
 
 +
.footnotes p {
 +
    margin: 0;
 +
}
 +
 
 +
.footnotes p a:last-child {
 +
    text-decoration: none;
 +
}
 +
 
 +
 
 +
/* The author credit area after the post */
 +
.post-footer {
 +
    position: relative;
 +
    margin: 6rem 0 0 0;
 +
    padding: 6rem 0 0 0;
 +
    border-top: #EBF2F6 1px solid;
 +
}
 +
 
 +
.post-footer h4 {
 +
    font-size: 1.8rem;
 +
    margin: 0;
 +
}
 +
 
 +
.post-footer p {
 +
    margin: 1rem 0;
 +
    font-size: 1.4rem;
 +
    line-height: 1.75em;
 +
}
 +
 
 +
/* list of author links - location / url */
 +
.author-meta {
 +
    padding: 0;
 +
    margin: 0;
 +
    list-style: none;
 +
    font-size: 1.4rem;
 +
    line-height: 1;
 +
    font-style: italic;
 +
    color: #9EABB3;
 +
}
 +
 
 +
.author-meta a {
 +
    color: #9EABB3;
 +
}
 +
.author-meta a:hover {
 +
    color: #111;
 +
}
 +
 
 +
/* Create some space to the right for the share links */
 +
.post-footer .author {
 +
    margin-right: 180px;
 +
}
 +
 
 +
.post-footer h4 a {
 +
    color: #2e2e2e;
 +
    text-decoration: none;
 +
}
 +
 
 +
.post-footer h4 a:hover {
 +
    text-decoration: underline;
 +
}
 +
 
 +
/* Drop the share links in the space to the right.
 +
  Doing it like this means it's easier for the author bio
 +
  to be flexible at smaller screen sizes while the share
 +
  links remain at a fixed width the whole time */
 +
.post-footer .share {
 +
    position: absolute;
 +
    top: 6rem;
 +
    right: 0;
 +
    width: 140px;
 +
}
 +
 
 +
.post-footer .share a {
 +
    font-size: 1.8rem;
 +
    display: inline-block;
 +
    margin: 1rem 1.6rem 1.6rem 0;
 +
    color: #BBC7CC;
 +
    text-decoration: none;
 +
}
 +
 
 +
.post-footer .share .icon-twitter:hover {
 +
    color: #55acee;
 +
}
 +
.post-footer .share .icon-facebook:hover {
 +
    color: #3b5998;
 +
}
 +
.post-footer .share .icon-google-plus:hover {
 +
    color: #dd4b39;
 +
}
 +
 
 +
 
 +
/* ==========================================================================
 +
  6. Author profile
 +
  ========================================================================== */
 +
 
 +
.post-head.main-header {
 +
    height: 65vh;
 +
    min-height: 180px;
 +
}
 +
 
 +
.no-cover.post-head.main-header {
 +
    height: 85px;
 +
    min-height: 0;
 +
    margin-bottom: 0;
 +
    background: transparent;
 +
}
 +
 
 +
.tag-head.main-header {
 +
    height: 40vh;
 +
    min-height: 180px;
 +
}
 +
 
 +
.author-head.main-header {
 +
    height: 40vh;
 +
    min-height: 180px;
 +
}
 +
 
 +
.no-cover.author-head.main-header {
 +
    height: 10vh;
 +
    min-height: 100px;
 +
    background: transparent;
 +
}
 +
 
 +
.author-profile {
 +
    padding: 0 15px 5rem 15px;
 +
    border-bottom: #EBF2F6 1px solid;
 +
    text-align: center;
 +
}
 +
 
 +
/* Add a little circle in the middle of the border-bottom */
 +
.author-profile:after {
 +
    display: block;
 +
    content: "";
 +
    width: 7px;
 +
    height: 7px;
 +
    border: #E7EEF2 1px solid;
 +
    position: absolute;
 +
    bottom: -5px;
 +
    left: 50%;
 +
    margin-left: -5px;
 +
    background: #FFF;
 +
    border-radius: 100%;
 +
    box-shadow: #FFF 0 0 0 5px;
 +
}
 +
 
 +
.author-image {
 +
    -webkit-box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
    box-sizing: border-box;
 +
    display: block;
 +
    position: absolute;
 +
    top: -40px;
 +
    left: 50%;
 +
    margin-left: -40px;
 +
    width: 80px;
 +
    height: 80px;
 +
    border-radius: 100%;
 +
    overflow: hidden;
 +
    padding: 6px;
 +
    background: #fff;
 +
    z-index: 2;
 +
    box-shadow: #E7EEF2 0 0 0 1px;
 +
}
 +
 
 +
.author-image .img {
 +
    position: relative;
 +
    display: block;
 +
    width: 100%;
 +
    height: 100%;
 +
    background-size: cover;
 +
    background-position: center center;
 +
    border-radius: 100%;
 +
}
 +
 
 +
.author-profile .author-image {
 +
    position: relative;
 +
    left: auto;
 +
    top: auto;
 +
    width: 120px;
 +
    height: 120px;
 +
    padding: 3px;
 +
    margin: -100px auto 0 auto;
 +
    box-shadow: none;
 +
}
 +
 
 +
.author-title {
 +
    margin: 1.5rem 0 1rem;
 +
}
 +
 
 +
.author-bio {
 +
    font-size: 1.8rem;
 +
    line-height: 1.5em;
 +
    font-weight: 200;
 +
    color: #50585D;
 +
    letter-spacing: 0;
 +
    text-indent: 0;
 +
}
 +
 
 +
.author-meta {
 +
    margin: 1.6rem 0;
 +
}
 +
/* Location, website, and link */
 +
.author-profile .author-meta {
 +
    margin: 2rem 0;
 +
    font-family: "Lato", serif;
 +
    letter-spacing: 0.01rem;
 +
    font-size: 1.7rem;
 +
}
 +
.author-meta span {
 +
    display: inline-block;
 +
    margin: 0 2rem 1rem 0;
 +
    word-wrap: break-word;
 +
}
 +
.author-meta a {
 +
    text-decoration: none;
 +
}
 +
 
 +
/* Turn off meta for page2+ to make room for extra
 +
  pagination prev/next links */
 +
.archive-template .author-profile .author-meta {
 +
    display: none;
 +
}
 +
 
 +
 
 +
/* ==========================================================================
 +
  7. Read More - Next/Prev Post Links
 +
  ========================================================================== */
 +
 
 +
.read-next {
 +
    display: -webkit-box;
 +
    display: -webkit-flex;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-align: stretch;
 +
    -webkit-align-items: stretch;
 +
    -ms-flex-align: stretch;
 +
    align-items: stretch;
 +
    margin-top: 10rem;
 +
}
 +
 
 +
.read-next-story {
 +
    display: -webkit-box;
 +
    display: -webkit-flex;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
    -webkit-box-flex: 1;
 +
    -webkit-flex-grow: 1;
 +
    -ms-flex-positive: 1;
 +
    flex-grow: 1;
 +
    min-width: 50%;
 +
    text-decoration: none;
 +
    position: relative;
 +
    text-align: center;
 +
    color: #fff;
 +
    background: #222 no-repeat center center;
 +
    background-size: cover;
 +
    overflow: hidden;
 +
}
 +
.read-next-story:hover:before {
 +
    background: rgba(0,0,0,0.8);
 +
    transition: all 0.2s ease;
 +
}
 +
.read-next-story:hover .post:before {
 +
    color: #222;
 +
    background: #fff;
 +
    transition: all 0.2s ease;
 +
}
 +
 
 +
.read-next-story:before {
 +
    content: "";
 +
    display: block;
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    background: rgba(0,0,0,0.7);
 +
    transition: all 0.5s ease;
 +
}
 +
 
 +
.read-next-story .post {
 +
    padding-top: 6rem;
 +
    padding-bottom: 6rem;
 +
}
 +
 
 +
.read-next-story .post:before {
 +
    content: "Read This Next";
 +
    padding: 4px 10px 5px;
 +
    text-transform: uppercase;
 +
    font-size: 1.1rem;
 +
    font-family: "Raleway", sans-serif;
 +
    color: rgba(255,255,255,0.8);
 +
    border: rgba(255,255,255,0.5) 1px solid;
 +
    border-radius: 4px;
 +
    transition: all 0.5s ease;
 +
}
 +
.read-next-story.prev .post:before {
 +
    content: "You Might Enjoy";
 +
}
 +
 
 +
.read-next-story h2 {
 +
    margin-top: 1rem;
 +
    color: #fff;
 +
}
 +
 
 +
.read-next-story p {
 +
    margin: 0;
 +
    color: rgba(255,255,255,0.8);
 +
}
 +
 
 +
/* Special styles for posts with no cover images */
 +
.read-next-story.no-cover {
 +
    background: #f5f8fa;
 +
}
 +
 
 +
.read-next-story.no-cover:before {
 +
    display: none;
 +
}
 +
 
 +
.read-next-story.no-cover .post:before {
 +
    color: rgba(0,0,0,0.5);
 +
    border-color: rgba(0,0,0,0.2);
 +
}
 +
 
 +
.read-next-story.no-cover h2 {
 +
    color: rgba(0,0,0,0.8);
 +
}
 +
 
 +
.read-next-story.no-cover p {
 +
    color: rgba(0,0,0,0.5);
 +
}
 +
 
 +
/* if there are two posts without covers, put a border between them */
 +
.read-next-story.no-cover + .read-next-story.no-cover {
 +
    border-left: rgba(0,0,100,0.04) 1px solid;
 +
    -webkit-box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
    box-sizing: border-box;
 +
}
 +
 
 +
/* Correctly position site-footer when next to the .read-next container */
 +
.read-next + .site-footer {
 +
    position: absolute;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    margin: 0;
 +
}
 +
 
 +
/* ==========================================================================
 +
  8. Third Party Elements - Embeds from other services
 +
  ========================================================================== */
 +
 
 +
/* Github */
 +
.gist table {
 +
    margin: 0;
 +
    font-size: 1.4rem;
 +
}
 +
.gist td {
 +
    line-height: 1.4;
 +
}
 +
.gist .line-number {
 +
    min-width: 25px;
 +
}
 +
 
 +
/* Pastebin */
 +
.content .embedPastebin {
 +
    margin-bottom: 1.75em;
 +
}
 +
 
 +
 
 +
/* ==========================================================================
 +
  9. Pagination - Tools to let you flick between pages
 +
  ========================================================================== */
 +
 
 +
/* The main wrapper for our pagination links */
 +
.pagination {
 +
    position: relative;
 +
    width: 80%;
 +
    max-width: 710px;
 +
    margin: 4rem auto;
 +
    font-family: "Raleway", sans-serif;
 +
    font-size: 1.3rem;
 +
    color: #9EABB3;
 +
    text-align: center;
 +
}
 +
 
 +
.pagination a {
 +
    color: #9EABB3;
 +
    transition: all 0.2s ease;
 +
}
 +
 
 +
/* Push the previous/next links out to the left/right */
 +
.older-posts,
 +
.newer-posts {
 +
    position: absolute;
 +
    display: inline-block;
 +
    padding: 0 15px;
 +
    border: #bfc8cd 1px solid;
 +
    text-decoration: none;
 +
    border-radius: 4px;
 +
    transition: border 0.3s ease;
 +
}
 +
 
 +
.older-posts {
 +
    right: 0;
 +
}
 +
 
 +
.page-number {
 +
    display: inline-block;
 +
    padding: 2px 0;
 +
    min-width: 100px;
 +
}
 +
 
 +
.newer-posts {
 +
    left: 0;
 +
}
 +
 
 +
.older-posts:hover,
 +
.newer-posts:hover {
 +
    color: #889093;
 +
    border-color: #98a0a4;
 +
}
 +
 
 +
.extra-pagination {
 +
    display: none;
 +
    border-bottom: #EBF2F6 1px solid;
 +
}
 +
.extra-pagination:after {
 +
    display: block;
 +
    content: "";
 +
    width: 7px;
 +
    height: 7px;
 +
    border: #E7EEF2 1px solid;
 +
    position: absolute;
 +
    bottom: -5px;
 +
    left: 50%;
 +
    margin-left: -5px;
 +
    background: #FFF;
 +
    border-radius: 100%;
 +
    box-shadow: #FFF 0 0 0 5px;
 +
}
 +
.extra-pagination .pagination {
 +
    width: auto;
 +
}
 +
 
 +
/* On page2+ make all the headers smaller */
 +
.archive-template .main-header {
 +
    max-height: 30vh;
 +
}
 +
 
 +
/* On page2+ show extra pagination controls at the top of post list */
 +
.archive-template .extra-pagination {
 +
    display: block;
 +
}
 +
 
 +
 
 +
/* ==========================================================================
 +
  10. Footer - The bottom of every page
 +
  ========================================================================== */
 +
 
 +
.site-footer {
 +
    position: relative;
 +
    margin: 8rem 0 0 0;
 +
    padding: 1rem 15px;
 +
    font-family: "Raleway", sans-serif;
 +
    font-size: 1rem;
 +
    line-height: 1.75em;
 +
    color: #BBC7CC;
 +
}
 +
 
 +
.site-footer a {
 +
    color: #BBC7CC;
 +
    text-decoration: none;
 +
    font-weight: bold;
 +
}
 +
 
 +
.site-footer a:hover {
 +
    border-bottom: #bbc7cc 1px solid;
 +
}
 +
 
 +
.poweredby {
 +
    display: block;
 +
    width: 45%;
 +
    float: right;
 +
    text-align: right;
 +
}
 +
 
 +
.copyright {
 +
    display: block;
 +
    width: 45%;
 +
    float: left;
 +
}
 +
 
 +
 
 +
/* ==========================================================================
 +
  11. Media Queries - Smaller than 900px
 +
  ========================================================================== */
 +
 
 +
@media only screen and (max-width: 900px) {
 +
 
 +
    blockquote {
 +
        margin-left: 0;
 +
    }
 +
 
 +
    .main-header {
 +
        -webkit-box-sizing: border-box;
 +
        -moz-box-sizing: border-box;
 +
        box-sizing: border-box;
 +
        height: auto;
 +
        min-height: 240px;
 +
        height: 60vh;
 +
        padding: 15% 0;
 +
    }
 +
 
 +
    .scroll-down,
 +
    .home-template .main-header:after { display: none; }
 +
 
 +
    .archive-template .main-header {
 +
        min-height: 180px;
 +
        padding: 10% 0;
 +
    }
 +
 
 +
    .blog-logo img {
 +
        padding: 4px 0;
 +
    }
 +
 
 +
    .page-title {
 +
        font-size: 4rem;
 +
        letter-spacing: -1px;
 +
    }
 +
 
 +
    .page-description {
 +
        font-size: 1.8rem;
 +
        line-height: 1.5em;
 +
    }
 +
 
 +
    .post {
 +
        font-size: 0.95em
 +
    }
 +
 
 +
    body:not(.post-template) .post-title {
 +
        font-size: 3.2rem;
 +
    }
 +
 
 +
    hr {
 +
        margin: 2.4em 0;
 +
    }
 +
 
 +
    ol, ul {
 +
        padding-left: 2em;
 +
    }
 +
 
 +
    h1 {
 +
        font-size: 4.5rem;
 +
        text-indent: -2px;
 +
    }
 +
 
 +
    h2 {
 +
        font-size: 3.6rem;
 +
    }
 +
 
 +
    h3 {
 +
        font-size: 3.1rem;
 +
    }
 +
 
 +
    h4 {
 +
        font-size: 2.5rem;
 +
    }
 +
 
 +
    h5 {
 +
        font-size: 2.2rem;
 +
    }
 +
 
 +
    h6 {
 +
        font-size: 1.8rem;
 +
    }
 +
 
 +
    .author-profile {
 +
        padding-bottom: 4rem;
 +
    }
 +
 
 +
    .author-profile .author-bio {
 +
        font-size: 1.6rem;
 +
    }
 +
 
 +
    .author-meta span {
 +
        display: block;
 +
        margin: 1.5rem 0;
 +
    }
 +
    .author-profile .author-meta span {
 +
        font-size: 1.6rem;
 +
    }
 +
 
 +
    .post-head.main-header {
 +
        height:45vh;
 +
    }
 +
 
 +
    .tag-head.main-header,
 +
    .author-head.main-header {
 +
        height: 30vh;
 +
    }
 +
 
 +
    .no-cover.post-head.main-header {
 +
        height: 55px;
 +
        padding: 0;
 +
    }
 +
 
 +
    .no-cover.author-head.main-header {
 +
        padding: 0;
 +
    }
 +
 
 +
    .read-next {
 +
        -webkit-box-orient: vertical;
 +
        -webkit-box-direction: normal;
 +
        -webkit-flex-direction: column;
 +
        -ms-flex-direction: column;
 +
        flex-direction: column;
 +
        margin-top: 4rem;
 +
    }
 +
 
 +
    .read-next p {
 +
        display: none;
 +
    }
 +
 
 +
    .read-next-story.no-cover + .read-next-story.no-cover {
 +
        border-top: rgba(0,0,100,0.06) 1px solid;
 +
        border-left: none;
 +
    }
 +
 
 +
}
 +
 
 +
 
 +
/* ==========================================================================
 +
  12. Media Queries - Smaller than 500px
 +
  ========================================================================== */
 +
 
 +
@media only screen and (max-width: 500px) {
 +
 
 +
    .main-header {
 +
        margin-bottom: 15px;
 +
        height: 40vh;
 +
    }
 +
 
 +
    .no-cover.main-header {
 +
        height: 30vh;
 +
    }
 +
 
 +
    .archive-template .main-header {
 +
        max-height: 20vh;
 +
        min-height: 160px;
 +
        padding: 10% 0;
 +
    }
 +
 
 +
    .main-nav {
 +
        padding: 5px;
 +
        margin-bottom: 2rem;
 +
    }
 +
 
 +
    .blog-logo {
 +
        padding: 5px;
 +
    }
 +
 
 +
    .blog-logo img {
 +
        height: 30px;
 +
    }
 +
 
 +
    .menu-button {
 +
        padding: 0 5px;
 +
        border-radius: 0;
 +
        border-width: 0;
 +
        color: #2e2e2e;
 +
        background: transparent;
 +
    }
 +
    .menu-button:hover {
 +
        color: #2e2e2e;
 +
        border-color: transparent;
 +
        background: none;
 +
    }
 +
    body.nav-opened .menu-button {
 +
        background: none;
 +
        border: transparent;
 +
    }
 +
 
 +
    .main-nav.overlay a:hover {
 +
        color: #fff;
 +
        border-color: transparent;
 +
        background: transparent;
 +
    }
 +
 
 +
    .no-cover .main-nav.overlay {
 +
        background: none;
 +
    }
 +
    .no-cover .main-nav.overlay .menu-button {
 +
        border: none;
 +
    }
 +
 
 +
    .main-nav.overlay .menu-button {
 +
        border-color: transparent;
 +
    }
 +
 
 +
    .nav-title {
 +
        top: 25px;
 +
 
 +
    }
 +
 
 +
    .nav-close {
 +
        position: absolute;
 +
        top: 18px;
 +
    }
 +
 
 +
    .nav ul {
 +
        padding: 60px 9% 5%;
 +
    }
 +
 
 +
    .inner,
 +
    .pagination {
 +
        width: auto;
 +
        margin: 2rem auto;
 +
    }
 +
 
 +
    .post {
 +
        width: auto;
 +
        margin-top: 2rem;
 +
        margin-bottom: 2rem;
 +
        margin-left: 16px;
 +
        margin-right: 16px;
 +
        padding-bottom: 2rem;
 +
        line-height: 1.65em;
 +
    }
 +
 
 +
    .post-date {
 +
        display: none;
 +
    }
 +
 
 +
    .post-template .post-header {
 +
        margin-bottom: 2rem;
 +
    }
 +
 
 +
    .post-template .post-date {
 +
        display: inline-block;
 +
    }
 +
 
 +
    hr {
 +
        margin: 1.75em 0;
 +
    }
 +
 
 +
    p, ul, ol, dl {
 +
        font-size: 0.95em;
 +
        margin: 0 0 2.5rem 0;
 +
    }
 +
 
 +
    .page-title {
 +
        font-size: 3rem;
 +
    }
 +
 
 +
    .post-excerpt p {
 +
        font-size: 0.85em;
 +
    }
 +
 
 +
    .page-description {
 +
        font-size: 1.6rem;
 +
    }
 +
 
 +
    h1, h2, h3,
 +
    h4, h5, h6 {
 +
        margin: 0 0 0.3em 0;
 +
    }
 +
 
 +
    h1 {
 +
        font-size: 2.8rem;
 +
        letter-spacing: -1px;
 +
    }
 +
 
 +
    h2 {
 +
        font-size: 2.4rem;
 +
        letter-spacing: 0;
 +
    }
 +
 
 +
    h3 {
 +
        font-size: 2.1rem;
 +
    }
 +
 
 +
    h4 {
 +
        font-size: 1.9rem;
 +
    }
 +
 
 +
    h5 {
 +
        font-size: 1.8rem;
 +
    }
 +
 
 +
    h6 {
 +
        font-size: 1.8rem;
 +
    }
 +
 
 +
    body:not(.post-template) .post-title {
 +
        font-size: 2.5rem;
 +
    }
 +
 
 +
    .post-template .site-footer {
 +
        margin-top: 0;
 +
    }
 +
 
 +
    .post-content img {
 +
        padding: 0;
 +
        width: calc(100% + 32px); /* expand with to image + margins */
 +
        min-width: 0;
 +
        max-width: 112%; /* fallback when calc doesn't work */
 +
    }
 +
 
 +
    .post-meta {
 +
        font-size: 1.3rem;
 +
        margin-top: 1rem;
 +
    }
 +
 
 +
    .post-footer {
 +
        padding: 5rem 0 3rem 0;
 +
        text-align: center;
 +
    }
 +
 
 +
    .post-footer .author {
 +
        margin: 0 0 2rem 0;
 +
        padding: 0 0 1.6rem 0;
 +
        border-bottom: #EBF2F6 1px dashed;
 +
    }
 +
 
 +
    .post-footer .share {
 +
        position: static;
 +
        width: auto;
 +
    }
 +
 
 +
    .post-footer .share a {
 +
        margin: 1.4rem 0.8rem 0 0.8rem;
 +
    }
 +
 
 +
    .author-meta li {
 +
        float: none;
 +
        margin: 0;
 +
        line-height: 1.75em;
 +
    }
 +
 
 +
    .author-meta li:before {
 +
        display: none;
 +
    }
 +
 
 +
    .older-posts,
 +
    .newer-posts {
 +
        position: static;
 +
        margin: 10px 0;
 +
    }
 +
 
 +
    .page-number {
 +
        display: block;
 +
    }
 +
 
 +
    .site-footer {
 +
        margin-top: 3rem;
 +
    }
 +
 
 +
    .author-profile {
 +
        padding-bottom: 2rem;
 +
    }
 +
 
 +
    .post-head.main-header {
 +
        height: 30vh;
 +
    }
 +
 
 +
    .tag-head.main-header,
 +
    .author-head.main-header {
 +
        height: 20vh;
 +
    }
 +
 
 +
    .author-profile .author-image {
 +
        margin-top: -70px;
 +
    }
 +
 
 +
    .author-profile .author-meta span {
 +
        font-size: 1.4rem;
 +
    }
 +
 
 +
    .archive-template .main-header .page-description {
 +
        display: none;
 +
    }
 +
 
 +
    .read-next {
 +
        margin-top: 2rem;
 +
        margin-bottom: -37px;
 +
    }
 +
 
 +
    .read-next .post {
 +
        width: 100%;
 +
    }
 +
 
 +
}
 +
 
 +
 
 +
/* ==========================================================================
 +
  13. Animations
 +
  ========================================================================== */
 +
 
 +
/* Used to fade in title/desc on the home page */
 +
@-webkit-keyframes fade-in-down {
 +
    0% {
 +
        opacity: 0;
 +
        -webkit-transform: translateY(-10px);
 +
        transform: translateY(-10px);
 +
    }
 +
    100% {
 +
        opacity: 1;
 +
        -webkit-transform: translateY(0);
 +
        transform: translateY(0);
 +
    }
 +
}
 +
@keyframes fade-in-down {
 +
    0% {
 +
        opacity: 0;
 +
        -webkit-transform: translateY(-10px);
 +
        transform: translateY(-10px);
 +
    }
 +
    100% {
 +
        opacity: 1;
 +
        -webkit-transform: translateY(0);
 +
        transform: translateY(0);
 +
    }
 +
}
 +
 
 +
/* Used to bounce .scroll-down on home page */
 +
@-webkit-keyframes bounce {
 +
    0%, 10%, 25%, 40%, 50% {
 +
        -webkit-transform: translateY(0) rotate(-90deg);
 +
                transform: translateY(0) rotate(-90deg);
 +
    }
 +
    20% {
 +
        -webkit-transform: translateY(-10px) rotate(-90deg);
 +
                transform: translateY(-10px) rotate(-90deg);
 +
    }
 +
    30% {
 +
        -webkit-transform: translateY(-5px) rotate(-90deg);
 +
                transform: translateY(-5px) rotate(-90deg);
 +
    }
 +
}
 +
@keyframes bounce {
 +
    0%, 20%, 50%, 80%, 100% {
 +
        -webkit-transform: translateY(0) rotate(-90deg);
 +
                transform: translateY(0) rotate(-90deg);
 +
    }
 +
    40% {
 +
        -webkit-transform: translateY(-10px) rotate(-90deg);
 +
                transform: translateY(-10px) rotate(-90deg);
 +
    }
 +
    60% {
 +
        -webkit-transform: translateY(-5px) rotate(-90deg);
 +
                transform: translateY(-5px) rotate(-90deg);
 +
    }
 +
}
 +
 
 +
 
 +
/* ==========================================================================
 +
  End of file. Animations should be the last thing here. Do not add stuff
 +
  below this point, or it will probably fuck everything up.
 +
  ========================================================================== */
  
 
</style>
 
</style>

Revision as of 11:29, 2 August 2016

MENU ▤