Wikipedia:Wikipedia Signpost/Templates/master.css

/*
 * See also Wikipedia:Wikipedia_Signpost/Templates/external.css which is what
 * signpost.news uses.
 * {{pp|small=y}}
 */

/* Generally speaking, we should try to eliminate inline styling in Signpost
   stuff -- instead of styles, elements should be written to have classes,
   and those classes should be styled in master, invoked with TemplateStyles. 
   
   When migrating inline styling here, also put it in external.css, so that the
   styles work on signpost.news. They may require some adaptation to look good
   there, but that can be done after they're moved to the master stylesheet.
   
   When migrating something into here, it's extremely helpful to note where it
   came from, and what template uses the class. Otherwise, this stylesheet risks
   turning into a monstrosity over the course of years/decades.
*/


/* from Wikipedia:Wikipedia Signpost/Templates/Signpost-header/styles.css */

.signpost-header {
	box-sizing: border-box;
	padding: 1em 2vw;
	border-bottom: 3px double #999;
	border-top: 3px double #bbb;
	background-color: var(--background-color-base, #fff);
}

.signpost-header-heading {
	margin: 1em 0;
}

.signpost-header-subheadings {
	font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size: 100%;
	background-color: transparent;
	border: none;
	color: var(--color-subtle, #54595d);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.signpost-header-subheadings:after {
  content: "";
  display: table;
  clear: both;
}

.signpost-header-volume {
	text-transform: uppercase;
	width: 33%;
	float: left;
	text-align: left;
	margin-top: 3px;
	font-weight: bold;
}

.signpost-header-issue {
	text-transform: uppercase;
	width: 33%;
	float: right;
	text-align: right;
	margin-top: 3px;
	font-weight: bold;
}

.signpost-header-date {
	white-space: nowrap;
	line-height: 120%;
	font-size: 155%;
	color: #333;
}

/* from Wikipedia:Wikipedia Signpost/Template:Signpost-footer/styles.css */

.signpost-footer {
	padding-top: 2em;
}
.signpost-issue-navigation,
.signpost-ticker,
.signpost-linkbar {
	box-sizing: border-box;
	clear: both;
	font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	width: 100%;
}
.signpost-issue-navigation {
	font-size: 116%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	font-style: italic;
	gap: 1em;
	justify-content: space-between;
	padding: 0 2vw;
	/* Use margin, as we do not want this element to claim vert. space when empty */
	margin: 0.5em 0;
}
.signpost-issue-nav-casing {
	font-size: 80%;
	text-transform: uppercase;
}
.signpost-ticker {
	border-top: 3px double #BBB;
	color: var(--color-subtle, #333);
	font-size: 110%;
	padding: 5px 2vw;
	text-align: center;
	text-transform: uppercase;
}
.signpost-linkbar {
	border-top: 1px solid #999;
	padding: 3px 2vw;
}
.signpost-linkbar > div {
	color: var(--color-base--hover, #404244);
	display: flex;
	flex-flow: row wrap;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 90%;
	margin: 0 auto;
	max-width: 80em;
	text-align: center;
}
.signpost-linkbar > div > div {
	/* Inline fallback for non flex browsers */
	display: inline-block;
	flex: 1 1 auto;
	min-width: 6em;
}


/* from Template:Signpost-main-page-body-begin/styles.css*/

.signpost-main-page-body {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	max-width: 948px; /* 3*300 + gaps, and same width as Vector 2022 default */
	margin: 24px auto;
}
.signpost-snippet-hook {
	font-size: 80%;
}
/* from Wikipedia:Wikipedia Signpost/Templates/Filler_image-v2 */
.signpost-fillerimage {
	clear:both;
	padding:5px;
	padding-top:10px;
	width:290px; 
	font-size:0.85em;
	color: var(--color-base--hover, #404244);
	line-height:1.35em;
} /* Somewhat badly named: this is just for the caption text. */

.signpost-fillerimage-text {
	font-size:0.85em;
	color: var(--color-base--hover, #404244);
	line-height:1.35em;
} 

.signpost-sidebar-fillerimage {
	width:300px;
	float:right;
	clear:right;
	padding-left:20px;
}

html.skin-theme-clientpref-night .signpost-sidebar-fillerimage img {
	background-color: #f8f9fa;
} /* for darkmode */

/* From Wikipedia:Wikipedia Signpost/Templates/Inline_image */
.signpost-inline-image {
}
/* Note: signpost-inline-image-caption still has inline stuff in the template, beacuse it parses values out of params.
	These are: text-align:{{{align|left}}}; {{#if:{{{capcenter|}}}|margin: 0 auto;|}}
	This could be fixed.
	*/
.signpost-inline-image-caption {
	clear:left;
	max-width:780px;
	padding:5px;
	padding-top:0px;
	margin-left:10px;
	font-size:0.85em;
	color: var(--color-base--hover, #404244);
	line-height:1.35em;
}
/* From Wikipedia:Signpost/Templates/Signpost-article-comments-end/commentspage 2024-07-06 */
.signpost-commentspage1 {
	text-align:center;
	margin-bottom:40px;
	font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	font-size:140%;
}
.signpost-commentspage2 {
	font-size:80%;
	font-variant:small-caps;
}

@media screen {
	html.skin-theme-clientpref-night .signpost-header-date,
	html.skin-theme-clientpref-night .signpost-ticker {
		color: #bbb;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .signpost-header-date,
	html.skin-theme-clientpref-os .signpost-ticker {
		color: #bbb;
	}
}