You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
5.7 KiB
CSS
1 line
5.7 KiB
CSS
@import 'https://fonts.googleapis.com/css?family=Fira+Mono|Noto+Serif|Noto+Sans:300,400,500';:root{--font-header:"Noto Sans","Arial","Helvetica",sans-serif;--font-main:"Noto Serif","Arial","Helvetica",sans-serif;--font-mono:"Menlo","Fira Mono",monospace;--font-size:16px;--colorscheme-accent-one:#6fc0aa;--colorscheme-accent-two:#4a73a1;--colorscheme-bg-light:#fdfdfd;--colorscheme-bg-dark:#e6e6e6;--colorscheme-fg-dark:#132a44;--colorscheme-fg-light:#475f7b;--colorscheme-fg-code:#666;--hero-gradient:radial-gradient(circle,var(--colorscheme-accent-one),var(--colorscheme-accent-two));--hero-height:84vh}*{box-sizing:border-box}html{font-family:var(--font-main);font-size:var(--font-size)}body{background-color:var(--colorscheme-bg-light);color:var(--colorscheme-fg-light);margin:0 auto;max-width:800px;line-height:2;padding:4em}body>header{min-height:var(--hero-height);display:flex;flex-direction:column;justify-content:center;width:100%;max-width:none;top:0;left:0;position:absolute;line-height:1.5;background:var(--hero-gradient);border-bottom:1px solid var(--background-color-darkest);padding:4em 1em}body>header>*{z-index:1}body>header>img{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;object-fit:cover;opacity:.75;transform:translate3d(0,0,0);z-index:0}body>header>h1,body>header>h2{text-align:center}body>header>h1{position:relative;font-size:4em}body>header>h2{margin:0;position:relative;font-size:2.5em}body>header>nav{position:absolute;top:2rem;right:2.5rem}body>header>nav a{color:var(--colorscheme-fg-dark);margin:0 .5rem}body>header+*{margin-top:var(--hero-height)}body>header+nav:before{content:"Navigation: ";padding-right:1em}body>header+nav{margin-top:calc(var(--hero-height) - 1em);margin-bottom:2em}body>header+nav a{padding:.25em;margin:0 .5em}h1,h2,h3,h4,h5,h6,th,caption,strong{color:var(--colorscheme-fg-dark)}h1,h2,h3,h4,h5,h6,th,caption{margin:1rem 0 .5rem 0;font-family:var(--font-header);font-weight:600;letter-spacing:.025em}h1{font-size:2.2rem}h2{font-size:1.75rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.15rem}h6,caption,th{font-size:1rem}h1+h1,h1+h2,h1+h3,h1+h4,h1+h5,h1+h6,h2+h1,h2+h2,h2+h3,h2+h4,h2+h5,h2+h6,h3+h1,h3+h2,h3+h3,h3+h4,h3+h5,h3+h6,h4+h1,h4+h2,h4+h3,h4+h4,h4+h5,h4+h6,h5+h1,h5+h2,h5+h3,h5+h4,h5+h5,h5+h6,h6+h1,h6+h2,h6+h3,h6+h4,h6+h5,h6+h6{margin-top:-0.5rem;margin-bottom:0}b,strong{font-weight:bold}em,i{font-style:oblique}p{margin:.75em 0}code,pre{font-family:"Fira Mono",monospace;color:var(--colorscheme-fg-code);background-color:var(--colorscheme-bg-dark);font-size:.9rem}pre{padding:1em;margin:.5em 0;font-family:monospace}code{padding:.15em .25em;vertical-align:baseline}hr{border:0;height:1px;background:var(--colorscheme-bg-dark);margin:1rem 0}a{color:var(--colorscheme-accent-one);text-decoration:none;padding:0 .1em;height:1.25em;display:inline-block}a:hover{color:var(--colorscheme-accent-two);text-decoration:underline}table{width:100%;border-collapse:collapse;text-align:justify;margin:2rem 0 2rem 0}tr{border-bottom:1px solid var(--colorscheme-bg-dark)}tr:hover{background-color:var(--colorscheme-bg-dark)}td,th{padding:1rem}th{text-transform:uppercase;text-align:left}ol,ul{margin:1rem}ul{list-style:square}ul>ul,ol>ol,ul>ol,ol>ul{margin-top:0;margin-bottom:0}ol{list-style:plain}li{padding-left:.5em;margin-bottom:.5em}small,sub,sup{font-size:.75em}img{max-width:100%}blockquote{font-style:italic;margin:.5em 1.5em .75em 1.5em;padding-left:.75em;padding-bottom:.25em;border-left:.25em solid var(--colorscheme-fg-dark)}fieldset{border:1px solid var(--colorscheme-bg-dark);padding:.5rem 1.5rem}label{position:relative}input,select,button{font-family:var(--font-main);font-size:1em;margin:0 0 1rem 0;padding:.25rem;color:var(--colorscheme-fg-light)}input[type="text"],input[type="url"],input[type="tel"],input[type="number"],input[type="color"],input[type="email"],input[type="password"],input[type="search"]{display:block;background-color:inherit;border:0;border-bottom:1px solid var(--colorscheme-bg-dark);transition:.5s ease-in-out border-bottom}input[type="text"]:focus,input[type="url"]:focus,input[type="tel"]:focus,input[type="number"]:focus,input[type="color"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="search"]:focus{border-bottom:1px solid var(--colorscheme-fg-light)}input[type="submit"],input[type="button"],input[type="reset"],button{display:inline-block;padding:.5rem;margin:.25rem;border:1px solid var(--colorscheme-bg-dark);background-color:var(--colorscheme-bg-light);cursor:pointer;transition:.5s ease-in-out border-color}input[type="submit"]:hover,input[type="button"]:hover,input[type="reset"]:hover,button:hover{border:1px solid var(--colorscheme-fg-dark)}select{display:block;border:1px solid var(--colorscheme-bg-dark);padding:.25rem .5rem;background-color:var(--colorscheme-bg-light);transition:.5s ease-in-out border-color}select:hover{border:1px solid var(--colorscheme-fg-dark)}input[type="checkbox"],input[type="radio"]{margin-left:.5rem;margin-right:.5rem}textarea{font-family:var(--font-main);border:1px solid var(--colorscheme-bg-dark);padding:.5rem;min-height:1rem;width:100%}textarea[disabled],select[disabled],input[disabled],button[disabled],input[disabled]::placeholder,textarea[disabled]::placeholder{color:#aaa;cursor:not-allowed;opacity:.5;text-decoration:line-through}@media(max-width:50em){:root{--hero-height:90vh;--font-size:12px}body{padding:1.5em}body>header+nav{margin-top:calc(var(--hero-height))}body>header+nav:before{display:none}table,table *{display:block}tr{border:0}tr:hover{background-color:initial}th{display:none}td{border-bottom:1px solid var(--colorscheme-bg-dark)}td:hover{background-color:var(--colorscheme-bg-dark)}td[data-label]{text-align:right}td[data-label]:before{content:attr(data-label);float:left;text-transform:uppercase;font-weight:bold}} |