s*, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Roboto',sans-serif; color: #585656; background: #232323; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main { display: flex; overflow: hidden; height: 100vh; } a { text-decoration: none; color: #6dcc9e; outline: none; cursor: pointer; } a:hover { color: #fff; } a:focus { outline: none; } .hidden { position: absolute; overflow: hidden; width: 0; height: 0; pointer-events: none; } .js .loading { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; background: #232323; transition: opacity 0.3s; } .js .loading--hide { pointer-events: none; opacity: 0; } .js .loading::after { content: '- - -'; font-family: 'Roboto Mono', monospace; font-size: 1.5em; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; animation: animLoader 1s infinite alternate forwards; } @keyframes animLoader { 0% { content: '- - -'; } 25% { content: 'd - -'; } 50% { content: '- - c'; } 75% { content: '- / -'; } 100% { content: 'd - c'; } } .github { font-size: 0.875em; margin: 0 2em 0 auto; } .btn { border: none; background: none; } .btn:focus { outline: none; } .btn--menu { font-size: 1em; margin: 0 0 0 2em; padding: 0; color: #585656; } .btn--menu .icon--menu-alt, .btn--menu.mode--code .icon--menu { display: none; } .btn--menu.mode--code .icon--menu-alt { display: block; } /* Icons */ .icon { display: block; width: 1.5em; height: 1.5em; margin: 0 auto; fill: currentColor; } /* Content */ .content, .content__inner { position: absolute; top: 0; left: 0; display: flex; align-items: center; width: 100%; height: 100%; } .content__inner { z-index: 100; flex-direction: column; align-content: flex-start; padding: 2.5em 2.5em 0; } .content__top { display: flex; align-items: center; flex: none; width: 100%; } .title { font-size: 1em; font-weight: normal; line-height: 1; display: flex; align-items: center; height: 1.75em; margin: 0; } .title__inner.mode--design { font-size: 1.5em; } .title__inner.mode--code { text-transform: lowercase; } .controls { display: flex; justify-content: space-between; align-items: center; width: 9em; margin: 1em 0 0 auto; } .codrops-icon { color: #484545; } .mode--code, .menu--code .menu__link { font-family: 'Roboto Mono', monospace; text-transform: lowercase; color: #e04643; } .menu { font-size: 1.85em; flex: none; width: 100%; margin: 2em 0 0 auto; text-align: right; } .menu__inner { margin: 0; padding: 0; list-style: none; } .menu--code { font-size: 1em; flex: none; width: 100%; margin: auto 0 2em 0; text-align: left; } .menu:not(.menu--code) .menu__item { position: relative; } .menu__item:not(:last-child) { margin: 0 0 0.25em 0; } .js .menu--code { display: none; } .menu__link { display: inline-block; } .menu--code .menu__link:hover { color: #fff; } .content__bottom { display: flex; align-items: center; width: 100%; margin: auto 0 0 0; } .switch { position: relative; display: flex; align-items: center; } .switch__content { display: flex; } .switch__item { line-height: 1; position: relative; display: inline-block; margin: 0 1.5em 0 0; padding: 0 0 0.15em; color: #585656; } .switch__item span { position: relative; display: inline-block; pointer-events: none; } .switch__item--current { pointer-events: none; color: #232323; background-color: #6dcc9e; } .mode--code .switch__item--current { color: #232323; background-color: #e04643; } .switch__item:first-child::after { content: ''; position: absolute; top: -5%; left: calc(100% + 0.75em); width: 1px; height: 110%; background: #464646; transform: rotate(22.5deg); } .link-wrap { display: flex; align-items: center; height: 4em; margin: 0 0 0 auto; } .contact-link { display: inline-block; padding: 1em 0; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: rgba(107, 87, 86, 0.22); opacity: 0; } @media screen and (max-height: 38.5em) { .menu { text-align: left; } } @media screen and (max-width: 40em) { .content__top { font-size: 0.5em; } .content__bottom { font-size: 0.85em; } .menu { font-size: 1em; } .content__inner { padding: 1em 1em 0; } }
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:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;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:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.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;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;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;}
.pieces { width: 58.6572vh; /* make the size of container to be same ratio like image; will be reset dynamically */ height: 90vh; /* will be reset dynamically */ margin: auto; flex: none; position: relative; display: flex; flex-wrap: wrap; background-size: 100% auto; background-repeat: no-repeat; background-position: 0 0; } .piece { pointer-events: none; } /* Media query */ @media screen and (max-aspect-ratio: 597/916) { .pieces { width: 80vw; height: 122.75vw; } }

Pin It on Pinterest