Some style improvements

[vchess.git] / client / src / App.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index 671e746..4cd1124 100644 (file)
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -13,7 +13,7 @@
         nav
           label.drawer-toggle(for="drawerControl")
           input#drawerControl.drawer(type="checkbox")
-          #menuBar(@click="hideDrawer")
+          #menuBar(@click="hideDrawer($event)")
             label.drawer-close(for="drawerControl")
             #leftMenu
               router-link(to="/")
@@ -82,18 +82,19 @@ 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
+  --a-link-color: black
+  --a-visited-color: black
 
 body
   padding: 0
   min-width: 320px
+  --fore-color: #1c1e10 //#2c3e50
+  //--back-color: #f2f2f2
+  background-image: radial-gradient(white, #e6e6ff) //lavender)
 
 #app
-  font-family: "Avenir", Helvetica, Arial, sans-serif
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale
 
@@ -105,9 +106,6 @@ body
 .row > div
   padding: 0
 
-.nopadding
-  padding: 0
-
 header
   width: 100%
   display: flex
@@ -124,24 +122,9 @@ header
 .text-center
   text-align: center
 
-.smallpad
-  padding: 5px
-
-.emphasis
-  font-style: italic
-
 .clearer
   clear: both
 
-.smallfont
-  font-size: 0.8em
-
-.bigfont
-  font-size: 1.2em
-
-.bold
-  font-weight: bold
-
 nav
   width: 100%
   margin: 0
@@ -149,43 +132,61 @@ 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
+    height: 32px
     border: none
+    & > label.drawer-toggle
+      font-size: 1.2rem
+      //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
@@ -221,16 +222,4 @@ footer
 @media screen and (max-width: 767px)
   footer
     border: none
-
-//#settings, #contactForm
-//  max-width: 767px
-//  @media screen and (max-width: 767px)
-//    max-width: 100vw
-//[type="checkbox"].modal+div .card
-//  max-width: 767px
-//  max-height: 100vh
-//[type="checkbox"].modal+div .card.small-modal
-//  max-width: 320px
-//[type="checkbox"].modal+div .card.big-modal
-//  max-width: 90vw
 </style>