device.css
1 | @media (max-width: 900px) { |
2 | footer > * { |
3 | padding: 5px; |
4 | width: auto; |
5 | } |
6 | .footer-flex { |
7 | display: block; |
8 | } |
9 | .article { |
10 | padding: 5px; |
11 | width: auto; |
12 | } |
13 | |
14 | #features { |
15 | display: block; |
16 | width: auto; |
17 | } |
18 | } |
19 | |
20 | @media (max-width: 800px) { |
21 | #hamburger-label { |
22 | display: block; |
23 | color: var(--black); |
24 | position: absolute; |
25 | right: 2em; |
26 | top: 20px; |
27 | } |
28 | |
29 | #hamburger-label img { |
30 | height: 32px; |
31 | } |
32 | |
33 | #hamburger ~ ul { |
34 | display: none; |
35 | } |
36 | |
37 | #hamburger:checked ~ ul { |
38 | display: block; |
39 | } |
40 | |
41 | header { |
42 | align-items: start; |
43 | } |
44 | |
45 | header span { |
46 | font-size: 2.7em; |
47 | } |
48 | |
49 | #hero { |
50 | background: url('/images/screen.png') no-repeat -70px -50px #dde2dd; |
51 | background-size: 300px; |
52 | padding-bottom: 15px; |
53 | padding-left: 15px; |
54 | position: absolute; |
55 | top: 0px; |
56 | } |
57 | |
58 | #hero h1 { |
59 | text-align: right; |
60 | margin-top: 6em; |
61 | text-shadow: 1px 1px #00574B |
62 | } |
63 | |
64 | #after-hero { |
65 | margin-top: 10em; |
66 | } |
67 | } |
68 |