houdini/app/assets/stylesheets/events/stats/page.css.scss

/* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later
Full license explanation at https://github.com/houdiniproject/houdini/blob/master/LICENSE */
@import 'mixins';
html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	width: 100%;
	display: table;
	background: none;
	position: relative;
}
main {
	display: table-cell;
	vertical-align: middle;
	padding: 15px 15px 80px 15px;
	text-align: center;
}
h1 {
	font-size: 36px;
	margin-bottom: 25px;
}
h1 a {
	@include setColorAndHover($charcoal);
}
.stat-outer {
	display: inline-table;
}
.stat-outer:nth-of-type(1) {
	padding-right: 40px;
}
.stat-outer:nth-of-type(2) {
	padding-left: 40px;
}
.stat-inner {
	background: $logo-blue;
	@include opacity(0.95);
	padding: 20px;
	width: 100%;
	display: table;
}
.stat-inner--circular {
	@include border-radius(50%);
}
.stat-text {
	display: table-cell;
	vertical-align: middle;
}
.stat-number {
	font-weight: normal;
	font-size: 30px;
	margin: 0;
	padding: 0;
	line-height: 1;
	display: inline-block;
}
.stat-inner *,
.stats-activity { color: white}

.stats-activities {
	min-height: 120px;
	margin-top: 36px;
}
.stats-activity {
	margin: 0;
	line-height: 1.2;
	padding-bottom: 15px;
	@include transition(all 0.3s ease);
}
.stats-activity:nth-of-type(1) {
	font-size: 30px;
}
.stats-activity:nth-of-type(2) {
	font-size: 25px;
	@include opacity(0.8);
}
.stats-activity:nth-of-type(3) {
	font-size: 20px;
	@include opacity(0.4);
}
.stats-backgroundImage,
.stats-backgroundScrim {
	position: absolute;
	width: 100%;
	height: 60%;
	bottom: 0;
	left: 0;
}
.stats-backgroundImage {
	background-size: cover;
	background-position: center center;
	@include opacity(0.7);
	z-index: -2;
	-webkit-filter: grayscale(1); 
	-webkit-filter: grayscale(100%); 
	-moz-filter: grayscale(100%);
	filter: gray; 
	filter: grayscale(100%);
}
.stats-backgroundScrim {
	z-index: -1;
	background: rgba(black, 0.6);
}

@media screen and (max-width: 500px){
	main {
		padding: 12px 12px 60px 12px;
	}
	h1 {
		font-size: 30px;
		margin-bottom: 15px;
	}
	h3.stat-title {
		font-size: 18px;
	}
	h3.stat-number {
		font-size: 32px;
	}
	.stat-outer:nth-of-type(1),
	.stat-outer:nth-of-type(2) {
		padding: 10px 20px;
	}
	.stats-activity:nth-of-type(2) {
		font-size: 24px;
	}
	.stats-activity:nth-of-type(3) {
		font-size: 20px;
		@include opacity(0.8);
	}
	.stats-activity:nth-of-type(4) {
		font-size: 16px;
		@include opacity(0.4);
	}
}