Created
April 3, 2016 01:42
-
-
Save jbrennan/02ccc6f2abdfc2dcfcd2a8e3da75dd2c to your computer and use it in GitHub Desktop.
Style for Nearthespeedoflight.com from Feb 2013 to April 2016
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ============================== */ | |
| /* ! */ | |
| /* ! 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