siteWeb/style/styles_index.scss

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');
* {
	box-sizing: border-box;
}
body {
	margin: 0;
}
@media only screen and (min-width: 1080px) {
	.main {
		padding: 0 20vh 0 20vh;
	}
  }
  @keyframes load-items-left {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0%);
		opacity: 1;
	}
}
@keyframes load-items-right {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0%);
		opacity: 1;
	}
}
main {
	padding: 10px;
	background-color: rgb(255, 255, 255);
	display: grid;
	grid-template-columns: 65% 35%;
	font-family: "Roboto", sans-serif;
	font-weight: 300;

	& a {
		&:visited, &:active, &:link {
			text-decoration: none;
		color: rgb(0, 0, 0);
		}
	}

	& .element {
		position: relative;
		padding-bottom: 24px;
		word-break: break-word;
		word-wrap: break-word;
		text-align: justify;
		hyphens: auto;
		width: 11em;
		height: 25em;
		padding: 10px 10px 10px 10px;
		margin: 2.5px 2.5px 0px 2.5px;
		overflow: hidden;
		p:not(.hidden) {
			display: block;
		}
		p.hidden {
			margin-top: 15px;
			display: none;
			font-style: italic;
		}

		&:hover {
			p:not(.hidden) {
				display: none;
			}
			h2 {
				display: none;
			}
			p.hidden {
				display: block;
			}
		}
		& img {
			border-radius: 10% 40% 40% 40%;
			filter: blur(0.10px);
		}
		&:hover {
			& img {
				border-radius: 10% 10% 10% 10%;
				filter: blur(0);
				transition: 0.3s;

				// transition: clip-path 0.3s;
				// clip-path: circle(50%);
			}
			transition: 0.3s;
			box-shadow:-1px -1px 30px 1px #ffb200;
			background-image: radial-gradient(circle at 32.47% 115.42%, #ffc100 0, #ffb200 8.33%, #ffa014 16.67%, #ff8c2a 25%, #ff7638 33.33%, #ff5e41 41.67%, #f94646 50%, #e12e49 58.33%, #cb164b 66.67%, #b7004e 75%, #a60052 83.33%, #970056 91.67%, #8a005c 100%);
			color: rgb(255, 255, 255);
			& h2 {
				text-decoration: underline;
			}
		}
	}

	& .main-contents {
		background-color: rgb(226, 226, 226);
		padding: inherit;
		border-left: 3px solid black;
		display: flex;
		flex-direction: column;
		& aside {
			animation: load-items-right 0.2s ease-out;
			display: flex;
			flex-direction: column;
			word-break: break-all;
			word-wrap: break-word;
			text-align: justify;
			img {
				max-width: 100%;
				height: auto;
			}
			&:hover {
				transition: 0.3s;
				background-color: white;
				box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; // Pris sur https://getcssscan.com/css-box-shadow-examples
				& h2 {
					&::before {
						transition: 0.2s ease-in;
						bottom: -5px;
						left: 0px;
						width: 100%;
						max-width: 100%;
						height: 5px;
					}
				}
			}
			& h2 {
				font-style: italic;
				font-family: 'Playfair Display', serif;
				position: relative;
				&::before {
					content: " +++";
					transition: 0.2s ease-out;
					font-size: 12px;
					color: grey;
					position: absolute;
					background-color: rgb(78, 78, 78);
					bottom: -5px;
					left: 5px;
					width: 6%;
					height: 5px;
				}
			}
			p {
				font-family: 'Montserrat', serif;
				text-align: justify;
			}
			a { // C'est très long pour faire un joli lien :sob-emote:
				position: relative;
				&::before {
					content: " ";
					position: absolute;
					background-color:#2077d3;
					bottom: -1px;
					left: 0;
					width: 100%;
					height: 3px;
				}
				&::after {
					transition: ease-out 0.3s;
					content: " ";
					position: absolute;
					background-color:#fcbc3e;
					bottom: -1px;
					left: 0;
					width: 0%;
					height: 3px;
				}
				&:hover {
					&::after {
						transition: all ease-out 0.3s;
						width: 100%;
					}
				}
			}
			padding: 20px 10px;
			margin: 15px 0px;
			background-color: #f8f9fa;
			border-radius: 5px;
			box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
		}
		
	}

	& .main-side {
		animation: load-items-left 0.2s ease-out;
		background-color: rgb(255, 255, 255);
		padding: inherit;
		align-content: flex-start;
		display: flex;
		justify-content: center;
		flex-direction: row;
		flex-wrap: wrap;
		& img {
			height: 150px;
			width: 150px;
		}
		& u {
			position: absolute;
			bottom: 6px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-direction: row;
			text-decoration: underline green 2.8px;
			text-decoration-skip-ink: none;
			color: green;
			font-weight: 600;

			& img {
				margin-right: 4px;
				height: 18px;
				width: 18px;
			}
		}
	}
}