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 {
 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 .more-link {
 196   margin-top: 15px;
 197   clear: both;
 198 }
 199 .more-link {
 200   font-weight: bold;
 201 }
 202
 203 @media screen and (min-width: 450px) and (max-width: 659px) {
 204   .ryf-list-row {
 205     max-width: 600px;
 206   }
 207   .ryf-list {
 208     max-width: 300px;
 209     float: none;
 210     margin: 0 auto;
 211   }
 212 }
 213 @media screen and (min-width: 660px) and (max-width: 767px) {
 214   .ryf-list-row {
 215     max-width: 600px;
 216   }
 217   .ryf-list-row {
 218     margin: 0 auto;
 219     max-width: 660px;
 220   }
 221   .ryf-list {
 222     max-width: 300px;
 223     float: left;
 224   }
 225 }
 226
 227
 228 /* Vendors list */
 229
 230
 231 .vendors-list-row {
 232   padding: 10px;
 233   margin: 0 auto;
 234   overflow: auto;
 235 }
 236
 237 @media screen and (max-width: 767px) {
 238   .vendors-list-row {
 239     margin: 0px auto;
 240   }
 241
 242   .vendors-list {
 243     margin-bottom: 40px;
 244     list-style: none;
 245
 246     overflow: auto;
 247   }
 248
 249   .vendors-list .views-field-field-icon {
 250     width: 220px;
 251
 252     margin: 0px auto 20px auto;
 253   }
 254
 255   .vendors-list .views-field-field-icon img {
 256     margin: 0 auto;
 257   }
 258
 259   .vendors-list .views-field-name,
 260   .vendors-list .views-field-description__value {
 261     max-width: 300px;
 262     margin: 0 auto 10px auto;
 263   }
 264
 265   .vendors-list .views-field-name {
 266     font-weight: bold;
 267     font-size: 18px;
 268     text-align: center;
 269   }
 270
 271 }
 272
 273 @media screen and (min-width: 768px) {
 274   .vendors-list-row {
 275     width: 600px;
 276     margin: 0px auto;
 277   }
 278
 279   .vendors-list {
 280     list-style: none;
 281     clear: left;
 282
 283     overflow: auto;
 284   }
 285
 286   .vendors-list .views-field-field-icon {
 287     width: 220px;
 288     height: 220px;
 289
 290     margin-bottom: 40px;
 291
 292     float: left;
 293   }
 294
 295   .vendors-list .views-field-field-icon img {
 296     margin: 0 auto;
 297   }
 298
 299   .vendors-list .views-field-name,
 300   .vendors-list .views-field-description__value {
 301     margin-left: 300px;
 302   }
 303
 304   .vendors-list .views-field-name {
 305     margin-bottom: 10px;
 306     font-weight: bold;
 307     font-size: 18px;
 308   }
 309 }
 310
 311
 312 /* Sidebars */
 313
 314
 315 @media screen and (max-width: 767px) {
 316   .path-products #block-views-block-categories-categories-block { display: none; }
 317 }
 318
 319
 320 /* Vendor and Category taxonomy term pages */
 321
 322
 323 .view-taxonomy-term .view-header .field--name-field-icon img {
 324   margin: 0 auto;
 325 }
 326
 327 .view-filters {
 328   clear: left;
 329 }
 330
 331 @media screen and (max-width: 559px) {
 332   .view-taxonomy-term .view-header {
 333     margin: 0 auto 40px auto;
 334
 335     overflow: auto;
 336   }
 337
 338   .view-taxonomy-term .view-header .field--name-field-icon {
 339     margin: 0 auto 20px auto;
 340     width: 220px;
 341   }
 342
 343   .view-taxonomy-term .view-header .field--name-description {
 344     max-width: 360px;
 345     margin: 0 auto;
 346     padding: 0 10px;
 347   }
 348
 349 }
 350
 351 @media screen and (min-width: 560px) {
 352   .view-taxonomy-term .view-header {
 353     margin: 0 0 40px 0;
 354
 355     overflow: auto;
 356   }
 357
 358   .view-taxonomy-term .view-header .field--name-field-icon {
 359     width: 220px;
 360
 361     float: left;
 362   }
 363
 364   .view-taxonomy-term .view-header .field--name-description {
 365     margin-left: 260px;
 366   }
 367
 368 }
 369
 370 @media screen and (min-width: 768px) {
 371   .view-taxonomy-term .view-header {
 372     max-width: 700px;
 373   }
 374 }
 375
 376
 377 /* Product */
 378
 379
 380 @media screen and (max-width: 767px) {
 381   .page-node-type-product .product {
 382     max-width: 382px;
 383     margin: 0 auto;
 384   }
 385 }
 386
 387 @media screen and (min-width: 768px) and (max-width: 991px) {
 388   .page-node-type-product .product {
 389     width: 700px;
 390     margin: 0 auto;
 391   }
 392 }
 393
 394 @media screen and (min-width: 992px) {
 395   .page-node-type-product .product {
 396     width: 800px;
 397     margin: 0 auto;
 398   }
 399 }
 400
 401 .page-node-type-product .product .field--name-field-image {
 402   padding: 10px;
 403
 404   display: flex;
 405   align-items: center;
 406
 407   border: 1px solid #888;
 408   border-radius: 10px;
 409 }
 410
 411 .page-node-type-product .product .field--name-field-extra-images {
 412   padding: 5px;
 413
 414   display: flex;
 415   align-items: center;
 416
 417   border: 1px solid #888;
 418   border-radius: 10px;
 419 }
 420
 421 .page-node-type-product .product .field--name-field-extra-images .field--item {
 422   display: inline-block;
 423   margin: auto;
 424   padding: 5px;
 425 }
 426
 427 .page-node-type-product .product .field--name-field-categories,
 428 .page-node-type-product .product .field--name-field-vendor {
 429   margin: 10px 10px 20px 0px;
 430   padding: 10px;
 431   border: 1px solid #888;
 432   border-radius: 10px;
 433 }
 434
 435 .page-node-type-product .product .field--name-field-categories .field--item {
 436   display: list-item;
 437   list-style: circle;
 438   margin-left: 15px;
 439 }
 440
 441 /* product page colors */
 442 .page-node-type-product .product .field--name-field-image {
 443   background-color: #fff;
 444   border-color: #aaa;
 445 }
 446 .page-node-type-product .product .field--name-field-extra-images {
 447   background-color: #f3f3f3;
 448   border-color: #aaa;
 449 }
 450 .page-node-type-product .product .field--name-field-categories {
 451   background-color: #def;
 452   border-color: #8ad;
 453 }
 454 .page-node-type-product .product .field--name-field-vendor {
 455   background-color: #dfe;
 456   border-color: #8da;
 457 }
 458
 459 @media screen and (max-width: 767px) {
 460   .page-node-type-product .product .field--name-field-extra-images {
 461     margin: 10px auto 0px auto;
 462   }
 463
 464   .page-node-type-product .product .field--name-body,
 465   .page-node-type-product .product .field--name-field-vendor-product-link,
 466   .page-node-type-product .product .field--name-field-certification-details,
 467   .page-node-type-product .product .field--name-field-certification-date,
 468   .page-node-type-product .product .field--name-field-source-code-links {
 469     margin-bottom: 20px;
 470   }
 471
 472   .page-node-type-product .product .field--name-field-categories,
 473   .page-node-type-product .product .field--name-field-vendor {
 474     float: left;
 475   }
 476
 477   .page-node-type-product .product .field--name-body {
 478     clear: both;
 479   }
 480 }
 481
 482
 483 @media screen and (min-width: 768px) {
 484   .page-node-type-product .product .field--name-field-image {
 485     width: 382px;
 486     float: left;
 487   }
 488
 489   .page-node-type-product .product .field--name-field-extra-images {
 490     float: left;
 491     clear: left;
 492
 493     width: 382px;
 494     margin-top: 10px;
 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-left: 400px;
 503     margin-bottom: 20px;
 504   }
 505
 506   .page-node-type-product .product .field--name-field-categories {
 507     float: left;
 508     clear: left;
 509   }
 510
 511   .page-node-type-product .product .field--name-field-vendor {
 512     float: left;
 513   }
 514
 515 }
 516
 517
 518 /* News and Product Announcements */
 519
 520
 521 .page-node-type-product-announcement .page-header,
 522 .page-node-type-product-announcement .tabs--primary,
 523 .page-node-type-product-announcement .region-content,
 524 .page-node-type-general-news-item .page-header,
 525 .page-node-type-general-news-item .tabs--primary,
 526 .page-node-type-general-news-item .region-content,
 527 .page-node-type-page .page-header,
 528 .page-node-type-page .tabs--primary,
 529 .page-node-type-page .region-content,
 530 .path-news .page-header,
 531 .path-news .tabs--primary,
 532 .path-news .region-content {
 533   max-width: 800px;
 534   margin: 0 auto;
 535 }
 536
 537 /* don't apply above max-width rule to main page */
 538 .path-frontpage .page-header,
 539 .path-frontpage .tabs--primary,
 540 .path-frontpage .region-content {
 541   max-width: 2000px; /* high number beyond the max */
 542 }
 543
 544 .page-node-type-page .page-header {
 545   margin-bottom: 20px;
 546 }
 547
 548 .path-news h2,
 549 .block-views-blocknews-news-block article h2 {
 550   font-size: 25px;
 551 }
 552
 553 .page-node-type-product-announcement .author,
 554 .page-node-type-general-news-item .author {
 555   margin: 10px 0 20px 0;
 556   font-style: oblique;
 557 }
 558
 559 .page-node-type-product-announcement .field--name-body,
 560 .page-node-type-general-news-item .field--name-body {
 561   margin-bottom: 20px;
 562 }
 563
 564 .page-node-type-product-announcement .field--name-field-external-news-link,
 565 .page-node-type-general-news-item .field--name-field-external-news-link {
 566   margin-bottom: 20px;
 567 }
 568
 569 .page-node-type-product-announcement .field--name-field-vendor-page,
 570 .page-node-type-product-announcement .field--name-field-announced-products {
 571   margin-bottom: 20px;
 572 }
 573
 574
 575 /* Search Results */
 576
 577
 578 @media screen and (max-width: 600px) {
 579   .path-search .region-content ol {
 580     width: 300px;
 581   }
 582 }
 583 @media screen and (min-width: 601px) and (max-width 1000px) {
 584   .path-search .region-content ol {
 585     width: 560px;
 586   }
 587 }
 588 @media screen and (min-width: 1001px) {
 589   .path-search .region-content ol {
 590     width: 900px;
 591   }
 592 }
 593
 594 .path-search .region-content ol {
 595   margin: 0 auto;
 596   padding-left: 0;
 597   overflow: auto;
 598 }
 599
 600 .path-search .region-content li {
 601   width: 280px;
 602   height: 280px;
 603   margin: 0px auto;
 604   padding: 10px;
 605
 606   float: left;
 607
 608   list-style: none;
 609   overflow: hidden;
 610 }
 611
 612 .path-search .region-content li h3 {
 613   text-align: center;
 614 }
 615
 616 .path-search .region-content li .search-image {
 617   width: 100px;
 618   height: 100px;
 619
 620   margin: 0 auto;
 621
 622   display: flex;
 623   align-items: center;
 624 }
 625
 626 .path-search .region-content li img {
 627 }
 628
 629
 630 /* Footer */
 631
 632
 633 .footer {
 634   background: #333;
 635   color: #FFF;
 636 }
 637
 638 /* full page width for footer */
 639 .footer {
 640   width: 100%;
 641 }
 642
 643 .footer a { color: #edd400; }
 644
 645 .footer a:hover { color: #FFF; }
 646
 647 .footer h4 { font-weight: bold; }
 648
 649 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
 650
 651 #fsf-logo-footer { margin-bottom: 10px; }
 652
 653 @media print { #fsf-logo-footer { filter: invert(100%) } }
 654