Template:Home/Welcome/styles.css: Difference between revisions

Revision as of 19:03, 8 June 2023

/*
#welcome img{
    margin-top: 1em;
}
*/

#welcome {
	grid-column: span 2;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    padding: 1em;
}

@media screen and (min-width: 1400px) {
	#welcome {
	    grid-template-columns: 1fr;
	    gap: 1em;
	}
	
	#left {
		grid-template-columns: repeat(3, 1fr);
	}
	
	#welcome h2, #message {
		align-self: center;
	}
	
	#catlist {
		grid-template-columns: repeat(6, 1fr);
	}
}

@media screen and (max-width: 1200px) {
	#welcome {
		grid-template-columns: 1fr;
	}
}
/*
#welcome h1 {
    text-align: initial;
}*/

#welcome h2 {
    align-self: start;
}

#message {
	align-self: end;
}

#welcome h2, #message, #cat {
    text-align: center;
}

#left {
	display: grid;
	align-items: center;
}

#right {
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

#catlist {
    display: inline-grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    list-style-type: none;
    margin: 0;
    padding: 0 10px;
}

@media screen and (max-width: 500px) {

	#catlist {
		grid-template-columns: 1fr 1fr;
	}

	#img {
		width: 120px;
	}
}

#catlist img {
	width: 150px;
}

#catlist li {
    margin: 0.75em;
}