@charset "utf-8"; /* ## ##### ## ## ## ## ## #### #### ## ##### ## ### ## --- CSS Document | Jeux du solitaire ## ## ## ## ## # ## ## ##### ## ## JB Simon MARTINEZ © 2020 --> conception Mobile First : du Mobile vert les grands écrans */ /* *************************************************************************************************** 0 - RESET : RÉINITIALISER ==> [ Etablir les styles standards ] ****************************************************************************************************** */ * { /* --- Désigner tous les éléments d'une page en même temps. */ } :root { /* --- pseudo-classe, cible le document comme mais sa spécificité sera plus forte */ } body { background-image: url("../img/tapie.jpg"); font-family: 'Roboto', sans-serif; font-size: 16px!important; } /* *************************************************************************************************** 2 - USUAL CLASSES : CLASSES USUELLES ==> [ Mise en place type : H1, a, p, button ] ****************************************************************************************************** */ p { margin: 0; } a { text-decoration:none; } img { width: 100%; height: auto; vertical-align: bottom; } /* *************************************************************************************************** 3 - LAYOUT : DISPOSITION ==> [ Mise en place type : Header, nav, main, footer ] ****************************************************************************************************** */ /* --- BUGER ---*/ .burger { position: absolute; z-index: 99; top: 0; left: 0; width: 100%; height: auto; background-color: rgba(0,0,0,.5); } .burger .icon { position: absolute; top: 0; left: 0; width: 10vw; height: calc(10vw - 1vw); padding: 1vw; overflow: hidden; } #icon-menu { position: relative; top: 0; } .burger .p-score, .burger .p-time { position: absolute; top: 0; width: auto; height: calc(5vw - 1vw); padding-top: 2vw; color: white; } .burger .p-score { left: 33.33%; } .burger .p-time { left: 66.66%; } .burger ul { position: absolute; margin: 0; padding: 0.5rem 0; top: 10vw; left: 0; width: auto; height: auto; background-color: rgba(0,0,0,.5); list-style-type: none; } .burger ul a { display: block; color: white; padding: 1rem; text-transform: uppercase; } #sub-menu { display: none; } /* --- MAIN --- */ #talon img, #distribut img, #colonne img { -webkit-filter: drop-shadow(8px 8px 24px rgba(0,0,0,0.2)); filter: drop-shadow(8px 8px 24px rgba(0,0,0,0.2)); } #talon { position: absolute; z-index: 2; top: 10vh; left: 1.8%; width: 12.8%; height: auto; } #distribut { position: absolute; z-index: 2; top: 10vh; left: 16%; width: 24%; height: auto; } #distribut div { position: absolute; z-index: 2; width: 52.5%; height: auto; } #distribut1 { padding-left: 0; } #distribut2 { padding-left: 12.2%; } #distribut3 { padding-left: 25%; } #stack { position: absolute; z-index: 0; display: flex; flex-direction: row; justify-content: flex-end; top: 10vh; right: 1.3%; width: calc(100% - 1.3%); height: auto; } #stack div, #colonne > div { position: relative; margin: 0 0.5%; width: 12.8%; height: auto; } #colonne { position: absolute; z-index: 2; display: flex; flex-direction: row; justify-content: center; top: 20vh; left: 0; width: 100%; height: calc(50vh - 20vh); } #colonne1 div { position: absolute; } #colonne2 div { position: absolute; } #colonne3 div { position: absolute; } #colonne4 div { position: absolute; } #colonne5 div { position: absolute; } #colonne6 div { position: absolute; } #colonne7 div { position: absolute; } #colonne1 div:nth-child(2), #colonne2 div:nth-child(2), #colonne3 div:nth-child(2), #colonne4 div:nth-child(2), #colonne5 div:nth-child(2), #colonne6 div:nth-child(2), #colonne7 div:nth-child(2) { margin-top: 2vh; } #colonne1 div:nth-child(3), #colonne2 div:nth-child(3), #colonne3 div:nth-child(3), #colonne4 div:nth-child(3), #colonne5 div:nth-child(3), #colonne6 div:nth-child(3), #colonne7 div:nth-child(3) { margin-top: 4vh; } #colonne1 div:nth-child(4), #colonne2 div:nth-child(4), #colonne3 div:nth-child(4), #colonne4 div:nth-child(4), #colonne5 div:nth-child(4), #colonne6 div:nth-child(4), #colonne7 div:nth-child(4) { margin-top: 6vh; } #colonne1 div:nth-child(5), #colonne2 div:nth-child(5), #colonne3 div:nth-child(5), #colonne4 div:nth-child(5), #colonne5 div:nth-child(5), #colonne6 div:nth-child(5), #colonne7 div:nth-child(5) { margin-top: 8vh; } #colonne1 div:nth-child(6), #colonne2 div:nth-child(6), #colonne3 div:nth-child(6), #colonne4 div:nth-child(6), #colonne5 div:nth-child(6), #colonne6 div:nth-child(6), #colonne7 div:nth-child(6) { margin-top: 10vh; } #colonne1 div:nth-child(7), #colonne2 div:nth-child(7), #colonne3 div:nth-child(7), #colonne4 div:nth-child(7), #colonne5 div:nth-child(7), #colonne6 div:nth-child(7), #colonne7 div:nth-child(7) { margin-top: 12vh; } #colonne1 div:nth-child(8), #colonne2 div:nth-child(8), #colonne3 div:nth-child(8), #colonne4 div:nth-child(8), #colonne5 div:nth-child(8), #colonne6 div:nth-child(8), #colonne7 div:nth-child(8) { margin-top: 14vh; } #colonne1 div:nth-child(9), #colonne2 div:nth-child(9), #colonne3 div:nth-child(9), #colonne4 div:nth-child(9), #colonne5 div:nth-child(9), #colonne6 div:nth-child(9), #colonne7 div:nth-child(9) { margin-top: 16vh; } #colonne1 div:nth-child(10), #colonne2 div:nth-child(10), #colonne3 div:nth-child(10), #colonne4 div:nth-child(10), #colonne5 div:nth-child(10), #colonne6 div:nth-child(10), #colonne7 div:nth-child(10) { margin-top: 18vh; } #colonne1 div:nth-child(11), #colonne2 div:nth-child(11), #colonne3 div:nth-child(11), #colonne4 div:nth-child(11), #colonne5 div:nth-child(11), #colonne6 div:nth-child(11), #colonne7 div:nth-child(11) { margin-top: 20vh; } #colonne1 div:nth-child(12), #colonne2 div:nth-child(12), #colonne3 div:nth-child(12), #colonne4 div:nth-child(12), #colonne5 div:nth-child(12), #colonne6 div:nth-child(12), #colonne7 div:nth-child(12) { margin-top: 22vh; } #colonne1 div:nth-child(13), #colonne2 div:nth-child(13), #colonne3 div:nth-child(13), #colonne4 div:nth-child(13), #colonne5 div:nth-child(13), #colonne6 div:nth-child(13), #colonne7 div:nth-child(13) { margin-top: 24vh; } #colonne1 div:nth-child(14), #colonne2 div:nth-child(14), #colonne3 div:nth-child(14), #colonne4 div:nth-child(14), #colonne5 div:nth-child(14), #colonne6 div:nth-child(14), #colonne7 div:nth-child(14) { margin-top: 26vh; } #colonne1 div:nth-child(15), #colonne2 div:nth-child(15), #colonne3 div:nth-child(15), #colonne4 div:nth-child(15), #colonne5 div:nth-child(15), #colonne6 div:nth-child(15), #colonne7 div:nth-child(15) { margin-top: 28vh; } #colonne1 div:nth-child(16), #colonne2 div:nth-child(16), #colonne3 div:nth-child(16), #colonne4 div:nth-child(16), #colonne5 div:nth-child(16), #colonne6 div:nth-child(16), #colonne7 div:nth-child(16) { margin-top: 30vh; } #gain { position: fixed; z-index: 200; top: 0; left: 0; width: 100%; height: 100%; display: none; flex-direction: row; justify-content: center; align-items: center; } .gain-img1 { width: 100%!important; height: auto!important; } .gain-img2 { width: 320px!important; height: auto!important; } #gain a { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .sound { position: absolute; z-index: -1; visibility: hidden; top: 0; left: 0; width: 100%; height: 200px; } /* --- FOOTER -- */ footer { position: absolute; z-index: 99; bottom: 0; left: 0; width: 100%; height: 22px; font-size: 12px; color: black; } footer p { text-align: center; } footer a { color: black; } /* *************************************************************************************************** 4 - MODULAR ELEMENTS : ELEMENTS MODULAIRES ==> [ caroussel, galerie... ] ****************************************************************************************************** */ /* *************************************************************************************************** 5 - BOOTSTRAP : AMORCER ==> [ col-1, col-md-1, col-lg-1... ] ****************************************************************************************************** */ /* *************************************************************************************************** 6 - MEDIA QUERIES ****************************************************************************************************** */ /* SMALL SCREEN : smartphone à partir de 640px */ @media (min-width: 576px) { .burger { height: 5vw; } .burger .icon { width: 5vw; height: calc(5vw - 1vw); padding: 0.5vw; } .burger .p-score, .burger .p-time { height: calc(5vw - 1vw); padding-top: 1vw; } .burger ul { top: 5vw; } /* --- MAIN --- */ #talon { top: 11vh; left: 9%; width: 10%; } #distribut { top: 11vh; left: 21%; width: 24%; } #distribut div { width: 41%; } #stack { top: 11vh; right: 8%; width: calc(100% - 8%); height: auto; } #colonne { top: 40vh; } #stack div { margin: 0 1%; width: 11%; height: auto; } #colonne > div { margin: 0 1%; width: 10%; } } /* MEDIUM SCREEN : Tablette à partir de 768px */ @media (min-width: 768px) { } /* WIDE SCREEN : Tablette et Ordinateur (desktop) à partir de 992px */ @media (min-width: 992px) { .burger { height: 3vw; } .burger .icon { width: 3vw; height: calc(3vw - 1vw); padding: 0.25vw; } .burger .p-score, .burger .p-time { height: calc(3vw - 1vw); padding-top: 0.5vw; } .burger ul { top: 3vw; } .burger ul a { padding: 0.5rem; } /* --- MAIN --- */ #colonne1 div:nth-child(2), #colonne2 div:nth-child(2), #colonne3 div:nth-child(2), #colonne4 div:nth-child(2), #colonne5 div:nth-child(2), #colonne6 div:nth-child(2), #colonne7 div:nth-child(2) { margin-top: 2.5vh; } #colonne1 div:nth-child(3), #colonne2 div:nth-child(3), #colonne3 div:nth-child(3), #colonne4 div:nth-child(3), #colonne5 div:nth-child(3), #colonne6 div:nth-child(3), #colonne7 div:nth-child(3) { margin-top: 5vh; } #colonne1 div:nth-child(4), #colonne2 div:nth-child(4), #colonne3 div:nth-child(4), #colonne4 div:nth-child(4), #colonne5 div:nth-child(4), #colonne6 div:nth-child(4), #colonne7 div:nth-child(4) { margin-top: 7.5vh; } #colonne1 div:nth-child(5), #colonne2 div:nth-child(5), #colonne3 div:nth-child(5), #colonne4 div:nth-child(5), #colonne5 div:nth-child(5), #colonne6 div:nth-child(5), #colonne7 div:nth-child(5) { margin-top: 10vh; } #colonne1 div:nth-child(6), #colonne2 div:nth-child(6), #colonne3 div:nth-child(6), #colonne4 div:nth-child(6), #colonne5 div:nth-child(6), #colonne6 div:nth-child(6), #colonne7 div:nth-child(6) { margin-top: 12.5vh; } #colonne1 div:nth-child(7), #colonne2 div:nth-child(7), #colonne3 div:nth-child(7), #colonne4 div:nth-child(7), #colonne5 div:nth-child(7), #colonne6 div:nth-child(7), #colonne7 div:nth-child(7) { margin-top: 15vh; } #colonne1 div:nth-child(8), #colonne2 div:nth-child(8), #colonne3 div:nth-child(8), #colonne4 div:nth-child(8), #colonne5 div:nth-child(8), #colonne6 div:nth-child(8), #colonne7 div:nth-child(8) { margin-top: 17.5vh; } #colonne1 div:nth-child(9), #colonne2 div:nth-child(9), #colonne3 div:nth-child(9), #colonne4 div:nth-child(9), #colonne5 div:nth-child(9), #colonne6 div:nth-child(9), #colonne7 div:nth-child(9) { margin-top: 20vh; } #colonne1 div:nth-child(10), #colonne2 div:nth-child(10), #colonne3 div:nth-child(10), #colonne4 div:nth-child(10), #colonne5 div:nth-child(10), #colonne6 div:nth-child(10), #colonne7 div:nth-child(10) { margin-top: 22.5vh; } #colonne1 div:nth-child(11), #colonne2 div:nth-child(11), #colonne3 div:nth-child(11), #colonne4 div:nth-child(11), #colonne5 div:nth-child(11), #colonne6 div:nth-child(11), #colonne7 div:nth-child(11) { margin-top: 25vh; } #colonne1 div:nth-child(12), #colonne2 div:nth-child(12), #colonne3 div:nth-child(12), #colonne4 div:nth-child(12), #colonne5 div:nth-child(12), #colonne6 div:nth-child(12), #colonne7 div:nth-child(12) { margin-top: 25.5vh; } #colonne1 div:nth-child(13), #colonne2 div:nth-child(13), #colonne3 div:nth-child(13), #colonne4 div:nth-child(13), #colonne5 div:nth-child(13), #colonne6 div:nth-child(13), #colonne7 div:nth-child(13) { margin-top: 27.5vh; } #colonne1 div:nth-child(14), #colonne2 div:nth-child(14), #colonne3 div:nth-child(14), #colonne4 div:nth-child(14), #colonne5 div:nth-child(14), #colonne6 div:nth-child(14), #colonne7 div:nth-child(14) { margin-top: 30vh; } #colonne1 div:nth-child(15), #colonne2 div:nth-child(15), #colonne3 div:nth-child(15), #colonne4 div:nth-child(15), #colonne5 div:nth-child(15), #colonne6 div:nth-child(15), #colonne7 div:nth-child(15) { margin-top: 32.5vh; } #colonne1 div:nth-child(16), #colonne2 div:nth-child(16), #colonne3 div:nth-child(16), #colonne4 div:nth-child(16), #colonne5 div:nth-child(16), #colonne6 div:nth-child(16), #colonne7 div:nth-child(16) { margin-top: 35vh; } /* --- FOOTER --- */ footer { height: 50px; font-size: 16px; } } /* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 1200px */ @media (min-width: 1200px) { .burger { height: 2.5vw; } .burger .icon { width: 2vw; height: calc(3vw - 1vw); top: 0.2rem; left: 0.2rem; padding: 0.25vw; } .burger .p-score, .burger .p-time { height: calc(2.5vw - 1vw); padding-top: 0.25rem; font-size: 1.2rem; } .burger ul { top: 2.5vw; } .burger ul a { padding: 0.5rem; } /* --- MAIN --- */ #talon { top: 15vh; left: 12%; width: 120px; } #distribut { top: 15vh; left: 23%; width: 24%; } #distribut div { width: 120px; } #distribut1 { padding-left: 0; } #distribut2 { padding-left: 5%; } #distribut3 { padding-left: 10%; } #stack { top: 15vh; right: 12%; width: calc(100% - 24.5%); height: auto; } #stack div { margin: 0 0.5%; width: 125px; height: auto; } #colonne > div { margin: 0 0.5%; width: 120px; height: auto; } } /* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 1400px */ @media (min-width: 1400px) { .burger .p-score, .burger .p-time { height: calc(2.5vw - 1vw); padding-top: 0.5rem; font-size: 1.2rem; } #talon { top: 15vh; left: 17%; width: 120px; } #distribut { top: 15vh; left: 27%; width: 24%; } #stack { top: 15vh; right: 16.5%; width: calc(100% - 24.5%); height: auto; } } /* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 1600px */ @media (min-width: 1600px) { .burger .p-score, .burger .p-time { padding-top: 0.8rem; } #talon { top: 15vh; left: 21%; width: 120px; } #distribut { top: 15vh; left: 30%; width: 24%; } #stack { top: 15vh; right: 20.5%; width: calc(100% - 24.5%); height: auto; } } /* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 1600px */ @media (min-width: 1900px) { #talon { top: 15vh; left: 25%; width: 120px; } #distribut { top: 15vh; left: 32.5%; width: 24%; } #stack { top: 15vh; right: 24.5%; width: calc(100% - 24.5%); height: auto; } }