refactor(footer): simplify footer structure and improve responsiveness
This commit is contained in:
fynks
parent
6e2af5717e
commit
4a5a6fd53e
2 changed files with 87 additions and 201 deletions
258
dist/css/styles.css
vendored
258
dist/css/styles.css
vendored
|
|
@ -3137,41 +3137,21 @@ select:hover {
|
|||
.site-footer {
|
||||
background: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border-primary);
|
||||
padding: var(--space-7xl) 0 var(--space-4xl);
|
||||
padding: var(--space-5xl) 0 var(--space-3xl);
|
||||
margin-top: auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.footer-grid-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, var(--border-primary) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, var(--border-primary) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
opacity: 0.3;
|
||||
mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.site-footer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--primary), transparent);
|
||||
opacity: 0.5;
|
||||
content: none;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1fr 1fr 1fr;
|
||||
gap: var(--space-4xl);
|
||||
margin-bottom: var(--space-5xl);
|
||||
gap: var(--space-3xl);
|
||||
margin-bottom: var(--space-4xl);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -3183,7 +3163,7 @@ select:hover {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@media (max-width: 768px) {
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-4xl);
|
||||
|
|
@ -3199,33 +3179,23 @@ select:hover {
|
|||
.footer-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-lg);
|
||||
gap: var(--space-md);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.footer-logo-wrapper {
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: var(--primary);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
filter: drop-shadow(0 2px 8px rgba(99, 102, 241, .3));
|
||||
}
|
||||
|
||||
.footer-logo-glow {
|
||||
position: absolute;
|
||||
inset: -12px;
|
||||
background: radial-gradient(circle, rgba(99, 102, 241, .12) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.footer-brand-text {
|
||||
|
|
@ -3236,12 +3206,9 @@ select:hover {
|
|||
|
||||
.footer-brand h4 {
|
||||
margin: 0;
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: var(--font-extrabold);
|
||||
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-size: var(--text-xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
|
|
@ -3257,43 +3224,12 @@ select:hover {
|
|||
.footer-description {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.7;
|
||||
line-height: 1.6;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.footer-stats {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer-stat {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-secondary);
|
||||
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.footer-stat:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, .15);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.footer-stat svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-section h5 {
|
||||
margin: 0 0 var(--space-xl);
|
||||
margin: 0 0 var(--space-md);
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--text-primary);
|
||||
|
|
@ -3302,7 +3238,13 @@ select:hover {
|
|||
}
|
||||
|
||||
.footer-section h5::after {
|
||||
display: none;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 52px;
|
||||
height: 2px;
|
||||
margin-top: var(--space-xs);
|
||||
background: var(--primary);
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
|
|
@ -3311,7 +3253,7 @@ select:hover {
|
|||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.footer-links li {
|
||||
|
|
@ -3321,13 +3263,13 @@ select:hover {
|
|||
.footer-links a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
gap: var(--space-xs);
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.5;
|
||||
padding: var(--space-xs) 0;
|
||||
transition: color var(--transition-fast), transform var(--transition-fast);
|
||||
padding: 2px 0;
|
||||
transition: color var(--transition-fast);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -3344,7 +3286,6 @@ select:hover {
|
|||
|
||||
.footer-links a:hover {
|
||||
color: var(--primary);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.footer-links a:hover::before {
|
||||
|
|
@ -3356,7 +3297,7 @@ select:hover {
|
|||
}
|
||||
|
||||
.footer-bottom {
|
||||
padding-top: var(--space-4xl);
|
||||
padding-top: var(--space-2xl);
|
||||
border-top: 1px solid var(--border-primary);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -3377,6 +3318,39 @@ select:hover {
|
|||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.footer-section,
|
||||
.footer-brand-section,
|
||||
.footer-brand-text,
|
||||
.footer-left,
|
||||
.footer-right {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-brand,
|
||||
.footer-links,
|
||||
.footer-copyright,
|
||||
.footer-meta {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-links a::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-disclaimer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-section h5::after {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -3424,7 +3398,6 @@ select:hover {
|
|||
margin: 0;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
|
@ -3447,10 +3420,10 @@ select:hover {
|
|||
gap: var(--space-xs);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.last-updated svg {
|
||||
|
|
@ -3459,24 +3432,20 @@ select:hover {
|
|||
}
|
||||
|
||||
.github-link {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: var(--text-secondary);
|
||||
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.github-link:hover {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: #fff;
|
||||
transform: translateY(-2px) scale(1.05);
|
||||
box-shadow: 0 4px 16px rgba(99, 102, 241, .3);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.github-link:focus-visible {
|
||||
|
|
@ -3537,10 +3506,6 @@ select:hover {
|
|||
grid-template-columns:repeat(2, 1fr); gap:var(--space-xl)
|
||||
}
|
||||
|
||||
.footer-brand h3 {
|
||||
font-size:var(--text-lg)
|
||||
}
|
||||
|
||||
.important-notes-grid {
|
||||
grid-template-columns:1fr
|
||||
}
|
||||
|
|
@ -3652,27 +3617,20 @@ select:hover {
|
|||
}
|
||||
|
||||
.footer-content {
|
||||
gap:var(--space-lg)
|
||||
}
|
||||
|
||||
.site-footer .footer-section {
|
||||
background:var(--bg-primary); border:1px solid var(--border-primary); border-radius:var(--radius-lg); padding:var(--space-xl)
|
||||
grid-template-columns:1fr;
|
||||
gap:var(--space-xl)
|
||||
}
|
||||
|
||||
.site-footer .footer-section h4, .site-footer .footer-section h5 {
|
||||
margin-top:0; margin-bottom:var(--space-md); text-align:center
|
||||
margin-top:0; margin-bottom:var(--space-sm); text-align:center
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
text-align:center; padding-bottom:0; border-bottom:0; margin-bottom:var(--space-md)
|
||||
text-align:center; margin-bottom:var(--space-sm)
|
||||
}
|
||||
|
||||
.footer-description {
|
||||
margin-bottom:var(--space-md)
|
||||
}
|
||||
|
||||
.footer-stats {
|
||||
justify-content:center
|
||||
margin-bottom:0
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
|
|
@ -3684,15 +3642,15 @@ select:hover {
|
|||
}
|
||||
|
||||
.footer-links a {
|
||||
display:block; padding:10px 12px; border-radius:var(--radius-md); background:transparent; border:1px solid transparent; text-decoration:none
|
||||
display:inline-flex; padding:4px 0; border-radius:0; background:transparent; border:0; text-decoration:none
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
background:var(--bg-secondary); border-color:var(--border-primary)
|
||||
background:transparent; border-color:transparent
|
||||
}
|
||||
|
||||
.footer-links a:active {
|
||||
background:var(--bg-tertiary)
|
||||
background:transparent
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
|
|
@ -3775,34 +3733,6 @@ select:hover {
|
|||
position:sticky; left:0; z-index:101; box-shadow:1px 0 3px -1px rgba(0, 0, 0, .1)
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
grid-template-columns:1fr; gap:var(--space-lg)
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
text-align:center; padding-bottom:0; border-bottom:0; margin-bottom:var(--space-md)
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
justify-content:center
|
||||
}
|
||||
|
||||
.footer-links h4 {
|
||||
text-align:center; margin-bottom:var(--space-md)
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
text-align:center
|
||||
}
|
||||
|
||||
.footer-bottom-content {
|
||||
flex-direction:column; align-items:center; text-align:center
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
text-align:center
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
margin-bottom:var(--space-2xl)
|
||||
}
|
||||
|
|
@ -3898,30 +3828,6 @@ select:hover {
|
|||
padding:var(--space-sm) var(--space-md)
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
padding:var(--space-5xl) 0 var(--space-3xl)
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
gap:var(--space-md); margin-bottom:var(--space-3xl)
|
||||
}
|
||||
|
||||
.footer-section h4, .footer-section h5 {
|
||||
margin-bottom:var(--space-lg)
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
padding-top:var(--space-3xl)
|
||||
}
|
||||
|
||||
.footer-bottom-content {
|
||||
gap:var(--space-lg)
|
||||
}
|
||||
|
||||
.footer-meta {
|
||||
gap:var(--space-md)
|
||||
}
|
||||
|
||||
.speed-section {
|
||||
padding:var(--space-2xl) var(--space-sm)
|
||||
}
|
||||
|
|
|
|||
30
dist/index.html
vendored
30
dist/index.html
vendored
|
|
@ -1640,7 +1640,6 @@
|
|||
|
||||
<!-- Footer -->
|
||||
<footer class="site-footer" role="contentinfo">
|
||||
<div class="footer-grid-bg"></div>
|
||||
<div class="container">
|
||||
<div class="content-container">
|
||||
<div class="footer-content">
|
||||
|
|
@ -1651,35 +1650,13 @@
|
|||
stroke-width="2">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
|
||||
</svg>
|
||||
<div class="footer-logo-glow"></div>
|
||||
</div>
|
||||
<div class="footer-brand-text">
|
||||
<h4>Debrid Compare</h4>
|
||||
<p class="footer-tagline">Your Ultimate Comparison Hub</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="footer-description">
|
||||
A comprehensive, community-driven comparison of premium debrid services.
|
||||
Compare pricing, features, and host support to find the best service for your needs.
|
||||
</p>
|
||||
<div class="footer-stats">
|
||||
<div class="footer-stat">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="9" cy="7" r="4"></circle>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
||||
</svg>
|
||||
<span>10 Services</span>
|
||||
</div>
|
||||
<div class="footer-stat">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
|
||||
</svg>
|
||||
<span>450+ Hosts</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
|
|
@ -1757,7 +1734,7 @@
|
|||
<div class="footer-bottom-content">
|
||||
<div class="footer-left">
|
||||
<p class="footer-copyright">
|
||||
© 2025 <strong>Debrid Compare</strong>.
|
||||
© <span id="year"></span> <strong>Debrid Compare</strong>. <br>
|
||||
<span class="made-with">Made with <span class="heart-icon">❤️</span></span>
|
||||
by <a href="https://github.com/fynks" target="_blank" rel="noopener noreferrer">Fynks</a>
|
||||
</p>
|
||||
|
|
@ -1799,6 +1776,9 @@
|
|||
</div>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script>
|
||||
document.getElementById("year").textContent = new Date().getFullYear();
|
||||
</script>
|
||||
<script>
|
||||
// Mobile Navigation Manager - Lightweight & Performance Optimized
|
||||
(function() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue