Template:Developer Satisfaction Survey 2024/styles.css

/*
 * Created for the 2024 Developer satisfaction survey responses
 * https://www.mediawiki.org/wiki/Developer_Satisfaction_Survey/2024
 * -- thcipriani, 2024-04-23
 */
 
.dss h1,
.dss h2,
.dss 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 h1::after { border-bottom: none; }
.dss h1 {
	border-bottom: none;
	padding: 0.5em 0;
	margin: 0;
	color: #069;
}
.dss .dss-headline {
	border-bottom: none;
	font-size: 1.3em;
	color: #2e3443;
}
.dss-section-break {
	margin: 2em;
}
.dss h2 {
	border-bottom: none;
	padding: 0.5em 0;
}
/* 
 * thcipriani: pretty, but hard to read.
 * .dss { font-family: "Fira Code","Fira Mono","Source Code Pro",Menlo,Consolas,Monaco,"Cascadia Mono", "Segoe UI Mono", "Ubuntu Monospace", "Droid Sans Mono", monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; }
 */
.dss-navbox { text-align: left; }
.dss-navbox ul {
	list-style-image: none;
    list-style-type: none;
    text-align: left;
    padding: 0.5em;
}
.dss-navbox li {
	padding: 0.25em;
}
.dss-navbox hr { background-color: #efefef; }
.dss-table .sortbottom {
	border-top: 2px solid #b32424;
}
.dss-table > caption {
	text-align: left;
}
.dss-table {
	width: 69%;
	margin: 1.5em auto;
}
.dss-footer-nav {
	margin-top: 1em;
    border-top: 1px solid #ccc;
    padding: 2em 0;
    overflow: hidden; /* still clearfixing in 2024 */
}
.dss-footer-nav-prev {
	float: left;
}
.dss-footer-nav-next {
	float: right;
}
.dss i { background: #c0f541; }
.dss figure { margin: 1.5em auto; }
.dss-headline-anchor {
    display: inline-block;
    margin: 0.75em 0.25em 0 0;
}
.dss-top {
  position: sticky;
  top: 85vh;
  padding: 10px;
  font-family: sans-serif;
  white-space: nowrap;
}
.dss-top a {
	display: inline-block;
	padding: 1em;
}
.dss-note {
    box-sizing: border-box;
	margin: 2em;
	padding: 1.5em;
	width: 50%;
	border: 3px solid black;
	border-image: linear-gradient(to right, #36c,#fc3,#d33) 1;
}

.dss-note h2 {
color: hotpink;
    display: block;
    text-decoration: underline wavy;
    margin:0;
    padding:0.25em;
}

@media (max-width: 720px) {
  .dss-note {
    clear: both;
    margin: 0;
    width: 100%;
  }
}