login.html: fix background image impl using template specific css

3 files changed, 36 insertions, 46 deletions

diff --git a/res/client/css/partials/login.scss b/res/client/css/partials/login.scss
index e6ba7694..7c2a94eb 100644
--- a/res/client/css/partials/login.scss
+++ b/res/client/css/partials/login.scss
@@ -8,22 +8,11 @@
 
   }
 
-.login-background {
-  background: url(../img/login-background.jpg);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
-  padding: 50px;
-  overflow-y: hidden;
-}
-
 .welcome-box {
   margin-left: auto;
   margin-right: auto;
   padding-bottom: $three-baselines;
-  margin-bottom: 400px;
+  margin-top: 80px;
   width: 470px;
   background: white;
   box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.3);
diff --git a/res/client/css/style.css b/res/client/css/style.css
index cf63e281..38917696 100644
--- a/res/client/css/style.css
+++ b/res/client/css/style.css
@@ -143,21 +143,11 @@ table {
   *:before, *:after {
     box-sizing: border-box; }
 
-.login-background {
-  background: url(../img/login-background.jpg);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
-  padding: 50px;
-  overflow-y: hidden; }
-
 .welcome-box {
   margin-left: auto;
   margin-right: auto;
   padding-bottom: 36px;
-  margin-bottom: 400px;
+  margin-top: 80px;
   width: 470px;
   background: white;
   box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.3); }
diff --git a/res/templates/login.html b/res/templates/login.html
index e28f38fb..a03bf73c 100644
--- a/res/templates/login.html
+++ b/res/templates/login.html
@@ -4,32 +4,43 @@
 {{ super() }}
 <script src="/static/lib/jquery.js" type="text/javascript"></script>
 <script src="/static/user_login.js" type="text/javascript"></script>
+
+<style type="text/css">
+html {
+  background: url(/static/img/login-background.jpg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+body {
+  background-color: transparent;
+}
+</style>
 {% endblock %}
 {% block content %}
-<div class="login-background">
-	<div class="welcome-box">
-		<img src="/static/img/logo-red.png" class="login-rhizi-logo">
-		<h1 class="login-header"> Welcome to Rhizi!</h1>
-		<p class="login-text">Rhizi is a collaborative knowledge editor.</p>
-		<p class="login-text">Upload your internship proposals for review.</p>
-		<p class="login-text">Share the skills, interests and project you participate in.</p>
-		<br>
-		<p class="login-text">The resulting interactome allows the entire CRI to better collaborate with AIV students</p>
-		<div id="login_form_panel" class="login-form">
-			<fieldset>
-				<form action="javascript:void(0);" method="get" onsubmit="submit_login_form();" id="login_form">
-					<input class="login-input" type="email" id="login_email_address" placeholder="Email">
-					<input class="login-input" type="password" id="login_password" placeholder="Password">
-					<input class="login-input" type="submit" value="Sign in">
-					<a class="forgot-password">Forgot your password?</a>
-				</form>
-			</fieldset>
-			<div id="failed-login" style="display: none">
-				<b>Login Failed</b>
-			</div>
+<div class="welcome-box">
+	<img src="/static/img/logo-red.png" class="login-rhizi-logo">
+	<h1 class="login-header"> Welcome to Rhizi!</h1>
+	<p class="login-text">Rhizi is a collaborative knowledge editor.</p>
+	<p class="login-text">Upload your internship proposals for review.</p>
+	<p class="login-text">Share the skills, interests and project you participate in.</p>
+	<br>
+	<p class="login-text">The resulting interactome allows the entire CRI to better collaborate with AIV students</p>
+	<div id="login_form_panel" class="login-form">
+		<fieldset>
+			<form action="javascript:void(0);" method="get" onsubmit="submit_login_form();" id="login_form">
+				<input class="login-input" type="email" id="login_email_address" placeholder="Email">
+				<input class="login-input" type="password" id="login_password" placeholder="Password">
+				<input class="login-input" type="submit" value="Sign in">
+				<a class="forgot-password">Forgot your password?</a>
+			</form>
+		</fieldset>
+		<div id="failed-login" style="display: none">
+			<b>Login Failed</b>
 		</div>
-		<div class="contact-us-div"><span class="contact-us-icon"></span></div>
-		<p class="login-text contact-us-text"><a class="contact-us-link" href="mailto:feedback_CRI@rhizi.net?subject=Rhizi%20User%20Feedback">Email us</a> with your feedback,<br>we would love to hear your suggestions!</p>
 	</div>
+	<div class="contact-us-div"><span class="contact-us-icon"></span></div>
+	<p class="login-text contact-us-text"><a class="contact-us-link" href="mailto:feedback_CRI@rhizi.net?subject=Rhizi%20User%20Feedback">Email us</a> with your feedback,<br>we would love to hear your suggestions!</p>
 </div>
 {% endblock %}