Fixed some styling

6 years ago · cdc6284d5c
parent 60ae824f2a
commit cdc6284d5c
2 changed files with 43 additions and 33 deletions
--- a/static/style.css
+++ b/static/style.css
@ -1,5 +1,8 @@
 html {
 	font-family: 'Roboto', sans-serif;
+}
+
+body {
 	margin: 0;
 	padding: 0;
 }
@ -13,7 +16,7 @@ h2 {

 .leaderboard {
 	width: 35%;
-	position: absolute;
+	position: fixed;
 	top: 0;
 	bottom: 0;
 	left: 0;
@ -23,8 +26,8 @@ h2 {
 	color: #d4d0cd;
 }

-.next-meal {
-	width: 45%;
+.right-pane {
+	width: 65%;
 	height: 100%;
 	position: absolute;
 	top: 0;
@ -153,7 +156,7 @@ h2 {
 	left: 120pt;
 }

-.rect-button {
+/*.rect-button {
 	width: 100pt;
 	height: 26pt;
 	background-color: #EE7500;
@ -163,7 +166,7 @@ h2 {
 	right: 32pt;
 	margin-top: -13pt;
 	cursor: pointer;
-}
+}*/

 .rect-button span {
 	font-size: 12pt;
@ -199,38 +202,32 @@ h2 {
 	text-align: center;
 }

-.user-info {
-	width: 19%;
-	height: 100%;
-	position: absolute;
-	left: 80%;
-}
-
 .user-card {
-	height: 80pt;
-	position: relative;
+	display: flex;
+	position: absolute;
+	top: 10px;
+	right: 10px;
 	background-color: #F1EDEA;
 	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
 	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
 	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
 }

-.user-card img{
-	width: 50pt;
-	height: auto;
-	position: absolute;
-	top: 50%;
-	left: 8pt;
-	margin-top: -25pt;
+.user-info {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-evenly;
+	padding: 10px;
+}
+
+.user-card img {
+	width: 80px;
+	height: 80px;
+	margin: 10px;
 }

 .user-card span {
 	font-size: 16pt;
-	position: absolute;
-	top: 30%;
-	left: 75pt;
-	margin-top: -8pt;
-	width: 90pt;
 	text-align: center;
 }

@ -246,6 +243,18 @@ h2 {
 	cursor: pointer;
 }

+.rect-button {
+	width: 90px;
+	height: 25px;
+	line-height: 25px;
+	text-align: center;
+	vertical-align: middle;
+	color: white;
+	cursor: pointer;
+	padding: 4px;
+	margin: 10px;
+}
+
 .logout-button span {
 	font-size: 12pt;
 	position: absolute;
--- a/templates/index.html
+++ b/templates/index.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>KUKapp</title>
+	<title>Meal planned for {{meal_date}} - KUKAPP</title>
 	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
 	<script src="{{ url_for('static', filename='script.js') }}"></script>
 	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
@ -13,6 +13,7 @@
 			background-repeat: no-repeat;
 			background-size: 100% auto;
 			background-color: #aeaeac;
+			background-attachment: fixed;
 		}
 	</style>
 </head>
@ -29,7 +30,7 @@
 			{% endfor %}
 		</div>
 	</div>
-	<div class="next-meal">
+	<div class="right-pane">
 		<h1 style="padding-left: 40pt">Next Meal</h1>
 		<h2>Cook</h2>
 			<div class="cook-entry">
@ -67,11 +68,11 @@
 				{% endif %}
 			
 	</div>
-	<div class="user-info">
 	<div class="user-card">
 		<img src="{{url_for('static', filename=current_user.name + '.png')}}">
+		<div class="user-info">
 			<span>{{current_user.name}}</span>
-			<div class="logout-button" onclick="location.href='/logout';"><span>LOGOUT</span></div>
+			<div class="rect-button" onclick="location.href='/logout';" style="background-color: #EE7500;">LOGOUT</div>
 		</div>
 	</div>
 </body>