/* 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: 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;
-
- &.header {
- -webkit-column-break-after: avoid;
- break-after: avoid;
- }
- }
+ @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;
}
- .pager {
- font-size: 18px;
- margin-top: .5em;
- text-align: center;
+ p {
+ margin-top: 0;
- .current {
- font-weight: bold;
- color: black;
+ &.header {
+ -webkit-column-break-after: avoid;
+ break-after: avoid;
+ }
+ }
+
+ .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;
- width: 48%;
- margin-right: 1%;
- }
+ @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;}
}
fnp / wolnelektury.git / blobdiff