Skip to content

Commit 25500ce

Browse files
BrianMitchLBrianMitchL
authored
Merge pull request #29 from ryanmr/11ty-10-24
Adds upcoming animation effect call to action
2 parents 9cf12bd + 07fe6e3 commit 25500ce

File tree

4 files changed

+108
-19
lines changed

4 files changed

+108
-19
lines changed

‎src/css/tailwind.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,83 @@
3636
.plc-4 > * {
3737
@apply pl-4;
3838
}
39+
40+
/*
41+
=======================
42+
Upcoming
43+
Call to action effects
44+
=======================
45+
*/
46+
47+
:root {
48+
/* Light Cornflower Blue */
49+
--box-flap-color-1: #94cbe3;
50+
/* English Red */
51+
--box-flap-color-2: #b73f53;
52+
/* Old Mauve (not used yet) */
53+
--box-flap-color-3: #6b334a;
54+
55+
--box-flap-size: theme('spacing.16');
56+
--box-flap-offset: theme('spacing.8');
57+
}
58+
59+
.box-flap {
60+
position: relative;
61+
}
62+
63+
.box-flap-1,
64+
.box-flap-2 {
65+
mix-blend-mode: multiply;
66+
filter: none;
67+
z-index: -1;
68+
width: calc(100% + (var(--box-flap-size) * 2));
69+
height: calc(100% + (var(--box-flap-size) * 2));
70+
position: absolute;
71+
display: block;
72+
animation: flapping 10s ease-in-out infinite;
73+
/* safari cannot handle calc + variable; use the tailwind/postcss fallback for now */
74+
/* transform: translateX(calc(-1 * var(--box-flap-size))) translateY(calc(-1 * var(--box-flap-size))); */
75+
transform: translateX(calc(-1 * theme('spacing.16')))
76+
translateY(calc(-1 * theme('spacing.16')));
77+
}
78+
79+
@keyframes flapping {
80+
0%,
81+
100% {
82+
clip-path: polygon(
83+
0 0,
84+
calc(100% - var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),
85+
100% 100%,
86+
calc(0% + var(--box-flap-offset)) calc(100% - var(--box-flap-offset))
87+
);
88+
}
89+
50% {
90+
clip-path: polygon(
91+
calc(0% + var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),
92+
100% 0,
93+
calc(100% - var(--box-flap-offset)) calc(100% - var(--box-flap-offset)),
94+
0 100%
95+
);
96+
}
97+
}
98+
99+
.box-flap-1 {
100+
animation-delay: -5s;
101+
background-color: var(--box-flap-color-1);
102+
clip-path: polygon(
103+
0 0,
104+
calc(100% - var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),
105+
100% 100%,
106+
calc(0% + var(--box-flap-offset)) calc(100% - var(--box-flap-offset))
107+
);
108+
}
109+
110+
.box-flap-2 {
111+
background-color: var(--box-flap-color-2);
112+
clip-path: polygon(
113+
calc(0% + var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),
114+
100% 0,
115+
calc(100% - var(--box-flap-offset)) calc(100% - var(--box-flap-offset)),
116+
0 100%
117+
);
118+
}

‎src/includes/layouts/base.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
</head>
6767
<body>
6868
{% include "header.njk" %}
69-
<main role="main">{{ content | safe }}</main>
69+
<main role="main" class="overflow-hidden">{{ content | safe }}</main>
7070
{% include "footer.njk" %}
7171

7272
{% set js %}

‎src/includes/nextEvent.njk‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,32 @@
77
Upcoming
88
</h2>
99
{# next event #}
10-
<div class="bg-jsmn-yellow text-2xl p-4" id="upcoming-event">
11-
<h3 class="font-bold">{{ event.title }}</h3>
12-
<p class="text-lg">
13-
<time datetime="{{ event.date.toISOString() }}">
14-
{{ event.date | formatDateTime }}
15-
</time>
16-
<br>
17-
{{ event.location }}
18-
</p>
19-
<p>
20-
<a href="{{ event.link }}" class="text-lg font-bold underline">Details & RSVP</a>
21-
</p>
22-
</div>
23-
{# fallback #}
24-
<div class="bg-jsmn-yellow text-2xl font-bold p-4 hidden"
25-
id="upcoming-event-fallback">
26-
<a href="https://www.meetup.com/javascriptmn/" class="underline">Check
27-
Meetup.com for updates</a>
10+
11+
<div class="box-flap">
12+
{# box flaps for the special effect #}
13+
<div class="box-flap-1"></div>
14+
<div class="box-flap-2"></div>
15+
16+
{# regular content; javascript controls this #}
17+
<div class="bg-jsmn-yellow p-4 shadow-lg" id="upcoming-event">
18+
<h3 class="font-bold text-2xl">{{ event.title }}</h3>
19+
<p class="text-lg">
20+
<time datetime="{{ event.date.toISOString() }}">
21+
{{ event.date | formatDateTime }}
22+
</time>
23+
<br>
24+
{{ event.location }}
25+
</p>
26+
<p>
27+
<a href="{{ event.link }}" class="text-lg font-bold underline">Details &amp; RSVP</a>
28+
</p>
29+
</div>
30+
{# fallback #}
31+
<div class="bg-jsmn-yellow text-2xl font-bold p-4 hidden"
32+
id="upcoming-event-fallback">
33+
<a href="https://www.meetup.com/javascriptmn/" class="underline">Check
34+
Meetup.com for updates</a>
35+
</div>
2836
</div>
2937
</div>
3038

‎src/index.njk‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ changeFreq: daily
6060
</div>
6161
</div>
6262

63+
6364
{# location, speaking #}
6465

6566
<div class="container mx-auto px-2 mb-10">

0 commit comments

Comments
 (0)