X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fstylesheets%2Findex.sass;h=18db3c95a6b70c1107717a43c7fadf09243900a9;hb=9a3c9f790aa28fd4708faefe41b4624173922c8e;hp=07f965fe22753d6be7ab1a4f9d244f56288a0cf4;hpb=d597379096c51c658f4605e7965137fcd0e15c85;p=vchess.git

diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass
index 07f965fe..18db3c95 100644
--- a/public/stylesheets/index.sass
+++ b/public/stylesheets/index.sass
@@ -1,88 +1,125 @@
-.boxtitle
-  font-weight: bold
+.container
+  padding: 0
 
-.variant
-  color: black
-  //margin-top: 20px
-  border: 1px solid brown
-  box-sizing: border-box
-  background-color: lightyellow
-  a
-    color: #663300
+.row
+  div
+    padding: 0
 
-.card > h3.section.blue
-  color: #0033cc
-
-.card > h3.section.red
-  color: #cc3300
-
-#main-title
-  font-style: italic
+#header
+  width: 100%
   background: linear-gradient(#e66465, #9198e5)
-  margin-top: 0
-  margin-left: 0
-  margin-right: 0
+  height: 77px
+  @media screen and (max-width: 767px)
+    height: 43px
+
+.info-container
+  display: inline-block
+  vertical-align: top
+  padding: 0
+  box-sizing: border-box
+  p
+    display: inline-block
+    padding: 3px
+    border: 1px solid black;
+    margin: 27px 15px 5px 7px
+    @media screen and (max-width: 767px)
+      margin-top: 7px
+
+#mainTitle
+  font-style: italic
+  margin-left: 10px
+  @media screen and (max-width: 767px)
+    margin-left: 5px
+  float: left
   img
+    display: inline-block
     height: 30px
-  span
-    padding-left: 10px
-    padding-right: 15px
-
-#needHelp
+    padding-top: 25px
+    @media screen and (max-width: 767px)
+      padding-top: 7px
+  p
+    font-weight: bold
+    padding: 0
+    border: none
+    margin-top: 22px
+    font-size: 1.5em
+    @media screen and (max-width: 767px)
+      margin-top: 10px
+      font-size: 1em
+
+#helpMenu
+  float: right
   cursor: pointer
+  @media screen and (max-width: 767px)
+    .info-container
+      p
+        margin-right: 5px
 
-#welcome
-  max-height: 100vh
-  max-width: 90vw
-
-#help
-  max-height: 100vh
-  max-width: 600px
-
-.conditional-jump
-  display: block
-
-@media screen and (max-width: 710px)
-  .conditional-jump
-    display: inline
-
-@media screen and (max-width: 400px)
-  #welcome, #help
-    max-width: 100vw
-
-#welcome ul
-  list-style-type: none
-
-#welcome ul > li
-  font-family: monospace
-
-.read-this
-  color: blue
-  text-decoration: underline
+#flagMenu
+  float: right
   cursor: pointer
+  margin-right: 10px
+  @media screen and (max-width: 767px)
+    margin-right: 5px
+  img
+    display: inline-block
+    height: 30px
+    padding-top: 27px
+    @media screen and (max-width: 767px)
+      padding-top: 8px
 
-.emphasis
-  font-style: italic
-  color: purple
-
-.disable-msg
+// TODO: box-shadow or box-sizing ? https://stackoverflow.com/a/13517809
+.variant
+  box-sizing: border-box
+  border: 1px solid brown
+  background-color: lightyellow
+  &:hover
+    background-color: yellow
+  a
+    color: #663300
+    text-decoration: none
+  .boxtitle
+    font-weight: bold
+    margin-bottom: 0
+  .description
+    @media screen and (max-width: 767px)
+      margin-top: 0
+
+#b4welcome
+  max-width: 320px
+
+#readThis
+  margin-top: 0
+  color: var(--a-link-color)
+  text-decoration: underline
   cursor: pointer
-  color: darkred
-
-.smallfont
-  font-size: 0.8em
 
-table.list-table
-  width: 300px
-  margin: 0 auto
-  border: 0
-  tbody
+#welcome
+  max-width: 767px
+  @media screen and (max-width: 767px)
+    max-width: 100vw
+  img
+    width: 75%
+    @media screen and (max-width: 767px)
+      width: 100%
+      max-width: 552px
+  ul
+    list-style-type: none
+  // TODO: bad practice, use table to align things...
+  table.list-table
+    width: 300px
+    margin: 0 auto
     border: 0
-    tr
+    tbody
       border: 0
-      margin: 0
-      padding: 0
-      td
-        padding: 0
-        text-align: left
+      tr
         border: 0
+        margin: 0
+        padding: 0
+        td
+          padding: 0
+          text-align: left
+          border: 0
+  #disableMsg
+    cursor: pointer
+    color: darkred