Some advances. TODO: test board.js, and then game.js, and then implement room.js

[vchess.git] / public / stylesheets / layout.sass

diff --git a/public/stylesheets/layout.sass b/public/stylesheets/layout.sass
index 93e460f..161995d 100644 (file)
--- a/public/stylesheets/layout.sass
+++ b/public/stylesheets/layout.sass
@@ -1,20 +1,113 @@
+@import users
+
 html, *
-  font-size: 18px
   font-family: "Open Sans", Arial, sans-serif
+  --back-color: #f2f2f2
+  --a-link-color: blue
+  --a-visited-color: blue
 
 body
   padding: 0
-  background-color: #f2f2f2
+  min-width: 320px
+
+.container
+  padding: 0
+  overflow: hidden
+
+.row
+  div
+    padding: 0
+    .section-content
+      *
+        margin-left: auto
+        margin-right: auto
+        max-width: 767px
+      figure.diagram-container
+        max-width: 1000px
+      @media screen and (max-width: 767px)
+        max-width: 100%
+        padding: 0 5px
+
+@media screen and (max-width: 767px)
+  .button-group
+    flex-direction: row
+    button:not(:first-child)
+      border-left: 1px solid var(--button-group-border-color)
+      border-top: 0
 
-@media screen and (min-width: 800px)
-  .card
-    max-width: 600px
+.right-menu
+  float: right
+  @media screen and (max-width: 767px)
+    .info-container
+      p
+        margin-right: 5px
+
+#settings, #contactForm
+  max-width: 767px
+  @media screen and (max-width: 767px)
+    max-width: 100vw
+
+#emailSent
+  color: blue
+  display: none
+
+footer
+  height: 77px
+  background-color: #000033
+  div
+    line-height: 77px
+    a
+      margin: 0 10px 0 0
+      display: inline-block
+      &:visited, &:link
+        color: white
+    p
+      margin: 0 0 0 10px
+      display: inline-block
+      color: white
+      text-decoration: underline
+  @media screen and (max-width: 767px)
+    height: 43px
+    div
+      line-height: 43px
 
 a
-  color: #00B7FF
+  text-decoration: underline
 
 .text-center
   text-align: center
 
 .smallpad
   padding: 5px
+
+.emphasis
+  font-style: italic
+
+.clickable
+  cursor: pointer
+
+.clearer
+  clear: both
+
+.red
+  color: #cc3300
+
+.purple
+  color: purple
+
+.smallfont
+  font-size: 0.8em
+
+.bigfont
+  font-size: 1.2em
+
+.bold
+  font-weight: bold
+
+[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