add some space
[ryf-theme.git] / css / style.css
1 /**
2 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
3 * your custom CSS modifications here.
4 */
5
6 body { margin: 0; min-width: 320px; }
7
8 a { transition: 0.3s; }
9
10 .navbar-default {
11 background: #000;
12 color: #FFF;
13 border: none;
14 border-radius: 0px;
15 box-sizing: content-box;
16 align-items: center;
17 margin-bottom: 100px;
18 min-height: 100px;
19 }
20
21 .navbar-header,
22 #navbar-collapse {
23 max-width: 1150px;
24 padding: 0;
25 margin: 0 auto;
26 border: none;
27 overflow: hidden;
28 }
29
30 .navbar-default .navbar-toggle { display: none; }
31
32 .navbar-header {
33 position: absolute;
34 top: 5px;
35 }
36
37 .navbar-brand { display: none; }
38
39 #block-ryf-main-menu .navbar-nav { margin-left: 180px; }
40
41 .navbar-default .navbar-nav > .active > a,
42 .navbar-default .navbar-nav > .active > a:hover,
43 .navbar-default .navbar-nav > li > a {
44 color: #FFF;
45 background: #000;
46 border-bottom: 2px solid transparent;
47 padding-bottom: 10px;
48 margin-bottom: 5px;
49 }
50
51 .navbar-default .navbar-nav > .active > a,
52 .navbar-default .navbar-nav > .active > a:hover,
53 .navbar-default .navbar-nav > li > a:hover {
54 color: #edd400;
55 border-bottom: 2px solid #edd400;
56 padding-bottom: 5px;
57 margin-bottom: 10px;
58 }
59
60 .page-header {
61 border-bottom: 2px solid #000;
62 font-size: 2em;
63 }
64
65 .region-header .search-block-form {
66 width: 300px;
67 float: right;
68 }
69
70 .block-views {
71 margin-top: 20px;
72 }
73
74 @media screen and (min-width: 520px) and (max-width: 599px) {
75 .logo img { margin-left: 50px; }
76 #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
77 }
78
79 @media screen and (min-width: 600px) and (max-width: 767px) {
80 .logo img { margin-left: 100px; }
81 #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
82 }
83
84 @media screen and (max-width: 767px) {
85 .logo img { height: 150px; margin-top: 25px; }
86 .navbar-default { min-height: 230px; margin-bottom: 30px; }
87 #block-ryf-main-menu .navbar-nav { max-width: 130px; }
88 }
89
90 @media screen and (min-width: 768px) {
91 .navbar-nav { margin-top: 40px; }
92 }
93
94
95 /* Selectors */
96
97
98 @media screen and (min-width: 768px) {
99 .form-inline .form-item .select-wrapper {
100 display: block;
101 }
102 .form-inline .form-actions {
103 margin-top: 21px;
104 }
105 }
106
107
108 /* RYF List */
109
110
111 .ryf-list-row ul {
112 padding: 0;
113 margin: 0 auto;
114 overflow: auto;
115 }
116
117 .ryf-list {
118 float: left;
119 margin: 0;
120 padding: 0.5em;
121 position:relative;
122 list-style: none;
123 }
124
125 .ryf-list article {
126 border: 1px solid #ececec;
127 border-radius: 5px;
128 padding: 1em;
129 box-shadow: 2px 2px 5px #ddd;
130 transition: 0.3s;
131 }
132
133 .ryf-list article:hover {
134 box-shadow: 0px 0px 5px #aaa;
135 }
136
137 .ryf-list .field--type-image {
138 width: 150px;
139 height: 150px;
140 background: #fff;
141 border-radius: 10px;
142 display: flex;
143 align-items: center;
144 }
145
146 .ryf-list .field--name-field-image {
147 margin: 0 auto;
148 }
149
150 .ryf-list img {
151 max-width: 150px;
152 overflow: hidden;
153 }
154
155 .ryf-list img:hover {
156 border-radius: 0;
157 }
158
159 .ryf-list h2 {
160 text-align: left;
161 font-size: 1.5em;
162 font-weight: 500;
163 line-height: 1.2em;
164 margin: 0;
165 padding: 0;
166 padding-bottom: 1em;
167 }
168
169 .ryf-list a {
170 color: #118991;
171 text-decoration: none;
172 }
173
174 .ryf-list a:hover {
175 color: #000;
176 }
177
178 .ryf-list .node-readmore,
179 .ryf-list .tags,
180 .ryf-list .supplier {
181 width: 100%;
182 float: left;
183 font-size: 0.9em;
184 border-top: 1px solid #ccc4c4;
185 margin-top: 5px;
186 padding-top: 5px;
187 color: #afadad;
188 }
189
190 .ryf-list .node-readmore {
191 text-align: right;
192 }
193
194 .feed-icons {
195 margin-top: 15px;
196 clear: both;
197 }
198
199 @media screen and (min-width: 450px) and (max-width: 659px) {
200 .ryf-list-row ul {
201 max-width: 600px;
202 }
203 .ryf-list {
204 max-width: 300px;
205 float: none;
206 margin: 0 auto;
207 }
208 }
209 @media screen and (min-width: 660px) and (max-width: 767px) {
210 .ryf-list-row ul {
211 max-width: 600px;
212 }
213 .ryf-list-row {
214 margin: 0 auto;
215 max-width: 660px;
216 }
217 .ryf-list {
218 max-width: 300px;
219 float: left;
220 }
221 }
222
223
224 /* Vendors list */
225
226
227 .vendors-list-row ul {
228 padding: 10px;
229 margin: 0 auto;
230 overflow: auto;
231 }
232
233 @media screen and (max-width: 767px) {
234 .vendors-list-row {
235 margin: 0px auto;
236 }
237
238 .vendors-list {
239 margin-bottom: 40px;
240 list-style: none;
241
242 overflow: auto;
243 }
244
245 .vendors-list .views-field-field-icon {
246 width: 220px;
247
248 margin: 0px auto 20px auto;
249 }
250
251 .vendors-list .views-field-field-icon img {
252 margin: 0 auto;
253 }
254
255 .vendors-list .views-field-name,
256 .vendors-list .views-field-description__value {
257 max-width: 300px;
258 margin: 0 auto 10px auto;
259 }
260
261 .vendors-list .views-field-name {
262 font-weight: bold;
263 font-size: 18px;
264 text-align: center;
265 }
266
267 }
268
269 @media screen and (min-width: 768px) {
270 .vendors-list-row {
271 width: 600px;
272 margin: 0px auto;
273 }
274
275 .vendors-list {
276 list-style: none;
277 clear: left;
278
279 overflow: auto;
280 }
281
282 .vendors-list .views-field-field-icon {
283 width: 220px;
284 height: 220px;
285
286 margin-bottom: 40px;
287
288 float: left;
289 }
290
291 .vendors-list .views-field-field-icon img {
292 margin: 0 auto;
293 }
294
295 .vendors-list .views-field-name,
296 .vendors-list .views-field-description__value {
297 margin-left: 300px;
298 }
299
300 .vendors-list .views-field-name {
301 margin-bottom: 10px;
302 font-weight: bold;
303 font-size: 18px;
304 }
305 }
306
307
308 /* Sidebars */
309
310
311 @media screen and (max-width: 767px) {
312 .path-products #block-views-block-categories-categories-block { display: none; }
313 }
314
315
316 /* Vendor and Category taxonomy term pages */
317
318
319 .view-taxonomy-term .view-header .field--name-field-icon img {
320 margin: 0 auto;
321 }
322
323 .view-filters {
324 clear: left;
325 }
326
327 @media screen and (max-width: 559px) {
328 .view-taxonomy-term .view-header {
329 margin: 0 auto 40px auto;
330
331 overflow: auto;
332 }
333
334 .view-taxonomy-term .view-header .field--name-field-icon {
335 margin: 0 auto 20px auto;
336 width: 220px;
337 }
338
339 .view-taxonomy-term .view-header .field--name-description {
340 max-width: 360px;
341 margin: 0 auto;
342 padding: 0 10px;
343 }
344
345 }
346
347 @media screen and (min-width: 560px) {
348 .view-taxonomy-term .view-header {
349 margin: 0 0 40px 0;
350
351 overflow: auto;
352 }
353
354 .view-taxonomy-term .view-header .field--name-field-icon {
355 width: 220px;
356
357 float: left;
358 }
359
360 .view-taxonomy-term .view-header .field--name-description {
361 margin-left: 260px;
362 }
363
364 }
365
366 @media screen and (min-width: 768px) {
367 .view-taxonomy-term .view-header {
368 max-width: 700px;
369 }
370 }
371
372
373 /* Product */
374
375
376 @media screen and (max-width: 767px) {
377 .page-node-type-product .product {
378 max-width: 382px;
379 margin: 0 auto;
380 }
381 }
382
383 @media screen and (min-width: 768px) and (max-width: 991px) {
384 .page-node-type-product .product {
385 width: 700px;
386 margin: 0 auto;
387 }
388 }
389
390 @media screen and (min-width: 992px) {
391 .page-node-type-product .product {
392 width: 800px;
393 margin: 0 auto;
394 }
395 }
396
397 .page-node-type-product .product .field--name-field-image {
398 padding: 10px;
399
400 display: flex;
401 align-items: center;
402
403 border: 1px solid #888;
404 border-radius: 10px;
405 }
406
407 .page-node-type-product .product .field--name-field-extra-images {
408 padding: 5px;
409
410 display: flex;
411 align-items: center;
412
413 border: 1px solid #888;
414 border-radius: 10px;
415 }
416
417 .page-node-type-product .product .field--name-field-extra-images .field--item {
418 display: inline-block;
419 margin: auto;
420 padding: 5px;
421 }
422
423 .page-node-type-product .product .field--name-field-categories,
424 .page-node-type-product .product .field--name-field-vendor {
425 margin: 10px 10px 20px 0px;
426 padding: 10px;
427 border: 1px solid #888;
428 border-radius: 10px;
429 }
430
431 .page-node-type-product .product .field--name-field-categories .field--item {
432 display: list-item;
433 list-style: circle;
434 margin-left: 15px;
435 }
436
437 /* product page colors */
438 .page-node-type-product .product .field--name-field-image {
439 background-color: #fff;
440 border-color: #aaa;
441 }
442 .page-node-type-product .product .field--name-field-extra-images {
443 background-color: #f3f3f3;
444 border-color: #aaa;
445 }
446 .page-node-type-product .product .field--name-field-categories {
447 background-color: #def;
448 border-color: #8ad;
449 }
450 .page-node-type-product .product .field--name-field-vendor {
451 background-color: #dfe;
452 border-color: #8da;
453 }
454
455 @media screen and (max-width: 767px) {
456 .page-node-type-product .product .field--name-field-extra-images {
457 margin: 10px auto 0px auto;
458 }
459
460 .page-node-type-product .product .field--name-body,
461 .page-node-type-product .product .field--name-field-vendor-product-link,
462 .page-node-type-product .product .field--name-field-certification-details,
463 .page-node-type-product .product .field--name-field-certification-date,
464 .page-node-type-product .product .field--name-field-source-code-links {
465 margin-bottom: 20px;
466 }
467
468 .page-node-type-product .product .field--name-field-categories,
469 .page-node-type-product .product .field--name-field-vendor {
470 float: left;
471 }
472
473 .page-node-type-product .product .field--name-body {
474 clear: both;
475 }
476 }
477
478
479 @media screen and (min-width: 768px) {
480 .page-node-type-product .product .field--name-field-image {
481 width: 382px;
482 float: left;
483 }
484
485 .page-node-type-product .product .field--name-field-extra-images {
486 float: left;
487 clear: left;
488
489 width: 382px;
490 margin-top: 10px;
491 }
492
493 .page-node-type-product .product .field--name-body,
494 .page-node-type-product .product .field--name-field-vendor-product-link,
495 .page-node-type-product .product .field--name-field-certification-details,
496 .page-node-type-product .product .field--name-field-certification-date,
497 .page-node-type-product .product .field--name-field-source-code-links {
498 margin-left: 400px;
499 margin-bottom: 20px;
500 }
501
502 .page-node-type-product .product .field--name-field-categories {
503 float: left;
504 clear: left;
505 }
506
507 .page-node-type-product .product .field--name-field-vendor {
508 float: left;
509 }
510
511 }
512
513
514 /* News and Product Announcements */
515
516
517 .page-node-type-product-announcement .page-header,
518 .page-node-type-product-announcement .tabs--primary,
519 .page-node-type-product-announcement .region-content,
520 .page-node-type-general-news-item .page-header,
521 .page-node-type-general-news-item .tabs--primary,
522 .page-node-type-general-news-item .region-content,
523 .page-node-type-page .page-header,
524 .page-node-type-page .tabs--primary,
525 .page-node-type-page .region-content,
526 .path-news .page-header,
527 .path-news .tabs--primary,
528 .path-news .region-content {
529 max-width: 800px;
530 margin: 0 auto;
531 }
532
533 /* don't apply above max-width rule to main page */
534 .path-frontpage .page-header,
535 .path-frontpage .tabs--primary,
536 .path-frontpage .region-content {
537 max-width: 2000px; /* high number beyond the max */
538 }
539
540 .page-node-type-page .page-header {
541 margin-bottom: 20px;
542 }
543
544 .path-news h2 {
545 font-size: 25px;
546 }
547
548 .page-node-type-product-announcement .author,
549 .page-node-type-general-news-item .author {
550 margin: 10px 0 20px 0;
551 font-style: oblique;
552 }
553
554 .page-node-type-product-announcement .field--name-body,
555 .page-node-type-general-news-item .field--name-body {
556 margin-bottom: 20px;
557 }
558
559 .page-node-type-product-announcement .field--name-field-external-news-link,
560 .page-node-type-general-news-item .field--name-field-external-news-link {
561 margin-bottom: 20px;
562 }
563
564 .page-node-type-product-announcement .field--name-field-vendor-page,
565 .page-node-type-product-announcement .field--name-field-announced-products {
566 margin-bottom: 20px;
567 }
568
569
570 /* Footer */
571
572
573 .footer {
574 background: #333;
575 color: #FFF;
576 }
577
578 /* full page width for footer */
579 .footer {
580 width: 100%;
581 }
582
583 .footer a { color: #edd400; }
584
585 .footer a:hover { color: #FFF; }
586
587 .footer h4 { font-weight: bold; }
588
589 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
590
591 #fsf-logo-footer { margin-bottom: 10px; }
592
593 @media print { #fsf-logo-footer { filter: invert(100%) } }
594