Template:Developer Satisfaction Survey 2023/styles.css

/*
 * Used on on https://www.mediawiki.org/wiki/Developer_Satisfaction_Survey/2023
 * -- thcipriani, 2023-06-30
 */
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;
}
h2 { font-size: 1.8em; }
h3 {font-size: 1.6em; }
.dss2023_question {
    padding: 0.1em 0.2em;
    border-radius: 0.2em;
    background: #c0f541;
}
.dss2023 figure {
	margin: 2em auto;
}
.dss2023 {
	font-family: monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
.dss2023 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;
}
.dss2023_table {
	width: 100%;
	font-size: 0.75em;
}
.dss2023_table .sortbottom {
	border-top: 2px solid #b32424;
}
.dss2023_footer-nav {
	margin-top: 2em;
    border-top: 1px solid #ccc;
    padding: 2em 0 0 0;
}
.dss2023_footer-nav-prev {
	float: left;
}
.dss2023_footer-nav-next {
	float: right;
}
.dss2023_header h1 {
	font-size: 200%;
	margin: 0;
	color: #069;
	border-bottom: none;
	padding: 0.5em 0;
	font-weight: bold;
}
.dss2023_header h1::after {
	border-bottom: none;
} 
.dss2023_body {
	display: flex;
    flex-direction: column;
    flex-flow: wrap;
}
.dss2023_nav {
	margin: 1.5em 0 0 0;
	flex: 0 1 40ch;
}
.dss2023_nav ul {
	margin: 0;
	padding: 0;
	list-style: none none;
	font-weight: bold;
}
.dss2023_body-content {
	flex: 3 1 800px;
}
.dss2023_body-headline-small {
	display: flex;
	flex-direction: row;
}
.dss2023_body-headline-small a {
	padding: 1.15em 0.2em 0 0;
}
/*---- pull numbers and pull quotes -- */
.dss2023_big-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 95%;
	margin: 1em auto;
}
.dss2023_big-numbers-number {
	font-size: 2em;
	font-weight: 900;
	padding: 5px;
}
.dss2023_big-numbers-icon {
    font-size: 1em;
    padding: 0 0.125em;
}
.dss2023_big-numbers-explainer {
	padding: 1em;
    flex: 3 1 50%;
    font-size: 1.25em;
}
.dss2023_big-numbers-green { border-left: 3px solid #00af89; }
.dss2023_big-numbers-blue { border-left: 3px solid #36c; }
.dss2023_big-numbers-orange { border-left: 3px solid #fc3; }

@media screen and (min-width: 1280px) {
	.dss2023 {
		font-size: 1.2em;
		padding: 2em;
	}
	.dss2023 blockquote {
		font-size: 1.2em;
		margin: 2em auto 3em;
	}
	.dss2023 img {
		max-width: 100%;
		cursor: zoom-in;
	}
	.dss2023_body { flex-direction: row; }
	.dss2023_body-content { margin: 0 0 0 1em; }
	.dss2023_table { font-size: 1rem; }
	.dss2023_big-numbers {
		max-width: 80%;
	}
	.dss2023_big-numbers-number {
		font-size: 3em;
		padding: 0.5em 1em;
	}
	.dss2023_big-numbers-icon {
		font-size: 2em;
	}
}