]> Raphaël G. Git Repositories - blogbundle/blob - Resources/public/css/screen.css
5e207c5b3833509e2f140b1cd3f51cb06ee49f3a
[blogbundle] / Resources / public / css / screen.css
1 /* Reset link */
2 a {
3 text-decoration: none;
4 }
5
6 a:hover {
7 text-decoration: underline;
8 }
9
10 /* Default styling */
11 h1 {
12 font-size: 2rem;
13 margin: 1.34rem 0;
14 }
15
16 h2 {
17 font-size: 1.5rem;
18 margin: 1.245rem 0;
19 }
20
21 h3 {
22 font-size: 1.17rem;
23 margin: 1.17rem 0;
24 }
25
26 h4 {
27 font-size: 1rem;
28 margin: 1.33rem 0;
29 }
30
31 h5 {
32 font-size: .83rem;
33 margin: 1.386rem 0;
34 }
35
36 h6 {
37 font-size: .67rem;
38 margin: 1.561rem 0;
39 }
40
41 p {
42 color: #066;
43 }
44
45 body {
46 display: flex;
47 flex-flow: column wrap;
48 }
49
50 /* Header */
51 #header {
52 border-top: .1rem solid #0063c9;
53 padding: .5rem;
54 background-color: #00c3f9;
55 color: #0063c9;
56 border-radius: 0 0 .5rem .5rem;
57 display: flex;
58 }
59
60 /* hack for top menu wrapping */
61 @media ( max-width: 450px ) {
62 #header {
63 flex-wrap: wrap;
64 }
65 }
66
67 #header h1 {
68 order: 0;
69 font-size: 1.5rem;
70 margin: 0;
71 white-space: nowrap;
72 }
73
74 #header h1:after {
75 content: "\00a0";
76 }
77
78 #header h2 {
79 order: 1;
80 font-size: 1.5rem;
81 margin: 0;
82 white-space: nowrap;
83 }
84
85 #header h2:before {
86 content: ">\00a0";
87 }
88
89 #header a {
90 color: #0063c9;
91 }
92
93 #header nav {
94 order: 3;
95 margin-left: auto;
96 display: flex;
97 flex-direction: row;
98 flex-wrap: wrap;
99 align-items: center;
100 justify-content: flex-end;
101 }
102
103 #header nav h2 {
104 display: none;
105 }
106
107 #header nav a {
108 text-align: center;
109 border-radius: .25rem;
110 padding: .25rem .5rem;
111 margin: 0 0 .1rem .5rem;
112 color: #00c3f9;
113 background-color: #0063c9;
114 font-weight: bold;
115 }
116
117 /* Index */
118 #content {
119 margin: .5rem 0;
120 border-radius: .5rem;
121 overflow: hidden;
122 border: .1rem solid #00c3f9;
123 padding: .5rem;
124 }
125
126 #content h2 {
127 background-color: #00c3f9;
128 margin: -.5rem -.5rem 0 -.5rem;
129 padding: .5rem;
130 color: #0063c9;
131 }
132
133 #content h2 a {
134 color: #0063c9;
135 }
136
137 #content article {
138 border-bottom: .1rem solid #00c3f9;
139 padding: .5rem;
140 }
141
142 #content article:last-child {
143 border-bottom: none;
144 }
145
146 #content article header {
147 margin: 1.17rem 0;
148 }
149
150 #content article header h3 {
151 margin: 0;
152 }
153
154 #content article header p {
155 margin: 0;
156 font-size: .75rem;
157 display: flex;
158 justify-content: space-between;
159 }
160
161 #content article a {
162 color: #0063c9;
163 }
164
165 #content article p {
166 text-align: justify;
167 text-justify: distribute;
168 margin-bottom: .75rem;
169 }
170
171 #content article nav {
172 text-align: right;
173 margin-bottom: .5rem;
174 }
175
176 #content article:last-child nav {
177 margin-bottom: 0;
178 }
179
180 /* Article */
181 #article,
182 #contact,
183 #keyword {
184 margin: .5rem 0;
185 border-radius: .5rem;
186 border: .1rem solid #00c3f9;
187 padding: .5rem;
188 overflow-x: hidden;
189 }
190
191 #article header,
192 #contact header,
193 #keyword header {
194 background-color: #00c3f9;
195 margin: -.5rem -.5rem .5rem -.5rem;
196 padding: .5rem;
197 color: #0063c9;
198 }
199
200 #article header h3,
201 #contact header h3,
202 #keyword header h3 {
203 margin: 0;
204 }
205
206 #article header p,
207 #keyword header p {
208 margin: 0;
209 font-size: .75rem;
210 display: flex;
211 justify-content: space-between;
212 }
213
214 #article a,
215 #keyword a {
216 color: #0063c9;
217 }
218
219 #article p,
220 #article pre,
221 #article ul,
222 #contact div,
223 #keyword p,
224 #keyword pre,
225 #keyword ul {
226 margin-bottom: .5rem;
227 }
228
229 #article p,
230 #keyword p {
231 text-align: justify;
232 text-justify: distribute;
233 }
234
235 #article p:last-child,
236 #contact div:last-child {
237 margin-bottom: none;
238 }
239
240 #contact input,
241 #contact textarea {
242 width: 24rem;
243 padding: 2px;
244 border: 1px solid #00c3f9;
245 }
246
247 #contact button.submit {
248 width: 4rem;
249 margin: 0 10rem;
250 }
251
252 #contact div div:last-child {
253 text-align: center;
254 }
255
256 #article pre {
257 border-radius: .5rem;
258 border: .1rem solid #00c3f9;
259 padding: .5rem;
260 color: #0063c9;
261 overflow-x: auto;
262 margin-bottom: 1rem;
263 }
264
265 #article ul {
266 margin-top: -.5rem;
267 }
268
269 #article ul:first-child {
270 margin-top: none;
271 }
272
273 #footer {
274 font-size: .8rem;
275 padding: .5rem;
276 background-color: #00c3f9;
277 color: #0063c9;
278 border-radius: .5rem .5rem 0 0;
279 bottom: 0;
280 text-align: center;
281 font-weight: bold;
282 position: relative;
283 left: 0;
284 right: 0;
285 display: flex;
286 justify-content: space-between;
287 }
288
289 #footer summary:after {
290 display: none;
291 }
292
293 #footer summary::-webkit-details-marker {
294 display: none;
295 }
296
297 #footer nav {
298 font-weight: normal;
299 }
300
301 #footer a {
302 color: #0063c9;
303 }
304
305 /*
306 #footer summary:after,
307 #footer p:after {
308 content: ' - ';
309 }
310
311 #footer p:last-child:after {
312 content: '';
313 }*/