Social buttons for website

docs/manifest.json

@@ -3,8 +3,8 @@
   "short_name": "30s of code",
   "start_url": "./index.html",
   "display": "standalone",
-  "background_color": "#f8f8f8",
+  "background_color": "#fff",
-  "theme_color": "#111",
+  "theme_color": "#202124",
   "description": "Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.",
   "icons": [
     {

docs/scss/style.scss

@@ -513,6 +513,8 @@ h2.category-name {
     padding-bottom: calc(0.75 * var(#{$universal-padding-var}));
     margin-bottom: calc(2 * var(#{$universal-margin-var}));
     border-bottom: $__1px solid var(#{$border-color-var});
+    padding-top: 5rem;
+    margin-top: -4.25rem;
   }
   &.code-card {
     margin-top: calc(5 * var(#{$universal-margin-var}));
@@ -812,6 +814,29 @@ nav {
       color: var(#{$nav-link-fore-color-var});
     }
   }
+  button.social {
+    width: 33.333%;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    box-sizing: border-box;
+    height: 4rem;
+    background-position: center center;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    &.fb {
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f0f0f0' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-facebook'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'%3E%3C/path%3E%3C/svg%3E");
+      background-color: #1565c0;
+    }
+    &.instagram {
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-instagram'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'%3E%3C/rect%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'%3E%3C/path%3E%3Cline x1='17.5' y1='6.5' x2='17.5' y2='6.5'%3E%3C/line%3E%3C/svg%3E");
+      background-color: #ec407a;
+    }
+    &.twitter {
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23f0f0f0' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-twitter'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'%3E%3C/path%3E%3C/svg%3E");
+      background-color: #03a9f4;
+    }
+  }
 }
 
 [type="search"] {

scripts/web.js

@@ -191,6 +191,7 @@ try {
   <h4 class="static-link"><a href="./glossary">Glossary</a></h4>
   <h4 class="static-link"><a href="./contributing">Contributing</a></h4>
   <h4 class="static-link"><a href="./about">About</a></h4>
+  <div><button class="social fb"></button><button class="social instagram"></button><button class="social twitter"></button></div>
   </nav><main class="col-centered"><span id="top"><br/><br/></span>`;
   // Loop over tags and snippets to create the list of snippets
   for (let tag of taggedData) {

static-parts/page-start.html

@@ -76,6 +76,20 @@
             document.querySelector('[type="search"]').classList = '';
             document.querySelector('.menu-button').classList = 'menu-button';
           }
+          else if (event.target.classList.contains('social')){
+            if (event.target.classList.contains('fb')){
+              setTimeout(function () { window.location = "https://www.facebook.com/30secondsofcode"; }, 25);
+              window.location = "fb://30secondsofcode";
+            }
+            else if (event.target.classList.contains('instagram')) {
+              setTimeout(function () { window.location = "https://www.instagram.com/30secondsofcode"; }, 25);
+              window.location = "instagram://30secondsofcode";
+            }
+            else if (event.target.classList.contains('twitter')) {
+              setTimeout(function () { window.location = "https://twitter.com/30secondsofcode"; }, 25);
+              window.location = "twitter://30secondsofcode";
+            } 
+          }
           else if (event.target.classList.contains('copy-button')) {
             const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
             const textArea = document.createElement("textarea");