Add Responsive Nav Bar Design (JIITODC#7)

prityusha · Sep 25, 2020 · 06c445b · 06c445b
1 parent b5b322d
commit 06c445b
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 50 deletions.
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
@@ -1,4 +1,9 @@
 <script>
+  let active = false;
+
+  const toggleLinks = () => {
+    active = !active;
+  }
 </script>
 
 <style>
@@ -11,29 +16,21 @@
   }
 
   .jodc-mascot-img {
-    height: 90px;
+    max-height: 90px;
     width: auto;
-    margin-left: 40px;
   }
 
   ul {
     margin: 0;
     padding: 0;
-  }
-
-  /* clearfix */
-  ul::after {
-    content: "";
-    display: block;
-    clear: both;
+    display: flex;
   }
 
   li {
-    display: block;
-    float: left;
+    list-style: none;
   }
 
-  li:not(:last-child){
+  li:not(:last-child) {
     margin-right: 50px;
   }
 
@@ -44,12 +41,11 @@
     text-transform: uppercase;
     font-size: 1.6rem;
     transition: all .5s;
-    border-radius: 3px;
     position: relative;
     border-bottom: 2px solid #fff;
   }
 
-  a::after{
+  a::after {
     content: "";
     position: absolute;
     bottom: 0;
@@ -62,22 +58,69 @@
     background-color: #fff;
   }
 
-  a:hover::after{
+  a:hover::after {
     height: 100%;
     opacity: 1;
   }
 
-  a:hover{
+  a:hover {
     color: #000;
   }
 
+  .toggle-button {
+    font-size: 2rem;
+    position: absolute;
+    display: none;
+    right: 28px;
+  }
+
+  @media (max-width:700px) {
+    .toggle-button {
+      display: block;
+    }
+
+    .nav-links {
+      display: none;
+      margin-top: 1em;
+      width: 100%;
+      text-align: center;
+    }
+
+    .nav-links.active {
+      display: block;
+    }
+
+    .jodc-mascot-img {
+      max-height: 70px;
+
+    }
+
+    nav {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    li:not(:last-child) {
+      margin-right: 0;
+      margin-bottom: 1em;
+    }
+  }
 </style>
 
 <nav>
   <img src="jodcMascotWB.svg" alt="JODC Mascot" class="jodc-mascot-img">
-  <ul class="nav-links">
-    <li><a href=".">home</a></li>
-    <li><a href="events">events</a></li>
-    <li><a href="team">team</a></li>
-  </ul>
+  <a href="#" class="toggle-button" on:click={toggleLinks}>&#9776;</a>
+  {#if active}
+    <ul class="nav-links active">
+      <li><a href=".">home</a></li>
+      <li><a href="events">events</a></li>
+      <li><a href="team">team</a></li>
+    </ul>
+  {:else}
+    <ul class="nav-links">
+      <li><a href=".">home</a></li>
+      <li><a href="events">events</a></li>
+      <li><a href="team">team</a></li>
+    </ul>
+  {/if}
 </nav>
diff --git a/src/node_modules/@sapper/internal/manifest-client.mjs b/src/node_modules/@sapper/internal/manifest-client.mjs
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import Icon from 'svelte-awesome/components/Icon.svelte';
-  import {telegram, twitter, facebook, github } from 'svelte-awesome/icons';
+  import { telegram, twitter, facebook, github } from 'svelte-awesome/icons';
 </script>
 
 <style>
@@ -9,10 +9,11 @@
     font-family: "Red Hat Display";
   }
 
-  figure {
+  .logo-container {
     text-align: center;
     margin: 2em 0 1em 0;
     font-size: 2rem;
+    position: relative;
   }
 
   img {
@@ -50,17 +51,26 @@
   }
 
   .about {
+    background-color: black;
     display: none;
+    font-size: 1.5rem;
+    position: absolute;
+    top: -10px;
+    text-align: center;
   }
 
   @media (max-width: 700px) {
-    figure {
+    .logo {
       font-size: 1.5rem;
     }
+
+    #social {
+      flex-direction: column;
+    }
   }
 
   @media (max-width: 500px) {
-    figure {
+    .logo {
       font-size: 1rem;
     }
   }
@@ -70,31 +80,35 @@
   <title>JODC | JIIT Open-Source Developers Circle</title>
 </svelte:head>
 
-<figure>
-  <img alt="JODC Logo" src="jodcLogoWB.svg" />
-  <!-- TODO(humancalico) How to change to font of figcaption -->
-  <figcaption>JIIT Open-Source Developers Circle</figcaption>
-</figure>
-
-<!-- We are gonna animate the about content so it will show when user hovers or something -->
-<div class="about">
-  According to GitHub’s “State of the Octoverse” report 2019, 99% of software
-  projects in the world use Open Source Technologies in some way or the other.
-  Open source has undoubtably changed the world, and we, the JODC (JIIT
-  Open-Source Developers Circle) aim to help students to become a part of it. The
-  JODC is an initiative by the students of JIIT-128 to promote open source
-  culture. The hub is all about contributing to and collaborating on projects,
-  networking, learning together and guiding students. We conduct talks, workshops,
-  activities, one-to-one sessions and dev-sprints to mentor students. We encourage
-  them to volunteer for open source projects and organisations and participate in
-  open source initiatives such as Google Summer of Code and Outreachy to become
-  better developers and for the betterment of open source.
+<div class="logo-container">
+  <div class="logo">
+    <img alt="JODC Logo" src="jodcLogoWB.svg" />
+    <p>JIIT Open-Source Developers Circle</p>
+  </div>
+  <div class="about">
+    According to GitHub’s “State of the Octoverse” report 2019, 99% of software
+    projects in the world use Open Source Technologies in some way or the other.
+    Open source has undoubtably changed the world, and we, the JODC (JIIT
+    Open-Source Developers Circle) aim to help students to become a part of it. The
+    JODC is an initiative by the students of JIIT-128 to promote open source
+    culture.<br> The hub is all about contributing to and collaborating on projects,
+    networking, learning together and guiding students. We conduct talks, workshops,
+    activities, one-to-one sessions and dev-sprints to mentor students. We encourage
+    them to volunteer for open source projects and organisations and participate in
+    open source initiatives such as Google Summer of Code and Outreachy to become
+    better developers and for the betterment of open source.
+  </div>
 </div>
 
+
 <!-- TODO(humancalico) add as a list? -->
 <div id="social">
-  <a href="https://github.com/jiitodc"><Icon style="margin-right: 10px" data={github}/>GITHUB</a>
-  <a href="https://t.me/jiitodc"><Icon style="margin-right: 10px"  data={telegram}/>TELEGRAM</a>
-  <a href="https://twitter.com/jiitodc"><Icon style="margin-right: 10px" data={twitter}/>TWITTER</a>
-  <a href="https://www.facebook.com/groups/jiitodc"><Icon style="margin-right: 10px; font-size:40px;" data={facebook}/>FACEBOOK</a>
+  <a href="https://github.com/jiitodc">
+    <Icon style="margin-right: 10px; scale:1.5;" data={github} />GITHUB</a>
+  <a href="https://t.me/jiitodc">
+    <Icon style="margin-right: 10px; scale:1.5;" data={telegram} />TELEGRAM</a>
+  <a href="https://twitter.com/jiitodc">
+    <Icon style="margin-right: 10px; scale:1.5;" data={twitter} />TWITTER</a>
+  <a href="https://www.facebook.com/groups/jiitodc">
+    <Icon style="margin-right: 10px; scale:1.5;" data={facebook} />FACEBOOK</a>
 </div>