User:Krishj4/common.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
-@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Source+Serif+4:wght@500;600;700&display=swap');
 :root {
@@ Line 5: / Line 5: @@
 	--rpi-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
 	--rpi-mono: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+	--rpi-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
 }
@@ Line 23: / Line 24: @@
 .skin-vector-2022 .mw-body h6,
 .skin-vector-2022 .mw-first-heading {
-	font-family: var(--rpi-mono);
+	font-family: var(--rpi-serif);
 }
@@ Line 40: / Line 41: @@
 }
-.skin-vector-2022 .mw-body h1.firstHeading,
+/* Full-width grey rule under headings, with a red segment the width of the text */
 .skin-vector-2022 .mw-body .mw-first-heading,
-.skin-vector-2022 .mw-body h2 {
+.skin-vector-2022 .mw-heading.mw-heading2 {
-	border-bottom: 1px solid var(--rpi-red);
+	position: relative;
+	border-bottom: 2px solid #c8ccd1;
 	padding-bottom: 0.25em;
+}
+/* Keep the heading text and its edit links bottom-aligned so the bar lands true */
+.skin-vector-2022 .mw-heading.mw-heading2 {
+	align-items: flex-end;
+}
+/* Anchor the red bar to each text element so it spans only the text width */
+.skin-vector-2022 .mw-body .mw-first-heading .mw-page-title-main,
+.skin-vector-2022 .mw-heading.mw-heading2 h2 {
+	position: relative;
+}
+.skin-vector-2022 .mw-body .mw-first-heading .mw-page-title-main::after,
+.skin-vector-2022 .mw-heading.mw-heading2 h2::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: -0.355em;            /* drop down onto the grey rule */
+	height: 2px;
+	background-color: var(--rpi-red);
 }