Skip to content

Instantly share code, notes, and snippets.

@nhoizey nhoizey/esviji.css
Last active Jan 7, 2016

Embed
What would you like to do?
CSS generated from Sass source in https://github.com/nhoizey/esviji
/* ********************************************************************
* Some variables
* ********************************************************************/
/* ********************************************************************
* Mandatory font face
* ********************************************************************/
@font-face {
font-family: "SansitaOneRegular";
src: url("font/sansitaone-webfont.woff2") format("woff2"), url("font/sansitaone-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
/* ********************************************************************
* Box sizing
* ********************************************************************/
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
/* ********************************************************************
* Body
* ********************************************************************/
html, body {
font-family: SansitaOneRegular;
/* http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #444;
color: #fff;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
/* ********************************************************************
* Modules
* ********************************************************************/
.ball1 {
fill: #f39c12;
stroke: #e67e22;
}
.ball2 {
fill: #2ecc71;
stroke: #27ae60;
}
.ball3 {
fill: #3498db;
stroke: #2980b9;
}
.ball4 {
fill: #9b59b6;
stroke: #8e44ad;
}
.ball5 {
fill: #aa8866;
stroke: #776655;
}
.ball6 {
fill: #e74c3c;
stroke: #c0392b;
}
/* ********************************************************************
* For all screens
* ********************************************************************/
section {
max-width: 150vh;
margin: 0 auto;
padding: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
section h2 {
font-size: 10vmin;
text-align: center;
margin: 3vmin 0;
}
section .controls {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
font-size: calc(3vh - 3vw);
line-height: 2;
}
section .controls li {
text-align: center;
width: 99vw;
padding-bottom: 3vw;
}
section .controls li a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
color: #ccc;
text-decoration: none;
outline: none;
}
section .controls li a:focus, section .controls li a:hover {
color: #3498db;
}
section .controls li a:focus svg *, section .controls li a:hover svg * {
fill: #3498db;
}
section .controls li svg {
width: calc(15vh - 20vw);
height: calc(15vh - 20vw);
max-width: 100px;
max-height: 100px;
margin: 0 auto;
}
@media (min-aspect-ratio: 7 / 24) {
section .controls {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
font-size: 3vh;
}
section .controls li {
width: 49vw;
}
section .controls li svg {
width: calc(14vh - 10vw);
height: calc(14vh - 10vw);
}
}
@media (min-aspect-ratio: 14 / 24) {
section .controls li {
width: 24vw;
}
section .controls li svg {
width: 18vw;
height: 18vw;
}
}
@media (min-aspect-ratio: 17 / 24) {
section .controls li {
width: 49vw;
}
section .controls li svg {
width: 25vw;
height: 25vw;
}
}
@media (min-aspect-ratio: 20 / 24) {
section .controls {
font-size: 3vw;
}
section .controls li {
width: 22vw;
}
section .controls li svg {
width: 16vw;
height: 16vw;
}
}
@media (min-aspect-ratio: 36 / 24) {
section .controls li {
width: 30vh;
}
section .controls li svg {
width: 24vh;
height: 24vh;
}
}
@media (min-aspect-ratio: 42 / 24) {
section .controls {
font-size: 5.5vh;
}
}
/* ********************************************************************
* Home screen
* ********************************************************************/
section#home header {
margin: 0;
padding: 0;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
section#home header h1 {
font-size: 25vmin;
text-align: center;
margin: 3vmin 0;
}
section#home header .logo {
display: block;
width: 45vmin;
height: auto;
margin: 10vmin auto;
padding: 0;
}
@media (min-aspect-ratio: 17 / 24) {
section#home header {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
section#home header h1 {
font-size: 20vw;
}
section#home header .logo {
width: 20vw;
height: 20vw;
margin: 3vw 0;
}
}
@media (min-aspect-ratio: 20 / 24) {
section#home header {
margin-top: calc(90vh - 70vw);
}
}
@media (min-aspect-ratio: 30 / 24) {
section#home header {
margin-top: 0;
}
}
@media (min-aspect-ratio: 36 / 24) {
section#home header h1 {
font-size: 30vh;
}
section#home header .logo {
width: 30vh;
height: auto;
margin: 4.5vh 0;
}
}
section#home .controls .play img {
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
section#home .controls .sound {
display: none;
}
.soundeffectsloaded section#home .controls .sound, .ambiancesoundloaded section#home .controls .sound {
display: block;
}
section#home .controls .sound .on {
display: none;
}
section#home .controls .sound .off {
display: block;
}
section#home .controls .sound.on .on {
display: block;
}
section#home .controls .sound.on .off {
display: none;
}
@-webkit-keyframes pulse {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
/* ********************************************************************
* Play screen
* ********************************************************************/
section#play {
font-size: 15vmin;
line-height: 1.5;
}
section#play h1, section#play ul, section#play .score, section#play .level, section#play .lives {
margin: 0;
padding: 0;
}
section#play h1 {
font-size: 20vmin;
color: #ccc;
padding: 0 3vmin;
height: 30vmin;
}
section#play .progress {
position: absolute;
top: 30vmin;
left: 0;
width: 100vw;
height: calc(100vh - 30vmin - 134.375vw);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
section#play .progress .score {
padding: 0 3vmin;
font-size: 1.5em;
text-align: center;
}
section#play .progress ul {
width: 100%;
list-style-type: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
color: #ccc;
}
section#play .progress ul li {
text-align: center;
}
section#play .progress ul span {
color: #eee;
}
section#play .progress .icon {
margin-right: 3vmin;
width: .75em;
height: .75em;
}
section#play .score, section#play .lives, section#play .level {
display: inline-block;
-webkit-transition-property: color, -webkit-transform;
transition-property: color, transform;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
section#play .score.changeDown, section#play .lives.changeDown, section#play .level.changeDown {
color: #c0392b;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
section#play .score.changeUp, section#play .lives.changeUp, section#play .level.changeUp {
color: #27ae60;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
section#play svg#board {
position: absolute;
left: 0;
bottom: 0;
width: 100vw;
height: 134.375vw;
pointer-events: none;
}
section#play svg#board path {
pointer-events: visibleFill;
}
section#play svg#board .playzone {
stroke-width: 0;
fill: #777;
}
section#play svg#board .ball text {
font-size: 16px;
text-anchor: middle;
fill: #fff;
stroke-width: 0;
}
section#play svg#board #playable, section#play svg#board #playableSpring {
pointer-events: none;
}
section#play svg#board #playable:hover, section#play svg#board #playableSpring:hover {
cursor: pointer;
}
section#play svg#board #playable.throwable, section#play svg#board #playableSpring.throwable {
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-duration: .7s;
animation-duration: .7s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
section#play svg#board #playable {
-webkit-transform-origin: 294px center;
-ms-transform-origin: 294px center;
transform-origin: 294px center;
}
section#play svg#board #playable.throwable {
-webkit-animation-name: ballAnimation;
animation-name: ballAnimation;
}
section#play svg#board #playableSpring {
stroke-width: 2;
stroke: #cee;
fill: none;
-webkit-transform-origin: 308px center;
-ms-transform-origin: 308px center;
transform-origin: 308px center;
-webkit-transform: scaleX(0.5);
-ms-transform: scaleX(0.5);
transform: scaleX(0.5);
}
section#play svg#board #playableSpring.throwable {
-webkit-animation-name: springAnimation;
animation-name: springAnimation;
}
section#play .controls {
position: static;
}
section#play .controls .pause {
position: absolute;
top: 3vmin;
bottom: auto;
left: auto;
right: 3vmin;
width: 20vmin;
height: 20vmin;
}
section#play .controls .pause svg {
width: 100%;
height: 100%;
}
@media (min-aspect-ratio: 8 / 24) {
section#play .progress ul {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
}
@media (min-aspect-ratio: 11 / 24) {
section#play {
font-size: 10vmin;
}
section#play .progress ul {
position: absolute;
left: 3vmin;
width: 25vw;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
section#play .progress ul li {
text-align: left;
}
}
@media (min-aspect-ratio: 13 / 24) {
section#play {
font-size: calc(13 / 24 * 10vh - 2vw);
}
section#play .progress {
position: absolute;
left: 3vmin;
height: auto !important;
}
section#play .progress .score {
padding: 0;
text-align: left;
}
section#play .progress ul {
position: static;
line-height: 1.2;
}
section#play .progress ul li {
text-align: left;
}
}
@media (min-aspect-ratio: 15 / 24) {
section#play h1 {
font-size: 12.5vh;
height: 18.75vh;
}
section#play svg#board {
width: 62.5vh;
height: 83.98438vh;
left: auto;
right: 0;
}
section#play .progress {
font-size: 6vw;
}
section#play .controls .pause {
width: 12.5vh;
height: 12.5vh;
}
}
@media (min-aspect-ratio: 19 / 24) {
section#play svg#board {
width: 79.16667vw;
max-width: 74.4186vh;
height: 106.38021vw;
max-height: 100vh;
}
section#play .progress {
top: calc(18.75vh + 3vmin);
width: calc(100vw - 3vmin - 19 / 24 * 100vw);
}
section#play .progress ul {
width: 100%;
}
section#play .controls .pause {
top: auto !important;
left: 3vmin;
right: auto;
bottom: 3vmin;
}
}
@media (min-aspect-ratio: 24 / 24) {
section#play .progress {
width: calc(100vw - 2 * 3vmin - 74.4186vh);
height: calc(100vh - 18.75vh - 3 * 3vmin - 12.5vh);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-orientation: column;
}
section#play .progress ul li {
text-align: center;
}
section#play .progress .score {
text-align: center;
}
}
@media (min-aspect-ratio: 36 / 24) {
section#play {
max-width: 150vh;
}
section#play svg#board {
width: 74.4186vh;
height: 100vh;
}
section#play .progress {
width: calc(150vh - 2 * 3vmin - 74.4186vh);
font-size: 9vh;
}
}
@-webkit-keyframes ballAnimation {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(-16px);
transform: translateX(-16px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes ballAnimation {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(-16px);
transform: translateX(-16px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes springAnimation {
0% {
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
}
@keyframes springAnimation {
0% {
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
}
/* ********************************************************************
* Pause screen
* ********************************************************************/
section#pause .sound {
display: none;
}
.soundeffectsloaded section#pause .sound, .ambiancesoundloaded section#pause .sound {
display: block;
}
section#pause .sound .on {
display: none;
}
section#pause .sound .off {
display: block;
}
section#pause .sound.on .on {
display: block;
}
section#pause .sound.on .off {
display: none;
}
/* ********************************************************************
* Scores screen
* ********************************************************************/
.highscores {
list-style-type: none;
margin: 5vmin;
font-size: 5vh;
text-align: right;
}
.highscores .thisone {
color: #27ae60;
font-size: 1.3em;
}
.highscores .tryagain {
color: #c0392b;
font-size: 1.3em;
}
@media (min-aspect-ratio: 12 / 24) {
.highscores {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
}
@media (min-aspect-ratio: 18 / 24) {
.highscores {
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
}
}
@media (min-aspect-ratio: 24 / 24) {
.highscores {
-webkit-columns: 4;
-moz-columns: 4;
columns: 4;
}
}
/* ********************************************************************
* About screen
* ********************************************************************/
#about .about {
margin: 5vmin;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
@media (min-aspect-ratio: 20 / 24) {
#about .about {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
}
#about .description a:link, #about .description a:visited {
color: #3498db;
text-decoration: underline;
}
@media (min-aspect-ratio: 20 / 24) {
#about .description {
-webkit-box-flex: 3;
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
}
}
#about .social {
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
#about .social a {
margin: 1em;
}
#about .social a, #about .social a svg {
width: 15vmin;
height: 15vmin;
}
@media (min-aspect-ratio: 20 / 24) {
#about .social {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
/* ********************************************************************
* Description for browsers lacking some support for SVG, flexbox, etc.
* ********************************************************************/
#description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 1em;
overflow-y: scroll;
}
#description h1 {
font-size: 3em;
text-align: center;
}
#description h2, #description p {
font-family: sans-serif;
}
#description p.icon {
text-align: center;
}
#description a:link, #description a:visited {
color: #ccc;
}
#description a:hover, #description a:active {
color: #fdd;
}
#description .error {
padding: .2em .5em;
border: 1px solid #962d22;
background-color: #f2c9c5;
color: #c0392b;
}
#description .error a:link, #description .error a:visited {
color: #c0392b;
}
#description .error a:hover, #description .error a:active {
color: #962d22;
}
/* no delay on focusable elements in (future) iOS: https://adactio.com/journal/10019 */
a, button, input, select, textarea, label, summary {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.