From 23b9379c2f6dc1d170d675a6602f2a5a7cd5360a Mon Sep 17 00:00:00 2001 From: Dorian Date: Fri, 3 Jun 2022 15:00:45 +0200 Subject: [PATCH] flyer done --- theme/static/css/flyer.css | 108 ++++++++++++-------- theme/static/css/main.css | 13 ++- theme/templates/flyer.html | 52 ++++++---- theme/templates/inline-svg/bouleau-lune.svg | 24 +++++ 4 files changed, 135 insertions(+), 62 deletions(-) create mode 100644 theme/templates/inline-svg/bouleau-lune.svg diff --git a/theme/static/css/flyer.css b/theme/static/css/flyer.css index 421d6f2..c3b8fb7 100644 --- a/theme/static/css/flyer.css +++ b/theme/static/css/flyer.css @@ -6,6 +6,8 @@ body{ background: white; color: black; + + hyphens: auto; } body > header{ @@ -27,7 +29,14 @@ body > section.grid-display { a, a:visited { color: currentColor; - text-decoration-thickness: 0.04em; + text-decoration-thickness: calc(var(--border-width) * 0.75); +} + +.recto section.data-section::after { + color: white; +} +.verso section.data-section::after { + color: black; } /* VARIABLES @@ -42,6 +51,9 @@ a, a:visited { --fs-mono-big: 2.4rem; --fs-main: 11pt; + /* bigger main mono */ + --fs-mono: 0.75rem; + /* notes: - 12pt is a bit too much for main text @@ -62,7 +74,9 @@ a, a:visited { html{ font-size: var(--fs-main); } - +.mono{ + line-height: var(--lh); +} /* PRINT LAYOUT ===================================================== */ @@ -208,7 +222,7 @@ html{ --border: var(--border-width) solid var(--clr-text); } .flyer section.data-section { - padding: calc(var(--lh) * 1) 0 0; + padding: calc(var(--lh) * 1.5) 0 0; } .flyer section.data-section > *{ z-index: 9; @@ -228,10 +242,13 @@ html{ } .recto__title h2{ line-height: 0.95; - display: inline-block; + /* display: inline-block; */ } -.recto__title h2:nth-of-type(3){ +.recto__title h2:nth-of-type(2){ /* margin-left: calc(var(--lh) * 2); */ + /* text-align: right; + text-align: center; */ + margin-left: calc(3 * var(--lh)); } .new-moon-slanted-fvs, @@ -240,18 +257,20 @@ html{ } - .recto__text{ display: grid; grid-template-rows: min-content 1fr min-content; - gap: calc(var(--lh) * 2); + gap: calc(var(--lh) * 1); + + padding-top: calc(var(--lh) * 2); + padding-bottom: calc(var(--lh) * 1.5); } .recto__langs{ display: flex; gap: var(--lh); - margin-left: calc(var(--lh) * 4); + /* margin-left: calc(var(--lh) * 2); */ height: min-content; margin-top: auto; @@ -297,9 +316,10 @@ html{ } .recto__back{ - background: linear-gradient(to top, - black calc(var(--bleeds-print) + calc(var(--lh) * 0.5)), - white calc(var(--bleeds-print) + calc(var(--lh) * 3)) + /* display: none; */ + background: linear-gradient(to bottom, + black calc(var(--bleeds-print) + calc(var(--lh) * 0)), + white calc(var(--bleeds-print) + calc(var(--lh) * 2.5)) ); } @@ -310,31 +330,28 @@ html{ .verso__back{ background: linear-gradient(to top, white calc(var(--bleeds-print) + calc(var(--lh) * 0.5)), - black calc(var(--bleeds-print) + calc(var(--lh) * 3)) + black calc(var(--bleeds-print) + calc(var(--lh) * 2.5)) ); } /* FOOTERS ===================================================== */ - -.mono{ - line-height: var(--lh); -} .recto__footer{ display: flex; + flex-direction: column; justify-content: flex-end; - color: white; + /* color: white; */ + /* text-align: right; */ + + /* margin-left: 6.7cm; + margin-top: calc(-0.25 * var(--lh)); */ } .verso__footer{ color: black; display: flex; justify-content: flex-end; -} -.recto__footer .mono, -.verso__footer .mono{ - line-height: 1; -} +} /* CALENDAR @@ -342,11 +359,14 @@ html{ .flyer section.data-section.calendar-content > header{ position: absolute; - top: -0.9em; + /* top: -0.9em; */ right: 0; height: var(--lh); background: black; padding-left: var(--lh); + + top: -1em; + padding-top: 1em; } .flyer-cal-entry{ @@ -361,11 +381,14 @@ html{ .flyer-cal-entry .day { width: 6em; - margin-right: calc(var(--lh) * 0.5); + /* margin-right: calc(var(--lh) * 0.5); */ } .flyer-cal-entry .phase-name { width: 4.6em; - margin-left: calc(var(--lh) * 2.5); + /* margin-left: calc(var(--lh) * 2.5); */ + + margin-left: calc(var(--lh) * 2); + margin-right: calc(var(--lh) * 1.5); } .flyer-cal-entry > *{ flex-grow: 0; @@ -375,6 +398,8 @@ html{ .cal-entry__time{ flex-grow: 1; background: none; + + margin-left: calc(var(--lh) * 2); } .moon-time{ @@ -387,6 +412,8 @@ html{ .cal-entry__moon { width: calc(var(--lh) * 2); margin-right: 1em; + + width: calc(var(--lh) * 4); } .moon-drawing { @@ -411,22 +438,23 @@ html{ .recto__drawing svg{ display: block; - margin: 0 auto; - max-width: 100%; - position: absolute; - - /* top: var(--lh); - max-height: 86%; - right: 14%; */ + height: 4cm; - top: calc(var(--lh) * 2); - max-height: 82.0%; - right: 16.4%; + position: absolute; + top: 0; + right: 0; + overflow: visible; } .recto__drawing path{ - fill: none; - stroke: white; - vector-effect: non-scaling-stroke; - stroke-width: var(--border-width); - /* stroke-dasharray: 4; */ + /* fill: none; + stroke: black; */ + /* vector-effect: non-scaling-stroke; */ + /* stroke-width: calc(var(--border-width) * 0.75); */ + stroke-width: calc(var(--border-width) * 0.25); + stroke-dasharray: 0.25, 0.666; +} +.recto__drawing #lune{ + /* stroke-width: calc(var(--border-width) * 2); */ + stroke-width: calc(var(--border-width) * 0.666); + stroke-dasharray: 0.25, 2; } \ No newline at end of file diff --git a/theme/static/css/main.css b/theme/static/css/main.css index 6f2c5f6..e1a4406 100644 --- a/theme/static/css/main.css +++ b/theme/static/css/main.css @@ -39,7 +39,11 @@ body{ /* --clr-soft: hsl(48, 46%, 82%); */ /* --clr-back: hsl(72, 32%, 84%); */ - --clr-soft: hsl(48, 46%, 84%); + /* --clr-soft: hsl(48, 46%, 84%); */ + + /* --clr-soft: rgba(0,0,0,0.15); */ + /* is equal to */ + --clr-soft: hsl(100, 12%, 76%); background: var(--clr-back); color: var(--clr-text); @@ -57,9 +61,14 @@ body.night{ --clr-header: black; /* night -- grey purple */ - --clr-soft: hsl(290, 10%, 38%); + /* --clr-soft: hsl(290, 10%, 38%); */ --clr-back: hsl(252, 34%, 14%); + /* --clr-soft: rgba(255,255,255,0.25); */ + /* is equal to */ + --clr-soft: hsl(253, 10%, 40%); + + } /* link */ diff --git a/theme/templates/flyer.html b/theme/templates/flyer.html index 2ee397f..0b5209e 100644 --- a/theme/templates/flyer.html +++ b/theme/templates/flyer.html @@ -18,40 +18,52 @@
-

New moon 

-

walks

+

+ New moon walks +

-

Full moon 

-

walks

+

+ Full moon walks +

- {#
- {% include 'inline-svg/bouleau-feuilles-big-1-export.svg' %} -
#} +
+ {% include 'inline-svg/bouleau-lune.svg' %} +
+ +
+

+ an initiative by Anaïs Berck
+ complete walks calendar on moonwalks.be +

+
-
+
{{ page.sections["en"] }}
-
+
{{ page.sections["fr"] }}
-
+
{{ page.sections["nl"] }}
-
-

- an initiative by Anaïs Berck + + +

@@ -61,9 +73,9 @@
-
+ {#
{% include 'inline-svg/bouleau-feuilles-big-1-export.svg' %} -
+
#}
@@ -79,11 +91,11 @@
+

+
-
- -

+
@@ -100,7 +112,7 @@ diff --git a/theme/templates/inline-svg/bouleau-lune.svg b/theme/templates/inline-svg/bouleau-lune.svg new file mode 100644 index 0000000..8ee3689 --- /dev/null +++ b/theme/templates/inline-svg/bouleau-lune.svg @@ -0,0 +1,24 @@ + + + + + + + + + +