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