X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/4647cfaac7bf1193ae2280985f649abf3c1f470f..e15b74e6d8f736dfc8a6101e8b9c6583eebd7509:/src/wolnelektury/static/scss/main/base.scss diff --git a/src/wolnelektury/static/scss/main/base.scss b/src/wolnelektury/static/scss/main/base.scss old mode 100755 new mode 100644 index 210fd44c2..20b0a3544 --- a/src/wolnelektury/static/scss/main/base.scss +++ b/src/wolnelektury/static/scss/main/base.scss @@ -1,168 +1,240 @@ /* Basic layout */ html, body { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } - .clearboth { - clear: both; + clear: both; } - +.hide { + display: none !important; +} /* Basic colors and fonts */ body { - font-family: Georgia; - background: #f7f7f7; - color: black; + font-family: Gelasio, Georgia, serif; + background: #f7f7f7; + color: black; - @include size(font-size, 13px); + @include size(font-size, 15px); } a { - color: #0d7e85; - text-decoration: none; + color: #0d7e85; + text-decoration: none; - img { - border: 0; - } + img { + border: 0; + } } h1 { - @include size(font-size, 35px); - font-weight: normal; - @include size(margin-top, 14px); + @include size(font-size, 35px); + line-height: 1.1em; + font-weight: normal; + @include size(margin-top, 14px); - a { - color: inherit; - } + a { + color: inherit; + } } h2 { - @include size(font-size, 20px); - font-weight: normal; + @include size(font-size, 23px); + line-height: 1.1em; + font-weight: normal; } h3 { - @include size(font-size, 15px); - font-weight: normal; + @include size(font-size, 17px); + font-weight: normal; } - .normal-text { - line-height: 1.3em; - @include size(margin, 0 5px); + line-height: 1.3em; + @include size(margin, 0 5px); - @media screen and (min-width: 62.5em) { - margin: 0; - } + @media screen and (min-width: 62.5em) { + margin: 0; + } } .white-box { - @include size(padding, 10px); - @include white-box; + @include size(padding, 10px); + @include white-box; } - ul.plain { - list-style:none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; } - .theme-list-link { - @include mono; - @include size(font-size, 11px); + @include mono; + @include size(font-size, 11px); - &:after { - @include size(padding-left, 11px); - content: url("/static/img/arrow-teal.png"); - vertical-align: middle; - } + &:after { + @include size(padding-left, 11px); + content: url("/static/img/arrow-teal.png"); + vertical-align: middle; + } } - .left-column, .right-column { - @include size(max-width, 600px); + @include size(max-width, 600px); + @include size(padding-left, 1em); + @include size(padding-right, 1em); } + @media screen and (min-width: 62.5em) { - .left-column { - @include size(width, 470px); - float: left; - } - .right-column { - @include size(width, 470px); - float:right; - } + .left-column, .right-column { + @include size(width, 470px); + padding-left: 0; + padding-right: 0; + } + + .left-column { + float: left; + } + .right-column { + float: right; + } } .pagination { - display: block; - @include size(font-size, 12px); - @include size(padding, 6px); - text-align:center; + display: block; + @include size(font-size, 12px); + @include size(padding, 6px); + text-align: center; } .simple-hidden-initially { - display: none; + display: none; } - .plain-list-container { - margin: 2em 0; - .plain-list { - column-count: 2; - -moz-column-count: 2; - -webkit-column-count: 2; - - @media screen and (min-width: 768px) { - column-count: 4; - -moz-column-count: 4; - -webkit-column-count: 4; - } - @media screen and (min-width: 1024px) { - column-count: 5; - -moz-column-count: 5; - -webkit-column-count: 5; - } + margin: 2em 0; + .plain-list { + column-count: 2; + -moz-column-count: 2; + -webkit-column-count: 2; - p { - margin-top: 0; + @media screen and (min-width: 768px) { + column-count: 4; + -moz-column-count: 4; + -webkit-column-count: 4; + } + @media screen and (min-width: 1024px) { + column-count: 5; + -moz-column-count: 5; + -webkit-column-count: 5; + } - &.header { - -webkit-column-break-after: avoid; - break-after: avoid; - } - } + p { + margin-top: 0; - .initial-block { - display: inline-block; - } + &.header { + -webkit-column-break-after: avoid; + break-after: avoid; + } } - .pager { - font-size: 18px; - margin-top: .5em; - text-align: center; - - .current { - font-weight: bold; - color: black; + .initial-block { + display: inline-block; + width: 100%; + } + } + + .pager-center { + //width: 100%; + text-align: center; + } + + .pager { + display: inline-block; + padding-left: 0; + margin: 20px 0; + border-radius: 4px; + > li { + display: inline; + + > a, > span { + position: relative; + float: left; + padding: 6px 12px; + margin-left: -1px; + line-height: 1.42857143; + color: #337ab7; + text-decoration: none; + background-color: #fff; + border: 1px solid #ddd; + &:hover, &:focus { + color: #23527c; + background-color: #eee; + border-color: #ddd; } + } + &:first-child > a, + &:first-child > span { + margin-left: 0; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + &:last-child > a, + &:last-child > span { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + } + .current { + &, &:hover, &:focus { + z-index: 2; + color: #fff; + cursor: default; + background-color: #337ab7; + border-color: #337ab7; + } } + .disabled { + > a, span { + &, &:hover, &:focus { + color: #777; + cursor: not-allowed; + background-color: #fff; + border-color: #ddd; + } + } + } + } } - .tag-box { - display: block; + display: block; - @media screen and (min-width: 768px) { - display: inline-block; - vertical-align: top; - width: 48%; - margin-right: 1%; - @include size(margin-bottom, 10px); + @media screen and (min-width: 768px) { + display: inline-block; + vertical-align: top; + width: 48%; + margin-right: 1%; + @include size(margin-bottom, 10px); + } +} + +@media screen and (max-width: 62.5em) { + .mobile-margins {margin-left: 1em; margin-right: 1em;} +} + + +table.table { + margin: auto; + border-collapse: collapse; + + td, th { + border: 1px solid #444; + padding: .5em; + text-align: center; } }