fnp / wolnelektury.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Reorganize SCSS files, RWD-ize funding.
[wolnelektury.git] / apps / wolnelektury_core / static / scss / main / book_box.scss
diff --git a/apps/wolnelektury_core/static/scss/main/book_box.scss b/apps/wolnelektury_core/static/scss/main/book_box.scss
new file mode 100755 (executable)
index 0000000..0ee26be
--- /dev/null
+++ b/apps/wolnelektury_core/static/scss/main/book_box.scss
@@ -0,0 +1,448 @@
+@mixin inner-box {
+    display: block;
+    color: black;
+    @include size(margin, 1px);
+    @include size(padding, 8px 10px);
+    @include white-box;
+}
+
+.book-mini-box img.cover {
+        @include size(height, 193px);
+        @include size(width, 139px);
+}
+
+
+.cover-area {
+    float: left;
+    @include size(margin-right, 15px);
+    @include size(margin-bottom, 5px);
+
+    @media screen and (min-width: 32em) {
+        position: absolute;
+        top: 0;
+        left: 0;
+        margin-right: 0;
+    }
+
+    img.cover {
+        @include size(height, 193px / 2);
+        @include size(width, 139px / 2);
+
+        @media screen and (min-width: 20em) {
+            @include size(height, 193px);
+            @include size(width, 139px);
+        }
+    }
+}
+
+.book-mini-box {
+    @include size(width, 161.5px);
+    display: inline-block;
+    vertical-align: top;
+
+    a {
+        @include inner-box;
+        @include size(height, 271px);
+        @include size(margin, 1px);
+        overflow: hidden;
+    }
+    img.cover {
+        @include size(margin-bottom, 18px);
+    }
+    .desc {
+        margin-left: 0;
+    }
+    .author {
+        @include size(font-size, 11px);
+        @include mono;
+        color: #6d7877;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .title {
+        @include size(font-size, 14px);
+        color: #242424;
+    }
+}
+
+
+
+.work-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    .Book-item {
+        @media screen and (min-width: 32em) {
+            display: inline-block;
+        }
+        vertical-align: top;
+    }
+}
+
+
+.book-box {
+    margin: 0;
+    vertical-align: top;
+
+    @media screen and (min-width: 32em) {
+        @include size(width, 487.5px);
+    }
+
+    .book-box-inner {
+        position: relative;
+        @include inner-box;
+        @include size(min-height, 197.5px);
+    }
+}
+
+
+.book-wide-box {
+    margin: 0;
+    vertical-align: top;
+
+    @media screen and (min-width: 62.5em) {
+        @include size(width, 975px);
+    }
+
+    .book-box-inner {
+        position: relative;
+        @include size(min-height, 244px);
+        @include inner-box;
+        @include size(margin-left, 0);
+        @include size(margin-right, 0);
+
+        .book-left-column { /* FIXME */
+            @include size(max-width, 600px);
+
+            @media screen and (min-width: 62.5em) {
+                float: left;
+                @include size(width, 536px);
+            }
+        }
+
+        .license-icon {
+            display: block;
+            @include size(margin-top, 5px);
+        }
+
+        @media screen and (min-width: 62.5em) {
+            .book-box-head,
+            .tags,
+            .book-box-tools {
+                @include size(width, 382px);
+            }
+        }
+
+        #theme-list-wrapper {
+            @include size(margin-left, 154px);
+            margin-bottom: 0;
+            @include size(width, 300px);
+
+            p {
+                @include size(margin-top, 10px);
+                @include size(margin-bottom, 10px);
+            }
+        }
+
+        .right-column {
+            @include size(margin-top, 16px);
+
+            @media screen and (min-width: 62.5em) {
+                @include size(width, 415px);
+                // Eat the padding
+                @include size(margin-top, -8px);
+                @include size(margin-right, -10px);
+            }
+
+            .other-tools,
+            .other-download {
+                float: left;
+                @include size(width, 145px);
+                @include size(margin-top, 50px);
+                @include size(margin-bottom, 0);
+                @include size(margin-left, 5px);
+                @include size(margin-right, 0);
+                @include size(font-size, 11px);
+
+                h2 {
+                    margin: 0;
+                    @include size(font-size, 11px);
+                    @include mono;
+                }
+            }
+            .other-download {
+                @include size(margin-left, 15px);
+                @include size(width, 220px);
+            }
+        }
+    }
+}
+
+
+.book-box-body {
+    @include size(margin-bottom, 10px);
+    @media screen and (min-width: 32em) {
+        margin-bottom: 0;
+        @include size(height, 170px);
+    }
+    position: relative;
+
+    .book-box-head {
+        @include size(padding-top, 14px);
+        @include size(margin-bottom, 10px);
+
+        @media screen and (min-width: 32em) {
+            @include size(min-height, 70px);
+            @include size(width, 310px);
+            float: right;
+        }
+
+        a {
+            color: black;
+        }
+        .author {
+            @include size(font-size, 11px);
+            @include mono;
+            @include size(line-height, 13.2px);
+            @include size(max-height, 26.4px);
+            overflow: hidden;
+
+            @media screen and (min-width: 32em) {
+                @include size(max-width, 264px);
+            }
+        }
+        .title {
+            @include size(font-size, 24px);
+            line-height: 1.2em;
+            @include size(margin-top, 7.2px);
+            @include size(margin-bottom, 12px);
+
+            @media screen and (min-width: 32em) {
+                margin-bottom: 0;
+                @include size(height, 57.6px);
+                overflow: hidden;
+            }
+        }
+    }
+
+    .tags {
+        @include size(font-size, 11px);
+        line-height: 1.2em;
+
+        @media screen and (min-width: 32em) {
+            @include size(width, 310px);
+            float: right;
+            clear: right;
+            @include size(max-height, 57.6px);
+            overflow: hidden;
+        }
+
+        .category {
+            display: block;
+            @include size(margin-top, 6px);
+            @include size(margin-bottom, 6px);
+
+            @media screen and (min-width: 32em) {
+                display: inline;
+            }
+
+            .mono {
+                @include mono;
+            }
+
+            .book-box-tag {
+                @include size(margin-left, 4.4px);
+                @include size(margin-right, 5.5px);
+            }
+        }
+    }
+
+}
+
+
+
+.book-box-tools {
+    @include size(font-size, 11px);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    clear: left;
+
+    @media screen and (min-width: 20em) {
+        clear: none;
+        @include size(margin-left, 139px + 15px);
+    }
+
+    @media screen and (min-width: 32em) {
+        @include size(width, 310px);
+        float: right;
+        clear: right;
+    }
+
+    li {
+        @include mono;
+
+        @media screen and (min-width: 32em) {
+            display: inline-block;
+        }
+    }
+
+    .book-box-read {
+        @media screen and (min-width: 32em) {
+            @include size(width, 126.5px);
+        }
+
+        a {
+            @include mono;
+        }
+
+        a:before {
+            content: url("/static/img/read.png");
+            @include size(font-size, 25px);
+            @include size(margin-right, 3.71px);
+            vertical-align: middle;
+            font-weight: normal;
+        }
+    }
+
+    .book-box-download {
+        position: relative;
+
+        @media screen and (min-width: 32em) {
+            @include size(width, 93.5px);
+        }
+
+        a {
+            position: relative;
+            z-index: 101;
+
+            &.downarrow {
+                color: black;
+
+                @media screen and (min-width: 32em) {
+                    color: #0D7E85;
+                }
+
+                &:before {
+                    content: url("/static/img/download.png");
+                    @include size(font-size, 25px);
+                    @include size(margin-right, 3.71px);
+                    vertical-align: middle;
+                    font-weight: normal;
+                }
+            }
+        }
+
+        .book-box-formats {
+            @include size(padding-left, 25px);
+
+            @media screen and (min-width: 32em) {
+                display: none;
+                position: absolute;
+
+                @include size(width, 180px);
+                @include size(padding-top, 38px);
+                @include size(padding-bottom, 9px);
+                @include size(padding-left, 19px);
+                @include size(padding-right, 19px);
+
+                @include white-box;
+
+                z-index: 100;
+
+                @include size(top, -16px);
+                @include size(left, -19px);
+            }
+
+            span {
+                display: block;
+                @include size(margin-top, 16px);
+
+                @media screen and (min-width: 32em) {
+                    @include size(margin-top, 0);
+
+                    &:first-child {
+                        @include size(margin-top, 16px);
+                    }
+                }
+            }
+        }
+
+        &:hover .book-box-formats,
+        &.hover .book-box-formats {
+            display: block;
+        }
+    }
+
+    .book-box-audiobook {
+        @media screen and (min-width: 32em) {
+            @include size(width, 77px);
+        }
+
+        a:before {
+            content: url("/static/img/listen.png");
+            @include size(font-size, 25px);
+            @include size(margin-right, 3.71px);
+            vertical-align: middle;
+            font-weight: normal;
+        }
+
+    }
+}
+
+
+
+
+.star {
+    @include size(font-size, 22.5px);
+    @include size(margin-right, 11.25px);
+    position: absolute;
+    right: 0;
+
+    button::-moz-focus-inner {
+        padding: 0;
+        border: 0
+    }
+    .if-unlike button {
+        font-size: 1em;
+        font-family: inherit;
+        border: 0;
+        background: none;
+        margin: 0;
+        padding: 0;
+        color: #757575;
+    }
+    .if-like a {
+        display:block;
+        text-align:right;
+        padding: 0;
+    }
+}
+.like .if-unlike {
+    display: none;
+}
+.unlike .if-like {
+    display: none;
+}
+
+
+#book-detail .see-also {
+    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);
+        }
+    }
+}