X-Git-Url: https://vcs.fsf.org/?p=ryf-theme.git;a=blobdiff_plain;f=css%2Fstyle.css;h=1fc35d66f4974d2646f93c04f8f344c3da15c076;hp=f56a65bcaf98cdedf346057758fb9578b88dc87a;hb=b6875de95ea478395e92c71fd1cabbe12a192c21;hpb=3cc6e9f47a5868b4e23f485ec47bae6328b2450d diff --git a/css/style.css b/css/style.css index f56a65b..1fc35d6 100644 --- a/css/style.css +++ b/css/style.css @@ -3,17 +3,52 @@ * your custom CSS modifications here. */ +/* 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: "FreeSans", Helvetica, Arial, sans-serif; + 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; +} + .region-content { min-height: 300px; } h2.block-title { @@ -25,14 +60,14 @@ h2.block-title { .feed-icons a { background: url('../images/rss.svg') top left no-repeat; background-size: contain; - width: 20px; height: 20px; overflow: hidden; - position: absolute; - top: 0px; - right: 10px; - margin-top: -50px; - text-indent: -1000px; + display: block; + text-indent: 25px; + font-size: 1em; + width: fit-content; + margin-top: 1em; + float: right; } .view-display-id-news_page .feed-icons a { @@ -47,9 +82,13 @@ h2.block-title { width: 50%; margin: 0 auto; font-weight: bold; + margin-top: 2em; } -.more-link:hover { border: 1px solid #000; } +.more-link:hover { + background: #EEE; + color: #000; +} .block-views { margin-top: 20px; @@ -57,7 +96,6 @@ h2.block-title { /* Navbar */ - .navbar-default { background: #000; color: #FFF; @@ -65,7 +103,6 @@ h2.block-title { border-radius: 0px; box-sizing: content-box; align-items: center; - margin-bottom: 100px; min-height: 100px; } @@ -87,18 +124,15 @@ h2.block-title { .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 > li > a, -.navbar-default .navbar-nav > .active > a, -.navbar-default .navbar-nav > li > a:link, -.navbar-default .navbar-nav > .active > a:link, -.navbar-default .navbar-nav > li > a:visited, -.navbar-default .navbar-nav > .active > a:visited { +.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; @@ -106,13 +140,19 @@ h2.block-title { margin-bottom: 5px; } -.navbar-default .navbar-nav > li > a:hover, -.navbar-default .navbar-nav > .active > a:hover, -.navbar-default .navbar-nav > li > a:active, -.navbar-default .navbar-nav > .active > a:active { - color: #337AB7; +.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; - border-bottom: 2px solid #337AB7; padding-bottom: 5px; margin-bottom: 10px; } @@ -127,24 +167,51 @@ h2.block-title { 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; + } } @@ -174,13 +241,15 @@ h2.block-title { 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; @@ -190,6 +259,12 @@ h2.block-title { 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; @@ -222,6 +297,8 @@ h2.block-title { margin: 0; padding: 0; padding-bottom: 1em; + height: 100px; + overflow: hidden; } .ryf-list a { @@ -498,6 +575,29 @@ h2.block-title { 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; @@ -702,7 +802,7 @@ h2.block-title { width: 100%; } -.footer a { color: #337AB7; } +.footer a { color: #DDCC00; } .footer a:hover { color: #FFF; }