|
|
| Line 32: |
Line 32: |
| </div> | | </div> |
| </div> | | </div> |
|
| |
| <syntaxhighlight lang="css">
| |
| .mp-top {
| |
| display: flex;
| |
| /* Why row-reverse? When it wraps on smaller displays, the Resonite logo should appear first. */
| |
| flex-flow: row-reverse wrap;
| |
| justify-content: center;
| |
| gap: 24px;
| |
| margin-bottom: 48px;
| |
|
| |
| & .mp-header {
| |
| flex: 1;
| |
|
| |
| & .mp-header-subtitle {
| |
| font-family: Poppins, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
| |
| font-size: 24px;
| |
| font-weight: 400;
| |
| line-height: 1.3;
| |
|
| |
| & b {
| |
| font-weight: 700;
| |
| }
| |
| }
| |
|
| |
| & .mp-header-stats {
| |
| display: flex;
| |
| gap: 8px;
| |
| align-items: center;
| |
|
| |
| & .mp-header-stats-sep {
| |
| flex: 1;
| |
|
| |
| height: 0;
| |
| border-top: 2px solid var(--color-surface-2);
| |
| }
| |
|
| |
| & > ul {
| |
| text-align: center;
| |
| margin: 0;
| |
|
| |
| & li {
| |
| /* Fun thing (that Wikipedia also does), to prevent the bullet point
| |
| from being part of the text. */
| |
| display: inline;
| |
|
| |
| &::after {
| |
| content: " · ";
| |
| font-weight: bold;
| |
| }
| |
|
| |
| &:last-child::after {
| |
| content: "";
| |
| }
| |
| }
| |
| }
| |
| }
| |
|
| |
| /* Set the 'gap' to 12px. Since we're in flow mode and not in flex mode,
| |
| we have to rely on margins. */
| |
|
| |
| & > * {
| |
| margin: 12px 0;
| |
| }
| |
|
| |
| & :first-child {
| |
| margin-top: 0;
| |
| }
| |
|
| |
| & :last-child {
| |
| margin-bottom: 0;
| |
| }
| |
| }
| |
| }
| |
| </syntaxhighlight>
| |
