Add tablet media query

alejandro-venegas · Nov 22, 2019 · 62bca13 · 62bca13
1 parent 86b6f73
commit 62bca13
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 66 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8">
-    <link rel="stylesheet" href="styles/style.css">
+    <link rel="stylesheet" href="styles/index.css">
     <title>The Oblog</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@@ -30,8 +30,8 @@
       <h1>The Oblog</h1>
       <nav id="main-nav">
         <ul id="nav-list">
-          <li>
-            <a href="#">
+          <li id="close-main-menu-button">
+            <a href="#" >
               <span class="fa fa-times" aria-hidden="true"></span>
               <span class="sr-only">Close menu</span>
             </a>

diff --git a/styles/header.css b/styles/header.css
@@ -73,10 +73,14 @@
   border-bottom: #E0E0E0 solid 1px;
 
 }
+#nav-list > li a{
+  color: #212121;
+  padding: 5px 0px;
+}
 #nav-list > li:first-child{
   margin-left: auto;
   margin-right: 20px;
-  border-bottom: 0;
+  border-bottom: none;
   font-size: 30px;
 }
 #nav-list > li:last-child{
@@ -85,17 +89,62 @@
   border-radius: 5px;
 }
 
-#nav-list > li:last-child a{
-  color: #fffff8;
-}
 
-#main-nav a{
+#main-nav li a{
   font-family: sans-serif;
-  text-decoration: none;
-  color: #212121;
   display: flex;
+
   justify-content: center;
   align-content: center;
-  padding: 5px 0px;
+
+
+}
+
+#nav-list > li:last-child a{
+  color: #fffff8;
+}
+
+
+@media only screen and (min-width: 768px) {
+
+  #hamburger-menu{
+    display: none;
+  }
+  #blog-header{
+    flex-direction: column;
+    justify-content: center;
+  }
+  #blog-header > h1{
+    padding: 0;
+  }
+
+  #main-nav{
+    position: static;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  #nav-list{
+    flex-direction: row;
+    width: 100%;
+  }
+  #close-main-menu-button{
+    display: none;
+  }
+  #nav-list > li{
+    border-bottom: none;
+
+  }
+  #nav-list > li a{
+    padding: 5px 10px;
+
+
+  }
+  #nav-list> li:last-child{
+    margin-left: auto;
+  }
+}
+
+@media only screen and (min-width:1024px){
 
 }
diff --git a/styles/index-main.css b/styles/index-main.css