User:Krishj4/common.css: Difference between revisions

← Older edit

@@ Line 34: / Line 34: @@
 .skin-vector-2022 .mw-code,
 .skin-vector-2022 .infobox td {
-	font-family: var(--rpi-mono);
+	font-family: var(--rpi-font);
 }
@@ Line 41: / 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);
 }