255 lines
7.1 KiB
CSS
255 lines
7.1 KiB
CSS
|
/* Prism.js */
|
||
|
code[class*="language-"], pre[class*="language-"] {color: black; text-shadow: 0 1px white; 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; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {text-shadow: none; background: #b3d4fc; } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection {text-shadow: none; background: #b3d4fc; } @media print {code[class*="language-"], pre[class*="language-"] {text-shadow: none; } } /* Code blocks */ pre[class*="language-"] {padding: 1em; margin: .5em 0; overflow: auto; font-size: .7em; } :not(pre) > code[class*="language-"], pre[class*="language-"] {background: #f5f2f0; } /* 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; background: hsla(0,0%,100%,.5); } .token.atrule, .token.attr-value, .token.keyword {color: #07a; } .token.regex, .token.important {color: #e90; } .token.important {font-weight: bold; } .token.entity {cursor: help; }
|
||
|
|
||
|
html, body {
|
||
|
height: 100%;
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
html { font-size: 150%; }
|
||
|
@media (max-width: 1200px) { html { font-size: 125%; } }
|
||
|
@media (max-width: 1000px) { html { font-size: 100%; } }
|
||
|
@media (max-width: 767px) { html { font-size: 80%; } }
|
||
|
@media (max-width: 568px) { html { font-size: 50%; } }
|
||
|
@media (max-width: 480px) { html { font-size: 35%; } }
|
||
|
@media (max-width: 320px) { html { font-size: 25%; } }
|
||
|
|
||
|
body {
|
||
|
font-family: "proxima-nova", "Helvetica Neue", sans-serif;
|
||
|
}
|
||
|
|
||
|
.template {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.section {
|
||
|
height: 100%;
|
||
|
width: 100%;
|
||
|
position: relative;
|
||
|
-webkit-transform: translateZ(0);
|
||
|
}
|
||
|
|
||
|
.number-container, .about-section {
|
||
|
position: absolute;
|
||
|
margin: auto;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
width: 100%;
|
||
|
height: 20em;
|
||
|
text-align: center;
|
||
|
-webkit-transform: translateZ(0);
|
||
|
}
|
||
|
|
||
|
.about-section {
|
||
|
font-size: 1em;
|
||
|
text-align: left;
|
||
|
width: 30em;
|
||
|
height: 22em;
|
||
|
max-width: 80%;
|
||
|
}
|
||
|
|
||
|
.about-section h1 {
|
||
|
margin-top: 0;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.about-section a {
|
||
|
color: inherit;
|
||
|
}
|
||
|
|
||
|
.number-container .odometer-container {
|
||
|
font-size: 6em;
|
||
|
}
|
||
|
|
||
|
.number-description {
|
||
|
display: inline-block;
|
||
|
text-transform: uppercase;
|
||
|
font-size: 2.5em;
|
||
|
letter-spacing: .08em;
|
||
|
margin: 1em 0 0;
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
.number-detail {
|
||
|
display: inline-block;
|
||
|
text-transform: uppercase;
|
||
|
font-size: 1.5em;
|
||
|
letter-spacing: .08em;
|
||
|
opacity: 0.5;
|
||
|
}
|
||
|
|
||
|
.title-number-section .number-container .odometer-container {
|
||
|
font-size: 4em;
|
||
|
}
|
||
|
|
||
|
.title-number-section .number-description {
|
||
|
font-size: 1.55em;
|
||
|
margin: .5em 0 .25em;
|
||
|
color: #666;
|
||
|
}
|
||
|
|
||
|
@media (max-width: 767px) {
|
||
|
.title-number-section .number-container .odometer-container {
|
||
|
font-size: 5em;
|
||
|
}
|
||
|
|
||
|
.title-number-section .number-description {
|
||
|
font-size: 1.8em
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media (max-width: 568px) {
|
||
|
.title-number-section .number-container .odometer-container {
|
||
|
font-size: 6em;
|
||
|
}
|
||
|
|
||
|
.title-number-section .number-description {
|
||
|
font-size: 2.2em;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.button {
|
||
|
text-decoration: none;
|
||
|
color: #000;
|
||
|
font-size: 0.7em;
|
||
|
padding: .3em .7em .4em;
|
||
|
cursor: pointer;
|
||
|
margin: 2em auto;
|
||
|
border: .15em solid;
|
||
|
display: inline-block;
|
||
|
line-height: 1.7;
|
||
|
}
|
||
|
|
||
|
.dark-button {
|
||
|
color: white;
|
||
|
background-color: #222;
|
||
|
}
|
||
|
|
||
|
.number-source {
|
||
|
text-decoration: none;
|
||
|
color: inherit;
|
||
|
}
|
||
|
|
||
|
.number-source:hover .number-detail {
|
||
|
border-bottom: 1px dotted;
|
||
|
opacity: 0.8;
|
||
|
}
|
||
|
|
||
|
.number-section.number-section-theme-minimal {
|
||
|
background: #eee;
|
||
|
color: #444;
|
||
|
}
|
||
|
|
||
|
.number-section.number-section-theme-minimal .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner {
|
||
|
text-align: right;
|
||
|
}
|
||
|
|
||
|
.number-section.number-section-theme-digital .odometer {
|
||
|
border: .1em solid rgba(139, 245, 165, 0.4);
|
||
|
}
|
||
|
|
||
|
.number-section.number-section-theme-digital {
|
||
|
background: #000;
|
||
|
color: #8bf5a5;
|
||
|
}
|
||
|
|
||
|
.number-section.number-section-theme-car {
|
||
|
background: #eee0d3;
|
||
|
color: #333;
|
||
|
}
|
||
|
|
||
|
.number-section.number-section-theme-train-station {
|
||
|
background: #ccc;
|
||
|
color: #000;
|
||
|
}
|
||
|
|
||
|
.number-section.number-section-theme-slot-machine {
|
||
|
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #000000), color-stop(2%, #000000), color-stop(2%, #ffa500), color-stop(50%, #ffe000), color-stop(98%, #ffa500), color-stop(98%, #000000), color-stop(100%, #000000));
|
||
|
background-image: -webkit-linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);
|
||
|
background-image: -moz-linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);
|
||
|
background-image: -o-linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);
|
||
|
background-image: -ms-linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);
|
||
|
background-image: linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);
|
||
|
background-size: 31em 100%;
|
||
|
background-repeat: no-repeat;
|
||
|
background-position: center;
|
||
|
color: #000;
|
||
|
}
|
||
|
|
||
|
.odometer.odometer-theme-odometer {
|
||
|
line-height: 2em;
|
||
|
}
|
||
|
|
||
|
.odometer-theme-odometer:before {
|
||
|
content: " ";
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
top: 0;
|
||
|
width: 100%;
|
||
|
height: .1em;
|
||
|
background: #000;
|
||
|
}
|
||
|
|
||
|
.odometer-theme-odometer:after {
|
||
|
content: " ";
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
bottom: 0;
|
||
|
width: 100%;
|
||
|
height: .1em;
|
||
|
background: #000;
|
||
|
}
|
||
|
|
||
|
.odometer-theme-odometer .odometer-value {
|
||
|
width: 100%;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.down-arrow {
|
||
|
position: absolute;
|
||
|
cursor: pointer;
|
||
|
margin: auto;
|
||
|
display: block;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
font-size: 2em;
|
||
|
bottom: 1em;
|
||
|
height: 1em;
|
||
|
width: 1em;
|
||
|
text-align: center;
|
||
|
opacity: 0.5;
|
||
|
-webkit-transform: translateZ(0);
|
||
|
}
|
||
|
|
||
|
.down-arrow:hover {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
.down-arrow:before {
|
||
|
content: "\2193";
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
/* Social sharing */
|
||
|
|
||
|
#retweet_button {
|
||
|
position: fixed;
|
||
|
bottom: 30px;
|
||
|
left: 30px;
|
||
|
width: 100px;
|
||
|
z-index: 3;
|
||
|
}
|
||
|
|
||
|
#github_stars {
|
||
|
position: fixed;
|
||
|
bottom: 30px;
|
||
|
left: 130px;
|
||
|
width: 100px;
|
||
|
z-index: 3;
|
||
|
}
|
||
|
|
||
|
.social-sharing-wrapper { -webkit-filter: grayscale(1) contrast(1.3); }
|
||
|
.social-sharing-wrapper:hover { -webkit-filter: none; }
|