@charset "utf-8"; /* ## ##### ## ## ## ## ## #### #### ## ##### ## ### ## --- CSS Document ## ## ## ## ## # ## ## ##### ## ## JB Simon MARTINEZ © 2024 - jb.martinez.free.fr --> 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. */ } html { scroll-behavior: smooth; /* scroll souple */ } :root { /* --- pseudo-classe, cible le document comme mais sa spécificité sera plus forte */ /* -------------------------------------- * VARIABLES * -------------------------------------- */ /*-- Couleurs --*/ --color-1 :#fff; --color-2 :#000; --color-3 :#eae0d1; --color-4 :#f5ede3; --color-5 :#d8c3ac; } body { /* --- Désigner le contenue de la page html */ margin: 0; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* *************************************************************************************************** 1 - BOOTSTRAP : AMORCER ==> [ col-1, col-md-1, col-lg-1... ] ****************************************************************************************************** */ /* *************************************************************************************************** 2 - USUAL CLASSES : CLASSES USUELLES ==> [ Mise en place type : H1, a, p, button ] ****************************************************************************************************** */ /*-- Titre --*/ h1 { text-align: center; } /*-- Lien hypertexte --*/ a { display: block; text-decoration:none; color: var(--color-5); width: 100%; background-color:var(--color-3); border: 1px solid var(--color-5); padding: 0.25rem 0; } a:hover { text-decoration:none; color: rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.3); background: linear-gradient(45deg, var(--color-5), rgba(255,0,0,0) 70.71%); box-shadow: 0px 2px 2px rgba(0,0,0,0.2); } button { } button:hover { } button:focus { /* Supprimer border de focus sur les bouton */ outline-style:none; } /*-- images --*/ img { /* width: 100%; pour une gestion automatique des images callé sur la taille du bloque parent (figure, picture) */ vertical-align: bottom; } /*-- Liste --*/ ul, ol { margin: 0; padding: 0; } li { list-style:none; margin-left:0; padding-left:0; } /*-- Tableau --*/ table { } tr { } td { } .w100 { width: 100%; } /* *************************************************************************************************** 3 - LAYOUT : DISPOSITION ==> [ Mise en place type : Header, nav, main, footer ] ****************************************************************************************************** */ /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav ul { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } nav li { display: block; width: 80px; text-align: center; margin: 0.25rem; } /* --- MAIN : CONTENUE DE LA PAGE --- */ #tetris { display: flex; flex-direction: column; width: 100%; } #tetris > aside { display: flex; flex-direction: column; justify-content: space-between; width: 100%; background-color: var(--color-4); } .key { display: block; width: 100%; text-align: center; font-size: 12px; color: var(--color-5); } #satistics { display: none; padding: 3rem 80px; } #satistics-mobile { position: relative; z-index: 100; display: block; padding: 1rem; background-color: var(--color-4); } #satistics-mobile > div { padding: 1.5rem 80px 0; border-top: 1px solid rgba(0,0,0,0.2); } #satistics p, #satistics-mobile p { margin: 0; } #satistics-mobile > nav { position: relative; padding: 40px 0; } #satistics-mobile > nav li { width: auto; margin: 0.25rem 0.5rem; } #satistics-mobile > nav a { background-color: transparent; border: 1px solid transparent; } #satistics-mobile > nav a:hover { background-color: transparent; border: 1px solid transparent; filter: drop-shadow(0px 2px 2px #4444dd); background: linear-gradient(45deg, transparent, transparent 70.71%); box-shadow: 10px 5px 5px transparent; border: none; } #satistics-mobile > nav li:nth-child(1), #satistics-mobile > nav li:nth-child(4) { margin: 0.25rem 1.5rem; } #satistics-mobile > nav::after { position: absolute; z-index: -1; border: 3px double rgba(0,0,0,0.5); border-radius: 50%; content: ''; width: 105px; height: 105px; top: 0; left: 0; margin: 13px calc(50% - 54px); background: linear-gradient(var(--color-4), var(--color-5)); filter: drop-shadow(-2px 10px 10px rgba(0,0,0,0.5)); } #satistics-mobile > nav li:nth-child(2) { position: absolute; top: 0; width: 50px; margin: 0; } #satistics-mobile > nav li:nth-child(3) { position: absolute; bottom: 0; width: 50px; margin: 0; } #tetris > section { position: relative; width: 312px; height: 572px; background-image: url("../img/gray-cube.gif"); background-size: 26px; } #tetris > section > div { position: relative; margin: 26px; width: calc(100% - 52px); height: calc(100% - 52px); background-image: url("../img/arp-grid.gif"); background-size: 52px; } .tetrimino { position: absolute; display: block; width: 26px; height: 26px; margin: 0; } #info { position:absolute; display: none; z-index: 20; top: 378px; width: 280px; padding: 1rem; text-align: center; background-color: var(--color-5); } /* --- FOOTER : PIED DE PAGE --- */ footer { } /* *************************************************************************************************** 4 - MODULAR ELEMENTS : ELEMENTS MODULAIRES ==> [ caroussel, galerie... ] ****************************************************************************************************** */ /* *************************************************************************************************** 5 - MEDIA QUERIES : GESTION TAILLE ECRAN ****************************************************************************************************** */ /* SMALL SCREEN : smartphone à partir de 576px */ @media (min-width: 576px) { /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- FOOTER : PIED DE PAGE --- */ footer { } } /* MEDIUM SCREEN : Tablette à partir de 768px */ @media (min-width: 768px) { /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- FOOTER : PIED DE PAGE --- */ footer { } } /* WIDE SCREEN : Tablette et Ordinateur (desktop) à partir de 992px */ @media (min-width: 992px) { /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav ul { flex-direction: column; margin-top: 2rem; } nav li { width: 100px; } /* --- MAIN : CONTENUE DE LA PAGE --- */ #tetris { flex-direction: row; width: 600px; } #tetris > aside { width: calc(100% - 320px); background-color: var(--color-4); } #tetris > section { width: 312px; height: 572px; } #satistics { display: block; } #satistics-mobile { display: none; } #info { top:340px; left: calc(50% - 20px); } /* --- FOOTER : PIED DE PAGE --- */ footer { } } /* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 1200px */ @media (min-width: 1200px) { /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- FOOTER : PIED DE PAGE --- */ footer { } }