New header (#3)

* Finally got the globe to resize correctly. * Remove header, new events + filter bar.
Hard-Dance · Feb 1, 2024 · 4c5bfe5 · 4c5bfe5
1 parent 0aa5195
commit 4c5bfe5
Show file tree

Hide file tree

Showing 16 changed files with 272 additions and 111 deletions.
diff --git a/_includes/globe.html b/_includes/globe.html
@@ -1,37 +1,80 @@
-<div class="globe">
-  <canvas id="cobe"></canvas>
+<svg
+  class="banner-logo"
+  data-variant="left"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 155 36"
+>
+  <path
+    d="M74.022.295h-8.254l-9.717 26.187-.017.034-3.369 9.086-.017.034 8.193.01 1.094-2.923.017-.009 14.258-4.422.008.026 2.731 7.327h8.193L74.022.295ZM63.313 24.232l2.473-1.793 4.1-11.059v-.009l.018.018 3.61 9.68-10.2 3.163ZM50.701.303v35.342h-7.667l.018-12.689h-16.3v12.69h-7.667V.302h7.667v14.999l16.317.026.026-15.025H50.7Zm5.514 26.179-.01.034-3.367 9.086h-.018l3.386-9.111.009-.01Zm65.86-18.403v.008-.008ZM137.314.295l-15.222.017-.06 35.385h15.247c9.787 0 17.721-7.913 17.721-17.706S147.109.295 137.314.295Zm.99 27.66c-.172.018-.335.036-.508.036-.163.008-.327.017-.5.017h-10.742l3.145-.854V8.087h7.598c5.513 0 9.993 4.422 9.993 9.939-.009 5.172-3.946 9.422-8.985 9.93Zm-17.996 7.707H109.54L96.824 22.948h-.24v12.714h-.01l-7.632.043.009-25.515h7.632v5.146h11.768a3.705 3.705 0 0 0 3.705-3.706 3.699 3.699 0 0 0-3.248-3.672H86.28L83.454.329h25.423c3.29.147 6.22 1.707 8.192 4.086.397.474.75.983 1.06 1.526a11.262 11.262 0 0 1 1.533 5.689c0 6.25-5.065 11.31-11.302 11.31h-2.912l3.213 1.034 11.647 11.688Z"
+  />
+</svg>
+
+<div class="globe-container">
+  <canvas id="globeCanvas"></canvas>
 </div>
 
+<svg
+  class="banner-logo"
+  data-variant="right"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 155 36"
+>
+  <path
+    d="m60.674 26.086-2.688-7.233L51.11.347h-8.253l-9.734 26.221-3.386 9.12 8.193.009 1.077-2.888.025-.009L53.3 28.378l2.73 7.327h8.193l-3.55-9.62ZM42.428 23.68l-2.102.655 2.541-1.845 4.1-11.06v-.017l.018.018 3.618 9.706-8.175 2.543ZM73.01 10.25l-.836-1.922.836 1.922ZM96.433.32v35.367h-7.727v-.008h-4.712L72.174 8.329l1.49 6.283v21.076l-7.726-.043V.32h2.782L68.71.312h8.58l.01.008 11.405 26.42V.32h7.727Zm39.835 7.689v6.344h11.2v7.844h-11.2l-2.705-.009.043.009 2.662 1.034v4.802h18.729v7.646h-26.542v-.035h-.026V.355h26.568V8.01h-18.73ZM126.645.295v7.8h-10.742c-5.513 0-9.985 4.423-9.985 9.94 0 5.18 3.937 9.43 8.977 9.93.172.017.336.026.508.034.164.009.336.009.5.009h10.742v7.68h-10.742c-9.787 0-17.72-7.913-17.72-17.705 0-9.784 7.89-17.67 17.668-17.688h10.794Zm6.961 21.903-.043-.009M15.283.303.06.32 0 35.705h15.248c9.787 0 17.72-7.913 17.72-17.705S25.079.303 15.284.303Zm.982 27.661a9.756 9.756 0 0 1-.509.035c-.163.009-.327.009-.5.009H4.515l3.145-.845V8.087h7.598c5.513 0 9.984 4.422 9.984 9.939a9.963 9.963 0 0 1-8.976 9.938Z"
+  />
+</svg>
+
 <script type="module">
   import createGlobe from "https://cdn.skypack.dev/cobe";
 
+  const canvas = document.getElementById("globeCanvas");
+  let width = canvas.offsetWidth;
+  let globe = null;
   let phi = 0;
-  let canvas = document.getElementById("cobe");
 
-  const globe = createGlobe(canvas, {
+  const onResize = () => {
+    if (canvas) {
+      width = canvas.offsetWidth;
+      if (globe) {
+        globe.resize({
+          width: width,
+          height: width,
+        });
+      }
+    }
+  };
+
+  window.addEventListener("resize", onResize);
+  onResize();
+
+  globe = createGlobe(canvas, {
     devicePixelRatio: 2,
-    width: 1000,
-    height: 1000,
+    width: width * 2,
+    height: width * 2,
     phi: 0,
     theta: 0,
     dark: 1,
-    diffuse: 1.2,
-    scale: 1,
-    mapSamples: 16000,
-    mapBrightness: 6,
+    diffuse: 3,
+    mapSamples: 10000,
+    mapBrightness: 3,
     baseColor: [1, 1, 1],
-    markerColor: [1, 0.5, 1],
-    glowColor: [1, 1, 1],
-    offset: [100, -100], // TODO: This needs fixed
-    markers: [
-      { location: [37.7595, -122.4367], size: 0.03 },
-      { location: [40.7128, -74.006], size: 0.1 },
-    ],
+    markerColor: [251 / 255, 100 / 255, 21 / 255],
+    glowColor: [1.2, 1.2, 1.2],
+    markers: [],
+    scale: 1,
+    offset: [0, 0],
     onRender: (state) => {
-      // Called on every animation frame.
-      // `state` will be an empty object, return updated params.
+      state.width = width * 2;
+      state.height = width * 2;
       state.phi = phi;
       phi += 0.01;
     },
   });
+
+  function destroyGlobe() {
+    if (globe) {
+      globe.destroy();
+      window.removeEventListener("resize", onResize);
+    }
+  }
 </script>
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,12 +1,14 @@
 <header>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1800 862"
-    alt="{{ site.title }} logo"
-    loading="lazy"
-  >
-    <path
-      d="M704.613 750.35 673.4 666.413l-79.835-214.795H497.72l-113.05 304.335L345.353 861.8l95.143.1L453 828.385l.3-.1 165.674-51.323L650.69 862h95.143l-41.219-111.65ZM492.72 722.438l-24.41 7.603 29.512-21.41 47.622-128.356v-.2l.2.2 42.018 112.65-94.942 29.513Zm355.158-155.87-9.704-22.31 9.704 22.31Zm272.02-115.25V861.8h-89.74v-.1h-54.723L838.173 544.259l17.307 72.932V861.8l-89.74-.5V451.317h32.315l-.1-.1h99.644l.1.1 132.459 306.637V451.317h89.74Zm462.606 89.24v73.632h130.058v91.04h-130.058l-31.414-.1.5.1 30.914 12.006v55.724H1800v88.74h-308.237v-.4h-.3V451.718H1800v88.84h-217.497Zm-111.75-89.54v90.54h-124.755c-64.028 0-115.951 51.322-115.951 115.35 0 60.128 45.72 109.45 104.246 115.252 2.001.2 3.902.3 5.903.4 1.9.1 3.901.1 5.802.1h124.756v89.14h-124.756c-113.65 0-205.791-91.841-205.791-205.492 0-113.55 91.64-205.09 205.191-205.29h125.356Zm80.837 254.212-.5-.1M177.478 451.117l-176.779.2L0 862h177.079c113.65 0 205.791-91.84 205.791-205.491S291.23 451.117 177.48 451.117Zm11.405 321.043c-2 .2-3.902.3-5.903.4-1.9.1-3.801.1-5.802.1H52.423l36.517-9.804V541.457h88.239c64.028 0 115.951 51.323 115.951 115.352.1 60.227-45.62 109.549-104.246 115.351ZM706.214 0H610.37l-112.85 303.935-.2.4-39.117 105.447-.2.4 95.142.1 12.706-33.915.2-.1 165.573-51.323.1.3 31.714 85.038h95.143L706.214 0ZM581.859 277.824l28.712-20.81 47.622-128.357v-.1l.2.2 41.918 112.35-118.452 36.717ZM435.393.1v410.182h-89.04l.201-147.265H157.27v147.265H68.23V.1h89.04v174.077l189.484.3.3-174.377h88.34Zm64.029 303.835-.1.4-39.117 105.447h-.2l39.317-105.747.1-.1Zm1141.407 15.507h90.94v90.94h-90.94v-90.94ZM1264.262 90.34v.1-.1ZM1441.241 0l-176.779.2-.7 410.683h177.078c113.651 0 205.792-91.841 205.792-205.492S1554.992 0 1441.24 0Zm11.505 321.043c-2.001.2-3.902.4-5.903.4-1.9.1-3.802.2-5.803.2h-124.755l36.516-9.904V90.44h88.24c64.028 0 116.051 51.323 116.051 115.352-.1 60.026-45.82 109.348-104.346 115.25Zm-208.993 89.44h-125.056L971.032 262.916h-2.802v147.565h-.1l-88.639.5.1-296.13h88.64v59.726h136.66c23.71 0 43.02-19.209 43.02-43.02 0-21.91-16.408-40.017-37.718-42.618H848.578L815.763.4h295.23c38.218 1.701 72.233 19.809 95.143 47.421a121.504 121.504 0 0 1 12.306 17.708c11.305 19.409 17.808 41.919 17.808 66.03 0 72.532-58.827 131.258-131.259 131.258h-33.815l37.317 12.005 135.26 135.66Z"
-    />
-  </svg>
+  <a href="/">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1800 862"
+      alt="{{ site.title }} logo"
+      loading="lazy"
+    >
+      <path
+        d="M704.613 750.35 673.4 666.413l-79.835-214.795H497.72l-113.05 304.335L345.353 861.8l95.143.1L453 828.385l.3-.1 165.674-51.323L650.69 862h95.143l-41.219-111.65ZM492.72 722.438l-24.41 7.603 29.512-21.41 47.622-128.356v-.2l.2.2 42.018 112.65-94.942 29.513Zm355.158-155.87-9.704-22.31 9.704 22.31Zm272.02-115.25V861.8h-89.74v-.1h-54.723L838.173 544.259l17.307 72.932V861.8l-89.74-.5V451.317h32.315l-.1-.1h99.644l.1.1 132.459 306.637V451.317h89.74Zm462.606 89.24v73.632h130.058v91.04h-130.058l-31.414-.1.5.1 30.914 12.006v55.724H1800v88.74h-308.237v-.4h-.3V451.718H1800v88.84h-217.497Zm-111.75-89.54v90.54h-124.755c-64.028 0-115.951 51.322-115.951 115.35 0 60.128 45.72 109.45 104.246 115.252 2.001.2 3.902.3 5.903.4 1.9.1 3.901.1 5.802.1h124.756v89.14h-124.756c-113.65 0-205.791-91.841-205.791-205.492 0-113.55 91.64-205.09 205.191-205.29h125.356Zm80.837 254.212-.5-.1M177.478 451.117l-176.779.2L0 862h177.079c113.65 0 205.791-91.84 205.791-205.491S291.23 451.117 177.48 451.117Zm11.405 321.043c-2 .2-3.902.3-5.903.4-1.9.1-3.801.1-5.802.1H52.423l36.517-9.804V541.457h88.239c64.028 0 115.951 51.323 115.951 115.352.1 60.227-45.62 109.549-104.246 115.351ZM706.214 0H610.37l-112.85 303.935-.2.4-39.117 105.447-.2.4 95.142.1 12.706-33.915.2-.1 165.573-51.323.1.3 31.714 85.038h95.143L706.214 0ZM581.859 277.824l28.712-20.81 47.622-128.357v-.1l.2.2 41.918 112.35-118.452 36.717ZM435.393.1v410.182h-89.04l.201-147.265H157.27v147.265H68.23V.1h89.04v174.077l189.484.3.3-174.377h88.34Zm64.029 303.835-.1.4-39.117 105.447h-.2l39.317-105.747.1-.1Zm1141.407 15.507h90.94v90.94h-90.94v-90.94ZM1264.262 90.34v.1-.1ZM1441.241 0l-176.779.2-.7 410.683h177.078c113.651 0 205.792-91.841 205.792-205.492S1554.992 0 1441.24 0Zm11.505 321.043c-2.001.2-3.902.4-5.903.4-1.9.1-3.802.2-5.803.2h-124.755l36.516-9.904V90.44h88.24c64.028 0 116.051 51.323 116.051 115.352-.1 60.026-45.82 109.348-104.346 115.25Zm-208.993 89.44h-125.056L971.032 262.916h-2.802v147.565h-.1l-88.639.5.1-296.13h88.64v59.726h136.66c23.71 0 43.02-19.209 43.02-43.02 0-21.91-16.408-40.017-37.718-42.618H848.578L815.763.4h295.23c38.218 1.701 72.233 19.809 95.143 47.421a121.504 121.504 0 0 1 12.306 17.708c11.305 19.409 17.808 41.919 17.808 66.03 0 72.532-58.827 131.258-131.259 131.258h-33.815l37.317 12.005 135.26 135.66Z"
+      />
+    </svg>
+  </a>
 </header>
diff --git a/_layouts/event.html b/_layouts/event.html
@@ -1 +1,48 @@
-{{ page.title | slugify }}
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
+  <head>
+    {% include head.html %}
+    <script src="https://unpkg.com/[email protected]/dist/color.js"></script>
+  </head>
+  <body>
+    {% include header.html %}
+
+    <main>
+      <div
+        class="banner event-banner"
+        style="background-image: url({{ page.image }});"
+      >
+        <h1>{{ page.title }}</h1>
+      </div>
+
+      <iframe
+        width="520"
+        height="400"
+        frameborder="0"
+        scrolling="no"
+        marginheight="0"
+        marginwidth="0"
+        id="gmap_canvas"
+        src="https://maps.google.com/maps?width=520&amp;height=400&amp;hl=en&amp;q={{ page.location | uri_escape }}+()&amp;t=&amp;z=12&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"
+      ></iframe>
+    </main>
+
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        // Select all images
+        const images = document.querySelectorAll(".event-list-item-image");
+
+        images.forEach((img) => {
+          const index = img.dataset.index; // Get the index from the data attribute
+          colorjs.average(img.src).then((color) => {
+            const rgbColor = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+            const listItem = document.getElementById(
+              `event-list-item-${index}`
+            );
+            listItem.style.backgroundColor = rgbColor; // Apply the color to the <li>
+          });
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -5,49 +5,50 @@
     <script src="https://unpkg.com/[email protected]/dist/color.js"></script>
   </head>
   <body>
-    {% include header.html %}
+    <div class="banner">{% include globe.html %}</div>
 
-    <main>
-      {% include globe.html %}
+    <div class="page-title">
+      <h1>Events</h1>
 
       <nav>
         <button>North America</button>
         <button>South America</button>
         <button>Europe</button>
         <button>Asia</button>
       </nav>
+    </div>
 
-      <ol class="event-list">
-        {% assign sorted_posts = site.posts | sort: 'datestart' %} {% for post
-        in sorted_posts %}
-        <li class="event-list-item" id="event-list-item-{{ forloop.index }}">
-          <img
-            class="event-list-item-image"
-            src="{{ post.image }}"
-            alt="{{ post.title | smartify }} image"
-            data-index="{{ forloop.index }}"
-            draggable="false"
-            loading="lazy"
-          />
+    <ol class="event-list">
+      {% assign sorted_posts = site.posts | sort: 'datestart' %} {% for post in
+      sorted_posts %}
+      <li class="event-list-item" id="event-list-item-{{ forloop.index }}">
+        <img
+          class="event-list-item-image"
+          src="{{ post.image }}"
+          alt="{{ post.title | smartify }} image"
+          data-index="{{ forloop.index }}"
+          draggable="false"
+          loading="lazy"
+        />
 
-          <div class="event-list-item-metadata">
-            <a class="event-list-item-metadata-title" href="{{ post.url }}"
-              >{{ post.title | smartify }}</a
-            >
-            <div class="event-list-item-metadata-date">
-              <time datetime="{{ post.datestart | date: '%Y-%m-%d' }}">
-                {{ post.datestart | date: "%b %d" }}
-              </time>
+        <div class="event-list-item-metadata">
+          <a class="event-list-item-metadata-title" href="{{ post.url }}"
+            >{{ post.title | smartify }}</a
+          >
+          <div class="event-list-item-metadata-date">
+            <time datetime="{{ post.datestart | date: '%Y-%m-%d' }}">
+              {{ post.datestart | date: "%b %d" }}
+            </time>
 
-              {% if post.dateend %} &nbsp;–&nbsp;
-              <time datetime="{{ post.dateend | date: '%Y-%m-%d' }}">
-                {{ post.dateend | date: "%b %d" }}
-              </time>
-              {% endif %}
-            </div>
-            <div class="event-list-item-metadata-location">
-              <!-- prettier-ignore -->
-              {% assign location_parts = post.location | split: ',' %}
+            {% if post.dateend %} &nbsp;–&nbsp;
+            <time datetime="{{ post.dateend | date: '%Y-%m-%d' }}">
+              {{ post.dateend | date: "%b %d" }}
+            </time>
+            {% endif %}
+          </div>
+          <div class="event-list-item-metadata-location">
+            <!-- prettier-ignore -->
+            {% assign location_parts = post.location | split: ',' %}
               {% assign country_part = location_parts | last | strip %}
               {% assign country = country_part %} 
 
@@ -67,12 +68,11 @@
               {% endcase %}
 
               {{ flag }}
-            </div>
           </div>
-        </li>
-        {% endfor %}
-      </ol>
-    </main>
+        </div>
+      </li>
+      {% endfor %}
+    </ol>
 
     <script>
       document.addEventListener("DOMContentLoaded", function () {

diff --git a/_posts/2024-02-22-hard-dance-nyc-presents-sub-zero-project-2024.md b/_posts/2024-02-22-hard-dance-nyc-presents-sub-zero-project-2024.md
@@ -0,0 +1,9 @@
+---
+layout: event
+category: events
+title: "Hard Dance NYC presents: Sub Zero Project"
+date: 2023/10/04
+datestart: 2024/02/22
+location: 23 Meadow Street, Brooklyn, NY, USA
+image: /assets/img/events/hard-dance-nyc-presents-sub-zero-project-2024.jpg
+---
diff --git a/_posts/2024-02-22-hard-dance-nyc-presents-subzero-project-2024.md b/_posts/2024-02-22-hard-dance-nyc-presents-subzero-project-2024.md
diff --git a/_posts/2024-03-09-avondje-outsiders-2024.md b/_posts/2024-03-09-avondje-outsiders-2024.md
@@ -1,7 +1,7 @@
 ---
 layout: event
 category: events
-title: "Avondje Outsiders 2024"
+title: "Avondje Outsiders"
 date: 2023/10/04
 datestart: 2024/03/09
 location: Ahoyweg 10, 3084 BA Rotterdam, Nederland

diff --git a/_posts/2024-07-19-tomorrowland-2024-weekend-1.md b/_posts/2024-07-19-tomorrowland-2024-weekend-1.md
@@ -1,7 +1,7 @@
 ---
 layout: event
 category: events
-title: "Tomorrowland 2024 - Weekend 1"
+title: "Tomorrowland 2024: Weekend 1"
 date: 2023/11/15
 datestart: 2024/07/19
 dateend: 2024/07/21

diff --git a/_posts/2024-07-19-tomorrowland-2024-weekend-2.md b/_posts/2024-07-19-tomorrowland-2024-weekend-2.md
@@ -1,7 +1,7 @@
 ---
 layout: event
 category: events
-title: "Tomorrowland 2024 - Weekend 2"
+title: "Tomorrowland 2024: Weekend 2"
 date: 2023/11/15
 datestart: 2024/07/26
 dateend: 2024/07/28

diff --git a/_sass/_event-banner.scss b/_sass/_event-banner.scss
@@ -0,0 +1,5 @@
+.event-banner {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
diff --git a/_sass/_event-list-filter.scss b/_sass/_event-list-filter.scss
@@ -3,8 +3,6 @@ nav {
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.5rem;
-  padding-left: max(var(--page-padding), env(safe-area-inset-left));
-  padding-right: max(var(--page-padding), env(safe-area-inset-right));
 
   > button {
     border-radius: 0.5rem;

diff --git a/_sass/_globe.scss b/_sass/_globe.scss
diff --git a/_sass/_header.scss b/_sass/_header.scss
@@ -4,7 +4,14 @@ header {
   align-items: center;
   justify-content: center;
 
-  > svg {
+  a {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  svg {
     fill: var(--color-text);
     height: 75%;
   }