marksheet/_sass/layout.sass at v1 · csseditor/marksheet · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
.header
  background: $background
  height: 48px
  position: relative
  text-align: center
  +on($laptop)
    background: none
    height: auto

$mobileOffset: 8px

// 48px - ((48px - 32px) / 2)
$desktopOffset: 32px

// 32px - ((32px - 22px) / 2)

.toggle
  +replace(none, 32px, 32px)
  left: $mobileOffset
  position: absolute
  top: $mobileOffset
  &:before,
  &:after,
  span
    background: $html5
    background: $light
    content: " "
    display: block
    height: 2px
    left: 8px
    position: absolute
    top: 15px
    width: 16px
  &:before
    top: 10px
  &:after
    top: 20px
  &:hover
    background: $black
    &:before
      background: $web !important
    &:after
      background: $css3 !important
    span
      background: $html5 !important
  +on($laptop)
    left: $desktopOffset
    position: fixed
    top: $desktopOffset

.navigation
  font-size: $small
  min-width: 120px
  position: absolute
  right: $mobileOffset
  text-align: left
  top: $mobileOffset
  a
    +arrow
    position: absolute
    right: 0
    top: 0
    +transform(rotate(-90deg))
    &:hover
      background: $black
    &:nth-child(2)
      right: 40px
      +transform(rotate(90deg))
      &:hover
        &:before,
        &:after
          background: $html5 !important
    &:nth-child(3)
      display: none
      right: $desktopOffset
      +transform(rotate(180deg))
      &:hover
        &:before,
        &:after
          background: $web !important
  +on($laptop)
    a
      position: fixed
      right: $desktopOffset
      top: $desktopOffset
      &:nth-child(2)
        right: $desktopOffset + 32px
      &:nth-child(3)
        bottom: $desktopOffset
        display: block
        top: auto

.icon
  +replace(url("/images/marksheet-icon.png"), 32px, 32px)
  height: 48px
  left: 50%
  margin-left: -24px
  position: absolute
  top: 0
  width: 48px
  &:hover
    background-color: $background
  +on($laptop)
    top: $desktopOffset - 8px

$menuWidth: 252px

.menu
  +overlay
  +scrollbar(5px, 5px, $black)
  background: $black
  background: rgba($black, 0.96)
  font-size: $small
  overflow: hidden
  overflow-y: auto
  position: fixed
  right: auto
  +transform(translate3d(-$menuWidth, 0, 0))
  +transition(100ms ease-out)
  width: $menuWidth
  section
    border-bottom: 1px solid rgba(white, 0.05)
    padding: 0.5rem 0
  a
    color: $medium
    display: block
    padding: 0.75rem 2rem
    position: relative
    strong
      color: $lighter
      font-weight: 400
    &:hover
      background: rgba(white, 0.05)
    &.active
      &, &:hover
        background: $css3
        color: rgba(white, 0.7)
        strong
          color: white
  p
    font-size: 10px
    letter-spacing: 0.2em
    text-transform: uppercase
    a
      color: $css3
      em
        font-style: normal
        margin-right: -1.75rem
        opacity: 0.5
        position: absolute
        right: 100%
  .menu-section-web
    a.active
      &, &:hover
        background: $web
    p a
      color: $web
  .menu-section-html
    a.active
      &, &:hover
        background: $html5
    p a
      color: $html5
  .menu-section-sass
    a.active
      &, &:hover
        background: $sass
    p a
      color: $sass

.main
  +flex(1)
  padding: 2rem
  +on($laptop)
    max-width: 71rem
    margin: 0 auto
    padding: 2rem 6rem 6rem 6rem

.footer
  background: $black
  color: $dark
  font-size: $small
  padding: 4rem 2rem
  position: relative
  text-align: center
  z-index: 1
  .donate
    margin-bottom: 4rem
    span
      color: $light
      display: block
      margin-bottom: 1em
    img
      display: inline-block
      vertical-align: top
  .share
    margin-bottom: 4rem
  p
    margin-top: 1em
    strong
      color: $light
      font-weight: normal
    a
      color: $medium
      text-decoration: underline
      &:hover
        color: $light
  .share
    display: block
    & > div
      display: inline-block
      height: 20px
      line-height: 20px
      margin: 0 10px
      vertical-align: top
      a
        color: #55acee
    .license
      float: left
      text-decoration: none
      img
        display: block
  +on($laptop)
    padding: 6rem

.overlay
  +overlay
  display: none
  position: fixed

html.open-menu
  overflow: hidden
  .menu
    box-shadow: 0 0 10rem rgba(black, 0.5)
    opacity: 1
    +transform(translate3d(0, 0, 0))
    visibility: visible
  .overlay
    display: block