one of many positioning fixes

[wolnelektury.git] / 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
old mode 100755 (executable)
new mode 100644 (file)
index 60af2d8..aee13d8
--- a/src/wolnelektury/static/scss/main/main_page.scss
+++ b/src/wolnelektury/static/scss/main/main_page.scss
@@ -4,13 +4,9 @@
     padding: 0;
     margin: 0;
     background-size: cover;
-    background-position: 50% 68%;
+    background-position: 50% 50%;
 
-    background-image: url(/static/img/backdrop/book-drawer2.jpg);
-
-    &.banner {
-        background: none;
-    }
+    background-image: url(/static/img/backdrop/book-drawer-315.jpg);
 
     .cite-box, .cite-box-text, .cite-text {
        box-sizing: border-box;
@@ -325,23 +321,33 @@ section {
 
     .cycle-prev, .cycle-next {
         position: absolute;
-        top: 0;
-        bottom: 0;
+        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/975*100vw;
+            line-height: (315-100)/975*100vw;
             text-align: center;
+            cursor: pointer;
 
             @media screen and (min-width: 62.5em) {
                 font-size: 100px;
-                line-height: 315px;
+                line-height: 315px - 100px;
+                top: 50px;
+                bottom: 50px;
             }
         }
         &:hover {
@@ -349,3 +355,39 @@ section {
         }
     }
 }
+
+
+.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;
+    }
+}