MediaWiki:Citizen.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 236: | Line 236: | ||
} | } | ||
/* =============================== | /* ========================================= | ||
Mecha Hero | Mecha Hero — Proper centre focus version | ||
=============================== */ | ========================================= */ | ||
.page-Main_Page .mecha-hero { | .page-Main_Page .mecha-hero { | ||
| Line 244: | Line 244: | ||
position: relative; | position: relative; | ||
padding: | padding: 90px 20px 70px; | ||
text-align: center; | text-align: center; | ||
| Line 253: | Line 253: | ||
/* | /* Blurred outer glow */ | ||
.page-Main_Page .mecha-hero::before { | .page-Main_Page .mecha-hero::before { | ||
| Line 260: | Line 260: | ||
position: absolute; | position: absolute; | ||
inset: | inset: -60px; | ||
background | background: | ||
url("https://mecha.so/images/for-profit.png") | |||
center top / cover no-repeat; | |||
filter: blur(40px); | |||
opacity: 0.45; | |||
z-index: 0; | z-index: 0; | ||
| Line 285: | Line 277: | ||
/* | /* Sharp centre image */ | ||
.page-Main_Page .mecha-hero::after { | |||
content: ""; | |||
position: absolute; | |||
inset: 0; | |||
background: | |||
linear-gradient( | |||
to bottom, | |||
rgba(255,255,255,0.1) 0%, | |||
rgba(255,255,255,0.6) 70%, | |||
rgba(255,255,255,1) 100% | |||
), | |||
url("https://mecha.so/images/for-profit.png") | |||
/ | center top / cover no-repeat; | ||
z-index: 1; | |||
} | } | ||
/* | /* Dark mode fade */ | ||
.page-Main_Page .mecha- | .skin-theme-clientpref-night .page-Main_Page .mecha-hero::after { | ||
background: | |||
linear-gradient( | |||
to bottom, | |||
rgba(0,0,0,0.2) 0%, | |||
rgba(0,0,0,0.7) 70%, | |||
rgba(0,0,0,1) 100% | |||
), | |||
url("https://mecha.so/images/for-profit.png") | |||
center top / cover no-repeat; | |||
} | |||
/* Content above background */ | |||
.page-Main_Page .mecha-hero * { | |||
position: relative; | |||
z-index: 2; | |||
} | } | ||
/* Fix spacing */ | |||
.page-Main_Page .mecha-hero img { | |||
margin-bottom: 18px; | |||
} | } | ||
Revision as of 14:27, 21 February 2026
/* =========================================
MECHA HOMEPAGE — STABLE + TIGHT HERO
========================================= */
.mecha-home {
max-width: 1200px;
margin: 0 auto;
padding: 12px 18px 34px;
}
/* Kill the huge whitespace */
.mecha-hero {
text-align: center;
margin: 6px 0 14px;
padding: 0;
}
.mecha-logoLink {
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 0 6px;
}
.mecha-logo {
width: 140px;
height: auto;
display: block;
}
/* Tighten title spacing */
.mecha-title {
margin: 8px 0 6px;
padding: 0;
font-size: 34px;
font-weight: 800;
letter-spacing: -0.02em;
}
.mecha-subtitle {
margin: 0;
color: var(--color-base-subtle);
font-size: 16px;
}
/* Buttons */
.mecha-actions {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
margin: 16px 0 0;
padding: 0;
}
.mecha-action {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
border-radius: 12px;
background: var(--color-progressive);
color: #fff !important;
font-weight: 700;
text-decoration: none !important;
transition: transform 140ms ease, box-shadow 140ms ease;
}
.mecha-action:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
.mecha-action::before {
content: "";
width: 18px;
height: 18px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
filter: brightness(0) invert(1); /* icons always white on blue buttons */
}
.mecha-action--discord::before { background-image: url("https://cdn.simpleicons.org/discord"); }
.mecha-action--matrix::before { background-image: url("https://cdn.simpleicons.org/matrix"); }
.mecha-action--website::before { background-image: url("https://cdn.simpleicons.org/firefoxbrowser"); }
.mecha-action--forums::before { background-image: url("https://cdn.simpleicons.org/discourse"); }
/* Grid */
.mecha-grid {
display: grid;
grid-template-columns: 1fr 1.45fr 1fr;
gap: 22px;
margin-top: 26px;
align-items: start;
}
/* Cards */
.mecha-card {
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 18px;
padding: 18px;
}
.mecha-cardTitle {
margin: 0;
font-size: 20px;
font-weight: 800;
}
.mecha-cardDesc {
margin: 8px 0 0;
color: var(--color-base-subtle);
font-size: 14px;
}
/* List */
.mecha-list {
margin-top: 14px;
display: grid;
gap: 10px;
}
.mecha-listItem {
background: var(--color-surface-1);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 12px 12px;
text-decoration: none !important;
font-weight: 650;
display: flex;
align-items: center;
gap: 10px;
}
.mecha-listItem:hover {
background: var(--color-progressive-subtle);
border-color: var(--color-progressive);
}
/* Ecosystem tiles */
.mecha-ecosystem {
margin-top: 14px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.mecha-tile {
background: var(--color-surface-1);
border: 1px solid var(--color-border);
border-radius: 14px;
padding: 14px;
text-decoration: none !important;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 80px;
}
.mecha-tile:hover {
background: var(--color-progressive-subtle);
border-color: var(--color-progressive);
transform: translateY(-1px);
}
.mecha-tileTitle { font-weight: 800; }
.mecha-tileDesc { color: var(--color-base-subtle); font-size: 13px; }
/* Stats */
.mecha-stats {
margin-top: 14px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mecha-stat {
background: var(--color-surface-1);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 10px 12px;
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.mecha-stat span { color: var(--color-base-subtle); font-size: 13px; }
.mecha-stat b { font-size: 14px; }
/* Icon system for list + tiles (theme-aware) */
.mecha-i::before {
content: "";
width: 18px;
height: 18px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
flex: 0 0 auto;
/* make icons readable in both modes */
filter: var(--mecha-icon-filter);
}
:root { --mecha-icon-filter: none; }
.skin-theme-clientpref-night { --mecha-icon-filter: brightness(0) invert(1); }
/* icon sources */
.mecha-i--rocket::before { background-image: url("https://cdn.simpleicons.org/rocket"); }
.mecha-i--code::before { background-image: url("https://cdn.simpleicons.org/code"); }
.mecha-i--book::before { background-image: url("https://cdn.simpleicons.org/bookstack"); }
.mecha-i--chip::before { background-image: url("https://cdn.simpleicons.org/microchip"); }
.mecha-i--puzzle::before { background-image: url("https://cdn.simpleicons.org/puzzles"); }
.mecha-i--linux::before { background-image: url("https://cdn.simpleicons.org/linux"); }
.mecha-i--flutter::before{ background-image: url("https://cdn.simpleicons.org/flutter"); }
.mecha-i--box::before { background-image: url("https://cdn.simpleicons.org/docker"); }
.mecha-i--github::before { background-image: url("https://cdn.simpleicons.org/github"); }
.mecha-i--arch::before { background-image: url("https://cdn.simpleicons.org/archlinux"); }
.mecha-i--discord::before{ background-image: url("https://cdn.simpleicons.org/discord"); }
.mecha-i--matrix::before { background-image: url("https://cdn.simpleicons.org/matrix"); }
/* Mobile */
@media (max-width: 980px) {
.mecha-grid { grid-template-columns: 1fr; }
.mecha-ecosystem { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
.mecha-title { font-size: 24px; }
.mecha-action { width: 100%; justify-content: center; }
.mecha-home { padding: 10px 12px 26px; }
}
/* =========================================
Mecha Hero — Proper centre focus version
========================================= */
.page-Main_Page .mecha-hero {
position: relative;
padding: 90px 20px 70px;
text-align: center;
overflow: hidden;
}
/* Blurred outer glow */
.page-Main_Page .mecha-hero::before {
content: "";
position: absolute;
inset: -60px;
background:
url("https://mecha.so/images/for-profit.png")
center top / cover no-repeat;
filter: blur(40px);
opacity: 0.45;
z-index: 0;
}
/* Sharp centre image */
.page-Main_Page .mecha-hero::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.6) 70%,
rgba(255,255,255,1) 100%
),
url("https://mecha.so/images/for-profit.png")
center top / cover no-repeat;
z-index: 1;
}
/* Dark mode fade */
.skin-theme-clientpref-night .page-Main_Page .mecha-hero::after {
background:
linear-gradient(
to bottom,
rgba(0,0,0,0.2) 0%,
rgba(0,0,0,0.7) 70%,
rgba(0,0,0,1) 100%
),
url("https://mecha.so/images/for-profit.png")
center top / cover no-repeat;
}
/* Content above background */
.page-Main_Page .mecha-hero * {
position: relative;
z-index: 2;
}
/* Fix spacing */
.page-Main_Page .mecha-hero img {
margin-bottom: 18px;
}