Merge pull request creativecommons#271 from Dhruvi16/update_footer

Dhruvi16 · web-flow · commit f408914ff251 · 2020-05-23T20:06:32.000+05:30
Update footer according to the vocabulary.
diff --git a/themes/vocabulary_theme/templates/layout.html b/themes/vocabulary_theme/templates/layout.html
@@ -2,10 +2,11 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="shortcut icon" type="image/x-icon" href="{{ '/static/favicon.ico'|url }}">
-<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet"> 
+<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"
+  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 <link rel="stylesheet" href="{{ '/static/gen/style.css'|url }}">
 <link rel="stylesheet" href="{{ get_pygments_stylesheet()|url }}">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@creativecommons/vocabulary@1.0.0-beta.14/css/vocabulary.css">
 <meta property="og:site_name" content="Creative Commons" />
 <meta property="og:title" content="{{ this.title }}" />
 {% if this.description %}
@@ -20,22 +21,26 @@
 <meta property="og:url" content="{{ this|url }}" />
 <meta property="og:type" content="article" />
 {% set image = this.attachments.images.first() %}
-      {% if image %}
+{% if image %}
 <meta property="og:image" content="{{ image|url(external=true)}}" />
-      {% endif %}
+{% endif %}
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:title" content="{{ this.title }}">
 <meta name="twitter:description" content="{{ desc }}">
-      {% if image %}
+{% if image %}
 <meta name="twitter:image" content="{{ image|url(external=true) }}">
-      {% endif %}
+{% endif %}
 <meta name="twitter:site" content="@creativecommons">
 <meta name="twitter:creator" content="@creativecommons">
-<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.3.1.min.js"
+  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
+  integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
+  integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
 <script type="text/javascript" src="{{ '/static/gen/script.js'|url }}"></script>
 <title>{% block title %}Welcome{% endblock %} — Creative Commons on GitHub</title>
+
 <body>
   <div class="ga-script">{{ generate_google_analytics() }}</div>
   <header class="main-header">
@@ -52,7 +57,7 @@
               aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
             </button>
-        
+
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
               <ul class="navbar-nav">
                 <li class="nav-item{% if this.is_child_of('/blog') %} active{% endif%}">
@@ -68,7 +73,7 @@
                       ['/contributing-code/github-repo-guidelines', 'GitHub Repo Guidelines'],
                       ['/contributing-code/cc-search', 'CC Search'],
                     ] %}
-                      <a class="dropdown-item" href="{{ href|url }}">{{ title }}</a>
+                    <a class="dropdown-item" href="{{ href|url }}">{{ title }}</a>
                     {% endfor %}
                   </div>
                 </li>
@@ -83,7 +88,7 @@
                       ['/community/code-of-conduct', 'Code of Conduct'],
                       ['/community/code-of-conduct/enforcement', 'Code of Conduct Enforcement'],
                     ] %}
-                      <a class="dropdown-item" href="{{ href|url }}">{{ title }}</a>
+                    <a class="dropdown-item" href="{{ href|url }}">{{ title }}</a>
                     {% endfor %}
                   </div>
                 </li>
@@ -98,7 +103,7 @@
                       ['/internships/mentor-guide', 'Mentor Guide'],
                       ['/internships/history', 'History'],
                     ] %}
-                      <a class="dropdown-item" href="{{ href|url }}">{{ title }}</a>
+                    <a class="dropdown-item" href="{{ href|url }}">{{ title }}</a>
                     {% endfor %}
                   </div>
                 </li>
@@ -112,7 +117,7 @@
                       ['/archives/old-tech-blog', 'CC Tech Blog (2007-2014)'],
                       ['https://lists.ibiblio.org/pipermail/cc-devel/', 'cc-devel mailing list (2005-2015)'],
                     ] %}
-                      <a class="dropdown-item" href="{{ href }}">{{ title }}</a>
+                    <a class="dropdown-item" href="{{ href }}">{{ title }}</a>
                     {% endfor %}
                   </div>
                 </li>
@@ -122,7 +127,18 @@
               </ul>
           </nav>
         </div>
-        <a href="https://github.com/creativecommons/creativecommons.github.io-source" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
+        <a href="https://github.com/creativecommons/creativecommons.github.io-source" target="_blank"
+          class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
+            style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);"
+            aria-hidden="true">
+            <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+            <path
+              d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+              fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+            <path
+              d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+              fill="currentColor" class="octo-body"></path>
+          </svg>
         </a>
       </div>
     </div>
@@ -138,17 +154,86 @@ <h1 class="page-title pb-3 mb-4">{% block header %}{{ this.title }}{% endblock %
       </div>
     </div>
   </div>
-  <footer class="main-footer bg-dark">
-    <div class="container-fluid">
-      <div class="row justify-content-md-center">
-        <div class="col-lg-9 col-md-9 col-sm-12 footer text-light py-4 px-3">
-          <small>
-            <p><a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License"
-                  style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a></p>
-            <p class="text-muted">All the content on this website is licensed under a <strong><a rel="license"
-                  href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International
-                  License</a></strong> unless otherwise specified.</p>
-          </small>
+  <footer class="main-footer">
+    <div class="container">
+      <div class="columns">
+        <div class="column">
+          <a href="https://creativecommons.org" class="main-logo margin-bottom-bigger">
+            <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 304 73"
+              class=has-text-white>
+              <use href="#logomark"></use>
+            </svg>
+          </a>
+          <p>
+            <address class="margin-bottom-normal">Creative Commons<br />PO Box 1866, Mountain View CA 94042</address>
+            <a href="mailto:info@creativecommons.org" class="mail">info@creativecommons.org</a><br />
+            <a href="tel://+1-415-429-6753" class="phone">+1-415-429-6753</a>
+          </p>
+          <div class="margin-vertical-large">
+            <a href="https://www.instagram.com/creativecommons" class="social has-text-white" target="_blank"
+              rel="noopener">
+              <i class="icon margin-right-small is-size-4">instagram</i>
+            </a>
+            <a href="https://www.twitter.com/creativecommons" class="social has-text-white" target="_blank"
+              rel="noopener">
+              <i class="icon margin-right-small is-size-4">twitter</i>
+            </a>
+            <a href="https://www.facebook.com/creativecommons" class="social has-text-white" target="_blank"
+              rel="noopener">
+              <i class="icon margin-right-small is-size-4">facebook</i>
+            </a>
+            <a href="https://www.linkedin.com/company/creative-commons/" class="social has-text-white" target="_blank"
+              rel="noopener">
+              <i class="icon margin-right-small is-size-4">linkedin</i>
+            </a>
+          </div>
+        </div>
+        <div class="column is-half">
+          <nav class="footer-navigation">
+            <ul class="menu">
+              <li>
+                <a href="{{ '/blog'|url }}" class="menu-item">Blog</a>
+              </li>
+              <li>
+                <a href="{{ '/contributing-code'|url }}" class="menu-item">Contributing Guidelines</a>
+              </li>
+              <li>
+                <a href="{{ '/community/community-team'|url }}" class="menu-item">Community Teams</a>
+              </li>
+              <li>
+                <a href="{{ '/contributing-code/projects'|url }}" class="menu-item">Project List</a>
+              </li>
+            </ul>
+          </nav>
+          <div class="subscription">
+            <h5 class="b-header">Subscribe to our newsletter</h5>
+            <form class="newsletter">
+              <input type="text" class="input" placeholder="Your email">
+              <input type="submit" value="subscribe" class="button small">
+            </form>
+          </div>
+          <div class="attribution margin-top-bigger">
+            <p class="caption">Except where otherwise <a href="https://creativecommons.org/policies#license"
+                target="_blank">noted</a>, content on this site is licensed under a <a
+                href="https://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons Attribution 4.0
+                International license</a>. Icons by <a href="https://fontawesome.com/" target="_blank" rel="noopener"
+                class="has-text-white">Font Awesome</a>.</p>
+            <div class="margin-top-smaller">
+              <i class="icon margin-right-small is-size-4">cclogo</i>
+              <i class="icon margin-right-small is-size-4">ccby</i>
+            </div>
+          </div>
+        </div>
+        <div class="column">
+          <aside class="donate-section">
+            <h5>Our work relies on you!</h5>
+            <p>Help us keep the internet free and open.</p>
+            <a class="button small donate">
+              <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 80 72">
+                <use href="#letterheart"></use>
+              </svg>Donate Now
+            </a>
+          </aside>
         </div>
       </div>
     </div>
diff --git a/webpack/js/main.js b/webpack/js/main.js
@@ -1,9 +1,35 @@
-$(document).ready(function() {
-    $(window).scroll(function() {
+$(document).ready(function () {
+    $(window).scroll(function () {
         if ($(this).scrollTop() > 500) {
             $('#back-to-top').fadeIn();
         } else {
             $('#back-to-top').fadeOut();
         }
     });
+
+    patchAssetIntoDom('/assets/logos/cc/logomark.svg');
+    patchAssetIntoDom('/assets/logos/cc/letterheart.svg');
 });
+
+const getFullyQualifiedUrl = (path, version) => {
+    let baseUrl = "https://unpkg.com/@creativecommons/vocabulary"
+    if (version) {
+        baseUrl = `${baseUrl}@${version}`
+    }
+    return `${baseUrl}/${path}`
+}
+
+const patchAssetIntoDom = (asset, version = null) => {
+    const ajax = new XMLHttpRequest();
+    ajax.open("GET", getFullyQualifiedUrl(asset, version), true);
+    ajax.onload = () => {
+        var div = document.createElement("div");
+        // Render SVG in the page
+        div.innerHTML = ajax.responseText;
+        div.style.display = 'none';
+        document.body.insertBefore(div, document.body.childNodes[0]);
+    }
+
+    ajax.send();
+}
+
diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
@@ -46,10 +46,6 @@ h2 {
   }
 }
 
-.footer {
-  bottom: 0;
-}
-
 .card-columns {
   column-count: 2;
 }
@@ -111,17 +107,6 @@ h2 {
   font-size: 0.8rem;
 }
 
-#back-to-top {
-  cursor: pointer;
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  display: none;
-  background-color: $blue;
-  border: none;
-  z-index: 1;
-}
-
 .dropdown-item {
   font-size: 1.2em;
   text-align: left;
