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
games.scss 1.67 KiB
Newer Older
  • Learn to ignore specific revisions
  • peter_rabbit's avatar
    peter_rabbit committed
    #games-page {
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    	.game-articles {
    		article {
    			display: grid;
    			grid-template-columns: 0.7fr 1fr;
    			gap: 30px 50px;
    			margin: 20px 0;
    			&.game-article {
    				grid-template-rows: repeat(7, auto);
    				width: 100%;
    				.game-title {
    					grid-column: 1 / span 2;
    					margin: 0;
    					padding: 30px 20px;
    					color: $light_2;
    					font-size: 35px;
    					font-style: italic;
    				}
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    				.game-banner {
    					grid-column: 1 / span 2;
    					@include flex-center-col;
    					background-color: black;
    					overflow: hidden;
    					height: 300px;
    					img {
    						width: 100%;
    					}
    				}
    
    peter_rabbit's avatar
    peter_rabbit committed
    
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    				.game-tags {
    					display: flex;
    					gap: 10px;
    					flex-wrap: wrap;
    					margin: 10px 20px;
    					span {
    						font-size: 12px;
    						padding: 4px;
    						background-color: $light_0;
    						color: $medium_grey;
    						border-radius: 5px;
    						font-weight: 600;
    					}
    				}
    
    peter_rabbit's avatar
    peter_rabbit committed
    
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    				.game-subtitle {
    					grid-column: 1;
    					margin: 10px 20px;
    					color: $medium_grey;
    				}
    				.game-description {
    					grid-column: 1;
    					text-align: justify;
    					margin: 10px 20px 30px;
    				}
    
    peter_rabbit's avatar
    peter_rabbit committed
    
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    				.image-carousel {
    					grid-column: 2;
    					grid-row: 3 / span 4;
    					height: 100%;
    				}
    			}
    			&.placeholder {
    				* {
    					background-color: $light_0;
    				}
    				height: 400px;
    			}
    			@media screen and (max-width: $screen_l) {
    				grid-template-columns: 1fr;
    				&.game-article {
    					grid-template-rows: repeat(6, auto);
    					.game-title {
    						grid-column: 1;
    						padding: 0;
    						font-size: 25px;
    					}
    
    peter_rabbit's avatar
    peter_rabbit committed
    
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    					.game-banner {
    						grid-column: 1;
    						margin: 0 -20px;
    						height: 200px;
    					}
    
    peter_rabbit's avatar
    peter_rabbit committed
    
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    					.image-carousel {
    						grid-column: 1;
    						grid-row: 3;
    						height: 400px;
    						margin: 0 -20px;
    					}
    				}
    			}
    		}
    	}
    
    peter_rabbit's avatar
    peter_rabbit committed
    }