@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
872 lines (738 loc) • 20.3 kB
CSS
/*
* Footer Module
*
* Layout rules for the footer area. Supports Subgrid, Container Queries and responsive behavior.
* Combines traditional Grid layouts with modern CSS features and Design Tokens.
*/
/**
* Footer Component
*
* Footer components for websites and applications.
* The footer contains additional navigation elements, contact information and legal notices.
*
* @layer components.footer
*
* Footer Types:
* - .footer: Standard Subgrid-Layout (original)
* - .footer-simple: Basic single-row footer
* - .footer-columns: Multi-column layout
* - .footer-stacked: Vertical stacking
* - .footer-split: Left/right split layout
* - .footer-minimal: Minimal single-line footer
*
* Basic Usage:
* <footer class="footer">
* <div class="logo">
* <img src="logo.png" alt="Logo">
* </div>
* <div class="content">
* <div class="section">
* <h4 class="heading">About Us</h4>
* <p>Brief company description</p>
* </div>
* <div class="section">
* <h4 class="heading">Links</h4>
* <ul class="links">
* <li><a href="#" class="link">Home</a></li>
* <li><a href="#" class="link">Products</a></li>
* <li><a href="#" class="link">About</a></li>
* <li><a href="#" class="link">Contact</a></li>
* </ul>
* </div>
* <div class="section">
* <h4 class="heading">Contact</h4>
* <address class="address">
* 123 Example Street<br>
* 12345 Example City<br>
* info@example.com
* </address>
* </div>
* </div>
* <div class="bottom">
* <p class="copyright">© 2023 Company. All rights reserved.</p>
* <div class="social">
* <a href="#" class="social-link"><!-- Social Icon 1 --></a>
* <a href="#" class="social-link"><!-- Social Icon 2 --></a>
* </div>
* </div>
* </footer>
*
* Variants:
* <footer class="footer light">...</footer>
* <footer class="footer dark">...</footer>
* <footer class="footer primary">...</footer>
*
* Minimal Footer:
* <footer class="footer minimal">
* <p class="copyright">© 2023 Company</p>
* <ul class="legal">
* <li><a href="#">Imprint</a></li>
* <li><a href="#">Privacy</a></li>
* <li><a href="#">Terms</a></li>
* </ul>
* </footer>
*/
@layer tokens {
:root {
/* Footer spacing */
--footer-padding: var(--space-8) var(--space-4);
--footer-padding-compact: var(--space-6) var(--space-3);
--footer-padding-spacious: var(--space-12) var(--space-6);
--footer-gap: var(--space-6);
--footer-gap-compact: var(--space-4);
--footer-gap-spacious: var(--space-8);
--footer-section-gap: var(--space-4);
/* Footer colors */
--footer-bg: var(--color-neutral-50);
--footer-text: var(--color-neutral-700, #374151);
--footer-heading: var(--color-neutral-900, #111827);
--footer-link: var(--color-primary-600, #2563eb);
--footer-link-hover: var(--color-primary-700, #1d4ed8);
--footer-border: var(--color-neutral-200, #e5e7eb);
/* Footer typography */
--footer-font-size: var(--text-sm, 0.875rem);
--footer-line-height: 1%.6;
--footer-heading-size: var(--text-base);
--footer-heading-weight: var(--font-semibold, 600);
--footer-link-weight: var(--font-medium, 500);
/* Footer layout */
--footer-max-width: var(--container-7xl);
--footer-columns: 4;
--footer-column-gap: var(--space-8);
--footer-min-height: auto;
/* Footer themes */
&[data-theme="dark"],
&.theme-dark {
--footer-bg: var(--color-neutral-900, #111827);
--footer-text: var(--color-neutral-300, #d1d5db);
--footer-heading: var(--color-neutral-100, #f3f4f6);
--footer-link: var(--color-primary-400);
--footer-link-hover: var(--color-primary-300);
--footer-border: var(--color-neutral-700, #374151);
}
&[data-theme="primary"],
&.theme-primary {
--footer-bg: var(--color-primary-900);
--footer-text: var(--color-primary-100, #dbeafe);
--footer-heading: var(--color-white, #fff);
--footer-link: var(--color-primary-200);
--footer-link-hover: var(--color-white, #fff);
--footer-border: var(--color-primary-700, #1d4ed8);
}
&[data-theme="minimal"],
&.theme-minimal {
--footer-bg: transparent;
--footer-text: var(--color-neutral-600);
--footer-heading: var(--color-neutral-800, #1f2937);
--footer-link: var(--color-neutral-700, #374151);
--footer-link-hover: var(--color-neutral-900, #111827);
--footer-border: var(--color-neutral-300, #d1d5db);
--footer-padding: var(--space-4) 0;
}
}
}
@layer components {
/* Base footer styles for all footer types */
.footer,
.footer-simple,
.footer-columns,
.footer-stacked,
.footer-split,
.footer-minimal {
background-color: var(--footer-bg);
color: var(--footer-text);
container-type: inline-size;
font-size: var(--footer-font-size);
line-height: var(--footer-line-height, 1.5);
padding: var(--footer-padding);
width: 100%;
/* Typography */
& h1, & h2, & h3, & h4, & h5, & h6,
& .heading {
color: var(--footer-heading);
font-size: var(--footer-heading-size);
font-weight: var(--footer-heading-weight);
margin: 0 0 var(--footer-section-gap) 0;
}
& p {
margin: 0 0 var(--space-3) 0;
&:last-child {
margin-bottom: 0%;
}
}
/* Links */
& a,
& .link {
color: var(--footer-link);
font-weight: var(--footer-link-weight);
text-decoration: none;
transition: color 0.2s ease;
&:hover,
&:focus {
color: var(--footer-link-hover);
text-decoration: underline;
}
&:focus {
outline: 2px solid var(--footer-link);
outline-offset: 2px;
}
}
/* Lists */
& ul, & ol,
& .links {
list-style: none;
margin: 0;
padding: 0;
& li {
margin-bottom: var(--space-2);
&:last-child {
margin-bottom: 0%;
}
}
}
/* Address */
& .address {
color: var(--footer-text);
font-style: normal;
line-height: 1.5;
}
/* Utility modifiers */
&.compact {
padding: var(--footer-padding-compact);
}
&.spacious {
padding: var(--footer-padding-spacious);
}
/* Text alignment utilities */
&.center {
text-align: center;
}
&.left {
text-align: left;
}
&.right {
text-align: right;
}
}
/* Original Subgrid Footer Layout */
.footer {
border-top: 1px solid var(--footer-border);
display: grid;
gap: var(--space-4);
grid-column: span 12;
grid-template-columns: subgrid;
grid-template-rows: auto;
/* Logo area */
& .logo {
grid-column: span 3;
& img {
height: auto;
max-width: 15%0px;
}
}
/* Content areas */
& .content {
display: grid;
gap: var(--space-6);
grid-column: span 9;
grid-template-columns: repeat(3, 1fr);
}
/* Sections */
& .section {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* Bottom area */
& .bottom {
align-items: center;
border-top: 1px solid var(--footer-border);
display: flex;
grid-column: span 12;
justify-content: space-between;
margin-top: var(--space-4);
padding-top: var(--space-4);
}
/* Copyright */
& .copyright {
color: var(--footer-text);
font-size: var(--text-sm, 0.875rem);
margin: 0;
}
/* Social Media */
& .social {
display: flex;
gap: var(--space-3);
& .social-link {
align-items: center;
background-color: var(--color-neutral-100, #f3f4f6);
border-radius: 50px;
color: var(--color-neutral-600);
display: flex;
height: 2rem;
justify-content: center;
transition: background-color 150ms ease, color 150ms ease;
width: 2rem;
&:hover {
background-color: var(--color-primary, #3b82f6);
color: white;
}
}
}
/* Legal links */
& .legal {
display: flex;
gap: var(--space-4);
& a {
color: var(--footer-text);
font-size: var(--text-sm, 0.875rem);
&:hover {
color: var(--footer-link-hover);
}
}
}
/* Theme variants for original footer */
&.light {
background-color: var(--color-white, #fff);
}
&.dark {
background-color: var(--color-neutral-900, #111827);
& .heading {
color: var(--color-white, #fff);
}
& .link, & .address {
color: var(--color-neutral-300, #d1d5db);
}
& .link:hover {
color: var(--color-primary-400);
}
& .bottom {
border-top-color: var(--color-neutral-700, #374151);
}
& .copyright, & .legal a {
color: var(--color-neutral-400, #9ca3af);
}
& .social-link {
background-color: var(--color-neutral-700, #374151);
color: var(--color-neutral-300, #d1d5db);
}
}
&.primary {
background-color: var(--color-primary, #3b82f6);
color: var(--color-white, #fff);
& .heading {
color: var(--color-white, #fff);
}
& .link, & .address {
color: var(--color-primary-100, #dbeafe);
}
& .link:hover {
color: var(--color-white, #fff);
}
& .bottom {
border-top-color: var(--color-primary-600, #2563eb);
}
& .copyright, & .legal a {
color: var(--color-primary-200);
}
& .social-link {
background-color: var(--color-primary-600, #2563eb);
color: var(--color-white, #fff);
}
}
&.minimal {
background-color: transparent;
border-top: none;
padding: var(--space-4) 0;
& .bottom {
border-top: 1px solid var(--color-neutral-200, #e5e7eb);
margin-top: 0%;
padding-top: var(--space-4);
}
}
/* Container Queries for original footer */
@container (width <= 992px) {
& .logo {
grid-column: span 12;
text-align: center;
}
& .content {
grid-column: span 12;
grid-template-columns: repeat(2, 1fr);
}
}
@container (width <= 768px) {
& .bottom {
flex-direction: column;
gap: var(--space-4);
text-align: center;
}
& .legal {
flex-direction: column;
gap: var(--space-2);
}
}
@container (width <= 576px) {
& .content {
grid-template-columns: 1fr;
}
}
}
/* Footer content wrapper for new footer types */
.footer-simple,
.footer-columns,
.footer-stacked,
.footer-split,
.footer-minimal {
& .footer-content {
margin: 0 auto;
max-width: var(--footer-max-width, 1280px);
width: 100%;
}
}
/* Footer Type: Simple */
.footer-simple {
& .footer-content {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--footer-gap);
justify-content: space-between;
@container (width <= 768px) {
flex-direction: column;
gap: var(--footer-gap-compact);
text-align: center;
}
}
& nav ul {
flex-direction: row;
gap: var(--space-4);
@container (width <= 768px) {
flex-direction: column;
gap: var(--space-2);
}
}
}
/* Footer Type: Columns */
.footer-columns {
& .footer-content {
display: grid;
gap: var(--footer-column-gap);
grid-template-columns: repeat(var(--footer-columns), 1fr);
@container (width <= 1024px) {
grid-template-columns: repeat(2, 1fr);
}
@container (width <= 768px) {
gap: var(--footer-gap);
grid-template-columns: 1fr;
}
}
&.cols-2 {
--footer-columns: 2;
@container (width <= 768px) {
& .footer-content {
grid-template-columns: 1fr;
}
}
}
&.cols-3 {
--footer-columns: 3;
@container (width <= 1024px) {
& .footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@container (width <= 768px) {
& .footer-content {
grid-template-columns: 1fr;
}
}
}
&.cols-4 {
--footer-columns: 4;
@container (width <= 1024px) {
& .footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@container (width <= 768px) {
& .footer-content {
grid-template-columns: 1fr;
}
}
}
& section {
& h4 {
border-bottom: 2px solid var(--footer-border);
margin-bottom: var(--space-3);
padding-bottom: var(--space-2);
}
}
}
/* Footer Type: Stacked */
.footer-stacked {
& .footer-content {
display: flex;
flex-direction: column;
gap: var(--footer-gap);
text-align: center;
& > * {
border-bottom: 1px solid var(--footer-border);
padding-bottom: var(--footer-gap);
&:last-child {
border-bottom: none;
padding-bottom: 0%;
}
}
}
& nav ul {
flex-flow: row wrap;
gap: var(--space-4);
justify-content: center;
@container (width <= 768px) {
flex-direction: column;
gap: var(--space-2);
}
}
}
/* Footer Type: Split */
.footer-split {
& .footer-content {
align-items: center;
display: flex;
justify-content: space-between;
@container (width <= 768px) {
flex-direction: column;
gap: var(--footer-gap);
text-align: center;
}
}
& .footer-left {
display: flex;
flex-direction: column;
gap: var(--space-2);
@container (width <= 768px) {
align-items: center;
}
}
& .footer-right {
display: flex;
flex-direction: column;
gap: var(--space-2);
@container (width <= 768px) {
align-items: center;
}
}
& nav ul {
flex-direction: row;
gap: var(--space-4);
@container (width <= 768px) {
flex-direction: column;
gap: var(--space-2);
}
}
}
/* Footer Type: Minimal */
.footer-minimal {
background-color: transparent;
border-top: 1px solid var(--footer-border);
padding: var(--space-4) 0;
& .footer-content {
align-items: center;
display: flex;
justify-content: space-between;
@container (width <= 768px) {
flex-direction: column;
gap: var(--space-3);
text-align: center;
}
}
& nav ul {
flex-direction: row;
gap: var(--space-4);
@container (width <= 768px) {
flex-direction: column;
gap: var(--space-2);
}
}
}
/* Theme variants for all footer types */
.footer-simple,
.footer-columns,
.footer-stacked,
.footer-split,
.footer-minimal {
&.theme-dark {
background-color: var(--color-neutral-900, #111827);
color: var(--color-neutral-300, #d1d5db);
& h1, & h2, & h3, & h4, & h5, & h6 {
color: var(--color-neutral-100, #f3f4f6);
}
& a {
color: var(--color-primary-400);
&:hover,
&:focus {
color: var(--color-primary-300);
}
}
& .footer-content section h4 {
border-bottom-color: var(--color-neutral-700, #374151);
}
&.footer-minimal {
border-top-color: var(--color-neutral-700, #374151);
}
& .footer-stacked .footer-content > * {
border-bottom-color: var(--color-neutral-700, #374151);
}
}
&.theme-primary {
background-color: var(--color-primary-900);
color: var(--color-primary-100, #dbeafe);
& h1, & h2, & h3, & h4, & h5, & h6 {
color: var(--color-white, #fff);
}
& a {
color: var(--color-primary-200);
&:hover,
&:focus {
color: var(--color-white, #fff);
}
}
& .footer-content section h4 {
border-bottom-color: var(--color-primary-700, #1d4ed8);
}
&.footer-minimal {
border-top-color: var(--color-primary-700, #1d4ed8);
}
& .footer-stacked .footer-content > * {
border-bottom-color: var(--color-primary-700, #1d4ed8);
}
}
&.theme-minimal {
background-color: transparent;
color: var(--color-neutral-600);
& h1, & h2, & h3, & h4, & h5, & h6 {
color: var(--color-neutral-800, #1f2937);
}
& a {
color: var(--color-neutral-700, #374151);
&:hover,
&:focus {
color: var(--color-neutral-900, #111827);
}
}
& .footer-content section h4 {
border-bottom-color: var(--color-neutral-300, #d1d5db);
}
&.footer-minimal {
border-top-color: var(--color-neutral-300, #d1d5db);
}
& .footer-stacked .footer-content > * {
border-bottom-color: var(--color-neutral-300, #d1d5db);
}
}
}
}
/* Fallback support for browsers without Container Queries */
@supports not (container-type: inline-size) {
@media (max-width: 1200px) {
.footer-columns.cols-4 .footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (width <= 1024px) {
.footer-columns .footer-content {
grid-template-columns: repeat(2, 1fr);
}
.footer-columns.cols-3 .footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.footer-simple .footer-content {
flex-direction: column;
gap: var(--footer-gap-compact);
text-align: center;
}
.footer-simple nav ul,
.footer-stacked nav ul,
.footer-split nav ul,
.footer-minimal nav ul {
flex-direction: column;
gap: var(--space-2);
}
.footer-columns .footer-content,
.footer-columns.cols-2 .footer-content,
.footer-columns.cols-3 .footer-content,
.footer-columns.cols-4 .footer-content {
grid-template-columns: 1fr;
}
.footer-split .footer-content {
flex-direction: column;
gap: var(--footer-gap);
text-align: center;
}
.footer-split .footer-left,
.footer-split .footer-right {
align-items: center;
}
.footer-minimal .footer-content {
flex-direction: column;
gap: var(--space-3);
text-align: center;
}
}
}
/* Print styles */
@media print {
.footer,
.footer-simple,
.footer-columns,
.footer-stacked,
.footer-split,
.footer-minimal {
background: white ;
border-top: 1px solid var(--color-neutral-900, #111827);
color: var(--color-neutral-900, #111827) ;
& a {
color: var(--color-neutral-900, #111827) ;
text-decoration: underline;
}
& .footer-content {
gap: var(--space-4);
& > * {
break-inside: avoid;
}
}
}
}
/* High contrast mode */
@media (prefers-contrast: more) {
.footer,
.footer-simple,
.footer-columns,
.footer-stacked,
.footer-split,
.footer-minimal {
border-top: 2px solid;
& a {
text-decoration: underline;
}
& .footer-content section h4 {
border-bottom-width: 3px;
}
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.footer,
.footer-simple,
.footer-columns,
.footer-stacked,
.footer-split,
.footer-minimal {
& a {
transition: none;
}
}
}