More UI fixes

flask_app.py

@@ -568,3 +568,4 @@ def allowed_file(filename):
 
 if __name__ == '__main__':
     app.run(host=SERVER_LISTEN_ADDR, port=SERVER_PORT, threaded=True)
+    

static/css/style.css

@@ -6,74 +6,100 @@ body {
     color: #eee;
 }
 
-nav {
+p {
-    background-color: #E7E4C6;
+	line-height: 2rem;
-    border-color: #E7E4C6;
-    color: white;
 }
 
-hr {
+#logo-container {
-    margin-top: 2rem;
+	display: flex;
-    margin-bottom: 2rem;
+	justify-content: center;
-    width: 70%;
+	flex-direction: row;
-    border-width: 10px;
+	padding-top: 5px;
-    border-color: #F5665B;
+	padding-bottom: 5px;
-  }
+	height: 100%;
-
+	width: 100%;
-h2 {
-    text-align: center;
-}
-h3 {
-    text-align: center;
-}
-h4 {
-    text-align: center;
-}
-h5 {
-    text-align: center;
-}
-h6 {
-    text-align: center;
-    margin-right: 100px;
-	margin-left: 100px;
 }
 
-div.main-logo {
+#goat {
-    margin-top: 16px;
+	height: 100%;
 }
 
-.sponsors {
+.button-collapse {
-    text-align: center;
+	color: #26a69a;
-    display: block;
-    padding: 20px;
-}
-
-.sponsors > div {
-    margin-bottom: 40px;
-}
-
-.sponsors > div:last-child {
-    margin-bottom: 0;
 }
 
 
-.sponsors img {
+.parallax-container {
-	display: inline-block;
+	min-height: 380px;
-    margin-right: 40px;
+	line-height: 0;
-    /* Hack to fix overflow of bose logo*/
+	height: auto;
-    max-width: calc(100% - 10px);
+	color: rgba(255,255,255,.9);
+}
+.parallax-container .section {
+	width: 100%;
 }
 
-.title-sponsors img{
+@media only screen and (max-width : 992px) {
-    max-height: 90px;
+	.parallax-container .section {
+		top: 40%;
+	}
+	#index-banner .section {
+		top: 10%;
+	}
 }
 
-.silver-sponsors img {
+@media only screen and (max-width : 600px) {
-	max-height: 25px;
+	.parallax-container .section {
+		height: auto;
+		overflow: auto;
+	}
+	.container {
+		height: auto;
+	}
+	#index-banner .section {
+		top: 0;
+	}
 }
 
-a {
+#tagline {
-    color: black;
+	font-weight: 600;
+}
+
+#event-info {
+	font-weight: 400;
+}
+
+#registration-banner {
+	min-height: 100px;
+	max-height: 150px;
+}
+
+#registration-banner .section{
+	top: auto;
+}
+
+.icon-block {
+	padding: 0 15px;
+}
+.icon-block .material-icons {
+	font-size: inherit;
+}
+
+.parallax img {
+	display: inherit;
+	max-width: 200%;
+}
+
+#mlh-trust-badge {
+	display: block;
+	max-width: 100px;
+	min-width: 60px;
+	position: fixed;
+	right: 50px;
+	top: 0;
+	width: 10%;
+	z-index: 10000;
 }
 
 
+

templates/dashboard.html

@@ -1,6 +1,6 @@
 {% include 'header.html' %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
+<link href="../static/css/materialize.min.css" rel="stylesheet">
 
 <div class="contact-section" style="height: 100%;">
     <div class="container">
@@ -29,15 +29,18 @@
                 </form>
             {% endif %}
             <br>
-            <a href="#" id="drop-link"><p class="sub-button btn waves-effect waves-light grey darken-1">Drop Application if you can't make it :(</p></a>
+            
             {% if admin %}
 		<br>
                 <a href="/admin"><p class="btn">Admin Dashboard</p></a>
             {% endif %}
             <br>
-            Please sit tight, while we improve the UI of this page :P (Or we'll do it next year)
+            
         </div>
     </div>
+    <br>
+    <br>
+    <center><a href="#" id="drop-link"><p class="btn">Drop Application if you can't make it :(</p></a></center>
 </div>
 
 <script>

templates/footer.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-inverse ">
+<nav class="navbar navbar-inverse " style= "margin-top: 30px">
         <div class="container-fluid">
           <div class="navbar-header">
           </div>

templates/header.html

@@ -6,6 +6,15 @@
       <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
       <link href="../static/css/style.css" rel="stylesheet">
     </head>
+
+    <style>
+      nav {
+        background-color: #F5665B;
+        border-color: #E7E4C6;
+        color: white;
+      }
+    </style>
+
     <body>
       <nav class="navbar navbar-inverse sticky-top navbar-expand">
         <div class="container-fluid">

templates/index.html

@@ -1,6 +1,82 @@
 {% include 'header.html' %}
 
 <div>
+
+<style>
+hr {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    width: 70%;
+    border-width: 10px;
+    border-color: #F5665B;
+  }
+
+h2 {
+    text-align: center;
+}
+h3 {
+    text-align: center;
+}
+h4 {
+    text-align: center;
+}
+h5 {
+    text-align: center;
+}
+h6 {
+    text-align: center;
+    margin-right: 100px;
+	margin-left: 100px;
+}
+
+div.main-logo {
+    margin-top: 16px;
+}
+
+.sponsors {
+    text-align: center;
+    display: block;
+    padding: 20px;
+}
+
+.sponsors > div {
+    margin-bottom: 40px;
+}
+
+.sponsors > div:last-child {
+    margin-bottom: 0;
+}
+
+
+.sponsors img {
+	display: inline-block;
+    margin-right: 40px;
+    /* Hack to fix overflow of bose logo*/
+    max-width: calc(100% - 10px);
+}
+
+.title-sponsors img{
+    max-height: 90px;
+}
+
+.silver-sponsors img {
+	max-height: 25px;
+}
+
+a {
+    color: black;
+}
+.x{
+    background-color: #E7E4C6;
+    margin-right: 100px;
+    margin-left: 100px;
+    color: black;
+    border-radius: 50px 50px 50px 50px;
+    padding-bottom: 10px;
+    padding-top:10px;
+}
+    
+</style>
         <!--Logo + Date+ Hosted By -->
         <div class="container">
             <div class="row center main-logo">
@@ -56,6 +132,7 @@
 
         <!--FAQs -->
         <hr/>
+        <div class = "x">
         <h2> FAQs </h2>
 
         <div class = "FAQ">
@@ -101,7 +178,7 @@
             <h4>What is the schedule?</h4>
             <h6><a href = 'https://docs.google.com/spreadsheets/d/1FSh2UfZwoMwXlgrKnKjnQg2okEcLDVCP30khnPdM1H0/edit?usp=sharing' style= "color: blue">Here it is!</a> Keep in mind that this is tentative. </h6>
         </div>
-
+    </div>
 
 </div>
 

templates/register.html

@@ -1,15 +1,20 @@
 {% include 'header.html' %}
 <link href="../static/css/materialize.min.css" rel="stylesheet">
+<style>
+    a{
+        color:darkblue;
+    }
+</style>
 <div  style="height: 100%;">
     <div id="registration-banner" class="parallax-container valign-wrapper">
         <div class="section">
-            <h2 class="header center red-text text-darken-2">Registration</h2>
+            <h2 class="header center black-text text-darken-2">Registration</h2>
         </div>
         <div class="parallax"><img src="../static/img/background1.jpg" alt="background"></div>
     </div>
     <div class="container">
         <div class="container">
-	    <h1>Hi {{ name }}, just a few more steps!</h1>
+	    <Center><h1>Hi {{ name }}, just a few more steps!</h1></Center>
 	    <div class="section">
             <form method="post" action="/register" enctype="multipart/form-data">
                 <div>
@@ -26,25 +31,25 @@
                 </div>
                 <p>By registering & attending, you agree to the following policies:</p>
                 <p>
-                    <a href="/tos">Hack@WPI's Terms and Conditions</a>
+                    <center><a href="/tos">Hack@WPI's Terms and Conditions</a></center>
                 </p>
                 <p>
-                    <a href="https://github.com/MLH/mlh-policies/blob/master/data-sharing.md">MLH's Data Sharing Notice</a>
+                    <center><a href="https://github.com/MLH/mlh-policies/blob/master/data-sharing.md">MLH's Data Sharing Notice</a></center>
                 </p>
                 <p>
-                    <a href="https://mlh.io/privacy">MLH's Privacy Policy</a>
+                    <center><a href="https://mlh.io/privacy">MLH's Privacy Policy</a></center>
                 </p>
                 <p>
-                      <a href="https://github.com/MLH/mlh-policies/blob/master/prize-terms-and-conditions/contest-terms.md">MLH's
+                      <center><a href="https://github.com/MLH/mlh-policies/blob/master/prize-terms-and-conditions/contest-terms.md">MLH's
-                        Contest Terms and Conditions</a>
+                        Contest Terms and Conditions</a></center>
                 </p>
                 <p>
-                    <a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf">MLH's Code of Conduct</a>
+                    <center><a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf">MLH's Code of Conduct</a></center>
                 </p>
                 <br>
-                    <input type="checkbox" name="tos" id="checkboxid" required><label for="checkboxid"><b style="color:black;">Do you agree with these Rules?</b></label>
+                    <input type="checkbox" name="tos" id="checkboxid" required><label for="checkboxid"><b style="color:white;">Do you agree with these Rules?</b></label>
                 <br><br>
-                <input name="submit" class="btn btn-lg btn-primary btn-invert" type="submit" value="Submit"/>
+                <center><input name="submit" class="btn btn-lg btn-primary btn-invert" type="submit" value="Submit"/></center>
               </form>
           </div>
     </div>