Progression in styles + initiate translation process
[vchess.git] / public / stylesheets / index.sass
CommitLineData
9a3c9f79
BA
1.container
2 padding: 0
3
4.row
5 div
6 padding: 0
7
8#header
9 width: 100%
d5973790 10 background: linear-gradient(#e66465, #9198e5)
9a3c9f79
BA
11 height: 77px
12 @media screen and (max-width: 767px)
13 height: 43px
14
15.info-container
16 display: inline-block
17 vertical-align: top
18 padding: 0
19 box-sizing: border-box
20 p
21 display: inline-block
22 padding: 3px
23 border: 1px solid black;
24 margin: 27px 15px 5px 7px
25 @media screen and (max-width: 767px)
26 margin-top: 7px
27
28#mainTitle
29 font-style: italic
30 margin-left: 10px
31 @media screen and (max-width: 767px)
32 margin-left: 5px
33 float: left
d5973790 34 img
9a3c9f79 35 display: inline-block
d5973790 36 height: 30px
9a3c9f79
BA
37 padding-top: 25px
38 @media screen and (max-width: 767px)
39 padding-top: 7px
40 p
41 font-weight: bold
42 padding: 0
43 border: none
44 margin-top: 22px
45 font-size: 1.5em
46 @media screen and (max-width: 767px)
47 margin-top: 10px
48 font-size: 1em
49
50#helpMenu
51 float: right
52 cursor: pointer
53 @media screen and (max-width: 767px)
54 .info-container
55 p
56 margin-right: 5px
d5973790 57
9a3c9f79
BA
58#flagMenu
59 float: right
60 cursor: pointer
61 margin-right: 10px
62 @media screen and (max-width: 767px)
63 margin-right: 5px
64 img
65 display: inline-block
66 height: 30px
67 padding-top: 27px
68 @media screen and (max-width: 767px)
69 padding-top: 8px
70
71// TODO: box-shadow or box-sizing ? https://stackoverflow.com/a/13517809
3acb852d
BA
72.variant
73 box-sizing: border-box
74 border: 1px solid brown
75 background-color: lightyellow
9a3c9f79
BA
76 &:hover
77 background-color: yellow
3acb852d
BA
78 a
79 color: #663300
9a3c9f79 80 text-decoration: none
3acb852d
BA
81 .boxtitle
82 font-weight: bold
9a3c9f79
BA
83 margin-bottom: 0
84 .description
85 @media screen and (max-width: 767px)
86 margin-top: 0
3acb852d 87
9a3c9f79
BA
88#b4welcome
89 max-width: 320px
92342261 90
3acb852d 91#readThis
9a3c9f79
BA
92 margin-top: 0
93 color: var(--a-link-color)
92342261
BA
94 text-decoration: underline
95 cursor: pointer
96
3acb852d 97#welcome
9a3c9f79 98 max-width: 767px
3acb852d
BA
99 @media screen and (max-width: 767px)
100 max-width: 100vw
9a3c9f79
BA
101 img
102 width: 75%
103 @media screen and (max-width: 767px)
104 width: 100%
105 max-width: 552px
3acb852d
BA
106 ul
107 list-style-type: none
108 // TODO: bad practice, use table to align things...
109 table.list-table
110 width: 300px
111 margin: 0 auto
ea6bb36e 112 border: 0
3acb852d 113 tbody
ea6bb36e 114 border: 0
3acb852d 115 tr
ea6bb36e 116 border: 0
3acb852d
BA
117 margin: 0
118 padding: 0
119 td
120 padding: 0
121 text-align: left
122 border: 0
123 #disableMsg
124 cursor: pointer
125 color: darkred