fnp / wolnelektury.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
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 ddce4fc..aee13d8
--- 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-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;
 
         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 {
         }
 
         .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) {
 
             @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 {
             }
         }
 
         .cite-body {
-            @include size(margin, .5px);
-            @include size(font-size, 20px);
+           margin: .5 /975 * 100vw;
+           font-size: (30 / 975) * 100vw;
             line-height: 1.16em;
 
             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 {
             }
         }
 
         .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 {
         }
 
         /* 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) {
 
             @media screen and (min-width: 62.5em) {
-                padding-left: 0;
-                @include size(margin-left, 175px);
+                @include size(margin-left, -38px);
             }
         }
 
             }
         }
 
@@ -88,82 +84,75 @@
         }
     }
 
         }
     }
 
-    /* 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;
         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;
         }
     }
 }
         }
     }
 }
@@ -254,3 +243,151 @@
         }
     }
 }
         }
     }
 }
+
+.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;
+    }
+}