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