From 292e03f8fad03a64f402a14523134f5a03af3f27 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 15 Dec 2021 19:43:21 +0100
Subject: [PATCH] wip #4907 @0.5

---
 style/style.css     | 40 ++++++++++++++++++++++++++++++++++++++++
 style/style.css.map |  2 +-
 style/style.sass    | 40 +++++++++++++++++++++++++++++++++++++++-
 3 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/style/style.css b/style/style.css
index 95a74b3..8095582 100644
--- a/style/style.css
+++ b/style/style.css
@@ -17,12 +17,26 @@ header {
   position: relative;
   height: 200px;
 }
+@media screen and (max-width: 1024px) {
+  header {
+    text-align: center;
+    height: 200px;
+  }
+}
 header #logo {
   position: absolute;
   top: 20px;
   right: 0;
   color: #f0f0f0;
 }
+@media screen and (max-width: 1024px) {
+  header #logo {
+    right: auto;
+    top: auto;
+    position: static;
+    margin: 20px auto;
+  }
+}
 header #logo svg {
   height: 50px;
 }
@@ -31,15 +45,36 @@ header #tile {
   top: -5px;
   left: -100px;
 }
+@media screen and (max-width: 1024px) {
+  header #tile {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    z-index: -1;
+  }
+}
 header #tile svg {
   height: 200px;
   color: #f0f0f0;
 }
+@media screen and (max-width: 1024px) {
+  header #tile svg {
+    position: relative;
+    top: -40px;
+    left: -300px;
+  }
+}
 header h1 {
   position: absolute;
   top: 110px;
   left: 40px;
 }
+@media screen and (max-width: 1024px) {
+  header h1 {
+    text-align: center;
+    position: static;
+  }
+}
 
 #scowin {
   position: fixed;
@@ -120,6 +155,11 @@ header h1 {
   width: 1024px;
   margin: 0 auto;
 }
+@media screen and (max-width: 1024px) {
+  #wrapper {
+    width: 100%;
+  }
+}
 #wrapper main table {
   border-collapse: collapse;
   width: 1024px;
diff --git a/style/style.css.map b/style/style.css.map
index 5ef6dda..d1ed892 100644
--- a/style/style.css.map
+++ b/style/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAEA;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEJ;EACE;EACA;EACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAII;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAyDN;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;AAGE;EACE;EACA;;AAEA;EACE;EACA;;AACA;EACE;;AAEF;EACE;;AAEF;EACE;;AAMI;EACE;;AACJ;EACE;EACA;;AAIA;EACE,mBAzIR;;AA2IQ;EACE,OA5IV;;AAwIM;EACE,mBAzIR;;AA2IQ;EACE,OA5IV;;AAwIM;EACE,mBAzIR;;AA2IQ;EACE,OA5IV;;AAwIM;EACE,mBAzIR;;AA2IQ;EACE,OA5IV;;AAwIM;EACE,mBAzIR;;AA2IQ;EACE,OA5IV;;AAwIM;EACE,mBAzIR;;AA2IQ;EACE,OA5IV;;AA+II;EACE;;AAGF;EACE;EACA;EACA;;AACJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;;;AAEZ;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAOA;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;AAnBA;EAiBF;IAKI;IACA;;;AAEF;EACE;EACA;EACA;EACA;;AA7BF;EAyBA;IAOI;IACA;IACA;IACA;;;AAEF;EACE;;AAEJ;EACE;EACA;EACA;;AA3CF;EAwCA;IAMI;IACA;IACA;IACA;;;AAEF;EAKE;EACA;;AAzDJ;EAmDE;IAEI;IACA;IACA;;;AAIN;EACE;EACA;EACA;;AA9DF;EA2DA;IAKI;IACA;;;;AAGN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAII;EACE,kBAtFC;;AAqFH;EACE,kBAtFC;;AAqFH;EACE,kBAtFC;;AAqFH;EACE,kBAtFC;;AAqFH;EACE,kBAtFC;;AAqFH;EACE,kBAtFC;;AAwFP;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;AArIA;EAmIF;IAII;;;AAGA;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;AAMI;EACE;;AAEJ;EACE;EACA;;AAIA;EACE,mBA5KP;;AA+KO;EACE,OAhLT;;AA2KK;EACE,mBA5KP;;AA+KO;EACE,OAhLT;;AA2KK;EACE,mBA5KP;;AA+KO;EACE,OAhLT;;AA2KK;EACE,mBA5KP;;AA+KO;EACE,OAhLT;;AA2KK;EACE,mBA5KP;;AA+KO;EACE,OAhLT;;AA2KK;EACE,mBA5KP;;AA+KO;EACE,OAhLT;;AAmLG;EACE;;AAIF;EACE;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;;;AAEZ;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/style/style.sass b/style/style.sass
index 30b8a32..48264e5 100644
--- a/style/style.sass
+++ b/style/style.sass
@@ -1,4 +1,9 @@
-$colors:(IN: #47484e, VI: #d0167c , AN: #84156f, FB: #f8971d, PC: #00a0af, QZ: #00abeb)
+$colors: (IN: #47484e, VI: #d0167c, AN: #84156f, FB: #f8971d, PC: #00a0af, QZ: #00abeb)
+
+@mixin media-mob
+  @media screen and (max-width: 1024px)
+    @content
+
 
 body, html
   min-height: 100%
@@ -16,11 +21,23 @@ body, html
 header
   position: relative
   height: 200px
+
+  @include media-mob()
+    text-align: center
+    height: 200px
+
   #logo
     position: absolute
     top: 20px
     right: 0
     color: #f0f0f0
+
+    @include media-mob()
+      right: auto
+      top: auto
+      position: static
+      margin: 20px auto
+
     svg
       height: 50px
 
@@ -29,7 +46,17 @@ header
     top: -5px
     left: -100px
 
+    @include media-mob()
+      position: absolute
+      left: 50%
+      top: 0
+      z-index: -1
+
     svg
+      @include media-mob()
+        position: relative
+        top: -40px
+        left: -300px
       height: 200px
       color: #f0f0f0
 
@@ -37,6 +64,10 @@ header
     position: absolute
     top: 110px
     left: 40px
+    @include media-mob()
+      text-align: center
+      position: static
+
 
 #scowin
   position: fixed
@@ -104,6 +135,8 @@ header
 #wrapper
   width: 1024px
   margin: 0 auto
+  @include media-mob()
+    width: 100%
 
   main
     table
@@ -113,6 +146,7 @@ header
       th, td
         padding: 5px 10px
         text-align: left
+
         &.t
           border-bottom: 1px solid #f0f0f0
 
@@ -128,6 +162,7 @@ header
             &:hover
               td.t
                 background-color: #fff
+
             td
               opacity: 0.25
               cursor: not-allowed
@@ -136,6 +171,7 @@ header
             &[data-type=#{$type}]
               td.t
                 border-left-color: $color
+
               td.i
                 svg
                   color: $color
@@ -143,12 +179,14 @@ header
           &:hover
             td.t
               background-color: #e6e6e6
+
         td
           &.i
             svg
               position: relative
               left: 10px
               top: 4px
+
           &.t
             text-align: center
             font-weight: 600
-- 
2.39.5