personal-site/styles/cards.css

/*
Styles for content cards, which are cards of twofold content. 
Each card contains 2 halves, each can be populated with any content.
Cards alternate style from flat to popped out
*/

:root {
	--card-bg-color: #222222;
	--card-text-color: white;
	--link-text-color: #AAAAFF;
}

.single {
	margin-top: 40px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
	max-width: 60ch;
	width: auto;
}

.card {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	background-color: var(--card-bg-color);
	color: var(--card-text-color);
	border-radius: 40px;
	padding: 20px;
}
/* Desktop card -> side by side */
@media screen and (min-width: 850px) {
	/* Use grid view to show halves side by side, each with 50% of the space */
	.card {
		display: grid;
		grid-template-columns: 50% 50%;
		justify-items: center;
		align-items: center;
	}
	.card img {
		max-width: min(100%, 400px);
		width: 25vw;
		height: auto;
	}
}
/* Phone or tablet card -> top to bottom */
@media screen and (max-width: 850px) {
	/* Use grid view to show halves side by side, each with 50% of the space */
	.card {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.card img {
		max-width: min(100%, 400px);
		width: 50vh;
		height: auto;
	}
}
/* Ensure halves are no more than 60 characters, and ensure 20px of separation between halves */
.card > * {
	width: fit-content;
	max-width: 60ch;
	margin: 20px;
}
.card > * > *:first-child {
	margin-top: 0px;
}
.card > * > *:last-child {
	margin-bottom: 0px;
}
.card img {
	border-radius: 20px;
}
.card[data-reverse] {
	flex-direction: column-reverse;
}
.card a {
	font-size: large;
	color: var(--accent-text-color);
	text-decoration: underline 0.1em var(--card-bg-color);
	transition: text-decoration-color 500ms;
}
.card a:hover {
	text-decoration: underline 0.1em var(--link-text-color);
}