MediaWiki:Common.css: Difference between revisions

Line 542:

/* Numbered rows: number in a soft circle, a hairline between rows */

.gr-home-card ol { margin: 0; padding: 6px 0 8px; list-style: none; counter-reset: gr-item; }

/* Each row is a two-column grid: number | title. The number sits in the

title's own row and is centred on it, so it lines up whatever the font. */

.gr-home-card li {

counter-increment: gr-item~~; position: relative~~; list-style: none;

counter-increment: gr-item; list-style: none;

margin: 0; padding: ~~7px~~ 16px ~~7px 50px~~; border-top: 1px solid #f6efec;

display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: center;

margin: 0; padding: 8px 16px; border-top: 1px solid #f6efec;

font-size: 0.95em; line-height: 1.6; color: #333; overflow-wrap: anywhere;

}

Line 550:

Line 553:

.gr-home-card li::before {

content: counter(gr-item);

~~position~~: ~~absolute~~; ~~left~~: ~~16px~~; ~~top~~: ~~calc(9px + (1.6em - 22px) / 2)~~;

grid-column: 1; grid-row: 1; justify-self: center;

min-width: 22px; height: 22px; padding: 0 4px; box-sizing: border-box; border-radius: 11px;

background: #fbece8; color: #c0392b; text-align: center; font: 600 11px/22px system-ui, sans-serif;

}

.gr-home-card li > * { grid-column: 2; }

.gr-home-card li > a:first-child, .gr-home-card li > a:first-of-type { grid-row: 1; }

.gr-home-card li:hover { background: #fdf8f6; }

.gr-home-card li a { color: #c0392b; text-decoration: none; }

@@ Line 542: / Line 542: @@
 /* Numbered rows: number in a soft circle, a hairline between rows */
 .gr-home-card ol { margin: 0; padding: 6px 0 8px; list-style: none; counter-reset: gr-item; }
+/* Each row is a two-column grid: number | title. The number sits in the
+   title's own row and is centred on it, so it lines up whatever the font. */
 .gr-home-card li {
-   counter-increment: gr-item; position: relative; list-style: none;
+   counter-increment: gr-item; list-style: none;
-   margin: 0; padding: 7px 16px 7px 50px; border-top: 1px solid #f6efec;
+  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: center;
+   margin: 0; padding: 8px 16px; border-top: 1px solid #f6efec;
    font-size: 0.95em; line-height: 1.6; color: #333; overflow-wrap: anywhere;
 }
@@ Line 550: / Line 553: @@
 .gr-home-card li::before {
    content: counter(gr-item);
-   position: absolute; left: 16px; top: calc(9px + (1.6em - 22px) / 2);
+   grid-column: 1; grid-row: 1; justify-self: center;
    min-width: 22px; height: 22px; padding: 0 4px; box-sizing: border-box; border-radius: 11px;
    background: #fbece8; color: #c0392b; text-align: center; font: 600 11px/22px system-ui, sans-serif;
 }
+.gr-home-card li > * { grid-column: 2; }
+.gr-home-card li > a:first-child, .gr-home-card li > a:first-of-type { grid-row: 1; }
 .gr-home-card li:hover { background: #fdf8f6; }
 .gr-home-card li a { color: #c0392b; text-decoration: none; }