Template:2024 homepage box/style.css

.wm2024-homepage-boxroot {
	clear: both;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 0 0.8em;
}

.wm2024-homepage-box {
	border: 1px solid;
    border-radius: 4px;
    margin-bottom: 0.8em;
}

.wm2024-homepage-box h2 {
	border: none;
    font-family: inherit;
    font-size: 2em;
    font-weight: bold;
    margin-top: 0;
    padding: 0.4em 0.5em;
    display: block; /* For Minerva */
    overflow-wrap: break-word;
}
.wm2024-homepage-box h2::before {
    content: '⧫\a0';
    font-size: 0.6em;
    position: relative;
    top: -0.32em;
}

.wm2024-homepage-box .box-image {
	float: right;
}

.wm2024-homepage-box .box-text {
	margin: 0.5em 1em;
}

.wm2024-homepage-box .mw-ui-button {
	margin-bottom: 0.5em;
}

@media (max-width: 720px) {
	.wm2024-homepage-boxroot {
		display: block;
	}
	
	.wm2024-homepage-box .box-image {
		float: none;
		text-align: center;
	}
	
	.wm2024-homepage-box h2 {
		font-size: 1.7em;
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* Prevent MediaWiki from injecting TOC into our boxes while retaining it for Vector 2022 */
.wm2024-homepage-box .toc {
	display: none;
}


/* Definitions of color variants */
.wm2024-homepage-box.green {
	border-color: #027353; /* 23% brightness according to 0to255.com */
	background: #ecfff9; /* 96% brightness */
}
.wm2024-homepage-box.green h2 {
	color: #01412f; /* 13% brightness */
}
.wm2024-homepage-box.green h2::before {
	color: #ff9600;
}

.wm2024-homepage-box.blue {
	border-color: #024073;
	background: #ecf6ff;
}
.wm2024-homepage-box.blue h2 {
	color: #012441;
}
.wm2024-homepage-box.blue h2::before {
	color: #5bc008;
}

.wm2024-homepage-box.yellow {
	border-color: #746600;
	background: #fffdeb;
}
.wm2024-homepage-box.yellow h2 {
	color: #413900;
}
.wm2024-homepage-box.yellow h2::before {
	color: #4c83ff;
}

.wm2024-homepage-box.red {
	border-color: #682615;
	background: #faebe8;
}
.wm2024-homepage-box.red h2 {
	color: #3d160d;
}
.wm2024-homepage-box.red h2::before {
	color: #bb5eff;
}