From 17b3d2ada9dbed68a4a98ea9fbe68d6dd4544780 Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nes.com@googlemail.com>
Date: Thu, 5 May 2016 21:47:23 +0200
Subject: [PATCH] Media for nav & table

---
 main.scss  |  6 ++--
 nav.scss   | 16 ++++++++++
 styles.css | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 table.scss | 34 +++++++++++++++++++++
 4 files changed, 138 insertions(+), 4 deletions(-)

diff --git a/main.scss b/main.scss
index 5d65cad..b8764b5 100644
--- a/main.scss
+++ b/main.scss
@@ -1,3 +1,5 @@
+@import "mixin", "color";
+
 main {
     height: 100%;
     width: 100%;
@@ -15,9 +17,9 @@ main {
 
 .flex-container {
     display: flex;
-    flex-directoion: row;
+    flex-direction: row;
     flex-wrap: wrap;
-    justify-content: flex-center;
+    justify-content: center;
     align-items: flex-start;
     align-content: flex-start;
 }
diff --git a/nav.scss b/nav.scss
index 344257f..3bd3e4d 100644
--- a/nav.scss
+++ b/nav.scss
@@ -163,3 +163,19 @@ label[for="nav-trigger"] {
     opacity: 1;
     visibility: visible;
 }
+
+@media screen and (max-width: 600px) {
+    .nav-trigger:checked ~ main {
+        width: 100%;
+        left: 0;
+    }
+
+    .nav-trigger:not(:checked) ~ main {
+        width: 0;
+        padding-right: 0;
+    }
+
+    #nav-side {
+        width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 643b13f..2b45804 100644
--- a/styles.css
+++ b/styles.css
@@ -4061,6 +4061,62 @@ label[for="nav-trigger"] {
   opacity: 1;
   visibility: visible; }
 
+@media screen and (max-width: 600px) {
+  .nav-trigger:checked ~ main {
+    width: 100%;
+    left: 0; }
+
+  .nav-trigger:not(:checked) ~ main {
+    width: 0;
+    padding-right: 0; }
+
+  #nav-side {
+    width: 100%; } }
+.ok {
+  color: #5cff56; }
+
+.warning {
+  color: #ff4b41; }
+
+.favorite {
+  color: #d16059; }
+
+.green {
+  background: #c0ffb4; }
+
+.red {
+  background: #ff7c70; }
+
+.blue {
+  background: #c1c8ff; }
+
+.orange {
+  background: #ffbf7c; }
+
+.lightblue {
+  background: #b5ffff; }
+
+.yellow {
+  background: #fffe97; }
+
+.purple {
+  background: #bfa5ff; }
+
+.pink {
+  background: #ffa6e3; }
+
+.grey {
+  background: #dcdcdc; }
+
+.darkred {
+  background: #d16059; }
+
+.darkgreen {
+  background: #77d17c; }
+
+.darkblue {
+  background: #7ba9d1; }
+
 main {
   height: 100%;
   width: 100%;
@@ -4075,9 +4131,9 @@ main {
 
 .flex-container {
   display: flex;
-  flex-directoion: row;
+  flex-direction: row;
   flex-wrap: wrap;
-  justify-content: flex-center;
+  justify-content: center;
   align-items: flex-start;
   align-content: flex-start; }
 
@@ -4634,6 +4690,32 @@ table.list th {
 table.list td {
   padding: 2px 5px 2px 5px; }
 
+@media screen and (max-width: 600px) {
+  table.table {
+    border: 0; }
+
+  table.table thead {
+    display: none; }
+
+  table.table tr {
+    border-bottom: 3px solid #ddd;
+    display: block;
+    margin-bottom: .625em; }
+
+  table.table td {
+    border-bottom: 1px solid #ddd;
+    display: block;
+    font-size: .8em;
+    text-align: right; }
+
+  table.table td:before {
+    content: attr(data-label);
+    float: left;
+    font-weight: bold;
+    text-transform: uppercase; }
+
+  table.table td:last-child {
+    border-bottom: 0; } }
 .ok {
   color: #5cff56; }
 
diff --git a/table.scss b/table.scss
index 59f2365..c05b604 100644
--- a/table.scss
+++ b/table.scss
@@ -110,4 +110,38 @@ table.list {
     td {
         padding: 2px 5px 2px 5px;
     }
+}
+
+@media screen and (max-width: 600px) {
+    table.table {
+        border: 0;
+    }
+
+    table.table thead {
+        display: none;
+    }
+
+    table.table tr {
+        border-bottom: 3px solid #ddd;
+        display: block;
+        margin-bottom: .625em;
+    }
+
+    table.table td {
+        border-bottom: 1px solid #ddd;
+        display: block;
+        font-size: .8em;
+        text-align: right;
+    }
+
+    table.table td:before {
+        content: attr(data-label);
+        float: left;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    table.table td:last-child {
+        border-bottom: 0;
+    }
 }
\ No newline at end of file