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