Various general section tweaks (#1020)

* Fix width of general cols to be 60/40

Signed-off-by: Peter Kos <pkos91@icloud.com>

* Fix button link thing

Signed-off-by: Peter Kos <pkos91@icloud.com>

* Factor button effect out for (most) place exc card

Signed-off-by: Peter Kos <pkos91@icloud.com>

Author: peterkos

index.html

@@ -130,10 +130,12 @@ <h2>What is a Hackathon?</h2>
                 <p>Students work in teams and mentors are present to offer help. Sponsors attend to help, recruit, and promote their products. Teams compete in different categories and prizes are awarded, but everyone learns and everyone wins!</p>
                 <p>Come spend 24 hours with us at BrickHack and dedicate time to learn, collaborate, build, and innovate.</p>
             </div>
-            <div id="mlh">
-                <i class="fas fa-arrow-right"></i>
-                <a href="https://mlh.io/" target="_blank" rel="noopener noreferrer">Visit Major League Hacking (MLH)</a>
-            </div>
+            <a href="https://mlh.io/" id="mlh" target="_blank" rel="noopener noreferrer">
+                <div>
+                    <i class="fas fa-arrow-right"></i>
+                    <p>Visit Major League Hacking (MLH)</p>
+                </div>
+            </a>
         </div>
     </section>
     <section id="schedule">

sass/main.scss

@@ -48,9 +48,13 @@ $event-count: 6;
     display: inline-block;
     color: white;
     cursor: pointer;
+    @include button-effect($red);
+}
+
+@mixin button-effect($color) {
     transition: 0.2s all;
     &:hover {
-        background-color: lighten($red, 5%);
+        background-color: lighten($color, 5%);
     }
     &:active {
         transform: translateY(4px);
@@ -290,13 +294,17 @@ nav {
         }
 
         .slick-arrow {
-            margin-top: 70px;
+            margin-top: 50px;
             width: 60px;
             height: 60px;
             background-color: $blue;
             border: 2px solid #A3A9CA;
             box-sizing: border-box;
             border-radius: 50%;
+
+            // slick-theme has a transform we don't need!
+            transform: none;
+            @include button-effect($blue);
         }
 
         // Make sure these appear over the slides!
@@ -339,25 +347,24 @@ nav {
         padding: $section-padding;
         align-items: center;
 
-        div {
-            width: 40%;
+        #hackathon-text {
+            width: 60%;
         }
     }
 
     #mlh {
         @include button;
+        @include button-effect($light-blue);
         background-color: $light-blue;
-        display: inline-block;
-        width: auto;
-        height: auto;
+        margin: 0 auto;
         padding: 30px;
         border-radius: 20px;
 
-        &:hover {
-            background-color: lighten($light-blue, 5%);
+        i, p {
+            display: inline;
         }
 
-        a {
+        p {
             font-size: 1.2em;
             font-weight: $font-medium;
         }
@@ -367,6 +374,7 @@ nav {
             font-size: 1.6em;
             color: $red;
             vertical-align: text-bottom;
+            padding-right: 10px;
         }
     }
 }
@@ -399,8 +407,9 @@ nav {
                 margin-bottom: $card-m;
                 border-radius: 7px;
                 background-color: $light-blue;
-                &:hover {
-                    background-color: lighten($light-blue, 5%);
+                @include button-effect($light-blue);
+                &:active {
+                    transform: none;
                 }
                 .accordion-header {
                     background-color: transparent;