From c6b1ee42d14d360d88361737ac94cb576cfcb185 Mon Sep 17 00:00:00 2001
From: Jannik Schönartz
Date: Thu, 31 Jan 2019 19:25:54 +0100
Subject: Add horizontal / vertical param

Small design bugfixes.
Add horizontal param: Overrides min-width >1500px media
Add vertical param: Overrides max-width 850px media
Remove images in the header when the side gets to small
---
 style.css | 47 +++++++++++------------------------------------
 1 file changed, 11 insertions(+), 36 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 7fdccf8..836b155 100644
--- a/style.css
+++ b/style.css
@@ -34,30 +34,31 @@ a:hover {
   height: 60px;
   position: fixed;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+  --header-display: flex;
+  z-index: 1;
 }
 
-#header_left {
-  display: flex;
+.header_element {
+  display: var(--header-display);
   flex-direction: row;
-  justify-content: left;
   align-items: center;
+}
+
+#header_left {
+  justify-content: left;
   width: 228px;
 }
 
 #header_center {
   display: flex;
-  flex-direction: row;
   justify-content: center;
-  align-items: center;
   margin-right: 16px;
   margin-left: 16px;
+  width: 100%;
 }
 
 #header_right {
-  display: flex;
-  flex-direction: row;
   justify-content: right;
-  align-items: center;
   margin-right: 8px;
   width: 228px;
 }
@@ -147,7 +148,6 @@ a:hover {
 #log {
   display: flex;
   flex-direction: column;
-  background-color: #f5f5f5;
   white-space: nowrap;
   height: 100%;
   --wrap: nowrap;
@@ -161,6 +161,8 @@ a:hover {
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
   overflow: auto;
   max-width: 80vw;
+  background-color: #f5f5f5;
+  width: 100%;
 }
 
 .log_item {
@@ -199,30 +201,3 @@ a:hover {
 .log_item:hover {
   background-color: #efeeee;
 }
-
-@media (min-width: 1500px) {
-  #body {
-    flex-direction: row;
-  }
-
-  #log_wrapper {
-    margin-left: 40px;
-    margin-top: 0px;
-    max-width: 60vw;
-    max-height: calc(100vh - 120px);
-  }
-  #content {
-    width: 30%;
-    height: calc(100vh - 120px);
-    min-height: 51px;
-  }
-}
-
-@media (max-width: 850px) {
-  #header_right {
-    visibility: collapse;
-  }
-  #header_left {
-    visibility: collapse;
-  }
-}
-- 
cgit v1.2.3-55-g7522