From 0e90c3620362b686b1a26ab69e285f7d1b70dd90 Mon Sep 17 00:00:00 2001
From: falkTX <falktx@falktx.com>
Date: Fri, 6 Aug 2021 14:45:08 +0100
Subject: [PATCH] Better responsive color mapping

Signed-off-by: falkTX <falktx@falktx.com>
---
 includes/header.php | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/includes/header.php b/includes/header.php
index d6040f0..40ce4ad 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -59,16 +59,10 @@ function isMobile() {
 <?php if ($PAGE_TYPE == "BOARD") { ?>
     <!-- Special Board CSS -->
     <style type="text/css">
-        .omega {
-            position: relative;
-        }
         #board-colors {
-            float: right;
             display: flex;
             flex-direction: row;
-            position: absolute;
-            top: 0px;
-            right: 0px;
+            margin-bottom: 20px;
         }
         #board-colors p,
         #board-colors ul {
@@ -80,8 +74,12 @@ function isMobile() {
         #board-colors span {
             margin: auto;
         }
+        #board-colors p {
+            margin-left: 8px;
+        }
         #board-colors ul {
             display: inline-flex;
+            flex: 1;
             list-style: none inside;
             margin-right: 8px;
             overflow: hidden;
@@ -96,6 +94,22 @@ function isMobile() {
             height: 16px;
             margin: 4px;
         }
+        @media only screen and (max-width: 1000px) {
+            #board-colors p {
+                display: none;
+            }
+        }
+        @media only screen and (min-width: 1200px) {
+            .omega {
+                position: relative;
+            }
+            #board-colors {
+                position: absolute;
+                top: 0px;
+                right: 0px;
+                margin-bottom: 0px;
+            }
+        }
     </style>
 <?php } else if ($PAGE_TYPE == "DONATIONS") { ?>
     <style type="text/css">