@charset "utf-8"; /* ## ##### ## ## ## ## ## #### #### ## ##### ## ### ## --- CSS Document ## ## ## ## ## # ## ## ##### ## ## JB Simon MARTINEZ © 2022 - 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 :# ; --color-2 :# ; --color-3 : rgba(0,0,0,0.1); --color-4 :# ; --color-5 :# ; } body { /* --- Désigner le contenue de la page html */ font-family: 'Roboto', sans-serif; /*-- Police google font --*/ /* background-image: url("../img/arp.jpg"); */ /* background-size: 100%; */ background-color: beige; } /* *************************************************************************************************** 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 { font-size: 2rem; color: var(--color-3); text-shadow: 1px 1px rgba(255,255,255,0.75), -1px -1px rgba(0,0,0,0.75); opacity: 0.5; text-align: center; } /*-- Lien hypertexte --*/ a { color: rgba(0,0,0,0.5); } a:hover { text-decoration:none; color: rgba(0,0,0,1); } 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 { } /* *************************************************************************************************** 3 - LAYOUT : DISPOSITION ==> [ Mise en place type : Header, nav, main, footer ] ****************************************************************************************************** */ /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } #box-rating { position: absolute; display: flex; flex-direction: column; justify-content: space-between; top: 3rem; left: calc(50% - 155px); width: 310px; height: 180px; padding: 0.25rem; border: 1px solid rgba(0,0,0,0.5); border-radius: 10px; } #box-rating nav ul { position: relative; display: flex; flex-direction: row; justify-content: center; width: 100%; height: 38px; background-color: rgba(0,0,0,0.2); color: #000; } #box-rating nav a { display: block; border: 1px solid rgba(0,0,0,0.2); padding: 3px; width: 40px; border-radius: 5px; transform: translateY(3px); margin-right: 0.2rem; text-align: center; } #box-rating nav a:hover { border: 1px solid rgba(0,0,01); } #box-rating nav i { font-size: 20px; padding: 2px; } #box-rating h6 { background-color: rgba(0,0,0,0.1); text-align: center; margin-top: 2px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: rgba(0,0,0,0.2); } #notation { position: relative; overflow-y: scroll; width: 100%; height: 150px; border: 1px solid rgba(0,0,0,0.1); background-color: #fff; } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } #game { position:absolute; z-index: -1; display: flex; flex-direction: row; justify-content: center; align-items:center; width: 100%; height: 95vh; } #game article { position: relative; width: 340px; height: 203px; } #board { position: absolute; z-index: 0; width: 100%; filter: drop-shadow(-10px 40px 4px rgba(0,0,0,0.5)); } #board-select { position: absolute; display: none; z-index: 5; top: 0; left: 0; width: 100%; height: auto; } #board img { width: 100%; height: auto; } #board-select img { width: 100%; height: auto; } .case { position: absolute; z-index: 200; } .case img { width: 100%; height: auto; filter: drop-shadow(-5px -2px 1mm rgba(0, 0, 0, 0.5)); } /* --- FOOTER : PIED DE PAGE --- */ footer { position: absolute; left: 0; margin: 0 auto; bottom: -1rem; width: 100%; transform: translateY(-1rem); display: flex; flex-direction: row; justify-content: center; } #total-pawn { position:relative; z-index: 99; display: flex; flex-direction: row; justify-content: space-between; width: 250px; height: 150px; } #total-pawn aside { position: relative; display: flex; flex-direction: column; align-items: center; } /* *************************************************************************************************** 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 { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } #game article { width: 900px; height: 538px; } .case img { filter: drop-shadow(-10px -2px 1mm rgba(0, 0, 0, 0.5)); } /* --- 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 { } }