X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fstylesheets%2Findex.sass;h=e38f87ddd28074fa0587059f9912a22c343aa854;hb=298c42e63ae321526693e9ce418c4113af36e025;hp=3ae86f9eb5b8315d9b5cae921cea96e813fc13a3;hpb=3acb852d971bc17d31ccc05756524f40038adf95;p=vchess.git

diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass
index 3ae86f9e..e38f87dd 100644
--- a/public/stylesheets/index.sass
+++ b/public/stylesheets/index.sass
@@ -1,42 +1,81 @@
-#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: 25px 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
+    margin-top: 25px
+    @media screen and (max-width: 767px)
+      margin-top: 7px
+  p
+    font-weight: bold
+    padding: 0
+    border: none
+    margin-top: 21px
+    font-size: 1.5em
+    @media screen and (max-width: 767px)
+      margin-top: 10px
+      font-size: 1em
+
+#settingsMenu, #introductionMenu
+  float: right
+  @media screen and (max-width: 767px)
+    .info-container
+      p
+        margin-right: 5px
 
+// 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
-
-#needHelp
-  cursor: pointer
-
-#readThis
-  color: blue
-  text-decoration: underline
-  cursor: pointer
-
-#b4welcome
-  max-width: 320px
+    margin-bottom: 0
+  .description
+    @media screen and (max-width: 767px)
+      margin-top: 0
 
 #welcome
-  max-width: 90vw
+  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...
+  // TODO: bad practice, shouldn't use table to align things...
   table.list-table
     width: 300px
     margin: 0 auto
@@ -51,6 +90,3 @@
           padding: 0
           text-align: left
           border: 0
-  #disableMsg
-    cursor: pointer
-    color: darkred