This commit is contained in:
chrosey
2017-09-13 07:52:34 +02:00
parent a1f16c37f4
commit 2340b0226b
24621 changed files with 2912161 additions and 149 deletions
+86
View File
@@ -0,0 +1,86 @@
html, body {
height: 100%;
overflow: hidden;
font-family: "proxima-nova", sans-serif; }
.tether.tether-theme-arrows-dark .tether-content {
-webkit-filter: none;
filter: none;
background: #000; }
.tether.tether-theme-arrows-dark .tether-content ul {
color: #fff;
list-style: none;
padding: 0;
margin: 0; }
.tether.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
border-right-color: #000; }
.browser-demo {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
.browser-demo *, .browser-demo *:after, .browser-demo *:before {
box-sizing: border-box; }
.browser-demo .top {
position: absolute;
height: 60px;
padding: 20px;
line-height: 40px;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.browser-demo .bottom {
position: absolute;
top: 60px;
bottom: 0;
width: 100%; }
.browser-demo .bottom .left {
border-right: 1px solid rgba(0, 0, 0, 0.1);
position: absolute;
width: 30%;
height: 100%;
overflow: auto; }
.browser-demo .bottom .left .item {
height: 64px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer; }
.browser-demo .bottom .left .item:hover, .browser-demo .bottom .left .item.tether-open {
background: rgba(0, 0, 0, 0.1);
border-bottom: 1px solid transparent; }
.browser-demo .bottom .left .item:last-child {
border-bottom: 0; }
.browser-demo .bottom .right {
position: absolute;
width: 70%;
right: 0;
height: 100%;
padding: 20px; }
.browser-demo .title {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
background: rgba(0, 0, 0, 0.1);
width: 150px;
height: 15px;
margin-bottom: 20px; }
.browser-demo .word {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
background: rgba(0, 0, 0, 0.1);
width: 50px;
height: 8px;
margin-right: 5px;
margin-bottom: 5px; }
.browser-demo .word:nth-last-child(4n+1) {
width: 73px; }
.browser-demo .word:nth-last-child(10n+1) {
width: 14px; }
.browser-demo .word:nth-last-child(9n+1) {
width: 80px; }
+2
View File
@@ -0,0 +1,2 @@
/* Prism.js */
code[class*="language-"], pre[class*="language-"] {color: black; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } /* Code blocks */ pre[class*="language-"] {padding: 1em; margin: .5em 0; overflow: auto; font-size: 14px; } :not(pre) > code[class*="language-"], pre[class*="language-"] {background: rgba(0, 0, 0, .05); } /* Inline code */ :not(pre) > code[class*="language-"] {padding: .1em; border-radius: .3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata {color: slategray; } .token.punctuation {color: #999; } .namespace {opacity: .7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol {color: #905; } .token.selector, .token.attr-name, .token.string, .token.builtin {color: #690; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable {color: #a67f59; } .token.atrule, .token.attr-value, .token.keyword {color: #07a; } .token.regex, .token.important {color: #e90; } .token.important {font-weight: bold; } .token.entity {cursor: help; }
+247
View File
@@ -0,0 +1,247 @@
html, body {
height: 100%; }
body {
margin: 0;
font-family: "proxima-nova", "Helvetica Neue", sans-serif; }
.button {
display: inline-block;
border: 2px solid #333;
color: #333;
padding: 1em 1.25em;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 3px;
text-decoration: none;
cursor: pointer;
width: 140px;
font-size: .8em;
line-height: 1.3em;
text-align: center; }
.tether-element.tether-theme-arrows-dark .tether-content {
padding: 1em;
font-size: 1.1em; }
.tether-element.tether-theme-arrows-dark .tether-content .button {
border-color: #fff;
color: #fff;
width: 170px;
pointer-events: all; }
.mobile-copy {
display: none; }
@media (max-width: 568px) {
.mobile-copy {
display: block; } }
.button.dark {
background: #333;
color: #fff; }
.hero-wrap {
height: 100%;
overflow: hidden; }
table.showcase {
height: 100%;
width: 100%;
position: relative; }
table.showcase:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 20px;
margin: auto;
height: 0;
width: 0;
border-width: 18px;
border-style: solid;
border-color: transparent;
border-top-color: rgba(0, 0, 0, 0.2); }
table.showcase.no-next-arrow:after {
display: none; }
table.showcase .showcase-inner {
margin: 40px auto 60px;
padding: 10px; }
table.showcase .showcase-inner h1 {
font-size: 50px;
text-align: center;
font-weight: 300; }
@media (max-width: 567px) {
table.showcase .showcase-inner h1 {
font-size: 40px; } }
table.showcase .showcase-inner h2 {
font-size: 24px;
text-align: center;
font-weight: 300;
margin: 1em 0 1em; }
@media (max-width: 567px) {
table.showcase .showcase-inner h2 {
font-size: 14px; } }
table.showcase .showcase-inner p {
text-align: center; }
table.showcase.hero {
text-align: center; }
table.showcase.hero .tether-target-demo {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
border: 2px dotted #000;
margin: 5rem auto;
padding: 5rem; }
@media (max-width: 567px) {
table.showcase.hero .tether-target-demo {
padding: 1rem; } }
table.showcase.share {
background: #f3f3f3; }
table.showcase.projects-showcase .showcase-inner .projects-list {
width: 80%;
max-width: 1200px;
margin: 0 auto; }
table.showcase.projects-showcase .showcase-inner .projects-list .project {
color: inherit;
text-decoration: none;
position: relative;
width: 50%;
float: left;
text-align: center;
margin-bottom: 2rem; }
table.showcase.projects-showcase .showcase-inner .projects-list .project:nth-child(odd) {
clear: left; }
table.showcase.projects-showcase .showcase-inner .projects-list .os-icon {
width: 8rem;
height: 8rem;
margin-bottom: 1rem;
background-size: 100%; }
table.showcase.projects-showcase .showcase-inner .projects-list h1 {
font-size: 2.5rem; }
table.showcase.projects-showcase .showcase-inner .projects-list p {
font-size: 1.3rem; }
table.showcase.browser-demo {
background-image: -webkit-linear-gradient(top left, #723362 0%, #9d223c 100%);
background-image: linear-gradient(top left, #723362 0%, #9d223c 100%);
background-color: #9d223c;
position: absolute;
top: 100%; }
table.showcase.browser-demo.fixed {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1; }
table.showcase.browser-demo.fixed .browser-demo-inner {
-webkit-transition: width 2s ease-in-out, height 2s ease-in-out;
transition: width 2s ease-in-out, height 2s ease-in-out; }
table.showcase.browser-demo.fixed[data-section="what"] {
box-shadow: 0 0 0 0; }
table.showcase.browser-demo.fixed[data-section="why"] .browser-demo-inner {
width: 70%; }
table.showcase.browser-demo.fixed[data-section="outro"] .showcase-inner {
pointer-events: all; }
table.showcase.browser-demo .showcase-inner {
pointer-events: none;
position: absolute;
left: 10%;
right: 40%;
top: 220px;
bottom: 120px;
margin: 0;
padding: 0; }
@media (max-width: 567px) {
table.showcase.browser-demo .showcase-inner {
bottom: 90px;
top: 180px; } }
table.showcase.browser-demo .browser-demo-inner {
height: 100%;
width: 100%; }
table.showcase.browser-demo .section-copy {
-webkit-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
opacity: 0;
position: absolute;
top: 0;
position: absolute;
height: 200px;
color: #fff;
text-align: center;
width: 100%; }
table.showcase.browser-demo .section-copy.active {
opacity: 1;
top: -150px; }
@media (max-width: 567px) {
table.showcase.browser-demo .section-copy.active {
top: -130px; } }
table.showcase.browser-demo .section-copy h2 {
font-size: 40px;
font-weight: bold;
line-height: 1;
margin: 25px 0 15px; }
@media (max-width: 567px) {
table.showcase.browser-demo .section-copy h2 {
font-size: 30px; } }
table.showcase.browser-demo .browser-window {
border-radius: 4px;
background: #fff;
position: relative;
height: 100%;
width: 100%;
max-width: 1200px;
margin: 0 auto; }
table.showcase.browser-demo .browser-window .browser-titlebar {
position: absolute;
top: 0;
left: 0;
right: 0;
border-bottom: 1px solid #eee;
height: 55px; }
table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots {
padding: 16px; }
table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots b {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
border-radius: 50%;
width: 10px;
height: 10px;
margin-right: 7px;
background: rgba(0, 0, 0, 0.1); }
table.showcase.browser-demo .browser-window .browser-frame {
position: absolute;
top: 55px;
left: 0;
right: 0;
bottom: 0; }
table.showcase.browser-demo .browser-window .browser-frame iframe {
border-radius: 0 0 4px 4px;
border: 0;
width: 100%;
height: 100%; }
table.showcase.browser-demo-section .section-scroll-copy {
position: relative;
z-index: 10;
color: #fff;
width: 100%;
font-size: 22px; }
table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner {
position: absolute;
z-index: 10;
color: #fff;
right: 10%;
width: 23%; }
table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner a {
color: inherit; }
table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner .example-paragraph {
border-radius: 4px;
background: #000;
padding: 1rem; }
.browser-content {
display: none; }