Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Main Page - styles/styles.css: Difference between revisions

Template page
Created page with "Simplified BurnZero-style CSS for TemplateStyles: .main-header { text-align: center; padding: 2rem 1rem; background: #f8f9fa; border-radius: 8px; margin-bottom: 1rem; border: 1px solid #dee2e6; } .main-header__tagline { font-size: 1.5rem; color: #2d5016; margin-bottom: 0.5rem; font-weight: bold; } .main-header__subtitle { color: #6c757d; font-size: 1rem; } .main-navigation { display: grid; grid-template-col..."
 
No edit summary
Line 1: Line 1:
/* Simplified BurnZero-style CSS for TemplateStyles */
.main-header {
.main-header {
     text-align: center;
     text-align: center;
Line 22: Line 20:
}
}


.main-navigation {
.home-grid {
     display: grid;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 1rem;
     grid-gap: 0.625rem;
     margin: 1rem 0;
     margin-top: 2.4rem;
}
}


.nav-section {
.home-card {
     display: flex;
     position: relative;
     background: #f8f9fa;
     background: #f8f9fa;
    padding: 1rem;
     border-radius: 8px;
     border-radius: 8px;
     border-left: 4px solid #2d5016;
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04);
     border: 1px solid #dee2e6;
     font-size: 0.875rem;
    min-height: 120px;
}
}


.nav-section__icon {
.home-card--col2 {
    font-size: 2rem;
     grid-column: span 2;
    margin-right: 1rem;
     min-width: 3rem;
}
}


.nav-section__content h3 {
.home-card--button {
     margin: 0 0 0.5rem 0;
     overflow: hidden;
     color: #2d5016;
    padding: 0;
     background: #242a31;
}
}


.nav-links {
.home-card__background {
     font-size: 0.9rem;
     position: absolute;
     line-height: 1.4;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
     background: #242a31;
    border-radius: 8px;
}
}


.home-grid {
.home-card__background img {
     display: grid;
     width: 100%;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     height: 100%;
     gap: 1rem;
     object-fit: cover;
     margin-top: 2rem;
     transition: transform 0.2s ease;
}
}


.home-card {
.home-card:hover .home-card__background img {
    background: #f8f9fa;
     transform: scale(1.1);
    border: 1px solid #dee2e6;
    border-radius: 8px;
     padding: 1rem;
}
}


.home-card__label {
.home-card__foreground {
     font-size: 0.875rem;
     position: absolute;
     color: #6c757d;
    top: 0;
     margin-bottom: 0.5rem;
    left: 0;
     text-transform: uppercase;
     right: 0;
     bottom: 0;
     display: flex;
    align-items: center;
    padding: 0 15px;
    color: #fff;
     font-weight: 500;
     font-weight: 500;
}
     background: linear-gradient(to right, rgba(0,0,0,0.7), transparent);
 
.home-card__header {
    margin: 0 0 1rem 0;
    color: #2d5016;
     font-size: 1.25rem;
}
 
.home-card__body {
    color: #495057;
    line-height: 1.5;
    margin-bottom: 1rem;
}
 
.home-card__links {
    font-size: 0.875rem;
    color: #6c757d;
}
 
/* Mobile responsiveness */
@media (max-width: 768px) {
    .main-navigation {
        grid-template-columns: 1fr;
    }
   
    .nav-section {
        flex-direction: column;
        text-align: center;
    }
   
    .nav-section__icon {
        margin: 0 0 0.5rem 0;
    }
   
    .home-grid {
        grid-template-columns: 1fr;
    }
}
}

Revision as of 15:37, 22 August 2025

.main-header {
    text-align: center;
    padding: 2rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
}

.main-header__tagline {
    font-size: 1.5rem;
    color: #2d5016;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.main-header__subtitle {
    color: #6c757d;
    font-size: 1rem;
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 0.625rem;
    margin-top: 2.4rem;
}

.home-card {
    position: relative;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04);
    font-size: 0.875rem;
    min-height: 120px;
}

.home-card--col2 {
    grid-column: span 2;
}

.home-card--button {
    overflow: hidden;
    padding: 0;
    background: #242a31;
}

.home-card__background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #242a31;
    border-radius: 8px;
}

.home-card__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.home-card:hover .home-card__background img {
    transform: scale(1.1);
}

.home-card__foreground {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 15px;
    color: #fff;
    font-weight: 500;
    background: linear-gradient(to right, rgba(0,0,0,0.7), transparent);
}