Styling Updates

Gemfile.lock

@@ -134,7 +134,7 @@ GEM
     pry (0.12.2)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
-    puma (3.12.1)
+    puma (3.12.2)
     rack (2.0.7)
     rack-test (1.1.0)
       rack (>= 1.0, < 3)

app/assets/stylesheets/home/faq.scss

@@ -11,7 +11,7 @@ $faq-gutter: 15px;
 
 .faq__item {
   flex: 1 0;
-  min-width: 310px;
+  min-width: 280px;
   margin-bottom: 2.5em;
   margin-left: $faq-gutter;
   margin-right: $faq-gutter;

app/assets/stylesheets/home/layout.scss

@@ -54,18 +54,22 @@ body {
 
 .about{
   padding-top: 140px;
+  @media (max-width: 1100px) {
+    padding-top: 175px;
+  }
 }
 
 .about__wrapper {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
 
-  // height: 100%
+  //height: 100%;
   justify-content: space-around;
 }
 
 .about__left, .about__right {
+  text-align: justify;
   justify-content: center;
   display: flex;
   flex-flow: column;
@@ -75,7 +79,7 @@ body {
   min-height: calc(85vh - 120px);
 
   @media (max-width: 1100px) {
-    min-height: calc(85vh - 80px);
+    min-height: calc(45vh - 50px);
   }
 
   @media (max-width: 480px) {
@@ -97,15 +101,6 @@ body {
 .about__right {
   flex: 400px 1 1;
   max-width: 500px;
-  @media (max-width: 1100px) {
-    min-height: calc(85vh - 80px);
-  }
-}
-
-.about__right p {
-  @media (min-width: 480px) {
-    padding-left: 10px;
-  }
 }
 
 .about__left-background {
@@ -118,9 +113,12 @@ body {
   opacity: 0.3;
   background-size: 700px;
 
-  @media (max-width: 480px) {
+  @media (max-width: 1100px) {
     /*background-image: asset-url("home/about-background-bricks-double.svg");*/
     height: 1200px;
+    opacity: 0.15;
+  }
+  @media (max-width: 480px) {
     margin-top: 40px;
   }
 }
@@ -164,6 +162,8 @@ body {
   width: 690px;
   height: 390px;
 
+  margin: 0 auto;
+
   @media (max-width: 680px) {
     width: 560px;
     height: 315px;
@@ -202,11 +202,11 @@ body {
 .what {
   padding-top: 50px;
   padding-bottom: 50px;
+  text-align: justify;
 
   @media (min-width: 1400px) {
     width: 500px;
-    padding-right: 0;
-    padding-left: 25px;
+    padding-right: 50px;
   }
 
   @media (max-width: 1400px) {
@@ -219,20 +219,11 @@ body {
   max-width: 700px;
 }
 
-.what .text {
-  @media (min-width: 1400px) {
-    padding-left: 20px;
-  }
-
-  @media (min-width: 480px) {
-    text-align: center;
-  }
-}
-
 /* Travel section
  */
 
 .travel {
+  text-align: justify;
   padding-top: 50px;
   padding-bottom: 50px;
 }
@@ -257,6 +248,7 @@ body {
  */
 
 .faq {
+  text-align: justify;
   padding-top: 50px;
   padding-bottom: 50px;
 }
@@ -279,6 +271,7 @@ body {
  */
 
 .sponsor {
+  text-align: justify;
   padding-top: 50px;
   padding-bottom: 7em;
 
@@ -377,12 +370,16 @@ body {
  */
 
 .footer-break {
-  background: asset-url("home/footer-background.png") no-repeat center center, asset-url("bh-logos/brickhack-6.png") no-repeat center center;
-  background-size: auto 120px;
+  background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0) 40%,
+  rgba(255,255,255,0) 60%, rgba(255,255,255,0.9)), 
+
+    asset-url("bh-logos/brickhack-6.png") no-repeat center center,
+    asset-url("home/footer-background.png") no-repeat center center; 
+  //background-size: auto 120px;
   width: 100%;
   height: 300px;
   margin-bottom: 5em;
-  opacity: 0.75;
+  opacity: 1;
   background-size: 1200px, 250px;
   z-index: 100;
 

app/assets/stylesheets/home/nav.scss

@@ -1,6 +1,7 @@
 @import "variables";
 
 $nav-space: 20px;
+$nav-space-tablet: 15px;
 
 .nav {
   position: fixed;
@@ -32,17 +33,13 @@ $nav-space: 20px;
  */
 
 .nav__links {
-  padding-left: 20%;
+  padding-left: 15%;
   margin-left: -1 * $nav-space;
   margin-right: -1 * $nav-space;
   margin-top: -10px;
   margin-bottom: -25px;
   display: flex;
   flex-flow: row wrap;
-
-  @media (max-width: 850px) {
-    display: none;
-  }
 }
 
 .nav__link {
@@ -79,6 +76,14 @@ $nav-space: 20px;
     visibility: visible;
     width: 100%;
   }
+
+  @media (max-width: 1300px) {
+    margin: 10px $nav-space-tablet;
+  }
+
+  @media (max-width: 850px) {
+    display: none;
+  }
 }
 
 /* Nav buttons
@@ -91,10 +96,6 @@ $nav-space: 20px;
 
   margin-right: 75px;
 
-  @media (max-width: 1300px) {
-    margin-right: 75px;
-  }
-
   @media (max-width: 1200px) {
     padding-left: 25px;
     margin-right: 100px;
@@ -114,4 +115,13 @@ $nav-space: 20px;
   @media (max-width: 850px) {
     left: 30px;
   }
+}
+
+.nav__signup__button{
+  position: fixed;
+  right: 140px;
+  @media (max-width: 850px) {
+    left: 120px;
+    top: 30px;
+  }
 }

app/views/pages/_faq.html.erb

@@ -15,8 +15,8 @@ involved_link = 'mailto:logistics@coderit.org?subject=I'd%20like%20to%20get%
   <% faq_content.each do |question, answer| %>
     <div class="faq__item">
       <% if question == "My question isn't answered here..." %>
-        <br/>
-        <br/>
+        </br>
+        </br>
         <p class="faq__question">
           <%= question %>
         </p>

app/views/pages/index.html.erb

@@ -250,7 +250,7 @@
     <br/>
     <ul>
       <li>Increase awareness of your brand amongst students of top talent.</li>
-      <li>Share your technology allowing students to utilize and expand on your products potential.</li>
+      <li>Share your technology allowing students to utilize and expand on your product's potential.</li>
       <li>Advertise positions you're hiring for on our Devpost hackathon page.</li>
       <li>Recruit student developers who share your company's passion.</li>
     </ul>