From c597cc0d06bc07ca03e295358b58359782e306ac Mon Sep 17 00:00:00 2001
From: Anshuman Verma <anshu.av97@gmail.com>
Date: Tue, 20 Nov 2018 16:48:47 +0530
Subject: [PATCH] Restore popups

---
 themes/navy/layout/partial/header.swig  | 166 ++++++++++----
 themes/navy/source/js/main.js           |  48 +++-
 themes/navy/source/js/vendor.js         |  62 ++++--
 themes/navy/source/js/vendor.js.map     |   4 +-
 themes/navy/source/scss/_variables.scss |  38 ++--
 themes/navy/source/scss/colors.scss     |  38 ++--
 themes/navy/source/scss/fonts.scss      |   5 +
 themes/navy/source/scss/formReset.scss  | 153 +++++++++++++
 themes/navy/source/scss/index.scss      |  20 +-
 themes/navy/source/scss/main.scss       |  81 ++++++-
 themes/navy/source/scss/mobile_nav.scss |  30 +--
 themes/navy/source/scss/popup.scss      | 279 ++++++++++++++++++++++++
 12 files changed, 788 insertions(+), 136 deletions(-)
 create mode 100644 themes/navy/source/scss/fonts.scss
 create mode 100644 themes/navy/source/scss/formReset.scss
 create mode 100644 themes/navy/source/scss/popup.scss

diff --git a/themes/navy/layout/partial/header.swig b/themes/navy/layout/partial/header.swig
index dcea236..45047e8 100644
--- a/themes/navy/layout/partial/header.swig
+++ b/themes/navy/layout/partial/header.swig
@@ -1,7 +1,7 @@
 <header id="general-menu">
     <div class="header-left">
         <div class="logo">
-            <a href="https://status.im"></a>
+            <a href="https://status.im/"></a>
         </div>
         <nav>
             <ul>
@@ -14,7 +14,7 @@
                 <li>
                     <a href="https://status.im/docs/" class="main-link">Docs</a>
                 </li>
-                <li class="has-popup has-popup-community">
+                <li class="has-popup has-popup-projects">
                     <a href="#" class="main-link">Projects</a>
                     <svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"> <g opacity="0.4"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.23198 3.83006L1.70264 0.292429C1.31888 -0.0922324 0.683447 -0.095995 0.293839 0.294529C-0.0984862 0.687776 -0.0967079 1.31728 0.291744 1.70664L4.52863 5.95348C4.72016 6.14547 4.97439 6.24257 5.22946 6.24313C5.48789 6.2456 5.74145 6.14782 5.93533 5.95348L10.1722 1.70664C10.556 1.32198 10.5597 0.685054 10.1701 0.294529C9.7778 -0.0987176 9.14977 -0.0969352 8.76132 0.292429L5.23198 3.83006Z" fill="#6E777E"/> </g> </svg>
                 </li>
@@ -51,45 +51,125 @@
     </div>
 </div>
 <div id="general-menu-backdrop"></div>
-<div id="popup-community" class="general-menu-popup">
-    <div class="inner">
-        <h3>Community</h3>
-        <ul class="features">
-            <li>
-                <svg width="35" height="26" viewBox="0 0 35 26" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 20.5C0 17.4624 2.46243 15 5.5 15H18.5C21.5376 15 24 17.4624 24 20.5C24 23.5376 21.5376 26 18.5 26H5.5C2.46243 26 0 23.5376 0 20.5Z" fill="#4360DF"/> <mask id="path-2-outside-1" maskUnits="userSpaceOnUse" x="16" y="6" width="19" height="19" fill="black"> <rect fill="white" x="16" y="6" width="19" height="19"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M24 20.5C24 21.3284 24.6716 22 25.5 22C26.3284 22 27 21.3284 27 20.5V17H30.5C31.3284 17 32 16.3284 32 15.5C32 14.6716 31.3284 14 30.5 14H27V10.5C27 9.67157 26.3284 9 25.5 9C24.6716 9 24 9.67157 24 10.5V14H20.5C19.6716 14 19 14.6716 19 15.5C19 16.3284 19.6716 17 20.5 17H24V20.5Z"/> </mask> <path fill-rule="evenodd" clip-rule="evenodd" d="M24 20.5C24 21.3284 24.6716 22 25.5 22C26.3284 22 27 21.3284 27 20.5V17H30.5C31.3284 17 32 16.3284 32 15.5C32 14.6716 31.3284 14 30.5 14H27V10.5C27 9.67157 26.3284 9 25.5 9C24.6716 9 24 9.67157 24 10.5V14H20.5C19.6716 14 19 14.6716 19 15.5C19 16.3284 19.6716 17 20.5 17H24V20.5Z" fill="#A8B6F0"/> <path d="M27 17V14H24V17H27ZM27 14H24V17H27V14ZM24 14V17H27V14H24ZM24 17H27V14H24V17ZM25.5 19C26.3284 19 27 19.6716 27 20.5H21C21 22.9853 23.0147 25 25.5 25V19ZM24 20.5C24 19.6716 24.6716 19 25.5 19V25C27.9853 25 30 22.9853 30 20.5H24ZM24 17V20.5H30V17H24ZM30.5 14H27V20H30.5V14ZM29 15.5C29 14.6716 29.6716 14 30.5 14V20C32.9853 20 35 17.9853 35 15.5H29ZM30.5 17C29.6716 17 29 16.3284 29 15.5H35C35 13.0147 32.9853 11 30.5 11V17ZM27 17H30.5V11H27V17ZM24 10.5V14H30V10.5H24ZM25.5 12C24.6716 12 24 11.3284 24 10.5H30C30 8.01472 27.9853 6 25.5 6V12ZM27 10.5C27 11.3284 26.3284 12 25.5 12V6C23.0147 6 21 8.01472 21 10.5H27ZM27 14V10.5H21V14H27ZM20.5 17H24V11H20.5V17ZM22 15.5C22 16.3284 21.3284 17 20.5 17V11C18.0147 11 16 13.0147 16 15.5H22ZM20.5 14C21.3284 14 22 14.6716 22 15.5H16C16 17.9853 18.0147 20 20.5 20V14ZM24 14H20.5V20H24V14ZM27 20.5V17H21V20.5H27Z" fill="#ECEFFC" mask="url(#path-2-outside-1)"/> <circle cx="13" cy="5" r="5" fill="#4360DF"/> </svg>
-                <h4>Join the chat in Status</h4>
-                <p>Whisper sweet, encrypted nothings on a distributed network that no-one owns.</p>
-            </li>
-            <li>
-                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M24.3333 8C28.5675 8 32 11.377 32 15.5428V28.7428C32 29.2361 31.7068 29.6838 31.2504 29.8876C30.7937 30.0914 30.258 30.0138 29.8809 29.6889L26.2151 26.5332C25.5163 25.9316 24.6191 25.6 23.6907 25.6H15.3889C11.8603 25.6 9 22.7858 9 19.3143V14.2857C9 10.8141 11.8603 8 15.3889 8H24.3333Z" fill="#A8B6F0"/> <path d="M7.66667 0C3.43247 0 0 3.37703 0 7.54285V20.7428C0 21.2361 0.29324 21.6838 0.749634 21.8876C1.20634 22.0914 1.74197 22.0138 2.11913 21.6889L5.78494 18.5332C6.48372 17.9316 7.38091 17.6 8.3093 17.6H16.6111C20.1397 17.6 23 14.7858 23 11.3143V6.28571C23 2.81414 20.1397 0 16.6111 0H7.66667Z" fill="#4360DF"/> <circle cx="15" cy="9" r="2" fill="white"/> <circle cx="8" cy="9" r="2" fill="white"/> </svg>
-                <h4>Join the Discussion</h4>
-                <p>Join longer discussions, work in progress, and our research here.</p>
-            </li>
-            <li>
-                <svg width="33" height="31" viewBox="0 0 33 31" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M16.4495 0C7.36697 0 0 7.11346 0 15.8835C0 22.8995 4.74312 28.8436 11.2018 30.9874C12.0092 31.0848 12.3119 30.5976 12.3119 30.2078C12.3119 29.8181 12.3119 28.8436 12.3119 27.4794C7.77064 28.4538 6.76147 25.3356 6.76147 25.3356C6.05505 23.4842 4.94495 22.9969 4.94495 22.9969C3.43119 22.0225 5.04587 22.0225 5.04587 22.0225C6.66055 22.1199 7.56881 23.679 7.56881 23.679C9.08257 26.1152 11.4037 25.4331 12.3119 25.0433C12.4128 23.9714 12.9174 23.2893 13.3211 22.8995C9.68807 22.5097 5.85321 21.1455 5.85321 15.0065C5.85321 13.2525 6.45872 11.8882 7.56881 10.7189C7.46789 10.4266 6.86239 8.77002 7.77064 6.62624C7.77064 6.62624 9.18349 6.23646 12.3119 8.28279C13.6239 7.89302 15.0367 7.79557 16.4495 7.79557C17.8624 7.79557 19.2752 7.99046 20.5872 8.28279C23.7156 6.23646 25.1284 6.62624 25.1284 6.62624C26.0367 8.77002 25.4312 10.4266 25.3303 10.8164C26.3395 11.8882 27.0459 13.3499 27.0459 15.1039C27.0459 21.2429 23.211 22.5097 19.578 22.8995C20.1835 23.3867 20.6881 24.3612 20.6881 25.8228C20.6881 27.9666 20.6881 29.6232 20.6881 30.2078C20.6881 30.5976 20.9908 31.0848 21.7982 30.9874C28.3578 28.8436 33 22.8995 33 15.8835C32.8991 7.11346 25.5321 0 16.4495 0Z" fill="#4360DF"/> </svg>
-                <h4>Contribute to our Repos</h4>
-                <p>Help us #buidl the future by getting involved in the most active code base in Ethereum.</p>
-            </li>
-        </ul>
-        <h5>Find out more</h5>
-        <ul class="more">
-            <li>
-                <h4>Read our Blog</h4>
-                <p>Status is a community of people all over the world connected by a set of</p>
-                <a href="https://our.status.im/">Learn more and apply <svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.50752 5.75572L0.978261 9.29336C0.594509 9.67802 0.590756 10.3149 0.980356 10.7055C1.37267 11.0987 2.00068 11.0969 2.38913 10.7076L6.62591 6.46073C6.81745 6.26874 6.91432 6.01391 6.91487 5.75824C6.91734 5.4992 6.81979 5.24505 6.62591 5.05071L2.38913 0.803866C2.00538 0.419204 1.36996 0.415442 0.980356 0.805966C0.588039 1.19921 0.589818 1.82872 0.978261 2.21808L4.50752 5.75572Z" fill="#4360DF"/> </svg> </a>
-            </li>
-            <li>
-                <h4>Life at Status</h4>
-                <p>Explore open positions. Status is a community of people all over the world connected by a set </p>
-                <a href="https://status.im/contribute/">Learn more and apply <svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.50752 5.75572L0.978261 9.29336C0.594509 9.67802 0.590756 10.3149 0.980356 10.7055C1.37267 11.0987 2.00068 11.0969 2.38913 10.7076L6.62591 6.46073C6.81745 6.26874 6.91432 6.01391 6.91487 5.75824C6.91734 5.4992 6.81979 5.24505 6.62591 5.05071L2.38913 0.803866C2.00538 0.419204 1.36996 0.415442 0.980356 0.805966C0.588039 1.19921 0.589818 1.82872 0.978261 2.21808L4.50752 5.75572Z" fill="#4360DF"/> </svg> </a>
-            </li>
-            <li>
-                <h4>Follow us on Twitter</h4>
-                <p>Status is a community of people all over the world connected by a set of</p>
-                <a href="https://twitter.com/ethstatus">Learn more and apply <svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.50752 5.75572L0.978261 9.29336C0.594509 9.67802 0.590756 10.3149 0.980356 10.7055C1.37267 11.0987 2.00068 11.0969 2.38913 10.7076L6.62591 6.46073C6.81745 6.26874 6.91432 6.01391 6.91487 5.75824C6.91734 5.4992 6.81979 5.24505 6.62591 5.05071L2.38913 0.803866C2.00538 0.419204 1.36996 0.415442 0.980356 0.805966C0.588039 1.19921 0.589818 1.82872 0.978261 2.21808L4.50752 5.75572Z" fill="#4360DF"/> </svg> </a>
-            </li>
-        </ul>
-        <a href="#" class="close"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6 4.57404L1.72275 0.296796C1.32616 -0.0997918 0.689941 -0.0975927 0.296174 0.296174C-0.100338 0.692686 -0.0973145 1.32864 0.296796 1.72275L4.57404 6L0.296796 10.2772C-0.0997918 10.6738 -0.0975927 11.3101 0.296174 11.7038C0.692686 12.1003 1.32864 12.0973 1.72275 11.7032L6 7.42596L10.2772 11.7032C10.6738 12.0998 11.3101 12.0976 11.7038 11.7038C12.1003 11.3073 12.0973 10.6714 11.7032 10.2772L7.42596 6L11.7032 1.72275C12.0998 1.32616 12.0976 0.689941 11.7038 0.296174C11.3073 -0.100338 10.6714 -0.0973145 10.2772 0.296796L6 4.57404Z" fill="#6E777E"/> </svg> </a>
+<div class="popup-wrap popup-wrap--community">
+    <div class="popup popup--community">
+        <a class="popup__button popup__button--close"></a>
+        <h3 class="popup__title">Community</h3>
+        <div class="popup__inner">
+            <div class="cards cards--three cards--three--even cards--community cards--community--light">
+                <div class="card">
+                    <a href="https://get.status.im/chat/public/status" class="card-inner">
+                        <div class="community-icon community-icon--join"></div>
+                        <h4>Join the chat in Status</h4>
+                        <p class="secondary-text">Whisper sweet, encrypted nothings on a distributed network that no-one owns.</p>
+                    </a>
+                </div>
+                <div class="card">
+                    <a href="https://discuss.status.im/" class="card-inner">
+                        <div class="community-icon community-icon--discussion"></div>
+                        <h4>Join the Discussion</h4>
+                        <p class="secondary-text">Join longer discussions, work in progress, and our research here.</p>
+                    </a>
+                </div>
+                <div class="card">
+                    <a href="https://github.com/status-im/" class="card-inner">
+                        <div class="community-icon community-icon--contrubute"></div>
+                        <h4>Contribute to our Repos</h4>
+                        <p class="secondary-text">Help us #buidl the future by getting involved in the most active code base in Ethereum.</p>
+                    </a>
+                </div>
+            </div>
+            <h5>Find Out More</h5>
+            <div class="cards cards-community-more cards--three cards--three--even">
+                <div class="card">
+                    <div class="card-inner">
+                        <div class="card-content">
+                            <div class="latest-posts"></div>
+                        </div>
+                        <div class="card-community-more__link"><a href="https://our.status.im/" class="link-arrow">Learn more</a></div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-inner">
+                        <div class="card-content">
+                            <h4>Life at Status</h4>
+                            <p class="secondary-text">What's it like to live the decentralized lifestyle? Find out here.</p>
+                        </div>
+                        <div class="card-community-more__link"><a href={{url_for_lang('contribute')}} class="link-arrow">Learn more</a></div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-inner">
+                        <div class="card-content">
+                            <h4>Follow us on Twitter</h4>
+                            <p class="secondary-text">Join the conversation on our social channels to learn more.</p>
+                        </div>
+                        <div class="card-community-more__link"><a href="https://twitter.com/ethstatus/" class="link-arrow">Learn more</a></div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-    <div class="general-popup-backdrop"></div>
-</div>
\ No newline at end of file
+    <div class="popup-overlay"></div>
+</div>
+
+<div class="popup-wrap popup-wrap--projects">
+    <div class="popup popup--projects">
+        <a class="popup__button popup__button--close"></a>
+        <h3 class="popup__title">Projects</h3>
+        <div class="popup__inner">
+            <h5>Help us #buidl</h5>
+            <div class="cards cards-community-more cards--three cards--three--even">
+                <div class="card">
+                    <div class="card-inner">
+                        <div class="card-content">
+                            <h4>Embark</h4>
+                            <p class="secondary-text">Embark is a simple and easy to use development framework that enables you to build and deploy your own decentralized applications smoothly.</p>
+                        </div>
+                        <div class="card-community-more__link"><a href="https://embark.status.im/" class="link-arrow">Learn more</a></div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-inner">
+                        <div class="card-content">
+                            <h4>Nimbus</h4>
+                            <p class="secondary-text">A research project and light client for Ethereum 2.0 designed to perform well on embedded systems and resource-restricted hardware.</p>
+                        </div>
+                        <div class="card-community-more__link"><a href="https://nimbus.status.im" class="link-arrow">Learn more</a></div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-inner">
+                        <div class="card-content">
+                            <h4>Status Studio</h4>
+                            <p class="secondary-text">Studio is an integrated developer environment and educational platform designed to be a one-stop-shop for ÐApp development.</p>
+                        </div>
+                        <div class="card-community-more__link"><a href="https://studio.status.im" class="link-arrow">Learn more</a></div>
+                    </div>
+                </div>
+            </div>
+            <div class="separator"></div>
+            <h5>Tools for Everyone</h5>
+            <div class="cards cards-community-more cards--three cards--three--even">
+                <div class="card">
+                    <div class="card-inner">
+                        <div class="card-content">
+                            <h4>Incubate</h4>
+                            <p class="secondary-text">Incubate supports open source, early stage startups with funding, technical mentorship, legal and regulatory compliance and much more.</p>
+                        </div>
+                        <div class="card-community-more__link"><a href="https://incubate.status.im/" class="link-arrow">Learn more</a></div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-inner">
+                        <div class="card-content">
+                            <h4>Status Hardwallet</h4>
+                            <p class="secondary-text">A hardware wallet in the form of a card with a safe, contactless transaction experience</p>
+                        </div>
+                        <div class="card-community-more__link"><a href="https://hardwallet.status.im/" class="link-arrow">Learn more</a></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="popup-overlay"></div>
diff --git a/themes/navy/source/js/main.js b/themes/navy/source/js/main.js
index ee343fa..ec18322 100644
--- a/themes/navy/source/js/main.js
+++ b/themes/navy/source/js/main.js
@@ -4,9 +4,27 @@
 
 $(document).ready(function () {
   var months = {'01':'Jan', '02':'Feb', '03':'Mar', '04':'Apr', '05':'May', '06':'Jun', '07':'Jul', '08':'Aug', '09':'Sep', '10':'Oct', '11':'Nov', '12':'Dec'};
-  let url = 'https://our-status.ghost.io/ghost/api/v0.1/posts/?limit=3&formats=plaintext&client_id=ghost-frontend&client_secret=1c5590b47eb4';
+  let url = 'https://our.status.im/ghost/api/v0.1/posts/?order=published_at%20desc&limit=2&formats=plaintext&client_id=ghost-frontend&client_secret=2b055fcd57ba';
   var urlBase = [location.protocol, '//', location.host, location.pathname].join('');
 
+  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+
+  $(window).on('resize', function(event) {
+      w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+      setMenu(w);
+  });
+
+  function setMenu(w) {
+      if (w < 1199) {
+        console.log("mobile")
+          $('#general-menu nav ul').appendTo('#general-menu-mobile nav');
+      } else {
+          $('#general-menu-mobile nav ul').appendTo('#general-menu nav');
+      };
+  }
+
+  setMenu(w);
+
   $.ajax({
     type: "get",
     url: url,
@@ -49,22 +67,25 @@ if(heroImage) {
   }, 200)
 }
 
-
 /* Popups */
 
 let community = document.querySelectorAll(".has-popup-community")[0]
-let projects = document.querySelectorAll(".item--dropdown-projects")[0]
+let projects = document.querySelectorAll(".has-popup-projects")[0]
+let mobileMenu = document.querySelectorAll(".mobile-menu-trigger")[0]
 
-let popups = document.querySelectorAll(".popup-wrap")
+let popups = document.querySelectorAll('.popup-wrap')
 let overlays = document.querySelectorAll(".popup-overlay")
-let closeButtons = document.querySelectorAll(".popup__button--close")
+let popupMenu = document.querySelectorAll("#general-menu-mobile")[0]
+
+let closeButtons = document.querySelectorAll(".popup__button--close,#general-menu-mobile .close")
 
 let activePopup = null;
 let activeOverlay = null;
 
 community.addEventListener('click', function(event){
-    showPopup(popups[0])
-    event.preventDefault()
+  showPopup(popups[0])
+  event.preventDefault()
+
 })
 
 projects.addEventListener('click', function(event){
@@ -72,6 +93,11 @@ projects.addEventListener('click', function(event){
     event.preventDefault()
 })
 
+mobileMenu.addEventListener('click', function(event) {
+  showPopup(popupMenu)
+  event.preventDefault()
+})
+
 closeButtons.forEach((button) => {
   button.addEventListener('click', closeActivePopup)
 })
@@ -86,10 +112,15 @@ function showPopup(whichPopup) {
 }
 
 function closeActivePopup() {
+  console.log("test")
   removeClassFromElement(activePopup, "popup--shown");
   activePopup = null;
 }
 
+function closeMenu() {
+  removeClassFromElement(activePopup, "")
+}
+
 /* Code highlighting */
 
 function highlight() {
@@ -119,7 +150,7 @@ function highlight() {
 })
 
 /* Mobile Nav */
-
+/*
 let moreLink = document.querySelectorAll(".item--more")[0]
 
 let nav = document.querySelectorAll(".mobile-nav-wrap")[0]
@@ -143,6 +174,7 @@ function showNav() {
 function closeNav() {
   removeClassFromElement(nav, "mobile-nav--shown");
 }
+*/
 
 /*--- Utils ---*/
 function addClassToElement(element, className) {
diff --git a/themes/navy/source/js/vendor.js b/themes/navy/source/js/vendor.js
index a3702d5..e8616bc 100644
--- a/themes/navy/source/js/vendor.js
+++ b/themes/navy/source/js/vendor.js
@@ -5,9 +5,27 @@
 
 $(document).ready(function () {
   var months = { '01': 'Jan', '02': 'Feb', '03': 'Mar', '04': 'Apr', '05': 'May', '06': 'Jun', '07': 'Jul', '08': 'Aug', '09': 'Sep', '10': 'Oct', '11': 'Nov', '12': 'Dec' };
-  let url = 'https://our-status.ghost.io/ghost/api/v0.1/posts/?limit=3&formats=plaintext&client_id=ghost-frontend&client_secret=1c5590b47eb4';
+  let url = 'https://our.status.im/ghost/api/v0.1/posts/?order=published_at%20desc&limit=2&formats=plaintext&client_id=ghost-frontend&client_secret=2b055fcd57ba';
   var urlBase = [location.protocol, '//', location.host, location.pathname].join('');
 
+  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+
+  $(window).on('resize', function (event) {
+    w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+    setMenu(w);
+  });
+
+  function setMenu(w) {
+    if (w < 1199) {
+      console.log("mobile");
+      $('#general-menu nav ul').appendTo('#general-menu-mobile nav');
+    } else {
+      $('#general-menu-mobile nav ul').appendTo('#general-menu nav');
+    };
+  }
+
+  setMenu(w);
+
   $.ajax({
     type: "get",
     url: url,
@@ -52,11 +70,14 @@ if (heroImage) {
 /* Popups */
 
 let community = document.querySelectorAll(".has-popup-community")[0];
-let projects = document.querySelectorAll(".item--dropdown-projects")[0];
+let projects = document.querySelectorAll(".has-popup-projects")[0];
+let mobileMenu = document.querySelectorAll(".mobile-menu-trigger")[0];
 
-let popups = document.querySelectorAll(".popup-wrap");
+let popups = document.querySelectorAll('.popup-wrap');
 let overlays = document.querySelectorAll(".popup-overlay");
-let closeButtons = document.querySelectorAll(".popup__button--close");
+let popupMenu = document.querySelectorAll("#general-menu-mobile")[0];
+
+let closeButtons = document.querySelectorAll(".popup__button--close,#general-menu-mobile .close");
 
 let activePopup = null;
 let activeOverlay = null;
@@ -71,6 +92,11 @@ projects.addEventListener('click', function (event) {
   event.preventDefault();
 });
 
+mobileMenu.addEventListener('click', function (event) {
+  showPopup(popupMenu);
+  event.preventDefault();
+});
+
 closeButtons.forEach(button => {
   button.addEventListener('click', closeActivePopup);
 });
@@ -85,10 +111,15 @@ function showPopup(whichPopup) {
 }
 
 function closeActivePopup() {
+  console.log("test");
   removeClassFromElement(activePopup, "popup--shown");
   activePopup = null;
 }
 
+function closeMenu() {
+  removeClassFromElement(activePopup, "");
+}
+
 /* Code highlighting */
 
 function highlight() {
@@ -118,20 +149,22 @@ $(document).ready(function () {
 });
 
 /* Mobile Nav */
+/*
+let moreLink = document.querySelectorAll(".item--more")[0]
 
-let moreLink = document.querySelectorAll(".item--more")[0];
+let nav = document.querySelectorAll(".mobile-nav-wrap")[0]
+let navOverlay = document.querySelectorAll(".mobile-nav-overlay")[0]
+let navCloseButton = document.querySelectorAll(".mobile-nav-close")[0]
 
-let nav = document.querySelectorAll(".mobile-nav-wrap")[0];
-let navOverlay = document.querySelectorAll(".mobile-nav-overlay")[0];
-let navCloseButton = document.querySelectorAll(".mobile-nav-close")[0];
 
-moreLink.addEventListener('click', function (event) {
-  showNav();
-  event.preventDefault();
-});
+moreLink.addEventListener('click', function(event){
+    showNav()
+    event.preventDefault()
+})
+
+navCloseButton.addEventListener('click', closeNav)
+navOverlay.addEventListener('click', closeNav)
 
-navCloseButton.addEventListener('click', closeNav);
-navOverlay.addEventListener('click', closeNav);
 
 function showNav() {
   addClassToElement(nav, "mobile-nav--shown");
@@ -140,6 +173,7 @@ function showNav() {
 function closeNav() {
   removeClassFromElement(nav, "mobile-nav--shown");
 }
+*/
 
 /*--- Utils ---*/
 function addClassToElement(element, className) {
diff --git a/themes/navy/source/js/vendor.js.map b/themes/navy/source/js/vendor.js.map
index ecaef3d..88673ae 100644
--- a/themes/navy/source/js/vendor.js.map
+++ b/themes/navy/source/js/vendor.js.map
@@ -5,11 +5,11 @@
     "themes/navy/source/js/main.js"
   ],
   "names": [],
-  "mappings": "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",
+  "mappings": "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",
   "file": "generated.js",
   "sourceRoot": "",
   "sourcesContent": [
     "(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c=\"function\"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error(\"Cannot find module '\"+i+\"'\");throw a.code=\"MODULE_NOT_FOUND\",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u=\"function\"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()",
-    "// let ScrollOver = require(\"./lib/ScrollOver.js\")\n// let animateScroll = require(\"./lib/animatescroll.js\")\n// let d3 = require(\"d3\")\n\n$(document).ready(function () {\n  var months = {'01':'Jan', '02':'Feb', '03':'Mar', '04':'Apr', '05':'May', '06':'Jun', '07':'Jul', '08':'Aug', '09':'Sep', '10':'Oct', '11':'Nov', '12':'Dec'};\n  let url = 'https://our-status.ghost.io/ghost/api/v0.1/posts/?limit=3&formats=plaintext&client_id=ghost-frontend&client_secret=1c5590b47eb4';\n  var urlBase = [location.protocol, '//', location.host, location.pathname].join('');\n\n  $.ajax({\n    type: \"get\",\n    url: url,\n    success: function (response) {\n      response.posts = response.posts.reverse();\n      $.each(response.posts, function (index, val) {\n        var excerpt = '';\n        if(val.custom_excerpt != null) {\n          excerpt = val.custom_excerpt;\n        }else{\n          excerpt = getWords(val.plaintext);\n        }\n        var newDate = new Date(val.published_at);\n        var minutes = newDate.getMinutes();\n        minutes = minutes + \"\";\n        if(minutes.length == 1){\n          minutes = '0' + minutes;\n        }\n        $('.latest-posts').prepend(' \\\n        <div class=\"post\"> \\\n          <time>'+ newDate.getDate() + ' ' + months[(newDate.getMonth()+1)] + ' at ' + newDate.getHours() + ':' + minutes + '</time> \\\n          <h4><a href=\"https://our.status.im/'+ val.slug +'\">'+ val.title +'</a></h3> \\\n        </div> \\\n        ');\n      });\n    }\n  });\n\n  function getWords(str) {\n    return str.split(/\\s+/).slice(0,25).join(\" \");\n  }\n\n});\n\nlet heroImage = document.querySelectorAll(\".hero-image\")[0]\n\nif(heroImage) {\n  setTimeout(function(){\n    addClassToElement(heroImage, \"active\")\n  }, 200)\n}\n\n\n/* Popups */\n\nlet community = document.querySelectorAll(\".has-popup-community\")[0]\nlet projects = document.querySelectorAll(\".item--dropdown-projects\")[0]\n\nlet popups = document.querySelectorAll(\".popup-wrap\")\nlet overlays = document.querySelectorAll(\".popup-overlay\")\nlet closeButtons = document.querySelectorAll(\".popup__button--close\")\n\nlet activePopup = null;\nlet activeOverlay = null;\n\ncommunity.addEventListener('click', function(event){\n    showPopup(popups[0])\n    event.preventDefault()\n})\n\nprojects.addEventListener('click', function(event){\n    showPopup(popups[1])\n    event.preventDefault()\n})\n\ncloseButtons.forEach((button) => {\n  button.addEventListener('click', closeActivePopup)\n})\n\noverlays.forEach((overlay) => {\n  overlay.addEventListener('click', closeActivePopup)\n})\n\nfunction showPopup(whichPopup) {\n  activePopup = whichPopup\n  addClassToElement(whichPopup, \"popup--shown\");\n}\n\nfunction closeActivePopup() {\n  removeClassFromElement(activePopup, \"popup--shown\");\n  activePopup = null;\n}\n\n/* Code highlighting */\n\nfunction highlight() {\n  $('pre code').each(function(i, block) {\n    hljs.highlightBlock(block);\n  });\n}\n $(document).ready(function() {\n  try {\n    highlight();\n  } catch(err) {\n    console.log(\"retrying...\")\n    setTimeout(function() {\n      highlight();\n    }, 2500)\n  }\n\n  var clipboard = new ClipboardJS(\".btn\");\n  clipboard.on('success', function(e) {\n    var id = $(e.trigger).attr(\"data-clipboard-target\");\n    $(id).toggleClass(\"flash\");\n    setTimeout(function() {\n      $(id).toggleClass(\"flash\");\n    }, 200);\n    e.clearSelection();\n  })\n})\n\n/* Mobile Nav */\n\nlet moreLink = document.querySelectorAll(\".item--more\")[0]\n\nlet nav = document.querySelectorAll(\".mobile-nav-wrap\")[0]\nlet navOverlay = document.querySelectorAll(\".mobile-nav-overlay\")[0]\nlet navCloseButton = document.querySelectorAll(\".mobile-nav-close\")[0]\n\n\nmoreLink.addEventListener('click', function(event){\n    showNav()\n    event.preventDefault()\n})\n\nnavCloseButton.addEventListener('click', closeNav)\nnavOverlay.addEventListener('click', closeNav)\n\n\nfunction showNav() {\n  addClassToElement(nav, \"mobile-nav--shown\");\n}\n\nfunction closeNav() {\n  removeClassFromElement(nav, \"mobile-nav--shown\");\n}\n\n/*--- Utils ---*/\nfunction addClassToElement(element, className) {\n  (element.classList) ? element.classList.add(className) : element.className += ' ' + className\n  return element\n}\n\nfunction removeClassFromElement(element, className) {\n  if(element.classList) {\n    element.classList.remove(className)\n  } else {\n    element.className = element.className.replace(new RegExp('(^|\\\\b)' + className.split(' ').join('|') + '(\\\\b|$)', 'gi'), ' ')\n  }\n  return element\n}\n"
+    "// let ScrollOver = require(\"./lib/ScrollOver.js\")\n// let animateScroll = require(\"./lib/animatescroll.js\")\n// let d3 = require(\"d3\")\n\n$(document).ready(function () {\n  var months = {'01':'Jan', '02':'Feb', '03':'Mar', '04':'Apr', '05':'May', '06':'Jun', '07':'Jul', '08':'Aug', '09':'Sep', '10':'Oct', '11':'Nov', '12':'Dec'};\n  let url = 'https://our.status.im/ghost/api/v0.1/posts/?order=published_at%20desc&limit=2&formats=plaintext&client_id=ghost-frontend&client_secret=2b055fcd57ba';\n  var urlBase = [location.protocol, '//', location.host, location.pathname].join('');\n\n  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);\n\n  $(window).on('resize', function(event) {\n      w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);\n      setMenu(w);\n  });\n\n  function setMenu(w) {\n      if (w < 1199) {\n        console.log(\"mobile\")\n          $('#general-menu nav ul').appendTo('#general-menu-mobile nav');\n      } else {\n          $('#general-menu-mobile nav ul').appendTo('#general-menu nav');\n      };\n  }\n\n  setMenu(w);\n\n  $.ajax({\n    type: \"get\",\n    url: url,\n    success: function (response) {\n      response.posts = response.posts.reverse();\n      $.each(response.posts, function (index, val) {\n        var excerpt = '';\n        if(val.custom_excerpt != null) {\n          excerpt = val.custom_excerpt;\n        }else{\n          excerpt = getWords(val.plaintext);\n        }\n        var newDate = new Date(val.published_at);\n        var minutes = newDate.getMinutes();\n        minutes = minutes + \"\";\n        if(minutes.length == 1){\n          minutes = '0' + minutes;\n        }\n        $('.latest-posts').prepend(' \\\n        <div class=\"post\"> \\\n          <time>'+ newDate.getDate() + ' ' + months[(newDate.getMonth()+1)] + ' at ' + newDate.getHours() + ':' + minutes + '</time> \\\n          <h4><a href=\"https://our.status.im/'+ val.slug +'\">'+ val.title +'</a></h3> \\\n        </div> \\\n        ');\n      });\n    }\n  });\n\n  function getWords(str) {\n    return str.split(/\\s+/).slice(0,25).join(\" \");\n  }\n\n});\n\nlet heroImage = document.querySelectorAll(\".hero-image\")[0]\n\nif(heroImage) {\n  setTimeout(function(){\n    addClassToElement(heroImage, \"active\")\n  }, 200)\n}\n\n/* Popups */\n\nlet community = document.querySelectorAll(\".has-popup-community\")[0]\nlet projects = document.querySelectorAll(\".has-popup-projects\")[0]\nlet mobileMenu = document.querySelectorAll(\".mobile-menu-trigger\")[0]\n\nlet popups = document.querySelectorAll('.popup-wrap')\nlet overlays = document.querySelectorAll(\".popup-overlay\")\nlet popupMenu = document.querySelectorAll(\"#general-menu-mobile\")[0]\n\nlet closeButtons = document.querySelectorAll(\".popup__button--close,#general-menu-mobile .close\")\n\nlet activePopup = null;\nlet activeOverlay = null;\n\ncommunity.addEventListener('click', function(event){\n  showPopup(popups[0])\n  event.preventDefault()\n\n})\n\nprojects.addEventListener('click', function(event){\n    showPopup(popups[1])\n    event.preventDefault()\n})\n\nmobileMenu.addEventListener('click', function(event) {\n  showPopup(popupMenu)\n  event.preventDefault()\n})\n\ncloseButtons.forEach((button) => {\n  button.addEventListener('click', closeActivePopup)\n})\n\noverlays.forEach((overlay) => {\n  overlay.addEventListener('click', closeActivePopup)\n})\n\nfunction showPopup(whichPopup) {\n  activePopup = whichPopup\n  addClassToElement(whichPopup, \"popup--shown\");\n}\n\nfunction closeActivePopup() {\n  console.log(\"test\")\n  removeClassFromElement(activePopup, \"popup--shown\");\n  activePopup = null;\n}\n\nfunction closeMenu() {\n  removeClassFromElement(activePopup, \"\")\n}\n\n/* Code highlighting */\n\nfunction highlight() {\n  $('pre code').each(function(i, block) {\n    hljs.highlightBlock(block);\n  });\n}\n $(document).ready(function() {\n  try {\n    highlight();\n  } catch(err) {\n    console.log(\"retrying...\")\n    setTimeout(function() {\n      highlight();\n    }, 2500)\n  }\n\n  var clipboard = new ClipboardJS(\".btn\");\n  clipboard.on('success', function(e) {\n    var id = $(e.trigger).attr(\"data-clipboard-target\");\n    $(id).toggleClass(\"flash\");\n    setTimeout(function() {\n      $(id).toggleClass(\"flash\");\n    }, 200);\n    e.clearSelection();\n  })\n})\n\n/* Mobile Nav */\n/*\nlet moreLink = document.querySelectorAll(\".item--more\")[0]\n\nlet nav = document.querySelectorAll(\".mobile-nav-wrap\")[0]\nlet navOverlay = document.querySelectorAll(\".mobile-nav-overlay\")[0]\nlet navCloseButton = document.querySelectorAll(\".mobile-nav-close\")[0]\n\n\nmoreLink.addEventListener('click', function(event){\n    showNav()\n    event.preventDefault()\n})\n\nnavCloseButton.addEventListener('click', closeNav)\nnavOverlay.addEventListener('click', closeNav)\n\n\nfunction showNav() {\n  addClassToElement(nav, \"mobile-nav--shown\");\n}\n\nfunction closeNav() {\n  removeClassFromElement(nav, \"mobile-nav--shown\");\n}\n*/\n\n/*--- Utils ---*/\nfunction addClassToElement(element, className) {\n  (element.classList) ? element.classList.add(className) : element.className += ' ' + className\n  return element\n}\n\nfunction removeClassFromElement(element, className) {\n  if(element.classList) {\n    element.classList.remove(className)\n  } else {\n    element.className = element.className.replace(new RegExp('(^|\\\\b)' + className.split(' ').join('|') + '(\\\\b|$)', 'gi'), ' ')\n  }\n  return element\n}\n"
   ]
 }
\ No newline at end of file
diff --git a/themes/navy/source/scss/_variables.scss b/themes/navy/source/scss/_variables.scss
index 95468ed..79b110d 100644
--- a/themes/navy/source/scss/_variables.scss
+++ b/themes/navy/source/scss/_variables.scss
@@ -1,4 +1,4 @@
-@import url('https://rsms.me/inter/inter-ui.css'); 
+@import url('https://rsms.me/inter/inter-ui.css');
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
@@ -54,30 +54,22 @@
 }
 
 // Config
-$support-for-ie: false
-
-
-
-// Typography
-$font-sans: "Inter UI", "Helvetica Neue", Helvetica, Arial, sans-serif
-$font-mono: "Inter UI", Monaco, Menlo, Consolas, monospace
-$font-title: "Inter UI", font-sans
-$font-size: 16px
-$line-height: 24px
+$support-for-ie: false;
+$vendor-prefixes: webkit moz ms official;
 
 // Layout
-$max-width: 1200px
-$gutter-width: 20px
-$sidebar-width: 30%
-$mobile-nav-width: 260px
+$max-width: 1200px;
+$gutter-width: 20px;
+$sidebar-width: 30%;
+$mobile-nav-width: 260px;
 
 // Media queries
-$mq-mobile: "screen and (max-width: 819px)"
-$mq-normal: "screen and (min-width: 820px)"
-$mq-tablet: "screen and (min-width: 480px)"
+$mq-mobile: "screen and (max-width: 819px)";
+$mq-normal: "screen and (min-width: 820px)";
+$mq-tablet: "screen and (min-width: 480px)";
 
-$break-sm: 575
-$break-md: 767px
-$break-lg: 991px
-$break-xl: 1199px
-$status: #4360df
\ No newline at end of file
+$break-sm: 575;
+$break-md: 767px;
+$break-lg: 991px;
+$break-xl: 1199px;
+$status: #4360df;
diff --git a/themes/navy/source/scss/colors.scss b/themes/navy/source/scss/colors.scss
index 575a119..3e13d88 100644
--- a/themes/navy/source/scss/colors.scss
+++ b/themes/navy/source/scss/colors.scss
@@ -1,21 +1,19 @@
 // Colors
-$color-default: #40444b;
-$color-title: #000;
-$colorGray: #777F86;
-$colorWhite: rgba(255, 255, 255, 1); 
-$color-border: #e3e3e3;
-$color-navy: #363763;
-$color-background: #F2F2F5;
-$color-background-light: #fff;
-$color-main-link: #fff;
-$color-link: #4564dc;
-$status: #e4e8fa;
-$color-link-hover: lighten($color-link, 10%);
-
-// Layout
-$max-width: 1200px;
-$gutter-width: 20px;
-$sidebar-width: 30%;
-$mobile-nav-width: 260px;
-$font-size: 16px;
-$line-height: 24px;
\ No newline at end of file
+$colorBg: rgba(236, 241, 242, 1);
+$colorWhite: rgba(255, 255, 255, 1);
+$colorBlack: rgba(0, 0, 0, 1);
+$colorBlue: rgba(67, 96, 223, 1);
+$colorGray: rgba(119, 127, 134, 1);
+$colorNavy: rgba(54, 55, 99, 1);
+$colorDarkBlue: rgba(38, 42, 57, 1);
+$colorBorder: rgba(227, 227, 227, 1);
+$colorDefault: rgba(64, 68, 75, 1);
+$colorLink: rgba(67, 96, 223, 1);
+$colorLinkHover: lighten($colorLink, 10%);
+$colorIncubate: rgba(0, 139, 173, 1);
+$colorStatus: rgba(67, 96, 223, 1);
+$colorIncubate: rgba(0,139,173,1);
+$colorEmbark: rgba(54, 55, 99, 1);
+$colorStudio: rgba(94, 193, 47, 1);
+$colorNimbus: rgba(255, 156, 0, 1);
+$colorHardwallet: rgba(127, 68, 223, 1);
diff --git a/themes/navy/source/scss/fonts.scss b/themes/navy/source/scss/fonts.scss
new file mode 100644
index 0000000..2bf1ad4
--- /dev/null
+++ b/themes/navy/source/scss/fonts.scss
@@ -0,0 +1,5 @@
+@import url('https://rsms.me/inter/inter-ui.css');
+$InterUI: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+$FontTitle: "Inter UI", "Inter UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$FontMono: "Inter UI", Monaco, Menlo, Consolas, monospace;
+$FontSans: "Inter UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
\ No newline at end of file
diff --git a/themes/navy/source/scss/formReset.scss b/themes/navy/source/scss/formReset.scss
new file mode 100644
index 0000000..badaa16
--- /dev/null
+++ b/themes/navy/source/scss/formReset.scss
@@ -0,0 +1,153 @@
+/* ----------------------------------------------------------------------------------------------------
+
+Super Form Reset
+
+A couple of things to watch out for:
+
+- IE8: If a text input doesn't have padding on all sides or none the text won't be centered.
+- The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders.
+- You NEED to set the font-size and family on all form elements
+- Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs
+- You can style the upload button in webkit using ::-webkit-file-upload-button
+- ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out.
+- IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block.
+- By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs
+
+----------------------------------------------------------------------------------------------------*/
+
+input,
+label,
+select,
+button,
+textarea
+{
+	margin:0;
+	border:0;
+	padding:0;
+	display:inline-block;
+	vertical-align:middle;
+	white-space:normal;
+	background:none;
+	line-height:1;
+
+	/* Browsers have different default form fonts */
+	font-size:13px;
+	font-family:Arial;
+}
+
+/* Remove the stupid outer glow in Webkit */
+input:focus
+{
+	outline:0;
+}
+
+/* Box Sizing Reset
+-----------------------------------------------*/
+
+/* All of our custom controls should be what we expect them to be */
+input,
+textarea
+{
+	-webkit-box-sizing:content-box;
+	-moz-box-sizing:content-box;
+	box-sizing:content-box;
+}
+
+/* These elements are usually rendered a certain way by the browser */
+button,
+input[type=reset],
+input[type=button],
+input[type=submit],
+input[type=checkbox],
+input[type=radio],
+select
+{
+	-webkit-box-sizing:border-box;
+	-moz-box-sizing:border-box;
+	box-sizing:border-box;
+}
+
+/* Text Inputs
+-----------------------------------------------*/
+
+/* Button Controls
+-----------------------------------------------*/
+
+input[type=checkbox],
+input[type=radio]
+{
+	width:13px;
+	height:13px;
+}
+
+/* File Uploads
+-----------------------------------------------*/
+
+/* Search Input
+-----------------------------------------------*/
+
+/* Make webkit render the search input like a normal text field */
+input[type=search]
+{
+	-webkit-appearance:textfield;
+	-webkit-box-sizing:content-box;
+}
+
+/* Turn off the recent search for webkit. It adds about 15px padding on the left */
+::-webkit-search-decoration
+{
+	display:none;
+}
+
+/* Buttons
+-----------------------------------------------*/
+
+button,
+input[type="reset"],
+input[type="button"],
+input[type="submit"]
+{
+	/* Fix IE7 display bug */
+	overflow:visible;
+	width:auto;
+}
+
+.home-wrap, .pre-footer
+  .button, .community a.button
+{
+    width: auto;
+}
+
+/* IE8 and FF freak out if this rule is within another selector */
+::-webkit-file-upload-button
+{
+	padding:0;
+	border:0;
+	background:none;
+}
+
+/* Textarea
+-----------------------------------------------*/
+
+textarea
+{
+	/* Move the label to the top */
+	vertical-align:top;
+
+	/* Turn off scroll bars in IE unless needed */
+	overflow:auto;
+}
+
+/* Selects
+-----------------------------------------------*/
+
+select
+{
+
+}
+
+select[multiple]
+{
+	/* Move the label to the top */
+	vertical-align:top;
+}
diff --git a/themes/navy/source/scss/index.scss b/themes/navy/source/scss/index.scss
index 3fc84f4..637a8ad 100644
--- a/themes/navy/source/scss/index.scss
+++ b/themes/navy/source/scss/index.scss
@@ -25,7 +25,7 @@
 }
 
 #banner-start-command {
-  background: lighten($color-navy, 10%);
+  background: lighten($colorNavy, 10%);
   font-family: font-mono;
   display: inline-block;
   padding: 15px 20px;
@@ -38,13 +38,13 @@
 
 #banner-start-link {
   color: #fff;
-  background: $color-link;
+  background: $colorLink;
   display: inline-block;
   padding: 15px;
   text-decoration: none;
   transition: 0.2s;
   &:hover {
-    background: color-link-hover;
+    background: colorLinkHover;
   }
 }
 
@@ -83,7 +83,7 @@
 }
 
 .intro-feature-icon {
-  color: $color-link;
+  color: $colorLink;
   font-size: 36px;
   padding-bottom: 26px;
   text-align: center;
@@ -97,14 +97,14 @@
 }
 
 .intro-feature-title {
-  color: $color-link;
+  color: $colorLink;
   font-family: font-title;
   font-size: 24px;
 }
 
 .intro-feature-desc {
   margin: line-height 0;
-  line-height: $line-height;
+  line-height: line-height;
 }
 
 #intro-cmd-wrap {
@@ -124,7 +124,7 @@
   padding: 0 30px;
   &:before {
     content: "$";
-    color: $color-link;
+    color: $colorLink;
     padding-right: 15px;
   }
 }
@@ -137,16 +137,16 @@
   font-size: 18px;
   font-family: font-title;
   display: inline-block;
-  color: $color-link;
+  color: $colorLink;
   text-decoration: none;
   margin: 40px 0;
   border: 3px solid;
-  border-color: lighten($color-link, 20%);
+  border-color: lighten($colorLink, 20%);
   padding: 12px 24px;
   position: relative;
   transition: 0.2s;
   &:hover {
-    background: lighten($color-link, 20%);
+    background: lighten($colorLink, 20%);
     color: #fff;
   }
 }
diff --git a/themes/navy/source/scss/main.scss b/themes/navy/source/scss/main.scss
index 6a8effa..61aa8e2 100644
--- a/themes/navy/source/scss/main.scss
+++ b/themes/navy/source/scss/main.scss
@@ -1,5 +1,8 @@
+@import "_variables";
 @import "colors";
+@import "fonts";
 @import "footer";
+@import "popup";
 @import "mobile_nav";
 @import "index";
 @import "header";
@@ -199,6 +202,78 @@ select[multiple]  {
 body {
   background: #ffffff;
 }
+
+.cards {
+  display: flex;
+  width: 100%;
+}
+
+.cards .card {
+  width: 100%;
+}
+
+.cards.cards--three {
+  flex-wrap: wrap;
+}
+
+.cards.cards--three .card {
+  width: 33.3%;
+}
+
+.cards.cards--three .card-inner {
+  margin: 12px;
+}
+
+.cards.cards--three .card:nth-child(3n+1) .card-inner { /* 1, 4, 7...*/
+  margin-left: 0
+}
+
+.cards.cards--three .card:nth-child(3n+3) .card-inner { /* 3, 6, 9...*/
+  margin-right: 0
+}
+
+.cards.cards--three .card:nth-child(1) .card-inner,
+.cards.cards--three .card:nth-child(2) .card-inner,
+.cards.cards--three .card:nth-child(3) .card-inner {
+  margin-top: 0;
+}
+
+.cards.cards--three .card:nth-last-child(3) .card-inner,
+.cards.cards--three .card:nth-last-child(2) .card-inner,
+.cards.cards--three .card:nth-last-child(1) .card-inner {
+  margin-bottom: 0;
+}
+
+a {
+  text-decoration: none;
+  color: $colorBlue;
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+
+h3 {
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 1.6em;
+}
+
+h4 {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 1.6em;
+}
+
+h5 {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: $colorGray;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+
 #general-menu {
   position: relative;
   display: flex;
@@ -456,7 +531,7 @@ body {
             padding: 16px 26px;
             color: #000;
             &:hover {
-              background: rgba($status, 0.2);
+              background: rgba($colorStatus, 0.2);
               opacity: 0.7;
             }
           }
@@ -582,7 +657,7 @@ body {
       justify-content: center;
       flex-wrap: wrap;
       li {
-        background: rgba($status, 0.1);
+        background: rgba($colorStatus, 0.1);
         margin-right: 20px;
         flex: 1;
         padding: 30px 30px 15px 30px;
@@ -673,7 +748,7 @@ body {
           display: flex;
           align-items: center;
           justify-content: center;
-          color: $status;
+          color: $colorStatus;
           margin-top: auto;
           transition: all 0.3s ease-in-out;
           &:hover {
diff --git a/themes/navy/source/scss/mobile_nav.scss b/themes/navy/source/scss/mobile_nav.scss
index 2372208..55d9645 100644
--- a/themes/navy/source/scss/mobile_nav.scss
+++ b/themes/navy/source/scss/mobile_nav.scss
@@ -4,15 +4,19 @@ $toggle-line: 2px;
 $transition-duration: 0.4s;
 $lang-select-height: 40px;
 
+.mobile-menu-container {
+  display: none;
+}
+
 #mobile-nav {
   position: fixed;
   top: 0;
-  width: mobile-nav-width;
+  width: $mobile-nav-width;
   left: $mobile-nav-width * -1;
   height: 100%;
-  background: color-navy;
-  transition: $transition-duration;
-  font-family: font-title;
+  background: $colorNavy;
+  transition: transition-duration;
+  font-family: $FontTitle;
   .mobile-nav-on & {
     transform: translateX(100%);
   }
@@ -33,7 +37,7 @@ $lang-select-height: 40px;
   position: absolute;
   top: 0;
   bottom: 0;
-  left: gutter-width;
+  left: $gutter-width;
   width: $toggle-width;
   height: $toggle-height;
   margin: auto;
@@ -54,7 +58,7 @@ $lang-select-height: 40px;
   left: 0;
   width: 100%;
   height: $toggle-line;
-  transition: $transition-duration;
+  transition: transition-duration;
   transform-origin: 0;
   border-radius: $toggle-line;
   &:first-child {
@@ -64,7 +68,7 @@ $lang-select-height: 40px;
     }
   }
   &:nth-child(2) {
-    top: $toggle-height - $toggle-line * 0.5;
+    top: ($toggle-height - $toggle-line) * 0.5;
     .mobile-nav-on & {
       opacity: 0;
     }
@@ -89,7 +93,7 @@ $lang-select-height: 40px;
 }
 
 .mobile-nav-title {
-  color: color-link;
+  color: $colorLink;
   font-weight: bold;
   padding: 10px 15px;
   line-height: 1;
@@ -106,7 +110,7 @@ $lang-select-height: 40px;
   bottom: 0;
   left: 0;
   width: 100%;
-  background: color-navy;
+  background: $colorNavy;
   border-top: 1px solid #444;
 }
 
@@ -133,9 +137,9 @@ $lang-select-height: 40px;
 }
 
 #container {
-  transition: $transition-duration;
+  transition: transition-duration;
   height: 100%;
-
+  // overflow: auto
   -webkit-overflow-scrolling: touch;
   .mobile-nav-on & {
     transform: translateX(mobile-nav-width);
@@ -150,11 +154,11 @@ $lang-select-height: 40px;
   height: 100%;
   background: #000;
   opacity: 0;
-  transition: opacity $transition-duration, transform 0s $transition-duration;
+  transition: opacity transition-duration, transform 0s transition-duration;
   .mobile-nav-on & {
     width: 100%;
     opacity: 0.7;
     transform: translateX(-100%);
-    transition: opacity $transition-duration;
+    transition: opacity transition-duration;
   }
 }
diff --git a/themes/navy/source/scss/popup.scss b/themes/navy/source/scss/popup.scss
new file mode 100644
index 0000000..87a713c
--- /dev/null
+++ b/themes/navy/source/scss/popup.scss
@@ -0,0 +1,279 @@
+.popup-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  z-index: 700;
+
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.popup-wrap.popup--shown {
+  visibility: visible;
+  pointer-events: all;
+}
+
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(120, 135, 148, .25);
+  z-index: 800;
+
+  opacity: 0;
+  transform: translate3d(0, 0 ,0) scale(1);
+  visibility: hidden;
+  transition: visibility .5s linear 0s, opacity .2s ease;
+}
+
+.popup--shown .popup-overlay {
+  transition-delay: 0s;
+  visibility: visible;
+  opacity: 1;
+  transform: translate3d(0, 0 ,0) scale(1);
+}
+
+.popup {
+  box-sizing: border-box;
+  width: 960px;
+  margin: 132px auto 40px;
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 10px;
+  padding: 0px;
+  position: relative;
+  box-shadow: 0 3px 7px 0 rgba(175,192,202,0.41);
+  z-index: 900;
+
+  opacity: 0;
+  transform: translate3d(0, 15px ,0) scale(.96);
+  visibility: hidden;
+  transition-delay: .2s;
+  transition: visibility .5s linear 0s, opacity .2s ease, transform .4s cubic-bezier(0.175, 0.885, 0.135, 1.425);
+}
+
+.popup--shown .popup  {
+  transition-delay: 0s;
+  visibility: visible;
+  opacity: 1;
+  transform: translate3d(0, 0 ,0) scale(1);
+}
+
+.popup__title {
+  padding: 32px 0 12px 32px;
+}
+
+.popup__inner {
+  padding: 0 32px 32px 32px;
+}
+
+.popup__text {
+  font-size: 18px;
+  line-height: 26px;
+  padding: 0 32px 24px 32px;
+  color: #70808D;
+}
+
+.popup__button {
+  position: absolute;
+
+  top: -69px;
+  width: 42px;
+  height: 42px;
+  background-color: #ffffff;
+  border-radius: 50%;
+  opacity: .7;
+  cursor: pointer;
+  transition: opacity .2s ease;
+}
+
+.popup__button:hover {
+  opacity: 1
+}
+
+.popup__button::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 13px;
+  left: 13px;
+  width: 16px;
+  height: 16px;
+
+  background-size: 16px;
+  background-repeat: no-repeat;
+}
+
+.popup__button.popup__button--close {
+  right: 0;
+}
+
+.popup__button.popup__button--close::after {
+  background-image: url(../img/icon-close.svg);
+}
+
+.cards--community {
+  margin: 0 0 52px 0;
+}
+
+.cards--community .card-inner {
+  height: auto;
+  min-height: 170px;
+  display: flex;
+  align-items: center;
+
+  flex-direction: column;
+  text-align: center;
+  padding: 24px;
+  background-color: rgba(67, 96, 223, .1);
+  border-radius: 16px;
+  margin: 12px;
+  text-decoration: none;
+}
+
+.cards--community .card-inner:hover {
+  background-color: rgba(67, 96, 223, .14);
+}
+
+.popup .card h4 {
+  padding: 0 0 4px 0;
+}
+
+.cards--community a h4 {
+  color: $colorBlack;
+  padding: 0 0 8px 0;
+}
+
+.cards--community a p {
+  color: rgba(67, 96, 223, .6);
+}
+
+.separator {
+  border-bottom: 1px solid #e8ebec;
+  width: 100%;
+  height: 1px;
+  background-color: transparent;
+}
+
+.popup--projects .separator {
+  margin: 32px 0;
+}
+
+.community-icon {
+  width: 32px;
+  height: 32px;
+  background-size: 32px;
+  background-repeat: no-repeat;
+  margin: 0 0 24px 0;
+}
+
+.community-icon--join {
+  background-image: url(../img/icon-join-blue.svg);
+}
+
+.community-icon--discussion {
+  background-image: url(../img/icon-discussion-blue.svg);
+}
+
+.community-icon--contrubute {
+  background-image: url(../img/icon-contribute-blue.svg);
+}
+
+.popup--community h5,
+.popup--projects h5 {
+  padding: 0 0 24px 0;
+}
+
+.cards-community-more .card-content {
+    height: auto;
+    min-height: 112px;
+    overflow: hidden;
+}
+
+.popup--projects .cards-community-more .card-content {
+    height: auto;
+    min-height: 142px;
+    overflow: hidden;
+}
+
+@media (max-width: 1008px) {
+
+  .popup-wrap {
+    padding: 0 24px;
+  }
+
+  .popup {
+    width: 100%;
+  }
+
+  .card-community-more__link {
+    margin: 8px 0 0 0;
+  }
+}
+
+@media (max-width: 800px) {
+
+  .cards--community {
+    margin: 0 0 40px 0
+  }
+
+  .popup--community h5 {
+    padding-bottom: 16px;
+  }
+
+  .cards--community.cards--community--light .card-inner {
+    height: auto;
+    min-height: 0
+  }
+
+  .cards-community-more .card-content {
+    height: auto;
+    min-height: 0;
+    padding: 0 0 8px 0;
+  }
+
+  .popup--projects .cards-community-more .card-content {
+    height: auto;
+    min-height: 0;
+    padding: 0 0 8px 0;
+  }
+
+
+  .cards-community-more .card-content h4 {
+    padding: 8px 0 4px 0;
+  }
+
+  .popup__inner {
+    padding: 0 24px 24px 24px;
+  }
+
+  .popup__title {
+    font-size: 18px;
+    padding: 24px 0 12px 24px;
+  }
+
+
+}
+
+@media (max-width: 600px) {
+
+  .popup-wrap {
+    padding: 0 16px;
+  }
+
+  .popup {
+    margin: 96px auto 64px;
+  }
+
+  .popup__text {
+    font-size: 16px;
+    line-height: 24px;
+    padding: 0 16px 16px 16px;
+  }
+
+}