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