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{
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;
}

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

@ -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 */

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

@ -18,40 +18,52 @@
<div class="layer recto__text pad">
<header class="recto__title">
<h2 class="phase-name font-big new-moon-fvs">New moon&nbsp;</h2>
<h2 class="font-big new-moon-fvs">walks</h2>
<h2 class="phase-name font-big new-moon-fvs">
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="font-big full-moon-fvs">walks</h2>
<h2 class="phase-name font-big full-moon-fvs">
Full moon <span class="full-moon-slanted-fvs">walks</span>
</h2>
{#<div class="layer recto__drawing">
{% include 'inline-svg/bouleau-feuilles-big-1-export.svg' %}
</div>#}
<div class="layer recto__drawing">
{% include 'inline-svg/bouleau-lune.svg' %}
</div>
</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">
<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">
{{ page.sections["en"] }}
</div>
</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">
{{ page.sections["fr"] }}
</div>
</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">
{{ page.sections["nl"] }}
</div>
</section>
</main>
<footer class="recto__footer">
<p class="mono">
an initiative by Anaïs Berck
<!-- <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>
</footer> -->
<!-- &mdash; <a href="mailto:anais@anaisberck.be">anais@anaisberck.be</a>, -->
<!-- &nbsp;<span>•</span>&nbsp; -->
</div>
</div>
@ -61,9 +73,9 @@
<div class="page-content">
<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' %}
</div>
</div>#}
<div class="layer verso__calendar pad">
@ -79,11 +91,11 @@
<div class="day"></div>
<h2 class="phase-name"></h2>
<div class="cal-entry__moon">
<div class="moon-drawing"></div>
</div>
<h2 class="phase-name"></h2>
</div>
<div class="cal-entry__time mono">
<span class="moon-time"></span>
@ -100,7 +112,7 @@
</section>
<footer class="verso__footer">
<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> -->
</p>
</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