Template:Developer Satisfaction Survey/styles.css

From Linux Web Expert

h1,
h2,
h3 {
	font-weight: bold;
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}
.dss-main {
	font-family: monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
.dss-main blockquote {
	padding: 2em;
    box-shadow: 0 2px 7px 0 rgba(0,0,0,0.2);
    border-radius: 8px;
    background-color: #fafafa;
    border: 1px solid #ded;
    font-family: monospace !important;
    margin: 1em auto 1.5em;
}
.dss-main_table {
	width: 100%;
	font-size: 0.75em;
}
.dss-main_table .sortbottom {
	border-top: 2px solid #b32424;
}
.dss-footer_nav {
	margin-top: 2em;
    border-top: 1px solid #ccc;
    padding: 2em 0 0 0;
}
.dss-footer_nav-prev {
	float: left;
}
.dss-footer_nav-next {
	float: right;
}
.dss-main_intro h1 {
	font-size: 200%;
	margin: 0;
	color: #069;
	border-bottom: none;
	padding: 0.5em 0;
	font-weight: bold;
}
.dss-main_intro h1::after {
	border-bottom: none;
} 
.dss-main_intro-menu ul {
	margin: 0;
	padding: 0;
	list-style: none none;
	font-weight: bold;
}
/*---- pull numbers and pull quotes -- */
.dss-main_big-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 95%;
	margin: 1em auto;
}
.dss-main_big-numbers-icon {
    font-size: 1em;
    padding: 0 0.125em;
}
.dss-main_big-numbers-green {
	border-left: 3px solid #00af89;
}
.dss-main_big-numbers-blue {
	border-left: 3px solid #36c;
}
.dss-main_big-numbers-orange {
	border-left: 3px solid #fc3;
}
.dss-main_big-numbers-number {
	font-size: 2em;
	padding: 5px;
	text-align: center;
	width: 100%; /* Needed due to weirdness... */
}
.dss-main_big-numbers-explainer {
    display: flex;
    align-items: center;
    margin: 0 1em;
}
@media screen and (min-width: 768px) {
	.dss-main {
		font-size: 1.2em;
		padding: 2em;
	}
	.dss-main blockquote {
		font-size: 1.2em;
		margin: 2em auto 3em;
	}
	.dss-main img {
		max-width: 100%;
	}
	.dss-main_table { font-size: 1rem; }
	.dss-main_big-numbers {
		max-width: 80%;
		flex-wrap: nowrap;
	}
	.dss-main_big-numbers-number {
		font-size: 3em;
		padding: 0.5em 1em;
		width: auto;
	}
	.dss-main_big-numbers-icon {
		font-size: 2em;
	}
	.dss-main_intro {
		font-size: 125%;
		display: flex;
		align-items: stretch;
	}
	.dss-main_intro-header {
		flex: 3 3 75%;
		padding: 0 2vw 0;
	}
	.dss-main_intro-menu {
		border-left: 3px dashed #b32424;
		margin-bottom: 0;
    	margin-top: 0.5em;
		flex: 1 1 25%;
		display: flex;
		align-items: center;
		padding: 0 2vw 0;
	}
}