Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:CardOld/styles.css

Template page
.card {
	display: flex;
	min-width: 240px;
	max-width: 100%;
	box-sizing: border-box;
	flex-direction: column;
	flex-grow: 1;
	justify-content: space-between;
	margin: 0 0.2rem 0.4rem 0.2rem;
	background-color: var( --color-surface-1 );
	border: 1px solid var( --border-color-base );
	border-radius: var( --border-radius-medium );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 );
	font-size: 0.875rem;
	transition: box-shadow 0.2s ease;
}

.card:hover {
	box-shadow: 0 10px 20px rgba( 0, 0, 0, 0.0475 ), 0 6px 6px rgba( 0, 0, 0, 0.0575 );
}

.card-col2 {
	width: calc( 100% / 2 - 0.4rem );
}

.card-col3 {
	width: calc( 100% / 3 - 0.4rem );
}

.card-col4 {
	width: calc( 100% / 4 - 0.4rem );
}

.card-col5 {
	width: calc( 100% / 5 - 0.4rem );
}

.card-col6 {
	width: calc( 100% / 6 - 0.4rem );
}

.card-container {
	margin-top: 1.6rem !important;
	margin-right: -0.2rem;
	margin-bottom: 1.6rem !important;
	margin-left: -0.2rem;
	border-radius: 0 0 12px 12px;
}

.card-container.floatnone {
	padding: 0 20px;
}

.card-row {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}

.card-caption {
	font-size: 0.875rem;
	font-weight: 600;
}

.card-image a {
	display: flex;
	overflow: hidden;
	justify-content: center;
	background: none !important;
}

.card-image a img {
	transition: transform 0.2s cubic-bezier( 0.77, 0.2, 0.05, 1 );
}

.card:hover .card-image a img {
	transform: scale( 1.1 );
}

.card .card-title {
	margin-top: 0;
	margin-bottom: 0.8rem;
	color: var( --color-emphasized );
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
}

/* CSS hack */
.card .card-title + .byline-bottom {
	margin-top: -0.6rem;
}

.card ol,
.card ul {
	padding-left: 1.6rem;
	margin: 0;
}

.card .byline-top,
.card .byline-bottom {
	color: var( --color-base );
	font-size: 0.825rem;
}

.card .byline-top {
	margin: 0 0 0.2rem 0;
}

.card .byline-bottom {
	margin: 0.2rem 0 1.6rem 0;
}

.card .byline-bottom + p {
	margin-top: 0.8rem;
}

.card .numdata {
	margin-top: 0.8rem;
}

.card-top,
.card-bottom {
	padding: 1.2rem;
}

.card-button {
	background: var( --color-base );
	border-radius: 0 0 var( --border-radius-medium ) var( --border-radius-medium );
	transition: opacity 0.2s ease;
}

.card-button:hover {
	opacity: 0.8;
}

.card-button a {
	display: block;
	padding: 0.6rem;
	/* Cancel out a styles */
	background: none !important;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.25px;
	text-align: center;
	transition: background 0.2s ease, color 0.2s ease;
}

.card-bottom {
	background: var( --color-surface-2 );
}

@media only screen and ( max-width: 720px ) {
	.card-row {
		overflow: auto;
		width: auto;
		flex-wrap: nowrap;
		padding: 0 20px;
		margin: 0 -20px;
	}
}
Cookies help us deliver our services. By using our services, you agree to our use of cookies. We only use cookie to make the site function and save your preferences, nothing else.