From 532d289cfb2fc2f065114749c3afb99222d5bb51 Mon Sep 17 00:00:00 2001
From: jpez <joshualukekillen@gmail.com>
Date: Thu, 10 Mar 2022 16:17:19 +0000
Subject: [PATCH] added mobile responsiveness

---
 home/index.html  |  17 ++++---
 style/mobile.css | 116 ++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 124 insertions(+), 9 deletions(-)
diff --git a/home/index.html b/home/index.html
index e77a4b1..e683ce8 100644
--- a/home/index.html
+++ b/home/index.html
@@ -14,12 +14,13 @@
     <link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
 
     <link rel="stylesheet" href="style/main.css" media = "screen">
-    <link rel="stylesheet" href="style/mobile.css" media ="screen and (max-width:800px)">
     <link rel="stylesheet" href="home/index.css" media="screen">
+    <link rel="stylesheet" href="style/mobile.css" media ="screen and (max-width:800px)">
 </head>
-<body>
+<body id="clicked">
 
     <nav class="navigation">
+        <a class="hidenav" href="./home/index.html#"> X</a>
         <a class="nav link" id="home" href="home/index.html"><h2>J-Pez Development</h2></a>
         <a class="nav link" id="port" href="portfolio/portfolio.html"><h2>Portfolio</h2></a>
         <a class="nav link" id="blog" href="blog/blog.html"><h2>Blog</h2></a>
@@ -28,8 +29,10 @@
     </nav>
     
     <main>
+        <a class="shownav" href="./home/index.html#clicked"></a>
         <h1>Welcome to my little corner of the Internet :)</h1>
-        <p id="intro">You might be wondering who I am and what I do. In which case, you are in luck. 
+        <p id="intro">
+            You might be wondering who I am and what I do. In which case, you are in luck. 
             This website was created by Joshua Perry (me) to showcase the accomplishments, and projects I have completed
             along the way.
         </p>
@@ -87,8 +90,8 @@
 
         <section class="generalInfo dropdown" id="langDrop">
             <span id="lang">
-                <a href="#lang" class="close">X</a>
-                <a href="#langDrop"><h2 class="title">Languages</h2></a>
+                <a href="./home/index.html#lang" class="close">X</a>
+                <a href="./home/index.html#langDrop"><h2 class="title">Languages</h2></a>
             </span>
             <ul class="langList">
                 <li>HTML5</li>
@@ -104,8 +107,8 @@
 
         <section class="generalInfo dropdown" id="qualDrop">
             <span id="qual">
-                <a href="#qual" class="close">X</a>
-                <a href="#qualDrop"><h2 class="title">Qualifications</h2></a>
+                <a href="./home/index.html#qual" class="close">X</a>
+                <a href="./home/index.html#qualDrop"><h2 class="title">Qualifications</h2></a>
             </span>
             <ul class="qualList">
                 <li>A2 Computer Science</li>
diff --git a/style/mobile.css b/style/mobile.css
index 3e3bb5f..7c349c7 100644
--- a/style/mobile.css
+++ b/style/mobile.css
@@ -1,7 +1,119 @@
-.bio {
+.arrow {
     display: none;
 }
 
-.navigation {
+body {
+    grid-template-areas: 
+    
+    "main main main"
+    "aside aside aside"
+    "footer footer footer";
+}
+
+.moreInfo:hover .extraInfo{
     display: none;
+}
+
+main {
+    border-top-right-radius: 0em;
+    border-bottom-right-radius: 0em;
+}
+
+.bio {
+    border-top-left-radius: 0em;
+    border-bottom-left-radius: 0em;
+}
+
+.navigation {
+    min-width: 10em;
+    width: 200%;
+    height: 50vh;
+    white-space: nowrap;
+    grid-template-rows: 20% 20% 20% 20% 20%;
+    grid-template-areas:
+    "close"
+    "home"
+    "port"
+    "blog"
+    "contact";
+    position: fixed;
+    z-index: 1000;
+    top: -2.2em;
+}
+
+.shownav {
+    z-index: 1000;
+    margin-left: 0.1em;
+    margin-top: 0.1em;
+    height: 0.8em;
+    width: 1.25em;
+    display: block;
+    position: fixed;
+    border-top: 0.2em solid white;
+    border-bottom: 0.2em solid white;
+}
+
+.hidenav {
+    padding-right: 0.1em;
+    text-align: right;
+    opacity: 90%;
+    background-color: #000000;
+    z-index: 1;
+    display: block;
+    font-size: larger;
+    display: flex;
+    color: white;
+    text-decoration: none;
+    grid-area: close;
+    align-self: flex-end;
+}
+
+.shownav:before {
+    content:'';
+    position: absolute;
+    width: 1.25em;
+    margin-top: 0.3em;
+    border-top: 0.2em solid white;
+}
+
+#clicked .shownav {
+    display: block;
+}
+
+#clicked .hidenav {
+    display: none;
+}
+
+#clicked:target .shownav {
+    display: none;
+}
+
+#clicked:target .hidenav {
+    display: block;
+}
+
+#clicked:target > .navigation{
+    transform: translate(0%,0);
+    display: grid;
+}
+
+#contact{
+    border-top-right-radius: 0em;
+}
+
+.link {
+    max-height: 4em;
+}
+
+nav > .link:hover {
+    border-right: 0.1em solid #32cd32;
+    border-bottom: 0.1em solid #000000;
+}
+
+#home:hover {
+    border-right: none;
+}
+
+.navigation:hover {
+    transform: translate(-95%,0);
 }
\ No newline at end of file
