reddit-gifts

EmmaWightman · Mar 23, 2020 · d368478 · d368478
1 parent ecdeb3b
commit d368478
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -41,6 +41,8 @@ When giving context, consider these few points;
 
 ## New to Github? 
 
+There's a small tutorial below but we've also made [a video](https://vimeo.com/399993277).
+
 If you're logged into a github account then these are the steps that you need to follow. 
 
 First you need to navigate to `thismonth.rocks/src/ideas`. You should see a screenshot like below. You can create a new file if you want to add a card to the webpage.

diff --git a/public/img/icons/stranger-gifts.svg b/public/img/icons/stranger-gifts.svg
diff --git a/public/index.html b/public/index.html
@@ -876,6 +876,79 @@
     </div>
 </div>
 
+  <style>
+    .modal {
+      transition: opacity 0.25s ease;
+    }
+    body.modal-active {
+      overflow-x: hidden;
+      overflow-y: visible !important;
+    }
+
+    a{
+      font-weight: 700;
+    }
+  </style>
+  <div class="sm:w1/1 md:w-1/3 lg:w-1/4 xl:w-1/6 overflow-hidden p-1">
+    <div class="px-6 py-4">
+      <p class="modal-open cursor-pointer font-bold bg-gray-100 sm:text-xl border-b-2 border-gray-700 lg:text-l mb-2 pt-2 pb-2 text-center" data-toggle="modal" data-target="stranger-gifts">
+        Gift a Stranger
+      </p>
+      <div class="px-6 py-4">
+
+          <a href="/mind.html">
+            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-xs font-semibold text-gray-700 mr-2">#mind</span>
+          </a>
+
+      </div>
+      <img class="cursor-pointer modal-open w-full p-8 sm:p-8 md:p-8 lg:p-8" data-toggle="modal" data-target="stranger-gifts" src="/img/icons/stranger-gifts.svg">
+      <p class="text-gray-600 text-base lg:visible">
+        Give you some you receive some! Join the anonymous gift-giving competitions.
+      </p>
+    </div>
+  </div>
+  <div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center" id="stranger-gifts">
+    <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
+
+    <div class="modal-container max-w-screen-md bg-white w-11/12 mx-auto rounded shadow-lg z-50 overflow-y-auto">
+
+    <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
+        <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+        <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
+        </svg>
+        <span class="text-sm">Esc</span>
+    </div>
+
+    <div class="modal-content text-left px-6">
+      <div class="flex items-center">
+          <img class="p-6" width=100 src="/img/icons/stranger-gifts.svg">
+          <span class="sm:text-lg md:text-4xl font-bold">Gift a Stranger</span>
+          </div>
+      </div>
+      <div class="px-8 pb-4 text-xs sm:text-base">
+        <p>The largest gift exchange on the planet is <a href="https://www.redditgifts.com/">reddit gifts</a>. They 
+offer all sorts of categories for gift giving and they have a match-making process. You can
+ send a gift to Slovenia and get one from Africa.</p>
+<p>There's some gems that were given too. There's that time when 
+<a href="https://www.redditgifts.com/gallery/secret-santa-2013/gift/secret-santa-revealed/">Arnold Schwarzenegger drew a cat</a> and
+that time when somebody sent a <a href="https://www.redditgifts.com/gallery/secret-santa-2014/gift/whats-safe-2/">fully functional safe</a>.</p>
+<p>The best advice here is go to overboard with decorations. It's a great feeling to make
+somebody feel special. Especially if the whole world is doing it.</p>
+
+
+          <p class="text-gray-600 text-xs">If you want to commit, consider reminding yourself via <a href="https://dearme.email">dearme.email</a>.</p>
+
+      </div>
+      <div class="px-8 pb-4 text-xs md:text-base">
+        <button class="float-right modal-close bg-white hover:bg-gray-100 text-gray-800 font-semibold mt-2 p-2 px-4 border border-gray-400 rounded shadow">
+          Close
+        </button>
+        <br><br>
+      </div>
+
+    </div>
+</div>
+
   <style>
     .modal {
       transition: opacity 0.25s ease;

diff --git a/public/mind.html b/public/mind.html
@@ -362,6 +362,79 @@
     </div>
 </div>
 
+  <style>
+    .modal {
+      transition: opacity 0.25s ease;
+    }
+    body.modal-active {
+      overflow-x: hidden;
+      overflow-y: visible !important;
+    }
+
+    a{
+      font-weight: 700;
+    }
+  </style>
+  <div class="sm:w1/1 md:w-1/3 lg:w-1/4 xl:w-1/6 overflow-hidden p-1">
+    <div class="px-6 py-4">
+      <p class="modal-open cursor-pointer font-bold bg-gray-100 sm:text-xl border-b-2 border-gray-700 lg:text-l mb-2 pt-2 pb-2 text-center" data-toggle="modal" data-target="stranger-gifts">
+        Gift a Stranger
+      </p>
+      <div class="px-6 py-4">
+
+          <a href="/mind.html">
+            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-xs font-semibold text-gray-700 mr-2">#mind</span>
+          </a>
+
+      </div>
+      <img class="cursor-pointer modal-open w-full p-8 sm:p-8 md:p-8 lg:p-8" data-toggle="modal" data-target="stranger-gifts" src="/img/icons/stranger-gifts.svg">
+      <p class="text-gray-600 text-base lg:visible">
+        Give you some you receive some! Join the anonymous gift-giving competitions.
+      </p>
+    </div>
+  </div>
+  <div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center" id="stranger-gifts">
+    <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
+
+    <div class="modal-container max-w-screen-md bg-white w-11/12 mx-auto rounded shadow-lg z-50 overflow-y-auto">
+
+    <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
+        <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+        <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
+        </svg>
+        <span class="text-sm">Esc</span>
+    </div>
+
+    <div class="modal-content text-left px-6">
+      <div class="flex items-center">
+          <img class="p-6" width=100 src="/img/icons/stranger-gifts.svg">
+          <span class="sm:text-lg md:text-4xl font-bold">Gift a Stranger</span>
+          </div>
+      </div>
+      <div class="px-8 pb-4 text-xs sm:text-base">
+        <p>The largest gift exchange on the planet is <a href="https://www.redditgifts.com/">reddit gifts</a>. They 
+offer all sorts of categories for gift giving and they have a match-making process. You can
+ send a gift to Slovenia and get one from Africa.</p>
+<p>There's some gems that were given too. There's that time when 
+<a href="https://www.redditgifts.com/gallery/secret-santa-2013/gift/secret-santa-revealed/">Arnold Schwarzenegger drew a cat</a> and
+that time when somebody sent a <a href="https://www.redditgifts.com/gallery/secret-santa-2014/gift/whats-safe-2/">fully functional safe</a>.</p>
+<p>The best advice here is go to overboard with decorations. It's a great feeling to make
+somebody feel special. Especially if the whole world is doing it.</p>
+
+
+          <p class="text-gray-600 text-xs">If you want to commit, consider reminding yourself via <a href="https://dearme.email">dearme.email</a>.</p>
+
+      </div>
+      <div class="px-8 pb-4 text-xs md:text-base">
+        <button class="float-right modal-close bg-white hover:bg-gray-100 text-gray-800 font-semibold mt-2 p-2 px-4 border border-gray-400 rounded shadow">
+          Close
+        </button>
+        <br><br>
+      </div>
+
+    </div>
+</div>
+
   <style>
     .modal {
       transition: opacity 0.25s ease;

diff --git a/public/tips.json b/public/tips.json
diff --git a/src/ideas/stranger-gifts.svg → src/ideas/stranger-gifts.md b/src/ideas/stranger-gifts.svg → src/ideas/stranger-gifts.md
@@ -7,12 +7,12 @@ tags:
 ---
 
 The largest gift exchange on the planet is [reddit gifts](https://www.redditgifts.com/). They 
-offer all sorts of categories for gift giving. You can send a gift to Slovenia and get one 
-from Africa. 
+offer all sorts of categories for gift giving and they have a match-making process. You can
+ send a gift to Slovenia and get one from Africa. 
 
 There's some gems that were given too. There's that time when 
 [Arnold Schwarzenegger drew a cat](https://www.redditgifts.com/gallery/secret-santa-2013/gift/secret-santa-revealed/) and
 that time when somebody sent a [fully functional safe](https://www.redditgifts.com/gallery/secret-santa-2014/gift/whats-safe-2/).
 
 The best advice here is go to overboard with decorations. It's a great feeling to make
-somebody feel special.
+somebody feel special. Especially if the whole world is doing it.
diff --git a/src/img/icons/stranger-gifts.svg b/src/img/icons/stranger-gifts.svg