Merge pull request #29 from ryanmr/11ty-10-24

Adds upcoming animation effect call to action

Author: BrianMitchL

src/css/tailwind.css

@@ -36,3 +36,83 @@
 .plc-4 > * {
   @apply pl-4;
 }
+
+/*
+=======================
+      Upcoming
+Call to action effects
+=======================
+*/
+
+:root {
+  /* Light Cornflower Blue */
+  --box-flap-color-1: #94cbe3;
+  /* English Red */
+  --box-flap-color-2: #b73f53;
+  /* Old Mauve (not used yet) */
+  --box-flap-color-3: #6b334a;
+
+  --box-flap-size: theme('spacing.16');
+  --box-flap-offset: theme('spacing.8');
+}
+
+.box-flap {
+  position: relative;
+}
+
+.box-flap-1,
+.box-flap-2 {
+  mix-blend-mode: multiply;
+  filter: none;
+  z-index: -1;
+  width: calc(100% + (var(--box-flap-size) * 2));
+  height: calc(100% + (var(--box-flap-size) * 2));
+  position: absolute;
+  display: block;
+  animation: flapping 10s ease-in-out infinite;
+  /* safari cannot handle calc + variable; use the tailwind/postcss fallback for now */
+  /* transform: translateX(calc(-1 * var(--box-flap-size))) translateY(calc(-1 * var(--box-flap-size))); */
+  transform: translateX(calc(-1 * theme('spacing.16')))
+    translateY(calc(-1 * theme('spacing.16')));
+}
+
+@keyframes flapping {
+  0%,
+  100% {
+    clip-path: polygon(
+      0 0,
+      calc(100% - var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),
+      100% 100%,
+      calc(0% + var(--box-flap-offset)) calc(100% - var(--box-flap-offset))
+    );
+  }
+  50% {
+    clip-path: polygon(
+      calc(0% + var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),
+      100% 0,
+      calc(100% - var(--box-flap-offset)) calc(100% - var(--box-flap-offset)),
+      0 100%
+    );
+  }
+}
+
+.box-flap-1 {
+  animation-delay: -5s;
+  background-color: var(--box-flap-color-1);
+  clip-path: polygon(
+    0 0,
+    calc(100% - var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),
+    100% 100%,
+    calc(0% + var(--box-flap-offset)) calc(100% - var(--box-flap-offset))
+  );
+}
+
+.box-flap-2 {
+  background-color: var(--box-flap-color-2);
+  clip-path: polygon(
+    calc(0% + var(--box-flap-offset)) calc(0% + var(--box-flap-offset)),
+    100% 0,
+    calc(100% - var(--box-flap-offset)) calc(100% - var(--box-flap-offset)),
+    0 100%
+  );
+}

src/includes/layouts/base.njk

@@ -66,7 +66,7 @@
   </head>
   <body>
     {% include "header.njk" %}
-    <main role="main">{{ content | safe }}</main>
+    <main role="main" class="overflow-hidden">{{ content | safe }}</main>
     {% include "footer.njk" %}
 
     {% set js %}

src/includes/nextEvent.njk

@@ -7,24 +7,32 @@
     Upcoming
   </h2>
   {# next event #}
-  <div class="bg-jsmn-yellow text-2xl p-4" id="upcoming-event">
-    <h3 class="font-bold">{{ event.title }}</h3>
-    <p class="text-lg">
-      <time datetime="{{ event.date.toISOString() }}">
-        {{ event.date | formatDateTime }}
-      </time>
-      <br>
-      {{ event.location }}
-    </p>
-    <p>
-      <a href="{{ event.link }}" class="text-lg font-bold underline">Details & RSVP</a>
-    </p>
-  </div>
-  {# fallback #}
-  <div class="bg-jsmn-yellow text-2xl font-bold p-4 hidden"
-       id="upcoming-event-fallback">
-    <a href="https://www.meetup.com/javascriptmn/" class="underline">Check
-      Meetup.com for updates</a>
+  
+  <div class="box-flap">
+    {# box flaps for the special effect #}
+    <div class="box-flap-1"></div>
+    <div class="box-flap-2"></div>
+
+    {# regular content; javascript controls this #}
+    <div class="bg-jsmn-yellow p-4 shadow-lg" id="upcoming-event">
+      <h3 class="font-bold text-2xl">{{ event.title }}</h3>
+      <p class="text-lg">
+        <time datetime="{{ event.date.toISOString() }}">
+          {{ event.date | formatDateTime }}
+        </time>
+        <br>
+        {{ event.location }}
+      </p>
+      <p>
+        <a href="{{ event.link }}" class="text-lg font-bold underline">Details &amp; RSVP</a>
+      </p>
+    </div>
+    {# fallback #}
+    <div class="bg-jsmn-yellow text-2xl font-bold p-4 hidden"
+        id="upcoming-event-fallback">
+      <a href="https://www.meetup.com/javascriptmn/" class="underline">Check
+        Meetup.com for updates</a>
+    </div>
   </div>
 </div>
 

src/index.njk

@@ -60,6 +60,7 @@ changeFreq: daily
   </div>
 </div>
 
+
 {# location, speaking #}
 
 <div class="container mx-auto px-2 mb-10">