X-Git-Url: https://git.auder.net/pieces/Checkered/cq.svg?a=blobdiff_plain;f=client%2Fsrc%2FApp.vue;h=28e9c547db1a418c35a3b2d20458e40c0c4a9fcf;hb=57c8c2a6f20abb3355e687a2ae3c8bf617a5eaad;hp=671e74699005957f6a7ffc06ecc21bff3b2f34ee;hpb=dcd68c4108412f45b8ce119ae80ce8f6e296800b;p=vchess.git

diff --git a/client/src/App.vue b/client/src/App.vue
index 671e7469..28e9c547 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -82,18 +82,17 @@ export default {
 </script>
 
 <style lang="sass">
-//html, *
-//  font-family: "Open Sans", Arial, sans-serif
-//  --back-color: #f2f2f2
-//  --a-link-color: black
-//  --a-visited-color: black
+html, *
+  font-family: "Open Sans", Arial, sans-serif
+  --back-color: #f2f2f2
+  --a-link-color: black
+  --a-visited-color: black
 
 body
   padding: 0
   min-width: 320px
 
 #app
-  font-family: "Avenir", Helvetica, Arial, sans-serif
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale
 
@@ -149,43 +148,60 @@ nav
   & > #menuBar
     width: 100%
     padding: 0
-    & > #leftMenu
-      padding: 0
-      width: 50%
-      display: inline-flex
-      align-items: center
-      justify-content: flex-start
-      & > a
-        display: inline-block
-        color: #2c3e50
-        &.router-link-exact-active
-          color: #42b983
-    & > #rightMenu
-      padding: 0
-      width: 50%
-      display: inline-flex
-      align-items: center
-      justify-content: flex-end
-      & > div
-        display: inline-block
-        &#flagContainer
-          display: inline-flex
-        & > img
-          padding: 0
-          width: 36px
-          height: 27px
+    @media screen and (min-width: 768px)
+      & > #leftMenu
+        padding: 0
+        width: 50%
+        display: inline-flex
+        align-items: center
+        justify-content: flex-start
+        & > a
+          display: inline-block
+          color: #2c3e50
+          &.router-link-exact-active
+            color: #42b983
+      & > #rightMenu
+        padding: 0
+        width: 50%
+        display: inline-flex
+        align-items: center
+        justify-content: flex-end
+        & > div
+          display: inline-block
+          &#flagContainer
+            display: inline-flex
+          & > img
+            padding: 0
+            width: 36px
+            height: 27px
+    @media screen and (max-width: 767px)
+      & > #leftMenu
+        padding-bottom: 5px
+        & > a
+          color: #2c3e50
+          &.router-link-exact-active
+            color: #42b983
+      & > #rightMenu
+        padding-top: 5px
+        border-top: 1px solid darkgrey
+        & > div
+          &#flagContainer
+            display: inline-flex
+          & > img
+            padding: 0
+            width: 36px
+            height: 27px
 
 @media screen and (max-width: 767px)
   nav
     border: none
+    & > label.drawer-toggle
+      font-size: 1.5rem
+      //padding: 0 0 0 10px
 
 [type="checkbox"].drawer+*
   right: -767px
 
-#menuBar
-  label.drawer-close
-    top: 50px
-
 @media screen and (max-width: 767px)
   .button-group
     flex-direction: row