Reorganize SCSS files, RWD-ize funding.

[wolnelektury.git] / apps / wolnelektury_core / static / scss / main / main_page.scss

diff --git a/apps/wolnelektury_core/static/scss/main/main_page.scss b/apps/wolnelektury_core/static/scss/main/main_page.scss
new file mode 100755 (executable)
index 0000000..ddce4fc
--- /dev/null
+++ b/apps/wolnelektury_core/static/scss/main/main_page.scss
@@ -0,0 +1,256 @@
+#big-cite {
+    background-color: #444;
+    color: white;
+    padding: 0;
+    margin: 0;
+    background-size: 100%;
+    background-position: 50% 68%;
+    background-repeat: repeat-y;
+
+    background-image: url(/static/img/backdrop/book-drawer2.jpg);
+
+    @media screen and (min-width: 62.5em) {
+        background-image: url(/static/img/backdrop/book-drawer2.jpg);
+    }
+
+    .cite {
+        @include size(padding, 46px 10px 48px 0);
+        background: none;
+        color: white;
+
+        @media screen and (min-width: 30em) {
+            @include size(padding-right, 40px);
+        }
+
+        .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);
+            }
+
+            @media screen and (min-width: 62.5em) {
+                float: left;
+                padding-left: 0;
+                @include size(margin-left, 16px);
+                text-align: right;
+                @include size(width, 147px);
+            }
+        }
+
+        .cite-body {
+            @include size(margin, .5px);
+            @include size(font-size, 20px);
+            line-height: 1.16em;
+
+            @media screen and (min-width: 30em) {
+                @include size(font-size, 30px);
+            }
+        }
+
+        .source {
+            @include size(margin-top, 16px);
+            @include size(margin-bottom, 16px);
+            @include size(margin-right, 2px);
+            @include size(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);
+            }
+
+            @media screen and (min-width: 62.5em) {
+                padding-left: 0;
+                @include size(margin-left, 175px);
+            }
+        }
+
+        /* Semi-transparent background. */
+        .cite-body span,
+        .vip span,
+        .source span {
+            color: white;
+            background-color: rgb(0, 0, 0);
+            background-color: rgba(0, 0, 0, 0.6);
+            /* For IE 5.5 - 7*/
+            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+            /* For IE 8*/
+            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+        }
+    }
+
+    /* 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);
+        }
+    }
+
+    h2 {
+        margin: 0;
+        @include size(font-size, 11px);
+        color: #575c63;
+    }
+}
+
+
+#promo-box {
+    @include size(margin-top, 16px);
+
+    @media screen and (min-width: 33em) {
+        float: right;
+        @include size(margin-top, -51px);
+        @include size(width, 320px);
+    }
+
+    h1 {
+        @include size(padding, 20px 5px 0 10px);
+        @include size(height, 31px);
+        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);
+        }
+    }
+
+    #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);
+        }
+
+        @media screen and (min-width: 62.5em) {
+            @include size(height, 300px);
+        }
+
+        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: " >";
+            }
+        }
+    }
+}
+
+
+#main-last {
+    h1 {
+        @include size(height, 32px);
+        margin: 0;
+        @include size(padding-top, 19px);
+        @include size(padding-left, 10px);
+
+        @include size(font-size, 11px);
+        @include mono;
+        font-weight: normal;
+
+        @media screen and (min-width: 33em) {
+            @include size(padding-left, 19px);
+        }
+
+        a {
+            color: black;
+
+            &:after {
+                content: " >";
+            }
+        }
+    }
+    .book-mini-box:nth-child(3) {
+        @media screen and (min-width: 30em) {
+            margin-right: 3em;
+        }
+        @media screen and (min-width: 33em) {
+            margin-right: 0;
+        }
+    }
+}
+
+
+.infopages-box {
+    margin: 0;
+    @include size(margin-top, 5px);
+    @include size(padding, 0 5px);
+    vertical-align: top;
+    color: #989898;
+
+    @media screen and (min-width: 20em) {
+        display: inline-block;
+        @include size(width, 206px);
+        @include size(padding-left, 17px);
+        @include size(padding-right, 17px);
+    }
+
+    h1 {
+        @include size(height, 28px);
+        margin: 0;
+        @include size(padding-top, 25px);
+        @include size(font-size, 11px);
+        color: #017e85;
+        font-weight: normal;
+        @include mono;
+    }
+
+    a {
+        color: black;
+    }
+
+    ol, ul {
+        @include size(font-size, 11px);
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        line-height: 1.45em;
+
+        li {
+            @include size(margin-bottom, 8px);
+            @media screen and (min-width: 62.5em) {
+                @include size(margin-bottom, 2.5px);
+            }
+        }
+    }
+
+    .social-links {
+        @include size(margin-top, 10px);
+
+        a {
+            @include size(margin-right, 6px);
+        }
+    }
+}