header.scss
1 |
|
2 |
float: left; |
3 |
margin-right: 50px; |
4 |
position: fixed; |
5 |
//display: flow; |
6 |
//height: 100%; |
7 |
z-index: 3; |
8 |
padding: $header-padding; |
9 |
top: 0; |
10 |
width: $header-width; |
11 |
height: 100%; |
12 |
//background-color: $uhasselt-color; |
13 |
color: white; |
14 |
img { |
15 |
//margin-left: -8px; // idem |
16 |
//margin-bottom: -10px; // When you want to attach logo to menu |
17 |
width: 80%; |
18 |
} |
19 |
nav { |
20 |
//margin-top: -10px; // idem |
21 |
// border: white solid 0.4em; // idem |
22 |
} |
23 |
nav ul { |
24 |
overflow-wrap: break-word; // Breaks the word if it overlaps with the right border |
25 |
//list-style: none; |
26 |
list-style: none; |
27 |
margin-left: -20px; |
28 |
} |
29 |
a { |
30 |
text-decoration: none; |
31 |
color: white; |
32 |
&:hover { |
33 |
text-decoration: underline solid white; |
34 |
text-transform: uppercase; |
35 |
font-weight: bold; |
36 |
} |
37 |
} |
38 |
|
39 |
div.menu-background { |
40 |
display: none; |
41 |
z-index: 1; |
42 |
} |
43 |
|
44 |
@media print { |
45 |
display: none; // Header is pretty useless on printed sheets |
46 |
} |
47 |
} |
48 |
|
49 |
@media print { |
50 |
footer, header, input#header-mobile, label[for="header-mobile"] { |
51 |
visibility: collapse; |
52 |
display: none; |
53 |
} |
54 |
main { |
55 |
margin-left: 0; |
56 |
} |
57 |
} |
58 |
|
59 |
@media screen |
60 |
and (max-device-width: 440px) |
61 |
and (max-device-height: 800px) { |
62 |
|
63 |
//and (-webkit-min-device-pixel-ratio: 2) { |
64 |
main { |
65 |
margin-left: 2%; |
66 |
margin-right: 2%; |
67 |
} |
68 |
label[for="header-mobile"] { |
69 |
z-index: 4; |
70 |
color: white; |
71 |
position: absolute; |
72 |
top: 1.5em; |
73 |
left: 1em; |
74 |
} |
75 |
|
76 |
input#header-mobile { |
77 |
z-index: 4; |
78 |
position: absolute; |
79 |
top: 2em; |
80 |
left: 1em; |
81 |
opacity: 0; |
82 |
/* XXX: Why not send the checkbox to -9999 top? Because some dumb mobile |
83 |
phones don't allow clicking the label to check the box. */ |
84 |
|
85 |
&:checked ~ header { |
86 |
display: block; |
87 |
position: relative; |
88 |
/* FIXME: Currently I set the height of the header to a ridiculous |
89 |
300%, but it should be made that it overlaps the other elements. */ |
90 |
height: 300%; |
91 |
top: 0; |
92 |
width: 100%; |
93 |
nav { |
94 |
display: block; |
95 |
position: relative; |
96 |
} |
97 |
} |
98 |
|
99 |
} |
100 |
|
101 |
header { |
102 |
position: relative; |
103 |
z-index: 3; |
104 |
margin-top: 0; |
105 |
margin-right: 0; |
106 |
width: 100%; |
107 |
height: 2em; |
108 |
img { |
109 |
height: 2em; |
110 |
} |
111 |
|
112 |
nav { |
113 |
display: none; |
114 |
} |
115 |
} |
116 |
} |
117 |