From 3dd794b25f24202ce439ade4a0176895761ebe10 Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Sat, 4 Nov 2017 04:11:24 +0530
Subject: [PATCH 1/6] implement mobile menu, fix few padding issue and change
 some colors

---
 components/common-banner.js |  16 ++++-
 components/footer.js        |   2 +-
 components/global-styles.js |   4 +-
 components/header.js        | 124 +++++++++++++++++++++++++++++++++---
 pages/index.js              |  12 ++--
 pages/learn/index.js        |   4 +-
 pages/space.js              |  16 +----
 7 files changed, 147 insertions(+), 31 deletions(-)

diff --git a/components/common-banner.js b/components/common-banner.js
index a2e035a97..d3c8fb4bb 100644
--- a/components/common-banner.js
+++ b/components/common-banner.js
@@ -9,7 +9,7 @@ export default props => (
     <style jsx>{`
       .root {
         background-color: #f4f7fb;
-        min-height: 200px;
+        min-height: 150px;
         text-align: center;
       }
       .headline {
@@ -18,6 +18,20 @@ export default props => (
         color: #df1cb5;
         font-weight: 900;
       }
+      h2 {
+        max-width: 1024px;
+        margin-left: auto;
+        margin-right: auto;
+        letter-spacing: 2px;
+        line-height: 2;
+        margin-bottom: 30px;
+      }
+      @media (max-width: 720px) {
+        h2 {
+          font-size: 14px;
+          padding: 0 10px;
+        }
+      }
     `}</style>
   </div>
 );
diff --git a/components/footer.js b/components/footer.js
index b5fd2b1c0..a385f2e9e 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -39,7 +39,7 @@ export default () => (
     <style jsx>{`
       footer {
         padding: 50px 0;
-        background: #314159;
+        background: #c454df linear-gradient(to bottom, #ec53ab, #d354cf);
         color: #fff;
       }
       .footer__container {
diff --git a/components/global-styles.js b/components/global-styles.js
index 46911ab8a..2fc7957c5 100644
--- a/components/global-styles.js
+++ b/components/global-styles.js
@@ -27,7 +27,7 @@ export default () => (
         pointer-events: none;
       }
       #nprogress .bar {
-        background: #d812c8;
+        background: #ffeb3b;
         position: fixed;
         z-index: 1031;
         top: 0;
@@ -42,7 +42,7 @@ export default () => (
         right: 0px;
         width: 100px;
         height: 100%;
-        box-shadow: 0 0 10px #d812c8, 0 0 5px #d812c8;
+        box-shadow: 0 0 10px #ffeb3b, 0 0 5px #ffeb3b;
         opacity: 1;
         transform: rotate(3deg) translate(0px, -4px);
       }
diff --git a/components/header.js b/components/header.js
index a383116bb..eb7acfe3c 100644
--- a/components/header.js
+++ b/components/header.js
@@ -3,6 +3,11 @@ import Headroom from 'react-headroom';
 import NProgress from 'nprogress';
 import Router from 'next/router';
 import Link from 'next/link';
+import GoHome from 'react-icons/lib/go/home';
+import GoBook from 'react-icons/lib/md/school';
+import GoStar from 'react-icons/lib/md/library-books';
+import GoCalender from 'react-icons/lib/go/calendar';
+import GoOrg from 'react-icons/lib/go/organization';
 
 import GlobalStyles from './global-styles';
 import Head from './head';
@@ -29,26 +34,31 @@ export default props => {
       title: 'Home',
       path: '/',
       external: false,
+      icon: GoHome,
     },
     {
       title: 'Learn',
       path: '/learn',
       external: false,
+      icon: GoBook,
     },
     {
       title: 'Space',
       path: '/space',
       external: false,
+      icon: GoOrg,
     },
     {
       title: 'Events',
       path: '/events',
       external: false,
+      icon: GoCalender,
     },
     {
       title: 'Blog',
       path: 'https://coderplex.org/blog',
       external: true,
+      icon: GoStar,
     },
   ];
   return (
@@ -61,6 +71,10 @@ export default props => {
             <div className="nav__logo">
               <img src="/static/favicons/android-chrome-192x192.png" alt="" />
             </div>
+            <input id="menu" type="checkbox" />
+            <label htmlFor="menu" className="mobile__menu">
+              <span>Menu</span>
+            </label>
             <ul className="nav__links">
               {navItems.map(item => {
                 return (
@@ -72,7 +86,8 @@ export default props => {
                           ? 'nav__link--active'
                           : ''}`}
                       >
-                        {item.title}
+                        {React.createElement(item.icon)}
+                        <span>{item.title}</span>
                       </a>
                     ) : (
                       <Link href={item.path}>
@@ -82,7 +97,8 @@ export default props => {
                             ? 'nav__link--active'
                             : ''}`}
                         >
-                          {item.title}
+                          {React.createElement(item.icon)}
+                          <span>{item.title}</span>
                         </a>
                       </Link>
                     )}
@@ -97,7 +113,7 @@ export default props => {
         header {
           padding: 5px 20px;
           width: 100%;
-          background: #fff;
+          background: #c454df linear-gradient(to top, #ec53ab, #d354cf);
           z-index: 1000;
         }
         .header__container {
@@ -106,8 +122,9 @@ export default props => {
         }
         nav {
           display: flex;
-          height: 70px;
+          height: 56px;
           align-items: center;
+          position: relative;
         }
         .nav__logo {
           flex: 1;
@@ -146,18 +163,89 @@ export default props => {
         }
         .nav__link {
           text-decoration: none;
-          color: #666;
+          color: #fff;
           font-size: 14px;
           padding-bottom: 4px;
+          display: flex;
+          align-items: center;
+        }
+        .nav__link span {
+          margin-left: 5px;
         }
         .nav__link:hover {
-          color: #444;
+          color: #ffeb3b;
         }
         .nav__link--active {
-          color: #444;
-          border-bottom: 2px solid #d900e4;
+          color: #ffeb3b;
+          border-bottom: 2px solid #ffeb3b;
           pointer-events: none;
         }
+        input[type='checkbox'] {
+          position: absolute;
+          opacity: 0;
+          top: 25px;
+          left: 25px;
+        }
+        .mobile__menu {
+          width: 30px;
+          height: 24px;
+          display: none;
+          cursor: pointer;
+          top: 15px;
+          left: 10px;
+          position: absolute;
+          z-index: 1;
+        }
+        .mobile__menu:after,
+        .mobile__menu:before {
+          content: '';
+          width: 100%;
+          height: 2px;
+          border-radius: 4px;
+          position: absolute;
+          background: #fff;
+          top: 50%;
+          -webkit-transition: -webkit-transform 0.5s;
+          transition: -webkit-transform 0.5s;
+          transition: transform 0.5s;
+          transition: transform 0.5s, -webkit-transform 0.5s;
+          -webkit-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+        }
+        .mobile__menu:after {
+          -webkit-transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
+          transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
+        }
+        .mobile__menu:before {
+          -webkit-transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
+          transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
+        }
+        .mobile__menu span {
+          position: absolute;
+          width: 100%;
+          overflow: hidden;
+          height: 2px;
+          border-radius: 4px;
+          background: #fff;
+          top: 50%;
+          -webkit-transition: all 0.5s;
+          transition: all 0.5s;
+        }
+        input[type='checkbox']:checked ~ .mobile__menu span {
+          -webkit-transform: scale3d(0, 1, 1);
+          transform: scale3d(0, 1, 1);
+        }
+        input[type='checkbox']:checked ~ .mobile__menu:after {
+          -webkit-transform: rotate3d(0, 0, 1, 45deg);
+          transform: rotate3d(0, 0, 1, 45deg);
+        }
+        input[type='checkbox']:checked ~ .mobile__menu:before {
+          -webkit-transform: rotate3d(0, 0, 1, -45deg);
+          transform: rotate3d(0, 0, 1, -45deg);
+        }
+        input[type='checkbox']:checked ~ .nav__links {
+          display: flex;
+        }
         @media (max-width: 700px) {
           nav {
             justify-content: center;
@@ -165,9 +253,29 @@ export default props => {
           .nav__logo {
             flex: initial;
           }
+          .mobile__menu {
+            display: block;
+          }
           .nav__links {
+            flex-direction: column;
+            width: 100%;
+            position: fixed;
+            top: 66px;
+            background: #fff;
             display: none;
           }
+          .nav__linkItem {
+            width: 100%;
+            border-top: 1px solid #eee;
+          }
+          .nav__link {
+            width: 100%;
+            padding: 25px 15px;
+            color: #666;
+          }
+          .nav__link--active {
+            border: none;
+          }
         }
       `}</style>
     </Headroom>
diff --git a/pages/index.js b/pages/index.js
index 7fffdb724..0be9ef4d3 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -209,7 +209,7 @@ class Home extends React.Component {
           }
           .about__container {
             padding-bottom: 30px;
-            min-height: calc(100vh - 260px);
+            min-height: 200px;
             margin: 0 auto;
             display: flex;
             justify-content: center;
@@ -220,12 +220,12 @@ class Home extends React.Component {
             width: 100%;
           }
           .about__tag {
-            font-size: 2.5em;
+            font-size: 2.5rem;
           }
           .container {
             background-color: #ffffff;
             text-align: center;
-            padding: 60px;
+            padding: 20px;
           }
           .taglines {
             padding-bottom: 20px;
@@ -252,7 +252,11 @@ class Home extends React.Component {
           .discord-subscribe .container {
             background: #FAFAFA;
           }
-
+          @media (max-width: 720px) {
+            .about__tag {
+              font-size: 1.5rem;
+            }
+          }
         `}</style>
       </div>
     );
diff --git a/pages/learn/index.js b/pages/learn/index.js
index 7e7085776..1b6e21a86 100644
--- a/pages/learn/index.js
+++ b/pages/learn/index.js
@@ -40,7 +40,7 @@ class Learn extends React.Component {
 
   render() {
     return (
-      <div className="root">
+      <div>
         <CommonBanner
           pageTitle="Learn"
           pageSubTitle="Open Source Learning Guides to master your favorite technology"
@@ -135,7 +135,7 @@ class Learn extends React.Component {
             align-content: flex-start;
             align-items: flex-start;
             background-color: #ffffff;
-            padding: 30px;
+            padding: 20px;
             min-height: calc(100vh - 70px);
             margin: 0 auto;
           }
diff --git a/pages/space.js b/pages/space.js
index d50517728..2770ee67c 100644
--- a/pages/space.js
+++ b/pages/space.js
@@ -8,21 +8,11 @@ export default publicPage(() => (
   <div>
     <CommonBanner
       pageTitle="Space"
-      pageSubTitle="Physical spaces for collaboration, peer-learning and self-learning"
+      pageSubTitle="Physical spaces for collaboration, peer-learning and self-learning. These are dynamic learning environments, where everyone learns at their own pace and
+            compliments each other. You can also participate in weekly group activities like Open
+            source evenings and other casual competitions"
     />
     <main>
-      <section>
-        <div>
-          <Card centered fluid>
-            <Card.Content>
-              These are dynamic learning environments, where everyone learns at
-              their own pace and compliments each other. You can also
-              participate in weekly group activities like Open source evenings
-              and other casual competitions
-            </Card.Content>
-          </Card>
-        </div>
-      </section>
       <section>
         <h2>Who is this for?</h2>
         <div>

From b8fe7a82dbfa89d368cd2b81c70a320561512da5 Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Sat, 4 Nov 2017 04:16:59 +0530
Subject: [PATCH 2/6] fix mobile hover color issue

---
 components/header.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/header.js b/components/header.js
index eb7acfe3c..ece48353b 100644
--- a/components/header.js
+++ b/components/header.js
@@ -271,7 +271,10 @@ export default props => {
           .nav__link {
             width: 100%;
             padding: 25px 15px;
-            color: #666;
+            color: #888;
+          }
+          .nav__link:hover {
+            color: #222;
           }
           .nav__link--active {
             border: none;

From ea329f56115aff175dea1c59869a8fa0c5273ad6 Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Sat, 4 Nov 2017 04:22:08 +0530
Subject: [PATCH 3/6] some more color changes

---
 components/header.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/header.js b/components/header.js
index ece48353b..a25d33579 100644
--- a/components/header.js
+++ b/components/header.js
@@ -165,6 +165,7 @@ export default props => {
           text-decoration: none;
           color: #fff;
           font-size: 14px;
+          font-weight: bold;
           padding-bottom: 4px;
           display: flex;
           align-items: center;
@@ -261,8 +262,9 @@ export default props => {
             width: 100%;
             position: fixed;
             top: 66px;
-            background: #fff;
+            background: #fafafa;
             display: none;
+            border-bottom: 1px solid #eee;
           }
           .nav__linkItem {
             width: 100%;
@@ -270,6 +272,8 @@ export default props => {
           }
           .nav__link {
             width: 100%;
+            font-size: 16px;
+            font-weight: bold;
             padding: 25px 15px;
             color: #888;
           }

From 248cd94fba9b83afdd377a1bfe9fc2a6db1e29cd Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Sat, 4 Nov 2017 04:33:58 +0530
Subject: [PATCH 4/6] move menu icon more to left

---
 components/header.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/header.js b/components/header.js
index a25d33579..8779302c7 100644
--- a/components/header.js
+++ b/components/header.js
@@ -111,7 +111,7 @@ export default props => {
       </header>
       <style jsx>{`
         header {
-          padding: 5px 20px;
+          padding: 5px 10px;
           width: 100%;
           background: #c454df linear-gradient(to top, #ec53ab, #d354cf);
           z-index: 1000;
@@ -193,7 +193,7 @@ export default props => {
           display: none;
           cursor: pointer;
           top: 15px;
-          left: 10px;
+          left: 5px;
           position: absolute;
           z-index: 1;
         }

From 7d7b05f706eec8ab966fd42a7be62139e45d351d Mon Sep 17 00:00:00 2001
From: M-ZubairAhmed <ahmedzubair216@gmail.com>
Date: Sat, 4 Nov 2017 08:35:21 +0530
Subject: [PATCH 5/6] added production cdn links to serving md files

---
 utils/mock-data.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/utils/mock-data.js b/utils/mock-data.js
index 77349b6f0..abaea1909 100644
--- a/utils/mock-data.js
+++ b/utils/mock-data.js
@@ -149,43 +149,44 @@ export const listOfDomains = [
 
 export const contentsOfLaravel = {
   logo: 'devicon-laravel-plain colored',
-  overview: 'https://rawgit.com/coderplex/learn/cdn/cdn/laravel/overview.md',
+  overview:
+    'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/overview.md',
   guides: [
     {
       name: 'Prerequisites',
-      url: 'https://rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/0.md',
+      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/0.md',
     },
     {
       name: 'Introduction to MVC architecture in PHP',
-      url: 'https://rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/1.md',
+      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/1.md',
     },
     {
       name: 'Models Views Controllers and Routes',
-      url: 'https://rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/2.md',
+      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/2.md',
     },
     {
       name: 'FrontEnd',
-      url: 'https://rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/3.md',
+      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/3.md',
     },
     {
       name: 'Relationships',
-      url: 'https://rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/4.md',
+      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/4.md',
     },
     {
       name: 'Authentication',
-      url: 'https://rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/5.md',
+      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/5.md',
     },
     {
       name: 'View Composers and Archives',
-      url: 'https://rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/6.md',
+      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/6.md',
     },
     {
       name: 'Testing & Seeding',
-      url: 'https://rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/7.md',
+      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/7.md',
     },
     {
       name: 'Final Project',
-      url: 'https://rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/8.md',
+      url: 'https://cdn.rawgit.com/coderplex/learn/cdn/cdn/laravel/guide/8.md',
     },
   ],
   contributors: [

From 49d24303ec1351b7228ef41aa094b635bee0d376 Mon Sep 17 00:00:00 2001
From: M-ZubairAhmed <ahmedzubair216@gmail.com>
Date: Sat, 4 Nov 2017 08:54:03 +0530
Subject: [PATCH 6/6] menu highlight color slighlt changed from yellow

---
 components/global-styles.js |  4 ++--
 components/header.js        | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/global-styles.js b/components/global-styles.js
index 2fc7957c5..317d5179a 100644
--- a/components/global-styles.js
+++ b/components/global-styles.js
@@ -27,7 +27,7 @@ export default () => (
         pointer-events: none;
       }
       #nprogress .bar {
-        background: #ffeb3b;
+        background: #f9d1ed;
         position: fixed;
         z-index: 1031;
         top: 0;
@@ -42,7 +42,7 @@ export default () => (
         right: 0px;
         width: 100px;
         height: 100%;
-        box-shadow: 0 0 10px #ffeb3b, 0 0 5px #ffeb3b;
+        box-shadow: 0 0 10px #f9d1ed, 0 0 5px #f9d1ed;
         opacity: 1;
         transform: rotate(3deg) translate(0px, -4px);
       }
diff --git a/components/header.js b/components/header.js
index 8779302c7..af24d76c8 100644
--- a/components/header.js
+++ b/components/header.js
@@ -164,7 +164,7 @@ export default props => {
         .nav__link {
           text-decoration: none;
           color: #fff;
-          font-size: 14px;
+          font-size: 16px;
           font-weight: bold;
           padding-bottom: 4px;
           display: flex;
@@ -174,11 +174,10 @@ export default props => {
           margin-left: 5px;
         }
         .nav__link:hover {
-          color: #ffeb3b;
+          color: #e1e1e1;
         }
         .nav__link--active {
-          color: #ffeb3b;
-          border-bottom: 2px solid #ffeb3b;
+          border-bottom: 2px solid #fff;
           pointer-events: none;
         }
         input[type='checkbox'] {
@@ -265,6 +264,7 @@ export default props => {
             background: #fafafa;
             display: none;
             border-bottom: 1px solid #eee;
+            font-size: 10px;
           }
           .nav__linkItem {
             width: 100%;
@@ -272,9 +272,9 @@ export default props => {
           }
           .nav__link {
             width: 100%;
-            font-size: 16px;
+            font-size: 14px;
             font-weight: bold;
-            padding: 25px 15px;
+            padding: 12px 15px;
             color: #888;
           }
           .nav__link:hover {