Main Page: Difference between revisions

From Ekologos Wiki
← Older edit
Admin (talk | contribs)
Bureaucrats, Interface administrators, Administrators
276 edits
No edit summary
Tag: Reverted
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* ==========================================================
__NOTOC__
  EKOLOGOS WIKI DESIGN SYSTEM v2.0
  Foundation
========================================================== */


/* ==========================================================
<div class="eko-hero">
  1. ROOT VARIABLES
========================================================== */


:root{
    <div class="eko-overlay"></div>


     --eko-green:#23492F;
     <div class="eko-content">
    --eko-accent:#295536;
    --eko-bg:#F8F6F1;
    --eko-white:#ffffff;
    --eko-text:#333333;
    --eko-light:#666666;


    --radius:18px;
        <h1 class="hero-title-main">
            Ecological Knowledge
        </h1>
        <h2 class="hero-title-sub">
            Across Cultures and Landscapes
        </h2>


    --shadow-sm:0 6px 18px rgba(0,0,0,.08);
        <p>
    --shadow-md:0 12px 30px rgba(0,0,0,.10);
            A collaborative knowledge commons documenting ecological knowledge,
    --shadow-lg:0 22px 50px rgba(0,0,0,.15);
            environmental change, biodiversity, and culture across the world.
        </p>


     --container:1280px;
     </div>


}
</div>


/* ==========================================================
  2. GLOBAL
========================================================== */


html{
<div class="homepage-section">
    scroll-behavior:smooth;
}


body{
     <div class="section-header">
     margin:0;
    padding:0;
    background:var(--eko-bg);
    color:var(--eko-text);
    font-family:"Segoe UI",Roboto,Arial,sans-serif;
}


/* ==========================================================
        <div class="section-title-left">[[File:Globe.png|22px|link=|alt=Globe]]<div class="section-heading">Explore by Region</div></div>
  FULL WIDTH LAYOUT
========================================================== */


body .container,
        <div class="section-title-right">[[Regions|Browse all regions →]]</div>
body .container-fluid,
.col-cmln,
.col-12,
#mw-content-text,
.page-Main_Page .mw-parser-output{


     width:100% !important;
     </div>
    max-width:100% !important;


}


.page-Main_Page .container{
     <div class="homepage-grid">
    width:100% !important;
     max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
}


.page-Main_Page .flex-fill.container{
        <div class="eko-card">
    width:100% !important;
            [[File:Arctic.jpg|600px|link=Arctic]]
    max-width:100% !important;
            <div class="eko-card-body">
    margin:0 !important;
                <h3 class="eko-card-title">Arctic</h3>
    padding:0 !important;
            </div>
}
        </div>


.page-Main_Page #content,
        <div class="eko-card">
.page-Main_Page #bodyContent,
            [[File:Himalayas.jpg|600px|link=Himalayas]]
.page-Main_Page #mw-content-text,
            <div class="eko-card-body">
.page-Main_Page .mw-parser-output{
                <h3 class="eko-card-title">Himalayas</h3>
            </div>
        </div>


    margin:0 !important;
        <div class="eko-card">
    padding:0 !important;
            [[File:Amazonia.jpg|600px|link=Amazonia]]
            <div class="eko-card-body">
                <h3 class="eko-card-title">Amazonia</h3>
            </div>
        </div>


}
        <div class="eko-card">
            [[File:South India.jpg|600px|link=South India]]
            <div class="eko-card-body">
                <h3 class="eko-card-title">South India</h3>
            </div>
        </div>


/* ==========================================================
        <div class="eko-card">
  CONTENT PAGES
            [[File:Southeastasia.jpg|600px|link=Southeast Asia]]
========================================================== */
            <div class="eko-card-body">
                <h3 class="eko-card-title">Southeast Asia</h3>
            </div>
        </div>


body:not(.page-Main_Page) .mw-parser-output{
        <div class="eko-card">
            [[File:All Regions.jpg|600px|link=Regions]]
            <div class="eko-card-body">
                <h3 class="eko-card-title">All Regions</h3>
            </div>
        </div>


     max-width:1100px;
     </div>
    margin:auto;
    padding:40px 30px;


}
</div>


/* ==========================================================
  MAIN PAGE CLEANUP
========================================================== */


.page-Main_Page #firstHeading,
<div class="theme-section">
.page-Main_Page #contentSub,
.page-Main_Page #toc,
.page-Main_Page .page-tools,
.page-Main_Page .mw-indicators{


     display:none !important;
     <div class="theme-header">


}
        <div class="theme-title-left">[[File:Biodiversity.png|22px|link=|alt=Theme]]<div class="theme-heading">Explore by Theme</div></div>


/* ==========================================================
        <div class="theme-title-right">
  NAVBAR
            [[Themes|Browse all themes →]]
========================================================== */
        </div>


.page-Main_Page .navbar{
    </div>


    position:absolute;
    top:0;
    left:0;
    right:0;


     z-index:1000;
     <div class="theme-grid">


    background:transparent !important;
        <div class="theme-card">
    border:none !important;
            <div class="theme-icon">[[File:Biodiversity.png|52px|link=Biodiversity|alt=Biodiversity]]</div>
    box-shadow:none !important;
            <div class="theme-name">Biodiversity</div>
        </div>


}
        <div class="theme-card">
            <div class="theme-icon">[[File:Water-systems.png|52px|link=Water Systems|alt=Water Systems]]</div>
            <div class="theme-name">Water Systems</div>
        </div>


/* Logo */
        <div class="theme-card">
            <div class="theme-icon">[[File:Fire-land-management.png|52px|link=Fire and Land Management|alt=Fire and Land Management]]</div>
            <div class="theme-name">Fire &amp; Land<br>Management</div>
        </div>


.navbar-brand{
        <div class="theme-card">
            <div class="theme-icon">[[File:Forest-knowledge.png|52px|link=Forest Knowledge|alt=Forest Knowledge]]</div>
            <div class="theme-name">Forest<br>Knowledge</div>
        </div>


    display:flex !important;
        <div class="theme-card">
    align-items:flex-start !important;
            <div class="theme-icon">[[File:Fisheries.png|52px|link=Fisheries|alt=Fisheries]]</div>
    justify-content:center;
            <div class="theme-name">Fisheries</div>
        </div>


    height:70px;
        <div class="theme-card">
            <div class="theme-icon">[[File:Animal-relations.png|52px|link=Animal Relations|alt=Animal Relations]]</div>
            <div class="theme-name">Animal<br>Relations</div>
        </div>


    padding:0 8px !important;
        <div class="theme-card">
    margin-top:-50px;
            <div class="theme-icon">[[File:Climate-change.png|52px|link=Climate Change|alt=Climate Change]]</div>
            <div class="theme-name">Climate<br>Change</div>
        </div>


}
        <div class="theme-card">
            <div class="theme-icon">[[File:Agriculture.png|52px|link=Agriculture|alt=Agriculture]]</div>
            <div class="theme-name">Agriculture</div>
        </div>


.navbar-brand img,
        <div class="theme-card">
.navbar-brand .mw-wiki-logo,
            <div class="theme-icon">[[File:Traditional-medicine.png|52px|link=Traditional Medicine|alt=Traditional Medicine]]</div>
#p-logo img{
            <div class="theme-name">Traditional<br>Medicine</div>
        </div>


    display:block;
        <div class="theme-card">
            <div class="theme-icon">[[File:Dreams-cosmologies.png|52px|link=Dreams and Cosmologies|alt=Dreams and Cosmologies]]</div>
            <div class="theme-name">Dreams &amp;<br>Cosmologies</div>
        </div>


     height:90px;
     </div>
    width:auto;


}
</div>


/* Navigation */
<div class="collections-section">


.page-Main_Page .navbar-nav>li>a{
<div class="collections-heading">Featured Knowledge Collections</div>


    color:#ffffff !important;
<div class="collections-grid">
    font-weight:500;


}
<div class="collection-card">
<div class="collection-image">[[File:Indigenous Ecological Knowledge.jpg|700px|link=Indigenous Ecological Knowledge|alt=Indigenous Ecological Knowledge]]</div>
<div class="collection-body">
<div class="collection-title">[[Indigenous Ecological Knowledge|Indigenous Ecological Knowledge]]</div>
<div class="collection-text">Traditional systems of environmental observation, stewardship, and adaptation.</div>
</div>
</div>


.page-Main_Page .navbar-nav>li>a:hover{
<div class="collection-card">
<div class="collection-image">[[File:Environmental Change.jpg|700px|link=Environmental Change|alt=Environmental Change]]</div>
<div class="collection-body">
<div class="collection-title">[[Environmental Change|Environmental Change]]</div>
<div class="collection-text">Historical and contemporary accounts of ecological transformation.</div>
</div>
</div>


    color:#d8ead8 !important;
<div class="collection-card">
<div class="collection-image">[[File:Atlas of Ecological Knowledge.jpg|700px|link=Atlas of Ecological Knowledge|alt=Atlas of Ecological Knowledge]]</div>
<div class="collection-body">
<div class="collection-title">[[Atlas of Ecological Knowledge|Atlas of Ecological Knowledge]]</div>
<div class="collection-text">Interactive maps connecting places, species, stories, and communities.</div>
</div>
</div>


}
<div class="collection-card">
/* ==========================================================
<div class="collection-image">[[File:Biodiversity Archive.jpg|700px|link=Biodiversity Archive|alt=Biodiversity Archive]]</div>
  HERO
<div class="collection-body">
========================================================== */
<div class="collection-title">[[Biodiversity Archive|Biodiversity Archive]]</div>
<div class="collection-text">Species accounts, habitats, and community-based observations from around the world.</div>
</div>
</div>


.eko-hero{
</div>


    position:relative;
</div>


    width:100%;
<div class="home-lower-section">


    min-height:720px;
<div class="home-upper-grid">
    height:80vh;
    max-height:900px;


    background:
<div class="home-articles-panel">
        linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
        url("/wiki/images/2/26/Hero.jpg?20260703054727");


    background-size:cover;
<div class="home-lower-heading">Featured Articles</div>
    background-position:center;
    background-repeat:no-repeat;


    display:flex;
<div class="home-articles-grid">
    justify-content:center;
    align-items:center;
    text-align:center;


    overflow:hidden;
<div class="home-article-item">
<div class="home-article-thumb">[[File:sami-reindeer-herding.png|48px|link=Sami Reindeer Herding|alt=Sami Reindeer Herding]]</div>
<div class="home-article-copy">
<div class="home-article-title">[[Sami Reindeer Herding|Sámi Reindeer Herding]]</div>
<div class="home-article-place">Arctic</div>
</div>
</div>


}
<div class="home-article-item">
<div class="home-article-thumb">[[File:himalayan-medicinal-plants.png|48px|link=Himalayan Medicinal Plants|alt=Himalayan Medicinal Plants]]</div>
<div class="home-article-copy">
<div class="home-article-title">[[Himalayan Medicinal Plants|Himalayan Medicinal Plants]]</div>
<div class="home-article-place">Himalayas</div>
</div>
</div>


.eko-overlay{
<div class="home-article-item">
<div class="home-article-thumb">[[File:naga-forest-conservation.png|48px|link=Naga Forest Conservation|alt=Naga Forest Conservation]]</div>
<div class="home-article-copy">
<div class="home-article-title">[[Naga Forest Conservation|Naga Forest Conservation]]</div>
<div class="home-article-place">Northeast India</div>
</div>
</div>


    position:absolute;
<div class="home-article-item">
    inset:0;
<div class="home-article-thumb">[[File:arctic-sea-ice-observation.png|48px|link=Arctic Sea Ice Observation|alt=Arctic Sea Ice Observation]]</div>
    background:rgba(0,0,0,.30);
<div class="home-article-copy">
<div class="home-article-title">[[Arctic Sea Ice Observation|Arctic Sea Ice Observation]]</div>
<div class="home-article-place">Arctic</div>
</div>
</div>


}
<div class="home-article-item">
<div class="home-article-thumb">[[File:guarani-atlantic-forest-knowledge.png|48px|link=Guarani Atlantic Forest Knowledge|alt=Guarani Atlantic Forest Knowledge]]</div>
<div class="home-article-copy">
<div class="home-article-title">[[Guarani Atlantic Forest Knowledge|Guarani Atlantic Forest Knowledge]]</div>
<div class="home-article-place">Brazil</div>
</div>
</div>


.eko-content{
<div class="home-article-item">
<div class="home-article-thumb">[[File:traditional-fire-management.png|48px|link=Traditional Fire Management|alt=Traditional Fire Management]]</div>
<div class="home-article-copy">
<div class="home-article-title">[[Traditional Fire Management|Traditional Fire Management]]</div>
<div class="home-article-place">Australia</div>
</div>
</div>


    position:relative;
</div>
    z-index:2;


    width:100%;
<div class="home-browse-articles">[[Articles|Browse all articles →]]</div>
    max-width:950px;


    padding:0 30px;
</div>


}


/* ==========================================
<div class="home-community-card">
  HERO TYPOGRAPHY
========================================== */


.hero-title-main{
<div class="home-community-title">
<span class="home-community-symbol">♧</span>
Communities &amp; Contributors
</div>


    font-family:Georgia,"Times New Roman",serif;
<div class="home-community-text">
    font-size:78px;
Researchers, students, elders, community knowledge holders, artists, and educators contribute to Ekologos.
    font-weight:700;
</div>
    line-height:1;
    color:#ffffff;


    margin:0 0 14px;
<div class="home-community-people">
<span>♙</span>
<span>♙</span>
<span>♙</span>
<span>♙</span>
<span>♙</span>
<span>♙</span>
</div>


}
<div class="home-community-button">
[[Contribute|Contribute to Ekologos Wiki]]
</div>


.hero-title-sub{
</div>


    font-family:Georgia,"Times New Roman",serif;
</div>
    font-size:52px;
    font-weight:500;
    line-height:1.15;
    color:#ffffff;


    margin:0 0 28px;


}
<div class="home-about-project">


/* Single divider BELOW H2 only */
<div class="home-about-box">
.hero-title-sub::after{


    content:"";
<div class="home-info-icon">[[File:Biodiversity.png|70px|link=|alt=About Ekologos Wiki]]</div>


    display:block;
<div class="home-info-content">


    width:420px;
<div class="home-info-title">About Ekologos Wiki</div>
    max-width:100%;


    height:1px;
<div class="home-info-text">
Ekologos Wiki is an open, collaborative platform for sharing and learning from ecological knowledge across cultures and landscapes. Our mission is to support respectful exchange, safeguard diverse knowledge traditions, and inspire care for the living world.
</div>


    margin:28px auto 0;
<div class="home-info-link">
[[About|Learn more about Ekologos Wiki →]]
</div>


    background:rgba(255,255,255,.75);
</div>


}
</div>


/* Remove any divider after H1 */
.hero-title-main::after{


    content:none;
<div class="home-project-box">


}
<div class="home-info-icon">[[File:Ekologos-logo.png|70px|link=|alt=The Ekologos Project]]</div>


.eko-content p{
<div class="home-info-content">


    max-width:760px;
<div class="home-info-title">The Ekologos Project</div>


    margin:35px auto 0;
<div class="home-info-text">
The Ekologos Wiki emerged from the Global Environmental Humanities Project and was developed through partnerships in Norway, India, Brazil, and beyond.
</div>


    font-size:22px;
<div class="home-info-link">
    line-height:1.7;
[[Ekologos Project|Visit the Project Portal →]]
</div>


    color:rgba(255,255,255,.95);
</div>


}
</div>
/* Remove MediaWiki heading borders inside hero */


.eko-content h1,
</div>
.eko-content h2{
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    padding-bottom: 0 !important;
}


.eko-content .mw-heading,
.eko-content .mw-heading1,
.eko-content .mw-heading2{
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Keep only one divider below H2 */
<div class="home-footer">


.hero-title-sub::after{
<div class="home-footer-brand">
    content:"";
[[File:Ekologos-logo.png|42px|link=Main Page|alt=Ekologos Wiki]]
    display:block;
<div class="home-footer-brand-text">
    width:420px;
<div class="home-footer-brand-main">EKOLOGOS</div>
    max-width:100%;
<div class="home-footer-brand-small">WIKI</div>
    height:1px;
</div>
    background:rgba(255,255,255,.75);
</div>
    margin:28px auto 0;
}
/* ==========================================================
  HOMEPAGE SECTION
========================================================== */


.homepage-section{
<div class="home-footer-links">
[[About|About]]
[[Contribute|How to Contribute]]
[[Community Guidelines|Community Guidelines]]
[[Contact|Contact]]
[[Privacy policy|Privacy]]
</div>


    max-width:var(--container);
<div class="home-footer-social">
    margin:0 auto;
<span>f</span>
    padding:90px 40px;
<span>◎</span>
<span>▶</span>
</div>


}
</div>


/* ==========================================================
</div>
  SECTION HEADER
========================================================== */
 
.section-header{
 
    display:flex;
    justify-content:space-between;
    align-items:center;
 
    width:100%;
 
    margin-bottom:2px;
 
}
 
/* Left side */
 
.section-title-left{
 
    display:flex;
    align-items:center;
 
    gap:16px;
 
    flex:1;
 
}
 
/* Remove MediaWiki image wrappers */
 
.section-title-left span,
.section-title-left a{
 
    display:flex;
    align-items:center;
 
    margin:0;
    padding:0;
 
}
 
/* Globe icon */
 
.section-title-left .mw-file-element,
.section-title-left img,
.section-icon,
.section-icon img{
 
    width:32px !important;
    height:32px !important;
 
    min-width:32px;
    min-height:32px;
 
    display:block;
 
    object-fit:contain;
 
    margin:0;
    padding:0;
 
    border:none;
    box-shadow:none;
 
}
 
/* Heading */
 
.section-heading{
 
    margin:0;
    padding:0;
 
    font-family:Georgia,"Times New Roman",serif;
    font-size:46px;
    font-weight:500;
    line-height:1;
 
    color:var(--eko-green);
 
}
 
/* Remove default MediaWiki heading spacing */
 
.section-heading::before,
.section-heading::after{
 
    display:none !important;
    content:none !important;
 
}
 
.section-title-left h2{
 
    margin:0 !important;
    padding:0 !important;
    border:none !important;
 
}
 
/* Right side */
 
.section-title-right{
 
    margin-left:auto;
 
    white-space:nowrap;
 
    font-size:18px;
    font-weight:600;
 
    display:flex;
    align-items:center;
 
}
 
.section-title-right a{
 
    color:var(--eko-green);
    text-decoration:none;
 
    transition:.25s;
 
}
 
.section-title-right a:hover{
 
    color:var(--eko-accent);
    text-decoration:none;
 
}
 
/* ==========================================================
  RESPONSIVE
========================================================== */
 
@media (max-width:768px){
 
    .section-header{
 
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
 
    }
 
    .section-heading{
 
        font-size:34px;
 
    }
 
    .section-title-right{
 
        margin-left:0;
 
    }
 
}
 
@media (max-width:480px){
 
    .section-heading{
 
        font-size:28px;
 
    }
 
    .section-title-left .mw-file-element,
    .section-title-left img{
 
        width:26px !important;
        height:26px !important;
 
        min-width:26px;
        min-height:26px;
 
    }
 
    .section-title-right{
 
        font-size:16px;
 
    }
 
}
 
/* ==========================================================
  GRID
========================================================== */
 
.homepage-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:34px;
}
 
/* ==========================================================
  CARDS
========================================================== */
 
.eko-card{
    width:100%;
    display:block;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:.3s;
}
 
.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;
        padding:100px 25px 80px;
    }
 
    .hero-title-main{
        font-size:54px;
        line-height:1.05;
        margin-bottom:10px;
    }
 
    .hero-title-sub{
        font-size:36px;
        line-height:1.2;
        margin-bottom:24px;
    }
 
    .hero-title-sub::after{
        width:320px;
        margin:24px auto 0;
    }
 
    .eko-content p{
        max-width:620px;
        font-size:18px;
        line-height:1.6;
        margin-top:28px;
    }
 
    .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;
        padding:80px 18px 60px;
    }
 
    .hero-title-main{
        font-size:40px;
        line-height:1.1;
        margin-bottom:8px;
    }
 
    .hero-title-sub{
        font-size:28px;
        line-height:1.25;
        margin-bottom:20px;
    }
 
    .hero-title-sub::after{
        width:220px;
        margin:20px auto 0;
    }
 
    .eko-content p{
        max-width:100%;
        font-size:17px;
        line-height:1.6;
        margin-top:24px;
    }
 
    .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;}
/* Make both texts the same size */
.homepage-section .section-heading,
.homepage-section .section-title-right a {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}
.section-title-right a,
.section-title-right a:visited {
    color: var(--eko-green) !important;
}
/* Show all six region cards in one row on desktop */
 
@media (min-width: 1001px) {
 
    .homepage-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 18px !important;
    }
 
    .eko-card img,
    .eko-card .mw-file-element {
        height: 150px !important;
    }
 
    .eko-card-body {
        padding: 12px 8px !important;
    }
 
    .eko-card-title {
        font-size: 17px !important;
    }
}
/* Region titles inside images — compact version */
 
.eko-card {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
 
/* Remove MediaWiki spacing around images */
 
.eko-card > p,
.eko-card > figure,
.eko-card > span,
.eko-card > a,
.eko-card .mw-file-description {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    background: transparent !important;
}
 
.eko-card > p > span,
.eko-card > p > span > a,
.eko-card > figure > a,
.eko-card > span > a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}
 
/* Image fills the card without a white border */
 
.eko-card img,
.eko-card .mw-file-element {
    display: block !important;
    width: 100% !important;
    height: 150px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
}
 
/* Small title overlay */
 
.eko-card-body {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 10px 4px 4px !important;
    background: linear-gradient(
    to bottom,
    transparent,
    var(--eko-green)
) !important;
    box-sizing: border-box !important;
}
 
.eko-card-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* Final fix: space between region heading and cards */
 
.page-Main_Page .homepage-section > .section-header {
    margin-bottom: 8px !important;
}
 
.page-Main_Page .homepage-section > .section-header + p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
 
.page-Main_Page .homepage-section > .homepage-grid {
    margin-top: 0 !important;
}
 
/* Move region cards closer to the heading */
.page-Main_Page .homepage-section .homepage-grid {
    margin-top: 0px !important;
}
 
/* ==========================================================
  EXPLORE BY THEME
========================================================== */
 
.theme-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 25px 40px 55px;
    box-sizing: border-box;
}
 
/* Theme heading row */
 
.theme-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 14px;
}
 
.theme-title-left {
    display: flex;
    align-items: center;
    gap: 9px;
}
 
.theme-title-left span,
.theme-title-left a {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
 
.theme-title-left img,
.theme-title-left .mw-file-element {
    display: block;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
 
.theme-heading,
.theme-title-right a {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px !important;
    font-weight: 500;
    line-height: 1.2;
    color: var(--eko-green) !important;
}
 
.theme-title-right {
    margin-left: auto;
    white-space: nowrap;
}
 
.theme-title-right a {
    text-decoration: none !important;
}
 
.theme-title-right a:hover {
    color: var(--eko-accent) !important;
}
 
/* Ten theme cards in one row */
 
.theme-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}
 
/* Individual theme card */
 
.theme-card {
    min-height: 115px;
    padding: 12px 5px 10px;
    box-sizing: border-box;
 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 
    background: #f5f3ed;
    border: 1px solid rgba(35, 73, 47, 0.12);
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
 
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
.theme-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.08);
}
 
/* Icon */
 
.theme-icon {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    margin-bottom: 5px;
}
 
.theme-icon span,
.theme-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
}
 
.theme-icon img,
.theme-icon .mw-file-element {
    display: block;
    width: 52px !important;
    height: 52px !important;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
 
/* Theme title */
 
.theme-name {
    color: var(--eko-green);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
}
 
/* Responsive layout */
 
@media (max-width: 1000px) {
    .theme-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}
 
@media (max-width: 600px) {
    .theme-section {
        padding: 25px 18px 40px;
    }
 
    .theme-header {
        align-items: flex-start;
        gap: 12px;
    }
 
    .theme-heading,
    .theme-title-right a {
        font-size: 15px !important;
    }
 
    .theme-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}
/* Remove vertical gaps around Explore by Theme */
 
.page-Main_Page .homepage-section {
    padding-bottom: 0 !important;
}
 
.page-Main_Page .theme-section {
    padding-top: 0 !important;
}
 
.page-Main_Page .theme-header {
    margin-bottom: 0 !important;
}
 
.page-Main_Page .theme-grid {
    margin-top: 0 !important;
}
/* ==========================================================
  FEATURED KNOWLEDGE COLLECTIONS
========================================================== */
 
.collections-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 30px 40px 70px;
    box-sizing: border-box;
}
 
/* Section heading */
 
.collections-heading {
    margin: 0 0 14px;
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}
 
/* Four cards in one row */
 
.collections-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}
 
/* Individual card */
 
.collection-card {
    background: #ffffff;
    border: 1px solid rgba(35, 73, 47, 0.12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
.collection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.09);
}
 
/* Remove MediaWiki image spacing */
 
.collection-image {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}
 
.collection-image p,
.collection-image span,
.collection-image a {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}
 
/* Main card image */
 
.collection-image img,
.collection-image .mw-file-element {
    display: block;
    width: 100% !important;
    height: 170px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    border: none !important;
    box-shadow: none !important;
}
 
/* Text area */
 
.collection-body {
    min-height: 135px;
    padding: 16px 16px 18px;
    box-sizing: border-box;
}
 
/* Card title */
 
.collection-title {
    margin: 0 0 7px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.1;
}
 
.collection-title a,
.collection-title a:visited {
    color: var(--eko-green) !important;
    text-decoration: none !important;
}
 
.collection-title a:hover {
    color: var(--eko-accent) !important;
}
 
/* Description */
 
.collection-text {
    color: var(--eko-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}
 
/* Tablet */
 
@media (max-width: 900px) {
    .collections-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
 
/* Mobile */
 
@media (max-width: 600px) {
    .collections-section {
        padding: 25px 18px 45px;
    }
 
    .collections-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
  HOMEPAGE LOWER SECTIONS
========================================================== */
 
.home-lower-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 20px 40px 25px;
    box-sizing: border-box;
}
 
 
/* ==========================================================
  FEATURED ARTICLES AND COMMUNITY
========================================================== */
 
.home-upper-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 24px;
    align-items: stretch;
    width: 100%;
}
 
.home-articles-panel {
    border-top: 1px solid rgba(35, 73, 47, 0.15);
    padding-top: 12px;
}
 
.home-lower-heading {
    margin: 0 0 14px;
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}
 
.home-articles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 12px;
}
 
.home-article-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
 
.home-article-thumb {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    line-height: 0;
    border-radius: 50%;
    overflow: hidden;
}
 
.home-article-thumb span,
.home-article-thumb a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
 
.home-article-thumb img,
.home-article-thumb .mw-file-element {
    display: block;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    border-radius: 50%;
    border: none !important;
    box-shadow: none !important;
}
 
.home-article-copy {
    min-width: 0;
}
 
.home-article-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}
 
.home-article-title a,
.home-article-title a:visited {
    color: var(--eko-green) !important;
    text-decoration: none !important;
}
 
.home-article-title a:hover {
    color: var(--eko-accent) !important;
}
 
.home-article-place {
    margin-top: 2px;
    color: var(--eko-light);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.2;
}
 
.home-browse-articles {
    margin-top: 12px;
    text-align: right;
}
 
.home-browse-articles a,
.home-browse-articles a:visited {
    color: var(--eko-green) !important;
    font-size: 12px;
    text-decoration: none !important;
}
 
 
/* Community card */
 
.home-community-card {
    padding: 22px 26px;
    box-sizing: border-box;
    background: #eeece4;
    border: 1px solid rgba(35, 73, 47, 0.08);
    border-radius: 14px;
}
 
.home-community-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}
 
.home-community-symbol {
    font-size: 26px;
    line-height: 1;
}
 
.home-community-text {
    max-width: 330px;
    margin: 16px auto 12px;
    color: var(--eko-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}
 
.home-community-people {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    margin: 12px 0;
    color: var(--eko-green);
    font-size: 34px;
    line-height: 1;
}
 
.home-community-button {
    text-align: center;
}
 
.home-community-button a,
.home-community-button a:visited {
    display: inline-block;
    padding: 8px 20px;
    background: var(--eko-green);
    color: #ffffff !important;
    border-radius: 4px;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
}
 
.home-community-button a:hover {
    background: var(--eko-accent);
}
 
 
/* ==========================================================
  ABOUT AND PROJECT
========================================================== */
 
.home-about-project {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
    background: #f1efe8;
    border: 1px solid rgba(35, 73, 47, 0.08);
    border-radius: 14px;
    overflow: hidden;
}
 
.home-about-box,
.home-project-box {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    padding: 25px;
    box-sizing: border-box;
}
 
.home-project-box {
    border-left: 1px solid rgba(35, 73, 47, 0.16);
}
 
.home-info-icon {
    width: 70px;
    line-height: 0;
}
 
.home-info-icon span,
.home-info-icon a {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}
 
.home-info-icon img,
.home-info-icon .mw-file-element {
    display: block;
    width: 70px !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    border: none !important;
    box-shadow: none !important;
}
 
.home-info-title {
    margin-bottom: 9px;
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}
 
.home-info-text {
    color: var(--eko-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}
 
.home-info-link {
    margin-top: 12px;
}
 
.home-info-link a,
.home-info-link a:visited {
    color: var(--eko-green) !important;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none !important;
}
 
 
/* ==========================================================
  HOMEPAGE FOOTER
========================================================== */
 
.home-footer {
    display: grid;
    grid-template-columns: 220px 1fr 120px;
    align-items: center;
    gap: 20px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(35, 73, 47, 0.18);
}
 
.home-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
 
.home-footer-brand > span,
.home-footer-brand > a {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}
 
.home-footer-brand img,
.home-footer-brand .mw-file-element {
    display: block;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    border: none !important;
    box-shadow: none !important;
}
 
.home-footer-brand-main {
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    letter-spacing: 3px;
    line-height: 1;
}
 
.home-footer-brand-small {
    margin-top: 4px;
    color: var(--eko-green);
    font-size: 8px;
    letter-spacing: 5px;
    line-height: 1;
}
 
.home-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
}
 
.home-footer-links a,
.home-footer-links a:visited {
    color: var(--eko-text) !important;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 10px;
    text-decoration: none !important;
}
 
.home-footer-social {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 17px;
    color: var(--eko-green);
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
}
 
 
/* ==========================================================
  RESPONSIVE LOWER SECTIONS
========================================================== */
 
@media (max-width: 900px) {
 
    .home-upper-grid {
        grid-template-columns: 1fr;
    }
 
    .home-about-project {
        grid-template-columns: 1fr;
    }
 
    .home-project-box {
        border-left: none;
        border-top: 1px solid rgba(35, 73, 47, 0.16);
    }
 
    .home-footer {
        grid-template-columns: 1fr;
        text-align: center;
    }
 
    .home-footer-brand,
    .home-footer-social {
        justify-content: center;
    }
 
}
 
@media (max-width: 600px) {
 
    .home-lower-section {
        padding: 20px 18px;
    }
 
    .home-articles-grid {
        grid-template-columns: 1fr;
    }
 
    .home-about-box,
    .home-project-box {
        grid-template-columns: 1fr;
    }
 
    .home-footer-links {
        gap: 12px;
    }
 
}
/* Keep Featured Articles and Communities side by side */
 
.home-upper-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}
 
/* Stack them only on small screens */
 
@media (max-width: 400px) {
    .home-upper-grid {
        grid-template-columns: 1fr !important;
    }
}

Latest revision as of 10:11, 14 August 2026


Ecological Knowledge

Across Cultures and Landscapes

A collaborative knowledge commons documenting ecological knowledge, environmental change, biodiversity, and culture across the world.


Globe
Explore by Region
Browse all regions →

Arctic

Himalayas

Amazonia

South India

Southeast Asia

All Regions


Theme
Explore by Theme
           Browse all themes →


Biodiversity
Biodiversity
Water Systems
Water Systems
Fire and Land Management
Fire & Land
Management
Forest Knowledge
Forest
Knowledge
Fisheries
Fisheries
Animal Relations
Animal
Relations
Climate Change
Climate
Change
Agriculture
Agriculture
Traditional Medicine
Traditional
Medicine
Dreams and Cosmologies
Dreams &
Cosmologies
Featured Knowledge Collections
Indigenous Ecological Knowledge
Indigenous Ecological Knowledge
Traditional systems of environmental observation, stewardship, and adaptation.
Environmental Change
Environmental Change
Historical and contemporary accounts of ecological transformation.
Atlas of Ecological Knowledge
Atlas of Ecological Knowledge
Interactive maps connecting places, species, stories, and communities.
Biodiversity Archive
Biodiversity Archive
Species accounts, habitats, and community-based observations from around the world.
Featured Articles
Sami Reindeer Herding
Sámi Reindeer Herding
Arctic
Himalayan Medicinal Plants
Himalayan Medicinal Plants
Himalayas
Naga Forest Conservation
Naga Forest Conservation
Northeast India
Arctic Sea Ice Observation
Arctic Sea Ice Observation
Arctic
Guarani Atlantic Forest Knowledge
Guarani Atlantic Forest Knowledge
Brazil
Traditional Fire Management
Traditional Fire Management
Australia
Browse all articles →


♧ Communities & Contributors

Researchers, students, elders, community knowledge holders, artists, and educators contribute to Ekologos.

♙ ♙ ♙ ♙ ♙ ♙

Contribute to Ekologos Wiki


About Ekologos Wiki
About Ekologos Wiki

Ekologos Wiki is an open, collaborative platform for sharing and learning from ecological knowledge across cultures and landscapes. Our mission is to support respectful exchange, safeguard diverse knowledge traditions, and inspire care for the living world.

Learn more about Ekologos Wiki →


The Ekologos Project
The Ekologos Project

The Ekologos Wiki emerged from the Global Environmental Humanities Project and was developed through partnerships in Norway, India, Brazil, and beyond.

Visit the Project Portal →


Ekologos Wiki

EKOLOGOS
WIKI

About How to Contribute Community Guidelines Contact Privacy

f ◎ ▶

Retrieved from "https://wiki.highlanderpress.org/index.php?title=Main_Page&oldid=280"
Powered by MediaWiki