Adjusted front page design to improve responsive feel on mobile

1 files changed, 15 insertions, 83 deletions

diff --git a/css/main.css b/css/main.css
index 3105511..443674b 100644
--- a/css/main.css
+++ b/css/main.css
@@ -11,16 +11,14 @@ body {
   background-image: linear-gradient(to bottom right, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0)),
                     url('../img/3.jpg');
   background-size: cover;
-  background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
+  background-position: center;
+  margin: 0;
 }
 #headerbar {
   height: 48px;
   width: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
 }
 #headerimg {
   background-image: url('../img/2.png');
@@ -30,17 +28,12 @@ body {
   height: inherit;
 }
 #midbody {
-  margin-left: auto;
-  margin-right: auto;
+  margin: 10em auto 7em;
   height: 150px;
   color: #ffffff;
   text-align: center;
   font-size: 20pt;
   max-width: 66%;
-  position: absolute;
-  left: 0px;
-  right: 0px;
-  top: 43%;
 }
 .bigquote {
   font-family: 'Myriad Pro';
@@ -83,17 +76,7 @@ body {
   border-color: #a0a0a0;
 }
 #cover {
-  position: absolute;
-  top: 0px;
-  left: 0px;
   width: 100%;
-  height: calc(100% - 56px);
-  box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
-}
-#about {
-  position: absolute;
-  top: 100%;
-  left: 0px;
 }
 
 /* Small screen security */
@@ -105,48 +88,30 @@ body {
     max-width: 100%;
   }
 }
+
 #part2 {
   width: 100%;
-  position: absolute;
-  top: 85vh;
-  left: 0px;
-}
-#header2 {
-  width: 100%;
-  height: 175px;
-  position: absolute;
-  z-index: 1;
-  top: 0px;
-  left: 0px;
-  background-color: #fe8242;
-  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
 }
 #body2 {
   background-color: #ffffff;
   width: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
   z-index: 0;
 }
 #footer {
+  margin-top: 1em;
   width: 100%;
   height: 14px;
-  position: absolute;
   z-index: 1;
-  bottom: 0px;
-  left: 0px;
   background-color: #f0f0f0;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 #copy {
   font-size: x-small;
   font-family: 'Myriad Pro';
-  position: absolute;
   text-align: center;
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
   margin: auto;
 }
 #copy a {
@@ -157,39 +122,6 @@ a #lefth2 p, #midh2 p, #righth2 p {
   margin: 0px;
   color: #000000;
 }
-#lefth2 {
-  background-image: url('../img/2chainz.png');
-  left: 10%;
-  margin: 0px 0px 0px 0px;
-}
-#midh2 {
-  background-image: url('../img/handshake.png');
-  left: 0px;
-  right: 0px;
-  margin: 0px auto 0px auto;
-}
-#righth2 {
-  background-image: url('../img/talks.png');
-  right: 10%;
-  margin: 0px 0px 0px 5px;
-}
-#lefth2, #midh2, #righth2 {
-  width: 143px;
-  position: absolute;
-  top: 0px;
-  background-repeat: no-repeat;
-  background-size: 130px;
-  background-position: center 10px;
-  padding: 148px 16px 8px 16px;
-  font-family: 'DejaVu Sans Extra-Light';
-  font-size: 16px;
-  text-transform: uppercase;
-  text-align: center;
-  cursor: pointer;
-}
-a:hover #lefth2, a:hover #midh2, a:hover #righth2 {
-  background-color: rgba(0,0,0,0.2);
-}
 #header3 {
   background-color: #f0f0f0;
   height: 10px;
@@ -210,7 +142,7 @@ a:hover #lefth2, a:hover #midh2, a:hover #righth2 {
 #mission {
   font-family: 'DejaVu Sans Extra-Light';
   font-size: 12pt;
-  margin: 0vw 10vw 20px 10vw;
+  margin: auto;
 }
 .bubble p {
   margin: 0px;
@@ -238,6 +170,7 @@ p.bubblehead {
 }
 #workers {
   margin: 1.5em 0em 2em 0em;
+  text-align: center;
 }
 #workers h2, #employers h2 {
   margin: 0px 0px 1em 0px;
@@ -255,7 +188,7 @@ p.bubblehead {
   border-radius: 5px;
   padding: 0.5em;
   display: inline-block;
-  margin: 2em 0px 1em 33vw;
+  margin: 2em auto 1em;
   cursor: pointer;
 }
 .workerbtn:hover {
@@ -263,6 +196,7 @@ p.bubblehead {
   background-color: #fb4d00;
 }
 #employers {
+  text-align: center;
 }
 .employerbtn {
   text-decoration: none;
@@ -271,7 +205,7 @@ p.bubblehead {
   border-radius: 5px;
   padding: 0.5em;
   display: inline-block;
-  margin: 2em 0px 1em 32vw;
+  margin: 2em auto 1em;
   cursor: pointer;
 }
 .employerbtn:hover {
@@ -289,9 +223,7 @@ p.bubblehead {
   background-size: 24px 24px;
   background-repeat: no-repeat;
   background-position: center center;
-  position: absolute;
-  left: 0px;
-  right: 0px;
+  position: relative;
   top: -17px;
   box-shadow: 0px 0px 5px rgba(0,0,0,0.75);
 }