From 960fb7b97bee141b770ed9b86b424ed353b0aa0c Mon Sep 17 00:00:00 2001
From: Piyush Maurya <piyushkumarmaurya@gmail.com>
Date: Sun, 21 Oct 2018 13:46:45 +0530
Subject: [PATCH] Added responisve navbar and reomved unnecessary styles

---
 css/_header.css     | 166 -----------------------------
 css/application.css |   2 -
 css/style.css       | 248 ++++++++++++++++++++++++++++++++------------
 index.html          |  22 ++--
 4 files changed, 192 insertions(+), 246 deletions(-)
 delete mode 100644 css/_header.css
 delete mode 100644 css/application.css

diff --git a/css/_header.css b/css/_header.css
deleted file mode 100644
index d4e6abb..0000000
--- a/css/_header.css
+++ /dev/null
@@ -1,166 +0,0 @@
-.header-container {
-  display: flex;
-}
-
-.logo-name-container {
-  align-items: center;
-  display: flex;
-}
-
-.logo {
-  width: 80px;
-}
-
-.logo-name-container {
-  align-items: center;
-  display: flex;
-}
-
-.nav-container {
-  align-items: center;
-  display: flex;
-  justify-content: flex-end;
-  text-align: center;
-}
-
-.nav-container a{
-  text-decoration: none;
-  color: #e6dddd;
-  padding: 0 8px;
-}
-
-.nav-container a:hover{
-  border-bottom: 2px solid #e6dddd
-}
-
-.element {
-  margin: 0 10px 0 10px;
-}
-
-@media only screen and (min-width: 760px) {
-  header {
-    padding: 20px 50px;
-  }
-  .logo {
-    margin-right: 10px;
-    width: 70px;
-  }
-  .logo-name-container {
-    align-items: center;
-    display: flex;
-    width: 30%;
-  }
-  .nav-container {
-    align-items: center;
-    display: flex;
-    justify-content: flex-end;
-    margin-left: 10px;
-    text-align: center;
-    width: 70%;
-  }
-  .element {
-    margin: 20px;
-  }
-  .nav-container {
-    font-size: 25px;
-  }
-  #articles-section article{
-    width: 90%;
-    margin: 10px auto !important;
-  }
-  form {
-    width: 40%;
-    margin: 0 auto !important;
-  }
-}
-.carousel-inner>.item>a>img, .carousel-inner>.item>img {
-  width: 100%;
-  width: -moz-available;          /* WebKit-based browsers will ignore this. */
-  width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
-  width: fill-available;
-}
-.carousel-caption {
-  font-size: 15px;
-}
-
-#heading-text {
-  padding: 10px;
-  margin-top: 10px;
-}
-
-.bold-text {
-  font-weight: bold;
-}
-
-h1,h2 {
-  color: #2f4f4f;
-  padding: 5px 0;
-}
-
-.main-text {
-  font-size: 18px;
-  text-align: center;
-}
-
-.main div {
-  margin: 0 auto !important;
-}
-
-.heading {
-  text-align: center;
-  font-weight: bold;
-  display: inline-block;
-  padding-bottom: 5px;
-  border-bottom: 2px solid #8c1018;
-}
-
-#articles-section {
-  margin: 0 auto !important;
-}
-
-#articles-section main {
-  padding: 10px;
-}
-
-#articles-section h4 {
-  font-size: 20px;
-  font-weight: bold;
-  padding: 5px 0;
-}
-
-#articles-section p {
-  font-size: 18px;
-}
-
-#articles-section time {
-  font-style: italic;
-  color: grey;
-  font-size: 16px;
-  font-weight: bold;
-  padding: 5px 0;
-}
-
-article {
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-  padding: 20px;
-}
-label {
-  font-size: 16px;
-  padding: 5px 0;
-}
-
-.button {
-  padding: 5px 10px;
-  border: 1px solid #8c1018;
-  font-weight: bold;
-  color: #8c1018;
-  background-color: white;
-}
-.button-div {
-  padding: 10px;
-  text-align: center;
-}
-
-.container {
-  margin: 0 auto !important;
-}
\ No newline at end of file
diff --git a/css/application.css b/css/application.css
deleted file mode 100644
index 6a0fef6..0000000
--- a/css/application.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '_header.css';
-@import 'style.css';
diff --git a/css/style.css b/css/style.css
index 95a1c39..41566ac 100644
--- a/css/style.css
+++ b/css/style.css
@@ -48,95 +48,205 @@
 }
 
 body {
-    font-family: 'News Cycle' !important;
-}
-
-header a {
-    font-size: 4em;
-}
-
-.header {
-    background-color: #582d41;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=100);
-    /* -moz-opacity: 0.8; */
-    /* -khtml-opacity: 0.8; */
-    /* opacity: 0.8; */
-    color: #000;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 15%;
-    z-index: 500;
-}
-
-.header #header-content {
-    margin: 5px;
+    font-family: 'News Cycle';
 }
 
-.topnav {
+.header-container {
     display: flex;
-    width: 100%;
+  }
+  
+  .logo-name-container {
+    align-items: center;
+    display: flex;
+  }
+  
+  .logo {
+    width: 80px;
+  }
+  
+  .logo-name-container {
+    align-items: center;
+    display: flex;
+  }
+  
+  .nav-container {
     align-items: center;
-    justify-content: space-between;
-    height: 6rem;
-    padding: 0 2rem;
+    display: flex;
+    justify-content: flex-end;
+    text-align: center;
+  }
+  
+  .nav-container a{
+    text-decoration: none;
+    color: #e6dddd;
+    padding: 0 8px;
+  }
+  
+  .nav-container a:hover{
+    color:#fff
+  }
+
+.topnav {
+    background-color: transparent;
+    overflow: hidden;
 }
 
 .topnav a {
-  float: right;
-  color: rgb(104, 74, 17);
-  text-align: center;
-  padding: 0% 3% 0% 4%;
-  text-decoration: none;
-  font-weight: bold;
-  font-size: 15px;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
 }
 
-.nav {
-    display: flex;
-    justify-content: space-around;
-    width: 40%;
+.topnav a:hover {
+    color: #fff;
+    font-weight: bold;
 }
 
-.nav a {
-    color: #eeecec;
-    text-decoration: none;
-    font-weight: 600;
+.topnav .icon {
+    display: none;
 }
 
-header section {
-    padding-top: 8rem;
-}
 
-.carousel-inner {
-    text-align: center;
-}
+@media screen and (max-width: 600px) {
 
-.carousel .item > img {
-    display: inline-block;
-    z-index: 200;
-    width: 100vw;
+.topnav a:not(:first-child) {
+    display: none;
+}
+.topnav a.icon {
+    float: right;
+    display: block;
+    font-size: 25px;
 }
 
-
-main {
-    padding: 5px 10px;
+.topnav.responsive {
+    position: relative;
+}
+.topnav.responsive a.icon {
+    position: relative;
+    right: 0;
+    top: 0;
+}
+.topnav.responsive a {
+    float: none;
+    display: block;
+    text-align: left;
+    
+}
+.topnav.responsive a:first-child{
+    text-align: right;
+}
 }
 
-main figure > figcaption {
-    font-size: 0.75em;
-    font-style: italic;
+@media screen and (min-width: 760px){
+    .logo {
+        margin-right: 10px;
+        width: 70px;
+    }
+    header {
+        padding: 20px 50px;
+    }
+    #articles-section article{
+        width: 90%;
+        margin: 10px auto !important;
+    }
+    form {
+        width: 40%;
+        margin: 0 auto !important;
+    }
 }
 
-main figure > figcaption::before {
-    content: 'Pictured above:';
+  .carousel-inner>.item>a>img, .carousel-inner>.item>img {
+    width: 100%;
+    width: -moz-available;          /* WebKit-based browsers will ignore this. */
+    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
+    width: fill-available;
+  }
+  .carousel-caption {
+    font-size: 18px;
     font-weight: bold;
-}
+  }
+  
+  #heading-text {
+    padding: 10px;
+    margin-top: 10px;
+  }
+  
+  .bold-text {
+    font-weight: bold;
+  }
+  
+  h1,h2 {
+    color: #2f4f4f;
+    padding: 5px 0;
+  }
+  
+  .main-text {
+    font-size: 18px;
+    text-align: center;
+  }
+  
+  .main div {
+    margin: 0 auto !important;
+  }
+  
+  .heading {
+    text-align: center;
+    font-weight: bold;
+    display: inline-block;
+    padding-bottom: 5px;
+    border-bottom: 2px solid #8c1018;
+  }
+  
+  #articles-section {
+    margin: 0 auto !important;
+  }
+  
+  #articles-section main {
+    padding: 10px;
+  }
+  
+  #articles-section h4 {
+    font-size: 20px;
+    font-weight: bold;
+    padding: 5px 0;
+  }
+  
+  #articles-section p {
+    font-size: 18px;
+  }
+  
+  #articles-section time {
+    font-style: italic;
+    color: grey;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 5px 0;
+  }
+  
+  article {
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    padding: 20px;
+  }
+  label {
+    font-size: 16px;
+    padding: 5px 0;
+  }
+  
+  .button {
+    padding: 5px 10px;
+    border: 1px solid #8c1018;
+    font-weight: bold;
+    color: #8c1018;
+    background-color: white;
+  }
+  .button-div {
+    padding: 10px;
+    text-align: center;
+  }
+  
+  .container {
+    margin: 0 auto !important;
+  }
 
-article > time {
-    float: right;
-    font-size: 0.75em;
-    font-weight: lighter;
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index 2ed5981..75864f7 100644
--- a/index.html
+++ b/index.html
@@ -9,19 +9,23 @@
     <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' />
     <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
     <script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
-    <link rel='stylesheet' href='css/application.css' />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel='stylesheet' href='css/style.css' />
 </head>
-<body class="container-fluid">
+<body>
     <header class=' header header-content row'>
-      <div class='logo-name-container col-md-3'>
+      <div class='logo-name-container col-xs-3'>
         <img src='img/logo.jpg' alt='logo' class='logo'>
       </div>
-      <div class='nav-container col-md-9'>
-        <nav class="topnav nav">
-            <a href='#' class='element'>About</a>
-            <a href='#' class='element'>Contributors</a>
-            <a href='#' class='element'>Projects</a>
-            <a href='#' class='element'>Contact</a>
+      <div class='nav-container col-xs-9'>
+        <nav class="topnav">
+            <a href="javascript:void(0);" class="icon" onclick="$(this).parent().toggleClass('responsive', 1000)">
+                <i class="fa fa-bars"></i>
+            </a>
+            <a href='#'>About</a>
+            <a href='#'>Contributors</a>
+            <a href='#'>Projects</a>
+            <a href='#'>Contact</a>
         </nav>
       </div>
     </header>