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