Mobile view improvements

1 files changed, 117 insertions, 20 deletions

diff --git a/static/css/main.css b/static/css/main.css
index 484c64e..610c948 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -38,7 +38,7 @@ animation-delay: 1.8s;
 }
 body {
     font-size: 14px;
-    font-family: 'Work Sans', sans-serif;
+    font-family: 'Open Sans', sans-serif;
     color: #666;    
 }
 a {
@@ -53,9 +53,11 @@ a:active {
 }
 h1 {
     color: #222;
+    font-family: 'Work Sans', sans-serif;
 }
 h2 {
     color: #222;
+    font-family: 'Work Sans', sans-serif;
 }
 hr {
 
@@ -63,7 +65,7 @@ hr {
 ul {
     padding: 0;
 }
-li {
+.post-item {
     display: block;
     list-style: none;
     list-style-position: outside;
@@ -86,29 +88,114 @@ li {
 .nav {
     text-align: center;
     text-transform: uppercase;
-    margin: 5% 0 5% 0;
+    margin: 3% 0 3% 0;
+}
+.blognav {
+    text-align: left;
+    text-transform: uppercase;
+    margin: 3% 0 3% 0;
 }
 .content {
-    margin: 0em 0em 4em 0em;
-    padding: 20px;
+    margin: 0;
+    padding: 0px;
+}
+.main .section {
+    width: 90%;
+    float: center;
+}
+@media (max-width: 800px) {
+    .main .section {
+        width: 100%;
+        float: center;
+    }
 }
 .markdown {
-
+    margin: 0;
+    padding: 0px;
+}
+.markdown ul {
+  margin-bottom: 1.25rem;
+  margin-left: 1.5em;
+  list-style: none;
+}
+.markdown li {
+  list-style-type: disc; 
+  margin-left: 1.5em;
+  list-style-position: outside;
+  padding-left: 1em;
+}
+.markdown em {
+  font-style: italic;
+}
+.markdown strong {
+  font-weight: 700;
+}
+.markdown hr {
+  position: relative;
+  margin: 1.75rem 0;
+  border: 0;
+  border-top: 1px solid #808080;
+  border-top: 1px solid #999999;
+}
+.markdown abbr {
+  font-size: 0.8rem;
+  font-weight: bold;
+  color: #666666;
+  text-transform: uppercase;
+}
+.markdown abbr[title] {
+  cursor: help;
+  border-bottom: 1px dotted #808080;
+}
+.markdown blockquote {
+  padding: .5rem 1rem;
+  margin: .8rem 0;
+  color: #7a7a7a;
+  border-left: .25rem solid #e5e5e5;
+}
+.markdown blockquote p:last-child {
+  margin-bottom: 0;
+}
+.markdown table {
+  margin: 2em 0 2em 0;
+  width: 100%;
+  border: 1px solid #e5e5e5;
+  border-collapse: collapse;
+}
+.markdown td,
+.markdown th {
+  padding: .25rem .5rem;
+  border: 1px solid #e5e5e5;
+  text-align: center;
+}
+.markdown tbody tr:nth-child(odd) td,
+.markdown tbody tr:nth-child(odd) th {
+  background-color: #f7f7f7;
 }
 .pagehead {
 	margin: 20% 20% 5% 20%;
     text-align: center;
 }
+@media (max-width: 600px) {
+    .pagehead {
+        margin: 20% 10% 5% 10%;
+        text-align: center;
+    }
+}
 .list-head {
     text-align: left;
     margin: 20% 0 0 0;
 }
+.page-head-box {
+    text-align: left;
+    margin: 15% 0 0 0;
+}
 .list-title {
     font-size: 8em;
     font-weight: bold;
     margin-left: -10px;
 }
-@media (max-width: 550px) {
+@media (max-width: 600px) {
     .list-title {
         font-size: 3em;
         font-weight:bold;
@@ -120,28 +207,32 @@ li {
     text-align: center;
     margin: 1.5em 0em 1.5em 0em;
 }
-@media (max-width: 550px) {
+@media (max-width: 600px) {
     .section-head {
         font-size: 2em;
         text-align: center;
         margin: 1em 0em 1em 0em;
     }
 }
-.profile-pic {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 20px;
+img {
+    max-width: 100%;
+    margin: 1em 0 1em 0;
+    border-radius: 5px;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
 }
 .img-responsive {
     border-radius: 5px;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
 }
+.avatar {
+    max-width: 300px;
+    margin: 0 0 1em 0;
+}
 .intro {
     font-size: 8em;
     font-weight: bold;
 }
-@media (max-width: 550px) {
+@media (max-width: 600px) {
     .intro {
         font-size: 3em;
         font-weight:bold;
@@ -151,7 +242,7 @@ li {
     font-size: 2em;
     text-align: center;
 }
-@media (max-width: 550px) {
+@media (max-width: 600px) {
     .blurb {
         font-size: 1em;
         text-align: center;
@@ -166,6 +257,11 @@ li {
     font-size: 2em;
     margin: 0.8em 0em 0.5em 0em;
 }
+@media (max-width: 600) {
+    .highlight-text {
+    font-size: 1.5em;
+    }
+}
 .project-grid {
     padding: 1.2em 0em 0em 0em;
 }
@@ -183,25 +279,25 @@ li {
     text-align: center;
 }
 .blog-header {
-    margin: 10% 0 5% 0;
+    margin: 3% 0 3% 0;
     text-align: left;
     font-size: 3em;
     font-weight: bold;
 }
-@media (max-width: 550px) {
+@media (max-width: 600px) {
     .blog-header {
-    margin: 10% 0 5% 0;
+    margin: 3% 0 3% 0;
     text-align: left;
     font-size: 2em;
     font-weight: bold;
     }
 }
 .post-data {
-    font-size: 0.5em;
+    font-size: 0.4em;
     font-weight: normal;
 }
 .blog-share {
-    font-size: 0.3em;
+    font-size: 0.35em;
     font-weight: normal;
     line-height: 2em;
 }
@@ -209,6 +305,7 @@ li {
     text-align: center;
     color: #888;
     padding: 2em;
+    font-size: 0.8em;
 }
 #footer a {
     color: #888;