MediaWiki:Common.css
From Ekologos Wiki
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.
.navbar-brand img,
.mw-wiki-logo,
#p-logo img {
max-height: 150px !important;
width: auto !important;
max-width: 250px !important;
}
.navbar-brand {
padding: 5px !important;
min-height: 90px !important;
display: flex !important;
align-items: center !important;
}
.navbar-brand img,
.navbar-brand .mw-wiki-logo {
height: 80px !important;
width: auto !important;
max-height: 80px !important;
}
.page-Main_Page #firstHeading,
.page-Main_Page #contentSub,
.page-Main_Page .mw-indicators,
.page-Main_Page .page-tools,
.page-Main_Page #toc,
.page-Main_Page .toc {
display: none !important;
}
body .container,
body .container-fluid,
.col-cmln,
.col-12,
#mw-content-text,
.mw-parser-output {
max-width: 100% !important;
width: 100% !important;
}
.page-Main_Page .mw-parser-output {
padding: 0 20px !important;
}
/* ==========================================================
EKOLOGOS WIKI DESIGN SYSTEM
========================================================== */
body{
background:#f8f6f1;
color:#2f2f2f;
font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* Page width */
.mw-parser-output{
width:100%;
}
/* Main content */
.homepage{
width:100%;
}
/* Typography */
.home-title{
font-family:Georgia,"Times New Roman",serif;
font-size:68px;
line-height:1.1;
color:#23492f;
font-weight:600;
}
.home-subtitle{
font-size:24px;
line-height:1.6;
color:#555;
max-width:900px;
margin:auto;
}
.section-title{
font-family:Georgia,serif;
font-size:42px;
color:#23492f;
margin-bottom:20px;
}
/* Cards */
.eko-card{
background:white;
border-radius:18px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.25s;
}
.eko-card:hover{
transform:translateY(-6px);
box-shadow:0 16px 40px rgba(0,0,0,.15);
}
/* Buttons */
.eko-button{
display:inline-block;
background:#295536;
color:white;
padding:14px 30px;
border-radius:40px;
text-decoration:none;
font-weight:600;
}
.eko-button:hover{
background:#1f4129;
color:white;
text-decoration:none;
}
/* ==========================================================
HERO
========================================================== */
.hero{
height:700px;
background-image:
linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
url("https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1800&q=80");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
border-radius:0;
}
.hero-overlay{
max-width:900px;
padding:20px;
}
.hero .home-title{
color:white;
font-size:72px;
margin-bottom:20px;
}
.hero .home-subtitle{
color:white;
margin-bottom:40px;
}
.hero-search input{
width:700px;
max-width:90%;
padding:18px;
border-radius:50px;
border:none;
font-size:20px;
}
body {
background: #ffeecc !important;
}
/* Homepage full width */
.page-Main_Page .container,
.page-Main_Page .container-fluid,
.page-Main_Page .mw-body,
.page-Main_Page #content,
.page-Main_Page #mw-content-text {
max-width:100% !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
.page-Main_Page .mw-parser-output{
margin:0 !important;
padding:0 !important;
}
/* ==========================================
EKOLOGOS HOMEPAGE
========================================== */
/* Only affect the Main Page */
.page-Main_Page nav.navbar,
.page-Main_Page .navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Move the hero behind the navbar */
.page-Main_Page .hero {
margin-top: -70px;
padding-top: 70px;
}
