Add changes according to the new release

Author: Dhruvi16

themes/vocabulary_theme/templates/layout.html

@@ -43,13 +43,14 @@
   <header>
     <nav class="navbar">
       <div class="navbar-brand">
-        {% set cc_logo = site.get('/').attachments.get('open_source.svg') %}
         <a class="has-text-black" href="{{ '/'|url }}">
-          <img
-            class="logo"
-            xmlns="http://www.w3.org/2000/svg"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 304 73" src="{{ cc_logo|url }}">
+          <svg
+          class="logo"
+          xmlns="http://www.w3.org/2000/svg"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 304 73">
+          <use href="#opensource"></use>
+        </svg>
         </a>
         <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
           <span aria-hidden="true"></span>
@@ -109,7 +110,7 @@
           <a class="navbar-item {% if this.is_child_of('/cc-search') %} is-active{% endif%}" href="{{ '/cc-search'|url }}">
             CC Search
           </a>
-          <div class="navbar-item has-dropdown is-hoverable">
+          <div class="navbar-item has-dropdown is-hoverable column is-3">
             <a class="navbar-link is-arrowless {% if this.is_child_of('/archives') %} is-active{% endif%}">Archives<i class="icon caret-down"></i></a>
             <div class="navbar-dropdown">
               {% for href, title in [

webpack/js/main.js

@@ -9,6 +9,7 @@ $(document).ready(function () {
 
     patchAssetIntoDom('/assets/logos/cc/logomark.svg');
     patchAssetIntoDom('/assets/logos/cc/letterheart.svg');
+    patchAssetIntoDom('/assets/logos/products/open_source.svg');
 
     // Check for click events on the navbar burger icon
     $(".navbar-burger").click(function() {

webpack/package-lock.json

@@ -9,7 +9,7 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@creativecommons/vocabulary": "^1.0.0-beta.14",
+    "@creativecommons/vocabulary": "^1.0.0-beta.15",
     "autoprefixer": "^9.7.5",
     "babel-loader": "^8.1.0",
     "css-loader": "^2.1.1",

webpack/package.json

@@ -1,4 +1,5 @@
 @import "../node_modules/@creativecommons/vocabulary/css/vocabulary.css";
+@import "../node_modules/@creativecommons/vocabulary/scss/spacing.scss";
 
 //Color Variables
 $pumpkin: #e15803;
@@ -17,6 +18,9 @@ $brand-theme-light: $orange;
 $text-color: $jet-black;
 $project-card-theme: $blue;
 
+header {
+  @extend .padding-horizontal-xxl;
+}
 
 .navbar-item {
   &.has-dropdown {