danvics/debrid-services-comparison
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improved alignment

Browse source
This commit is contained in:
fynks 2025-08-25 10:48:23 +05:00
parent 3a4ef85947
commit 1d386c4779
2 changed files with 70 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
dist/css/styles.css vendored
View file

@ -247,6 +247,18 @@ a:hover {
gap: var(--space-4xl);
}
/* Header right aligned actions */
.header-actions {
display: flex;
align-items: center;
gap: var(--space-lg);
margin-left: auto;
}
@media (max-width: 900px){
.header-actions { gap: var(--space-md); }
}
.site-title {
display: flex;
flex-shrink: 0; /* Prevent shrinking */
@ -1060,6 +1072,39 @@ table {
min-width: 600px;
}
/* Table toolbar */
.table-toolbar {
display: flex;
justify-content: space-between;
gap: var(--space-xl);
flex-wrap: wrap;
margin-bottom: var(--space-xl);
align-items: center;
}
/* Resources enhancements */
.enhanced-resources .resource-category.elevated { position: relative; border: 1px solid var(--border-primary); box-shadow: var(--shadow-md); }
.resource-list.cards-3 { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); display: grid; }
.resource-item.accent-hover { position: relative; overflow: hidden; }
.resource-item.accent-hover::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.08)); opacity:0; transition:opacity var(--transition-fast); }
.resource-item.accent-hover:hover::after { opacity:1; }
.resource-item.static { cursor: default; background: var(--bg-secondary); }
/* Footer improvements */
.footer-content.improved { position: relative; }
.newsletter-form { display:flex; gap: var(--space-sm); margin-top: var(--space-2xl); }
.newsletter-form input { flex:1; padding: var(--space-sm) var(--space-md); border:1px solid var(--border-primary); background: var(--bg-primary); border-radius: var(--radius-md); font-size: var(--text-sm); }
.newsletter-form button { padding: var(--space-sm) var(--space-lg); border:1px solid var(--border-primary); background: var(--primary); color:#fff; font-size: var(--text-sm); border-radius: var(--radius-md); cursor: not-allowed; opacity:.5; }
.social-links { margin-top: var(--space-xl); display:flex; gap: var(--space-md); }
.social-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background: var(--bg-primary); border:1px solid var(--border-primary); border-radius: var(--radius-full); color: var(--text-secondary); transition: all var(--transition-fast); }
.social-btn:hover { background: var(--primary); color:#fff; border-color: var(--primary); transform: translateY(-2px); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Compact on small screens adjust toolbar */
@media (max-width:600px){
.table-toolbar { flex-direction: column; align-items: stretch; }
}
th,
td {
padding: var(--space-lg) var(--space-xl);

50
dist/index.html vendored
View file

@ -91,12 +91,6 @@
</svg>
Debrid Comparison
</a>
<button class="nav-toggle" id="navToggle" aria-label="Open navigation menu"
aria-controls="primary-navigation" aria-expanded="false" type="button">
<span class="nav-toggle-bar"></span>
<span class="nav-toggle-bar"></span>
<span class="nav-toggle-bar"></span>
</button>
<nav id="primary-navigation" class="header-nav" aria-label="Main navigation" aria-hidden="true">
<a href="#what-are-debrid" class="nav-link">Intro</a>
<a href="#pricing" class="nav-link">Pricing</a>
@ -106,16 +100,23 @@
<a href="#speed-test" class="nav-link">Speed Test</a>
<a href="#live-status" class="nav-link">Status</a>
<a href="#resources" class="nav-link">Resources</a>
</nav>
<button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode" type="button">
<svg class="sun-icon" role="img" aria-hidden="true">
<div class="header-actions">
<button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode" type="button">
<svg class="sun-icon" role="img" aria-hidden="true">
<use href="#icon-sun" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<svg class="moon-icon" role="img" aria-hidden="true">
<use href="#icon-moon" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
</button>
<button class="nav-toggle" id="navToggle" aria-label="Open navigation menu"
aria-controls="primary-navigation" aria-expanded="false" type="button">
<span class="nav-toggle-bar"></span>
<span class="nav-toggle-bar"></span>
<span class="nav-toggle-bar"></span>
</button>
</div>
</div>
</div>
</header>
@ -662,38 +663,38 @@
guides, and communities</p>
</div>
<div class="resources-categories">
<div class="resource-category">
<div class="resources-categories enhanced-resources">
<div class="resource-category elevated">
<h3>
<svg class="resource-category-icon" role="img" aria-hidden="true">
<use href="#icon-tools" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
Tools and Integrations
</h3>
<div class="resource-list">
<a href="https://github.com/debridmediamanager/awesome-debrid" class="resource-item"
<div class="resource-list cards-3">
<a href="https://github.com/debridmediamanager/awesome-debrid" class="resource-item accent-hover"
target="_blank" rel="noopener noreferrer">
<strong>Awesome-Debrid</strong>
<span>Curated list of debrid-compatible apps, browser extensions, and automation
tools</span>
</a>
<a href="https://github.com/debridmediamanager/debrid-media-manager"
class="resource-item" target="_blank" rel="noopener noreferrer">
class="resource-item accent-hover" target="_blank" rel="noopener noreferrer">
<strong>Debrid Media Manager</strong>
<span>Easily download movies and TV shows directly to your Debrid library</span>
</a>
<a href="https://github.com/rogerfar/rdt-client" class="resource-item"
<a href="https://github.com/rogerfar/rdt-client" class="resource-item accent-hover"
target="_blank" rel="noopener noreferrer">
<strong>Real-Debrid Torrent Client</strong>
<span>Web interface to manage your torrents on Real-Debrid, AllDebrid,
Premiumize TorBox or DebridLink</span>
</a>
<a href="https://github.com/g0ldyy/comet" class="resource-item" target="_blank"
<a href="https://github.com/g0ldyy/comet" class="resource-item accent-hover" target="_blank"
rel="noopener noreferrer">
<strong>Comet</strong>
<span>Stremio's torrent/debrid search add-on</span>
</a>
<a href="https://github.com/jackett/jackett" class="resource-item" target="_blank"
<a href="https://github.com/jackett/jackett" class="resource-item accent-hover" target="_blank"
rel="noopener noreferrer">
<strong>Jackett + Prowlarr</strong>
<span>Indexer proxies that work seamlessly with debrid services for
@ -701,26 +702,25 @@
</a>
</div>
</div>
<div class="resource-category">
<div class="resource-category elevated">
<h3>
<svg class="resource-category-icon" role="img" aria-hidden="true">
<use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
Community and Support
</h3>
<div class="resource-list">
<div class="resource-item">
<div class="resource-list cards-3">
<div class="resource-item static">
<strong>Reddit</strong>
<span>Active discussions on r/Debrid, r/Piracy and service-specific
threads</span>
</div>
<div class="resource-item">
<div class="resource-item static">
<strong>Discord</strong>
<span>Many services offer official Discord servers for real-time support and
status updates</span>
</div>
<div class="resource-item">
<div class="resource-item static">
<strong>GitHub Issues</strong>
<span>Report inaccuracies or suggest improvements here — this project thrives on
community input!</span>
@ -746,7 +746,7 @@
<footer class="site-footer" role="contentinfo">
<div class="container">
<div class="content-container">
<div class="footer-content">
<div class="footer-content improved">
<div class="footer-section">
<div class="footer-brand">
<svg class="footer-logo" viewBox="0 0 24 24" fill="none" stroke="currentColor"