Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
education.scss 4.08 KiB
Newer Older
  • Learn to ignore specific revisions
  • peter_rabbit's avatar
    peter_rabbit committed
    #education-page {
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    	h3 {
    		&.big {
    			font-size: 30px;
    		}
    	}
    	.title-banner {
    		display: flex;
    		justify-content: flex-end;
    		flex-direction: column;
    		height: 20vw;
    		min-height: 250px;
    		background-image: url("/assets/images/popularization_banner.png");
    		background-size: cover;
    		background-repeat: no-repeat;
    		background-position: center;
    		h2 {
    			color: white;
    			font-size: 2.5em;
    			margin: 40px;
    			text-shadow: 0 0 6px #0003;
    		}
    	}
    	.special-announcement {
    		background-color: $yellow_2;
    		.page-contents-center {
    			padding: 0 20px;
    			@include flex-center;
    			p {
    				color: $dark_3;
    				font-size: 20px;
    				font-weight: 600;
    				margin: 0;
    				padding: 40px 0;
    			}
    		}
    	}
    
    	.edu-section-title {
    		color: $blue_2;
    		margin: 40px auto;
    		display: flex;
    		align-items: center;
    		white-space: nowrap;
    		gap: 15px;
    		&::after {
    			content: "";
    			display: block;
    			flex: 1;
    			border: 1px solid;
    		}
    	}
    
    	.edu-themes {
    		display: grid;
    		grid-template-columns: 1fr 1fr;
    		gap: 50px;
    		font-family: monospace;
    		padding: 40px 0;
    		.edu-theme {
    			display: grid;
    			grid-template-columns: auto 1fr;
    			h3 {
    				color: $blue_2;
    				grid-row: 1;
    				margin: 0;
    				padding: 10px;
    				display: flex;
    				align-items: center;
    			}
    			img {
    				width: 100%;
    				grid-row: 1 / span 2;
    			}
    			p {
    				text-align: justify;
    				grid-row: 2;
    				margin: 0;
    				padding: 10px 30px 0 10px;
    			}
    		}
    	}
    
    	.edu-articles {
    		display: flex;
    		flex-direction: column;
    		gap: 40px;
    		margin: 20px auto;
    		article.edu-article {
    			display: grid;
    			grid-template-columns: auto 1fr auto;
    			gap: 10px 30px;
    			ul {
    				list-style-type: unset;
    				margin-left: 30px;
    			}
    
    			.edu-art-image {
    				padding: 20px;
    				background-color: black;
    				grid-column: 1;
    				grid-row: 1 / span 3;
    				@include flex-center;
    				width: 150px;
    				height: 150px;
    				overflow: hidden;
    				border-radius: 100%;
    				img {
    					max-width: 100%;
    					max-height: 400px;
    				}
    			}
    
    			.edu-art-title {
    				grid-column: 2 / span 3;
    				color: $light_2;
    				margin: 0;
    				padding: 10px;
    			}
    
    			.edu-art-subtitle {
    				grid-column: 2 / span 3;
    				margin: 10px;
    				color: $medium_grey;
    			}
    
    			.edu-art-description {
    				grid-column: 2;
    				text-align: justify;
    				margin: 10px;
    			}
    
    			.edu-art-carousel {
    				grid-column: 3;
    				width: 30vw;
    				max-width: 500px;
    				.image-carousel {
    					width: 100%;
    					height: 20vw;
    					max-height: 400px;
    					img {
    						width: 100%;
    					}
    				}
    			}
    
    			.edu-art-details {
    				grid-column: 1 / span 3;
    			}
    
    			@media screen and (max-width: 1050px) {
    				grid-template-columns: auto 1fr;
    				.edu-art-title {
    					grid-column: 2;
    				}
    				.edu-art-image {
    					grid-row: 1 / span 2;
    				}
    				.edu-art-carousel {
    					width: 100%;
    					max-width: unset;
    					grid-column: 1 / span 2;
    					grid-row: 3;
    					.image-carousel {
    						height: 40vw;
    						max-height: 400px;
    					}
    				}
    				.edu-art-subtitle {
    					grid-column: 2;
    					grid-row: 2;
    				}
    
    				.edu-art-description {
    					grid-column: 1 / span 2;
    				}
    
    				.edu-art-details {
    					grid-column: 1 / span 2;
    				}
    			}
    
    			@media screen and (max-width: $screen_l) {
    				.edu-art-title {
    					display: flex;
    					align-items: center;
    				}
    
    				.edu-art-subtitle {
    					grid-column: 1 / span 2;
    				}
    				.edu-art-image {
    					width: 100px;
    					height: 100px;
    					grid-row: 1;
    				}
    				// .edu-art-carousel {
    				// 	grid-column: 1 / span 2;
    				// }
    			}
    		}
    
    		article.placeholder {
    			display: grid;
    			grid-template-columns: 200px auto;
    			grid-template-rows: 100px 100px 200px;
    			gap: 10px;
    			margin: 30px;
    			* {
    				background-color: $light_0;
    				flex: 1;
    				&:first-child {
    					// image
    					grid-row: 1 / span 2;
    				}
    				&:last-child {
    					grid-column: 1 / span 2;
    				}
    			}
    		}
    	}
    
    	@media screen and (max-width: 1200px) {
    		.edu-themes {
    			grid-template-columns: 1fr;
    			gap: 30px;
    			padding: 0;
    		}
    	}
    
    	@media screen and (max-width: $screen_s) {
    		.edu-themes {
    			.edu-theme {
    				img {
    					max-width: 150px;
    					height: auto;
    					grid-row: 1;
    				}
    				p {
    					grid-row: 2;
    					grid-column: 1 / span 2;
    					padding: 20px 10px 30px 10px;
    				}
    			}
    		}
    	}