« MediaWiki:Chameleon.css » : différence entre les versions

Version du 9 février 2023 à 15:08

/*Modifie la hauteur du bandeau de navigation*/

nav#mw-navigation{
	min-height:10vh;
}

/*Supprime la ligne de séparation du titre avec le contenu sur la page d'accueil (titre qui a été retiré par le wikicode)*/
body.rootpage-Accueil #firstHeading{
	border: none;
	margin:0;
	padding:0;
}
/*Affiche l'image de fond*/
body.rootpage-Accueil #ImageAccueil{
  background-color: transparent;
  background-size: cover;
  background-position: 20% bottom;
  height: 90vh; /*100vh - 10vh de nav*/
  position:relative;/*pour placement du titre en absolute*/
  overflow-x:visible;
  overflow-y:clip;
}

body.rootpage-Accueil #ImageAccueil::before{
  content: " ";
  position: absolute;
  width: 100vw;
  height: 100%;
  z-index: -1;
  left: calc(0px - (100vw - 100%)/2);
  background-image: url(https://wikimontessori.org/images/4/4e/Vue_d%27ensemble.jpg);
  background-position:0% center;
  background-size:cover;
}

/* Évite la scrollbar liée à l'image de fond de la page d'accueil*/
body.rootpage-Accueil{
	overflow-x:hidden;
}

/*Titre principal*/
body.rootpage-Accueil #ImageAccueilContent{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body.rootpage-Accueil #ImageAccueilContent h1{
	font-size:3rem;
	margin-top:0;
	padding-top:0;
	color:white;
	text-shadow: 0.04em 0.04em 0.04em rgba(0,0,0,1);
	border-bottom: 0.03rem solid white;
	padding-bottom: 20px;
}

body.rootpage-Accueil #ImageAccueilContent p{
  margin-top: 30px;
  font-size:1.5rem;
  color:white;
  text-shadow: 0.04em 0.04em 0.04em rgba(0,0,0,1);
}

@media (min-width: 768px){
	body.rootpage-Accueil #ImageAccueilContent h1{
		font-size:4rem;
	}
	body.rootpage-Accueil #ImageAccueilContent p{
		font-size:2rem;
	}
}

@media (min-width: 992px){
	body.rootpage-Accueil #ImageAccueilContent h1{
		font-size:5rem;
	}
	body.rootpage-Accueil #ImageAccueilContent p{
		font-size:3rem;
	}
}

/*CARTES*/

/*Dimensions des img dans les cards*/
.card .card-img-top {
    width: 100%;
    object-fit: cover;
}
/*Définit la hauteur de l'image en fonction du type de carte : s, m, l*/
.card-s .card-img-top {
    height: 25vh;
}

.card-m .card-img-top {
    height: 40vh;
}

.card-l .card-img-top {
    height: 50vh;
}

.card-body{
	padding:.75rem;
}

h3.card-title{
	margin:0;
	padding:0;
}

/*Suppression des effets de la balise <p> insérée par MW*/
.card p{
	margin:0;
}

/*Suppression des effets de la balise <pre> insérée par MW*/
.card pre{
	padding:0;
	border:none;
	margin:0;
	font-size:0;
}

/*Espacement des cartes*/
.card{
	margin-top:1rem;
	margin-bottom:1rem;
}

/*Image principale d'une page de matériel - Float à partir d'une certaine largeur d'écran*/

div.featuredImage .thumbimage{
	max-height: 20rem;
	width: auto;
}
@media (min-width: 768px){
	div.featuredImage{
	float:right; 
	max-width:30vw; 
	max-height:60vw; 
	clear:right;
	}
}

div.featuredImage .thumbcaption{
	text-align:center;
}

/*Chargement des polices de caractère*/
@font-face {
  font-family: Abel;
  src: url("resources/assets/Abel-Regular.ttf") format("truetype");
}
@font-face {
  font-family: ArchitectsDaughter;
  src: url("resources/assets/ArchitectsDaughter-Regular.ttf") format("truetype");
}


/* -------------------------------------------------------------*/
/* Menu supérieur */
/* -------------------------------------------------------------*/

/* Augmentation de la taille de la barre de recherche (en flex) */
@media (min-width: 1105px)
{
	/* Supprime la règle étrange de marge à gauche pour pousser les éléments à droite */
	/* Utilise la règle flex-end, faite pour cela */
	.p-navbar .navbar-nav.right {
	  /*margin-left: 0 !important;*/
	  justify-content: flex-end !important;
	  flex-grow: 1;
	}
	
	/* La barre prend 50% de l'espace restant disponible */
	#p-search {
	  flex-grow: 0.5;
	}
}

/* Suppression des icones */
a.n-mainpage-description::before
{
	display:none ;
}

/* Texte des menus plus grand */
#mw-navigation .nav-link
{
  font-size: large;
}

/* Menus soulignés au survol */
#mw-navigation .nav-link:hover
{
	text-decoration: underline;
}

/* -------------------------------------------------------------*/
/* Gestion des commentaires */
/* -------------------------------------------------------------*/

/* Les commentaires prennent l'espace de leur conteneur */
.comments-body .full, .comments-body .reply, .comments-body #comment
{
	width: auto;
}

.comments-body #comment
{
	width: 100%;
}

/* -------------------------------------------------------------*/
/* Gestion du pied de page */
/* -------------------------------------------------------------*/

.msd-block
{
	display: flex;
	align-items: end;
	color: black;
}

.msd-block .p-navbar
{
	border-radius: 5px 5px 0 0;
}

.msd-block .footer-info
{
  justify-content: flex-end;
  flex-grow: 1;
  font-style: italic;
}

.msd-footer
{
	display: flex;
	color: white ;
	align-items: center;
	background-color: #252c62;
	padding: 15px;
}

.msd-footer a
{
	color: inherit ;
}

.msd-footer .footer-icons
{
  flex-grow: 1;
}

.footer-info
{
	margin: 0;
	text-align: justify;
}