diff options
Diffstat (limited to 'css/core.css')
| -rwxr-xr-x | css/core.css | 685 |
1 files changed, 685 insertions, 0 deletions
diff --git a/css/core.css b/css/core.css new file mode 100755 index 0000000..f575862 --- /dev/null +++ b/css/core.css @@ -0,0 +1,685 @@ +@import url('reset.css'); + +@font-face{ + font-family: 'League Gothic'; + src: local('League Gothic'), + local('League-Gothic'), + url('/fonts/league-gothic.woff2') format('woff2'), + url('/fonts/league-gothic.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face{ + font-family: 'Lora'; + src: local('Lora'), + url('/fonts/lora.woff2') format('woff2'), + url('/fonts/lora.woff') format('woff'); + font-style: normal; + font-weight: normal; +} + +@font-face{ + font-family: 'Lora'; + src: local('Lora'), + url('/fonts/lora-italic.woff2') format('woff2'), + url('/fonts/lora-italic.woff') format('woff'); + font-style: italic; + font-weight: normal; +} + +@font-face{ + font-family: 'Lora'; + src: local('Lora'), + url('/fonts/lora-bold.woff2') format('woff2'), + url('/fonts/lora-bold.woff') format('woff'); + font-style: normal; + font-weight: bold; +} + +@font-face{ + font-family: 'Lora'; + src: local('Lora'), + url('/fonts/lora-bold-italic.woff2') format('woff2'), + url('/fonts/lora-bold-italic.woff') format('woff'); + font-style: italic; + font-weight: bold; +} + +::selection{ + background: #BC3E3E; + color: #ffffff; +} + +::-moz-selection{ + background: #BC3E3E; + color: #ffffff; +} + +h1,h2,h3,h4,h5,h6,code{ + hyphens: none; +} + +#comments li > p::selection{ + background: #ffffff; + color: #BC3E3E; +} + +#comments li > p::-moz-selection{ + background: #ffffff; + color: #BC3E3E; +} + +#comments li > p *::selection{ + background: #ffffff; + color: #BC3E3E; +} + +#comments li > p *::-moz-selection{ + background: #ffffff; + color: #BC3E3E; +} + +html, +body{ + background: #ffffff; + font-size: 16px; + line-height: 1.4; +} + +body{ + display: flex; + flex-direction: column; + min-height: 100vh; +} + +figure{ + text-align: center; + margin: 0; + font-size: 0; +} + +mark{ + background: #BC3E3E; + color: #ffffff; +} + +article * + figcaption{ + margin-top: 0; + font-size: .75rem; +} + +b, strong{ + font-weight: bold; +} + +i, em{ + font-style: italic; +} + +a, +a:link, +a:visited{ + color: #BC3E3E; + text-decoration: underline; +} + +#comments li > p a:hover{ + color: #ffffff; +} + + +body{ + background: none; + margin: auto; +} + +footer::after{ + content: url('/images/footer-red.svg'); + display: block; + line-height: 0; + font-size: 0; +} + +footer{ + background: #19232C; + text-align: center; + padding: 2rem 0; + margin-top: auto; /* for flex */ +} + +footer p{ + color: #ffffff; + font-family: 'Lora', serif; + margin-bottom: 2rem; +} + +header{ + padding: 1rem; + background: #19232C; + text-align: center; +} + +header > *{ + max-width: 650px; + color: #ffffff; + font-family: 'Lora', serif; + margin: auto; +} + +header nav{ + font-size: 0; + line-height: 0; + padding: 0; +} + +header nav ul li{ + color: #ffffff; + font-family: 'League Gothic', sans-serif; + display: inline-block; +} + +header nav ul li a{ + font-size: 2rem; + height: 1.75rem; + line-height: 1; + display: inline-block; + text-transform: uppercase; + padding: 1rem; +} + +header nav ul li + li::before{ + content: '\2022'; + color: #fff; + display: inline-block; + margin: 0 1rem; + font-size: 1.5rem; + position: relative; + top: -2px; +} + +header a, +header a:link, +header a:visited, +footer a, +footer a:link, +footer a:visited{ + color: #BC3E3E; + text-decoration: none; +} + +header > a, +header > a:link, +header > a:visited{ + font-family: 'League Gothic', sans-serif; + font-size: 5rem; + line-height: .85; + height: 3.75rem; + text-transform: uppercase; + display: block; + padding: 1rem 0; +} + +header a:hover, +footer a:hover{ + background: rgba(255, 255, 255, .05); + text-decoration: none; +} + +header > p{ + margin: 1rem auto; + max-width: 970px; + line-height: 1.6; +} + +header nav p{ + display: inline-block; +} + +article, +main{ + padding: 2rem 0; +} + +#comments{ + padding-bottom: 2rem; +} + +main.error{ + display: flex; + flex-grow: 1; +} + +main.error h1{ + margin: auto; +} + +article, +#comments{ + color: #222; + font-family: 'Lora', serif; + line-height: 1.7; + font-size: 1.125rem; + max-width: 650px; + margin: 0 auto; + hyphens: auto; + text-align: justify; +} + +article img{ + border: 1px solid #888; + border-radius: 5px; + max-width: 100%; + box-sizing: border-box; +} + +article ol{ + list-style: decimal; +} + +article ul{ + list-style: disc; +} + +nav{ + padding: 2rem 0; + max-width: 650px; + margin: auto; + font-family: 'Lora', serif; +} + +h1, +h2, +h3, +header + main nav ul li p:first-child a, +#comments h2{ + font-weight: normal; + font-family: League Gothic, sans-serif; + text-transform: uppercase; + font-size: 3.125rem; + line-height: 1; + text-align: center; +} + +h1, +header + main nav ul li p:first-child a, +header + main nav ul li p:first-child a:link, +header + main nav ul li p:first-child a:visited{ + color: #333; + text-decoration: none; +} + +header + main nav ul li p:first-child a:hover{ + color: #BC3E3E; +} + +header + main nav ul li p:first-child a{ + font-size: 2rem; + line-height: 1; +} + +nav ul li{ + color: #444444; + list-style: none; +} + +header + main nav ul li + li, +#comments ol li + li{ + margin-top: 2rem; +} + +header + main nav li p + p{ + display: flex; + margin-top: .5rem; +} + +ul.post-categories{ + display: inline; +} + +ul + time::before, +body nav ul li time + a::before, +#comments time::before{ + content: '\2022'; + margin-right: .5rem; + margin-left: .5rem; + display: inline-block; + color: #222; +} + +#comments time::before{ + font-size: 1rem; + color: #fff; +} + +article h2, +#comments h2{ + font-size: 2.125rem; + line-height: 1; + text-align: left; + color: #444; + margin-top: 3rem; +} + +#comments h2:first-child{ + display: none; +} + +article h3{ + font-size: 2rem; + text-align: left; + color: #444; + margin-top: 3rem; +} + +article * + *, +#comments ol li > div p + p{ + margin-top: 1rem; +} + +article time{ + display: block; + border-top: 3px double #888; + border-bottom: 3px double #888; + margin: 2rem 0; + text-align: center; + padding: 1rem 0; + font-style: italic; +} + +sup{ + vertical-align: super; + font-size: .5rem; +} + +.mono{ + font-family: monospace; +} + +aside{ + border-radius: 5px; + color: #ffffff; + text-shadow: none; + padding: 2rem; +} + +aside::before{ + font-family: League Gothic, sans-serif; + display: block; + text-transform: uppercase; + font-size: 2rem; + line-height: 1; + border-bottom: 3px double rgba(255, 255, 255, .5); + padding-bottom: 1rem; + margin-bottom: 1rem; +} + +aside a, +aside a:link, +aside a:visited{ + color: #fff; +} + +aside.update{ + background: #FBFAAA; + color: #222; +} + +aside.update::before{ + content: 'Update'; + color: #444; + border-bottom: 3px double rgba(0, 0, 0, .5); +} + +aside.warning{ + background: #BC3E3E; +} + +aside.warning::before{ + content: 'Attention'; +} + +aside.note{ + background: #3E80BC; +} + +aside.note::before{ + content: 'Note'; +} + +img[src*="alex-cabal.jpg"]{ + float: left; + margin-right: 2rem; + max-width: 200px; +} + +#comments::before{ + content: url('/images/footer-leaf.svg'); + display: block; + line-height: 0; + font-size: 0; + margin-bottom: 2rem; + text-align: center; +} + +#comments ol + h2::before{ + content: url('/images/footer-square.svg'); + display: block; + line-height: 0; + font-size: 0; + margin: 2rem 0; + margin-bottom: 2rem; + text-align: center; +} + +#comments ol li > p, +#comments ol li > p a{ + font-weight: bold; + background: #BC3E3E; + padding: 1rem; + border-top-right-radius: 5px; + border-top-left-radius: 5px; + min-height: 3.125rem; + color: #ffffff; + padding: 0; +} + +#comments ol li > p time{ + font-weight: normal; +} + +#comments ol li > div{ + padding: 1rem; +} + +#comments ol li{ + color: #fff; + background: #19232C; + border-radius: 5px; +} + +.avatar{ + border-top-left-radius: 5px; + display: inline; + margin-right: 1rem; + vertical-align: middle; +} + +.nav-buttons{ + display: flex; +} + +nav .next{ + margin-left: auto; +} + +nav .next::after{ + content:' \2192'; +} + +nav .back::before{ + content:'\2190 '; +} + +code{ + hyphens: none; + text-align: left; + overflow-x: auto; +} + +code.terminal{ + color:#fff; + background-color:#444; + background-image: url('/images/terminal.svg'); + font-family:'Courier New', Courier, Fixed; + background-position: 1rem 1.25rem; + background-repeat:no-repeat; + padding: 1rem; + padding-left: 3rem; + border-radius: 5px; + display: block; + font-style: normal; +} + +code.raw{ + white-space: pre; +} + +code.terminal.multiline span{ + display: block; +} + +code.terminal::before, +code.terminal.multiline span::before{ + display: inline; + margin-right: .5rem; + color: #56DA55; + font-weight: bold; +} + +code.terminal:not(.multiline)::before{ + content:'user@localhost:'; +} + +code.terminal[data-host]:not(.multiline)::before{ + content:'user@'attr(data-host)':'; +} + +code.terminal[data-user]:not(.multiline)::before{ + content:attr(data-user)'@localhost:'; +} + +code.terminal[data-host][data-user]:not(.multiline)::before{ + content:attr(data-user)'@'attr(data-host)':'; +} + +code.terminal.multiline > span::before{ + content:'user@localhost:'; +} + +code.terminal.multiline > span[data-host]::before{ + content:'user@'attr(data-host)':'; +} + +code.terminal.multiline > span[data-user]::before{ + content:attr(data-user)'@localhost:'; +} + +code.terminal.multiline > span[data-user][data-host]::before{ + content:attr(data-user)'@'attr(data-host)':'; +} + +code.terminal.multiline span + span{ + margin-top: 5px; +} + +/* fancy keyboard stuff */ +/* adapted from http://michaelhue.com/keyscss */ +kbd{ + text-transform: capitalize; + display: inline; + display: inline-block; + min-width: 1rem; + font-size: 1rem !important; + padding: .5rem; + font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif; + text-align: center; + text-decoration: none; + border-radius: .3em; + border: none; + cursor: default; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; + background: rgb(250, 250, 250); + background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255)); + background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255))); + color: rgb(50, 50, 50); + text-shadow: 0 0 2px rgb(255, 255, 255); + box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9); +} + +kbd[title]{ + cursor: help; +} + +code kbd{ + text-transform: initial; +} + +.keys{ + white-space: nowrap; +} + +/* Responsive garbage */ +@media(max-width: 700px){ + @viewport{ + zoom: 1.0; + width: auto; + } + + @-ms-viewport{ + zoom: 1.0; + width: auto; + } + + header{ + margin-bottom: 0; + } + + footer{ + margin-top: 0; + } + + header p{ + display: none; + } + + body > nav, + article, + #comments{ + padding: 2rem; + max-width: calc(100% - 4rem); + } + + textarea, + input{ + width: 100%; + box-sizing: border-box; + } + + code.raw{ + white-space: pre-wrap; + } +} + +@media(max-width: 350px){ + header nav ul li + li::before{ + display: none; + } + + body > header nav > ul{ + display: flex; + flex-direction: column; + } +} |