Main Page: Difference between revisions

From Ekologos Wiki
← Older editNewer edit →
Admin (talk | contribs)
Bureaucrats, Interface administrators, Administrators
276 edits
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
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>


    --shadow-sm:0 6px 18px rgba(0,0,0,.08);
        <h2 class="hero-title-sub">
    --shadow-md:0 12px 30px rgba(0,0,0,.10);
            Across Cultures and Landscapes
    --shadow-lg:0 22px 50px rgba(0,0,0,.15);
        </h2>


    --container:1280px;
        <p>
            A collaborative knowledge commons documenting ecological knowledge,
            environmental change, biodiversity, and culture across the world.
        </p>


}
    </div>


/* ==========================================================
</div>
  2. GLOBAL
========================================================== */


html{
    scroll-behavior:smooth;
}


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


/* ==========================================================
    <div class="section-header">
  FULL WIDTH LAYOUT
========================================================== */


body .container,
        <div class="section-title-left">[[File:Globe.png|22px|link=|alt=Globe]]<div class="section-heading">Explore by Region</div></div>
body .container-fluid,
.col-cmln,
.col-12,
#mw-content-text,
.page-Main_Page .mw-parser-output{


    width:100% !important;
        <div class="section-title-right">[[Regions|Browse all regions →]]</div>
    max-width:100% !important;


}
    </div>


.page-Main_Page .container{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
}


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


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


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


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


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


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


    max-width:1100px;
        <div class="eko-card">
    margin:auto;
            [[File:All Regions.jpg|600px|link=Regions]]
    padding:40px 30px;
            <div class="eko-card-body">
                <h3 class="eko-card-title">All Regions</h3>
            </div>
        </div>


}
    </div>


/* ==========================================================
</div>
  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;
<div class="theme-section">


}
    <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>
  NAVBAR
========================================================== */


.page-Main_Page .navbar{
        <div class="theme-title-right">
            [[Themes|Browse all themes →]]
        </div>


     position:absolute;
     </div>
    top:0;
    left:0;
    right:0;


    z-index:1000;


     background:transparent !important;
     <div class="theme-grid">
    border:none !important;
    box-shadow:none !important;


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


/* Logo */
        <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>


.navbar-brand{
        <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>


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


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


    padding:0 8px !important;
        <div class="theme-card">
    margin-top:-50px;
            <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>


}
        <div class="theme-card">
            <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>


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


    display:block;
        <div class="theme-card">
            <div class="theme-icon">[[File:Traditional-medicine.png|52px|link=Traditional Medicine|alt=Traditional Medicine]]</div>
            <div class="theme-name">Traditional<br>Medicine</div>
        </div>


    height:90px;
        <div class="theme-card">
    width:auto;
            <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>


}
    </div>


/* Navigation */
</div>


.page-Main_Page .navbar-nav>li>a{


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


}
    <div class="collections-heading">
        Featured Knowledge Collections
    </div>


.page-Main_Page .navbar-nav>li>a:hover{
    <div class="collections-grid">


    color:#d8ead8 !important;
        <div class="collection-card">


}
            <div class="collection-image">
/* ==========================================================
                [[File:Indigenous Ecological Knowledge.jpg|700px|link=Indigenous Ecological Knowledge|alt=Indigenous Ecological Knowledge]]
  HERO
            </div>
========================================================== */


.eko-hero{
            <div class="collection-body">


    position:relative;
                <div class="collection-title">
                    [[Indigenous Ecological Knowledge|Indigenous Ecological Knowledge]]
                </div>


    width:100%;
                <div class="collection-text">
                    Traditional systems of environmental observation, stewardship, and adaptation.
                </div>


    min-height:720px;
            </div>
    height:80vh;
    max-height:900px;


    background:
         </div>
         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;
        <div class="collection-card">
    justify-content:center;
    align-items:center;
    text-align:center;


    overflow:hidden;
            <div class="collection-image">
                [[File:Environmental Change.jpg|700px|link=Environmental Change|alt=Environmental Change]]
            </div>


}
            <div class="collection-body">


.eko-overlay{
                <div class="collection-title">
                    [[Environmental Change|Environmental Change]]
                </div>


    position:absolute;
                <div class="collection-text">
    inset:0;
                    Historical and contemporary accounts of ecological transformation.
    background:rgba(0,0,0,.30);
                </div>


}
            </div>


.eko-content{
        </div>


    position:relative;
    z-index:2;


    width:100%;
        <div class="collection-card">
    max-width:950px;


    padding:0 30px;
            <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">
  HERO TYPOGRAPHY
                    [[Atlas of Ecological Knowledge|Atlas of Ecological Knowledge]]
========================================== */
                </div>


.hero-title-main{
                <div class="collection-text">
                    Interactive maps connecting places, species, stories, and communities.
                </div>


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


    margin:0 0 14px;
        </div>


}


.hero-title-sub{
        <div class="collection-card">


    font-family:Georgia,"Times New Roman",serif;
            <div class="collection-image">
    font-size:52px;
                [[File:Biodiversity Archive.jpg|700px|link=Biodiversity Archive|alt=Biodiversity Archive]]
    font-weight:500;
            </div>
    line-height:1.15;
    color:#ffffff;


    margin:0 0 28px;
            <div class="collection-body">


}
                <div class="collection-title">
                    [[Biodiversity Archive|Biodiversity Archive]]
                </div>


/* Single divider BELOW H2 only */
                <div class="collection-text">
.hero-title-sub::after{
                    Species accounts, habitats, and community-based observations from around the world.
                </div>


    content:"";
            </div>


    display:block;
        </div>


     width:420px;
     </div>
    max-width:100%;


    height:1px;
</div>


    margin:28px auto 0;


    background:rgba(255,255,255,.75);
<div class="home-lower-section">


}
    <div class="home-upper-grid">


/* Remove any divider after H1 */
        <div class="home-articles-panel">
.hero-title-main::after{


    content:none;
            <div class="home-lower-heading">
                Featured Articles
            </div>


}
            <div class="home-articles-grid">


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


    max-width:760px;
                    <div class="home-article-thumb">
                        [[File:Sami Reindeer Herding.jpg|48px|link=Sami Reindeer Herding|alt=Sami Reindeer Herding]]
                    </div>


    margin:35px auto 0;
                    <div class="home-article-copy">


    font-size:22px;
                        <div class="home-article-title">
    line-height:1.7;
                            [[Sami Reindeer Herding|Sámi Reindeer Herding]]
                        </div>


    color:rgba(255,255,255,.95);
                        <div class="home-article-place">
                            Arctic
                        </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-article-item">


.hero-title-sub::after{
                    <div class="home-article-thumb">
    content:"";
                        [[File:Himalayan Medicinal Plants.jpg|48px|link=Himalayan Medicinal Plants|alt=Himalayan Medicinal Plants]]
    display:block;
                    </div>
    width:420px;
    max-width:100%;
    height:1px;
    background:rgba(255,255,255,.75);
    margin:28px auto 0;
}
/* ==========================================================
  HOMEPAGE SECTION
========================================================== */


.homepage-section{
                    <div class="home-article-copy">


    max-width:var(--container);
                        <div class="home-article-title">
    margin:0 auto;
                            [[Himalayan Medicinal Plants|Himalayan Medicinal Plants]]
    padding:90px 40px;
                        </div>


}
                        <div class="home-article-place">
                            Himalayas
                        </div>


/* ==========================================================
                    </div>
  SECTION HEADER
========================================================== */


.section-header{
                </div>


    display:flex;
    justify-content:space-between;
    align-items:center;


    width:100%;
                <div class="home-article-item">


    margin-bottom:2px;
                    <div class="home-article-thumb">
                        [[File:Naga Forest Conservation.jpg|48px|link=Naga Forest Conservation|alt=Naga Forest Conservation]]
                    </div>


}
                    <div class="home-article-copy">


/* Left side */
                        <div class="home-article-title">
                            [[Naga Forest Conservation|Naga Forest Conservation]]
                        </div>


.section-title-left{
                        <div class="home-article-place">
                            Northeast India
                        </div>


    display:flex;
                    </div>
    align-items:center;


    gap:16px;
                </div>


    flex:1;


}
                <div class="home-article-item">


/* Remove MediaWiki image wrappers */
                    <div class="home-article-thumb">
                        [[File:Arctic Sea Ice Observation.jpg|48px|link=Arctic Sea Ice Observation|alt=Arctic Sea Ice Observation]]
                    </div>


.section-title-left span,
                    <div class="home-article-copy">
.section-title-left a{


    display:flex;
                        <div class="home-article-title">
    align-items:center;
                            [[Arctic Sea Ice Observation|Arctic Sea Ice Observation]]
                        </div>


    margin:0;
                        <div class="home-article-place">
    padding:0;
                            Arctic
                        </div>


}
                    </div>


/* Globe icon */
                </div>


.section-title-left .mw-file-element,
.section-title-left img,
.section-icon,
.section-icon img{


    width:32px !important;
                <div class="home-article-item">
    height:32px !important;


    min-width:32px;
                    <div class="home-article-thumb">
    min-height:32px;
                        [[File:Guarani Atlantic Forest Knowledge.jpg|48px|link=Guarani Atlantic Forest Knowledge|alt=Guarani Atlantic Forest Knowledge]]
                    </div>


    display:block;
                    <div class="home-article-copy">


    object-fit:contain;
                        <div class="home-article-title">
                            [[Guarani Atlantic Forest Knowledge|Guarani Atlantic Forest Knowledge]]
                        </div>


    margin:0;
                        <div class="home-article-place">
    padding:0;
                            Brazil
                        </div>


    border:none;
                    </div>
    box-shadow:none;


}
                </div>


/* Heading */


.section-heading{
                <div class="home-article-item">


    margin:0;
                    <div class="home-article-thumb">
    padding:0;
                        [[File:Traditional Fire Management.jpg|48px|link=Traditional Fire Management|alt=Traditional Fire Management]]
                    </div>


    font-family:Georgia,"Times New Roman",serif;
                    <div class="home-article-copy">
    font-size:46px;
    font-weight:500;
    line-height:1;


    color:var(--eko-green);
                        <div class="home-article-title">
                            [[Traditional Fire Management|Traditional Fire Management]]
                        </div>


}
                        <div class="home-article-place">
                            Australia
                        </div>


/* Remove default MediaWiki heading spacing */
                    </div>


.section-heading::before,
                </div>
.section-heading::after{


    display:none !important;
            </div>
    content:none !important;


}
            <div class="home-browse-articles">
                [[Articles|Browse all articles →]]
            </div>


.section-title-left h2{
        </div>


    margin:0 !important;
    padding:0 !important;
    border:none !important;


}
        <div class="home-community-card">


/* Right side */
            <div class="home-community-title">


.section-title-right{
                <span class="home-community-symbol">
                    ♧
                </span>


    margin-left:auto;
                Communities &amp; Contributors


    white-space:nowrap;
            </div>


    font-size:18px;
            <div class="home-community-text">
    font-weight:600;
                Researchers, students, elders, community knowledge holders, artists, and educators contribute to Ekologos.
            </div>


    display:flex;
            <div class="home-community-people">
    align-items:center;


}
                <span>♙</span>
                <span>♙</span>
                <span>♙</span>
                <span>♙</span>
                <span>♙</span>
                <span>♙</span>


.section-title-right a{
            </div>


    color:var(--eko-green);
            <div class="home-community-button">
    text-decoration:none;
                [[Contribute|Contribute to Ekologos Wiki]]
            </div>


    transition:.25s;
        </div>


}
    </div>


.section-title-right a:hover{


     color:var(--eko-accent);
     <div class="home-about-project">
    text-decoration:none;


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


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


@media (max-width:768px){
            <div class="home-info-content">


    .section-header{
                <div class="home-info-title">
                    About Ekologos Wiki
                </div>


        flex-direction:column;
                <div class="home-info-text">
        align-items:flex-start;
                    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.
        gap:20px;
                </div>


    }
                <div class="home-info-link">
                    [[About|Learn more about Ekologos Wiki →]]
                </div>


    .section-heading{
            </div>


         font-size:34px;
         </div>


    }


    .section-title-right{
        <div class="home-project-box">


        margin-left:0;
            <div class="home-info-icon">
                [[File:Globe.png|70px|link=|alt=The Ekologos Project]]
            </div>


    }
            <div class="home-info-content">


}
                <div class="home-info-title">
                    The Ekologos Project
                </div>


@media (max-width:480px){
                <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>


    .section-heading{
                <div class="home-info-link">
                    [[Ekologos Project|Visit the Project Portal →]]
                </div>


        font-size:28px;
            </div>


    }
        </div>


     .section-title-left .mw-file-element,
     </div>
    .section-title-left img{


        width:26px !important;
        height:26px !important;


        min-width:26px;
    <div class="home-footer">
        min-height:26px;


    }
        <div class="home-footer-brand">


    .section-title-right{
            [[File:Globe.png|42px|link=Main Page|alt=Ekologos Wiki]]


        font-size:16px;
            <div class="home-footer-brand-text">


    }
                <div class="home-footer-brand-main">
                    EKOLOGOS
                </div>


}
                <div class="home-footer-brand-small">
                    WIKI
                </div>


/* ==========================================================
            </div>
  GRID
========================================================== */


.homepage-grid{
        </div>
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:34px;
}


/* ==========================================================
  CARDS
========================================================== */


.eko-card{
        <div class="home-footer-links">
    width:100%;
    display:block;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:.3s;
}


.eko-card:hover{
            [[About|About]]


    transform:translateY(-6px);
            [[Contribute|How to Contribute]]


    box-shadow:var(--shadow-lg);
            [[Community Guidelines|Community Guidelines]]


}
            [[Contact|Contact]]


.eko-card img,
            [[Privacy policy|Privacy]]
.eko-card .mw-file-element{


    width:100%;
        </div>
    height:260px;


    object-fit:cover;


    display:block;
        <div class="home-footer-social">


    transition:transform .35s ease;
            <span>f</span>
            <span>◎</span>
            <span>▶</span>


}
        </div>


.eko-card:hover img,
    </div>
.eko-card:hover .mw-file-element{


    transform:scale(1.05);
</div>
 
}
 
.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;
    }
}

Revision as of 14:06, 24 July 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=245"
Powered by MediaWiki