Modèle:Accueil bibliothèque/style.css

/* STYLING FULL AND MID LIBRARY CARD CONTAINER */
.conteneur-biblio{
	width:100%;
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
	align-items:flex-start;
	gap:20px 8px;
	margin-top:20px;
}

.conteneur-biblio>p{ /*mediawiki likes to put in phantom <p> tags*/
	display:none;
}

/* styling full-size library cards */
.carte-biblio{
	width:200px;
	padding:0;
	border:1px gray solid;
    border-radius:10px 10px 4px 4px;
    overflow:hidden;
    z-index:10;
    box-shadow: 3px 1px 8px 1px gray;
	transition: box-shadow 0.4s, transform 0.4s;
}

.carte-biblio:hover{
	box-shadow: 5px 4px 11px 3px #666;
	transform:scale(1.02);
}

.carte-biblio .carte-biblio-image {
	height:270px;
	padding:0;
	margin:0;
	z-index:-1;
}

.carte-biblio .carte-biblio-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	transform: scale(1.1);
	overflow:hidden;
	padding:0;
	margin:0;
	transition: transform 0.4s, filter 0.4s;
	z-index:-1;
	filter:grayscale(1);
}

.carte-biblio .carte-biblio-image img:hover{
	transform:scale(1.15);
	filter:grayscale(0.3);
}

/*Common to full and mid size*/
.carte-biblio-TOC{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.carte-biblio-contenu{
	padding:15px 2px;
	margin:0;
	text-align:center;
	display:block;
	z-index:10;
	overflow:hidden;
	position:relative;
}

.carte-biblio .carte-biblio-contenu{
	border-top:1px solid gray;
}

.carte-biblio-contenu p{
	line-height:0.1rem;
}

.carte-biblio-titre{
	font-size:1.2rem;
	font-weight:normal;
}

.carte-biblio-oeuvres{
	font-size:0.8rem;
}

.carte-biblio-oeuvres,.carte-biblio-titre, .carte-biblio p, .carte-biblio-moyen p{
	display:inline;
}

/*styling mid-size library card*/
.carte-biblio-moyen{
	width:150px;
	padding:0;
	/*border:1px gray solid;*/
    /*border-radius:10px 10px 4px 4px;*/
    overflow:hidden;
    z-index:10;
    /*box-shadow: 3px 1px 6px 1px gray;*/
	transition: box-shadow 0.4s, transform 0.4s;
}

.carte-biblio-moyen:hover{
	/*box-shadow: 5px 4px 11px 3px #666;*/
	transform:scale(1.02);
}

.carte-biblio-moyen .carte-biblio-image {
	height:150px;
	padding:0;
	margin:0;
	z-index:-1;
	display:flex;
	align-items:center;
	justify-content:center;
	clip-path: inset(0 round 10px); /*makes rounded edges, for some reason border-radius doesn't want to work*/
}

.carte-biblio-moyen .carte-biblio-image img{
	width:100%;
	height:auto;
	transform: scale(1.1);
	overflow:hidden;
	padding:0;
	margin:0;
	transition: transform 0.4s, filter 0.4s;
	z-index:-1;
	filter:grayscale(1);
}

.carte-biblio-moyen .carte-biblio-image img:hover{
	filter:grayscale(0.3);
}

.carte-biblio-moyen .carte-biblio-oeuvres{
	font-size:1rem;
}

/* STYLING MINI LIBRARY CARD CONTAINER */
.conteneur-biblio-mini{
	display: flex;
	flex-flow:row wrap;
	justify-content:center;
	align-items:flex-start;
	width:100%;
	margin-top:20px;
	gap:30px 40px;
}

/* styling mini library cards */
.carte-biblio-mini{
	width:100px;
}

.carte-biblio-mini-contenu{
	height:75px;
	overflow:hidden; /* you get three lines of text, no more */
}

.carte-biblio-mini-image{
	width:100%;
	height:50px;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:5px;
	gap:0;
}

.carte-biblio-mini img{
	height:auto;
	width:100px;
	object-fit:cover;
	overflow:hidden;
	padding:0;
	margin:0;
	transition: filter 0.4s;
	z-index:-1;
	filter:grayscale(1);
	transform:scale(1); /* cancels any scale-in effect that may apply*/
}

.carte-biblio-mini img:hover{
	filter:grayscale(0.3);
}

.carte-biblio-mini-texte{
	text-align:center;
	line-height:1.3;
}

.carte-biblio-mini-titre{
	height:0;
	width:0;
	position:relative;
}

.carte-biblio-mini-TOC{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/*styling quote card*/
.conteneur-citation{
	width:100%;
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
	align-items:flex-start;
	gap:10px 5px;
	margin:0;
}

.carte-citation{
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
	width:110px;
	height:200px;
	padding:0;
	border:1px gray solid;
    border-radius:10px 10px 4px 4px;
    overflow:hidden;
    z-index:10;
    box-shadow: 3px 1px 8px 1px gray;
	transition: box-shadow 0.4s, transform 0.4s;
	text-align: center;
}
.carte-citation:hover{
	filter:grayscale(0);
	transform:scale(1.02);
}
.carte-citation-contenu{
	height:50px;
	padding:5px;
	margin:0;
	text-align:center;
	display:block;
	z-index:10;
	overflow:hidden;
	position:relative;
	border-top:2px solid gray;
}

.carte-citation-image{
	height:135px;
	width:100%;
	overflow:hidden;
	object-fit:contain;
	display:flex;
	margin:0;
	align-items:center;
	justify-content:center;
	gap:0;
}

.carte-citation img{
	height:135px;
	width:100px;
	object-fit:contain;
	overflow:hidden;
	margin:0;
	transition: filter 0.4s;
	z-index:-1;
	filter:grayscale(1);
	transform:scale(1); /* cancels any scale-in effect that may apply*/
}

.carte-citation-texte{
    width:100%;
    margin: 0;
    padding:5px;
    flex-grow: 0; /* Ensure that the text container takes up available space */
    text-align: center; /* Center-align text inside the container */
    display: flex;
    justify-content: flex-start; /* Align text at the top */
    align-items: center;
    flex-direction: column;
    border-top:2px solid gray;
}

.carte-citation-titre{
	height:0;
	width:0;
	position:relative;
}

.carte-citation-TOC{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.carte-citation p {
    margin: 0; /* Remove any margin */
    padding-top: 5px; /* Optional padding to give some space between the image and text */
    align-self: flex-start; /* Align the text at the top of the container */
}

/* MOBILE STYLING */
@media only screen and (max-width: 768px) {
	.conteneur-biblio{
		align-items:stretch;
		gap:15px 2%;
	}
	
	.carte-biblio{
		width:44%;
		box-shadow:2px 1px 4px 1px gray;
	}
	.carte-biblio .carte-biblio-image{
		height:50vw;
		top:0!important;
		left:0!important;
	}
	
	.carte-biblio-moyen{
		width:28vw;
	}
	.carte-biblio-moyen .carte-biblio-image{
		height:28vw;
	}
	.carte-biblio-moyen .carte-biblio-contenu{
		padding:4px 0 0 0;
	}
	
	.carte-biblio-mini > p{ /* the every other row bug happens here too, but they're just empty <p> tags. Fixed with this. */
		display:none; 
	}
	.carte-biblio-mini > p{ /* reduce space between mini cards on mobile so we can fit more in the viewport */
		margin:0;
	}
	.carte-biblio-mini-contenu{ /* also reduces space between mini cards now that there is no margin. Calculated to fit 3 lines of text */
		height:50px;	
		line-height:1;
	}
}