anais_berck
/
www.moonwalks.be
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

flyer done

Browse Source
main
Dorian 2 years ago
parent 23e27e9c4c
commit 23b9379c2f
4 changed files with 135 additions and 62 deletions
Show Stats Download Patch File Download Diff File

108
theme/static/css/flyer.css
Unescape Escape View File

@ -6,6 +6,8 @@
body{ body{
background: white; background: white;
color: black; color: black;
hyphens: auto;
} }
body > header{ body > header{
@ -27,7 +29,14 @@ body > section.grid-display {
a, a:visited { a, a:visited {
color: currentColor; 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 /* VARIABLES
@ -42,6 +51,9 @@ a, a:visited {
--fs-mono-big: 2.4rem; --fs-mono-big: 2.4rem;
--fs-main: 11pt; --fs-main: 11pt;
/* bigger main mono */
--fs-mono: 0.75rem;
/* /*
notes: notes:
- 12pt is a bit too much for main text - 12pt is a bit too much for main text
@ -62,7 +74,9 @@ a, a:visited {
html{ html{
font-size: var(--fs-main); font-size: var(--fs-main);
} }
.mono{
line-height: var(--lh);
}
/* PRINT LAYOUT /* PRINT LAYOUT
===================================================== */ ===================================================== */
@ -208,7 +222,7 @@ html{
--border: var(--border-width) solid var(--clr-text); --border: var(--border-width) solid var(--clr-text);
} }
.flyer section.data-section { .flyer section.data-section {
padding: calc(var(--lh) * 1) 0 0; padding: calc(var(--lh) * 1.5) 0 0;
} }
.flyer section.data-section > *{ .flyer section.data-section > *{
z-index: 9; z-index: 9;
@ -228,10 +242,13 @@ html{
} }
.recto__title h2{ .recto__title h2{
line-height: 0.95; 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); */ /* margin-left: calc(var(--lh) * 2); */
/* text-align: right;
text-align: center; */
margin-left: calc(3 * var(--lh));
} }
.new-moon-slanted-fvs, .new-moon-slanted-fvs,
@ -240,18 +257,20 @@ html{
} }
.recto__text{ .recto__text{
display: grid; display: grid;
grid-template-rows: min-content 1fr min-content; 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{ .recto__langs{
display: flex; display: flex;
gap: var(--lh); gap: var(--lh);
margin-left: calc(var(--lh) * 4); /* margin-left: calc(var(--lh) * 2); */
height: min-content; height: min-content;
margin-top: auto; margin-top: auto;
@ -297,9 +316,10 @@ html{
} }
.recto__back{ .recto__back{
background: linear-gradient(to top, /* display: none; */
black calc(var(--bleeds-print) + calc(var(--lh) * 0.5)), background: linear-gradient(to bottom,
white calc(var(--bleeds-print) + calc(var(--lh) * 3)) 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{ .verso__back{
background: linear-gradient(to top, background: linear-gradient(to top,
white calc(var(--bleeds-print) + calc(var(--lh) * 0.5)), 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 /* FOOTERS
===================================================== */ ===================================================== */
.mono{
line-height: var(--lh);
}
.recto__footer{ .recto__footer{
display: flex; display: flex;
flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
color: white; /* color: white; */
/* text-align: right; */
/* margin-left: 6.7cm;
margin-top: calc(-0.25 * var(--lh)); */
} }
.verso__footer{ .verso__footer{
color: black; color: black;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.recto__footer .mono,
.verso__footer .mono{
line-height: 1;
}
/* CALENDAR /* CALENDAR
@ -342,11 +359,14 @@ html{
.flyer section.data-section.calendar-content > header{ .flyer section.data-section.calendar-content > header{
position: absolute; position: absolute;
top: -0.9em; /* top: -0.9em; */
right: 0; right: 0;
height: var(--lh); height: var(--lh);
background: black; background: black;
padding-left: var(--lh); padding-left: var(--lh);
top: -1em;
padding-top: 1em;
} }
.flyer-cal-entry{ .flyer-cal-entry{
@ -361,11 +381,14 @@ html{
.flyer-cal-entry .day { .flyer-cal-entry .day {
width: 6em; width: 6em;
margin-right: calc(var(--lh) * 0.5); /* margin-right: calc(var(--lh) * 0.5); */
} }
.flyer-cal-entry .phase-name { .flyer-cal-entry .phase-name {
width: 4.6em; 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 > *{ .flyer-cal-entry > *{
flex-grow: 0; flex-grow: 0;
@ -375,6 +398,8 @@ html{
.cal-entry__time{ .cal-entry__time{
flex-grow: 1; flex-grow: 1;
background: none; background: none;
margin-left: calc(var(--lh) * 2);
} }
.moon-time{ .moon-time{
@ -387,6 +412,8 @@ html{
.cal-entry__moon { .cal-entry__moon {
width: calc(var(--lh) * 2); width: calc(var(--lh) * 2);
margin-right: 1em; margin-right: 1em;
width: calc(var(--lh) * 4);
} }
.moon-drawing { .moon-drawing {
@ -411,22 +438,23 @@ html{
.recto__drawing svg{ .recto__drawing svg{
display: block; display: block;
margin: 0 auto; height: 4cm;
max-width: 100%;
position: absolute;
/* top: var(--lh);
max-height: 86%;
right: 14%; */
top: calc(var(--lh) * 2); position: absolute;
max-height: 82.0%; top: 0;
right: 16.4%; right: 0;
overflow: visible;
} }
.recto__drawing path{ .recto__drawing path{
fill: none; /* fill: none;
stroke: white; stroke: black; */
vector-effect: non-scaling-stroke; /* vector-effect: non-scaling-stroke; */
stroke-width: var(--border-width); /* stroke-width: calc(var(--border-width) * 0.75); */
/* stroke-dasharray: 4; */ 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;
} }

13
theme/static/css/main.css
Unescape Escape View File

@ -39,7 +39,11 @@ body{
/* --clr-soft: hsl(48, 46%, 82%); */ /* --clr-soft: hsl(48, 46%, 82%); */
/* --clr-back: hsl(72, 32%, 84%); */ /* --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); background: var(--clr-back);
color: var(--clr-text); color: var(--clr-text);
@ -57,9 +61,14 @@ body.night{
--clr-header: black; --clr-header: black;
/* night -- grey purple */ /* night -- grey purple */
--clr-soft: hsl(290, 10%, 38%); /* --clr-soft: hsl(290, 10%, 38%); */
--clr-back: hsl(252, 34%, 14%); --clr-back: hsl(252, 34%, 14%);
/* --clr-soft: rgba(255,255,255,0.25); */
/* is equal to */
--clr-soft: hsl(253, 10%, 40%);
} }
/* link */ /* link */

52
theme/templates/flyer.html
Unescape Escape View File

@ -18,40 +18,52 @@
<div class="layer recto__text pad"> <div class="layer recto__text pad">
<header class="recto__title"> <header class="recto__title">
<h2 class="phase-name font-big new-moon-fvs">New moon&nbsp;</h2> <h2 class="phase-name font-big new-moon-fvs">
<h2 class="font-big new-moon-fvs">walks</h2> New moon <span class="new-moon-slanted-fvs">walks</span>
</h2>
<h2 class="phase-name font-big full-moon-fvs">Full moon&nbsp;</h2> <h2 class="phase-name font-big full-moon-fvs">
<h2 class="font-big full-moon-fvs">walks</h2> Full moon <span class="full-moon-slanted-fvs">walks</span>
</h2>
{#<div class="layer recto__drawing"> <div class="layer recto__drawing">
{% include 'inline-svg/bouleau-feuilles-big-1-export.svg' %} {% include 'inline-svg/bouleau-lune.svg' %}
</div>#} </div>
</header> </header>
<footer class="recto__footer mono">
<p>
an initiative by Anaïs Berck <br/>
complete walks calendar on <a href="http://moonwalks.be">moonwalks.be</a>
</p>
</footer>
<main class="text-content recto__langs"> <main class="text-content recto__langs">
<section class="recto__lang data-section" data-box-title="en"> <section class="recto__lang data-section" data-box-title="Sonian Forest walks">
<div class="progressive-fvs"> <div class="progressive-fvs">
{{ page.sections["en"] }} {{ page.sections["en"] }}
</div> </div>
</section> </section>
<section class="recto__lang data-section" data-box-title="fr"> <section class="recto__lang data-section" data-box-title="Balades Forêt de Soignes">
<div class="progressive-fvs"> <div class="progressive-fvs">
{{ page.sections["fr"] }} {{ page.sections["fr"] }}
</div> </div>
</section> </section>
<section class="recto__lang data-section" data-box-title="nl"> <section class="recto__lang data-section" data-box-title="Zoniënwoud wandelingen">
<div class="progressive-fvs"> <div class="progressive-fvs">
{{ page.sections["nl"] }} {{ page.sections["nl"] }}
</div> </div>
</section> </section>
</main> </main>
<footer class="recto__footer"> <!-- <footer class="recto__footer mono">
<p class="mono"> <p>
an initiative by Anaïs Berck an initiative by Anaïs Berck <br/>
complete walks calendar on <a href="http://moonwalks.be">moonwalks.be</a>
</p> </p>
</footer> </footer> -->
<!-- &mdash; <a href="mailto:anais@anaisberck.be">anais@anaisberck.be</a>, -->
<!-- &nbsp;<span>•</span>&nbsp; -->
</div> </div>
</div> </div>
@ -61,9 +73,9 @@
<div class="page-content"> <div class="page-content">
<div class="layer verso__back bleeds"></div> <div class="layer verso__back bleeds"></div>
<div class="layer recto__drawing"> {#<div class="layer recto__drawing">
{% include 'inline-svg/bouleau-feuilles-big-1-export.svg' %} {% include 'inline-svg/bouleau-feuilles-big-1-export.svg' %}
</div> </div>#}
<div class="layer verso__calendar pad"> <div class="layer verso__calendar pad">
@ -79,11 +91,11 @@
<div class="day"></div> <div class="day"></div>
<h2 class="phase-name"></h2>
<div class="cal-entry__moon"> <div class="cal-entry__moon">
<div class="moon-drawing"></div> <div class="moon-drawing"></div>
</div> </div>
<h2 class="phase-name"></h2>
<div class="cal-entry__time mono"> <div class="cal-entry__time mono">
<span class="moon-time"></span> <span class="moon-time"></span>
@ -100,7 +112,7 @@
</section> </section>
<footer class="verso__footer"> <footer class="verso__footer">
<p class="mono"> <p class="mono">
complete walks calendar on <a href="http://moonwalks.be">moonwalks.be</a> <!-- complete walks calendar on <a href="http://moonwalks.be">moonwalks.be</a> -->
<!-- <br/> reservation at <a href="mailto:anais@anaisberck.be">anais@anaisberck.be</a> --> <!-- <br/> reservation at <a href="mailto:anais@anaisberck.be">anais@anaisberck.be</a> -->
</p> </p>
</footer> </footer>

24
theme/templates/inline-svg/bouleau-lune.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

Write Preview
Loading…
Cancel
Save