-#big-cite {
+.big-cite {
background-color: #444;
color: white;
padding: 0;
margin: 0;
- background-size: 100%;
- background-position: 50% 68%;
- background-repeat: repeat-y;
+ background-size: cover;
+ background-position: 50% 50%;
- background-image: url(/static/img/backdrop/book-drawer2.jpg);
+ background-image: url(/static/img/backdrop/book-drawer-315.jpg);
- @media screen and (min-width: 62.5em) {
- background-image: url(/static/img/backdrop/book-drawer2.jpg);
- }
+ .cite-box, .cite-box-text, .cite-text {
+ box-sizing: border-box;
+ //@include size(padding, 46px 10px 48px 0);
+ padding:
+ 46/975*100vw
+ 40/975*100vw
+ 48/975*100vw
+ 0;
- .cite {
- @include size(padding, 46px 10px 48px 0);
background: none;
color: white;
- @media screen and (min-width: 30em) {
- @include size(padding-right, 40px);
+ @media screen and (min-width: 62.5em) {
+ padding: 46px 40px 48px 0;
}
.vip {
- @include size(margin-left, 10px);
- @include size(margin-top, 2.5px);
- @include size(margin-bottom, 5px);
- @include size(font-size, 11px);
-
- @media screen and (min-width: 16em) {
- padding-left: 10%;
- @include size(margin-left, -18px);
- }
+ padding-left: 10%;
+ margin:
+ 2.5/975*100vw
+ 0
+ 5/975*100vw
+ 10/975*100vw;
+
+ font-size: 11/975 * 100vw;
@media screen and (min-width: 62.5em) {
- float: left;
- padding-left: 0;
- @include size(margin-left, 16px);
- text-align: right;
- @include size(width, 147px);
+ margin: 2.5px 0 5px 10px;
+ font-size: 11px;
}
}
.cite-body {
- @include size(margin, .5px);
- @include size(font-size, 20px);
+ margin: .5 /975 * 100vw;
+ font-size: (30 / 975) * 100vw;
line-height: 1.16em;
- @media screen and (min-width: 30em) {
- @include size(font-size, 30px);
+ @media screen and (min-width: 62.5em) {
+ font-size: 30px;
+ margin: .5px;
}
}
.source {
- @include size(margin-top, 16px);
- @include size(margin-bottom, 16px);
- @include size(margin-right, 2px);
- @include size(font-size, 12px);
+ margin: 16/975*100vw 2/975*100vw 16/975*100vw 0;
+ font-size: 12/975*100vw;
+ @media screen and (min-width: 62.5em) {
+ margin: 16px 2px 16px 0;
+ font-size: 12px;
+ }
}
/* Make cite body and source slide to the left. */
.cite-body, .source {
- @include size(margin-left, 10px);
-
- @media screen and (min-width: 16em) {
- padding-left: 21.9%;
- @include size(margin-left, -38px);
- }
+ padding-left: 21.9%;
+ margin-left: -38/975*100vw;
@media screen and (min-width: 62.5em) {
- padding-left: 0;
- @include size(margin-left, 175px);
+ @include size(margin-left, -38px);
}
}
}
}
- /* a long cite displays smaller */
- .cite-small .cite-body {
- @include size(font-size, 16px);
- @media screen and (min-width: 30em) {
- @include size(font-size, 20px);
+
+ .cite-text {
+ .vip {
+ float: left;
+ padding-left: 0;
+ margin-left: 16/975*100vw;
+ text-align: right;
+ width: 147/975*100vw;
+ }
+ .cite-body, .source {
+ padding-left: 0;
+ margin-left: 175/975*100vw;
+ }
+
+ @media screen and (min-width: 62.5em) {
+ .vip {
+ @include size(margin-left, 16px);
+ @include size(width, 147px);
+ }
+ .cite-body, .source {
+ @include size(margin-left, 175px);
+ }
+
}
}
- h2 {
- margin: 0;
- @include size(font-size, 11px);
- color: #575c63;
- }
-}
+ .cite-box-text {
+ padding-left: (975 / 2 + 45) /975 * 100vw;
-#promo-box {
- @include size(margin-top, 16px);
+ @media screen and (min-width: 62.5em) {
+ padding-left: 975px / 2 + 45px;
+ }
+ }
- @media screen and (min-width: 33em) {
- float: right;
- @include size(margin-top, -51px);
- @include size(width, 320px);
+ /* a long cite displays smaller */
+ .cite-text-small .cite-body {
+ //@include size(font-size, 16px);
+ font-size: (20/975) * 100vw;
+ @media screen and (min-width: 62.5em) {
+ @include size(font-size, 20px);
+ }
}
- h1 {
- @include size(padding, 20px 5px 0 10px);
- @include size(height, 31px);
+ h2 {
margin: 0;
- background: #191919;
- color: white;
- @include mono;
- @include size(font-size, 13px);
- font-weight: normal;
-
- @media screen and (min-width: 33em) {
- @include size(padding-left, 25px);
- @include size(padding-right, 25px);
- }
+ @include size(font-size, 11px);
+ color: #575c63;
}
+}
- #promo-box-body {
- @include size(padding, 20px 5px);
- @include size(border-bottom, 2px solid #efefef);
- background: #efefef;
- @media screen and (min-width: 33em) {
- @include size(padding-left, 28px);
- @include size(padding-right, 28px);
- }
+#main-library {
+ .main-library-row {
+ position: relative;
- @media screen and (min-width: 62.5em) {
- @include size(height, 300px);
- }
+ .covers {
+ white-space: nowrap;
+ width: 90%;
+ overflow-x: hidden;
+ padding-bottom: 2px;
- a {
- display: block;
- color: #6c6c6c;
}
- p {
- margin-top: 0;
- @include size(font-size, 12px);
- line-height: 1.55em;
- color: #6c6c6c;
- }
- h2, h3 {
- color: #0d777e;
- @include size(font-size, 11px);
- @include size(height, 27.5px);
- margin: 0;
- @include mono;
- font-weight: normal;
-
- &:after {
- content: " >";
- }
+ .note {
+ position: absolute;
+ right: 0;
+ top: 1px;
+ width: 139px;
+ height: 289px - 22px;
}
}
}
}
}
}
+
+.more {
+ display: block;
+ margin-top: .5em;
+}
+
+
+section {
+ margin-top: 2em;
+}
+
+
+.tag-box-section {
+ @media screen and (min-width: 768px) {
+ display: inline-block;
+ width: 48%;
+ margin-right: 2%;
+ vertical-align: top;
+
+ .tag-box {
+ display: block;
+ width: 100%;
+ }
+ }
+}
+
+#main-theme {
+ .white-box {
+ position: relative;
+
+ .cite-text, .cite-text-small {
+ display: none;
+
+ @media screen and (min-width: 768px) {
+ display: block;
+ position: absolute;
+ right: 1em;
+ top: 7em;
+ background: #F7F7F7;
+ width: 200px;
+ padding-left: 20px;
+ }
+
+ @media screen and (min-width: 1024px) {
+ width: 340px;
+ padding-left: 80px;
+ }
+ }
+ }
+}
+
+
+.carousel {
+ position: relative;
+ width: 100%;
+ height: 315/975*100vw;
+ overflow: hidden;
+
+ @media screen and (min-width: 62.5em) {
+ width: 975px;
+ height: 315px;
+ }
+
+ .cycle-prev {
+ left: 0;
+ &::after {
+ content: "◀";
+ }
+ }
+ .cycle-next {
+ right: 0;
+ &::after {
+ content: "▶";
+ }
+ }
+
+ .cycle-prev, .cycle-next {
+ position: absolute;
+ top: 50/975 * 100vw;
+ bottom: 50/975 * 100vw;
+ width: 15%;
+ z-index: 1000;
+ background: black;
+ color: white;
+ opacity: 0;
+
+ @media screen and (min-width: 62.5em) {
+ top: 50px;
+ bottom: 50px;
+ }
+
+ &::after {
+ top: 50/975 * 100vw;
+ bottom: 50/975 * 100vw;
+ font-size: 100/975*100vw;
+ display: block;
+ line-height: (315-100)/975*100vw;
+ text-align: center;
+ cursor: pointer;
+
+ @media screen and (min-width: 62.5em) {
+ font-size: 100px;
+ line-height: 315px - 100px;
+ top: 50px;
+ bottom: 50px;
+ }
+ }
+ &:hover {
+ opacity: .33;
+ }
+ }
+}
+
+
+.cycle-pager {
+ text-align: center;
+ width: 100%;
+ z-index: 500;
+ position: absolute;
+ bottom: 0;
+ overflow: hidden;
+
+ span {
+ font-family: arial;
+ font-size: 64 /975*100vw;
+ width: 32 /975*100vw;
+ height: 32 /975*100vw;
+ display: inline-block;
+ color: #ddd;
+ cursor: pointer;
+
+ text-shadow: 0px 0px 5px rgba(0,0,0,0.75);
+
+ @media screen and (min-width: 62.5em) {
+ font-size: 64px;
+ width: 32px;
+ height: 32px;
+ }
+
+ &.cycle-pager-active {
+ color: #018189;
+ }
+ }
+
+ > * {
+ cursor: pointer;
+ }
+}
fnp / wolnelektury.git / blobdiff