Last active
August 14, 2017 22:54
-
-
Save kitt/72dabf146de4ed500382f87c945d4276 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-color: cream; | |
color: black; | |
text-align: center; | |
font-family: 'Roboto', Arial, Helvetica, sans-serif; | |
font-size: 18px; | |
} | |
.presents { | |
color: #0071BA; | |
font-size: 24px; | |
margin-bottom: 0; | |
} | |
.presents .dark-logo { | |
padding-right: 10px; | |
margin-bottom: 14px; | |
} | |
.oh-yes { | |
text-transform: uppercase; | |
color: #F4B21B; | |
font-family: 'Bowlby One SC', cursive; | |
margin: 0 0 0 0.1em; | |
font-weight: normal; | |
} | |
h1.oh-yes { | |
font-size: 5em; | |
} | |
@media (max-width: 767px) { | |
h1.oh-yes { | |
font-size: 2.8em; | |
} | |
} | |
h3.oh-yes { | |
font-size: 4em; | |
margin-bottom: 32px; | |
} | |
@media (max-width: 767px) { | |
h3.oh-yes { | |
font-size: 3em; | |
} | |
} | |
@media (min-width: 768px) and (max-width: 1023px) { | |
h3.oh-yes { | |
font-size: 2.8em; | |
} | |
} | |
h4.oh-yes { | |
margin-bottom: 30px; | |
} | |
hr.separator { | |
border-color: #F4B21B; | |
height: 0; | |
color: cream; | |
width: 88%; | |
margin-bottom: 40px; | |
} | |
.show-me { | |
margin: 30px 0 50px; | |
} | |
@media (max-width: 767px) { | |
.show-me { | |
margin: 30px 0 20px; | |
} | |
} | |
#leaderboard { | |
width: 35%; | |
margin: auto; | |
} | |
#leaderboard .third-ish { | |
width: 100%; | |
} | |
.third-ish { | |
width: 33%; | |
display: inline-block; | |
text-align: center; | |
vertical-align: middle; | |
} | |
@media (max-width: 767px) { | |
.third-ish { | |
margin-bottom: 2em; | |
width: 100%; | |
} | |
} | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.third-ish { | |
margin-bottom: 40px; | |
width: 100%; | |
} | |
} | |
.third-ish-title { | |
text-align: left; | |
width: 90%; | |
margin: auto; | |
} | |
.third-ish img { | |
border: 8px solid grey; | |
margin: 20px; | |
width: 25vw; | |
height: 25vw; | |
} | |
@media (max-width: 767px) { | |
.third-ish img { | |
width: 80vw; | |
height: 80vw; | |
margin: 0; | |
} | |
} | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.third-ish img { | |
width: 70vw; | |
height: 70vw; | |
margin: 0; | |
} | |
} | |
.third-ish img.sourced { | |
border: 8px solid #DB8226; | |
} | |
.third-ish-image { | |
margin: 30px auto 0; | |
clear: both; | |
} | |
.details { | |
text-align: center; | |
margin: 20px 0 0 0; | |
} | |
.details p { | |
margin: auto; | |
width: 80%; | |
margin-bottom: 20px; | |
text-align: justify; | |
} | |
.numero-pill { | |
color: white; | |
background-color: #F4B21B; | |
padding: 6px 15px; | |
border-radius: 50%; | |
display: inline-block; | |
min-height: 20px; | |
min-width: 20px; | |
text-align: center; | |
margin: 0 16px 0 20px; | |
float: left; | |
clear: both; | |
font-weight: bold; | |
} | |
.outer-border { | |
width: 70%; | |
border: 8px solid grey; | |
padding: 0; | |
border-radius: 40px; | |
background-color: grey; | |
margin: auto; | |
} | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.outer-border { | |
width: 50%; | |
} | |
} | |
button { | |
border: 8px solid #F4B21B; | |
padding: 0.4em 0.2em 0.4em 0.1em; | |
border-radius: 32px; | |
font-size: 20px; | |
font-weight: bold; | |
color: #0071BA; | |
background-color: white; | |
text-transform: uppercase; | |
width: 100%; | |
text-align: left; | |
} | |
@media (max-width: 767px) { | |
button { | |
font-size: 16px; | |
text-align: center; | |
} | |
} | |
@media (min-width: 768px) and (max-width: 1023px) { | |
button { | |
font-size: 14px; | |
text-align: center; | |
} | |
} | |
@keyframes jiggle { | |
0% { | |
transform: rotate(-2deg) translateX(3px); | |
} | |
5% { | |
transform: rotate(2deg) translateX(-3px); | |
} | |
10% { | |
transform: rotate(-2deg) translate(3px); | |
} | |
15% { | |
transform: rotate(2deg) translate(-3px); | |
} | |
20% { | |
transform: rotate(0deg) translate(0); | |
} | |
} | |
.decoration { | |
border: 4px solid #DB8226; | |
border-radius: 20px; | |
padding: 2px 0px 6px 6px; | |
margin: 0 10px 0 4px; | |
background-color: white; | |
} | |
@media (max-width: 767px) { | |
.decoration { | |
display: none; | |
} | |
} | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.decoration { | |
padding: 5px 0 7px 3px; | |
} | |
} | |
@media (min-width: 1024px) and (max-width: 1399px) { | |
.decoration { | |
display: none; | |
} | |
} | |
@keyframes innerjiggle { | |
0% { | |
transform: rotate(90deg); | |
} | |
5% { | |
transform: rotate(80deg); | |
} | |
10% { | |
transform: rotate(98deg); | |
} | |
15% { | |
transform: rotate(80deg); | |
} | |
20% { | |
transform: rotate(98deg); | |
} | |
25% { | |
transform: rotate(90deg); | |
} | |
} | |
.button-action { | |
font-size: 20px; | |
vertical-align: middle; | |
} | |
@media (min-width: 1024px) and (max-width: 1399px) { | |
.button-action { | |
font-size: 16px; | |
margin: auto; | |
padding-left: 10px; | |
} | |
} | |
.innerjiggle { | |
animation: innerjiggle 2s infinite; | |
} | |
.third-ish-gogogo { | |
margin-top: -40px; | |
text-align: center; | |
} | |
.border-active { | |
background-color: #DB8226; | |
border-color: #DB8226; | |
} | |
.jiggle { | |
animation: jiggle 2s infinite; | |
} | |
#contest-dialog { | |
text-align: left; | |
} | |
#contest-dialog-inner a { | |
color: #0071BA; | |
} | |
.ui-dialog.contest-modal { | |
border: 5px solid #F4B21B; | |
} | |
.contest-modal .ui-dialog-titlebar { | |
background-color: #F4B21B; | |
color: white; | |
} | |
#contest-dialog-error { | |
padding: 0 0 1px; | |
font-weight: bold; | |
color: red; | |
} | |
.start-hidden { | |
visibility: hidden; | |
} | |
.start-none { | |
display: none; | |
} | |
#progress { | |
margin: auto; | |
} | |
.progress-details { | |
text-align: center; | |
width: 90%; | |
margin: auto; | |
font-size: 80%; | |
} | |
.progress-info { | |
width: 200px; | |
text-align: right; | |
display: inline-block; | |
padding-right: 10px; | |
font-weight: bold; | |
} | |
.progress-field { | |
display: inline-block; | |
min-width: 60%; | |
padding: 0 6px; | |
margin-bottom: 10px; | |
border: none; | |
} | |
.candidate-vote { | |
text-align: center; | |
} | |
.vote-message { | |
padding: 0px 20px 20px; | |
} | |
.vote-details { | |
padding: 0.4em 0.2em 0.4em 0.1em; | |
font-size: 20px; | |
font-weight: bold; | |
color: #0071BA; | |
text-transform: uppercase; | |
width: 100%; | |
text-align: center; | |
margin-top: 22px; | |
} | |
@media (max-width: 767px) { | |
.vote-details { | |
margin-top: 50px; | |
} | |
} | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.vote-details { | |
margin-top: 50px; | |
} | |
} | |
.vote-flash { | |
position: fixed; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
padding: 30px; | |
background-color: #F4B21B; | |
color: white; | |
text-align: center; | |
text-transform: uppercase; | |
transform: translateY(100%); | |
} | |
.vote-flash-is-showing { | |
animation: popup 3s 1; | |
} | |
@keyframes popup { | |
0% { | |
transform: translateY(100%); | |
} | |
10% { | |
transform: translateY(0); | |
} | |
90% { | |
transform: translateY(0); | |
} | |
99% { | |
transform: translateY(100%); | |
} | |
} | |
#leaderboard .numero-pill { | |
color: white; | |
background-color: #F4B21B; | |
padding: 14px 30px; | |
border-radius: 50%; | |
border: 8px solid #DB8226; | |
display: inline-block; | |
min-height: 20px; | |
min-width: 20px; | |
text-align: right; | |
margin: 0px 16px 0 -80px; | |
clear: both; | |
font-size: 30px; | |
font-weight: bold; | |
vertical-align: bottom; | |
float: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment