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