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.
/*==========================================================
EKOLOGOS WIKI
Homepage Framework v1.0
==========================================================*/
/* ---------------------------------------------------------
Global
--------------------------------------------------------- */
body {
background: #f7f5ef;
font-family: "Segoe UI", Arial, sans-serif;
}
/* Make the Main Page 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 {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.page-Main_Page .mw-parser-output {
margin: 0 !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
Navigation
--------------------------------------------------------- */
.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;
}
/* ---------------------------------------------------------
Hero Section
--------------------------------------------------------- */
.page-Main_Page .hero {
position: relative;
width: 100%;
height: 700px;
margin-top: -70px;
padding-top: 70px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-image:
linear-gradient(
rgba(0,0,0,.35),
rgba(0,0,0,.35)
),
url("/wiki/images/2/26/Hero.jpg");
background-size: cover;
background-position: center center;
}
/* Hero Content */
.page-Main_Page .hero-content {
max-width: 900px;
padding: 20px;
}
.page-Main_Page .hero h1 {
color: white;
font-family: Georgia, serif;
font-size: 72px;
font-weight: 700;
line-height: 1.05;
margin-bottom: 30px;
}
.page-Main_Page .hero hr {
width: 60%;
margin: 25px auto;
border: none;
border-top: 1px solid rgba(255,255,255,.6);
}
.page-Main_Page .hero p {
color: white;
font-size: 24px;
line-height: 1.7;
max-width: 850px;
margin: auto;
}
/* ---------------------------------------------------------
Responsive
--------------------------------------------------------- */
@media (max-width: 992px) {
.page-Main_Page .hero {
height: 550px;
}
.page-Main_Page .hero h1 {
font-size: 52px;
}
.page-Main_Page .hero p {
font-size: 20px;
}
}
@media (max-width: 768px) {
.page-Main_Page .hero {
height: 450px;
}
.page-Main_Page .hero h1 {
font-size: 38px;
}
.page-Main_Page .hero p {
font-size: 18px;
padding: 0 20px;
}
}
