From fd77a0516ea8fd6a2215b63e0b436b7ee351dfe5 Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Wed, 4 Mar 2026 13:53:24 +0100 Subject: [PATCH] change font --- maquette-tests/assets/css/01_var.css | 26 ++++++++++++---- maquette-tests/assets/css/03_layout.css | 40 +++++++++++++++++-------- maquette-tests/assets/css/notes.css | 6 ++-- maquette-tests/assets/css/text.css | 27 ++++++++++++++--- maquette-tests/index.html | 2 +- 5 files changed, 75 insertions(+), 26 deletions(-) diff --git a/maquette-tests/assets/css/01_var.css b/maquette-tests/assets/css/01_var.css index bd756cf..c82f365 100644 --- a/maquette-tests/assets/css/01_var.css +++ b/maquette-tests/assets/css/01_var.css @@ -3,6 +3,9 @@ --font: 'Routed Gothic', sans-serif; --font: 'Wagram Slab', serif; --font: 'Bilzig', serif; + --font: 'Routed Gothic', sans-serif; + + /* --font: 'HAL Timezone', serif; */ --mono: 'Selectric Mono', monospace; --mono: 'Ivory Mono', monospace; @@ -12,11 +15,20 @@ --font-decor: 'Decor Round Random'; - /* --mono: 'HAL Timezone Mono', monospace; */ + --font-notes: 'Selectric Mono', monospace; + --font-notes: 'Baskemo Sans', monospace; + + --font-sans: 'Routed Gothic', serif; - /* --font-sans: 'Routed Gothic Wide', serif; */ - /* --note: 'Wagram Slab', serif; */ + + + --font-subtitle: 'Routed Gothic Wide', sans-serif; + /* --font-subtitle: 'Baskemo Sans', monospace; */ + + --font-nav: 'Routed Gothic', sans-serif; + + --title: 'HNoailles Times Triplex', sans-serif; --red: #9B0000; @@ -30,10 +42,12 @@ --indent: 7mm; - --font-size: 18px; - --baseline: 24px; + --font-size: 14px; + --baseline: 18px; - --fs-nav: 12px; + --fs-nav: 11px; + --fs-subtitle: 11px; + --fs-notes: 11px; --unit: 20px; --gap: 8px; diff --git a/maquette-tests/assets/css/03_layout.css b/maquette-tests/assets/css/03_layout.css index aaab0e5..1028003 100644 --- a/maquette-tests/assets/css/03_layout.css +++ b/maquette-tests/assets/css/03_layout.css @@ -7,11 +7,13 @@ bleed: 6mm; marks: crop; + margin-left: 28mm; + margin-right: 16mm; + } @page:left { - margin-left: 26mm; - margin-right: 18mm; + @top-left{ content: element(navDecor); @@ -20,7 +22,7 @@ @bottom-center { content: counter(page); - font-family: var(--mono); + font-family: var(--font-title); font-size: 20px; vertical-align: bottom; padding-bottom: 8mm; @@ -31,8 +33,8 @@ } @page:right { - margin-left: 18mm; - margin-right: 26mm; + /* margin-left: 18mm; + margin-right: 26mm; */ @top-left{ content: element(nav); @@ -40,7 +42,7 @@ @bottom-center { content: counter(page); - font-family: var(--mono); + font-family: var(--font-title); font-size: 20px; vertical-align: bottom; padding-bottom: 8mm; @@ -106,25 +108,39 @@ .running-nav ul{ display: flex; - gap: var(--gap); + gap: calc(var(--unit)*4); list-style: none; } .running-nav-decor li, .running-nav li{ - font-family: var(--mono); - font-size: var(--fs-nav); + font-family: var(--font-nav); + font-size: 10px; + line-height: 10px; + padding-left: 6ch; + max-width: 24ch; + text-align: center; + position: relative; + /* color: var(--blue); */ + /* text-transform: lowercase; border: var(--border-grey); - font-size: var(--fs-nav); line-height: 1; padding: 4px 1ch; min-height: var(--unit); font-weight: normal; + max-width: 24ch; */ } -.running-nav-decor ul li.nav-title, +.running-nav-decor li::before, +.running-nav li::before{ + content: ">"; + position: absolute; + left: 0px; +} + +/* .running-nav-decor ul li.nav-title, .running-nav ul li.nav-title{ flex-grow: 2; } @@ -151,7 +167,7 @@ .running-nav ul li.nav-author{ flex: 0 0 auto; /* taille fixe */ } - + */ .running-nav-decor ul li.nav-chevron{ diff --git a/maquette-tests/assets/css/notes.css b/maquette-tests/assets/css/notes.css index 445cb20..7b34674 100644 --- a/maquette-tests/assets/css/notes.css +++ b/maquette-tests/assets/css/notes.css @@ -1,6 +1,6 @@ .following-note { - font-family: var(--font-sans); - font-size: 12px; + font-family: var(--font-notes); + font-size: var(--fs-notes); line-height: 14px; font-weight: 500; @@ -32,7 +32,7 @@ content: "}" } - font-family: var(--font-sans); + font-family: var(--font-notes); font-weight: 500; font-size: 12px; } diff --git a/maquette-tests/assets/css/text.css b/maquette-tests/assets/css/text.css index 38bd7e6..aa0b747 100644 --- a/maquette-tests/assets/css/text.css +++ b/maquette-tests/assets/css/text.css @@ -13,6 +13,7 @@ p + p{ text-indent: 30%; position: relative; + /* text-indent: -6ch; */ } @@ -42,8 +43,11 @@ h3, h4{ break-after: avoid; } h3, h4{ - font-family: var(--mono); - font-size: var(--fs-nav); + font-weight: normal; + font-size: 14px; + font-family: var(--font-notes); + /* font-family: var(--font-subtitle); + font-size: var(--fs-subtitle); background-color: var(--grey); font-size: var(--fs-nav); line-height: 1; @@ -51,9 +55,24 @@ h3, h4{ min-height: var(--unit); margin-top: calc(var(--baseline)*1.5); margin-bottom: calc(var(--baseline)*0.5); - font-weight: normal; + font-weight: normal; */ + padding-left: 1.5ch; + margin-top: calc(var(--baseline)*0.5); + margin-bottom: calc(var(--baseline)*0.5); } +h3::before, +h3::after{ + content: "+--------------------------------------------------------+"; + display: block; + /* font-family: monospace; */ + position: relative; + left: -1.5ch; + width: calc(100% + 1.5ch); +} + + + h4{ border: var(--border-grey); background: none; @@ -67,7 +86,7 @@ blockquote{ padding-left: 3ch; /* font-style: italic; */ - margin-top: calc(var(--baseline)*0..5); + margin-top: calc(var(--baseline)*0.5); margin-bottom: calc(var(--baseline)*0.5); diff --git a/maquette-tests/index.html b/maquette-tests/index.html index f1671bc..7e44fc4 100644 --- a/maquette-tests/index.html +++ b/maquette-tests/index.html @@ -62,7 +62,7 @@