X-Git-Url: https://vcs.fsf.org/?a=blobdiff_plain;f=css%2Fstyle.css;h=b18812c805a870d1349d8a689b45ed5556b3e89b;hb=489d2ac8af947a0d4ab3ac4299259557c9fddab0;hp=1fc35d66f4974d2646f93c04f8f344c3da15c076;hpb=b6875de95ea478395e92c71fd1cabbe12a192c21;p=ryf-theme.git diff --git a/css/style.css b/css/style.css index 1fc35d6..b18812c 100644 --- a/css/style.css +++ b/css/style.css @@ -7,21 +7,21 @@ @font-face { font-family: "Lato"; - url("../fonts/Lato-Regular.ttf") format('truetype'); + src: url("../fonts/Lato-Regular.ttf") format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: "Lato"; - url('../fonts/Lato-RegularItalic.ttf') format('truetype'); + src: url('../fonts/Lato-RegularItalic.ttf') format('truetype'); font-weight: 400; font-style: italic; } @font-face { font-family: "Lato"; - url('../fonts/Lato-Bold.ttf') format('truetype'); + src: url('../fonts/Lato-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } @@ -49,7 +49,7 @@ section { position: relative; } z-index: 9999; } -.region-content { min-height: 300px; } +.main-container { min-height: 50vh; } h2.block-title { background: #000; @@ -57,6 +57,17 @@ h2.block-title { padding: 0.5em; } +h2.block-title a:visited, +h2.block-title a:focus, +h2.block-title a:active, +h2.block-title a { + color: #DDCC00; +} + +h2.block-title a:hover { + color: #FFF; +} + .feed-icons a { background: url('../images/rss.svg') top left no-repeat; background-size: contain; @@ -227,6 +238,36 @@ nav .search-block-form { } } +/* News */ + +.view-news article { + padding: 0.5em; + margin: 0 10%; +} + +.view-news p { + line-height: 1.5em; + font-size: 1.1em; +} + +.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; +} + /* RYF List */ @@ -246,10 +287,8 @@ nav .search-block-form { } .ryf-list article { - border: 1px solid #ececec; + border: 1px solid #bbb; border-radius: 5px; - border-top: none; - border-left: none; padding: 1em; box-shadow: 2px 2px 5px #ddd; transition: 0.3s; @@ -259,71 +298,97 @@ nav .search-block-form { box-shadow: 0px 0px 5px #aaa; } -.ryf-list article:before { - content: ''; - float: left; - padding-top: 100%; -} - .ryf-list .field--type-image { - width: 150px; - height: 150px; + border: 1px solid #ddd; + border-left: 0px; + border-right: 0px; background: #fff; - border-radius: 10px; - display: flex; - align-items: center; -} - -.ryf-list .field--name-field-image { - margin: 0 auto 10px auto; -} - -.ryf-list img { - max-width: 150px; - max-height: 150px; - object-fit: contain; + height: 150px; + width: 100%; overflow: hidden; + border-radius: 5px; + position: relative; + text-align: center; } -.ryf-list img:hover { - border-radius: 0; +.ryf-list img { + width: auto; + height: 100%; + margin: auto 0; + display: inline-block; } .ryf-list h2 { text-align: left; font-size: 1.5em; - font-weight: 500; line-height: 1.2em; margin: 0; padding: 0; - padding-bottom: 1em; - height: 100px; +} + +.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 a { color: #337AB7; - text-decoration: none; } .ryf-list a:hover { color: #000; } -.ryf-list .node-readmore, -.ryf-list .tags, -.ryf-list .supplier { - width: 100%; - float: left; +.ryf-list .list-inline li { font-size: 0.9em; - border-top: 1px solid #ccc4c4; - margin-top: 5px; - padding-top: 5px; - color: #afadad; + border: 1px solid #ddd; + width: auto; + border-radius: 0.5em; + padding: 0.3em 0.5em; + position: absolute; + bottom: 15px; + right: 15px; } -.ryf-list .node-readmore { - text-align: right; +.ryf-list h2 a { + display: inline-block; + height: 55px; + 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 .list-inline li:hover { + background: #eee; } @media screen and (min-width: 450px) and (max-width: 659px) { @@ -351,6 +416,14 @@ nav .search-block-form { .auto-clear .col-xs-12:nth-child(odd){clear:left;} } +@media screen and (min-width: 55em) { + + .ryf-list article { + min-height: 270px + } + +} + /* Vendors list */ @@ -384,6 +457,7 @@ nav .search-block-form { } .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; @@ -424,6 +498,7 @@ nav .search-block-form { } .vendors-list .views-field-name, + .vendors-list .views-field-field-description-summary, .vendors-list .views-field-description__value { margin-left: 300px; } @@ -463,7 +538,6 @@ nav .search-block-form { @media screen and (max-width: 559px) { .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header { margin: 0 auto 40px auto; - overflow: auto; } @@ -473,6 +547,7 @@ nav .search-block-form { } .view-taxonomy-term .view-header .field--name-description, + .view-taxonomy-term .view-header .field--name-field-description-summary, .view-taxonomy-term .view-header .field--name-field-vendor-support-link, .view-taxonomy-term .view-header .field--name-field-vendor-support-email { max-width: 360px; @@ -485,17 +560,16 @@ nav .search-block-form { @media screen and (min-width: 560px) { .view-taxonomy-term.view-display-id-taxonomy_term_vendor .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, + .view-taxonomy-term .view-header .field--name-field-description-summary, .view-taxonomy-term .view-header .field--name-field-vendor-support-link, .view-taxonomy-term .view-header .field--name-field-vendor-support-email { margin-left: 260px; @@ -547,10 +621,8 @@ nav .search-block-form { .page-node-type-product .product .field--name-field-extra-images { padding: 5px; - display: flex; align-items: center; - border: 1px solid #888; border-radius: 10px; } @@ -651,7 +723,6 @@ nav .search-block-form { .page-node-type-product .product .field--name-field-extra-images { float: left; clear: left; - width: 382px; margin-top: 10px; } @@ -791,13 +862,13 @@ nav .search-block-form { /* Footer */ - .footer { background: #333; color: #FFF; } /* full page width for footer */ + .footer { width: 100%; }