X-Git-Url: https://vcs.fsf.org/?a=blobdiff_plain;f=css%2Fstyle.css;h=981214d7619c6c3695c8ff11a3950618ac439e40;hb=9d4869aa16c755960f475fefa0ec6e3605cbab4f;hp=6b4166f381cee15ab6ba03d9ae09b7446e1f247e;hpb=f12cbe51f706253dbf4f3fc68e10acbfb348be00;p=ryf-theme.git diff --git a/css/style.css b/css/style.css index 6b4166f..981214d 100644 --- a/css/style.css +++ b/css/style.css @@ -3,21 +3,91 @@ * your custom CSS modifications here. */ -body { margin: 0; min-width: 320px; } +/* Lato font */ + +@font-face { + font-family: "Lato"; + 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'); + font-weight: 400; + font-style: italic; +} + +@font-face { + font-family: "Lato"; + url('../fonts/Lato-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; +} + + +/* Universal */ + +body { + font-family: "Lato", Helvetica, Arial, sans-serif; + margin: 0; + min-width: 320px; +} a { transition: 0.3s; } +section { position: relative; } /* etcetera */ +.visually-hidden.focusable:focus { + position: absolute !important; + background: #000; + color: #FFF; + padding: 0.5em; + z-index: 9999; +} + +.main-container { min-height: 50vh; } -.feed-icons, -.more-link { - margin-top: 15px; - clear: both; +h2.block-title { + background: #000; + color: #FFF; + padding: 0.5em; +} + +.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; } + .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; } .block-views { @@ -26,7 +96,6 @@ a { transition: 0.3s; } /* Navbar */ - .navbar-default { background: #000; color: #FFF; @@ -34,7 +103,6 @@ a { transition: 0.3s; } border-radius: 0px; box-sizing: content-box; align-items: center; - margin-bottom: 100px; min-height: 100px; } @@ -56,11 +124,15 @@ a { transition: 0.3s; } .navbar-brand { display: none; } -#block-ryf-main-menu .navbar-nav { margin-left: 180px; } +#block-ryf-main-menu .navbar-nav { margin-left: 195px; } + +.navbar-default .navbar-nav > li > a:focus { + outline: none; +} -.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, +.navbar-default .navbar-nav > li > a:link, +.navbar-default .navbar-nav > li > a:visited { color: #FFF; background: #000; border-bottom: 2px solid transparent; @@ -68,11 +140,19 @@ a { transition: 0.3s; } margin-bottom: 5px; } -.navbar-default .navbar-nav > .active > a, -.navbar-default .navbar-nav > .active > a:hover, -.navbar-default .navbar-nav > li > a:hover { - color: #edd400; - border-bottom: 2px solid #edd400; +.navbar-default .navbar-nav > li > a:focus, +.navbar-default .navbar-nav > li.active > a:hover, +.navbar-default .navbar-nav > li > a:hover { + color: #DDCC00; + background: #000; + border-bottom: 2px solid #DDCC00; + padding-bottom: 5px; + margin-bottom: 10px; +} + +.navbar-default .navbar-nav > li > a.is-active { + border-bottom: 2px solid #FFF; + background: #000; padding-bottom: 5px; margin-bottom: 10px; } @@ -87,24 +167,51 @@ 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; } -} - +nav .search-block-form { + position: absolute; + width: 300px; + right: 10%; + top: 30px; +} + +/* + * @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; } + + .navbar-default { + margin-bottom: 100px; + } + .navbar-nav { + margin-top: 40px; + } + .region-header .breadcrumb { + position: absolute; + top: -70px; + left: 200px; + background: none; + } + .region-navigation-collapsible .search-block-form { + float: right; + padding-top: 30px; + width: 210px; + } } @@ -120,6 +227,36 @@ a { transition: 0.3s; } } } +/* 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 */ @@ -134,13 +271,15 @@ a { transition: 0.3s; } float: left; margin: 0; padding: 0.5em; - position:relative; + position: relative; list-style: none; } .ryf-list article { border: 1px solid #ececec; border-radius: 5px; + border-top: none; + border-left: none; padding: 1em; box-shadow: 2px 2px 5px #ddd; transition: 0.3s; @@ -150,6 +289,12 @@ a { transition: 0.3s; } 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; @@ -182,10 +327,12 @@ a { transition: 0.3s; } margin: 0; padding: 0; padding-bottom: 1em; + height: 100px; + overflow: hidden; } .ryf-list a { - color: #118991; + color: #337AB7; text-decoration: none; } @@ -231,6 +378,7 @@ a { transition: 0.3s; } max-width: 300px; float: left; } + .auto-clear .col-xs-12:nth-child(odd){clear:left;} } @@ -337,8 +485,13 @@ a { transition: 0.3s; } 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; +} + @media screen and (max-width: 559px) { - .view-taxonomy-term .view-header { + .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header { margin: 0 auto 40px auto; overflow: auto; @@ -349,16 +502,18 @@ a { transition: 0.3s; } width: 220px; } - .view-taxonomy-term .view-header .field--name-description { + .view-taxonomy-term .view-header .field--name-description, + .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; - margin: 0 auto; + margin: 15px auto 0 auto; padding: 0 10px; } } @media screen and (min-width: 560px) { - .view-taxonomy-term .view-header { + .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header { margin: 0 0 40px 0; overflow: auto; @@ -370,7 +525,9 @@ a { transition: 0.3s; } float: left; } - .view-taxonomy-term .view-header .field--name-description { + .view-taxonomy-term .view-header .field--name-description, + .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; } @@ -448,6 +605,29 @@ a { transition: 0.3s; } margin-left: 15px; } +#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; +} + /* product page colors */ .page-node-type-product .product .field--name-field-image { background-color: #fff; @@ -641,7 +821,6 @@ a { transition: 0.3s; } /* Footer */ - .footer { background: #333; color: #FFF; @@ -652,7 +831,7 @@ a { transition: 0.3s; } width: 100%; } -.footer a { color: #edd400; } +.footer a { color: #DDCC00; } .footer a:hover { color: #FFF; }