diff options
Diffstat (limited to 'public/assets/ok.css')
| -rw-r--r-- | public/assets/ok.css | 271 |
1 files changed, 271 insertions, 0 deletions
diff --git a/public/assets/ok.css b/public/assets/ok.css new file mode 100644 index 0000000..f7e57a9 --- /dev/null +++ b/public/assets/ok.css @@ -0,0 +1,271 @@ + html { + box-sizing: border-box; + } + + *, + *:before, + *:after { + box-sizing: inherit; + padding: 0; + margin: 0; + outline: 0; + border: 0; + -webkit-appearance: none; + } + + a, + a:visited { + color: blue; + } + + body { + font-family: 'Roboto', sans-serif; + font-size: 11px; + background: #fff; + counter-reset: section; + overflow: hidden; + } + + div, + span { + display: inline-block; + float: left; + } + + .item { + height: 100vh; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: column wrap; + flex-flow: column wrap; + } + + nav { + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 5px; + z-index: 3; + } + + nav span { + border-bottom: 1px solid; + width: 100%; + } + + nav span div:first-child { + float: left; + } + + nav span div:nth-child(2) { + border-left: 1px solid; + margin-left: 10px; + padding-left: 20px; + } + + nav span div:last-child { + float: right; + } + + .top { + background: #f7f7f7; + width: 100%; + /*height: 80vh;*/ + flex: 1 auto; + margin-top: 20px; + } + /*! Flickity */ + + .flickity-enabled { + position: relative; + } + + .flickity-enabled:focus { + outline: none; + } + + .flickity-viewport { + overflow: hidden; + position: relative; + width: 100%; + } + + .flickity-slider { + position: absolute; + width: 100%; + } + + button { + height: 70vh; + /*THIS SHOULD BE DYNAMIC*/ + width: 10vw; + position: absolute; + top: 0; + background: transparent; + cursor: pointer; + } + + button svg { + opacity: 0; + transition: 150ms all; + transition-timing-function: cubic-bezier(0, 0, 1, 1); + transform: scale(0.3); + } + + button.next { + right: 0; + } + + button.previous { + left: 0; + } + + button.previous:hover svg, + button.next:hover svg { + opacity: 1; + transform: scale(0.2); + } + + button.next:active svg, + button.previous:active svg { + transform: scale(0.1); + } + /* + button.next:hover { + background: rgba(255, 255, 255, 0.5); + } + + button.previous:hover { + background: rgba(255, 255, 255, 0.5); + } + */ + + .cell { + width: 100vw; + height: 70vh; + /*THIS SHOULD BE DYNAMIC*/ + background-position: center; + background-size: cover; + background-repeat: no-repeat; + } + + .cell.contain { + background-size: 20%; + background-color: #eee; + } + + .bottom { + /*height: 20vh;*/ + flex: 0 auto; + overflow: hidden; + padding: 5px 0; + } + + .five { + width: 100%; + } + + .headings, + nav { + font-family: 'Roboto Mono', monospace; + font-size: 8px; + text-transform: uppercase; + font-weight: 700; + } + + .texts { + font-weight: 400; + padding: 3px 0 0 0; + font-weight: 400; + } + + .five span { + width: calc(12% - 8px); + margin: 0 4px; + } + + .press .headings span:nth-child(5) { + width: calc(40% - 8px); + } + + .headings span { + border-bottom: 1px solid; + padding: 0 0 2px 0; + } + + .press .headings span:last-child:before { + content: "PRESS"; + } + + .five .description { + width: 50%; + -webkit-column-count: 3; + /*text-align: justify;*/ + column-gap: 5px; + } + + .press .five .description { + width: calc(40% - 8px); + -webkit-column-count: 2; + } + + .press .texts span:last-child a { + width: 100%; + display: inline-block; + } + + ul li { + list-style-type: none; + } + + .nopress span:nth-child(5) { + width: calc(52% - 8px); + } + + .nopress span:last-child { + display: none; + } + + @media (min-width: 1200px) { + .texts { + font-size: 13px; + } + } + + @media (min-width: 1400px) { + .texts { + font-size: 14px; + } + } + + @media (min-width: 1600px) { + .texts { + font-size: 15px; + } + } + + @media (max-width:480px) { + .cell, + button { + height: 50vh; + } + .five span { + width: 50%; + border-bottom: 1px solid; + margin: 0; + padding: 3px; + font-weight: 600; + } + .five span.description { + width: 100%!important; + font-weight: 400; + -webkit-column-count: 2!important; + -webkit-column-gap: 3px; + -moz-column-gap: 3px; + column-gap: 3px; + } + .headings { + display: none; + } + }
\ No newline at end of file |