X-Git-Url: https://vcs.fsf.org/?p=ryf-theme.git;a=blobdiff_plain;f=css%2Fstyle.css;h=7018a398468d9d5b876c2c9fbec5c0fe35009f15;hp=b13b300e89bbf4d64124a9352c44f28ae455f08b;hb=dbd9476ae5e8a4792e4a14063c5309c326577cee;hpb=2cbded31f6ca550d622b14d1db6d57bb43a223d5 diff --git a/css/style.css b/css/style.css index b13b300..7018a39 100644 --- a/css/style.css +++ b/css/style.css @@ -3,7 +3,7 @@ * your custom CSS modifications here. */ -body { margin: 0; } +body { margin: 0; min-width: 320px; } a { transition: 0.3s; } @@ -13,15 +13,12 @@ a { transition: 0.3s; } border: none; border-radius: 0px; box-sizing: content-box; - display: flex; - flex-direction: column-reverse; align-items: center; margin-bottom: 100px; min-height: 100px; } .navbar-header, #navbar-collapse { - width: 95%; max-width: 1150px; padding: 0; margin: 0 auto; @@ -29,40 +26,38 @@ a { transition: 0.3s; } overflow: hidden; } -.navbar-default .navbar-toggle { z-index: 999; } +.navbar-default .navbar-toggle { display: none; } .navbar-header { position: absolute; top: 5px; } -.navbar-brand { text-indent: -1000px; } +.navbar-brand { display: none; } #block-ryf-main-menu .navbar-nav { margin-left: 180px; } +.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, -.navbar-default .navbar-nav>li>a { +.navbar-default .navbar-nav > li > a { color: #FFF; + background: #000; border-bottom: 2px solid transparent; + padding-bottom: 10px; + margin-bottom: 5px; } -.navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a, -.navbar-default .navbar-nav>li>a:hover { +.navbar-default .navbar-nav > .active > a:hover, +.navbar-default .navbar-nav > li > a:hover { color: #edd400; border-bottom: 2px solid #edd400; padding-bottom: 5px; - background: #000; - margin-bottom: 5px; -} - -#block-bootstrap-main-menu { - margin-left: 200px; - width: 100%; + margin-bottom: 10px; } .page-header { - border: 2px solid #000; + border-bottom: 2px solid #000; font-size: 2em; } @@ -71,6 +66,37 @@ a { transition: 0.3s; } float: right; } +@media screen and (min-width: 520px) and (max-width: 599px) { + .logo img { margin-left: 50px; } + #block-ryf-main-menu .navbar-nav { margin-left: 230px; } +} + +@media screen and (min-width: 600px) and (max-width: 767px) { + .logo img { margin-left: 100px; } + #block-ryf-main-menu .navbar-nav { margin-left: 280px; } +} + +@media screen and (max-width: 767px) { + .logo img { height: 150px; margin-top: 25px; } + .navbar-default { min-height: 230px; margin-bottom: 30px; } + #block-ryf-main-menu .navbar-nav { max-width: 130px; } +} + +@media screen and (min-width: 768px) { + .navbar-nav { margin-top: 40px; } +} + +/* Selectors */ + +@media screen and (min-width: 768px) { + .form-inline .form-item .select-wrapper { + display: block; + } + .form-inline .form-actions { + margin-top: 21px; + } +} + /* RYF List */ .ryf-list { @@ -95,6 +121,7 @@ a { transition: 0.3s; } .ryf-list .field--type-image { width: 100%; + height: 150px; background: #fff; border-radius: 10px; display: flex; @@ -103,7 +130,6 @@ a { transition: 0.3s; } .ryf-list img { max-width: 150px; - min-height: 150px; overflow: hidden; } @@ -147,6 +173,191 @@ a { transition: 0.3s; } } +/* Vendors list */ + +@media screen and (max-width: 767px) { + .vendors-list-row { + margin: 0px auto; + } + + .vendors-list { + margin-bottom: 40px; + list-style: none; + } + + .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; + } + + .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 */ + + +@media screen and (max-width: 767px) { + .path-products #block-views-block-categories-categories-block { display: none; } +} + + +/* 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; +} + +@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; + } + +} + + /* Footer */ .footer { @@ -154,6 +365,11 @@ a { transition: 0.3s; } color: #FFF; } +/* full page width for footer */ +.footer { + width: 100%; +} + .footer a { color: #edd400; } .footer a:hover { color: #FFF; } @@ -162,3 +378,7 @@ a { transition: 0.3s; } .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; } +#fsf-logo-footer { margin-bottom: 10px; } + +@media print { #fsf-logo-footer { filter: invert(100%) } } +