fix src font-face
[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 /* Lato font */
7
8 @font-face {
9 font-family: "Lato";
10 src: url("../fonts/Lato-Regular.ttf") format('truetype');
11 font-weight: 400;
12 font-style: normal;
13 }
14
15 @font-face {
16 font-family: "Lato";
17 src: url('../fonts/Lato-RegularItalic.ttf') format('truetype');
18 font-weight: 400;
19 font-style: italic;
20 }
21
22 @font-face {
23 font-family: "Lato";
24 src: url('../fonts/Lato-Bold.ttf') format('truetype');
25 font-weight: 700;
26 font-style: normal;
27 }
28
29
30 /* Universal */
31
32 body {
33 font-family: "Lato", Helvetica, Arial, sans-serif;
34 margin: 0;
35 min-width: 320px;
36 }
37
38 a { transition: 0.3s; }
39
40 section { position: relative; }
41
42 /* etcetera */
43
44 .visually-hidden.focusable:focus {
45 position: absolute !important;
46 background: #000;
47 color: #FFF;
48 padding: 0.5em;
49 z-index: 9999;
50 }
51
52 .main-container { min-height: 50vh; }
53
54 h2.block-title {
55 background: #000;
56 color: #FFF;
57 padding: 0.5em;
58 }
59
60 .feed-icons a {
61 background: url('../images/rss.svg') top left no-repeat;
62 background-size: contain;
63 height: 20px;
64 overflow: hidden;
65 display: block;
66 text-indent: 25px;
67 font-size: 1em;
68 width: fit-content;
69 margin-top: 1em;
70 float: right;
71 }
72
73 .view-display-id-news_page .feed-icons a {
74 margin-top: -30px;
75 }
76
77 .more-link {
78 border: 1px solid #ddd;
79 border-radius: .5em;
80 padding: .5em;
81 text-align: center;
82 width: 50%;
83 margin: 0 auto;
84 font-weight: bold;
85 margin-top: 2em;
86 }
87
88 .more-link:hover {
89 background: #EEE;
90 color: #000;
91 }
92
93 .block-views {
94 margin-top: 20px;
95 }
96
97 /* Navbar */
98
99 .navbar-default {
100 background: #000;
101 color: #FFF;
102 border: none;
103 border-radius: 0px;
104 box-sizing: content-box;
105 align-items: center;
106 min-height: 100px;
107 }
108
109 .navbar-header,
110 #navbar-collapse {
111 max-width: 1150px;
112 padding: 0;
113 margin: 0 auto;
114 border: none;
115 overflow: hidden;
116 }
117
118 .navbar-default .navbar-toggle { display: none; }
119
120 .navbar-header {
121 position: absolute;
122 top: 5px;
123 }
124
125 .navbar-brand { display: none; }
126
127 #block-ryf-main-menu .navbar-nav { margin-left: 195px; }
128
129 .navbar-default .navbar-nav > li > a:focus {
130 outline: none;
131 }
132
133 .navbar-default .navbar-nav > li > a,
134 .navbar-default .navbar-nav > li > a:link,
135 .navbar-default .navbar-nav > li > a:visited {
136 color: #FFF;
137 background: #000;
138 border-bottom: 2px solid transparent;
139 padding-bottom: 10px;
140 margin-bottom: 5px;
141 }
142
143 .navbar-default .navbar-nav > li > a:focus,
144 .navbar-default .navbar-nav > li.active > a:hover,
145 .navbar-default .navbar-nav > li > a:hover {
146 color: #DDCC00;
147 background: #000;
148 border-bottom: 2px solid #DDCC00;
149 padding-bottom: 5px;
150 margin-bottom: 10px;
151 }
152
153 .navbar-default .navbar-nav > li > a.is-active {
154 border-bottom: 2px solid #FFF;
155 background: #000;
156 padding-bottom: 5px;
157 margin-bottom: 10px;
158 }
159
160 .page-header {
161 border-bottom: 2px solid #000;
162 font-size: 2em;
163 }
164
165 .region-header .search-block-form {
166 width: 300px;
167 float: right;
168 }
169
170 nav .search-block-form {
171 position: absolute;
172 width: 300px;
173 right: 10%;
174 top: 30px;
175 }
176
177 /*
178 * @media screen and (min-width: 520px) and (max-width: 599px) {
179 * .logo img { margin-left: 50px; }
180 * #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
181 * }
182 *
183 * @media screen and (min-width: 600px) and (max-width: 767px) {
184 * .logo img { margin-left: 100px; }
185 * #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
186 * }
187 *
188 * @media screen and (max-width: 767px) {
189 * .logo img { height: 150px; margin-top: 25px; }
190 * .navbar-default { min-height: 230px; margin-bottom: 30px; }
191 * #block-ryf-main-menu .navbar-nav { max-width: 130px; }
192 * }
193 *
194 */
195
196 @media screen and (min-width: 768px) {
197
198 .navbar-default {
199 margin-bottom: 100px;
200 }
201 .navbar-nav {
202 margin-top: 40px;
203 }
204 .region-header .breadcrumb {
205 position: absolute;
206 top: -70px;
207 left: 200px;
208 background: none;
209 }
210 .region-navigation-collapsible .search-block-form {
211 float: right;
212 padding-top: 30px;
213 width: 210px;
214 }
215 }
216
217
218 /* Selectors */
219
220
221 @media screen and (min-width: 768px) {
222 .form-inline .form-item .select-wrapper {
223 display: block;
224 }
225 .form-inline .form-actions {
226 margin-top: 21px;
227 }
228 }
229
230 /* News */
231
232 .view-news article {
233 padding: 0.5em;
234 margin: 0 10%;
235 }
236
237 .view-news p {
238 line-height: 1.5em;
239 font-size: 1.1em;
240 }
241
242 .view-news .node-readmore {
243 padding: 0.5em 1em;
244 border: 1px solid #DDD;
245 border-radius: 0.5em;
246 float: right;
247 }
248
249 .view-news .node-readmore:hover {
250 background: #EEE;
251 color: #000;
252 }
253
254 .view-news footer {
255 color: #999;
256 padding: 0.5em;
257 text-align: right;
258 }
259
260
261 /* RYF List */
262
263
264 .ryf-list-row {
265 padding: 0;
266 margin: 0 auto;
267 overflow: auto;
268 }
269
270 .ryf-list {
271 float: left;
272 margin: 0;
273 padding: 0.5em;
274 position: relative;
275 list-style: none;
276 }
277
278 .ryf-list article {
279 border: 1px solid #ececec;
280 border-radius: 5px;
281 border-top: none;
282 border-left: none;
283 padding: 1em;
284 box-shadow: 2px 2px 5px #ddd;
285 transition: 0.3s;
286 }
287
288 .ryf-list article:hover {
289 box-shadow: 0px 0px 5px #aaa;
290 }
291
292 .ryf-list .field--type-image {
293 width: 150px;
294 height: 150px;
295 background: #fff;
296 border-radius: 10px;
297 display: flex;
298 align-items: center;
299 }
300
301 .ryf-list .field--name-field-image {
302 margin: 0 auto 10px auto;
303 }
304
305 .ryf-list img {
306 max-width: 150px;
307 max-height: 150px;
308 object-fit: contain;
309 overflow: hidden;
310 }
311
312 .ryf-list img:hover {
313 border-radius: 0;
314 }
315
316 .ryf-list h2 {
317 text-align: left;
318 font-size: 1.5em;
319 font-weight: 500;
320 line-height: 1.2em;
321 margin: 0;
322 padding: 0;
323 padding-bottom: 1em;
324 }
325
326 .ryf-list a {
327 color: #337AB7;
328 }
329
330 .ryf-list a:hover {
331 color: #000;
332 }
333
334 .ryf-list .list-inline li {
335 font-size: 0.9em;
336 border: 1px solid #ddd;
337 width: auto;
338 border-radius: 0.5em;
339 padding: 0.3em 0.5em;
340 position: absolute;
341 bottom: 15px;
342 right: 15px;
343 }
344
345 .ryf-list .list-inline li:hover {
346 background: #eee;
347 }
348
349 @media screen and (min-width: 450px) and (max-width: 659px) {
350 .ryf-list-row {
351 max-width: 600px;
352 }
353 .ryf-list {
354 max-width: 300px;
355 float: none;
356 margin: 0 auto;
357 }
358 }
359 @media screen and (min-width: 660px) and (max-width: 767px) {
360 .ryf-list-row {
361 max-width: 600px;
362 }
363 .ryf-list-row {
364 margin: 0 auto;
365 max-width: 660px;
366 }
367 .ryf-list {
368 max-width: 300px;
369 float: left;
370 }
371 .auto-clear .col-xs-12:nth-child(odd){clear:left;}
372 }
373
374 @media screen and (min-width: 55em) {
375
376 .ryf-list article {
377 min-height: 360px
378 }
379
380 }
381
382
383 /* Vendors list */
384
385
386 .vendors-list-row {
387 padding: 10px;
388 margin: 0 auto;
389 overflow: auto;
390 }
391
392 @media screen and (max-width: 767px) {
393 .vendors-list-row {
394 margin: 0px auto;
395 }
396
397 .vendors-list {
398 margin-bottom: 40px;
399 list-style: none;
400
401 overflow: auto;
402 }
403
404 .vendors-list .views-field-field-icon {
405 width: 220px;
406
407 margin: 0px auto 20px auto;
408 }
409
410 .vendors-list .views-field-field-icon img {
411 margin: 0 auto;
412 }
413
414 .vendors-list .views-field-name,
415 .vendors-list .views-field-field-description-summary,
416 .vendors-list .views-field-description__value {
417 max-width: 300px;
418 margin: 0 auto 10px auto;
419 }
420
421 .vendors-list .views-field-name {
422 font-weight: bold;
423 font-size: 18px;
424 text-align: center;
425 }
426
427 }
428
429 @media screen and (min-width: 768px) {
430 .vendors-list-row {
431 width: 600px;
432 margin: 0px auto;
433 }
434
435 .vendors-list {
436 list-style: none;
437 clear: left;
438
439 overflow: auto;
440 }
441
442 .vendors-list .views-field-field-icon {
443 width: 220px;
444 height: 220px;
445
446 margin-bottom: 40px;
447
448 float: left;
449 }
450
451 .vendors-list .views-field-field-icon img {
452 margin: 0 auto;
453 }
454
455 .vendors-list .views-field-name,
456 .vendors-list .views-field-field-description-summary,
457 .vendors-list .views-field-description__value {
458 margin-left: 300px;
459 }
460
461 .vendors-list .views-field-name {
462 margin-bottom: 10px;
463 font-weight: bold;
464 font-size: 18px;
465 }
466 }
467
468
469 /* Sidebars */
470
471
472 @media screen and (max-width: 767px) {
473 .path-products #block-views-block-categories-categories-block { display: none; }
474 }
475
476
477 /* Vendor and Category taxonomy term pages */
478
479
480 .view-taxonomy-term .view-header .field--name-field-icon img {
481 margin: 0 auto;
482 }
483
484 .view-filters {
485 clear: left;
486 }
487
488 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
489 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
490 margin-top: 15px;
491 }
492
493 @media screen and (max-width: 559px) {
494 .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
495 margin: 0 auto 40px auto;
496 overflow: auto;
497 }
498
499 .view-taxonomy-term .view-header .field--name-field-icon {
500 margin: 0 auto 20px auto;
501 width: 220px;
502 }
503
504 .view-taxonomy-term .view-header .field--name-description,
505 .view-taxonomy-term .view-header .field--name-field-description-summary,
506 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
507 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
508 max-width: 360px;
509 margin: 15px auto 0 auto;
510 padding: 0 10px;
511 }
512
513 }
514
515 @media screen and (min-width: 560px) {
516 .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
517 margin: 0 0 40px 0;
518 overflow: auto;
519 }
520
521 .view-taxonomy-term .view-header .field--name-field-icon {
522 width: 220px;
523 float: left;
524 }
525
526 .view-taxonomy-term .view-header .field--name-description,
527 .view-taxonomy-term .view-header .field--name-field-description-summary,
528 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
529 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
530 margin-left: 260px;
531 }
532
533 }
534
535 @media screen and (min-width: 768px) {
536 .view-taxonomy-term .view-header {
537 max-width: 700px;
538 }
539 }
540
541
542 /* Product */
543
544
545 @media screen and (max-width: 767px) {
546 .page-node-type-product .product {
547 max-width: 382px;
548 margin: 0 auto;
549 }
550 }
551
552 @media screen and (min-width: 768px) and (max-width: 991px) {
553 .page-node-type-product .product {
554 width: 700px;
555 margin: 0 auto;
556 }
557 }
558
559 @media screen and (min-width: 992px) {
560 .page-node-type-product .product {
561 width: 800px;
562 margin: 0 auto;
563 }
564 }
565
566 .page-node-type-product .product .field--name-field-image {
567 padding: 10px;
568
569 border: 1px solid #888;
570 border-radius: 10px;
571 }
572
573 .page-node-type-product .product .field--name-field-image img {
574 margin: 0 auto;
575 }
576
577 .page-node-type-product .product .field--name-field-extra-images {
578 padding: 5px;
579 display: flex;
580 align-items: center;
581 border: 1px solid #888;
582 border-radius: 10px;
583 }
584
585 .page-node-type-product .product .field--name-field-extra-images .field--item {
586 display: inline-block;
587 margin: auto;
588 padding: 5px;
589 }
590
591 .page-node-type-product .product .field--name-field-categories,
592 .page-node-type-product .product .field--name-field-vendor {
593 margin: 10px 10px 20px 0px;
594 padding: 10px;
595 border: 1px solid #888;
596 border-radius: 10px;
597 }
598
599 .page-node-type-product .product .field--name-field-categories .field--item {
600 display: list-item;
601 list-style: circle;
602 margin-left: 15px;
603 }
604
605 #block-views-block-categories-categories-block ul {
606 margin: 0; padding: 0 10px;
607 list-style: none;
608 }
609
610 #block-views-block-categories-categories-block li {
611 padding: 5px 10px;
612 border: 1px solid #DDD;
613 border-radius: 5px;
614 list-style: none;
615 margin: 5px 0;
616 }
617
618 #block-views-block-categories-categories-block li:hover {
619 background: #EEE;
620 color: #000;
621 }
622
623 #block-views-block-categories-categories-block a {
624 width: 100%;
625 display: block;
626 }
627
628 /* product page colors */
629 .page-node-type-product .product .field--name-field-image {
630 background-color: #fff;
631 border-color: #aaa;
632 }
633 .page-node-type-product .product .field--name-field-extra-images {
634 background-color: #f3f3f3;
635 border-color: #aaa;
636 }
637 .page-node-type-product .product .field--name-field-categories {
638 background-color: #def;
639 border-color: #8ad;
640 }
641 .page-node-type-product .product .field--name-field-vendor {
642 background-color: #dfe;
643 border-color: #8da;
644 }
645
646 @media screen and (max-width: 767px) {
647 .page-node-type-product .product .field--name-field-extra-images {
648 margin: 10px auto 0px auto;
649 }
650
651 .page-node-type-product .product .field--name-body,
652 .page-node-type-product .product .field--name-field-vendor-product-link,
653 .page-node-type-product .product .field--name-field-certification-details,
654 .page-node-type-product .product .field--name-field-certification-date,
655 .page-node-type-product .product .field--name-field-source-code-links {
656 margin-bottom: 20px;
657 }
658
659 .page-node-type-product .product .field--name-field-categories,
660 .page-node-type-product .product .field--name-field-vendor {
661 margin-bottom: 0px;
662 float: left;
663 }
664
665 .page-node-type-product .product .field--name-body {
666 padding-top: 20px;
667 clear: both;
668 }
669 }
670
671
672 @media screen and (min-width: 768px) {
673 .page-node-type-product .product .field--name-field-image {
674 width: 382px;
675 float: left;
676 }
677
678 .page-node-type-product .product .field--name-field-extra-images {
679 float: left;
680 clear: left;
681 width: 382px;
682 margin-top: 10px;
683 }
684
685 .page-node-type-product .product .field--name-body,
686 .page-node-type-product .product .field--name-field-vendor-product-link,
687 .page-node-type-product .product .field--name-field-certification-details,
688 .page-node-type-product .product .field--name-field-certification-date,
689 .page-node-type-product .product .field--name-field-source-code-links {
690 margin-left: 400px;
691 margin-bottom: 20px;
692 }
693
694 .page-node-type-product .product .field--name-field-categories {
695 float: left;
696 clear: left;
697 }
698
699 .page-node-type-product .product .field--name-field-vendor {
700 float: left;
701 }
702
703 }
704
705
706 /* News and Product Announcements */
707
708
709 .page-node-type-product-announcement .page-header,
710 .page-node-type-product-announcement .tabs--primary,
711 .page-node-type-product-announcement .region-content,
712 .page-node-type-general-news-item .page-header,
713 .page-node-type-general-news-item .tabs--primary,
714 .page-node-type-general-news-item .region-content,
715 .page-node-type-page .page-header,
716 .page-node-type-page .tabs--primary,
717 .page-node-type-page .region-content,
718 .path-news .page-header,
719 .path-news .tabs--primary,
720 .path-news .region-content {
721 max-width: 800px;
722 margin: 0 auto;
723 }
724
725 /* don't apply above max-width rule to main page */
726 .path-frontpage .page-header,
727 .path-frontpage .tabs--primary,
728 .path-frontpage .region-content {
729 max-width: 2000px; /* high number beyond the max */
730 }
731
732 .page-node-type-page .page-header {
733 margin-bottom: 20px;
734 }
735
736 .path-news h2,
737 .block-views-blocknews-news-block article h2 {
738 font-size: 25px;
739 }
740
741 .page-node-type-product-announcement .author,
742 .page-node-type-general-news-item .author {
743 margin: 10px 0 20px 0;
744 font-style: oblique;
745 }
746
747 .page-node-type-product-announcement .field--name-body,
748 .page-node-type-general-news-item .field--name-body {
749 margin-bottom: 20px;
750 }
751
752 .page-node-type-product-announcement .field--name-field-external-news-link,
753 .page-node-type-general-news-item .field--name-field-external-news-link {
754 margin-bottom: 20px;
755 }
756
757 .page-node-type-product-announcement .field--name-field-vendor-page,
758 .page-node-type-product-announcement .field--name-field-announced-products {
759 margin-bottom: 20px;
760 }
761
762
763 /* Search Results */
764
765
766 @media screen and (max-width: 600px) {
767 .path-search .region-content > ol {
768 width: 300px;
769 }
770 }
771 @media screen and (min-width: 601px) and (max-width 1000px) {
772 .path-search .region-content > ol {
773 width: 560px;
774 }
775 }
776 @media screen and (min-width: 1001px) {
777 .path-search .region-content > ol {
778 width: 900px;
779 }
780 }
781
782 .path-search .region-content > ol {
783 margin: 0 auto;
784 padding-left: 0;
785 overflow: auto;
786 }
787
788 .path-search .region-content > ol li {
789 width: 280px;
790 height: 280px;
791 margin: 0px auto;
792 padding: 10px;
793
794 float: left;
795
796 list-style: none;
797 overflow: hidden;
798 }
799
800 .path-search .region-content > ol li h3 {
801 text-align: center;
802 }
803
804 .path-search .region-content > ol li .search-image {
805 width: 100px;
806 height: 100px;
807
808 margin: 0 auto;
809
810 display: flex;
811 align-items: center;
812 }
813
814 .path-search .region-content > ol li img {
815 }
816
817
818 /* Footer */
819
820 .footer {
821 background: #333;
822 color: #FFF;
823 }
824
825 /* full page width for footer */
826
827 .footer {
828 width: 100%;
829 }
830
831 .footer a { color: #DDCC00; }
832
833 .footer a:hover { color: #FFF; }
834
835 .footer h4 { font-weight: bold; }
836
837 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
838
839 #fsf-logo-footer { margin-bottom: 10px; }
840
841 @media print { #fsf-logo-footer { filter: invert(100%) } }
842