cleanup layout more and added initial sidebar

css/main.css

@@ -48,10 +48,17 @@ body {
     transition: all .5s ease;
 }
 
+hr {
+    width: 100%;
+    height: 1px;
+    float: left;
+    border: none;
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+}
+
 header {
     position: relative;
     width: 100%;
-    
     /*height: calc(10vh + 50px);*/
 }
 
@@ -75,6 +82,7 @@ nav#menu {
     display: inline-flex;
     flex-direction: row;
     flex-wrap: nowrap;
+    background-color: #b71c1c;
     box-shadow: 0 28px 79px 0 rgba(66,129,121,.27);
 }
 
@@ -160,7 +168,6 @@ button.flip > i {
 }
 
 button.expand > i {
-
 }
 
 i.left {
@@ -247,7 +254,7 @@ footer > span {
     width: 100%;
     min-height: 100vh;
     z-index: 1;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: #424242;
     
 }
 
@@ -263,6 +270,7 @@ footer > span {
 section {
     width: 100%;
     height: 100vh;
+    padding-bottom: 5vh;
     display: flex;
 }
 
@@ -270,46 +278,62 @@ section {
     display: flex;
     height: 100%;
     justify-content: center;
-    padding-top: 5%;
+    flex-flow: row wrap;
 }
 
 #updates {
     display: flex;
     height: 100%;
     justify-content: center;
-    padding: 5% 0;
+    flex-flow: row wrap;
 }
 
-section > h1 {
+section h1 {
     font-size: 3.5em;
     margin-top: 0.5em;
 }
 
-section > h2 {
+section h2 {
-    width: calc(100% - 1em);
+    width: 100%;
-    font-size: 1.2em;
+    font-size: 2.1em;
-    padding: 0.5em 0;
+    font-weight: bold;
+    color: #fff;
+    margin: 2.5vh 0;
     display: inline-block;
+    text-align: left;
+}
+
+#intro-title {
+    width: 100%;
 }
 
 #intro-text {
     text-align: center;
-    width: 50%;
+    width: calc(50% - 8vw);
+    margin: 0 2vw;
 }
 
 #intro-image {
     text-align: center;
-    width: 50%;
+    width: calc(50% - 8vw);
+    margin: 0 2vw;
+    padding-top: calc(5% + 2.1em);
 }
 
 #intro-image > img {
-    width: 90%;
+    width: 100%;
 }
 
 #tweets {
     text-align: center;
-    width: 50%;
+    width: calc(50% - 8vw);
-    margin: 0 3em;
+    margin: 0 2vw;
+}
+
+#feedback {
+    text-align: center;
+    width: calc(50% - 8vw);
+    margin: 0 2vw;
 }
 
 #logo {
@@ -329,22 +353,6 @@ section > h2 {
 #letter > p {
     margin: 0.5em 0;
 }
-/*@media (max-height: 300px) {
-    #desc > span {
-        width: calc(100% - 1em);
-        padding: 0 0.05em;
-        font-size: 0.7em;
-        display: inline-block;
-        margin: 0.5em 0;
-        clear: both;
-    }
-    #desc > h1 {
-        font-size: 1.5em;
-    }
-    #desc > h2 {
-        font-size: 0.7em;
-    }
-}*/
 
 #contact {
     margin: 1em 0 0 0;
@@ -366,7 +374,7 @@ button.menu-item {
     height: 50px;
     outline: none;
     color: #fff;
-    background-color: #b71c1c;
+    background-color: transparent;
     border: none;
 }
 
@@ -378,55 +386,56 @@ button.menu-item:active {
     font-size: 1.1em;
 }
 
-#desc:before {
-    position: absolute;
-    top: 0vh;
-    bottom: 0vh;
-    left: 0vw;
-    right: 0vw;
-    width: 100%;
-    height: 100%;
-    content: "";
-    display: block;
-    background-color:  rgba(255, 255, 255, 0.1);
-    -webkit-filter: blur(10px);
-    filter        : blur(10px); 
-    z-index: -1;
-}
-
-#desc {
-    position: relative;
-    width: 100vw;
-    min-height: 100%; /*calc(10.6em + 50px);*/
-    text-align: center;
-    vertical-align: middle;
-}
-
 @media screen and (max-width: 900px) {
-    #desc {
+    #intro-text, #intro-image, #tweets, #tweets, #feedback {
+        width: 100%;
     }
-}
+    #letter {
-
+        font-size: 1.4em;
-@media screen and (max-width: 480px), screen and (max-height: 420px) {
+    }
-    button.flip {
+    #dome:after {
+        background-position-y: 20vh;
+        background-size: 100%;
+    }
+    #dome {
         display: none;
     }
-    section {
+    #menu > a {
-        height: 100vh;
+        width: 100%;
+        height: 10vh;
+        
+        flex-basis: auto;
     }
-    #desc > h1 {
+    #menu button {
         font-size: 2em;
+        width: 100%;
+        height: 100%;
     }
-    #desc {
+
-        top: 0;
+    nav#menu {
-        left: 0;
+        width: 30vw;
-        width: 100vw;
         height: 100vh;
+        display: block;
+        position: fixed;
+        z-index: 2;
+        left: -30vw;
     }
 }
 
-@media screen and (max-width: 225px), screen and (max-height: 420px) {
+@media screen and (min-width: 1800px) {
-    #desc {
+    #letter {
-        overflow-y: auto;
+        font-size: 1.4em;
     }
+    
+}
+
+/*
+#dome:after {
+        background-position-y: 20vh;
+        background-size: 100%;
+    }
+    */
+
+@media screen and (max-width: 480px), screen and (max-height: 420px) {
+    
 }

index.html

@@ -35,10 +35,10 @@
         </div>
     </header>
     <div id="wrapper" class="fluid">
-        <h2>Welcome!</h2>
-        <section id="about">
         
+        <section id="about">
             <div id="intro-text" class="fluid">
+                <h2 id="intro-title">Welcome!</h2>
                 <div id="logo">
                     <img src="img/logo.png" alt="TJSGA Logo" />
                 </div>
@@ -63,14 +63,18 @@
                 <img src="img/group.jpg" alt="TJSGA Group Photo" />
             </div> 
         </section>
+        <hr />
         <section id="updates">
             <div id="tweets">
-                <a class="twitter-timeline" data-height="540" data-theme="dark" data-link-color="#2B7BB9" href="https://twitter.com/tjSGA">Tweets by tjSGA</a>
+                <h2>Twitter</h2>
+                <a class="twitter-timeline" data-height="640" data-theme="dark" data-link-color="#2B7BB9" href="https://twitter.com/tjSGA">Tweets by tjSGA</a>
                 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
             </div>
-            <div id="tweets">
+            <div id="feedback">
-                <a class="twitter-timeline" data-height="540" data-theme="dark" data-link-color="#2B7BB9" href="https://twitter.com/tjSGA">Tweets by tjSGA</a>
+                <h2>Feedback</h2>
-                <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+                <iframe src="https://docs.google.com/forms/d/18KRo3RritoN6RddNvI-l2zZs1h_1mmVWWgRQGOk2vvQ/viewform?embedded=true" width="100%" height="640" frameborder="0" marginheight="0" marginwidth="0">
+                    Loading...
+                </iframe>
             </div>
         </section>
     </div>