From a7951b3d103dfb954c7536d4d958e71edccc8edc Mon Sep 17 00:00:00 2001
From: Nils G <nils.gondermann@ruhr-uni-bochum.de>
Date: Wed, 15 Apr 2020 13:05:55 +0200
Subject: [PATCH] CSS fixes
---
static/css/base.css | 36 +++++++++++++++++++++---------------
static/css/client.css | 23 ++++++++++++++++++-----
static/renderer/debug.css | 12 +++++++++++-
views/layout.html | 2 --
4 files changed, 50 insertions(+), 23 deletions(-)
diff --git a/static/css/base.css b/static/css/base.css
index 5ccd91f..80f811a 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -1,12 +1,23 @@
-/* ============== Color placeholder ===================== */
-
:root {
- --bar-bg: grey;
- --bar-text: white;
+ /*Color placeholder*/
+ --bar-bg: grey;
+ --bar-text: white;
+}
+
+/**************************************/
+
+html {
+ height: 100vh;
+}
+
+body {
+ padding-top: 75px;
}
body, html {
min-width: 275px;
+ max-width: 750px;
+ font-family: sans-serif;
}
/* =============== Header =================== */
@@ -18,8 +29,8 @@ body, html {
color: var(--bar-text);
font-family: monospace;
- font-size: 1.7em;
- font-weight: bold;
+ font-size: 1.9em;
+ font-weight: 800;
background-color: var(--bar-bg);
@@ -27,10 +38,10 @@ body, html {
top: 0px;
width: 100%;
min-width: inherit;
- height: 30px;
- line-height: 25px;
+ height: 35px;
padding: 5px;
+ padding-top: 10px;
}
#header span {
@@ -39,10 +50,10 @@ body, html {
#header #header_left, #header #header_right {
display: table-cell;
- line-height: 10px;
word-wrap: anywhere;
- font-size: 0.6em;
+ font-size: calc(9px + 0.77vw);
width: 20%;
+ height: auto;
}
#header #header_left {
@@ -61,11 +72,6 @@ body, html {
padding-right: 5%;
}
-.spacer {
- margin-bottom: 75px;
-}
-
-
/* ============== Footer ===================== */
#footer {
diff --git a/static/css/client.css b/static/css/client.css
index e55ee69..1204732 100644
--- a/static/css/client.css
+++ b/static/css/client.css
@@ -1,16 +1,29 @@
:root {
- --error-bg: #FFBBBB;
- --error-text: darkred;
+ /*Color placeholder*/
+ --base-bg: lightgrey;
- --info-bg: #DDEEFF;
- --info-text: #00004D;
+ --error-bg: #FFBBBB;
+ --error-text: darkred;
+
+ --info-bg: #DDEEFF;
+ --info-text: #00004D;
}
/**************************************/
+html {
+ background-color: var(--base-bg);
+ overflow-y: auto;
+}
+
body {
+ height: calc(100% - 125px);
+ padding-bottom: 50px;
+}
+
+body, html {
text-align: center;
- background-color: lightgrey;
+ margin: auto;
}
#current_content {
diff --git a/static/renderer/debug.css b/static/renderer/debug.css
index 5b9e6a2..38bd75a 100644
--- a/static/renderer/debug.css
+++ b/static/renderer/debug.css
@@ -1,3 +1,13 @@
+html {
+ background-color: lightblue;
+}
+
+body{
+ background-color: lightgreen;
+}
+
#game_content {
- color: black;
+ background-color: white;
+ padding-top: 10px;
+ padding-bottom: 55px;
}
diff --git a/views/layout.html b/views/layout.html
index f15c318..10b65b6 100644
--- a/views/layout.html
+++ b/views/layout.html
@@ -11,13 +11,11 @@
<body>
<div id="header"><span id="header_left"></span><span id="header_right"></span><span id="header_center"></span></div>
- <div class="spacer"></div>
<!-- Page Content -->
{{include}}
<!-- ======================== -->
- <div class="spacer"></div>
<div id="footer">
[ <a href="{{=URL('default', 'index')}}">WebClient</a> ]
[ <a href="{{=URL('debug', 'index')}}">Debug</a> ]
--
GitLab