fix: responsive clamp max-widths for 4K/ultrawide screens
This commit is contained in:
parent
23d5692334
commit
40ee9bbec8
9 changed files with 16 additions and 16 deletions
|
|
@ -3,7 +3,7 @@
|
||||||
═══════════════════════════════════════════════════════ */
|
═══════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
.al-container {
|
.al-container {
|
||||||
max-width: 1200px;
|
max-width: clamp(1000px, 88vw, 2200px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 1.5rem 3rem;
|
padding: 0 1.5rem 3rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-container {
|
.blog-container {
|
||||||
max-width: 1100px;
|
max-width: clamp(900px, 85vw, 2000px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -318,7 +318,7 @@
|
||||||
============================ */
|
============================ */
|
||||||
.post-page-header {
|
.post-page-header {
|
||||||
padding: calc(var(--nav-height) + 3rem) 2rem 2rem;
|
padding: calc(var(--nav-height) + 3rem) 2rem 2rem;
|
||||||
max-width: 1100px;
|
max-width: clamp(900px, 85vw, 2000px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -338,7 +338,7 @@
|
||||||
.post-back:hover { color: var(--accent); }
|
.post-back:hover { color: var(--accent); }
|
||||||
|
|
||||||
.post-page-layout {
|
.post-page-layout {
|
||||||
max-width: 1100px;
|
max-width: clamp(900px, 85vw, 2000px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 2rem 4rem;
|
padding: 0 2rem 4rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
═══════════════════════════════════════════════════════ */
|
═══════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
.changelog-container {
|
.changelog-container {
|
||||||
max-width: 900px;
|
max-width: clamp(700px, 80vw, 1600px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem 1.5rem;
|
padding: 2rem 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-header-content {
|
.post-header-content {
|
||||||
max-width: 1100px;
|
max-width: clamp(900px, 85vw, 2000px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -115,7 +115,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-layout {
|
.post-layout {
|
||||||
max-width: 1100px;
|
max-width: clamp(900px, 85vw, 2000px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 300px;
|
grid-template-columns: 1fr 300px;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
/* ─── RADAR: Live Intelligence Feed ─────────────── */
|
/* ─── RADAR: Live Intelligence Feed ─────────────── */
|
||||||
|
|
||||||
.radar-container {
|
.radar-container {
|
||||||
max-width: 1400px;
|
max-width: clamp(1200px, 90vw, 2400px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 2rem 3rem;
|
padding: 0 2rem 3rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
|
|
||||||
/* --- Section Grid (Landing Pages) --- */
|
/* --- Section Grid (Landing Pages) --- */
|
||||||
.section-grid-container {
|
.section-grid-container {
|
||||||
max-width: 1100px;
|
max-width: clamp(900px, 85vw, 2000px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem 1.5rem 4rem;
|
padding: 2rem 1.5rem 4rem;
|
||||||
}
|
}
|
||||||
|
|
@ -134,7 +134,7 @@
|
||||||
|
|
||||||
/* --- Subpage Content (Placeholder) --- */
|
/* --- Subpage Content (Placeholder) --- */
|
||||||
.subpage-content {
|
.subpage-content {
|
||||||
max-width: 900px;
|
max-width: clamp(700px, 80vw, 1600px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem 1.5rem 4rem;
|
padding: 2rem 1.5rem 4rem;
|
||||||
}
|
}
|
||||||
|
|
@ -191,7 +191,7 @@
|
||||||
|
|
||||||
/* --- Breadcrumb --- */
|
/* --- Breadcrumb --- */
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
max-width: 1100px;
|
max-width: clamp(900px, 85vw, 2000px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: calc(var(--nav-height) + 1.5rem) 1.5rem 0;
|
padding: calc(var(--nav-height) + 1.5rem) 1.5rem 0;
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
|
|
|
||||||
|
|
@ -117,7 +117,7 @@ a:hover { color: #fff; text-shadow: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-container {
|
.nav-container {
|
||||||
max-width: 1400px;
|
max-width: clamp(1200px, 90vw, 2400px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 2rem;
|
padding: 0 2rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -941,7 +941,7 @@ a:hover { color: #fff; text-shadow: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-container {
|
.section-container {
|
||||||
max-width: 1200px;
|
max-width: clamp(1000px, 88vw, 2200px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1479,7 +1479,7 @@ a:hover { color: #fff; text-shadow: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-container {
|
.footer-container {
|
||||||
max-width: 1200px;
|
max-width: clamp(1000px, 88vw, 2200px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
<p class="section-header-sub">> The largest classified index of free resources on the internet — 16,000+ assets catalogued, coded, and declassified.</p>
|
<p class="section-header-sub">> The largest classified index of free resources on the internet — 16,000+ assets catalogued, coded, and declassified.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="subpage-content" style="max-width: 1400px; margin: 0 auto; padding: 0 2rem 3rem;">
|
<section class="subpage-content" style="max-width: clamp(1200px, 90vw, 2400px); margin: 0 auto; padding: 0 2rem 3rem;">
|
||||||
<div id="contrabandRoot">
|
<div id="contrabandRoot">
|
||||||
<div class="crt-loading">INITIALISING CONTRABAND DATABASE...</div>
|
<div class="crt-loading">INITIALISING CONTRABAND DATABASE...</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@
|
||||||
<p class="section-header-sub">> Curated dossiers covering resources across 28 sectors. Select a sector to begin.</p>
|
<p class="section-header-sub">> Curated dossiers covering resources across 28 sectors. Select a sector to begin.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="subpage-content" style="max-width: 1400px; margin: 0 auto; padding: 0 2rem 3rem;">
|
<section class="subpage-content" style="max-width: clamp(1200px, 90vw, 2400px); margin: 0 auto; padding: 0 2rem 3rem;">
|
||||||
<div id="awesomelistRoot"></div>
|
<div id="awesomelistRoot"></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue