Add discord button to hero (#1155)

* Add discord button to registration; no mobile

* Add discord link

* Mobile button progress

* More buton

* Remove stray comment

Author: peterkos

index.html

@@ -58,9 +58,11 @@
             <!-- Background images due to easier positioning. -->
             <div id="hero-text">
                 <p id="bh7">BRICKHACK 7</p>
-                <p id="premiere">RIT's Premiere Hackathon</p>
-                <p id="dates">FEB 20-21 | ROCHESTER INSTITUTE OF TECHNOLOGY</p>
-                <a id="register" href="https://apply.brickhack.io/users/sign_up">REGISTER</a>
+                <p id="dates">FEB 20-21 | RIT DIGITAL HACKATHON</p>
+                <div id="action-buttons">
+                    <a id="register" href="https://apply.brickhack.io/users/sign_up">REGISTER</a>
+                    <a id="discord" href="https://discord.gg/4xjWuSeP9Q">DISCORD</a>
+                </div>
             </div>
         </div>
         <div id="desk-container" class="rellax" data-rellax-speed="0" data-rellax-desktop-speed="-8">

sass/main.scss

@@ -41,7 +41,7 @@ $title-size: 3em;
     text-decoration: none;
     user-select: none;
     padding: 10px 20px;
-    border-radius: 50px;
+    border-radius: 20px;
     display: inline-block;
     color: white;
     cursor: pointer;
@@ -191,28 +191,37 @@ nav {
         // This lets the different h elements
         // appear to be equally spaced.
         line-height: 0.7;
-        margin-bottom: 30px;
+        margin-bottom: 40px;
     }
 
     #bh7 {
-        font-size: 5.4em;
+        font-size: 6em;
         font-weight: $font-extrabold;
     }
 
-    #premiere {
-        font-size: 2.5em;
-        font-weight: $font-medium;
-    }
-
     #dates {
-        font-size: 1.3em;
-        font-weight: $font-regular;
+        font-size: 2em;
+        font-weight: $font-extrabold;
     }
 
-    #register {
-        @include button;
-        padding: 10px 80px;
-        font-size: 2em;
+    #action-buttons {
+        display: flex;
+        justify-content: space-between;
+        width: 80%;
+
+        #register, #discord {
+            @include button;
+            font-size: 2.3em;
+            width: 48%;
+            text-align: center;
+        }
+
+        #discord {
+            background-color: $dark-blue;
+            &:hover {
+                background-color: lighten($dark-blue, 5%);
+            }
+        }
     }
 
     // Hero Graphics
@@ -1231,18 +1240,6 @@ footer {
     }
 
     #hero {
-        #bh7 {
-            font-size: 6.4em;
-        }
-
-        #premiere {
-            font-size: 3em;
-        }
-
-        #dates {
-            font-size: 1.6em;
-        }
-
         #register {
             font-size: 2.3em;
         }
@@ -1271,18 +1268,13 @@ footer {
     }
 
     #hero {
-
         #bh7 {
             font-size: 5.0em;
         }
 
-        #premiere {
-            font-size: 2.0em;
-        }
-
-        #dates {
-            font-size: 1.1em;
-        }
+        // #dates {
+        //     font-size: 1.7em;
+        // }
 
         #shapes {
             right: -100px;
@@ -1384,6 +1376,20 @@ footer {
 
 @media screen and (max-width: 1220px) {
 
+    #hero {
+        #dates {
+            font-size: 1.5em;
+        }
+
+        #action-buttons {
+            width: 70%;
+
+            #register, #discord {
+                font-size: 1.7em;
+            }
+        }
+    }
+
     #hackathon #hackathon-content #hackathon-buttons {
         width: 100%;
     }
@@ -1512,16 +1518,20 @@ footer {
             font-size: 4.2em;
         }
 
-        #premiere {
-            font-size: 2.0em;
+        #hero-text {
+            margin-top: 10vh;
         }
 
         #dates {
-            font-size: 1.1em;
+            font-size: 1.5em;
         }
 
-        #hero-text {
-            margin-top: 10vh;
+        #action-buttons {
+            width: 60%;
+
+            #register, #discord {
+                font-size: 1.2em;
+            }
         }
 
         #desk-container {
@@ -1718,18 +1728,23 @@ footer {
 
         p {
             line-height: 0.4;
+            margin-bottom: 25px;
         }
 
         #bh7 {
-            font-size: 2.4em;
+            font-size: 3em;
         }
 
-        #premiere {
-            font-size: 1.5em;
+        #dates {
+            font-size: 1em;
         }
 
-        #dates {
-            font-size: 0.7em;
+        #action-buttons {
+            width: 80%;
+
+            #register, #discord {
+                font-size: 1.2em;
+            }
         }
 
         #desk-container {
@@ -1832,7 +1847,7 @@ footer {
 
 @media screen and (max-width: 320px) {
 
-    #hero #premiere {
+    #hero #dates {
         font-size: 1.2em;
     }
 }