Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ==========================================================
THE VAULT @ THE E.E.R.I.E. FILES
MediaWiki:Common.css
Purpose:
- Vault template styling
- Typography
- Custom components
Default MediaWiki/Cosmos colours are preserved.
========================================================== */
/* ==========================================================
FONTS
========================================================== */
@import url(https://fonts.googleapis.com/css2?family=Bungee&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap);
/* ==========================================================
VAULT TYPOGRAPHY
========================================================== */
body {
font-family:'Space Grotesk', sans-serif;
}
h1,
h2,
h3,
h4,
.firstHeading,
.mw-first-heading {
font-family:'Bungee', system-ui, sans-serif;
}
code,
pre,
.mw-code {
font-family:'JetBrains Mono', monospace;
}
/* ==========================================================
VAULT HERO
========================================================== */
.vault-hero {
text-align:center;
padding:2rem 1rem;
border-radius:10px;
margin-bottom:1.8rem;
}
.vault-hero .vault-title {
font-family:'Bungee', sans-serif;
font-size:2.2rem;
margin:0;
}
.vault-hero .vault-tagline {
font-family:'JetBrains Mono', monospace;
font-size:.75rem;
letter-spacing:.2em;
text-transform:uppercase;
}
/* ==========================================================
VAULT CARDS
========================================================== */
.vault-portal-grid,
.vault-case-grid {
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));
gap:1rem;
margin:1.5rem 0;
}
.vault-portal-card,
.vault-case-card {
padding:1.3rem;
border:1px solid #ccc;
border-radius:8px;
display:block;
text-decoration:none !important;
transition:.2s;
}
.vault-portal-card:hover,
.vault-case-card:hover {
transform:translateY(-3px);
}
.vault-portal-card .label,
.vault-case-card-title {
font-family:'Bungee', sans-serif;
font-size:1rem;
}
.vault-portal-card .desc,
.vault-case-card-excerpt {
font-size:.85rem;
line-height:1.5;
}
/* ==========================================================
INFOBOX
========================================================== */
.vault-infobox {
float:right;
width:280px;
margin:0 0 1rem 1.5rem;
border:1px solid #aaa;
border-radius:6px;
overflow:hidden;
}
.vault-infobox-header {
font-family:'Bungee', sans-serif;
text-align:center;
padding:.7rem;
}
.vault-infobox-image {
text-align:center;
}
.vault-infobox-image img {
max-width:100%;
height:auto;
}
.vault-infobox-caption {
font-size:.75rem;
padding:.5rem;
}
.vault-infobox-row {
display:grid;
grid-template-columns:95px 1fr;
gap:.5rem;
padding:.5rem .8rem;
border-top:1px solid #ddd;
font-size:.85rem;
}
.vault-infobox-k {
font-family:'JetBrains Mono',monospace;
font-size:.65rem;
text-transform:uppercase;
}
.vault-infobox-status {
font-weight:bold;
}
/* ==========================================================
VAULT ASSESSMENT
========================================================== */
.vault-assessment {
width:100%;
margin:1.5rem 0;
border:1px solid #aaa;
border-radius:8px;
overflow:hidden;
clear:both;
}
.vault-assessment-header {
font-family:'Bungee',sans-serif;
text-align:center;
padding:.8rem;
}
.vault-assessment-grid {
display:grid;
grid-template-columns:repeat(2,1fr);
}
.vault-assessment-item {
padding:1rem;
border-top:1px solid #ddd;
}
.vault-assessment-label {
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
}
.vault-assessment-value {
line-height:1.5;
}
.vault-assessment-status {
font-weight:bold;
}
@media screen and (max-width:700px) {
.vault-assessment-grid {
grid-template-columns:1fr;
}
}
/* ==========================================================
WORK / BOOK / PROFILE / LOCATION ASSESSMENTS
========================================================== */
.vault-work-assessment,
.vault-profile-assessment,
.vault-location-assessment,
.vault-evidence {
width:100%;
margin:1.5rem 0;
border:1px solid #aaa;
border-radius:8px;
overflow:hidden;
clear:both;
}
.vault-work-header,
.vault-profile-header,
.vault-location-header,
.vault-evidence-header {
font-family:'Bungee',sans-serif;
text-align:center;
padding:.8rem;
}
.vault-work-row {
display:grid;
grid-template-columns:130px 1fr;
gap:1rem;
padding:.8rem 1rem;
border-top:1px solid #ddd;
}
.vault-work-section {
padding:1rem;
border-top:1px solid #ddd;
}
.vault-work-k {
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
}
.vault-work-v {
line-height:1.6;
}
/* ==========================================================
NOTICE BOX
========================================================== */
.vault-notice {
border-left:4px solid #888;
padding:1rem 1.2rem;
margin:1.5rem 0;
}
.vault-notice-header {
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.7rem;
}
.vault-notice-title {
font-family:'Bungee',sans-serif;
}
/* ==========================================================
BUTTONS
========================================================== */
.vault-btn {
display:inline-block;
padding:.7rem 1.3rem;
border-radius:4px;
font-family:'JetBrains Mono',monospace;
text-decoration:none !important;
}
/* ==========================================================
TAGS
========================================================== */
.vault-tag {
display:inline-block;
padding:.25rem .7rem;
border:1px solid #aaa;
border-radius:999px;
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
}
/* ==========================================================
STATS
========================================================== */
.vault-stats-bar {
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(140px,1fr));
gap:1rem;
padding:1.4rem;
margin:1.8rem 0;
border:1px solid #aaa;
border-radius:8px;
text-align:center;
}
.vault-stats-bar-number {
font-family:'Bungee',sans-serif;
font-size:1.8rem;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media screen and (max-width:700px) {
.vault-infobox {
float:none;
width:100%;
margin:1rem 0;
}
.vault-work-row {
grid-template-columns:1fr;
}
}
