mirror of
https://github.com/LucasVbr/game-lib.git
synced 2026-05-13 17:21:51 +00:00
Lucàs
127 lines
4.1 KiB
CSS
127 lines
4.1 KiB
CSS
/*
|
|
* style.css
|
|
* @author Vabre Lucas, Strub Lilian
|
|
*/
|
|
|
|
:root { /* Variables Principales utilisé dans plupart des pages */
|
|
--border-radius-5 : 5px; /* Bordures arrondis de 5px */
|
|
--border-radius-15 : 15px; /* Bordures arrondis de 15px */
|
|
}
|
|
|
|
/* ### Entête de la page ### */
|
|
header {
|
|
text-align: center; /* Centre le texte (le logo) */
|
|
}
|
|
|
|
header img { /* image de l'entête (logo) */
|
|
margin: 25px 0 25px 0; /* met une marge en haut et en bas de 25px */
|
|
}
|
|
|
|
/* ### Corps de la page ### */
|
|
@font-face { /* Police d'écriture */
|
|
font-family: "Cabin-Regular"; /* Définis les polices d'écritures à utiliser dans le site */
|
|
src: url('../font/Cabin-Regular.ttf');
|
|
}
|
|
|
|
body { /* Corps */
|
|
font-family: Cabin-Regular, Arial, consolas;
|
|
color: var(--text-color); /* Défini la couleur générale du texte */
|
|
background-color: var(--background-color); /* Défini la couleur d'arrière plan du site */
|
|
|
|
padding: 0; /* Enlève les marges intenes */
|
|
margin: 0; /* Enlève les marges */
|
|
width: 100%; /* Fait prendre la taille du site, l'intégralité de l'écran */
|
|
}
|
|
|
|
.container { /* Container de la page (centrage) */
|
|
margin-left: 10%;
|
|
margin-right:10%;
|
|
}
|
|
|
|
h3, a { /* Met les titres(3) et les lien */
|
|
color : var(--main-color); /* Couleur du texte en la couleur sélectionnées */
|
|
}
|
|
|
|
a { /* Tout les liens du site */
|
|
text-decoration: none; /* Enlève le souligné des liens clicables */
|
|
}
|
|
|
|
|
|
th, tr, td { /* Enlève les espacements des tableaux */
|
|
border-collapse: collapse; /* Bordures collées */
|
|
}
|
|
|
|
hr {
|
|
border-color: none;
|
|
color: var(--overlay-color);
|
|
}
|
|
|
|
abbr { /* Les unicodes */
|
|
text-decoration: none; /* Pour enlever le soulignement des elements unicodes */
|
|
}
|
|
|
|
.boutton { /* Affichage du boutton */
|
|
background-color: var(--main-color); /* Couleur de fond */
|
|
color: var(--text-color); /* Couleur du texte */
|
|
font-size: 1.0em; /* Taille du texte */
|
|
|
|
border-radius: var(--border-radius-5); /* Arrondis des bordures */
|
|
padding: 14px; /* Marge intene */
|
|
border-style: none; /* Enlève la bordure de base */
|
|
border-width: 0px; /* Enlève l'épaisseur des bordure de base */
|
|
|
|
box-shadow: 0 0 15px var(--main-color); /* Lumière arrière */
|
|
transition: 0.2s; /* Durée d'animation */
|
|
}
|
|
|
|
.boutton:hover { /* Boutton au survol */
|
|
cursor: pointer; /* Affichage du pointeur de la souris */
|
|
box-shadow: 0 0 0; /* Enlève l'effet de lumière */
|
|
}
|
|
|
|
/* ### Menu ### */
|
|
nav ul { /* La liste délément dans le panneau de navigation */
|
|
text-align: center; /* Centre le texte */
|
|
background-color: var(--overlay-color); /* Met en couleur de font la couleur secondaire */
|
|
margin: auto 25% auto 25%; /* Centre l'élément de 25% de chaque cotés */
|
|
padding: 0; /* Enlève la marge interne par défaut du "ul" */
|
|
border-radius: var(--border-radius-15); /* Bordure arrondis de 15px */
|
|
}
|
|
|
|
nav li { /* Chaque éléments dans le panneau de navigation */
|
|
display: inline-block; /* Affiche tout les éléments du menu en ligne */
|
|
text-decoration: none; /* Enlève les puce de la liste */
|
|
padding: 10px; /* Marge interne de tout les cotés */
|
|
margin: 5px; /* Marge de tout les cotés */
|
|
font-size: 1.1em; /* Taille du texte */
|
|
vertical-align: middle; /* Aligne au milieu verticalement */
|
|
}
|
|
|
|
nav a { /* Lien du panneau de navigation */
|
|
color: var(--text-color); /* Texte en couleur normale */
|
|
}
|
|
|
|
.active { /* Page sélectionnée dans le panneau de navigation */
|
|
color: var(--main-color); /* Couleur sélectionnée */
|
|
}
|
|
|
|
/* ### Pied de page ### */
|
|
footer { /* Bandeau de pied de page */
|
|
margin-top: 50px; /* Défini une marge vers le haut */
|
|
width: 100%; /* La taille de l'élément prend la longueur de la page */
|
|
background-color: var(--overlay-color); /* Couleur de fond de l'élément */
|
|
bottom: 0;
|
|
}
|
|
|
|
footer div {/* Les quatres catégories du pied de page */
|
|
display: inline-block; /* Met les éléments en ligne */
|
|
vertical-align: center; /* Aligne au milieu verticalement */
|
|
}
|
|
|
|
footer div img {/* Les images du pied de page => Logo + Discord */
|
|
margin: 20px; /* Défini une marge de tout les cotés */
|
|
}
|
|
|
|
footer p {/* "tout droits réservés" */
|
|
text-align: right; /* aligne le texte a droite */
|
|
} |