nani/website/css/nani.css

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