X-Git-Url: https://vcs.fsf.org/?p=ryf-theme.git;a=blobdiff_plain;f=css%2Fstyle.css;h=129254477ea9f4796b66372fff0a815c6d644016;hp=3480ac010a1579b634f43184d6999c27e1913546;hb=dca6d2eaac68d2996dd11dfe180ebfd0d1087074;hpb=18f8d3b1396ddafbee4351bf712a93eac29a2eaa;ds=inline diff --git a/css/style.css b/css/style.css index 3480ac0..1292544 100644 --- a/css/style.css +++ b/css/style.css @@ -18,8 +18,8 @@ a { transition: 0.3s; } min-height: 100px; } -.navbar-header, #navbar-collapse { - width: 95%; +.navbar-header, +#navbar-collapse { max-width: 1150px; padding: 0; margin: 0 auto; @@ -81,17 +81,16 @@ a { transition: 0.3s; } .logo img { height: 150px; margin-top: 25px; } .navbar-default { min-height: 230px; margin-bottom: 30px; } #block-ryf-main-menu .navbar-nav { max-width: 130px; } - .search-block-form { margin-top: -50px; } - .page-header { margin-top: 50px; } } @media screen and (min-width: 768px) { .navbar-nav { margin-top: 40px; } - .search-block-form { margin-top: -80px; } } + /* Selectors */ + @media screen and (min-width: 768px) { .form-inline .form-item .select-wrapper { display: block; @@ -101,8 +100,16 @@ a { transition: 0.3s; } } } + /* RYF List */ + +.ryf-list-row ul { + padding: 0; + margin: 0 auto; + overflow: auto; +} + .ryf-list { float: left; margin: 0; @@ -124,16 +131,20 @@ a { transition: 0.3s; } } .ryf-list .field--type-image { - width: 100%; + width: 150px; + height: 150px; background: #fff; border-radius: 10px; display: flex; - justify-content: center; + align-items: center; +} + +.ryf-list .field--name-field-image { + margin: 0 auto; } .ryf-list img { max-width: 150px; - min-height: 150px; overflow: hidden; } @@ -176,6 +187,119 @@ a { transition: 0.3s; } text-align: right; } +.feed-icons { + margin-top: 15px; + clear: both; +} + +@media screen and (min-width: 450px) and (max-width: 659px) { + .ryf-list-row ul { + max-width: 600px; + } + .ryf-list { + max-width: 300px; + float: none; + margin: 0 auto; + } +} +@media screen and (min-width: 660px) and (max-width: 767px) { + .ryf-list-row ul { + max-width: 600px; + } + .ryf-list-row { + margin: 0 auto; + max-width: 660px; + } + .ryf-list { + max-width: 300px; + float: left; + } +} + + +/* Vendors list */ + + +.vendors-list-row ul { + padding: 10px; + margin: 0 auto; + overflow: auto; +} + +@media screen and (max-width: 767px) { + .vendors-list-row { + margin: 0px auto; + } + + .vendors-list { + margin-bottom: 40px; + list-style: none; + + overflow: auto; + } + + .vendors-list .views-field-field-icon { + width: 220px; + + margin: 0px auto 20px auto; + } + + .vendors-list .views-field-field-icon img { + margin: 0 auto; + } + + .vendors-list .views-field-name, + .vendors-list .views-field-description__value { + max-width: 300px; + margin: 0 auto 10px auto; + } + + .vendors-list .views-field-name { + font-weight: bold; + font-size: 18px; + text-align: center; + } + +} + +@media screen and (min-width: 768px) { + .vendors-list-row { + width: 600px; + margin: 0px auto; + } + + .vendors-list { + list-style: none; + clear: left; + + overflow: auto; + } + + .vendors-list .views-field-field-icon { + width: 220px; + height: 220px; + + margin-bottom: 40px; + + float: left; + } + + .vendors-list .views-field-field-icon img { + margin: 0 auto; + } + + .vendors-list .views-field-name, + .vendors-list .views-field-description__value { + margin-left: 300px; + } + + .vendors-list .views-field-name { + margin-bottom: 10px; + font-weight: bold; + font-size: 18px; + } +} + /* Sidebars */ @@ -185,8 +309,252 @@ a { transition: 0.3s; } } +/* Vendor and Category taxonomy term pages */ + + +.view-taxonomy-term .view-header .field--name-field-icon img { + margin: 0 auto; +} + +.view-filters { + clear: left; +} + +@media screen and (max-width: 559px) { + .view-taxonomy-term .view-header { + margin: 0 auto 40px auto; + + overflow: auto; + } + + .view-taxonomy-term .view-header .field--name-field-icon { + margin: 0 auto 20px auto; + width: 220px; + } + + .view-taxonomy-term .view-header .field--name-description { + max-width: 360px; + margin: 0 auto; + padding: 0 10px; + } + +} + +@media screen and (min-width: 560px) { + .view-taxonomy-term .view-header { + margin: 0 0 40px 0; + + overflow: auto; + } + + .view-taxonomy-term .view-header .field--name-field-icon { + width: 220px; + + float: left; + } + + .view-taxonomy-term .view-header .field--name-description { + margin-left: 260px; + } + +} + +@media screen and (min-width: 768px) { + .view-taxonomy-term .view-header { + max-width: 700px; + } +} + + +/* Product */ + + +@media screen and (max-width: 767px) { + .page-node-type-product .product { + max-width: 382px; + margin: 0 auto; + } +} + +@media screen and (min-width: 768px) and (max-width: 991px) { + .page-node-type-product .product { + width: 700px; + margin: 0 auto; + } +} + +@media screen and (min-width: 992px) { + .page-node-type-product .product { + width: 800px; + margin: 0 auto; + } +} + +.page-node-type-product .product .field--name-field-image { + padding: 10px; + + display: flex; + align-items: center; + + border: 1px solid #888; + border-radius: 10px; +} + +.page-node-type-product .product .field--name-field-extra-images { + padding: 5px; + + display: flex; + align-items: center; + + border: 1px solid #888; + border-radius: 10px; +} + +.page-node-type-product .product .field--name-field-extra-images .field--item { + display: inline-block; + margin: auto; + padding: 5px; +} + +.page-node-type-product .product .field--name-field-categories, +.page-node-type-product .product .field--name-field-vendor { + margin: 10px 10px 20px 0px; + padding: 10px; + border: 1px solid #888; + border-radius: 10px; +} + +.page-node-type-product .product .field--name-field-categories .field--item { + display: list-item; + list-style: circle; + margin-left: 15px; +} + +/* product page colors */ +.page-node-type-product .product .field--name-field-image { + background-color: #fff; + border-color: #aaa; +} +.page-node-type-product .product .field--name-field-extra-images { + background-color: #f3f3f3; + border-color: #aaa; +} +.page-node-type-product .product .field--name-field-categories { + background-color: #def; + border-color: #8ad; +} +.page-node-type-product .product .field--name-field-vendor { + background-color: #dfe; + border-color: #8da; +} + +@media screen and (max-width: 767px) { + .page-node-type-product .product .field--name-field-extra-images { + margin: 10px auto 0px auto; + } + + .page-node-type-product .product .field--name-body, + .page-node-type-product .product .field--name-field-vendor-product-link, + .page-node-type-product .product .field--name-field-certification-details, + .page-node-type-product .product .field--name-field-certification-date, + .page-node-type-product .product .field--name-field-source-code-links { + margin-bottom: 20px; + } + + .page-node-type-product .product .field--name-field-categories, + .page-node-type-product .product .field--name-field-vendor { + float: left; + } + + .page-node-type-product .product .field--name-body { + clear: both; + } +} + + +@media screen and (min-width: 768px) { + .page-node-type-product .product .field--name-field-image { + width: 382px; + float: left; + } + + .page-node-type-product .product .field--name-field-extra-images { + float: left; + clear: left; + + width: 382px; + margin-top: 10px; + } + + .page-node-type-product .product .field--name-body, + .page-node-type-product .product .field--name-field-vendor-product-link, + .page-node-type-product .product .field--name-field-certification-details, + .page-node-type-product .product .field--name-field-certification-date, + .page-node-type-product .product .field--name-field-source-code-links { + margin-left: 400px; + margin-bottom: 20px; + } + + .page-node-type-product .product .field--name-field-categories { + float: left; + clear: left; + } + + .page-node-type-product .product .field--name-field-vendor { + float: left; + } + +} + + +/* News and Product Announcements */ + + +.page-node-type-product-announcement .page-header, +.page-node-type-product-announcement .region-content, +.page-node-type-general-news-item .page-header, +.page-node-type-general-news-item .region-content, +.page-node-type-page .page-header, +.page-node-type-page .region-content, +.path-news .page-header, +.path-news .region-content { + max-width: 800px; + margin: 0 auto; +} + +.page-node-type-page .page-header { + margin-bottom: 20px; +} + +.path-news h2 { + font-size: 25px; +} + +.page-node-type-product-announcement .author, +.page-node-type-general-news-item .author { + margin: 10px 0 20px 0; + font-style: oblique; +} + +.page-node-type-product-announcement .field--name-body, +.page-node-type-general-news-item .field--name-body { + margin-bottom: 20px; +} + +.page-node-type-product-announcement .field--name-field-external-news-link, +.page-node-type-general-news-item .field--name-field-external-news-link { + margin-bottom: 20px; +} + +.page-node-type-product-announcement .field--name-field-vendor-page, +.page-node-type-product-announcement .field--name-field-announced-products { + margin-bottom: 20px; +} + + /* Footer */ + .footer { background: #333; color: #FFF;