diff --git a/static/css/base.css b/static/css/base.css
index 5ccd91fe5d6379d9498e64c3bb818893d92ac032..80f811acf3e83615eb7fb21b744829eb749e6469 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 e55ee69732863be12abadbbc1d1f812a9b039722..1204732016a16b7392e826de7e7c2102730f43d8 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 5b9e6a2bda6321f96210ba2442da64b53113eaec..38bd75a238c5fd186781aab40c538e147396f268 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 f15c318a44b08e4a7f4b6f104946f39332439583..10b65b6fea52551ce64ce71f269a54904580b542 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> ]