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