screen.styl 8.54 KB
Newer Older
1
2
@require "config"
@require "helpers"
S. Zeid's avatar
S. Zeid committed
3
4

/* This stylesheet is automatically generated using Stylus.  See the
S. Zeid's avatar
S. Zeid committed
5
   original source at <https://code.s.zeid.me/site-design/src/main/styles/screen.styl>. */
S. Zeid's avatar
S. Zeid committed
6

7
8
9
html, body
 height: 100%;

S. Zeid's avatar
S. Zeid committed
10
body
11
12
13
 unless $sheet-metaphor
  display: flex;
  flex-direction: column;
S. Zeid's avatar
S. Zeid committed
14
15
 width: $width + $width-header-plus; max-width: 100%;
 margin: 0 auto;
16
17
18
19
 if $sheet-metaphor
  background: $outer-background;
 else
  background: $background;
S. Zeid's avatar
S. Zeid committed
20
21
22
23
24
25
 color: $outer-text;

pre
 overflow-x: auto;

body > header
26
27
28
29
30
31
32
 position: fixed; top: 0; bottom: auto;
 if $sheet-metaphor
  right: auto; left: auto;
  width: inherit; max-width: inherit;
 else
  right: 0; left: 0;
  width: 100%; max-width: 100%;
33
  flex: 0 0 auto;
34
 z-index: 9999;
S. Zeid's avatar
S. Zeid committed
35
36
37
38
39
 line-height: 2em;
 font-weight: bold;
 background: $header-background;
 color: $header-text;
 text-shadow: 1px 1px $header-text-shadow;
40
41
 if $shadows
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
S. Zeid's avatar
S. Zeid committed
42
43
 
 html.home &, html.level-0 &
44
  height: 2.3em - 0.025em;
S. Zeid's avatar
S. Zeid committed
45
46
47
48
49
50
51
52
53
54
55
56
 &, html.always-show-h1.home &, html.always-show-h1.level-0 &
  height: 4em;
 
 for pseudo-element in selection -moz-selection
  ::{pseudo-element}
   background: $background;
   color: $links;
   text-shadow: none !important;
 
 nav
  position: absolute; width: 100%;
  clip: rect(auto, auto, 35791394px, auto);
57
58
  unless $monospace
   box-shadow: 0 -9px 6px -6px rgba(0, 0, 0, 0.8) inset;
S. Zeid's avatar
S. Zeid committed
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
  &, & > ul
   height: 2em;
   font-weight: normal;
  ul
   display: table;
   margin: 0;
   padding-left: 0;
   li
    display: table-row-group;
    list-style: none;
    float: left;
    & > a
     display: table-row;
     min-height: 2em;
     white-space: nowrap;
     outline: none;
     background: $header-dropdown-background;
     color: $header-dropdown-text;
     text-shadow: 1px 1px $header-dropdown-text-shadow;
78
79
     +hidpi()
      text-shadow: 0.75px 0.75px $header-dropdown-text-shadow;
S. Zeid's avatar
S. Zeid committed
80
81
82
83
     transition: all 0.4s ease-out;
     &:hover, &:focus
      text-decoration: none;
     img
84
85
86
87
      if !$monospace
       margin: 0.5em 0 0 0.5em;
      else
       margin: 0.375em 0 0 0.5em;
S. Zeid's avatar
S. Zeid committed
88
89
90
91
92
      float: left;
      width: auto; height: auto;
      for type in min max
       for dim in width height
        {type}-{dim}: 16px;
93
94
95
96
97
98
99
     i.material-icons
      position: relative;
      if !$monospace
       top: 0.164em;
      else
       top: 0.25em;
      margin-top: -0.1em;
S. Zeid's avatar
S. Zeid committed
100
101
102
     & > span
      display: table-cell;
      vertical-align: top;
103
      margin: 0 0 0 0.5em;
S. Zeid's avatar
S. Zeid committed
104
105
106
     & > span + span
      display: block;
      padding: 0 0.5em 0 0;
107
108
109
110
111
112
113
114
115
116
117
    unless $monospace
     html:not(.no-text-bug) &:not(.current):not(.home) > a span + span
      /* WebKit (other than Chrome on Android) and Opera seem to want to put
       * the text for non-bold navigation items one pixel lower than those
       * that are bold--when using the Ubuntu font.  This fixes that. */
      -webkit-transform: translateY(-1px);
      -o-transform: translateY(-1px);
     html:not(.no-text-bug) &:not(.current):not(.home) > a span + span
      /* ... and Gecko puts non-bold text nav items 1 pixel HIGHER than bold
       * ones when using the Ubuntu font.  [wat](https://youtu.be/m_F8wSZT3QY) */
      -moz-transform: translateY(0px);
S. Zeid's avatar
S. Zeid committed
118
119
120
121
122
123
    &:hover > a, & > a:focus, &.current > a, &.parent > a
     position: relative;
     z-index: 3;
     background: $header-highlight;
     color: $header-highlight-text;
     text-shadow: 1px 1px $header-highlight-text-shadow;
124
125
     +hidpi()
      text-shadow: 0.75px 0.75px $header-highlight-text-shadow;
S. Zeid's avatar
S. Zeid committed
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
    & > a:hover, & > a:focus
     background: $header-highlight-darker;
    &.current > a, &.home > a
     font-weight: bold;
    &.has-children > a span + span
     padding-right: 1.5em;
     &:before
      content: "»";
      position: relative; top: -1px; left: 1em;
      display: inline-block;
      float: right;
      opacity: 0.75;
      font-weight: normal;
    & ul
     position: absolute; top: -9999%; left: -9999%;
     opacity: 0;
     transition: opacity 0.4s ease-out;
    &:hover > ul
     top: auto; left: auto;
     z-index: -1;
     opacity: 1;
147
148
     if $menu-shadows
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
S. Zeid's avatar
S. Zeid committed
149
150
151
152
     & li
      float: none;
      &:hover > ul
       margin: -2em 0 0 100%;
153
154
  & > ul > li > ul
   min-width: 100%;
S. Zeid's avatar
S. Zeid committed
155
  & > ul
156
157
158
   unless $sheet-metaphor
    width: $width + $width-header-plus-nosheet;
    margin-left: auto; margin-right: auto;
S. Zeid's avatar
S. Zeid committed
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
   &:after
    /* Fix ClearType text bug on Firefox/Windows */
    content: "\A0";
    position: absolute; right: 0;
    display: block;
    width: 0; height: 0;
    font-size: 0;
    color: #000;
   & > li
    &, & > a
     position: relative;
     z-index: 0;
    & > a
     background: transparent;
     color: $header-text;
     text-shadow: 1px 1px $header-text-shadow;
175
176
     +hidpi()
      text-shadow: 0.75px 0.75px $header-text-shadow;
S. Zeid's avatar
S. Zeid committed
177
     img
178
      margin-right: -0.25em;
179
180
181
182
183
    if $menu-shadows
     &:hover, &.home:first-child > a:hover
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
     &.home:first-child
      box-shadow: none;
S. Zeid's avatar
S. Zeid committed
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
    &.has-children
     &, & > a
      z-index: 3;
     & > a span + span
      padding-right: 1em;
      &:before
       left: 0.5em;
       line-height: 1em;
       margin-top: 0.5em;
       text-shadow: 1px -1px $text;
       transform: translateX(1px) translateY(2px) rotate(90deg);
 
 & > h1
  position: relative;
  top: 2em;
  display: block;
  clear: both;
201
  margin: -0.013125em 0 0 0;  /* send halp pls (Blink or WebKit bug) */
S. Zeid's avatar
S. Zeid committed
202
203
204
205
206
207
  z-index: 1;
  line-height: 2em;
  font-size: 1em;
  background: $header-highlight;
  color: $header-highlight-text;
  text-shadow: 1px 1px $header-highlight-text-shadow;
208
209
210
211
212
  > span
   display: block;
   unless $sheet-metaphor
    width: $width + $width-header-plus-nosheet - 1em;
    margin-left: auto; margin-right: auto;
S. Zeid's avatar
S. Zeid committed
213
214
215
216
217
218
219
220
  
  html.home &, html.level-0 &, html.no-h1
   height: 0.3em;
   overflow: hidden;
   padding: 0;
  &, html.always-show-h1.home &, html.always-show-h1.level-0 &
   height: 2em;
   overflow: auto;
221
222
   > span
    padding: 0 0.5em;
S. Zeid's avatar
S. Zeid committed
223
224
225
226
  
  img
   @extends body > header nav ul li > a img;
   @extends body > header nav > ul > li > a img;
227
228
   margin-left: 0;
   margin-right: 0.25em;
S. Zeid's avatar
S. Zeid committed
229
230
231
232
233
234
235

anchor-offset-top(offset)
 error("offset must be non-negative") unless offset >= 0
 a[name], a[id]
  padding-top: offset;
 [id], [name]
  &:before
236
   position: relative; z-index: -9999;
S. Zeid's avatar
S. Zeid committed
237
238
239
240
241
242
243
244
   display: block;
   content: "";
   height: offset;
   margin: -(offset) 0 0 0;
 for h in $heading-sizes
  h{h[0]}
   &[id], &[name], [id], [name]
    &:before
245
     position: relative; z-index: -9999;
S. Zeid's avatar
S. Zeid committed
246
247
248
249
250
251
252
253
254
255
256
257
     display: block;
     content: "";
     height: roundn((1 / h[1]) * offset, 2);
     margin: roundn((1 / h[1]) * -(offset), 2) 0 0 0;
    a[name], a[id]
     padding-top: roundn((1 / h[1]) * offset, 2);

main
 display: table;
 width: $width;
 max-width: 100%;
 margin: 0 auto;
258
 background: $background-main;
259
 if $sheet-metaphor
260
261
  if $shadows
   box-shadow: 0 3px 6px 3px rgba(0, 0, 0, 0.2);
262
263
 else
  flex: 0 0 auto;
S. Zeid's avatar
S. Zeid committed
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
 color: $text;
 text-shadow: none;
 overflow-x: auto;
 > :first-child:before
  // hack to force a minimum height because `min-height` doesn't seem to
  // work with `display: table`, even though the spec only says it shouldn't
  // apply to table *columns*.
  content: "";
  display: block;
  height: $background-main-height;
  float: left;
 
 html.home &, html.level-0 &
  padding-top: 2.3em;
  anchor-offset-top: 2.6em;
 &, html.always-show-h1.home &, html.always-show-h1.level-0 &
  padding-top: 4.0em;
  anchor-offset-top: 4.3em;
 
 > article, > aside
  border-top: 0.3em solid transparent; //$background;
  background: transparent; //$background;
 > article
  display: table-cell;
  max-width: 0;
  vertical-align: top;
  padding: 0 0.5em 0.3em 0.5em;
 > aside
  display: table-cell;
  vertical-align: top;
  width: 16em;
  padding-right: 0.5em;
  border-bottom: 0.6em solid transparent; //$background;
  border-left: 0.625em solid transparent; //$background;
298
299
300
301
  if !$monospace
   font-size: 0.8em;
  else
   font-size: 0.9em;
S. Zeid's avatar
S. Zeid committed
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
  &:first-child
   display: none;
  > h2, > nav > h2, > section > h2
   font-size: 1em;
   font-weight: normal;
   text-transform: uppercase;
   letter-spacing: 0.5em;
   color: $text + #333;
   &:first-child
    margin-top: 0.2em;
  nav
   ul
    margin: 0;
    padding-left: 1.2em;
    > li
     margin-top: 0.5em;
     list-style: none;
     line-height: 1.25em;
     &:first-child
      margin-top: 0.75em;
   > ul
    padding-left: 0;
   + nav
    margin-top: 1em;

body > footer
 margin: 0.625em 0.625em 0.125em;
 line-height: 1em;
330
331
332
333
 if $sheet-metaphor
  text-shadow: 1px 1px $outer-text-shadow;
 else
  margin-top: 1.25em;
334
335
  padding-left: ($width-header-plus / 2) + 0.0625em;
  padding-right: ($width-header-plus / 2) + 0.0625em;
S. Zeid's avatar
S. Zeid committed
336
337

@import "mobile"