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

Skip to content
Snippets Groups Projects
games.scss 1.24 KiB
Newer Older
  • Learn to ignore specific revisions
  • peter_rabbit's avatar
    peter_rabbit committed
    #games-page {
    
    	#game-articles-section {
    		display: grid;
    		gap: 20px;
    		grid-template-columns: 1fr 1fr;
    		padding: 40px;
    
    		.game-thumb {
    			min-width: 350px;
    			overflow: hidden;
    			height: 350px;
    			background-position: center center;
    			background-size: cover;
    			background-repeat: no-repeat;
    			image-rendering: pixelated;
    			image-rendering: -moz-crisp-edges;
    			image-rendering: crisp-edges;
    
    			padding: 15px;
    			transition: transform 0.3s, opacity 0.3s;
    			display: flex;
    			align-items: flex-end;
    			opacity: .9;
    
    			&:hover {
    				transform: scale(1.03);
    				opacity: 1;
    			}
    
    			.text-card {
    				background-color: #0008;
    				display: flex;
    				flex-direction: column;
    				padding: 20px;
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    				width: 100%;
    
    				* {
    					color: $light_0;
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    				}
    
    peter_rabbit's avatar
    peter_rabbit committed
    
    
    				.game-title {
    					font-size: 30px;
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    				}
    
    peter_rabbit's avatar
    peter_rabbit committed
    
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    				.game-subtitle {
    
    					font-size: 17px;
    					text-align: center;
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    				}
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    				.game-description {
    
    					font-style: italic;
    					padding: 10px 0;
    
    		@media screen and (max-width:790px) {
    			grid-template-columns: 1fr;
    			padding: 20px;
    
    			.game-thumb {
    				min-width: unset;
    				width: 100%;
    				height: 250px;
    
    				.text-card {
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    					.game-title {
    
    						font-size: 20px;
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    					}
    
    peter_rabbit's avatar
    peter_rabbit committed
    
    
    					.game-subtitle {
    						font-size: 14px;
    
    Pierre Jarriges's avatar
    Pierre Jarriges committed
    					}