Accesibility fixes from the report.

[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 7a9ab6a..aee13d8
--- a/src/wolnelektury/static/scss/main/main_page.scss
+++ b/src/wolnelektury/static/scss/main/main_page.scss
@@ -1,80 +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);
-    }
-
-    &.banner {
-        background: none;
-    }
+    .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);
             }
         }
 
@@ -92,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);
         }
     }
@@ -245,7 +273,7 @@ section {
     .white-box {
         position: relative;
 
-        .cite {
+        .cite-text, .cite-text-small {
             display: none;
 
             @media screen and (min-width: 768px) {
@@ -265,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;
+    }
+}