Style for Nearthespeedoflight.com April 2 2016

nearthespeedoflight-2016.css

/* ============================== */
/* !                              */
/* ! 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;
	}
}