Mobile homepage changes.

gmierz · May 10, 2017 · 2d90739 · 2d90739
1 parent 655bc7d
commit 2d90739
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 14 deletions.
diff --git a/academics.html b/academics.html
@@ -1,4 +1,3 @@
-{% seo %}
 <!DOCTYPE html>
 <html>
 

diff --git a/articles/post_20170509_001.html b/articles/post_20170509_001.html
@@ -1,4 +1,3 @@
-{% seo %}
 <!DOCTYPE html>
 <html>
 

diff --git a/index.html b/index.html
@@ -1,11 +1,11 @@
-{% seo %}
 <!DOCTYPE html>
 <html>
 
 <head>
     <meta name="viewport" content="width=800px, initial-scale=1.0" charset="UTF-8">
     <title>Greg Mierzwinski</title>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" media="(max-width: 4000px)" href="styles.css">
+    <link rel="stylesheet" media="(max-width: 1000px)" href="styles_mobile.css">
     <style>
         #inner_sec {
             margin-bottom: 4%;
@@ -62,17 +62,17 @@
         <div class="wrapper">
             <div id="aside">
                 <div id="aside_cover">
-                    <p style="color:white; margin-bottom:5%;">
+                    <div id="namediv">
                         Gregory <br> Mierzwinski<br>
-                    </p>
+                    </div>
 
-                    <nav class="sidebar-nav">
-                        | <a href="index.html">Home</a> <br>
-                        | <a href="archives.html">Archive</a> <br>
-                        | <a href="academics.html">Academics</a> <br>
-                        | <a href="projects.html">Projects</a> <br>
-                        | <a href="contact.html">Contact</a> <br>
-                    </nav>
+                    <div class="sidebar-nav">
+                        <div class=".sidebar_text">| <a href="index.html">Home </a>&nbsp;</div>
+                        <div class=".sidebar_text">| <a href="archives.html">Archive </a>&nbsp;</div>
+                        <div class=".sidebar_text">| <a href="academics.html">Academics </a>&nbsp;</div>
+                        <div class=".sidebar_text">| <a href="projects.html">Projects </a>&nbsp;</div>
+                        <div class=".sidebar_text">| <a href="contact.html">Contact </a>&nbsp;</div>
+                    </div>
                 </div>
             </div>
 

diff --git a/projects.html b/projects.html
@@ -1,4 +1,3 @@
-{% seo %}
 <!DOCTYPE html>
 <html>
 

diff --git a/styles.css b/styles.css
@@ -77,12 +77,20 @@ body {
     clear: both;
     transition: color 0.5s linear;
     line-height:150%;
+    display: block;
 }
 
 .sidebar-nav:hover {
     color: deepskyblue;
 }
 
+.sidebar_text { }
+
+#namediv {
+    color:white;
+    margin-top:12%;
+    margin-bottom:3%;
+}
 
 #section {
     margin-left: 29%;

diff --git a/styles_mobile.css b/styles_mobile.css
@@ -0,0 +1,132 @@
+html {
+    overflow-y: scroll;
+    overflow-x: auto;
+}
+
+body {
+    overflow-y: hidden;
+    overflow-x: hidden;
+    min-height:100%;
+}
+
+.button {
+    background-color: #4CAF50; /* Green */
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    transition: all 0.5s linear;
+    transition-property: background-color, color;
+}
+
+.button:hover {
+    background-color: black;
+    color: #4CAF50;
+}
+
+.wrapper {
+    vertical-align: bottom;
+}
+
+#aside {
+    background-image: url('sidebars2.jpg');
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: top; 
+    background-size: 100% 20%;
+    position: fixed;
+    min-width: 100%;
+    max-width: 100%;
+    height:20%;
+    display: inline-block;
+    top: 0;
+    left: 0;
+    margin: 0;
+}
+
+#aside_cover {
+    background-color: transparent;
+    margin: 5%;
+    margin-top: 5%;
+    min-width: 100%;
+    max-width: 100%;
+    max-height: 20%;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    font-weight: 300;
+    font-family: "Lato","Helvetica Neue",sans-serif;
+    font-size: 1.3em;
+    display:inline-flex;
+    flex-direction: row;
+}
+
+.sidebar-nav {
+    border-top: 1px solid rgba(255,255,255,0.5);
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-top-color: rgba(255, 255, 255, 0.5);
+    font-size: 0.7em;
+    color:ghostwhite;
+    max-width: 100%;
+    max-height: 20%;
+    height: 20%;
+    margin: 1.5em;
+    padding-top: 5%;
+    padding-left: 2%;
+    top:2%;
+    clear: both;
+    transition: color 0.5s linear;
+    line-height:150%;
+    display:inline-flex;
+}
+
+.sidebar-nav:hover {
+    color: deepskyblue;
+}
+
+.sidebar_text {
+    padding-top: 3%;
+}
+
+.clearBoth {
+    clear:both;
+}
+
+#namediv {
+    color:white;
+    max-width:25%;
+}
+
+#section {
+    margin-left: 5%;
+    margin-top: 20%;
+    font-weight: 300;
+    font-family: "Lato","Helvetica Neue",sans-serif;
+    font-size: 200%;
+    text-align: justify;
+}
+
+a {
+    color: ghostwhite;
+    transition: color 0.5s linear;            
+    text-decoration: none;
+}
+
+a:hover {
+    color: lightskyblue;
+}
+
+#a_section_link {
+    color: gray;
+    transition: color 0.15s linear;            
+    text-decoration: none;
+}
+
+#a_section_link:hover {
+    color: blue;
+}