Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Style for Nearthespeedoflight.com April 2 2016
/* ============================== */
/* ! */
/* ! Speed of Light style ver 3 */
/* ! Copyright 2016 Jason Brennan */
/* ! */
/* ! April 2 2016 */
/* ! */
/* ============================== */
/* ============================== */
/* ! Layout for desktop version */
/* ============================== */
html {
font-family: "HoeflerText-Regular", "Hoefler Text", "Bodini", "Palatino", "Baskerville", sefif;
background-color: #f1f1f1;
color: #1F1F1F;
text-rendering: optimizeLegibility;
}
body {
border-width: 2px;
border-color: #1F1F1F;
border-style: solid;
margin: 20px;
font-size: 1.375em; /* 22px */
line-height: 1.636; /* lines are 36px, 36 / 22 = 1.636 */
}
p, br, ol, li {
margin-top: 0;
margin-bottom: 1.636em; /* 36px, 36 / 22 = 1.636 */
}
blockquote {
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;
}
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;
}
hr {
background-color: #cccccc;
border: none;
height: 1px;
margin-left: 1.3em;
margin-right: 1.3em;
margin-bottom: 1.636em;
}
a.go_home {
display: block;
background-color: transparent;
height: 3em;
text-decoration: none;
border-bottom: 0;
}
/******************
* Mast stuff (is now inside #content)
*****************/
#mast {
margin-bottom: 6em;
}
.mast_title {
font-family: "Futura-CondensedExtraBold", Futura, Verdana, sans-serif;
font-weight: bold;
font-size: 7.273em; /* 160px effective size @22px html font size */
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
*****************/
#content {
width: 26.363em; /* width is 580px, 580 / 22(px, text size) = 26.63 */
/* center the content */
margin-left: auto;
margin-right: auto;
margin-top: 0;/* margin-top: 3em; */ /* 3 * 22px = 66px, disabled because we have an invisible link to go home */
}
.article_class {
text-align: justify;
margin-bottom: 6em; /* 6 * 22px = 132px */
}
.article_header {
font-size: 1.1818em; /* header size = 26px -> 26/22(px, text size) = 1.1818em */
text-align: left;
}
header.article_header h1 {
margin-top: 0;
margin-bottom: 1.636em; /* 36px, 36 / 22 = 1.636 */
}
.article_header h1 a {
font-weight: normal;
text-decoration: none;
border-bottom: none;
}
time {
color: #8f8f8f;
margin-top: -0.818em;
margin-bottom: 0.818em;
display: block;
}
.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.site_navigation {
font: bold 1em Helvetica, Verdana, sans-serif;
font-size: 1em;
line-height: 1.3;
margin-top: 2.6em;
margin-bottom: 3.9em;
width: 26.363em;
margin-left: auto;
margin-right: auto;
}
.nav_list {
padding: 0;
}
nav.site_navigation ul li {
list-style: none;
}
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 {
margin-top: 6.5em;
margin-bottom: 6.5em;
}
/* ============================= */
/* ! Layout for mobile version */
/* ============================= */
@media screen and (max-width: 767px) {
body {
border: inherit;
}
img {
width: 100%;
}
a.go_home {
display: block;
background-color: transparent;
height: 1.636em; /* 36px */
}
#content {
/* margin-top: 1.636em; */ /* 36px */
width: inherit;
}
.mast_title {
font-size: 4.1em; /* 90px effective size @22px html font size */
word-spacing: -0.05em;
letter-spacing: -0.04em;
text-transform: uppercase;
line-height: 1em;
margin-top: 0.75em;
margin-bottom: 0.75em;
}
nav.site_navigation {
width: inherit;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.