Merge pull request #700 from naher94/easter-egg

Easter Egg Rework
naher94 · Mar 14, 2024 · 6c8e245 · 6c8e245
2 parents abf1b14 + 8709e2a
commit 6c8e245
Show file tree

Hide file tree

Showing 37 changed files with 423 additions and 187 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/_config.yml b/_config.yml
@@ -13,8 +13,8 @@ description: > # this means to ignore newlines until "baseurl:"
 
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://rehanbutt.com" # the base hostname & protocol for your site
-version: 7.22.0
-version-naming: [Apricot, Blackcurrent, Coconut, Dragonfruit, Elderberry, Fig, Guava]
+version: 8.0.0
+version-naming: [Apricot, Blackcurrent, Coconut, Dragonfruit, Elderberry, Fig, Guava, Honeydew]
 
 # Build settings
 markdown: kramdown
@@ -43,4 +43,6 @@ collections:
     output: true
   changelog:
     output: false
+  easter-eggs:
+    output: false
 
diff --git a/_easter-eggs/car-horn.md b/_easter-eggs/car-horn.md
@@ -0,0 +1,5 @@
+---
+title: Car Horn
+description: Hit the horn and find your car!
+icon: '<i class="fas fa-bullhorn"></i>'
+---
diff --git a/_easter-eggs/code-snoop.md b/_easter-eggs/code-snoop.md
@@ -0,0 +1,5 @@
+---
+title: Code Snoop
+description: Become a JavaScript detective
+icon: '<i class="fas fa-code"></i>'
+---
diff --git a/_easter-eggs/high-five.md b/_easter-eggs/high-five.md
@@ -0,0 +1,5 @@
+---
+title: High Five
+description: Up high, down low, too slow!
+icon: '<i class="fas fa-hand-peace"></i>'
+---
diff --git a/_easter-eggs/konami.md b/_easter-eggs/konami.md
@@ -0,0 +1,5 @@
+---
+title: Konami
+description: Up up down down...
+icon: '<i class="fas fa-gamepad"></i>'
+---
diff --git a/_easter-eggs/paddington.md b/_easter-eggs/paddington.md
@@ -0,0 +1,5 @@
+---
+title: Paddington
+description: '“A wise bear always keeps a marmalade sandwich in his hat in case of emergency.”'
+icon: '<i class="fas fa-bread-slice"></i>'
+---
diff --git a/_easter-eggs/to-dos.md b/_easter-eggs/to-dos.md
@@ -0,0 +1,5 @@
+---
+title: To Dos
+description: Check check done!
+icon: '<i class="fas fa-tasks"></i>'
+---
diff --git a/_includes/easter-egg-snackbar.html b/_includes/easter-egg-snackbar.html
@@ -0,0 +1,10 @@
+<div class="grid-x align-center" id="easter-egg-snackbar-container">
+  <a href="{% link easter-egg-vault.html %}">
+    <div class="grid-x cell small-12 medium-4 align-middle" id="easter-egg-snackbar">
+      <div class="cell auto text-container">
+        <p class="description">"<span id="achievement-name"></span>" Achievement Unlocked</p>
+        <p class="view">View Achievements</p>
+      </div>
+    </div>
+  </a>
+</div>
diff --git a/_includes/foot.html b/_includes/foot.html
@@ -10,6 +10,9 @@
 
 <script src="/js/app.js" type="text/javascript"></script>
 
+{% if page.url == '/easter-eggs' %}
+  <script src="/js/easter-egg-achievements.js" type="text/javascript"></script>
+{% endif %}
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-XQEN9JC89E"></script>

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,36 +1,12 @@
 <footer class="site-footer">
-  <div class="vault-wrapper">
-    <div class="grid-x grid-container">
-      <input class="spaceship-btn" type="checkbox" id="spaceship-btn" onclick="gtag('event', 'Easter Eggs - Vault Found', {
-        'event_category': 'Special',
-        'event_label': 'Vault Found'
-      });">
-      <label for="spaceship-btn" class="spaceship-icon">
-        <span class="spaceship">🛸</span>
-      </label>
-      <div class="vault cell grid-x">
-        <div class="cell">
-          <h2>You Found the Vault</h2>
-          <p class="subheader">Uncover easter eggs throughout the site to unlock achievements</p>
-        </div>
-        {%- comment -%}<div class="cell medium-6">
-          <label>Secret Password</label>
-          <input type="text" placeholder="Secret Password">{%- endcomment -%}
-        <div class="cell grid-x grid-padding-x grid-padding-y" id="badge-container">
-         {%- comment -%} Badges get injected here {%- endcomment -%}
-        </div>
-      </div>
-    </div>
-  </div>
-
     <div class="grid-x grid-container footer-content align-justify">
           <div class="site-pages small-12 large-shrink cell grid-x">
 
             <div class="cell shrink nav-section">
               <p class="section-title">The Main Stuff</p>
               <div class="nav-wrap"><a class="nav" href="/">Home</a></div>
               {% for my_page in site.pages %}
-                {% if my_page.exclude != "true" and my_page.footer-main == true %}
+                {% if my_page.exclude-footer != true and my_page.footer-main == true %}
                   {% if my_page.title %}
                   <div class="nav-wrap">
                     <a class="nav" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
@@ -43,18 +19,22 @@ <h2>You Found the Vault</h2>
             {%- comment -%} footer-other section {%- endcomment -%}
             <div class="cell shrink nav-section">
               <p class="section-title">Other Things</p>
-              {% for my_page in site.pages %}
-                {% if my_page.exclude != "true" and my_page.footer-other == true %}
+              {% assign items_order = site.pages | sort: 'sort-order' %}
+              {% for my_page in items_order %}
+                {% if my_page.exclude-footer != true and my_page.footer-other == true %}
                   {% if my_page.title %}
                   <div class="nav-wrap">
                     <a class="nav" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
                   </div>
                   {% endif %} 
                 {% endif %}
+                {%- comment -%}This sets the order manually zero indexed array hence the 2 for third position{%- endcomment -%}
+                {%- if my_page.sort-order == 2 -%}
+                <div class="nav-wrap">
+                  <a class="nav" rel="noopener" target="_blank" href="https://society6.com/rehanbutt">Store<span class="visually-hidden">Opens a new window</span></a>
+                </div>
+                {%- endif -%}
               {% endfor %}
-              <div class="nav-wrap">
-                <a class="nav" rel="noopener" target="_blank" href="https://society6.com/rehanbutt">Store<span class="visually-hidden">Opens a new window</span></a>
-              </div>
             </div>
 
             <div class="cell shrink nav-section">

diff --git a/_includes/header.html b/_includes/header.html
@@ -68,7 +68,7 @@
           <ul class="menu-links">
             <li class="nav-item-container"><a class="nav" href="/">Home</a></li>
               {% for my_page in site.pages %}
-                {% if my_page.exclude != "true" %}
+                {% if my_page.exclude-header != true %}
                   {% if my_page.title %}
                     <li class="nav-item-container"><a class="nav" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a></li>
                   {% endif %}
@@ -80,7 +80,7 @@
         <div class="navbar">
           <a class="nav nav-home" href="/" title="home"><i class="fas fa-home"></i></a>
             {% for my_page in site.pages %}
-              {% if my_page.exclude != "true" %}
+              {% if my_page.exclude-header != true %}
                 {% if my_page.title %}
                   <a class="nav" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
                 {% endif %}

diff --git a/_layouts/blank.html b/_layouts/blank.html
@@ -4,6 +4,7 @@
 {% include head.html %}
 
 <body>
+  {% include easter-egg-snackbar.html %}
   {% include tag-manager.html %}
   {% include header.html %}
 

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,12 +4,12 @@
 {% include head.html %}
 
 <body>
+  {% include easter-egg-snackbar.html %}
   {% include tag-manager.html %}
   {% include header.html %}
   <main class="page-content grid-container">
     <div class="grid-x grid-margin-x content-wrapper"> <!-- TODO does this grid margin x need to be here? messing with child use of grid-margin-x -->
       {{ content }}
-      {%- comment -%} include marmalde banner here {%- endcomment -%}
       {% include easter-egg-banner.html %}
     </div>
   </main>

diff --git a/_layouts/post-hero.html b/_layouts/post-hero.html
@@ -47,7 +47,6 @@ <h1 itemprop="name headline">{{ page.title }}</h1>
       </div>
 
     </article>
-    <!-- include marmalde banner here -->
     {% include easter-egg-banner.html %}
   </div>
 </div>
diff --git a/_layouts/post-photo.html b/_layouts/post-photo.html
@@ -54,7 +54,6 @@ <h1 itemprop="name headline">{{ page.title }}</h1>
       </div>
 
     </article>
-    <!-- include marmalde banner here -->
     {% include easter-egg-banner.html %}
   </div>
 </div>
diff --git a/_projects/qulr.markdown b/_projects/qulr.markdown
@@ -28,8 +28,7 @@ I wanted a better way to hold my colors. Collecting Post-its, swatch books and j
 
 <div class="grid-x">
   <div class="cell medium-6" style="position:relative;">
-    <!-- <img onclick="paddingtonAdd()" src="../img/paddington.svg" alt="Paddington Bear" class="paddington bear-1"> -->
-    <img src="../img/qulr/tilevariationsmarmalade.png" alt="Tile Iterations Series">
+    <img src="../img/qulr/tilevariationsmarmalade.png" alt="Tile Iterations Series" onclick="paddington()">
   </div>
   <div class="cell medium-6">
     <img src="../img/qulr/tilevariationsgrape.png" alt="Tile Iterations Series">

diff --git a/_sass/about.scss b/_sass/about.scss
@@ -453,6 +453,7 @@ span.wave {
   animation-iteration-count: infinite;/* Never stop waving :) */
   transform-origin: 70% 70%;/* Pivot around the bottom-left palm */
   display: inline-block;
+  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='50' height='60' viewport='0 0 100 100' style='fill:black;font-size:30px;'><text y='50%'>👋</text></svg>") 16 0, auto;
 }
 
 @keyframes rainbow {

diff --git a/_sass/easter-egg.scss b/_sass/easter-egg.scss
@@ -0,0 +1,146 @@
+@mixin easter-card{
+  background-color: semantic-color(easter-egg-card-bg);
+  box-shadow: inset 0 0 0 3px semantic-color(easter-egg-card-outline);
+  border-radius: $tile-radius-big;
+}
+
+.easter-egg-vault-container{
+  margin-block-end: 2rem;
+  .progress-card{
+    @include easter-card();
+    margin-block-start: 2em;
+    .image-container{
+      margin: 0;
+      padding-block-start: 1.5em;
+      @include breakpoint(small only) {
+        padding-inline: 1em;
+        padding-block-start: 0;
+      }
+    }
+    .text-container{
+      font-weight: $lato-bold;
+      font-size: 3em;
+      padding-inline: 0.5em;
+      padding-block: 1em;
+      @include breakpoint(small only) {
+        text-align: center;
+      }
+      p{
+        padding: 0;
+        margin: 0;
+        line-height: 1;
+        span{
+          font-size: 1.5em;
+          font-weight: $lato-black;
+        }
+      }
+    }
+    img{
+      @media (prefers-color-scheme: dark) {
+        filter: none;
+      }
+    }
+    .lightmode-flip{
+      @media (prefers-color-scheme: dark) {
+        display: none;
+      } 
+    }
+    .darkmode-flip{
+      display: none;
+      @media (prefers-color-scheme: dark) {
+        display: block;
+      } 
+    }
+  }
+  .intro-description{
+    font-size: 1.5em;
+    line-height: 1.2em;
+    padding: 0;
+    margin: 1em .5em;
+  }
+  .achievement-card{
+    padding-inline: 2em;
+    padding-block: 3em;
+    @include easter-card();
+
+    @include breakpoint(small only) {
+      padding-inline: 1em;
+      padding-block: 1.5em;
+    }
+    .icon-container{
+      aspect-ratio: 1/1;
+      background-color: semantic-color(easter-egg-card-icon-bg);
+      border-radius: $pill-radius;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 2.5em;
+      width: 2.5em;
+      box-shadow: inset 0 4px 6px -2px rgba($pure-black, 0.25);
+      margin: auto;
+      @include breakpoint(small only) {
+        font-size: 2.25em;
+        width: 2.25em;
+
+      }
+      .unlocked-icon{
+        display: none;
+      }
+    }
+    &[class*="unlocked"]{
+      .empty-icon{
+        display: none;
+      }
+      .unlocked-icon{
+        display: block;
+      }
+    }
+    // TODO add this for each easter egg
+    &.konami-unlocked{
+      .icon-container{
+        background-color: rgb(121, 225, 87); //TODO update color and semantic
+      }
+    }
+    &.car-horn-unlocked{
+      .icon-container{
+        background-color: rgb(255, 91, 91); //TODO update color and semantic
+      }
+    }
+    &.code-snoop-unlocked{
+      .icon-container{
+        background-color: rgb(170, 82, 230); //TODO update color and semantic
+      }
+    }
+    &.paddington-unlocked{
+      .icon-container{
+        background-color: #ffB947; //TODO update color and semantic
+      }
+    }
+    &.todos-unlocked{
+      .icon-container{
+        background-color: #f5e63f; //TODO update color and semantic
+      }
+    }
+    &.high-five-unlocked{
+      .icon-container{
+        background-color: #7588ff; //TODO update color and semantic
+      }
+    }
+    p{
+      margin: 0;
+      padding: 0;
+      text-align: center;
+    }
+    .easter-egg-name{
+      font-size: 1.5em;
+      font-weight: $lato-bold;
+      line-height: 1.2;
+      margin-block-start: 1em;
+    }
+    .easter-egg-description{
+      font-size: 1em;
+      line-height: 1.2;
+      color: semantic-color(easter-egg-card-description);
+    }
+  }
+}