PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-06 19:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

migrate to utopia fluid type and space scales across all CSS

Browse Source
This commit is contained in:
Pontoporeia
2026-04-07 15:13:48 +02:00
parent ad06bbbcaf
commit f6977384b9
9 changed files with 383 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
public/assets/css/tfe.css
View File

@@ -13,14 +13,14 @@
.tfe-main {
flex: 1;
padding: 2rem 1.5rem 3rem;
padding: var(--space-l) var(--space-m) var(--space-xl);
}
/* Two-column article layout */
.tfe-layout {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 3rem;
gap: var(--space-xl);
width: 100%;
max-width: 1200px;
align-items: start;
@@ -30,13 +30,13 @@
.tfe-left {
display: flex;
flex-direction: column;
gap: 1.5rem;
gap: var(--space-m);
}
/* Author (p) — above title */
.tfe-author {
font-family: var(--font-display);
font-size: 1.54rem;
font-size: var(--step-1);
font-weight: 400;
color: var(--text-primary);
margin: 0;
@@ -46,7 +46,7 @@
/* Title (h1) — primary heading, very large */
.tfe-title {
font-family: var(--font-display);
font-size: 2.42rem;
font-size: var(--step-3);
font-weight: 400;
color: var(--text-primary);
margin: 0;
@@ -58,8 +58,8 @@
article dl {
display: flex;
flex-direction: column;
gap: 0.45rem;
font-size: 1.04rem;
gap: var(--space-3xs);
font-size: var(--step--1);
line-height: 1.4;
margin: 0;
}
@@ -67,7 +67,7 @@ article dl {
/* Each dt/dd pair grouped in a <div> inside <dl> */
article dl > div {
display: flex;
gap: 0.4rem;
gap: var(--space-3xs);
flex-wrap: wrap;
}
@@ -100,7 +100,7 @@ article dl dd a {
/* Synopsis paragraph */
.tfe-synopsis-text {
font-size: 1.04rem;
font-size: var(--step--1);
line-height: 1.7;
color: var(--text-primary);
margin: 0;
@@ -110,7 +110,7 @@ article dl dd a {
.tfe-right {
display: flex;
flex-direction: column;
gap: 1.5rem;
gap: var(--space-m);
}
/* Each file display unit — target <figure> directly inside <aside> */
@@ -144,16 +144,16 @@ aside figure embed {
/* figcaption under media — target <figcaption> inside <aside> */
aside figcaption {
font-size: 0.88rem;
font-size: var(--step--2);
color: var(--text-secondary);
margin: 0.3rem 0 0;
margin: var(--space-3xs) 0 0;
font-style: italic;
}
/* PDF fallback download link */
.tfe-pdf-fallback {
font-size: 0.94rem;
margin: 0.4rem 0 0;
font-size: var(--step--1);
margin: var(--space-3xs) 0 0;
}
.tfe-pdf-fallback a {
@@ -165,10 +165,10 @@ aside figcaption {
/* "Not available" and "no files" notices */
.tfe-restricted,
.tfe-no-files {
font-size: 1.04rem;
font-size: var(--step--1);
color: var(--text-secondary);
font-style: italic;
padding: 1rem 0;
padding: var(--space-s) 0;
margin: 0;
}
@@ -176,20 +176,20 @@ aside figcaption {
@media (max-width: 900px) {
.tfe-layout {
grid-template-columns: 1fr;
gap: 2rem;
gap: var(--space-l);
}
.tfe-title {
font-size: 1.87rem;
font-size: var(--step-2);
}
}
@media (max-width: 600px) {
.tfe-main {
padding: 1.5rem 1rem 2rem;
padding: var(--space-m) var(--space-s) var(--space-l);
}
.tfe-title {
font-size: 1.54rem;
font-size: var(--step-1);
}
}