UNPKG

bespoke

Version:

DIY Presentation Micro-Framework

393 lines (340 loc) 6.55 kB
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; margin: 0; padding: 0; } body { overflow-x: hidden; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 12px; color: #606060; } a { -webkit-transition: color 1s ease; -moz-transition: color 1s ease; -ms-transition: color 1s ease; -o-transition: color 1s ease; transition: color 1s ease; color: #a0a0a0; text-decoration: none; } footer { background: white; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; } footer img { border: 0; border-radius: 4px; float: left; width: 30px; height: 30px; margin: 15px; } footer p { padding-top: 24px; } footer a { font-weight: bold; } .themes { width: 180px; position: absolute; left: 50%; top: 0; margin-left: -55px; } .themes strong { margin-right: 4px; } .arrow { -webkit-transition: background .1s ease; -moz-transition: background .1s ease; -ms-transition: background .1s ease; -o-transition: background .1s ease; transition: background .1s ease; cursor: pointer; color: white; background: #808080; width: 15px; height: 15px; border-radius: 4px; text-align: center; font-weight: bold; line-height: 19px; overflow: hidden; position: absolute; top: 24px; } .arrow.up { left: -42px; } .arrow.down { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); left: -24px; } #main { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } h1 { color: white; font-family: Raleway Dots; /* Fix thin font rendering on Windows */ font-size: 156px; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); font-weight: normal; text-align: center; text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white; position: absolute; z-index: 20; top: 50%; right: 0; height: 82px; margin-top: -110px; width: 776px; left: 50%; margin-left: -388px; } h2 { -webkit-transition: opacity 2s ease; -moz-transition: opacity 2s ease; -ms-transition: opacity 2s ease; -o-transition: opacity 2s ease; transition: opacity 2s ease; position: absolute; left: 0; right: 0; top: 50%; z-index: 30; margin-top: 14px; text-align: center; font-family: Gill Sans, Segoe UI Light, Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 200; color: white; opacity: 0.9; } header p { -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; -ms-transition: opacity .5s ease; -o-transition: opacity .5s ease; transition: opacity .5s ease; position: absolute; left: 50%; bottom: 50px; margin-left: -91px; text-align: center; padding: 10px 15px; width: 182px; z-index: 40; border-radius: 6px; color: white; background: #808080; font-size: 12px; opacity: 0; } header p.visible { opacity: 1; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { h1 { text-shadow: none; } } #forkme { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); background-color: white; overflow: hidden; position: fixed; z-index: 30; width: 240px; right: -60px; top: 46px; } #forkme a { color: #404040; display: block; font: 13px Helvetica Neue, Arial, sans-serif; margin: 0.05em 0 0.075em 0; padding: 0.6em; text-align: center; text-decoration: none; } article { -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; } section { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; background: #c0c0c0; border-radius: 30px; width: 512px; height: 380px; position: absolute; top: 50%; left: 50%; margin-left: -256px; margin-top: -220px; opacity: 0; } body, section.bespoke-slide { -webkit-transition: -webkit-transform .7s ease, opacity .7s ease, background-color .7s ease; -moz-transition: -moz-transform .7s ease, opacity .7s ease, background-color .7s ease; -ms-transition: -ms-transform .7s ease, opacity .7s ease, background-color .7s ease; -o-transition: -o-transform .7s ease, opacity .7s ease, background-color .7s ease; transition: transform .7s ease, opacity .7s ease, background-color .7s ease; } section.bespoke-active { opacity: 1; z-index: 1; } section.bespoke-inactive { pointer-events: none; z-index: 0; } @media only screen and (max-width: 768px) { body { font-size: 10px; } h1 { margin-top: -95px; } h2 { font-size: 14px; margin-top: 22px; } header p { font-size: 10px; bottom: 40px; padding: 6px 12px; } footer { height: 50px; } footer img { height: 30px; width: 30px; margin: 10px; } footer p { padding-top: 19px; } .arrow { top: 18px; } #forkme a { font-size: 11px; padding: 0.7em; } section { margin-top: -216px; } a, .arrow { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } body, section.bespoke-slide { -webkit-transition: -webkit-transform .7s ease, opacity .7s ease; -moz-transition: -moz-transform .7s ease, opacity .7s ease; -ms-transition: -ms-transform .7s ease, opacity .7s ease; -o-transition: -o-transform .7s ease, opacity .7s ease; transition: transform .7s ease, opacity .7s ease; } } @media only screen and (max-width: 640px) { footer .credits p { position: relative; top: -6px; width: 160px; } } @media only screen and (max-width: 570px) { #forkme { right: -78px; top: 32px; } #forkme a { font-size: 9px; } h1 { -webkit-transform: scale(0.27); -moz-transform: scale(0.27); -ms-transform: scale(0.27); -o-transform: scale(0.27); transform: scale(0.27); margin-top: -94px; } h2 { font-size: 12px; margin-top: -7px; } article { -webkit-transform: scale(0.5) translateY(-27px); -moz-transform: scale(0.5) translateY(-27px); -ms-transform: scale(0.5) translateY(-27px); -o-transform: scale(0.5) translateY(-27px); transform: scale(0.5) translateY(-27px); } .themes { left: auto; right: -88px; } .themes strong { display: block; } .themes .colon { display: none; } footer p { position: relative; top: -8px; } footer .credits p { width: 160px; } footer .themes p { width: 110px; } }