master @ 90 LINES
[ HISTORY ] [ UP ]
┌─ SCSS ─────────────────────────────────────────────────────────────────────┐
│ .site-footer { │
│ margin-top: auto; │
│ padding: 40px 20px 30px; │
│ background-color: var(--bg-secondary); │
│ border-top: 1px solid var(--border-color); │
│ } │
│ │
│ .github-icon { │
│ width: 16px; │
│ height: 16px; │
│ display: flex; │
│ align-items: center; │
│ gap: 6px; │
│ } │
│ │
│ .footer-content { │
│ max-width: 1200px; │
│ margin: 0 auto; │
│ display: flex; │
│ flex-direction: column; │
│ align-items: center; │
│ gap: 20px; │
│ } │
│ │
│ .footer-links { │
│ display: flex; │
│ align-items: center; │
│ gap: 12px; │
│ flex-wrap: wrap; │
│ justify-content: center; │
│ │
│ a { │
│ color: var(--text-secondary); │
│ text-decoration: none; │
│ font-weight: 500; │
│ transition: color 0.2s ease; │
│ │
│ &:hover { │
│ color: var(--highlight-color); │
│ } │
│ } │
│ │
│ .separator { │
│ color: var(--border-color); │
│ user-select: none; │
│ } │
│ } │
│ │
│ .footer-legal { │
│ display: flex; │
│ flex-direction: column; │
│ align-items: center; │
│ gap: 8px; │
│ text-align: center; │
│ │
│ p { │
│ margin: 0; │
│ color: var(--text-secondary); │
│ font-size: 0.9em; │
│ line-height: 1.5; │
│ } │
│ │
│ .copyright { │
│ font-weight: 500; │
│ } │
│ │
│ .disclaimer { │
│ font-size: 0.85em; │
│ color: var(--text-tertiary, var(--text-secondary)); │
│ max-width: 600px; │
│ } │
│ } │
│ │
│ @media (max-width: 768px) { │
│ .site-footer { │
│ padding: 30px 20px 25px; │
│ } │
│ │
│ .footer-links { │
│ font-size: 0.95em; │
│ gap: 8px; │
│ } │
│ │
│ .footer-legal { │
│ .disclaimer { │
│ font-size: 0.8em; │
│ } │
│ } │
│ } │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ SCSS ───────────────────────────────┐
│ .site-footer { │
│ margin-top: auto; │
│ padding: 40px 20px 30px; │
│ background-color: var(--bg-secondary); │
│ border-top: 1px solid var(--border-color); │
│ } │
│ │
│ .github-icon { │
│ width: 16px; │
│ height: 16px; │
│ display: flex; │
│ align-items: center; │
│ gap: 6px; │
│ } │
│ │
│ .footer-content { │
│ max-width: 1200px; │
│ margin: 0 auto; │
│ display: flex; │
│ flex-direction: column; │
│ align-items: center; │
│ gap: 20px; │
│ } │
│ │
│ .footer-links { │
│ display: flex; │
│ align-items: center; │
│ gap: 12px; │
│ flex-wrap: wrap; │
│ justify-content: center; │
│ │
│ a { │
│ color: var(--text-secondary); │
│ text-decoration: none; │
│ font-weight: 500; │
│ transition: color 0.2s ease; │
│ │
│ &:hover { │
│ color: var(--highlight-color); │
│ } │
│ } │
│ │
│ .separator { │
│ color: var(--border-color); │
│ user-select: none; │
│ } │
│ } │
│ │
│ .footer-legal { │
│ display: flex; │
│ flex-direction: column; │
│ align-items: center; │
│ gap: 8px; │
│ text-align: center; │
│ │
│ p { │
│ margin: 0; │
│ color: var(--text-secondary); │
│ font-size: 0.9em; │
│ line-height: 1.5; │
│ } │
│ │
│ .copyright { │
│ font-weight: 500; │
│ } │
│ │
│ .disclaimer { │
│ font-size: 0.85em; │
│ color: var(--text-tertiary, var(--text-s │
│ econdary)); │
│ max-width: 600px; │
│ } │
│ } │
│ │
│ @media (max-width: 768px) { │
│ .site-footer { │
│ padding: 30px 20px 25px; │
│ } │
│ │
│ .footer-links { │
│ font-size: 0.95em; │
│ gap: 8px; │
│ } │
│ │
│ .footer-legal { │
│ .disclaimer { │
│ font-size: 0.8em; │
│ } │
│ } │
│ } │
└──────────────────────────────────────────────┘
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET