3d2a-index/static/styles.css

/*
 * styles.css
 */

/* Define some variables here. We'll use these later on. */
:root {
	--background-bright: #32302f;
	--background: #282828;
	--foreground: #ebdbb2;
	--good: #b8bb26;
	--warning: #fabd2f;
	--error: #fb4934;
	--link: #458588;
	--link-hover: #83a598;
	--shadow: 8px -5px rgba(0,0,0,0.1);
}

/* Root of the page, core styling */
html {
	background: var(--background);
}
body {
	background: var(--background);
	color: var(--foreground);
	font-family: "IBM Plex Sans", "Roboto", sans-serif;
	margin: 0;
}
#content {
	max-width: 96em;
	margin: 2em auto;
	padding: 1em;
}

/* Basic styling for elements */
a {
	color: var(--link);
	text-decoration: none;
	transition: .04s ease-in;
}
a:hover {
	color: var(--link-hover);
	transition: .04s ease-in;
}

/* Navbar stuff */
#navbar {
	margin: 0;
	padding: 1em;
	background: var(--background-bright);
	box-shadow: 0 5px var(--shadow);
}
#navbar h1 {
	display: inline;
	margin: 0;
}

/* Card and card container layout */
div.cardcontainer {
	display: grid;
	grid-gap: 1em;
	grid-template-columns: 1fr 1fr 1fr;
}
div.widecardcontainer {
	grid-template-columns: 1fr;
}
div.cardcontainer div.card {
	background: var(--background-bright);
	border-radius: 8px;
	box-shadow: 0px 5px var(--shadow);
	padding: 1em;
	display: block;
	min-width: 0;
	min-height: 0;
}
div.cardcontainer div.card img.cardthumbnail {
	object-fit: cover;
	overflow: hidden;
	border-radius: 8px;
	display: inline;
	height: 64px;
	width: 64px;
	float: right;
}
div.cardcontainer div.card h2 {
	margin: 0px;
	max-width: 80%;
}
div.cardcontainer div.card p.description {
	max-height: 8em;
	max-width: 80%;
	overflow-y: scroll;
}
div.cardcontainer div.card a.downloadbutton {
	display: block;
	margin-top: auto;
	font-size: 150%;
	font-weight: bold;
	text-align: center;
	padding: 0.5em;
	border-radius: 8px;
	background: var(--link);
	color: var(--background);
}
div.cardcontainer div.card a.downloadbutton:hover {
	background: var(--link-hover);
}