(Created page with "article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;...") |
|||
Line 1: | Line 1: | ||
− | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,:after,:before{box-sizing:border-box}:root{font-size:16px}.frame,body,html,main{width:100%;height:100%}body{position:fixed;top:0;left:0;--color-text:#fff;--color-bg:#0e0e0f;--color-link:#0f51e4;--color-link-hover:#ebd944;color:var(--color-text);background-color:var(--color-bg);font-family:Futura,futura-pt,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{display:inline-block;text-decoration:none;color:var(--color-link);outline:none;transition:color .2s,transform .2s;transform:translate(0)}a:focus,a:hover{color:var(--color-link-hover);outline:none;transform:translateY(-2px)}.message{background:var(--color-text);color:var(--color-bg);padding:1rem}.frame,.message{text-align:center}.frame{padding:3rem 5vw;position:relative;z-index:1000}.frame__title{font-size:1rem;margin:0 0 1rem;font-weight:400}.frame__links{display:inline}.frame a{text-transform:lowercase}.frame__demos a:not(:last-child),.frame__github,.frame__links a:not(:last-child){margin-right:1rem}.frame__demos{width:100%;padding:0 2.5rem;margin:1rem 0;position:absolute;bottom:1rem;left:50%;transform:translate(-50%)}.frame__demo{margin-top:1rem}.frame__demo--current,.frame__demo:hover{color:var(--color-text)}.frame__demo--current{border-bottom:2px solid var(--color-text);transform:none}.content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100vw;height:calc(100vh - 13rem);position:relative;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}.overlay{position:absolute;pointer-events:none;top:0;left:0;width:100%;height:100%;z-index:99999;background-color:#0e0e0f;opacity:1}@media screen and (min-width:53em){.message{display:none}.frame{position:fixed;text-align:left;z-index:10000;top:0;left:0;display:-ms-grid;display:grid;-ms-flex-line-pack:justify;align-content:space-between;width:100%;max-width:none;height:100vh;padding:3rem;pointer-events:none;-ms-grid-columns:auto 1fr;grid-template-columns:auto 1fr;-ms-grid-rows:auto auto auto;grid-template-rows:auto auto auto;grid-template-areas:"title links" "... ..." "github demos"}.frame__title-wrap{grid-area:title;display:-ms-flexbox;display:flex}.frame__title{margin:0}.frame__tagline{position:relative;margin:0 0 0 4rem;padding:0 0 0 1rem}.frame__tagline:before{content:"";position:absolute;right:100%;top:50%;height:1px;width:3rem;background:var(--color-text)}.frame__github{grid-area:github;justify-self:start;margin:0}.frame__demos{position:static;left:auto;width:auto;transform:none;margin:0;padding:0;grid-area:demos;justify-self:end}.frame__demo{margin-top:0}.frame__links{grid-area:links;padding:0;justify-self:end}.frame a{pointer-events:auto}.content{height:100vh;-ms-flex-pack:center;justify-content:center}} | + | article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { |
+ | display: block | ||
+ | } | ||
+ | |||
+ | audio, canvas, video { | ||
+ | display: inline-block | ||
+ | } | ||
+ | |||
+ | audio:not([controls]) { | ||
+ | display: none; | ||
+ | height: 0 | ||
+ | } | ||
+ | |||
+ | [hidden] { | ||
+ | display: none | ||
+ | } | ||
+ | |||
+ | html { | ||
+ | font-family: sans-serif; | ||
+ | -ms-text-size-adjust: 100%; | ||
+ | -webkit-text-size-adjust: 100% | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | margin: 0 | ||
+ | } | ||
+ | |||
+ | a:focus { | ||
+ | outline: thin dotted | ||
+ | } | ||
+ | |||
+ | a:active, a:hover { | ||
+ | outline: 0 | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | font-size: 2em; | ||
+ | margin: .67em 0 | ||
+ | } | ||
+ | |||
+ | abbr[title] { | ||
+ | border-bottom: 1px dotted | ||
+ | } | ||
+ | |||
+ | b, strong { | ||
+ | font-weight: 700 | ||
+ | } | ||
+ | |||
+ | dfn { | ||
+ | font-style: italic | ||
+ | } | ||
+ | |||
+ | hr { | ||
+ | box-sizing: content-box; | ||
+ | height: 0 | ||
+ | } | ||
+ | |||
+ | mark { | ||
+ | background: #ff0; | ||
+ | color: #000 | ||
+ | } | ||
+ | |||
+ | code, kbd, pre, samp { | ||
+ | font-family: monospace, serif; | ||
+ | font-size: 1em | ||
+ | } | ||
+ | |||
+ | pre { | ||
+ | white-space: pre-wrap | ||
+ | } | ||
+ | |||
+ | q { | ||
+ | quotes: "\201C" "\201D" "\2018" "\2019" | ||
+ | } | ||
+ | |||
+ | small { | ||
+ | font-size: 80% | ||
+ | } | ||
+ | |||
+ | sub, sup { | ||
+ | font-size: 75%; | ||
+ | line-height: 0; | ||
+ | position: relative; | ||
+ | vertical-align: baseline | ||
+ | } | ||
+ | |||
+ | sup { | ||
+ | top: -.5em | ||
+ | } | ||
+ | |||
+ | sub { | ||
+ | bottom: -.25em | ||
+ | } | ||
+ | |||
+ | img { | ||
+ | border: 0 | ||
+ | } | ||
+ | |||
+ | svg:not(:root) { | ||
+ | overflow: hidden | ||
+ | } | ||
+ | |||
+ | figure { | ||
+ | margin: 0 | ||
+ | } | ||
+ | |||
+ | fieldset { | ||
+ | border: 1px solid silver; | ||
+ | margin: 0 2px; | ||
+ | padding: .35em .625em .75em | ||
+ | } | ||
+ | |||
+ | legend { | ||
+ | border: 0; | ||
+ | padding: 0 | ||
+ | } | ||
+ | |||
+ | button, input, select, textarea { | ||
+ | font-family: inherit; | ||
+ | font-size: 100%; | ||
+ | margin: 0 | ||
+ | } | ||
+ | |||
+ | button, input { | ||
+ | line-height: normal | ||
+ | } | ||
+ | |||
+ | button, select { | ||
+ | text-transform: none | ||
+ | } | ||
+ | |||
+ | button, html input[type=button], input[type=reset], input[type=submit] { | ||
+ | -webkit-appearance: button; | ||
+ | cursor: pointer | ||
+ | } | ||
+ | |||
+ | button[disabled], html input[disabled] { | ||
+ | cursor: default | ||
+ | } | ||
+ | |||
+ | input[type=checkbox], input[type=radio] { | ||
+ | box-sizing: border-box; | ||
+ | padding: 0 | ||
+ | } | ||
+ | |||
+ | input[type=search] { | ||
+ | -webkit-appearance: textfield; | ||
+ | box-sizing: content-box | ||
+ | } | ||
+ | |||
+ | input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { | ||
+ | -webkit-appearance: none | ||
+ | } | ||
+ | |||
+ | button::-moz-focus-inner, input::-moz-focus-inner { | ||
+ | border: 0; | ||
+ | padding: 0 | ||
+ | } | ||
+ | |||
+ | textarea { | ||
+ | overflow: auto; | ||
+ | vertical-align: top | ||
+ | } | ||
+ | |||
+ | table { | ||
+ | border-collapse: collapse; | ||
+ | border-spacing: 0 | ||
+ | } | ||
+ | |||
+ | *, :after, :before { | ||
+ | box-sizing: border-box | ||
+ | } | ||
+ | |||
+ | :root { | ||
+ | font-size: 16px | ||
+ | } | ||
+ | |||
+ | .frame, body, html, main { | ||
+ | width: 100%; | ||
+ | height: 100% | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | --color-text: #fff; | ||
+ | --color-bg: #0e0e0f; | ||
+ | --color-link: #0f51e4; | ||
+ | --color-link-hover: #ebd944; | ||
+ | color: var(--color-text); | ||
+ | background-color: var(--color-bg); | ||
+ | font-family: Futura, futura-pt, Arial, sans-serif; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | -moz-osx-font-smoothing: grayscale | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | display: inline-block; | ||
+ | text-decoration: none; | ||
+ | color: var(--color-link); | ||
+ | outline: none; | ||
+ | transition: color .2s, transform .2s; | ||
+ | transform: translate(0) | ||
+ | } | ||
+ | |||
+ | a:focus, a:hover { | ||
+ | color: var(--color-link-hover); | ||
+ | outline: none; | ||
+ | transform: translateY(-2px) | ||
+ | } | ||
+ | |||
+ | .message { | ||
+ | background: var(--color-text); | ||
+ | color: var(--color-bg); | ||
+ | padding: 1rem | ||
+ | } | ||
+ | |||
+ | .frame, .message { | ||
+ | text-align: center | ||
+ | } | ||
+ | |||
+ | .frame { | ||
+ | padding: 3rem 5vw; | ||
+ | position: relative; | ||
+ | z-index: 1000 | ||
+ | } | ||
+ | |||
+ | .frame__title { | ||
+ | font-size: 1rem; | ||
+ | margin: 0 0 1rem; | ||
+ | font-weight: 400 | ||
+ | } | ||
+ | |||
+ | .frame__links { | ||
+ | display: inline | ||
+ | } | ||
+ | |||
+ | .frame a { | ||
+ | text-transform: lowercase | ||
+ | } | ||
+ | |||
+ | .frame__demos a:not(:last-child), .frame__github, .frame__links a:not(:last-child) { | ||
+ | margin-right: 1rem | ||
+ | } | ||
+ | |||
+ | .frame__demos { | ||
+ | width: 100%; | ||
+ | padding: 0 2.5rem; | ||
+ | margin: 1rem 0; | ||
+ | position: absolute; | ||
+ | bottom: 1rem; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%) | ||
+ | } | ||
+ | |||
+ | .frame__demo { | ||
+ | margin-top: 1rem | ||
+ | } | ||
+ | |||
+ | .frame__demo--current, .frame__demo:hover { | ||
+ | color: var(--color-text) | ||
+ | } | ||
+ | |||
+ | .frame__demo--current { | ||
+ | border-bottom: 2px solid var(--color-text); | ||
+ | transform: none | ||
+ | } | ||
+ | |||
+ | .content { | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -ms-flex-direction: column; | ||
+ | flex-direction: column; | ||
+ | width: 100vw; | ||
+ | height: calc(100vh - 13rem); | ||
+ | position: relative; | ||
+ | -ms-flex-pack: start; | ||
+ | justify-content: flex-start; | ||
+ | -ms-flex-align: center; | ||
+ | align-items: center | ||
+ | } | ||
+ | |||
+ | .overlay { | ||
+ | position: absolute; | ||
+ | pointer-events: none; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | z-index: 99999; | ||
+ | background-color: #0e0e0f; | ||
+ | opacity: 1 | ||
+ | } | ||
+ | |||
+ | @media screen and (min-width: 53em) { | ||
+ | .message { | ||
+ | display: none | ||
+ | } | ||
+ | |||
+ | .frame { | ||
+ | position: fixed; | ||
+ | text-align: left; | ||
+ | z-index: 10000; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | display: -ms-grid; | ||
+ | display: grid; | ||
+ | -ms-flex-line-pack: justify; | ||
+ | align-content: space-between; | ||
+ | width: 100%; | ||
+ | max-width: none; | ||
+ | height: 100vh; | ||
+ | padding: 3rem; | ||
+ | pointer-events: none; | ||
+ | -ms-grid-columns: auto 1fr; | ||
+ | grid-template-columns: auto 1fr; | ||
+ | -ms-grid-rows: auto auto auto; | ||
+ | grid-template-rows: auto auto auto; | ||
+ | grid-template-areas: "title links" "... ..." "github demos" | ||
+ | } | ||
+ | |||
+ | .frame__title-wrap { | ||
+ | grid-area: title; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex | ||
+ | } | ||
+ | |||
+ | .frame__title { | ||
+ | margin: 0 | ||
+ | } | ||
+ | |||
+ | .frame__tagline { | ||
+ | position: relative; | ||
+ | margin: 0 0 0 4rem; | ||
+ | padding: 0 0 0 1rem | ||
+ | } | ||
+ | |||
+ | .frame__tagline:before { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | right: 100%; | ||
+ | top: 50%; | ||
+ | height: 1px; | ||
+ | width: 3rem; | ||
+ | background: var(--color-text) | ||
+ | } | ||
+ | |||
+ | .frame__github { | ||
+ | grid-area: github; | ||
+ | justify-self: start; | ||
+ | margin: 0 | ||
+ | } | ||
+ | |||
+ | .frame__demos { | ||
+ | position: static; | ||
+ | left: auto; | ||
+ | width: auto; | ||
+ | transform: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | grid-area: demos; | ||
+ | justify-self: end | ||
+ | } | ||
+ | |||
+ | .frame__demo { | ||
+ | margin-top: 0 | ||
+ | } | ||
+ | |||
+ | .frame__links { | ||
+ | grid-area: links; | ||
+ | padding: 0; | ||
+ | justify-self: end | ||
+ | } | ||
+ | |||
+ | .frame a { | ||
+ | pointer-events: auto | ||
+ | } | ||
+ | |||
+ | .content { | ||
+ | height: 100vh; | ||
+ | -ms-flex-pack: center; | ||
+ | justify-content: center | ||
+ | } | ||
+ | } |
Latest revision as of 07:46, 2 October 2019
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block
}
audio, canvas, video {
display: inline-block
}
audio:not([controls]) {
display: none; height: 0
}
[hidden] {
display: none
}
html {
font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%
}
body {
margin: 0
}
a:focus {
outline: thin dotted
}
a:active, a:hover {
outline: 0
}
h1 {
font-size: 2em; margin: .67em 0
}
abbr[title] {
border-bottom: 1px dotted
}
b, strong {
font-weight: 700
}
dfn {
font-style: italic
}
hr {
box-sizing: content-box; height: 0
}
mark {
background: #ff0; color: #000
}
code, kbd, pre, samp {
font-family: monospace, serif; font-size: 1em
}
pre {
white-space: pre-wrap
}
q {
quotes: "\201C" "\201D" "\2018" "\2019"
}
small {
font-size: 80%
}
sub, sup {
font-size: 75%; line-height: 0; position: relative; vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 0
}
fieldset {
border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em
}
legend {
border: 0; padding: 0
}
button, input, select, textarea {
font-family: inherit; font-size: 100%; margin: 0
}
button, input {
line-height: normal
}
button, select {
text-transform: none
}
button, html input[type=button], input[type=reset], input[type=submit] {
-webkit-appearance: button; cursor: pointer
}
button[disabled], html input[disabled] {
cursor: default
}
input[type=checkbox], input[type=radio] {
box-sizing: border-box; padding: 0
}
input[type=search] {
-webkit-appearance: textfield; box-sizing: content-box
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0; padding: 0
}
textarea {
overflow: auto; vertical-align: top
}
table {
border-collapse: collapse; border-spacing: 0
}
- , :after, :before {
box-sizing: border-box
}
- root {
font-size: 16px
}
.frame, body, html, main {
width: 100%; height: 100%
}
body {
position: fixed; top: 0; left: 0; --color-text: #fff; --color-bg: #0e0e0f; --color-link: #0f51e4; --color-link-hover: #ebd944; color: var(--color-text); background-color: var(--color-bg); font-family: Futura, futura-pt, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale
}
a {
display: inline-block; text-decoration: none; color: var(--color-link); outline: none; transition: color .2s, transform .2s; transform: translate(0)
}
a:focus, a:hover {
color: var(--color-link-hover); outline: none; transform: translateY(-2px)
}
.message {
background: var(--color-text); color: var(--color-bg); padding: 1rem
}
.frame, .message {
text-align: center
}
.frame {
padding: 3rem 5vw; position: relative; z-index: 1000
}
.frame__title {
font-size: 1rem; margin: 0 0 1rem; font-weight: 400
}
.frame__links {
display: inline
}
.frame a {
text-transform: lowercase
}
.frame__demos a:not(:last-child), .frame__github, .frame__links a:not(:last-child) {
margin-right: 1rem
}
.frame__demos {
width: 100%; padding: 0 2.5rem; margin: 1rem 0; position: absolute; bottom: 1rem; left: 50%; transform: translate(-50%)
}
.frame__demo {
margin-top: 1rem
}
.frame__demo--current, .frame__demo:hover {
color: var(--color-text)
}
.frame__demo--current {
border-bottom: 2px solid var(--color-text); transform: none
}
.content {
display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100vw; height: calc(100vh - 13rem); position: relative; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-align: center; align-items: center
}
.overlay {
position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background-color: #0e0e0f; opacity: 1
}
@media screen and (min-width: 53em) {
.message { display: none }
.frame { position: fixed; text-align: left; z-index: 10000; top: 0; left: 0; display: -ms-grid; display: grid; -ms-flex-line-pack: justify; align-content: space-between; width: 100%; max-width: none; height: 100vh; padding: 3rem; pointer-events: none; -ms-grid-columns: auto 1fr; grid-template-columns: auto 1fr; -ms-grid-rows: auto auto auto; grid-template-rows: auto auto auto; grid-template-areas: "title links" "... ..." "github demos" }
.frame__title-wrap { grid-area: title; display: -ms-flexbox; display: flex }
.frame__title { margin: 0 }
.frame__tagline { position: relative; margin: 0 0 0 4rem; padding: 0 0 0 1rem }
.frame__tagline:before { content: ""; position: absolute; right: 100%; top: 50%; height: 1px; width: 3rem; background: var(--color-text) }
.frame__github { grid-area: github; justify-self: start; margin: 0 }
.frame__demos { position: static; left: auto; width: auto; transform: none; margin: 0; padding: 0; grid-area: demos; justify-self: end }
.frame__demo { margin-top: 0 }
.frame__links { grid-area: links; padding: 0; justify-self: end }
.frame a { pointer-events: auto }
.content { height: 100vh; -ms-flex-pack: center; justify-content: center }
}