/* Skelaton Semantics –––––––––––––––––––––––––––––––––––––––––––––––––– */ html { font-size: 75%; } /* Larger than tablet */ @media (min-width: 750px) { html { font-size: 62.5%; } } main { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; min-height: 80vh; } /* Self Clearing Goodness */ main:after, section:after { content: ""; display: table; clear: both; } /* For devices larger than 400px */ @media (min-width: 400px) { main { width: 85%; padding: 0; } } /* For devices larger than 550px */ @media (min-width: 550px) { main { width: 80%; } } section { border-top: 1px #e1e1e1 solid; } a { color: #0095dd; } a:hover { color: #A2DAFF; } /* Structure –––––––––––––––––––––––––––––––––––––––––––––––––– */ main, .container { padding: 2em 0.5em; overflow: hidden; } @media (min-width: 750px) { main, .container { max-width: 900px; } } header { box-sizing: border-box; display: block; margin: 0 auto; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; line-height: 1.2; max-width: none; border-bottom: 1px solid #ccc; } footer { box-sizing: border-box; border-top: 1px solid #e1e1e1; background: #fdfdfd; text-align: center; } /* Larger than tablet */ @media (min-width: 750px) { footer p { font-size: 1.5rem; } } /* Larger than phablet */ @media (min-width: 550px) { footer .right-side { text-align: right; } footer .left-side { text-align: left; } } @media (min-width: 750px) { } nav { padding: 1em 0 0 0; text-align: right; } nav ul { margin: 0; } nav li { display: inline-block; list-style: none; } @media (min-width: 750px) { } /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ img { height: auto; max-width: 100%; } h1 { font-weight: bold; color: #333333; text-shadow: 1px 1px 0px #ccc; } h1, h2, h3, h4, h5, h6{ font-family: 'Baloo', cursive; text-shadow: 1px 1px 0px #ccc; } pre { margin-bottom: -5px; } pre > code { font-size: 70%; } /* Larger than tablet */ @media (min-width: 750px) { pre > code { font-size: 80%; } } .row { font-size: 1.5rem; margin: 2rem 0; } /* Larger than tablet */ @media (min-width: 750px) { .row { font-size: 1.8rem; } } footer .row { font-size: 1rem; } /* Larger than tablet */ @media (min-width: 750px) { footer .row { font-size: 1.1rem; } } blockquote { margin-left: 0; margin-right: 0; padding: 0 1em; color: #666; border-left: 0.25em solid #666666; } /* Larger than tablet */ @media (min-width: 750px) { blockquote { margin-left: 20px; margin-right: 20px; } } blockquote>:first-child { margin-top: 0; } blockquote>:last-child { margin-bottom: 0; } /* highlight js integration –––––––––––––––––––––––––––––––––––––––––––––––––– */ .hljs { background: none; } code.hljs { padding: 1rem 1.5rem; background: #fdfdfd; -moz-font-smoothing: grayscale; -webkit-font-smoothing: initial; } /* Utility –––––––––––––––––––––––––––––––––––––––––––––––––– */ .textright { text-align: right; } .textcenter { text-align: center; } .animate { animation-duration: 1s; animation-name: blink; } @keyframes blink { from { background-color: lightyellow; } to { background-color: transparent; } } /* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– */ table { width: 100%; font-size: 1.2rem; box-sizing: border-box; } table th:first-child, td:first-child { padding-left: 5px; } table tr:nth-child(2n) { background-color: #fdfdfd; } /* Larger than tablet */ @media (min-width: 750px) { table { font-size: 1.6rem; } } /* Logo –––––––––––––––––––––––––––––––––––––––––––––––––– */ .logo { font-size: 5.0rem; color: #282828; white-space: nowrap; letter-spacing: -0.3rem; } .logo-js{ font-size: 2.5rem; color: #666; } .logo.smaller { font-size: 4.0rem; color: #282828; white-space: nowrap; letter-spacing: -0.3rem; } .logo-js.smaller{ font-size: 2rem; color: #666; } .sticker { text-shadow: -2px -2px 2px #ffffff, 2px -2px 2px #ffffff, -2px 2px 2px #ffffff, 2px 2px 2px #ffffff, -2px 0px 2px #ffffff, 2px 0px 2px #ffffff, 0px 2px 2px #ffffff, 0px -2px 2px #ffffff; } .sticker.smaller { text-shadow: -1px -1px 1px #ffffff, 1px -1px 1px #ffffff, -1px 1px 1px #ffffff, 1px 1px 1px #ffffff, -1px 0px 1px #ffffff, 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, 0px -1px 1px #ffffff; } .logo a { color: inherit; text-decoration: none; } .l7{ display: inline-block; transform: rotate(-7deg); margin: 0px 0.1em 0 0.05em; } .r7{ display: inline-block; transform: rotate(7deg); margin: 0px 0.07em 0 0.07em; } .half{ font-size: 0.5rem; } /* Larger than tablet */ @media (min-width: 750px) { .logo { font-size: 10.0rem; } .logo-js { font-size: 5.0rem; margin: 0 0 0 0.07em; } .logo.smaller { font-size: 8.0rem; color: #282828; white-space: nowrap; letter-spacing: -0.3rem; } .logo-js.smaller{ font-size: 4rem; color: #666; } .sticker { text-shadow: -3px -3px 3px #ffffff, 3px -3px 3px #ffffff, -3px 3px 3px #ffffff, 3px 3px 3px #ffffff, -3px 0px 3px #ffffff, 3px 0px 3px #ffffff, 0px 3px 3px #ffffff, 0px -3px 3px #ffffff; } .sticker.smaller { text-shadow: -2px -2px 2px #ffffff, 2px -2px 2px #ffffff, -2px 2px 2px #ffffff, 2px 2px 2px #ffffff, -2px 0px 2px #ffffff, 2px 0px 2px #ffffff, 0px 2px 2px #ffffff, 0px -2px 2px #ffffff; } .l7 { display: inline-block; transform: rotate(-7deg); margin: 0px 0.07em 0 0.07em; } .r7 { display: inline-block; transform: rotate(7deg); margin: 0px 0.07em 0 0.07em; } } /* Highlight JS –––––––––––––––––––––––––––––––––––––––––––––––––– */ code.hljs { margin: 0 .2rem; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; } pre > code { display: block; padding: 1rem 1.5rem; white-space: pre; } /* pill –––––––––––––––––––––––––––––––––––––––––––––––––– */ .pill { border-radius: 50px; font-size: 0.6rem; letter-spacing: 0.2em; padding: 1em 2em; text-transform: uppercase; text-decoration: none; display: inline-block; } .pill.big { font-size: 1.1rem; } /* Larger than mobile */ @media (min-width: 400px) { .pill.big { font-size: 1.2rem; } } /* Larger than tablet */ @media (min-width: 750px) { .pill.big { font-size: 1.5rem; } } span.pill{ background: #dfdfdf; color: #444; border: 1px solid transparent; } a.pill { color: #434343; border-top: 1px solid #222; border-left: 1px solid #222; border-bottom: 1px solid #666; border-right: 1px solid #666; background: #A2DAFF; } a.pill:hover { color: white; border-top: 1px solid #222; border-left: 1px solid #222; border-bottom: 1px solid #666; border-right: 1px solid #666; background: #FFA2DA; } a.pill:active { color: white; border-top: 1px solid #222; border-left: 1px solid #222; border-bottom: 1px solid #666; border-right: 1px solid #666; background: #DAFFA2; } /* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ #home-stage { min-height: 100vh; } .home-background { background-color: #434343; } .page-background { background-color: #434343; min-height: 80px; } /* Larger than tablet */ @media (min-width: 750px) { .page-background { min-height: 120px; } } .openin { font-size: 0.7em; line-height: 5em; } form { margin-left: 30px; margin-bottom: 0; } input[type="submit"] { background: #A2DAFF; font-size: 1.5rem; text-transform: none; } input[type="submit"]:hover { background: #FFA2DA; color: white; }