MediaWiki:Common.css: Difference between revisions
From Ekologos Wiki
No edit summary |
No edit summary |
||
| Line 221: | Line 221: | ||
font-family:Georgia,"Times New Roman",serif; | font-family:Georgia,"Times New Roman",serif; | ||
font-size: | font-size:52px; | ||
font-weight:500; | font-weight:500; | ||
line-height:1.1; | line-height:1.1; | ||
color:#ffffff; | color:#ffffff; | ||
margin | margin:10px 0 32px; | ||
} | } | ||
| Line 242: | Line 241: | ||
height:1px; | height:1px; | ||
background:rgba(255,255,255,.75); | |||
margin:28px auto 0; | |||
} | } | ||
| Line 260: | Line 259: | ||
} | } | ||
/* ========================================================== | /* ========================================================== | ||
HOMEPAGE SECTION | HOMEPAGE SECTION | ||
| Line 407: | Line 405: | ||
@media(max-width:1000px){ | @media(max-width:1000px){ | ||
.homepage-grid{ | .homepage-grid{ | ||
grid-template-columns:repeat(2,1fr); | grid-template-columns:repeat(2,1fr); | ||
} | } | ||
} | } | ||
| Line 417: | Line 415: | ||
@media(max-width:768px){ | @media(max-width:768px){ | ||
.eko-hero{ | .eko-hero{ | ||
min-height:600px; | min-height:600px; | ||
height:auto; | height:auto; | ||
} | } | ||
.hero-title-main{ | .hero-title-main{ | ||
font-size:54px; | font-size:54px; | ||
} | } | ||
.hero-title-sub{ | .hero-title-sub{ | ||
font-size: | font-size:36px; | ||
} | } | ||
.eko-content p{ | .eko-content p{ | ||
font-size:18px; | font-size:18px; | ||
} | } | ||
.section-header{ | .section-header{ | ||
flex-direction:column; | flex-direction:column; | ||
align-items:flex-start; | align-items:flex-start; | ||
gap:15px; | gap:15px; | ||
} | } | ||
.homepage-section{ | .homepage-section{ | ||
padding:70px 25px; | padding:70px 25px; | ||
} | } | ||
.homepage-grid{ | .homepage-grid{ | ||
grid-template-columns:1fr; | grid-template-columns:1fr; | ||
} | } | ||
.navbar-brand img, | .navbar-brand img, | ||
.navbar-brand .mw-wiki-logo{ | .navbar-brand .mw-wiki-logo{ | ||
height:50px; | height:50px; | ||
} | } | ||
} | } | ||
| Line 473: | Line 471: | ||
@media(max-width:480px){ | @media(max-width:480px){ | ||
.eko-hero{ | .eko-hero{ | ||
min-height:500px; | min-height:500px; | ||
height:auto; | height:auto; | ||
} | } | ||
.hero-title-main{ | .hero-title-main{ | ||
font-size:40px; | font-size:40px; | ||
} | } | ||
.hero-title-sub{ | .hero-title-sub{ | ||
font-size:28px; | font-size:28px; | ||
} | } | ||
.eko-content p{ | .eko-content p{ | ||
font-size:17px; | font-size:17px; | ||
} | } | ||
.homepage-section{ | .homepage-section{ | ||
padding:50px 18px; | padding:50px 18px; | ||
} | } | ||
.eko-card img, | .eko-card img, | ||
.eko-card .mw-file-element{ | .eko-card .mw-file-element{ | ||
height:200px; | height:200px; | ||
} | } | ||
} | } | ||
Revision as of 10:20, 9 July 2026
/* ==========================================================
EKOLOGOS WIKI DESIGN SYSTEM v2.0
Foundation
========================================================== */
/* ==========================================================
1. ROOT VARIABLES
========================================================== */
:root{
--eko-green:#23492F;
--eko-accent:#295536;
--eko-bg:#F8F6F1;
--eko-white:#ffffff;
--eko-text:#333333;
--eko-light:#666666;
--radius:18px;
--shadow-sm:0 6px 18px rgba(0,0,0,.08);
--shadow-md:0 12px 30px rgba(0,0,0,.10);
--shadow-lg:0 22px 50px rgba(0,0,0,.15);
--container:1280px;
}
/* ==========================================================
2. GLOBAL
========================================================== */
html{
scroll-behavior:smooth;
}
body{
margin:0;
padding:0;
background:var(--eko-bg);
color:var(--eko-text);
font-family:"Segoe UI",Roboto,Arial,sans-serif;
}
/* ==========================================================
FULL WIDTH LAYOUT
========================================================== */
body .container,
body .container-fluid,
.col-cmln,
.col-12,
#mw-content-text,
.page-Main_Page .mw-parser-output{
width:100% !important;
max-width:100% !important;
}
.page-Main_Page .container{
width:100% !important;
max-width:100% !important;
margin:0 !important;
padding:0 !important;
}
.page-Main_Page .flex-fill.container{
width:100% !important;
max-width:100% !important;
margin:0 !important;
padding:0 !important;
}
.page-Main_Page #content,
.page-Main_Page #bodyContent,
.page-Main_Page #mw-content-text,
.page-Main_Page .mw-parser-output{
margin:0 !important;
padding:0 !important;
}
/* ==========================================================
CONTENT PAGES
========================================================== */
body:not(.page-Main_Page) .mw-parser-output{
max-width:1100px;
margin:auto;
padding:40px 30px;
}
/* ==========================================================
MAIN PAGE CLEANUP
========================================================== */
.page-Main_Page #firstHeading,
.page-Main_Page #contentSub,
.page-Main_Page #toc,
.page-Main_Page .page-tools,
.page-Main_Page .mw-indicators{
display:none !important;
}
/* ==========================================================
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;
}
.navbar-brand{
padding:8px !important;
}
.navbar-brand img,
.navbar-brand .mw-wiki-logo,
#p-logo img{
height:60px;
width:auto;
}
.page-Main_Page .navbar-nav>li>a{
color:#ffffff !important;
font-weight:500;
}
.page-Main_Page .navbar-nav>li>a:hover{
color:#d8ead8 !important;
}
/* ==========================================================
HERO
========================================================== */
.eko-hero{
position:relative;
width:100%;
min-height:720px;
height:80vh;
max-height:900px;
background:
linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
url("/wiki/images/2/26/Hero.jpg?20260703054727");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
overflow:hidden;
}
.eko-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.30);
}
.eko-content{
position:relative;
z-index:2;
width:100%;
max-width:950px;
padding:0 30px;
}
.hero-title-main{
font-family:Georgia,"Times New Roman",serif;
font-size:78px;
font-weight:700;
line-height:1;
color:#ffffff;
margin:0;
}
.hero-title-sub{
font-family:Georgia,"Times New Roman",serif;
font-size:52px;
font-weight:500;
line-height:1.1;
color:#ffffff;
margin:10px 0 32px;
}
.hero-title-sub::after{
content:"";
display:block;
width:420px;
max-width:100%;
height:1px;
background:rgba(255,255,255,.75);
margin:28px auto 0;
}
.eko-content p{
max-width:760px;
margin:35px auto 0;
font-size:22px;
line-height:1.7;
color:rgba(255,255,255,.95);
}
/* ==========================================================
HOMEPAGE SECTION
========================================================== */
.homepage-section{
max-width:var(--container);
margin:auto;
padding:90px 40px;
}
.section-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:40px;
}
.section-title-left{
display:flex;
align-items:center;
gap:12px;
font-family:Georgia,serif;
font-size:40px;
color:var(--eko-green);
}
.section-title-right{
color:var(--eko-accent);
font-weight:600;
cursor:pointer;
}
.section-title-right:hover{
text-decoration:underline;
}
/* ==========================================================
GRID
========================================================== */
.homepage-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:32px;
}
/* ==========================================================
CARDS
========================================================== */
.eko-card{
width:100%;
background:#ffffff;
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow-sm);
transition:.30s;
}
.eko-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-lg);
}
.eko-card img,
.eko-card .mw-file-element{
width:100%;
height:260px;
object-fit:cover;
display:block;
transition:transform .35s ease;
}
.eko-card:hover img,
.eko-card:hover .mw-file-element{
transform:scale(1.05);
}
.eko-card-body{
padding:18px;
}
.eko-card-title{
margin:0;
text-align:center;
font-family:Georgia,serif;
font-size:24px;
color:var(--eko-green);
}
.eko-card-text{
display:none !important;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media(max-width:1000px){
.homepage-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:768px){
.eko-hero{
min-height:600px;
height:auto;
}
.hero-title-main{
font-size:54px;
}
.hero-title-sub{
font-size:36px;
}
.eko-content p{
font-size:18px;
}
.section-header{
flex-direction:column;
align-items:flex-start;
gap:15px;
}
.homepage-section{
padding:70px 25px;
}
.homepage-grid{
grid-template-columns:1fr;
}
.navbar-brand img,
.navbar-brand .mw-wiki-logo{
height:50px;
}
}
@media(max-width:480px){
.eko-hero{
min-height:500px;
height:auto;
}
.hero-title-main{
font-size:40px;
}
.hero-title-sub{
font-size:28px;
}
.eko-content p{
font-size:17px;
}
.homepage-section{
padding:50px 18px;
}
.eko-card img,
.eko-card .mw-file-element{
height:200px;
}
}
/* ==========================================================
ANIMATION
========================================================== */
@keyframes fadeInUp{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.animate-in{
animation:fadeInUp .6s ease forwards;
}
.eko-card:nth-child(1){animation-delay:.1s;}
.eko-card:nth-child(2){animation-delay:.2s;}
.eko-card:nth-child(3){animation-delay:.3s;}
.eko-card:nth-child(4){animation-delay:.4s;}
/* ==========================================================
UTILITIES
========================================================== */
.text-center{text-align:center;}
.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}
.mb-20{margin-bottom:20px;}
.mb-40{margin-bottom:40px;}
