nani.css
1 | html, body { |
2 | padding: 0; |
3 | margin: 0; |
4 | background-color: #f8fdfa; |
5 | } |
6 | |
7 | html { |
8 | height: 100%; |
9 | } |
10 | |
11 | body { |
12 | min-height: 100%; |
13 | display: flex; |
14 | flex-direction: column; |
15 | color: #555; |
16 | } |
17 | |
18 | header { |
19 | background-color: rgba(0,87,75,0.7); |
20 | color: #f8fdfa; |
21 | padding: 15px; |
22 | display: flex; |
23 | align-items: center; |
24 | font-size: 1.1em; |
25 | font-variant: small-caps; |
26 | z-index: 1; |
27 | } |
28 | |
29 | header ul { |
30 | list-style: none; |
31 | } |
32 | |
33 | header ul li { |
34 | display: inline-block; |
35 | } |
36 | |
37 | header a { |
38 | color: inherit; |
39 | display: inline-block; |
40 | padding: 15px; |
41 | text-decoration: none; |
42 | } |
43 | |
44 | header span { |
45 | flex: 1; |
46 | font-weight: bold; |
47 | font-size: 3em; |
48 | } |
49 | |
50 | #hamburger, #hamburger-label { |
51 | display: none; |
52 | } |
53 | |
54 | a:hover { |
55 | color: #D81B60; |
56 | } |
57 | |
58 | a { |
59 | text-decoration: none; |
60 | color: #008755; |
61 | } |
62 | |
63 | footer { |
64 | background-color: #008577; |
65 | color: #e8edea; |
66 | padding: 15px; |
67 | margin-top: 5em; |
68 | } |
69 | |
70 | footer > * { |
71 | width: 900px; |
72 | margin: auto; |
73 | } |
74 | |
75 | footer a { |
76 | color: inherit; |
77 | text-decoration: underline; |
78 | } |
79 | |
80 | footer p { |
81 | text-align: justify; |
82 | } |
83 | |
84 | .footer-flex { |
85 | display: flex; |
86 | flex-direction: row; |
87 | } |
88 | |
89 | .footer-flex p:first-child { |
90 | flex: 1; |
91 | } |
92 | |
93 | #page { |
94 | flex: 1; |
95 | } |
96 | |
97 | #hero { |
98 | background: url('/images/screen.png') no-repeat -50px -100px #dde2dd; |
99 | padding: 15px; |
100 | padding-left: 600px; |
101 | padding-bottom: 60px; |
102 | color: #f8fdfa; |
103 | position: relative; |
104 | top: -140px; |
105 | left: 0px; |
106 | } |
107 | |
108 | #hero h1 { |
109 | text-align: left; |
110 | font-size: 2em; |
111 | font-weight: bold; |
112 | font-family: sans; |
113 | text-shadow: 2px 2px #00574B; |
114 | margin-top: 8em; |
115 | } |
116 | |
117 | #hero ~ *:first-child { |
118 | margin-top: 10em; |
119 | } |
120 | |
121 | #hero nav { |
122 | display: flex; |
123 | align-items: center; |
124 | align-content: center; |
125 | color: #D81B60; |
126 | font-size: 3em; |
127 | } |
128 | |
129 | #hero nav span { |
130 | padding-left: 20px; |
131 | padding-right: 20px; |
132 | } |
133 | |
134 | #hero img { |
135 | width: 180px; |
136 | } |
137 | |
138 | h1 { |
139 | text-align: center; |
140 | font-size: 2.5em; |
141 | color: #D81B60; |
142 | } |
143 | |
144 | h2 { |
145 | font-size: 2em; |
146 | color: #D81B60; |
147 | text-align: center; |
148 | } |
149 | |
150 | p { |
151 | text-align: center; |
152 | } |
153 | |
154 | p, .article { |
155 | font-size: 1.1em; |
156 | } |
157 | |
158 | h3 { |
159 | font-size: 1.5em; |
160 | text-align: left; |
161 | padding: 10px; |
162 | margin: 10px; |
163 | border-bottom: 3px solid #D81B60; |
164 | } |
165 | |
166 | .article h2 { |
167 | font-size: 2em; |
168 | text-align: left; |
169 | border-bottom: 3px solid #D81B60; |
170 | color: inherit; |
171 | padding: 0px; |
172 | margin: 0px; |
173 | } |
174 | |
175 | .article h3 { |
176 | border: none; |
177 | font-size: 1.5em; |
178 | text-align: left; |
179 | color: #D81B60; |
180 | padding: 0px; |
181 | margin: 0px; |
182 | } |
183 | |
184 | #features { |
185 | display: flex; |
186 | flex-direction: row; |
187 | width: 900px; |
188 | margin: auto; |
189 | } |
190 | |
191 | #features div { |
192 | flex: 1; |
193 | } |
194 | |
195 | #features ul { |
196 | list-style: none; |
197 | padding: 0; |
198 | } |
199 | |
200 | #features li { |
201 | padding: 10px; |
202 | font-size: 1.1em; |
203 | } |
204 | |
205 | #content p { |
206 | margin-bottom: 3em; |
207 | } |
208 | |
209 | .article { |
210 | width: 900px; |
211 | margin: auto; |
212 | } |
213 | |
214 | .article p { |
215 | text-align: justify; |
216 | line-height: 1.5em; |
217 | } |
218 | |
219 | .article h2 { |
220 | text-align: left; |
221 | } |
222 |