Skip to content

Instantly share code, notes, and snippets.

@jbrennan
Created April 3, 2016 01:42
Show Gist options
  • Save jbrennan/02ccc6f2abdfc2dcfcd2a8e3da75dd2c to your computer and use it in GitHub Desktop.
Save jbrennan/02ccc6f2abdfc2dcfcd2a8e3da75dd2c to your computer and use it in GitHub Desktop.
Style for Nearthespeedoflight.com from Feb 2013 to April 2016
/* ============================== */
/* ! */
/* ! Speed of Light style ver 2.6 */
/* ! Copyright 2011 Jason Brennan */
/* ! */
/* ! February 20 2013 */
/* ! */
/* ============================== */
/* ============================== */
/* ! Layout for desktop version */
/* ============================== */
body {
height: 100%;
min-height: 100%;
border-color: #1f1f1f;
border-style: solid;
border-width: 20px;
font-family: "Hoefler Text", "Bodini", "Palatino", "Baskerville", sefif;
background-color: #f1f1f1;
text-rendering: optimizeLegibility;
}
a {
text-decoration: none;
color: black;
padding-bottom: 1px;
padding-top: 4px;
}
a:link {
/*padding-bottom: 2px;*/
border-bottom: 1px solid black;
}
a:hover {
color: white;
background-color: #323232;
border-radius: 2px;
border-bottom: 0px solid black;
-webkit-transition: background-color 120ms ease-in-out;
}
p {
font-size: 16px;
line-height: 1.3; /* means line-height is 1.3 * 16px = 20.8px */
margin-top: 1.3em;
margin-bottom: 1.3em;
}
br {
font-size: 16px;
line-height: 1.3; /* means line-height is 1.3 * 16px = 20.8px */
margin-top: 1.3em;
margin-bottom: 1.3em;
}
ol, li {
font-size: 16px;
line-height: 1.3;
margin-top: 1.3em;
margin-bottom: 1.3em;
}
time {
line-height: 1.3;
margin-top: 1.3em;
margin-bottom: 1.3em;
color: #8f8f8f;
/* font-variant: small-caps; */
}
/*
Headers
*/
h1 {
font-size: 18px;
/* In order for each line to be 20.8px tall (the line-height as seen in p{})
I must divide 20.8px / h1.font-size to get the proper line height
ie 1.155em
*/
line-height: 1.155;
margin-top: 1.155em;
margin-bottom: 1.155em;
}
h2 {
font-variant: small-caps;
font-weight: normal;
font-size: 18px;
/* In order for each line to be 20.8px tall (the line-height as seen in p{})
I must divide 20.8px / h2.font-size to get the proper line height
ie 1.155em
*/
line-height: 1.155;
margin-top: 1.155em;
margin-bottom: 1.155em;
}
h3 {
font-size: 16px;
/* In order for each line to be 20.8px tall (the line-height as seen in p{})
I must divide 20.8px / h3.font-size to get the proper line height
ie 1.3em
*/
line-height: 1.3; /* means line-height is 1.3 * 16px = 20.8px */
margin-top: 1.3em;
margin-bottom: 1.3em;
}
h4 {
font-size: 16px;
font-variant: small-caps;
font-weight: normal;
/* In order for each line to be 20.8px tall (the line-height as seen in p{})
I must divide 20.8px / h4.font-size to get the proper line height
ie 1.3em
*/
line-height: 1.3; /* means line-height is 1.3 * 16px = 20.8px */
margin-top: 1.3em;
margin-bottom: 1.3em;
}
hr {
line-height: 1.3; /* means line-height is 1.3 * 16px = 20.8px */
margin-top: 1.3em;
margin-bottom: 1.3em;
background-color: #cccccc;
border: none;
height: 1px;
margin-left: 1.3em;
margin-right: 1.3em;
}
blockquote {
font-size: 16px;
line-height: 1.3;
margin-top: 1.3em;
margin-bottom: 1.3em;
margin-left: 1.3em;
margin-right: 1.3em;
border-left: 1px dotted #8f8f8f;
padding-left: 1em;
padding-right: 1em;
}
pre {
overflow:auto;
}
code {
font-size: 0.9em;
font-weight: bold;
font-family: Menlo, Monaco, ProFont, "Bitstream Vera Sans Mono", Courier, "Andale Mono", monospace;
line-height: 1.3;
margin-top: 1.3em;
margin-bottom: 1.3em;
}
/*
body::-webkit-scrollbar {
height:8px;
width:8px;
}
body::-webkit-scrollbar-track-piece {
margin-bottom:10px;
background-color:#ccc;
border-bottom-left-radius:4px 4px;
border-bottom-right-radius:4px 4px;
border-top-left-radius:4px 4px;
border-top-right-radius:4px 4px;
}
body::-webkit-scrollbar-thumb:vertical {
height:25px;
background-color:#1f1f1f;
-webkit-border-radius:4px;
-webkit-box-shadow:0 1px 1px rgba(255,255,255,1);
}
body::-webkit-scrollbar-thumb:horizontal {
width:25px;
background-color:#ccc;
-webkit-border-radius:4px;
}
*/
/******************
* Mast stuff
*****************/
.mast_title {
font-family: "Futura-CondensedExtraBold", Futura, Verdana, sans-serif;
font-weight: bold;
font-size: 10em;
word-spacing: -0.05em;
letter-spacing: -0.04em;
text-transform: uppercase;
line-height: 1em;
margin-top: 0.75em;
margin-bottom: 0.75em;
}
a.mast_title {
color: black;
text-decoration: none;
border-style: none;
}
a.mast_title:hover {
color: black;
text-decoration: none;
border-style: none;
background-color: transparent;
}
/******************
* Article stuff
*****************/
.article_class {
/* Set the top and bottom margins so they're a multilpier of the line-height */
margin-bottom: 6.5em; /* 5x1.3em(the line-height) */
text-align: justify;
}
.article_header {
font-size: 16px;
line-height: 1.3;
margin-top: 1.3em;
margin-bottom: 1.3em;
text-align: left;
}
.article_header h1 a {
font-weight: normal;
text-decoration: none;
border-bottom: none;
}
.article_body_class {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.article_body_class ul, .article_body_class ol {
margin-left: 1.3em;
padding-left: 1em;
}
.article_body_class blockquote ul, .article_body_class blockquote ol {
margin-left: 0;
}
/******************
* Navigation stuff
*****************/
nav.pagination {
line-height: 1.3;
margin-top: 2.6em;
margin-bottom: 1.3em;
}
nav.site_navigation {
font: bold 14px Helvetica, Verdana, sans-serif;
font-size: 14px;
line-height: 1.3;
margin-top: 2.6em;
margin-bottom: 3.9em;
}
nav.site_navigation ul li {
list-style: none;
margin: 0;
display: inline;
}
nav.site_navigation li a, nav.site_navigation li a:visited {
padding: 0.25em 1.5em 0.25em 0.0em;
text-decoration: none;
color: #8F8F8F;
border-style: none;
-webkit-transition: color .15s linear;
}
nav.site_navigation li a:hover, nav.site_navigation li a:active {
color: #464646;
background-color: transparent;
}
.copyright {
line-height: 1.3;
margin-top: 6.5em;
margin-bottom: 6.5em;
}
/******************
* About page stuff
*****************/
#handsome_image_link {
border-width: 0;
background: white;
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF));
background: -moz-linear-gradient(top, #FFF, #FFF);
}
#handsome_image_link:hover {
border-width: 0;
background: white;
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF));
background: -moz-linear-gradient(top, #FFF, #FFF);
}
/* ============================= */
/* ! Layout for mobile version */
/* ============================= */
@media screen and (max-width: 767px) {
body {
border-right: 0px none transparent;
border-left: 0px none transparent;
}
.mast_title {
font-size: 4em;
font-family: Futura, Helvetica, Verdana, sans-serif;
font-weight: normal;
margin-top: 0;
margin-bottom: 0;
/*margin-top: 1.3em;*/
/* margin-bottom: 0.65em; */
line-height: 1;
}
.site_mast_title_span {
margin-top: 1.3em;
text-align: center;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment