From a48bd8b451fdffb1f07239a39fdb364a611b6c9b Mon Sep 17 00:00:00 2001 From: Andrew Engelbrecht Date: Wed, 6 Nov 2019 14:43:24 -0500 Subject: [PATCH] wrapped css elements in "@media screen {...}" this removes theming from the print version of the site. this makes the print version much cleaner. --- css/style.css | 995 ++++++++++++++++++++++++++------------------------ 1 file changed, 520 insertions(+), 475 deletions(-) diff --git a/css/style.css b/css/style.css index 38b24df..c69bcb2 100644 --- a/css/style.css +++ b/css/style.css @@ -29,168 +29,180 @@ /* Universal */ -body { - font-family: "Lato", Helvetica, Arial, sans-serif; - margin: 0; - min-width: 320px; -} +@media screen { + + body { + font-family: "Lato", Helvetica, Arial, sans-serif; + margin: 0; + min-width: 320px; + } + + a { transition: 0.3s; } -a { transition: 0.3s; } + section { position: relative; } -section { position: relative; } +} /* etcetera */ -.visually-hidden.focusable:focus { - position: absolute !important; - background: #000; +@media screen { + + .visually-hidden.focusable:focus { + position: absolute !important; + background: #000; + color: #FFF; + padding: 0.5em; + z-index: 9999; + } + + .main-container { min-height: 50vh; } + + h2.block-title { + background: #337AB7; color: #FFF; padding: 0.5em; - z-index: 9999; -} - -.main-container { min-height: 50vh; } + } -h2.block-title { - background: #337AB7; - color: #FFF; - padding: 0.5em; -} + h2.block-title a:visited, + h2.block-title a:focus, + h2.block-title a:active, + h2.block-title a { + color: #FFF; + } -h2.block-title a:visited, -h2.block-title a:focus, -h2.block-title a:active, -h2.block-title a { - color: #FFF; -} + h2.block-title a:hover { + color: #FFF; + } -h2.block-title a:hover { - color: #FFF; -} + .feed-icons a { + background: url('../images/rss.svg') top left no-repeat; + background-size: contain; + height: 20px; + overflow: hidden; + display: block; + text-indent: 25px; + font-size: 1em; + width: fit-content; + margin-top: 1em; + float: right; + } -.feed-icons a { - background: url('../images/rss.svg') top left no-repeat; - background-size: contain; - height: 20px; - overflow: hidden; - display: block; - text-indent: 25px; - font-size: 1em; - width: fit-content; - margin-top: 1em; - float: right; -} + .view-display-id-news_page .feed-icons a { + margin-top: -30px; + } -.view-display-id-news_page .feed-icons a { - margin-top: -30px; -} + .more-link { + border: 1px solid #ddd; + border-radius: .5em; + padding: .5em; + text-align: center; + width: 50%; + margin: 0 auto; + font-weight: bold; + margin-top: 2em; + } -.more-link { - border: 1px solid #ddd; - border-radius: .5em; - padding: .5em; - text-align: center; - width: 50%; - margin: 0 auto; - font-weight: bold; - margin-top: 2em; -} + .more-link:hover { + background: #EEE; + color: #000; + } -.more-link:hover { - background: #EEE; - color: #000; -} + .block-views { + margin-top: 20px; + } -.block-views { - margin-top: 20px; } /* Navbar */ -.navbar-default { - background: #000; - color: #FFF; - border: none; - border-radius: 0px; - box-sizing: content-box; - align-items: center; - min-height: 100px; -} +@media screen { -.navbar-header, -#navbar-collapse { - max-width: 1150px; - padding: 0; - margin: 0 auto; - border: none; - overflow: hidden; -} + .navbar-default { + background: #000; + color: #FFF; + border: none; + border-radius: 0px; + box-sizing: content-box; + align-items: center; + min-height: 100px; + } -.navbar-default .navbar-toggle { display: none; } + .navbar-header, + #navbar-collapse { + max-width: 1150px; + padding: 0; + margin: 0 auto; + border: none; + overflow: hidden; + } -.navbar-header { - position: absolute; - top: 5px; -} + .navbar-default .navbar-toggle { display: none; } -.navbar-brand { display: none; } + .navbar-header { + position: absolute; + top: 5px; + } -#block-ryf-main-menu .navbar-nav { margin-left: 195px; } + .navbar-brand { display: none; } -.navbar-default .navbar-nav > li > a:focus { - outline: none; -} + #block-ryf-main-menu .navbar-nav { margin-left: 195px; } -.navbar-default .navbar-nav > li > a, -.navbar-default .navbar-nav > li > a:link, -.navbar-default .navbar-nav > li > a:visited { - color: #FFF; - background: #000; - border-bottom: 2px solid transparent; - padding-bottom: 10px; - margin-bottom: 5px; -} + .navbar-default .navbar-nav > li > a:focus { + outline: none; + } -.navbar-default .navbar-nav > li > a:focus, -.navbar-default .navbar-nav > li.active > a:hover, -.navbar-default .navbar-nav > li > a:hover { - color: #edd400; - background: #000; - border-bottom: 2px solid #edd400; - padding-bottom: 5px; - margin-bottom: 10px; -} + .navbar-default .navbar-nav > li > a, + .navbar-default .navbar-nav > li > a:link, + .navbar-default .navbar-nav > li > a:visited { + color: #FFF; + background: #000; + border-bottom: 2px solid transparent; + padding-bottom: 10px; + margin-bottom: 5px; + } -.navbar-default .navbar-nav > li > a.is-active { - border-bottom: 2px solid #FFF; - background: #000; - padding-bottom: 5px; - margin-bottom: 10px; -} + .navbar-default .navbar-nav > li > a:focus, + .navbar-default .navbar-nav > li.active > a:hover, + .navbar-default .navbar-nav > li > a:hover { + color: #edd400; + background: #000; + border-bottom: 2px solid #edd400; + padding-bottom: 5px; + margin-bottom: 10px; + } -.page-header { - border-bottom: 2px solid #000; - font-size: 2em; -} + .navbar-default .navbar-nav > li > a.is-active { + border-bottom: 2px solid #FFF; + background: #000; + padding-bottom: 5px; + margin-bottom: 10px; + } -.region-header .search-block-form { - width: 300px; - float: right; -} + .page-header { + border-bottom: 2px solid #000; + font-size: 2em; + } + + .region-header .search-block-form { + width: 300px; + float: right; + } + + nav .search-block-form { + position: absolute; + width: 300px; + right: 10%; + top: 30px; + } -nav .search-block-form { - position: absolute; - width: 300px; - right: 10%; - top: 30px; } @media screen and (max-width: 767px) { #block-ryf-main-menu .navbar-nav { max-width: 130px; } } - + .region-navigation-collapsible .search-block-form { float: right; width: 210px; @@ -215,8 +227,11 @@ nav .search-block-form { } } -.maintenance-page #navbar { - margin-bottom: 120px; +@media screen { + + .maintenance-page #navbar { + margin-bottom: 120px; + } } @@ -234,162 +249,170 @@ nav .search-block-form { /* News */ -.view-news article { - padding: 0.5em; - margin: 0 10%; -} +@media screen { -.view-news p { - line-height: 1.5em; - font-size: 1.1em; -} + .view-news article { + padding: 0.5em; + margin: 0 10%; + } -.view-news .node-readmore { - padding: 0.5em 1em; - border: 1px solid #DDD; - border-radius: 0.5em; - float: right; -} + .view-news p { + line-height: 1.5em; + font-size: 1.1em; + } -.view-news .node-readmore:hover { - background: #EEE; - color: #000; -} + .view-news .node-readmore { + padding: 0.5em 1em; + border: 1px solid #DDD; + border-radius: 0.5em; + float: right; + } + + .view-news .node-readmore:hover { + background: #EEE; + color: #000; + } + + .view-news footer { + color: #999; + padding: 0.5em; + text-align: right; + } -.view-news footer { - color: #999; - padding: 0.5em; - text-align: right; } /* RYF List */ -.ryf-list-row { - padding: 0; - margin: 0 auto; - overflow: auto; -} +@media screen { -.ryf-list { - float: left; - margin: 0; - padding: 0.5em; - position: relative; - list-style: none; -} + .ryf-list-row { + padding: 0; + margin: 0 auto; + overflow: auto; + } -.ryf-list article { - border: 1px solid #bbb; - border-radius: 5px; - padding: 1em; - box-shadow: 2px 2px 5px #ddd; - transition: 0.3s; -} + .ryf-list { + float: left; + margin: 0; + padding: 0.5em; + position: relative; + list-style: none; + } -.ryf-list article:hover { - box-shadow: 0px 0px 5px #aaa; -} + .ryf-list article { + border: 1px solid #bbb; + border-radius: 5px; + padding: 1em; + box-shadow: 2px 2px 5px #ddd; + transition: 0.3s; + } + + .ryf-list article:hover { + box-shadow: 0px 0px 5px #aaa; + } + + .ryf-list .field--type-image { + border: 1px solid #ddd; + border-left: 0px; + border-right: 0px; + background: #fff; + height: 150px; + width: 100%; + overflow: hidden; + border-radius: 5px; + position: relative; + text-align: center; + display: flex; + align-items: center; + } -.ryf-list .field--type-image { - border: 1px solid #ddd; - border-left: 0px; - border-right: 0px; - background: #fff; - height: 150px; - width: 100%; - overflow: hidden; - border-radius: 5px; - position: relative; - text-align: center; - display: flex; - align-items: center; -} + .ryf-list .field--type-image a { + display: inline-block; + margin: 0 auto; + } -.ryf-list .field--type-image a { - display: inline-block; - margin: 0 auto; -} + .ryf-list .field--type-image img { + width: auto; + max-height: 150px; + margin: 0 auto; + display: inline-block; + } -.ryf-list .field--type-image img { - width: auto; - max-height: 150px; - margin: 0 auto; - display: inline-block; -} + .ryf-list h2 { + text-align: left; + font-size: 1.5em; + line-height: 1.2em; + margin: 0; + padding: 0; + } -.ryf-list h2 { - text-align: left; - font-size: 1.5em; - line-height: 1.2em; - margin: 0; - padding: 0; -} + .ryf-list .field--name-body { + display: block; + border-radius: 5px; + width: 100%; + height: 0px; + margin-top: 0px; + z-index: 99; + position: relative; + background: #00000088; + color: white; + padding: 0em; + transition: 0.2s; + cursor: default; + overflow: hidden; + } -.ryf-list .field--name-body { - display: block; - border-radius: 5px; - width: 100%; - height: 0px; - margin-top: 0px; - z-index: 99; - position: relative; - background: #00000088; - color: white; - padding: 0em; - transition: 0.2s; - cursor: default; - overflow: hidden; -} + .ryf-list:hover .field--name-body { + height: 100px; + margin-top: -100px; + z-index: 99; + position: relative; + padding: 0.3em; + transition: 0.3s; + } -.ryf-list:hover .field--name-body { - height: 100px; - margin-top: -100px; - z-index: 99; - position: relative; - padding: 0.3em; - transition: 0.3s; -} + .ryf-list a { + color: #337AB7; + } -.ryf-list a { - color: #337AB7; -} + .ryf-list a:hover { + color: #000; + } -.ryf-list a:hover { - color: #000; -} + .ryf-list .list-inline li { + font-size: 0.9em; + border: 1px solid #ddd; + width: auto; + border-radius: 0.5em; + padding: 0.3em 0.5em; + margin-top: 5px; + float: right; + } -.ryf-list .list-inline li { - font-size: 0.9em; - border: 1px solid #ddd; - width: auto; - border-radius: 0.5em; - padding: 0.3em 0.5em; - margin-top: 5px; - float: right; -} + .ryf-list h2 a { + display: inline-block; + height: 55px; + width: 100%; + overflow: hidden; + position: relative; + } -.ryf-list h2 a { - display: inline-block; - height: 55px; - width: 100%; - overflow: hidden; - position: relative; -} + .ryf-list h2 a:after { + content: '(...)'; + float: right; + display: block; + position: absolute; + bottom:5px; + right: 2px; + font-size: 0.8em; + } -.ryf-list h2 a:after { - content: '(...)'; - float: right; - display: block; - position: absolute; - bottom:5px; - right: 2px; - font-size: 0.8em; -} + .ryf-list .list-inline li:hover { + background: #eee; + } -.ryf-list .list-inline li:hover { - background: #eee; } @media screen and (min-width: 450px) and (max-width: 659px) { @@ -426,44 +449,48 @@ nav .search-block-form { /* Vendors list */ -.vendors-list-row { - padding: 10px; - margin: 0 auto; - overflow: auto; -} +@media screen { -.vendors-list { - margin-bottom: 40px; - list-style: none; + .vendors-list-row { + padding: 10px; + margin: 0 auto; + overflow: auto; + } - overflow: auto; -} + .vendors-list { + margin-bottom: 40px; + list-style: none; -.vendors-list .views-field-field-icon { - width: 220px; - height: 220px; + overflow: auto; + } - display: flex; - align-items: center; + .vendors-list .views-field-field-icon { + width: 220px; + height: 220px; - margin: 0px auto 20px auto; -} + display: flex; + align-items: center; -.vendors-list .views-field-field-icon img { - margin: 0 auto; -} + margin: 0px auto 20px auto; + } -.vendors-list .views-field-name, -.vendors-list .views-field-field-description-summary, -.vendors-list .views-field-description__value { - max-width: 300px; - margin: 0 auto 10px auto; -} + .vendors-list .views-field-field-icon img { + margin: 0 auto; + } + + .vendors-list .views-field-name, + .vendors-list .views-field-field-description-summary, + .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; + } -.vendors-list .views-field-name { - font-weight: bold; - font-size: 18px; - text-align: center; } @@ -478,17 +505,21 @@ nav .search-block-form { /* Vendor and Category taxonomy term pages */ -.view-taxonomy-term .view-header .field--name-field-icon img { - margin: 0 auto; -} +@media screen { -.view-filters { - clear: left; -} + .view-taxonomy-term .view-header .field--name-field-icon img { + margin: 0 auto; + } + + .view-filters { + clear: left; + } + + .view-taxonomy-term .view-header .field--name-field-vendor-support-link, + .view-taxonomy-term .view-header .field--name-field-vendor-support-email { + margin-top: 15px; + } -.view-taxonomy-term .view-header .field--name-field-vendor-support-link, -.view-taxonomy-term .view-header .field--name-field-vendor-support-email { - margin-top: 15px; } @media screen and (max-width: 559px) { @@ -566,98 +597,102 @@ nav .search-block-form { } } -.page-node-type-product .product .field--name-field-image { - padding: 10px; - - border: 1px solid #888; - border-radius: 10px; -} - -.page-node-type-product .product .field--name-field-image img { - margin: 0 auto; -} +@media screen { -.page-node-type-product .product .field--name-field-extra-images { - padding: 0 11px; - display: flex; - align-items: center; -} + .page-node-type-product .product .field--name-field-image { + padding: 10px; -.page-node-type-product .product .field--name-field-extra-images .field--item { - display: inline-block; - margin-right: 15px; - padding: 5px; -} -.page-node-type-product .product .field--name-field-extra-images .field--item:last-child { - margin-right: 0; -} + border: 1px solid #888; + border-radius: 10px; + } -.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; -} + .page-node-type-product .product .field--name-field-image img { + margin: 0 auto; + } -.page-node-type-product .product .field--name-field-categories .field--item { - display: list-item; - list-style: circle; - margin-left: 15px; -} + .page-node-type-product .product .field--name-field-extra-images { + padding: 0 11px; + display: flex; + align-items: center; + } -/* Mostly from Bootstrap 3 button CSS */ -.page-node-type-product .product .field--name-field-vendor-product-link a { - color: #fff; - background-color: #337ab7; - border-color: #2e6da4; + .page-node-type-product .product .field--name-field-extra-images .field--item { display: inline-block; - margin-bottom: 0; - font-weight: normal; - text-align: center; - white-space: nowrap; - vertical-align: middle; - -ms-touch-action: manipulation; - touch-action: manipulation; - cursor: pointer; - background-image: none; - border: 1px solid transparent; - padding: 6px 12px; - font-size: 14px; - line-height: 1.42857143; - border-radius: 4px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - text-decoration: none; -} - -#block-views-block-categories-categories-block ul { - margin: 0; padding: 0 10px; - list-style: none; -} - -#block-views-block-categories-categories-block li { - padding: 5px 10px; - border: 1px solid #DDD; - border-radius: 5px; - list-style: none; - margin: 5px 0; -} + margin-right: 15px; + padding: 5px; + } + .page-node-type-product .product .field--name-field-extra-images .field--item:last-child { + margin-right: 0; + } -#block-views-block-categories-categories-block li:hover { - background: #EEE; - color: #000; -} + .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; + } + + .page-node-type-product .product .field--name-field-categories .field--item { + display: list-item; + list-style: circle; + margin-left: 15px; + } + + /* Mostly from Bootstrap 3 button CSS */ + .page-node-type-product .product .field--name-field-vendor-product-link a { + color: #fff; + background-color: #337ab7; + border-color: #2e6da4; + display: inline-block; + margin-bottom: 0; + font-weight: normal; + text-align: center; + white-space: nowrap; + vertical-align: middle; + -ms-touch-action: manipulation; + touch-action: manipulation; + cursor: pointer; + background-image: none; + border: 1px solid transparent; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + border-radius: 4px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + text-decoration: none; + } + + #block-views-block-categories-categories-block ul { + margin: 0; padding: 0 10px; + list-style: none; + } + + #block-views-block-categories-categories-block li { + padding: 5px 10px; + border: 1px solid #DDD; + border-radius: 5px; + list-style: none; + margin: 5px 0; + } + + #block-views-block-categories-categories-block li:hover { + background: #EEE; + color: #000; + } + + #block-views-block-categories-categories-block a { + width: 100%; + display: block; + } -#block-views-block-categories-categories-block a { - width: 100%; - display: block; -} + /* product page colors */ + .page-node-type-product .product .field--name-field-image { + background-color: #fff; + border-color: #aaa; + } -/* product page colors */ -.page-node-type-product .product .field--name-field-image { - background-color: #fff; - border-color: #aaa; } @media screen and (max-width: 767px) { @@ -723,57 +758,61 @@ nav .search-block-form { /* News and Product Announcements */ -.page-node-type-product-announcement .page-header, -.page-node-type-product-announcement .tabs--primary, -.page-node-type-product-announcement .region-content, -.page-node-type-general-news-item .page-header, -.page-node-type-general-news-item .tabs--primary, -.page-node-type-general-news-item .region-content, -.page-node-type-page .page-header, -.page-node-type-page .tabs--primary, -.page-node-type-page .region-content, -.path-news .page-header, -.path-news .tabs--primary, -.path-news .region-content { - max-width: 800px; - margin: 0 auto; -} +@media screen { + + .page-node-type-product-announcement .page-header, + .page-node-type-product-announcement .tabs--primary, + .page-node-type-product-announcement .region-content, + .page-node-type-general-news-item .page-header, + .page-node-type-general-news-item .tabs--primary, + .page-node-type-general-news-item .region-content, + .page-node-type-page .page-header, + .page-node-type-page .tabs--primary, + .page-node-type-page .region-content, + .path-news .page-header, + .path-news .tabs--primary, + .path-news .region-content { + max-width: 800px; + margin: 0 auto; + } -/* don't apply above max-width rule to main page */ -.path-frontpage .page-header, -.path-frontpage .tabs--primary, -.path-frontpage .region-content { - max-width: 2000px; /* high number beyond the max */ -} + /* don't apply above max-width rule to main page */ + .path-frontpage .page-header, + .path-frontpage .tabs--primary, + .path-frontpage .region-content { + max-width: 2000px; /* high number beyond the max */ + } -.page-node-type-page .page-header { - margin-bottom: 20px; -} + .page-node-type-page .page-header { + margin-bottom: 20px; + } -.path-news h2, -.block-views-blocknews-news-block article h2 { - font-size: 25px; -} + .path-news h2, + .block-views-blocknews-news-block article 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 .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-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-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; + } -.page-node-type-product-announcement .field--name-field-vendor-page, -.page-node-type-product-announcement .field--name-field-announced-products { - margin-bottom: 20px; } @@ -796,80 +835,86 @@ nav .search-block-form { } } -.path-search .region-content > ol { - margin: 0 auto; - padding-left: 0; - overflow: auto; -} +@media screen { + + .path-search .region-content > ol { + margin: 0 auto; + padding-left: 0; + overflow: auto; + } -.path-search .region-content > ol li { - width: 280px; - height: 320px; - margin: 0px auto; - padding: 10px; + .path-search .region-content > ol li { + width: 280px; + height: 320px; + margin: 0px auto; + padding: 10px; - float: left; + float: left; - list-style: none; - overflow: hidden; -} + list-style: none; + overflow: hidden; + } -.path-search .region-content > ol li h3 { - text-align: center; -} + .path-search .region-content > ol li h3 { + text-align: center; + } -.path-search .region-content > ol li .search-image { - width: 220px; - height: 220px; + .path-search .region-content > ol li .search-image { + width: 220px; + height: 220px; - margin: 0 auto; + margin: 0 auto; - display: flex; - align-items: center; -} + display: flex; + align-items: center; + } -.path-search .region-content > ol li p { - display: block; - width: 220px; - margin: 0 auto; -} + .path-search .region-content > ol li p { + display: block; + width: 220px; + margin: 0 auto; + } -.path-search .region-content > ol li img { + .path-search .region-content > ol li img { + } } /* Footer */ -.footer { - background: #333; - color: #FFF; -} +@media screen { -#email-signup .email-input { - color: #000; - display: block; - margin-bottom: 10px; -} -#email-signup .action-button { - color: #000; - display: block; -} + .footer { + background: #333; + color: #FFF; + } -/* full page width for footer */ + #email-signup .email-input { + color: #000; + display: block; + margin-bottom: 10px; + } + #email-signup .action-button { + color: #000; + display: block; + } -.footer { - width: 100%; -} + /* full page width for footer */ -.footer a { color: #edd400; } + .footer { + width: 100%; + } + + .footer a { color: #edd400; } -.footer a:hover { color: #FFF; } + .footer a:hover { color: #FFF; } -.footer h4 { font-weight: bold; } + .footer h4 { font-weight: bold; } -.footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; } + .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; } + #fsf-logo-footer { margin-bottom: 10px; } +} @media print { #fsf-logo-footer { filter: invert(100%) } } -- 2.25.1