X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/87e084d47c335cd6f0b3e91d614999f55d148044..db3bea808bc78fa2d1c6d0be6e0300003f31059c:/src/wolnelektury/static/scss/main/main_page.scss diff --git a/src/wolnelektury/static/scss/main/main_page.scss b/src/wolnelektury/static/scss/main/main_page.scss index 8323f0522..aee13d824 100755 --- a/src/wolnelektury/static/scss/main/main_page.scss +++ b/src/wolnelektury/static/scss/main/main_page.scss @@ -1,76 +1,72 @@ -#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); } } @@ -88,10 +84,46 @@ } } + + .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); + } + + } + } + + + .cite-box-text { + padding-left: (975 / 2 + 45) /975 * 100vw; + + @media screen and (min-width: 62.5em) { + padding-left: 975px / 2 + 45px; + } + } + /* a long cite displays smaller */ - .cite-small .cite-body { - @include size(font-size, 16px); - @media screen and (min-width: 30em) { + .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); } } @@ -241,7 +273,7 @@ section { .white-box { position: relative; - .cite { + .cite-text, .cite-text-small { display: none; @media screen and (min-width: 768px) { @@ -261,3 +293,101 @@ section { } } } + + +.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; + } +}