Reorganize SCSS files, RWD-ize funding.
authorRadek Czajka <radekczajka@nowoczesnapolska.org.pl>
Wed, 13 Nov 2013 16:00:01 +0000 (17:00 +0100)
committerRadek Czajka <radekczajka@nowoczesnapolska.org.pl>
Wed, 13 Nov 2013 16:00:01 +0000 (17:00 +0100)
46 files changed:
.gitignore
apps/funding/static/funding/funding.css [deleted file]
apps/funding/static/funding/funding.scss [deleted file]
apps/funding/templates/funding/tags/funding.html
apps/polls/static/polls/polls.css [deleted file]
apps/polls/static/polls/polls.scss [deleted file]
apps/wolnelektury_core/static/css/main/_tools.scss [deleted file]
apps/wolnelektury_core/static/css/main/auth.scss [deleted file]
apps/wolnelektury_core/static/css/main/base.scss [deleted file]
apps/wolnelektury_core/static/css/main/book_box.scss [deleted file]
apps/wolnelektury_core/static/css/main/book_list.scss [deleted file]
apps/wolnelektury_core/static/css/main/catalogue.scss [deleted file]
apps/wolnelektury_core/static/css/main/cite.scss [deleted file]
apps/wolnelektury_core/static/css/main/dialogs.scss [deleted file]
apps/wolnelektury_core/static/css/main/footer.scss [deleted file]
apps/wolnelektury_core/static/css/main/form.scss [deleted file]
apps/wolnelektury_core/static/css/main/fragment.scss [deleted file]
apps/wolnelektury_core/static/css/main/header.scss [deleted file]
apps/wolnelektury_core/static/css/main/hidden.scss [deleted file]
apps/wolnelektury_core/static/css/main/main_content.scss [deleted file]
apps/wolnelektury_core/static/css/main/main_page.scss [deleted file]
apps/wolnelektury_core/static/css/main/menu.scss [deleted file]
apps/wolnelektury_core/static/css/main/search.scss [deleted file]
apps/wolnelektury_core/static/css/main/tag.scss [deleted file]
apps/wolnelektury_core/static/scss/all.scss [new file with mode: 0644]
apps/wolnelektury_core/static/scss/funding/funding.scss [new file with mode: 0644]
apps/wolnelektury_core/static/scss/main/auth.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/base.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/book_box.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/book_list.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/catalogue.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/cite.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/dialogs.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/footer.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/form.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/fragment.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/header.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/hidden.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/main_content.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/main_page.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/menu.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/search.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/main/tag.scss [new file with mode: 0755]
apps/wolnelektury_core/static/scss/polls/polls.scss [new file with mode: 0644]
apps/wolnelektury_core/static/scss/tools.scss [new file with mode: 0644]
wolnelektury/settings/static.py

index 3224d62..60e1b51 100644 (file)
@@ -11,7 +11,7 @@ dev.sqlite
 /static
 
 # SCSS output
 /static
 
 # SCSS output
-/apps/wolnelektury_core/static/css/main/*.css
+scss/*.css
 
 # Python garbage
 *.pyc
 
 # Python garbage
 *.pyc
diff --git a/apps/funding/static/funding/funding.css b/apps/funding/static/funding/funding.css
deleted file mode 100755 (executable)
index 89dd7aa..0000000
+++ /dev/null
@@ -1 +0,0 @@
-.funding,.funding-top-header{background:orange;margin:auto;padding:5px 0;position:relative}.funding a.call,.funding-top-header a.call{height:1.2em;width:9em;padding:.35em .5em;margin:.5em;display:inline-block;vertical-align:top;text-align:center;background:rgb(.465%, 59.936%, 63.653%)}.funding .description,.funding-top-header .description{display:inline-block;padding-left:.6em}.funding .description a,.funding-top-header .description a{display:block;color:#000;padding:0 3px}.funding strong,.funding-top-header strong{font-size:1.5em;padding:.2em 0 0}.funding .progress,.funding-top-header .progress{width:95.7em;margin:.3em 0 .4em;border-radius:2em;background-image:url(/static/img/progress-pixel.png);background-repeat:repeat-y;background-color:#f68900;box-shadow:.1em .1em .1em #888}.funding .progress .piece,.funding-top-header .progress .piece{font-size:1.3em;padding:.3em .5em}.funding .with-button .progress,.funding-top-header .with-button .progress{width:78em}.funding .funding .funding-title-strong,.funding .funding-title,.funding-top-header .funding-title,.funding-top-header .funding-top-header .funding-title-strong{font-size:1.1em}.funding .funding-title-strong,.funding-top-header .funding-title-strong{font-weight:bold;font-size:1.5em}.funding .close,.funding-top-header .close{position:absolute;top:0;right:5px}.funding-top-header{width:97.5em}.wlfund{width:100%;border-spacing:0}.wlfund td{padding:1em .5em 1em;text-align:center;border-top:1em solid rgba(255, 255, 255, 0);border-bottom:2px solid #DDD;background-clip:padding-box;-moz-background-clip:padding;-webkit-background-clip:padding}.wlfund td.oneline{white-space:nowrap}.wlfund td:last-child{text-align:right}.wlfund .funding-plus td{background-color:#cfe5e7}.wlfund .funding-minus td{background-color:#fff}.honking{background:#018189;font-size:1.5em;padding:.5em;color:#fff;border:0;box-shadow:.2em .2em .3em #888;position:relative}.honking:hover{box-shadow:none;top:.1em;left:.1em}.share a{margin-right:1.5em}.share a img{vertical-align:middle}.funding-handle{position:absolute;top:0;right:0;z-index:2;background:orange;cursor:pointer;padding:.2em 1em;border-radius:0 0 0 1em;font-size:13px}.funding-cover{float:left;margin-right:10px}.funding-details-intro{padding-top:1em}.funding-details-intro h3:first-of-type{margin-top:0}
\ No newline at end of file
diff --git a/apps/funding/static/funding/funding.scss b/apps/funding/static/funding/funding.scss
deleted file mode 100755 (executable)
index 13c6ce0..0000000
+++ /dev/null
@@ -1,152 +0,0 @@
-.funding {
-    background: orange;
-    margin: auto;
-    padding: 5px 0;
-    position: relative;
-    a.call {
-        height: 1.2em;
-        width: 9em;
-        padding: .35em .5em;
-        margin: .5em;
-        display: inline-block;
-        vertical-align: top;
-        text-align: center;
-
-        background: lighten(#018189, .05);
-    }
-    .description {
-        display: inline-block;
-        padding-left: .6em;
-        a {
-            display: block;
-            color: black;
-            padding: 0 3px;
-        }
-    }
-    strong {
-        font-size: 1.5em;
-        padding: .2em 0 0;
-        //display: block;
-    }
-    .progress {
-        .piece {
-            font-size: 1.3em;
-            padding: .3em .5em;
-        }
-        width: 95.7em;
-        margin: .3em 0 .4em;
-        border-radius: 2em;
-        background-image: url(/static/img/progress-pixel.png);
-        background-repeat: repeat-y;
-        background-color: mix(#ec6d00, orange, .5);
-        box-shadow: .1em .1em .1em #888;
-    }
-    .with-button .progress {
-        width: 78em;
-    }
-    
-    .funding-title {
-        font-size: 1.1em;
-    }
-    .funding-title-strong {
-        @extend .funding-title;
-        font-weight: bold;
-        font-size: 1.5em;
-    }
-    .close {
-        position: absolute;
-        top: 0px;
-        right: 5px;
-    }
-}
-
-.funding-top-header {
-    @extend .funding;
-    width: 97.5em;
-}
-
-
-.wlfund {
-    width: 100%;
-    border-spacing:0;
-
-    td {
-        padding: 1em .5em 1em;
-        text-align: center;
-        border-top: 1em solid rgba(255, 255, 255, 0);
-        border-bottom: 2px solid #DDDDDD;
-
-        background-clip: padding-box;
-        -moz-background-clip: padding;
-        -webkit-background-clip: padding;
-    }
-    td.oneline {
-        white-space: nowrap;
-    }
-
-    td:last-child {
-        text-align: right;
-    }
-
-    .funding-plus td {
-        background-color: mix(#0D7E85, white, .2);
-    }
-
-    .funding-minus td {
-        background-color: white;
-    }
-}
-
-
-
-.honking {
-    background: #018189;
-    font-size: 1.5em;
-    padding: .5em;
-    color: white;
-    border: 0;
-    box-shadow: 0.2em 0.2em 0.3em #888888;
-    position: relative;
-}
-.honking:hover {
-    box-shadow: none;
-    top: .1em;
-    left: .1em;
-}
-
-
-
-.share {
-    a {
-        margin-right: 1.5em;
-
-        img {
-            vertical-align: middle;
-        }
-    }
-}
-
-.funding-handle {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index:2;
-    background: orange;
-    cursor:pointer;
-    padding: .2em 1em;
-    border-radius: 0 0 0 1em;
-    font-size: 13px;
-}
-
-.funding-cover {
-    float:left;
-    margin-right: 10px;
-}
-
-.funding-details-intro {
-    padding-top: 1em;
-    
-    h3:first-of-type {
-        margin-top: 0;
-    }
-}
index ffe326e..a26c6ca 100755 (executable)
@@ -5,16 +5,15 @@
 <div class="funding {{ add_class }}" data-offer-id="{{offer.id}}" style="">
     {% if closeable %}<a href="#" class="close">X</a>{% endif %}
     {% if link and is_current %}
 <div class="funding {{ add_class }}" data-offer-id="{{offer.id}}" style="">
     {% if closeable %}<a href="#" class="close">X</a>{% endif %}
     {% if link and is_current %}
-        <div style="float:left; padding-right: .6em;">
+        <div class="call-area">
             <a class="call honking" href="{% url 'funding_current' offer.slug %}">
                 {% trans "Support!" %}</a>
             <a class="call honking" href="{% url 'funding_current' offer.slug %}">
                 {% trans "Support!" %}</a>
-            <div style="text-align: center; margin: auto;">
+            <div class="learn-more">
                 <a href="{% url 'infopage' 'wesprzyj' %}">{% trans "Learn more" %}</a>
             </div>
         </div>
     {% endif %}
                 <a href="{% url 'infopage' 'wesprzyj' %}">{% trans "Learn more" %}</a>
             </div>
         </div>
     {% endif %}
-    <div class="description {% if link and is_current %}with-button{% endif %}"
-        style="display: inline-block;">
+    <div class="description {% if link and is_current %}with-button{% endif %}">
     {% if link %}<a href="{% if is_current %}{% url 'funding_current' offer.slug %}{% else %}{{ offer.get_absolute_url }}{% endif %}">{% endif %}
     {% if show_title %}
         {% if is_current and show_title_calling %}<strong style="margin-right: .6em;">{% trans "Help free the book!" %}</strong>{% endif %}
     {% if link %}<a href="{% if is_current %}{% url 'funding_current' offer.slug %}{% else %}{{ offer.get_absolute_url }}{% endif %}">{% endif %}
     {% if show_title %}
         {% if is_current and show_title_calling %}<strong style="margin-right: .6em;">{% trans "Help free the book!" %}</strong>{% endif %}
@@ -34,9 +33,9 @@
             <span class="piece" style="display:inline-block;margin-right: 0em;">{% trans "until fundraiser end" %}:
                 <span class="countdown inline" data-until='{{ offer.end|date_to_utc:True|utc_for_js }}'></span>
             </span>
             <span class="piece" style="display:inline-block;margin-right: 0em;">{% trans "until fundraiser end" %}:
                 <span class="countdown inline" data-until='{{ offer.end|date_to_utc:True|utc_for_js }}'></span>
             </span>
+        {% else %}
+            <div style="clear: both"></div>
         {% endif %}
         {% endif %}
-
-        <div style="clear: both"></div>
     </div>
     {% if link %}</a>{% endif %}
     </div>
     </div>
     {% if link %}</a>{% endif %}
     </div>
diff --git a/apps/polls/static/polls/polls.css b/apps/polls/static/polls/polls.css
deleted file mode 100644 (file)
index 0dd10fa..0000000
+++ /dev/null
@@ -1 +0,0 @@
-.poll{width:400px}.poll ul{list-style-type:none}.poll-bar{border:solid 1px #ddd;height:6px;margin-bottom:10px}.poll-bar-inner{background:orange;height:6px}.poll-msg{font-weight:bold}
\ No newline at end of file
diff --git a/apps/polls/static/polls/polls.scss b/apps/polls/static/polls/polls.scss
deleted file mode 100644 (file)
index 28cd5a5..0000000
+++ /dev/null
@@ -1,21 +0,0 @@
-.poll {\r
-    width: 400px;\r
-    ul {\r
-        list-style-type: none;\r
-    }\r
-}\r
-\r
-.poll-bar {\r
-    border: solid 1px #ddd;\r
-    height:6px;\r
-    margin-bottom: 10px;\r
-}\r
-\r
-.poll-bar-inner {\r
-    background: orange;\r
-    height: 6px;\r
-}\r
-\r
-.poll-msg {\r
-    font-weight: bold;\r
-}
\ No newline at end of file
diff --git a/apps/wolnelektury_core/static/css/main/_tools.scss b/apps/wolnelektury_core/static/css/main/_tools.scss
deleted file mode 100755 (executable)
index b3441ef..0000000
+++ /dev/null
@@ -1,29 +0,0 @@
-@mixin size-px($name, $size) {
-    #{$name}: $size + px;
-    #{$name}: ($size / 16) + rem;
-}
-
-@mixin mono {
-    font-family: "Andale Mono", "Lucida Sans Typewriter", "Courier New";
-}
-
-@mixin hidden-label {
-    display: block;
-    width: 1px;
-    height: 1px;
-    overflow:hidden;
-}
-
-@mixin white-box {
-    border-color: #ddd;
-    border-style: solid;
-    @include size-px(border-width, 1);
-    background: #fff;
-
-    -moz-box-shadow: 2px 2px 2px #ddd;
-    -webkit-box-shadow: 2px 2px 2px #ddd;
-    box-shadow: 2px 2px 2px #ddd;
-    -moz-box-shadow: .125rem .125rem .125rem #ddd;
-    -webkit-box-shadow: .125rem .125rem .125rem #ddd;
-    box-shadow: .125rem .125rem .125rem #ddd;
-}
diff --git a/apps/wolnelektury_core/static/css/main/auth.scss b/apps/wolnelektury_core/static/css/main/auth.scss
deleted file mode 100755 (executable)
index 8a88e12..0000000
+++ /dev/null
@@ -1,48 +0,0 @@
-@import "tools";
-
-.email_list {
-    .verified {
-        display: inline-block;
-        margin-left: 2em;
-        font-style: italic;
-    }
-    .unverified {
-        display: inline-block;
-        margin-left: 2em;
-        color: #717171;
-        font-style: italic;
-    }
-    .primary {
-        display: inline-block;
-        margin-left: 2em;
-        font-weight: bold;
-    }
-}
-
-.socialaccount_provider {
-    display: inline-block;
-    background-repeat: no-repeat;
-    color: transparent;
-    
-    @include size-px(height, 40);
-    @include size-px(width, 40);
-    vertical-align: middle;
-
-    &.google {
-        background-image: url(/static/img/auth/google.png);
-    }
-}
-
-
-.socialaccount_providers {
-    margin: 0;
-    @include size-px(margin-top, 10);
-    @include size-px(margin-bottom, 10);
-    padding: 0;
-
-    li {
-        display: inline;
-        list-style: none;
-        @include size-px(margin-right, 10);
-    }
-}
diff --git a/apps/wolnelektury_core/static/css/main/base.scss b/apps/wolnelektury_core/static/css/main/base.scss
deleted file mode 100755 (executable)
index 0926569..0000000
+++ /dev/null
@@ -1,104 +0,0 @@
-@import "tools";
-
-
-/* Basic layout */
-html, body {
-    margin: 0;
-    padding: 0;
-}
-
-
-.clearboth {
-    clear: both;
-}
-
-
-
-/* Basic colors and fonts */
-body {
-    font-family: Georgia;
-    background: #f7f7f7;
-    color: black;
-
-    @include size-px(font-size, 13);
-}
-
-a {
-    color: #0d7e85;
-    text-decoration: none;
-
-    img {
-        border: 0;
-    }
-}
-
-h1 {
-    @include size-px(font-size, 35);
-    font-weight: normal;
-    @include size-px(margin-top, 14);
-
-    a {
-        color: inherit;
-    }
-}
-
-h2 {
-    @include size-px(font-size, 20);
-    font-weight: normal;
-}
-
-h3 {
-    @include size-px(font-size, 15);
-    font-weight: normal;
-}
-
-
-.normal-text {
-    line-height: 1.3em;
-}
-
-.white-box {
-    @include size-px(padding, 10);
-    @include white-box;
-}
-
-
-ul.plain {
-    list-style:none;
-    margin: 0;
-    padding: 0;
-}
-
-
-.theme-list-link {
-    @include mono;
-    @include size-px(font-size, 11);
-    
-    &:after {
-        @include size-px(padding-left, 11);
-        content: url("/static/img/arrow-teal.png");
-        vertical-align: middle;
-    }
-}
-
-
-.left-column, .right-column {
-    @include size-px(max-width, 600);
-}
-@media screen and (min-width: 62.5em) {
-    .left-column {
-        @include size-px(width, 470);
-        float: left;
-    }
-    .right-column {
-        @include size-px(width, 470);
-        float:right;
-    }
-}
-
-.pagination {
-    display: block;
-    @include size-px(font-size, 12);
-    @include size-px(padding, 6);
-    text-align:center;
-}
diff --git a/apps/wolnelektury_core/static/css/main/book_box.scss b/apps/wolnelektury_core/static/css/main/book_box.scss
deleted file mode 100755 (executable)
index 02de7a2..0000000
+++ /dev/null
@@ -1,455 +0,0 @@
-@import "tools";
-
-@mixin inner-box {
-    display: block;
-    color: black;
-    @include size-px(margin, 1);
-    @include size-px(padding-top, 8);
-    @include size-px(padding-bottom, 8);
-    @include size-px(padding-left, 10);
-    @include size-px(padding-right, 10);
-
-    @include white-box;
-}
-
-.book-mini-box img.cover {
-        @include size-px(height, 193);
-        @include size-px(width, 139);
-}
-
-
-.cover-area {
-    float: left;
-    @include size-px(margin-right, 15);
-    @include size-px(margin-bottom, 5);
-    
-
-    @media screen and (min-width: 32em) {
-        position: absolute;
-        top: 0;
-        left: 0;
-        margin-right: 0;
-    }
-
-    img.cover {
-        @include size-px(height, 193 / 2);
-        @include size-px(width, 139 / 2);
-
-        @media screen and (min-width: 20em) {
-            @include size-px(height, 193);
-            @include size-px(width, 139);
-        }
-    }
-}
-
-.book-mini-box {
-    @include size-px(width, 161.5);
-    display: inline-block;
-    vertical-align: top;
-
-    a {
-        @include inner-box;
-        @include size-px(height, 271);
-        @include size-px(margin, 1);
-        overflow: hidden;
-    }
-    img.cover {
-        @include size-px(margin-bottom, 18);
-    }
-    .desc {
-        margin-left: 0;
-    }
-    .author {
-        @include size-px(font-size, 11);
-        @include mono;
-        color: #6d7877;
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-    .title {
-        @include size-px(font-size, 14);
-        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-px(width, 487.5);
-    }
-
-    .book-box-inner {
-        position: relative;
-        @include inner-box;
-        @include size-px(min-height, 197.5);
-    }
-}
-
-
-.book-wide-box {
-    margin: 0;
-    vertical-align: top;
-
-    @media screen and (min-width: 62.5em) {
-        @include size-px(width, 975);
-    }
-
-    .book-box-inner {
-        position: relative;
-        @include size-px(min-height, 244);
-        @include inner-box;
-        @include size-px(margin-left, 0);
-        @include size-px(margin-right, 0);
-
-        .book-left-column { /* FIXME */
-            @include size-px(max-width, 600);
-
-            @media screen and (min-width: 62.5em) {
-                float: left;
-                @include size-px(width, 536);
-            }
-        }
-
-        .license-icon {
-            display: block;
-            @include size-px(margin-top, 5);
-        }
-
-        @media screen and (min-width: 62.5em) {
-            .book-box-head,
-            .tags,
-            .book-box-tools {
-                @include size-px(width, 382);
-            }
-        }
-
-        #theme-list-wrapper {
-            @include size-px(margin-left, 154);
-            margin-bottom: 0;
-            @include size-px(width, 300);
-
-            p {
-                @include size-px(margin-top, 10);
-                @include size-px(margin-bottom, 10);
-            }
-        }
-
-        .right-column {
-            @include size-px(margin-top, 16);
-
-            @media screen and (min-width: 62.5em) {
-                @include size-px(width, 415);
-                // Eat the padding
-                @include size-px(margin-top, -8);
-                @include size-px(margin-right, -10);
-            }
-
-            .other-tools,
-            .other-download {
-                float: left;
-                @include size-px(width, 145);
-                @include size-px(margin-top, 50);
-                @include size-px(margin-bottom, 0);
-                @include size-px(margin-left, 5);
-                @include size-px(margin-right, 0);
-                @include size-px(font-size, 11);
-
-                h2 {
-                    margin: 0;
-                    @include size-px(font-size, 11);
-                    @include mono;
-                }
-            }
-            .other-download {
-                @include size-px(margin-left, 15);
-                @include size-px(width, 220);
-            }
-        }
-    }
-}
-
-
-.book-box-body {
-    margin-bottom: 1em;
-    @media screen and (min-width: 32em) {
-        margin-bottom: 0;
-        @include size-px(height, 170);
-    }
-    position: relative;
-
-    .book-box-head {
-        @include size-px(padding-top, 14);
-        @include size-px(margin-bottom, 10);
-
-        @media screen and (min-width: 32em) {
-            @include size-px(min-height, 70);
-            @include size-px(width, 310);
-            float: right;
-        }
-
-        a {
-            color: black;
-        }
-        .author {
-            @include size-px(font-size, 11);
-            @include mono;
-            line-height: 1.2em;
-            max-height: 2.4em;
-            overflow: hidden;
-
-            @media screen and (min-width: 32em) {
-                @include size-px(max-width, 264);
-            }
-        }
-        .title {
-            @include size-px(font-size, 24);
-            line-height: 1.2em;
-            @include size-px(margin-top, 7.2);
-            margin-bottom: .5em;
-
-            @media screen and (min-width: 32em) {
-                margin-bottom: 0;
-                height: 2.4em;
-                overflow: hidden;
-            }
-        }
-    }
-
-    .tags {
-        @include size-px(font-size, 11);
-        line-height: 1.2em;
-
-        @media screen and (min-width: 32em) {
-            @include size-px(width, 310);
-            float: right;
-            clear: right;
-            max-height: 4.8em;
-            overflow: hidden;
-        }
-
-        .category {
-            display: block;
-            margin-top: .5em;
-            margin-bottom: .5em;
-
-            @media screen and (min-width: 32em) {
-                display: inline;
-            }
-
-            .mono {
-                @include mono;
-            }
-
-            .book-box-tag {
-                @include size-px(margin-left, 4.4);
-                @include size-px(margin-right, 5.5);
-            }
-        }
-    }
-
-}
-
-
-
-.book-box-tools {
-    @include size-px(font-size, 11);
-    margin: 0;
-    padding: 0;
-    list-style: none;
-
-    clear: left;
-
-    @media screen and (min-width: 20em) {
-        clear: none;
-        @include size-px(margin-left, 139 + 15);
-    }
-
-    @media screen and (min-width: 32em) {
-        @include size-px(width, 310);
-        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-px(width, 126.5);
-        }
-
-        a {
-            @include mono;
-        }
-
-        a:before {
-            content: url("/static/img/read.png");
-            @include size-px(font-size, 25);
-            @include size-px(margin-right, 3.71);
-            vertical-align: middle;
-            font-weight: normal;
-        }
-    }
-
-    .book-box-download {
-        position: relative;
-
-        @media screen and (min-width: 32em) {
-            @include size-px(width, 93.5);
-        }
-
-        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-px(font-size, 25);
-                    @include size-px(margin-right, 3.71);
-                    vertical-align: middle;
-                    font-weight: normal;
-                }
-            }
-        }
-
-        .book-box-formats {
-            @include size-px(padding-left, 25);
-
-            @media screen and (min-width: 32em) {
-                display: none;
-                position: absolute;
-
-                @include size-px(width, 180);
-                @include size-px(padding-top, 38);
-                @include size-px(padding-bottom, 9);
-                @include size-px(padding-left, 19);
-                @include size-px(padding-right, 19);
-
-                @include white-box;
-
-                z-index: 100;
-
-                @include size-px(top, -16);
-                @include size-px(left, -19);
-            }
-
-            span {
-                display: block;
-                @include size-px(margin-top, 16);
-
-                @media screen and (min-width: 32em) {
-                    @include size-px(margin-top, 0);
-
-                    &:first-child {
-                        @include size-px(margin-top, 16);
-                    }
-                }
-            }
-        }
-
-        &:hover .book-box-formats,
-        &.hover .book-box-formats {
-            display: block;
-        }
-    }
-
-    .book-box-audiobook {
-        @media screen and (min-width: 32em) {
-            @include size-px(width, 77);
-        }
-
-        a:before {
-            content: url("/static/img/listen.png");
-            @include size-px(font-size, 25);
-            @include size-px(margin-right, 3.71);
-            vertical-align: middle;
-            font-weight: normal;
-        }
-
-    }
-}
-
-
-
-
-.star {
-    @include size-px(font-size, 22.5);
-    @include size-px(margin-right, 11.25);
-    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-px(height, 32);
-        margin: 0;
-        @include size-px(padding-top, 19);
-        @include size-px(padding-left, 10);
-
-        @include size-px(font-size, 11);
-        @include mono;
-        font-weight: normal;
-
-        @media screen and (min-width: 33em) {
-            @include size-px(padding-left, 19);
-        }
-    }
-}
diff --git a/apps/wolnelektury_core/static/css/main/book_list.scss b/apps/wolnelektury_core/static/css/main/book_list.scss
deleted file mode 100755 (executable)
index fc2c134..0000000
+++ /dev/null
@@ -1,102 +0,0 @@
-/* listing of all books */
-
-@import "tools";
-
-#book-a-list {
-    #book-list-nav {
-        @include size-px(border-width, 0);
-        @include size-px(border-bottom-width, 1);
-        border-style: solid;
-        border-color: #CFCFCF;
-        @include size-px(padding, 9.75);
-        line-height: 2em;
-
-        @media screen and (min-width: 30em) {
-            @include size-px(border-bottom-width, 0);
-            @include size-px(border-left-width, 1);
-            float: right;
-            width: 50%;
-        }
-
-        @media screen and (min-width: 62.5em) {
-            line-height: 1.3em;
-        }
-
-        h2 {
-            cursor: pointer;
-
-            &:after {
-                @include size-px(padding-left, 10);
-                content: url("/static/img/arrow-gray.png");
-                vertical-align: top;
-            }
-
-            @media screen and (min-width: 30em) {
-                font-size: 1em;
-                margin: 0;
-                cursor: regular;
-
-                &:after {
-                    display: none;
-                }
-            }
-        }
-
-        #book-list-nav-index {
-            display: none;
-            @media screen and (min-width: 30em) {
-                display: block !important;
-            }
-        }
-
-        ul {
-            list-style-type: none;
-            @include size-px(margin, 5);
-            padding: 0;
-        }
-        .book-list-show-index {
-            display: none;
-        }
-    }
-
-    #book-list {
-        @include size-px(padding-left, 5);
-        line-height: 2em;
-
-        @media screen and (min-width: 62.5em) {
-            @include size-px(padding-left, 50);
-            line-height: 1.3em;
-        }
-
-        ol {
-            @include size-px(padding-left, 13);
-            @include size-px(margin-top, 4);
-            @include size-px(margin-bottom, 15.6);
-            @include size-px(margin-left, 0);
-            @include size-px(margin-right, 0);
-            list-style: none;
-        }
-        h2 {
-            @include size-px(font-size, 13);
-            margin: 0;
-            a {
-                color: black;
-            }
-        }
-    }
-
-    #book-list-up {
-        display: block;
-        position: fixed;
-        @include size-px(bottom, 50);
-        @include size-px(right, 50);
-        @include size-px(border-left-width, 1);
-        border-left-style: solid;
-        border-left-color: #CFCFCF;
-        @include size-px(padding-top, 20);
-        @include size-px(padding-bottom, 20);
-        @include size-px(padding-left, 10);
-        @include size-px(padding-right, 10);
-        background-color: white;    
-    }
-}
diff --git a/apps/wolnelektury_core/static/css/main/catalogue.scss b/apps/wolnelektury_core/static/css/main/catalogue.scss
deleted file mode 100755 (executable)
index 4a08b46..0000000
+++ /dev/null
@@ -1,31 +0,0 @@
-/* listing of all books */
-
-@import "tools";
-
-.catalogue-catalogue {
-    ul {
-        column-width: 25em;
-        -moz-column-width: 25em;
-        -webkit-column-width: 25em;
-
-        @include size-px(padding-left, 10);
-
-        @media screen and (min-width: 20em) {
-            @include size-px(padding-left, 40);
-        }
-
-        li {
-            margin-bottom: 1em;
-
-            @media screen and (min-width: 62.5em) {
-                margin-bottom: .5em;
-            }
-        }
-    }
-
-    h2 {
-        @include size-px(font-size, 26);
-        margin: 0;
-        @include size-px(padding, 26);
-    }
-}
diff --git a/apps/wolnelektury_core/static/css/main/cite.scss b/apps/wolnelektury_core/static/css/main/cite.scss
deleted file mode 100755 (executable)
index d15faaa..0000000
+++ /dev/null
@@ -1,50 +0,0 @@
-@import "tools";
-
-.cite {
-    display: block;
-    color: black;
-    background: white;
-    @include size-px(padding-top, 30);
-    @include size-px(padding-bottom, 1);
-    @include size-px(padding-left, 80);
-    @include size-px(padding-right, 20);
-
-    .vip {
-        margin: 0;
-        color: #575C63;
-        @include size-px(font-size, 11);
-    }
-
-    .cite-body {
-        @include size-px(font-size, 18);
-        line-height: 1.3em;
-    }
-
-    blockquote {
-        padding: 0;
-        margin: 0;
-
-        p {
-            margin: 0;
-        }
-    }
-
-    .source
-    {
-        color: #444;
-        @include mono;
-        @include size-px(font-size, 11);
-        @include size-px(margin-top, 16);
-    }
-}
-
-
-
-
-.book-wide-box .cite {
-    background-color: #f7f7f7;
-    vertical-align: middle;
-    @include size-px(width, 395);
-    margin: 0;
-    @include size-px(padding, 10);
-}
diff --git a/apps/wolnelektury_core/static/css/main/dialogs.scss b/apps/wolnelektury_core/static/css/main/dialogs.scss
deleted file mode 100755 (executable)
index a531677..0000000
+++ /dev/null
@@ -1,140 +0,0 @@
-@import "tools";
-
-.dialog-window {
-    position: absolute;
-    display: none;
-    background-color: transparent;
-    @include size-px(margin-top, -5);
-    @include size-px(margin-left, 10);
-    @include size-px(width, 200);
-
-    @media screen and (max-width: 29.999999em) {
-        left: 0 !important;
-        right: 0;
-        @include size-px(margin-left, 0);
-        width: auto;
-    }
-
-    div.header {
-        @include mono;
-        @include size-px(font-size, 11);
-        width: 4em;
-        background-color: #FFF;
-        padding: 1em;
-        right: 0;
-        left: auto;
-        float: right;
-        text-align: center;
-
-        @media screen and (min-width: 30em) {
-            padding-top: 0.5em;
-            padding-bottom: 0.5em;
-            border-right: 0.3em solid #DDD;
-        }
-    }
-
-    div.target {
-        background-color: #FFF;
-        color: black;
-        border-bottom: 0.3em solid #DDD;
-        padding: 1em 10px;
-        clear: both;
-
-        @media screen and (min-width: 30em) {
-            border-right: 0.3em solid #DDD;
-            padding-left: 1em;
-            padding-right: 1em;
-        }
-    }
-
-    h1 {
-        @include size-px(font-size, 12);
-        font-weight: normal;
-        margin-top: .4em;
-    }
-
-    textarea, input {
-        width: 100%;
-    }
-}
-
-
-
-
-
-
-
-.cuteform {
-    @include size-px(font-size, 11);
-
-    ol, ul {
-        padding: 0;
-        margin: 0;
-        list-style: none;
-        @include size-px(font-size, 11);
-
-        li {
-            margin-top: 0.7em;
-        }
-    }
-
-    label {
-        display: block;
-    }
-
-    span.help-text {
-        display: block;
-        font-size: 0.8em;
-        color: #999;
-    }
-
-    .error {
-        color: #BF3024;
-        display: block;
-    }
-
-    .errorlist {
-        color: #BF3024;
-    }
-}
-
-
-.jqmOverlay { background-color: #000; }
-
-
-
-.hidelabels label {
-    @include hidden-label;
-}
-
-
-@media screen and (min-width: 30em) {
-    #login-window {
-        @include size-px(width, 260);
-    }
-    #register-window {
-        width: 26em;
-    }
-    #context-login-window {
-        width: 26em;
-    }
-    #suggest-window {
-        width: 26em;
-    }
-    #suggest-publishing-window {
-        width: 29em;
-    }
-    #custom-pdf-window {
-        width: 24em;   
-    }
-}
-
-#suggest-window textarea {
-    height: 6em;
-}
-#suggest-publishing-window textarea {
-    height: 3em;
-}
-#custom-pdf-window label {
-    display: inline;
-}
diff --git a/apps/wolnelektury_core/static/css/main/footer.scss b/apps/wolnelektury_core/static/css/main/footer.scss
deleted file mode 100755 (executable)
index cc37b13..0000000
+++ /dev/null
@@ -1,30 +0,0 @@
-@import "tools";
-
-#footer-wrapper {
-    @include size-px(margin-top, 50);
-    @include size-px(padding-top, 30);
-    background: #fff;
-    color: #767676;
-    border-top-style: solid;
-    border-top-color: #ddd;
-    @include size-px(border-top-width, 1);
-}
-
-footer#main {
-    @include size-px(font-size, 10);
-    @include size-px(margin-left, 5);
-    @include size-px(margin-right, 5);
-
-    @media screen and (min-width: 62.5em) {
-        @include size-px(width, 975);
-        margin: auto;
-    }
-
-    p {
-        @include size-px(margin-top, 2.5);
-        @include size-px(margin-bottom, 2.5);
-        margin-left: 0;
-        margin-right: 0;
-    }
-}
-
diff --git a/apps/wolnelektury_core/static/css/main/form.scss b/apps/wolnelektury_core/static/css/main/form.scss
deleted file mode 100755 (executable)
index 42e8675..0000000
+++ /dev/null
@@ -1,26 +0,0 @@
-form table {
-    th {
-        vertical-align: top;
-        text-align: left;
-        font-weight: normal;
-    }
-    td {
-        padding-bottom: 1em;
-    }
-
-    .required th:after {
-        content: " *";
-    }
-
-    .errorlist {
-        color: red;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-    .helptext {
-        color: #888;
-        font-size: .9em;
-        font-style: italic;
-    }
-}
diff --git a/apps/wolnelektury_core/static/css/main/fragment.scss b/apps/wolnelektury_core/static/css/main/fragment.scss
deleted file mode 100755 (executable)
index f82d50a..0000000
+++ /dev/null
@@ -1,19 +0,0 @@
-@import "tools";
-
-.Fragment-item {
-    @include size-px(margin-bottom, 20);
-    @include white-box;
-
-    .fragment {
-        color: black;
-        display: block;
-    }
-    .toggle {
-        @include size-px(font-size, 11);
-        display: block;
-        @include size-px(padding-top, 5);
-        @include size-px(padding-bottom, 5);
-        @include size-px(padding-left, 0);
-        @include size-px(padding-right, 0);
-    }
-}
diff --git a/apps/wolnelektury_core/static/css/main/header.scss b/apps/wolnelektury_core/static/css/main/header.scss
deleted file mode 100755 (executable)
index 3bf6fce..0000000
+++ /dev/null
@@ -1,217 +0,0 @@
-@import "tools";
-
-$header_bg: #191919;
-
-
-#header-wrapper {
-    position: relative;
-
-    /* Upper-half both sides dark background */
-    &:before {
-        content: " ";
-        display: block;
-        z-index: -1;
-        position: absolute;
-        top: 0;
-        @include size-px(bottom, 45);
-        left: 0;
-        width: 100%;
-        background-color: $header_bg;
-    }
-
-    /* Left-side dark background */
-    &:after {
-        content: " ";
-        display: block;
-        z-index: -1;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        width: 50%;
-        background-color: $header_bg;
-    }
-}
-
-
-header#main {
-    @include size-px(line-height, 20); /* Make links easier to click when wrapped. */
-    background-color: $header_bg;
-    color: #bbb;
-
-    @media screen and (min-width: 62.5em) {
-        position: relative;
-        @include size-px(height, 94);
-        @include size-px(width, 975);
-        margin: auto;
-    }
-
-    a {
-        color: #17CFDB;
-    }
-
-    #logo {
-        display: block;
-        @include size-px(height, 94);
-        @include size-px(width, 94);
-
-        @media screen and (min-width: 24em) {
-            float: left;
-        }
-
-        img {
-            display: block;
-        }
-    }
-
-    #tagline {
-        margin-top: 0;
-        @include size-px(margin-left, 5);
-        @include size-px(margin-right, 5);
-        padding-top: 0;
-        @include size-px(font-size, 11);
-
-        @media screen and (min-width: 24em) {
-            @include size-px(padding-top, 6);
-            @include size-px(font-size, 13);
-            text-align: right;
-        }
-
-        @media screen and (min-width: 62.5em) {
-            position: absolute;
-            @include size-px(top, 10);
-            @include size-px(left, 255);
-            @include size-px(margin-left, 0);
-        }
-    }
-
-    #user-info {
-        margin-top: 0;
-        @include size-px(margin-left, 5);
-        @include size-px(margin-right, 5);
-        padding-top: 0;
-        @include mono;
-        @include size-px(font-size, 10);
-        position: relative;
-
-        @media screen and (min-width: 24em) {
-            @include size-px(padding-top, 15);
-            text-align: right;
-        }
-        @media screen and (min-width: 62.5em) {
-            position: absolute;
-            top: 0;
-            right: 0;
-            @include size-px(margin-left, 0);
-            @include size-px(margin-right, 0);
-        }
-
-        /* We want submenu on far left on small screens. */
-        .hidden-box-wrapper {
-            position: static;
-            @media screen and (min-width: 24em) {
-                position: relative;
-            }
-        }
-
-        #user-menu {
-            display: none;
-
-            text-align: left;
-            line-height:1.6em;
-            left: 0;
-            right: 0;
-            top: 2em;
-
-            @media screen and (min-width: 15em) {
-                right: auto;
-                width: 15em;
-            }
-
-            a {
-                color: #0D7E85;
-            }
-        }
-    }
-
-    form#search-area {
-        position: relative;
-        clear: both;
-        @include size-px(height, 45);
-        background: #444444;
-        color: white;
-
-        @media screen and (min-width: 62.5em) {
-            position: absolute;
-            @include size-px(top, 49);
-            @include size-px(left, 240);
-            @include size-px(right, 0);
-        }
-
-        #search-field {
-            position: absolute;
-            @include size-px(top, 5);
-            @include size-px(left, 5);
-            @include size-px(right, 113);
-
-            label {
-                @include hidden-label;
-            }
-            input#search {
-                z-index: 200;
-                position: relative;
-                @include size-px(height, 33);
-                width: 100%;
-                padding: 0;
-                @include size-px(padding-left, 13);
-                @include size-px(line-height, 32.5);
-
-                border: none;
-                @include size-px(border-radius, 5);
-                box-shadow: 0 0 0.5em #444444 inset;
-
-                font-family: Georgia;
-                @include size-px(font-size, 13);
-                background-color: white;
-                color: black;
-
-                /* styling search placeholder */
-                &::placeholder
-                {
-                    font-family: Georgia;
-                    font-style: italic;
-                    color: #767676;
-                }
-                &::-webkit-input-placeholder
-                {
-                    font-family: Georgia;
-                    font-style: italic;
-                    color: #767676;
-                }
-                &::-moz-placeholder
-                {
-                    font-family: Georgia;
-                    font-style: italic;
-                    color: #767676;
-                }
-            }
-        }
-        button {
-            display: inline-block;
-            position: absolute;
-            top: 0;
-            right: 0;
-            @include size-px(height, 45);
-            @include size-px(width, 94);
-            margin: 0;
-            padding: 0;
-
-            border: none;
-
-            @include mono;
-            @include size-px(font-size, 11);
-            background: #018189;
-            color: white;
-        }
-    }
-}
diff --git a/apps/wolnelektury_core/static/css/main/hidden.scss b/apps/wolnelektury_core/static/css/main/hidden.scss
deleted file mode 100755 (executable)
index a559688..0000000
+++ /dev/null
@@ -1,55 +0,0 @@
-@import "tools";
-
-.hidden-box-wrapper {
-    position: relative;
-
-    .hidden-box {
-        position: absolute;
-        left: 0;
-        display: none;
-        padding: 1em 1em .5em 1em;
-        @include white-box;
-
-        z-index: 500;
-
-        ul {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-            @include size-px(font-size, 11);
-
-            @include size-px(column-width, 132);
-            @include size-px(-moz-column-width, 132);
-            @include size-px(-webkit-column-width, 132);
-
-            @media screen and (min-width: 24em) {
-                @include size-px(width, 320);
-            }
-
-            @media screen and (min-width: 34em) {
-                @include size-px(width, 480);
-            }
-
-            @media screen and (min-width: 62.5em) {
-                @include size-px(width, 528);
-            }
-
-
-
-            li {
-                margin-bottom: 1em;
-
-                @media screen and (min-width: 62.5em) {
-                    margin-bottom: .5em;
-                }
-            }
-        }
-    }
-}
-
-@media screen and (min-width: 24em) {
-    #menu-collections ul {
-        @include size-px(width, 180);
-    }
-}
-
diff --git a/apps/wolnelektury_core/static/css/main/main_content.scss b/apps/wolnelektury_core/static/css/main/main_content.scss
deleted file mode 100755 (executable)
index 7d1aad4..0000000
+++ /dev/null
@@ -1,10 +0,0 @@
-@import "tools";
-
-#main-content {
-    position: relative;
-
-    @media screen and (min-width: 62.5em) {
-        @include size-px(width, 975);
-        margin: auto;
-    }
-}
diff --git a/apps/wolnelektury_core/static/css/main/main_page.scss b/apps/wolnelektury_core/static/css/main/main_page.scss
deleted file mode 100755 (executable)
index 6f45bf6..0000000
+++ /dev/null
@@ -1,272 +0,0 @@
-@import "tools";
-
-#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-px(padding-top, 46);
-        @include size-px(padding-bottom, 48);
-        @include size-px(padding-left, 0);
-        @include size-px(padding-right, 10);
-        background: none;
-        color: white;
-
-        @media screen and (min-width: 30em) {
-            @include size-px(padding-right, 40);
-        }
-
-        .vip {
-            @include size-px(margin-left, 10);
-            @include size-px(margin-top, 2.5);
-            @include size-px(margin-bottom, 5);
-            @include size-px(font-size, 11);
-
-            @media screen and (min-width: 16em) {
-                padding-left: 10%;
-                @include size-px(margin-left, -18);
-            }
-
-            @media screen and (min-width: 62.5em) {
-                float: left;
-                padding-left: 0;
-                @include size-px(margin-left, 16);
-                text-align: right;
-                @include size-px(width, 147);
-            }
-        }
-
-        .cite-body {
-            @include size-px(margin, .5);
-            @include size-px(font-size, 20);
-            line-height: 1.16em;
-
-            @media screen and (min-width: 30em) {
-                @include size-px(font-size, 30);
-            }
-        }
-
-        .source {
-            @include size-px(margin-top, 16);
-            @include size-px(margin-bottom, 16);
-            @include size-px(margin-right, 2);
-            @include size-px(font-size, 12);
-        }
-
-        /* Make cite body and source slide to the left. */
-        .cite-body, .source {
-            @include size-px(margin-left, 10);
-
-            @media screen and (min-width: 16em) {
-                padding-left: 21.9%;
-                @include size-px(margin-left, -38);
-            }
-
-            @media screen and (min-width: 62.5em) {
-                padding-left: 0;
-                @include size-px(margin-left, 175);
-            }
-        }
-
-        /* 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-px(font-size, 16);
-        @media screen and (min-width: 30em) {
-            @include size-px(font-size, 20);
-        }
-    }
-
-    h2 {
-        margin: 0;
-        @include size-px(font-size, 11);
-        color: #575c63;
-    }
-}
-
-
-#promo-box {
-    @include size-px(margin-top, 16);
-
-    @media screen and (min-width: 33em) {
-        float: right;
-        @include size-px(margin-top, -51);
-        @include size-px(width, 320);
-    }
-
-    h1 {
-        @include size-px(padding-top, 20);
-        @include size-px(height, 31);
-        margin: 0;
-        padding-bottom: 0;
-        @include size-px(padding-left, 10);
-        @include size-px(padding-right, 5);
-        background: #191919;
-        color: white;
-        @include mono;
-        @include size-px(font-size, 13);
-        font-weight: normal;
-
-        @media screen and (min-width: 33em) {
-            @include size-px(padding-left, 25);
-            @include size-px(padding-right, 25);
-        }
-    }
-
-    #promo-box-body {
-        @include size-px(padding-top, 20);
-        @include size-px(padding-bottom, 20);
-        @include size-px(padding-left, 5);
-        @include size-px(padding-right, 5);
-        border-bottom-style: solid;
-        border-bottom-color: #efefef;
-        @include size-px(border-bottom-width, 2);
-        background: #efefef;
-
-        @media screen and (min-width: 33em) {
-            @include size-px(padding-left, 28);
-            @include size-px(padding-right, 28);
-        }
-
-        @media screen and (min-width: 62.5em) {
-            @include size-px(height, 300);
-        }
-
-        a {
-            display: block;
-            color: #6c6c6c;
-        }
-        p {
-            margin-top: 0;
-            @include size-px(font-size, 12);
-            line-height: 1.55em;
-            color: #6c6c6c;
-        }    
-        h2, h3 {
-            color: #0d777e;
-            @include size-px(font-size, 11);
-            @include size-px(height, 27.5);
-            margin: 0;
-            @include mono;
-            font-weight: normal;
-
-            &:after {
-                content: " >";
-            }
-        }
-    }
-}
-
-
-#main-last {
-    h1 {
-        @include size-px(height, 32);
-        margin: 0;
-        @include size-px(padding-top, 19);
-        @include size-px(padding-left, 10);
-
-        @include size-px(font-size, 11);
-        @include mono;
-        font-weight: normal;
-
-        @media screen and (min-width: 33em) {
-            @include size-px(padding-left, 19);
-        }
-
-        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-px(margin-top, 5);
-    padding-top: 0;
-    padding-bottom: 0;
-    @include size-px(padding-left, 5);
-    @include size-px(padding-right, 5);
-    vertical-align: top;
-    color: #989898;
-
-    @media screen and (min-width: 20em) {
-        display: inline-block;
-        @include size-px(width, 206);
-        @include size-px(padding-left, 17);
-        @include size-px(padding-right, 17);
-    }
-
-    h1 {
-        @include size-px(height, 28);
-        margin: 0;
-        @include size-px(padding-top, 25);
-        @include size-px(font-size, 11);
-        color: #017e85;
-        font-weight: normal;
-        @include mono;
-    }
-
-    a {
-        color: black;
-    }
-
-    ol, ul {
-        @include size-px(font-size, 11);
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        line-height: 1.45em;
-
-        li {
-            @include size-px(margin-bottom, 8);
-            @media screen and (min-width: 62.5em) {
-                @include size-px(margin-bottom, 2.5);
-            }
-        }
-    }
-
-    .social-links {
-        @include size-px(margin-top, 10);
-
-        a {
-            @include size-px(margin-right, 6);
-        }
-    }
-}
diff --git a/apps/wolnelektury_core/static/css/main/menu.scss b/apps/wolnelektury_core/static/css/main/menu.scss
deleted file mode 100755 (executable)
index 496b805..0000000
+++ /dev/null
@@ -1,194 +0,0 @@
-@import "tools";
-
-#nav-line {
-    background-color: #e2e2e2;
-    position: relative;
-
-    @media screen and (min-width: 62.5em) {
-        @include size-px(width, 975);
-        margin: auto;
-    }
-
-    #show-menu {
-        display: block;
-        float: left;
-        @include size-px(line-height, 13);
-        @include size-px(padding-top, 18);
-        @include size-px(padding-bottom, 18);
-        @include size-px(padding-left, 13);
-        @include size-px(padding-right, 13);
-        color: #0c7076;
-        @include size-px(font-size, 11);
-        @include mono;
-
-        .long {
-            display: none;
-
-            &:after {
-                @include size-px(padding-left, 10);
-                content: url("/static/img/arrow-gray.png");
-                vertical-align: top;
-            }
-        }
-
-        @media screen and (min-width: 20em) {
-            .long { display: inline; }
-            .short { display: none; }
-        }
-
-        @media screen and (min-width: 53em) {
-            display: none;
-        }
-    }
-
-    ul#menu {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-
-        display: none;
-        position: absolute;
-        top: 49px;
-        left: 0;
-        right: 10px;
-        z-index: 400;
-
-        @media screen and (min-width: 24em) {
-            right: auto;
-        }
-
-        @media screen and (min-width: 53em) {
-            display: block !important;
-            position: static;
-            @include size-px(margin-left, 6);
-        }
-
-        li.menu {
-            background-color: #e2e2e2;
-
-            @media screen and (min-width: 53em) {
-                float: left;
-            }
-
-            a.menu {
-                display: block;
-                @include size-px(line-height, 13);
-                @include size-px(padding-top, 18);
-                @include size-px(padding-bottom, 15);
-
-                @include size-px(border-bottom-width, 3);
-                border-bottom-style: solid;
-                border-bottom-color: #e2e2e2;
-                
-                @include size-px(padding-left, 13);
-                @include size-px(padding-right, 13);
-                color: #0c7076;
-                @include size-px(font-size, 11);
-                @include mono;
-            }
-
-            a.hidden-box-trigger:hover {
-                border-bottom-color: white;
-            }
-        }
-    }
-
-    #lang-menu {
-        display: block;
-        float: right;
-
-        @include size-px(padding-left, 25);
-        @include size-px(padding-right, 20);
-        background: #f7f7f7;
-        @include mono;
-
-        @media screen and (min-width: 15em) {
-            position: relative;
-        }
-
-        #lang-button {
-            display:block;
-            @include size-px(line-height, 17);
-            @include size-px(padding-top, 16);
-            @include size-px(padding-bottom, 16);
-
-            @include size-px(font-size, 10);
-            color: #717171;
-
-            .label {
-                display: none;
-
-                @media screen and (min-width: 62.5em) {
-                    display: inline;
-                }
-
-                &:after {
-                    @include size-px(padding-left, 10);
-                    content: url("/static/img/arrow-gray.png");
-                    vertical-align: top;
-                }
-            }
-
-            .lang-flag {
-                @include size-px(font-size, 13);
-                @include size-px(line-height, 15);
-            }
-        }
-
-        #lang-menu-items {
-            z-index: 9999;
-
-            button {
-                @include mono;
-                display: none;
-                background: #f7f7f7;
-                color: #6f6f6f;
-                cursor: pointer;
-                width: 100%;
-                margin: 0;
-                padding: 0;
-
-                @include size-px(padding-top, 10);
-                @include size-px(padding-bottom, 10);
-
-                @media screen and (min-width: 62.5em) {
-                    @include size-px(padding-top, 5);
-                    @include size-px(padding-bottom, 5);
-                }
-
-                border-style: solid;
-                border-color: #ddd;
-                border-width: 0;
-                @include size-px(border-bottom-width, 1);
-
-                @include size-px(font-size, 13);
-
-                &.active {
-                    color: #000;
-                }
-            }
-        }
-
-        &:hover, &.hover {
-            #lang-menu-items {
-                position: absolute;
-                padding: 0;
-                left: 0;
-                right: 0;
-
-                @media screen and (min-width: 15em) {
-                    left: auto;
-                    @include size-px(width, 180);
-                    @include size-px(top, 49);
-                }
-                @media screen and (min-width: 62.5em) {
-                    width: 100%;
-                }
-
-                button {
-                    display: block;
-                }
-            }
-        }
-    }
-}
diff --git a/apps/wolnelektury_core/static/css/main/search.scss b/apps/wolnelektury_core/static/css/main/search.scss
deleted file mode 100755 (executable)
index 2b96361..0000000
+++ /dev/null
@@ -1,90 +0,0 @@
-@import "tools";
-
-/* jquery UI overrides us */
-.ui-menu .ui-menu-item a {
-    color: #0d7e85 !important;
-    line-height: 1.636em !important;
-}
-
-.ui-widget {
-    font-family: Georgia !important;
-    font-size: 10px !important;
-    font-size: .625rem !important;
-}
-
-.ui-widget-content {
-    background: #EEEEEE !important; /* #E2E2E2 ? */
-    border-radius: 0px !important;
-}
-
-
-
-.inline-tag-lists p span:first-child {
-    color: #281d1c;
-}
-
-/* just on search page */
-.top-tag-list {
-    @include size-px(margin-top, 22);
-    @include size-px(margin-bottom, 16);
-}
-
-
-.search-result {
-    @include size-px(width, 975);
-
-    .book-box-body {
-        @include size-px(width, 310);
-    }
-}
-
-
-
-.book-list-header {
-    @include size-px(width, 975);
-    padding: 0em;
-    @include size-px(margin-left, -1);
-
-    .book-box-inner {
-        min-height: 1em;
-    }
-
-    p {
-        @include size-px(font-size, 24);
-        @include size-px(margin, 5);
-    }
-}
-
-.snippets {
-    @include size-px(width, 440);
-    float: right;
-    @include size-px(margin-top, -200);
-
-    .snippet-text {
-        @include size-px(font-size, 12);
-        @include size-px(margin-top, 13);
-        @include size-px(margin-bottom, 13);
-        @include size-px(margin-left, 0);
-        @include size-px(margin-right, 0);
-        @include size-px(padding, 12);
-        background: #f7f7f7;
-    }
-
-    .anchor {
-        display: none;
-    }
-}
-
-
-.search-hint-label {
-    display: inline-block;
-    @include size-px(font-size, 11);
-    @include size-px(width, 275);
-    line-height: 1.636em;
-}
-
-.search-hint-category {
-    @include size-px(font-size, 11);
-    line-height: 1.636em;
-}
-
diff --git a/apps/wolnelektury_core/static/css/main/tag.scss b/apps/wolnelektury_core/static/css/main/tag.scss
deleted file mode 100755 (executable)
index a06e0b5..0000000
+++ /dev/null
@@ -1,104 +0,0 @@
-@import "tools";
-
-.page-desc {
-    @include size-px(margin-left, 15);
-}
-
-#tagged-object-list {
-    @media screen and (min-width: 62.5em) {
-        .left-column, .right-column {
-            @include size-px(width, 480);
-        }
-    }
-
-    .see-also, .download {
-        float: left;
-        @include size-px(margin-top, 20);
-        @include size-px(margin-bottom, 20);
-
-        h2 {
-            @include mono;
-            @include size-px(font-size, 11);
-            margin: 0;
-        }
-
-        ul {
-            @include size-px(font-size, 11);
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-    }
-
-    .see-also {
-        @include size-px(margin-left, 80);
-        @include size-px(width, 143);
-    }
-    .download {
-        @include size-px(margin-left, 20);
-    }
-
-    .left-column .see-also {
-        margin-left: 0;
-    }
-}
-
-#description {
-    @include size-px(margin-bottom, 26);
-    cursor: pointer;
-
-    dl {
-        margin-top: 0;
-    }
-    dt {
-        display: inline;
-        font-weight: bold;
-        margin: 0;
-    }
-    dd {
-        display: inline;
-        margin: 0;
-    }
-    p {
-        margin-top: 0;
-    }
-    #description .meta {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-    #description .meta li {
-        text-align: right;
-        color: #666;
-        @include size-px(font-size, 11.7);
-    }
-}
-
-.inline-tag-lists {
-    @include size-px(font-size, 11);
-
-    .inline-header {
-        @include mono;
-        display: inline-block;
-        vertical-align: top;
-        @include size-px(width, 77);
-    }
-
-    .inline-body {
-        display: inline-block;
-        vertical-align: top;
-        @include size-px(margin-bottom, 5.5);
-        @include size-px(width, 385);
-
-        ul {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-
-            li {
-                display: inline-block;
-                @include size-px(margin-right, 11);
-            }
-        }
-    }
-}
diff --git a/apps/wolnelektury_core/static/scss/all.scss b/apps/wolnelektury_core/static/scss/all.scss
new file mode 100644 (file)
index 0000000..8d6e0d3
--- /dev/null
@@ -0,0 +1,23 @@
+@import "tools";
+
+@import "main/auth";
+@import "main/base";
+@import "main/book_box";
+@import "main/book_list";
+@import "main/catalogue";
+@import "main/cite";
+@import "main/dialogs";
+@import "main/footer";
+@import "main/form";
+@import "main/fragment";
+@import "main/header";
+@import "main/hidden";
+@import "main/main_content";
+@import "main/main_page";
+@import "main/menu";
+@import "main/search";
+@import "main/tag";
+
+@import "funding/funding";
+
+@import "polls/polls";
diff --git a/apps/wolnelektury_core/static/scss/funding/funding.scss b/apps/wolnelektury_core/static/scss/funding/funding.scss
new file mode 100644 (file)
index 0000000..61a48d6
--- /dev/null
@@ -0,0 +1,174 @@
+.funding {
+    background: orange;
+    margin: auto;
+    @include size(padding, 5px 0);
+    position: relative;
+    .close {
+        @include size(font-size, 10px);
+    }
+    .call-area {
+        float:left;
+        @include size(padding-right, 6px);
+    }
+    a.call {
+        @include size(height, 18px);
+
+        @include size(padding, 5.25px 7.5px);
+        @include size(margin, 7.5px);
+        display: inline-block;
+        vertical-align: top;
+        text-align: center;
+
+        background: lighten(#018189, .05);
+        @include size(width, 135px);
+    }
+    .learn-more {
+        text-align: center;
+        margin: auto;
+        @include size(font-size, 10px);
+        padding: .5em;
+        @include min-screen(420px) {
+            padding: 0;
+        }
+    }
+    .description {
+        @include size(padding-left, 6px);
+
+        a {
+            display: block;
+            color: black;
+            @include size(padding, 0 3px);
+        }
+    }
+    strong {
+        @include size(font-size, 15px);
+        @include size(padding, 3px 0 0);
+    }
+    .progress {
+        .piece {
+            @include size(font-size, 13px);
+            @include size(padding, 4px 6px);
+        }
+        @include size(margin, 3px 12px 4px 0);
+        @include size(border-radius, 20px);
+        background-image: url(/static/img/progress-pixel.png);
+        background-repeat: repeat-y;
+        background-color: mix(#ec6d00, orange, .5);
+        @include box-shadow(1px 1px 1px #888);
+    }
+    .with-button {
+        clear: left;
+        @include min-screen(420px) {
+            clear: none;
+            @include size(margin-left, 171px);
+        }
+    }
+
+    .funding-title {
+        @include size(font-size, 11px);
+    }
+    .funding-title-strong {
+        @extend .funding-title;
+        font-weight: bold;
+        @include size(font-size, 15px);
+    }
+    .close {
+        position: absolute;
+        top: 0px;
+        @include size(right, 5px);
+    }
+}
+
+.funding-top-header {
+    @extend .funding;
+
+    @include min-screen(1000px) {
+        @include size(width, 975px);
+    }
+}
+
+
+.wlfund {
+    width: 100%;
+    border-spacing:0;
+
+    td {
+        @include size(padding, 10px 5px 10px);
+        text-align: center;
+        @include size(border-top, 10px solid rgba(255, 255, 255, 0));
+        @include size(border-bottom, 2px solid #DDDDDD);
+
+        background-clip: padding-box;
+        -moz-background-clip: padding;
+        -webkit-background-clip: padding;
+    }
+    td.oneline {
+        white-space: nowrap;
+    }
+
+    td:last-child {
+        text-align: right;
+    }
+
+    .funding-plus td {
+        background-color: mix(#0D7E85, white, .2);
+    }
+
+    .funding-minus td {
+        background-color: white;
+    }
+}
+
+
+
+.honking {
+    background: #018189;
+    @include size(font-size, 15px);
+    @include size(padding, 7.5px);
+    color: white;
+    border: 0;
+    @include box-shadow(3px 3px 4.5px #888888);
+    position: relative;
+}
+.honking:hover {
+    @include box-shadow(none);
+    @include size(top, 1px);
+    @include size(left, 1px);
+}
+
+
+
+.share {
+    a {
+        @include size(margin-right, 15px);
+
+        img {
+            vertical-align: middle;
+        }
+    }
+}
+
+.funding-handle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    background: orange;
+    cursor: pointer;
+    @include size(padding, 2.6px 13px);
+    @include size(border-radius, 0 0 0 10px);
+    @include size(font-size, 13px);
+}
+
+.funding-cover {
+    float: left;
+    @include size(margin-right, 10px);
+}
+
+.funding-details-intro {
+    @include size(padding-top, 10px);
+    
+    h3:first-of-type {
+        margin-top: 0;
+    }
+}
diff --git a/apps/wolnelektury_core/static/scss/main/auth.scss b/apps/wolnelektury_core/static/scss/main/auth.scss
new file mode 100755 (executable)
index 0000000..03cf615
--- /dev/null
@@ -0,0 +1,44 @@
+.email_list {
+    .verified {
+        display: inline-block;
+        margin-left: 2em;
+        font-style: italic;
+    }
+    .unverified {
+        display: inline-block;
+        margin-left: 2em;
+        color: #717171;
+        font-style: italic;
+    }
+    .primary {
+        display: inline-block;
+        margin-left: 2em;
+        font-weight: bold;
+    }
+}
+
+.socialaccount_provider {
+    display: inline-block;
+    background-repeat: no-repeat;
+    color: transparent;
+    
+    @include size(height, 40px);
+    @include size(width, 40px);
+    vertical-align: middle;
+
+    &.google {
+        background-image: url(/static/img/auth/google.png);
+    }
+}
+
+
+.socialaccount_providers {
+    @include size(margin, 10px 0);
+    padding: 0;
+
+    li {
+        display: inline;
+        list-style: none;
+        @include size(margin-right, 10px);
+    }
+}
diff --git a/apps/wolnelektury_core/static/scss/main/base.scss b/apps/wolnelektury_core/static/scss/main/base.scss
new file mode 100755 (executable)
index 0000000..02f02a3
--- /dev/null
@@ -0,0 +1,101 @@
+/* Basic layout */
+html, body {
+    margin: 0;
+    padding: 0;
+}
+
+
+.clearboth {
+    clear: both;
+}
+
+
+
+/* Basic colors and fonts */
+body {
+    font-family: Georgia;
+    background: #f7f7f7;
+    color: black;
+
+    @include size(font-size, 13px);
+}
+
+a {
+    color: #0d7e85;
+    text-decoration: none;
+
+    img {
+        border: 0;
+    }
+}
+
+h1 {
+    @include size(font-size, 35px);
+    font-weight: normal;
+    @include size(margin-top, 14px);
+
+    a {
+        color: inherit;
+    }
+}
+
+h2 {
+    @include size(font-size, 20px);
+    font-weight: normal;
+}
+
+h3 {
+    @include size(font-size, 15px);
+    font-weight: normal;
+}
+
+
+.normal-text {
+    line-height: 1.3em;
+}
+
+.white-box {
+    @include size(padding, 10px);
+    @include white-box;
+}
+
+
+ul.plain {
+    list-style:none;
+    margin: 0;
+    padding: 0;
+}
+
+
+.theme-list-link {
+    @include mono;
+    @include size(font-size, 11px);
+    
+    &:after {
+        @include size(padding-left, 11px);
+        content: url("/static/img/arrow-teal.png");
+        vertical-align: middle;
+    }
+}
+
+
+.left-column, .right-column {
+    @include size(max-width, 600px);
+}
+@media screen and (min-width: 62.5em) {
+    .left-column {
+        @include size(width, 470px);
+        float: left;
+    }
+    .right-column {
+        @include size(width, 470px);
+        float:right;
+    }
+}
+
+.pagination {
+    display: block;
+    @include size(font-size, 12px);
+    @include size(padding, 6px);
+    text-align:center;
+}
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
@@ -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);
+        }
+    }
+}
diff --git a/apps/wolnelektury_core/static/scss/main/book_list.scss b/apps/wolnelektury_core/static/scss/main/book_list.scss
new file mode 100755 (executable)
index 0000000..d4115dc
--- /dev/null
@@ -0,0 +1,92 @@
+/* listing of all books */
+
+#book-a-list {
+    #book-list-nav {
+        @include size(border-width, 0);
+        @include size(border-bottom-width, 1px);
+        border-style: solid;
+        border-color: #CFCFCF;
+        @include size(padding, 9.75px);
+        line-height: 2em;
+
+        @media screen and (min-width: 30em) {
+            @include size(border-bottom-width, 0px);
+            @include size(border-left-width, 1px);
+            float: right;
+            width: 50%;
+        }
+
+        @media screen and (min-width: 62.5em) {
+            line-height: 1.3em;
+        }
+
+        h2 {
+            cursor: pointer;
+
+            &:after {
+                @include size(padding-left, 10px);
+                content: url("/static/img/arrow-gray.png");
+                vertical-align: top;
+            }
+
+            @media screen and (min-width: 30em) {
+                font-size: 1em;
+                margin: 0;
+                cursor: regular;
+
+                &:after {
+                    display: none;
+                }
+            }
+        }
+
+        #book-list-nav-index {
+            display: none;
+            @media screen and (min-width: 30em) {
+                display: block !important;
+            }
+        }
+
+        ul {
+            list-style-type: none;
+            @include size(margin, 5px);
+            padding: 0;
+        }
+        .book-list-show-index {
+            display: none;
+        }
+    }
+
+    #book-list {
+        @include size(padding-left, 5px);
+        line-height: 2em;
+
+        @media screen and (min-width: 62.5em) {
+            @include size(padding-left, 50px);
+            line-height: 1.3em;
+        }
+
+        ol {
+            @include size(padding-left, 13px);
+            @include size(margin, 4px 0 15.6px 0);
+            list-style: none;
+        }
+        h2 {
+            @include size(font-size, 13px);
+            margin: 0;
+            a {
+                color: black;
+            }
+        }
+    }
+
+    #book-list-up {
+        display: block;
+        position: fixed;
+        @include size(bottom, 50px);
+        @include size(right, 50px);
+        @include size(border-left, solid 1px #CFCFCF);
+        @include size(padding, 20px 10px);
+        background-color: white;    
+    }
+}
diff --git a/apps/wolnelektury_core/static/scss/main/catalogue.scss b/apps/wolnelektury_core/static/scss/main/catalogue.scss
new file mode 100755 (executable)
index 0000000..ba30e82
--- /dev/null
@@ -0,0 +1,29 @@
+/* listing of all books */
+
+.catalogue-catalogue {
+    ul {
+        column-width: 25em;
+        -moz-column-width: 25em;
+        -webkit-column-width: 25em;
+
+        @include size(padding-left, 10px);
+
+        @media screen and (min-width: 20em) {
+            @include size(padding-left, 40px);
+        }
+
+        li {
+            margin-bottom: 1em;
+
+            @media screen and (min-width: 62.5em) {
+                margin-bottom: .5em;
+            }
+        }
+    }
+
+    h2 {
+        @include size(font-size, 26px);
+        margin: 0;
+        @include size(padding, 26px);
+    }
+}
diff --git a/apps/wolnelektury_core/static/scss/main/cite.scss b/apps/wolnelektury_core/static/scss/main/cite.scss
new file mode 100755 (executable)
index 0000000..b956288
--- /dev/null
@@ -0,0 +1,45 @@
+.cite {
+    display: block;
+    color: black;
+    background: white;
+    @include size(padding, 30px 20px 1px 80px);
+
+    .vip {
+        margin: 0;
+        color: #575C63;
+        @include size(font-size, 11px);
+    }
+
+    .cite-body {
+        @include size(font-size, 18px);
+        line-height: 1.3em;
+    }
+
+    blockquote {
+        padding: 0;
+        margin: 0;
+
+        p {
+            margin: 0;
+        }
+    }
+
+    .source
+    {
+        color: #444;
+        @include mono;
+        @include size(font-size, 11px);
+        @include size(margin-top, 16px);
+    }
+}
+
+
+
+
+.book-wide-box .cite {
+    background-color: #f7f7f7;
+    vertical-align: middle;
+    @include size(width, 395px);
+    margin: 0;
+    @include size(padding, 10px);
+}
diff --git a/apps/wolnelektury_core/static/scss/main/dialogs.scss b/apps/wolnelektury_core/static/scss/main/dialogs.scss
new file mode 100755 (executable)
index 0000000..2902862
--- /dev/null
@@ -0,0 +1,138 @@
+.dialog-window {
+    position: absolute;
+    display: none;
+    background-color: transparent;
+    @include size(margin-top, -5px);
+    @include size(margin-left, 10px);
+    @include size(width, 200px);
+
+    @media screen and (max-width: 29.999999em) {
+        left: 0 !important;
+        right: 0;
+        @include size(margin-left, 0);
+        width: auto;
+    }
+
+    div.header {
+        @include mono;
+        @include size(font-size, 11px);
+        width: 4em;
+        background-color: #FFF;
+        padding: 1em;
+        right: 0;
+        left: auto;
+        float: right;
+        text-align: center;
+
+        @media screen and (min-width: 30em) {
+            padding-top: 0.5em;
+            padding-bottom: 0.5em;
+            border-right: 0.3em solid #DDD;
+        }
+    }
+
+    div.target {
+        background-color: #FFF;
+        color: black;
+        border-bottom: 0.3em solid #DDD;
+        padding: 1em 10px;
+        clear: both;
+
+        @media screen and (min-width: 30em) {
+            border-right: 0.3em solid #DDD;
+            padding-left: 1em;
+            padding-right: 1em;
+        }
+    }
+
+    h1 {
+        @include size(font-size, 12px);
+        font-weight: normal;
+        margin-top: .4em;
+    }
+
+    textarea, input {
+        width: 100%;
+    }
+}
+
+
+
+
+
+
+
+.cuteform {
+    @include size(font-size, 11px);
+
+    ol, ul {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        @include size(font-size, 11px);
+
+        li {
+            margin-top: 0.7em;
+        }
+    }
+
+    label {
+        display: block;
+    }
+
+    span.help-text {
+        display: block;
+        font-size: 0.8em;
+        color: #999;
+    }
+
+    .error {
+        color: #BF3024;
+        display: block;
+    }
+
+    .errorlist {
+        color: #BF3024;
+    }
+}
+
+
+.jqmOverlay { background-color: #000; }
+
+
+
+.hidelabels label {
+    @include hidden-label;
+}
+
+
+@media screen and (min-width: 30em) {
+    #login-window {
+        @include size(width, 260px);
+    }
+    #register-window {
+        width: 26em;
+    }
+    #context-login-window {
+        width: 26em;
+    }
+    #suggest-window {
+        width: 26em;
+    }
+    #suggest-publishing-window {
+        width: 29em;
+    }
+    #custom-pdf-window {
+        width: 24em;   
+    }
+}
+
+#suggest-window textarea {
+    height: 6em;
+}
+#suggest-publishing-window textarea {
+    height: 3em;
+}
+#custom-pdf-window label {
+    display: inline;
+}
diff --git a/apps/wolnelektury_core/static/scss/main/footer.scss b/apps/wolnelektury_core/static/scss/main/footer.scss
new file mode 100755 (executable)
index 0000000..8969a5a
--- /dev/null
@@ -0,0 +1,26 @@
+#footer-wrapper {
+    @include size(margin-top, 50px);
+    @include size(padding-top, 30px);
+    background: #fff;
+    color: #767676;
+    @include size(border-top, 1px solid #ddd);
+}
+
+footer#main {
+    @include size(font-size, 10px);
+    @include size(margin-left, 5px);
+    @include size(margin-right, 5px);
+
+    @media screen and (min-width: 62.5em) {
+        @include size(width, 975px);
+        margin: auto;
+    }
+
+    p {
+        @include size(margin-top, 2.5px);
+        @include size(margin-bottom, 2.5px);
+        margin-left: 0;
+        margin-right: 0;
+    }
+}
+
diff --git a/apps/wolnelektury_core/static/scss/main/form.scss b/apps/wolnelektury_core/static/scss/main/form.scss
new file mode 100755 (executable)
index 0000000..42e8675
--- /dev/null
@@ -0,0 +1,26 @@
+form table {
+    th {
+        vertical-align: top;
+        text-align: left;
+        font-weight: normal;
+    }
+    td {
+        padding-bottom: 1em;
+    }
+
+    .required th:after {
+        content: " *";
+    }
+
+    .errorlist {
+        color: red;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+    .helptext {
+        color: #888;
+        font-size: .9em;
+        font-style: italic;
+    }
+}
diff --git a/apps/wolnelektury_core/static/scss/main/fragment.scss b/apps/wolnelektury_core/static/scss/main/fragment.scss
new file mode 100755 (executable)
index 0000000..1eaf61c
--- /dev/null
@@ -0,0 +1,14 @@
+.Fragment-item {
+    @include size(margin-bottom, 20px);
+    @include white-box;
+
+    .fragment {
+        color: black;
+        display: block;
+    }
+    .toggle {
+        @include size(font-size, 11px);
+        display: block;
+        @include size(padding, 5px 0);
+    }
+}
diff --git a/apps/wolnelektury_core/static/scss/main/header.scss b/apps/wolnelektury_core/static/scss/main/header.scss
new file mode 100755 (executable)
index 0000000..4edd53e
--- /dev/null
@@ -0,0 +1,215 @@
+$header_bg: #191919;
+
+
+#header-wrapper {
+    position: relative;
+
+    /* Upper-half both sides dark background */
+    &:before {
+        content: " ";
+        display: block;
+        z-index: -1;
+        position: absolute;
+        top: 0;
+        @include size(bottom, 45px);
+        left: 0;
+        width: 100%;
+        background-color: $header_bg;
+    }
+
+    /* Left-side dark background */
+    &:after {
+        content: " ";
+        display: block;
+        z-index: -1;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 50%;
+        background-color: $header_bg;
+    }
+}
+
+
+header#main {
+    @include size(line-height, 20px); /* Make links easier to click when wrapped. */
+    background-color: $header_bg;
+    color: #bbb;
+
+    @media screen and (min-width: 62.5em) {
+        position: relative;
+        @include size(height, 94px);
+        @include size(width, 975px);
+        margin: auto;
+    }
+
+    a {
+        color: #17CFDB;
+    }
+
+    #logo {
+        display: block;
+        @include size(height, 94px);
+        @include size(width, 94px);
+
+        @media screen and (min-width: 24em) {
+            float: left;
+        }
+
+        img {
+            display: block;
+        }
+    }
+
+    #tagline {
+        margin-top: 0;
+        @include size(margin-left, 5px);
+        @include size(margin-right, 5px);
+        padding-top: 0;
+        @include size(font-size, 11px);
+
+        @media screen and (min-width: 24em) {
+            @include size(padding-top, 6px);
+            @include size(font-size, 13px);
+            text-align: right;
+        }
+
+        @media screen and (min-width: 62.5em) {
+            position: absolute;
+            @include size(top, 10px);
+            @include size(left, 255px);
+            @include size(margin-left, 0px);
+        }
+    }
+
+    #user-info {
+        margin-top: 0;
+        @include size(margin-left, 5px);
+        @include size(margin-right, 5px);
+        padding-top: 0;
+        @include mono;
+        @include size(font-size, 10px);
+        position: relative;
+
+        @media screen and (min-width: 24em) {
+            @include size(padding-top, 15px);
+            text-align: right;
+        }
+        @media screen and (min-width: 62.5em) {
+            position: absolute;
+            top: 0;
+            right: 0;
+            @include size(margin-left, 0);
+            @include size(margin-right, 0);
+        }
+
+        /* We want submenu on far left on small screens. */
+        .hidden-box-wrapper {
+            position: static;
+            @media screen and (min-width: 24em) {
+                position: relative;
+            }
+        }
+
+        #user-menu {
+            display: none;
+
+            text-align: left;
+            line-height:1.6em;
+            left: 0;
+            right: 0;
+            top: 2em;
+
+            @media screen and (min-width: 15em) {
+                right: auto;
+                width: 15em;
+            }
+
+            a {
+                color: #0D7E85;
+            }
+        }
+    }
+
+    form#search-area {
+        position: relative;
+        clear: both;
+        @include size(height, 45px);
+        background: #444444;
+        color: white;
+
+        @media screen and (min-width: 62.5em) {
+            position: absolute;
+            @include size(top, 49px);
+            @include size(left, 240px);
+            @include size(right, 0);
+        }
+
+        #search-field {
+            position: absolute;
+            @include size(top, 5px);
+            @include size(left, 5px);
+            @include size(right, 113px);
+
+            label {
+                @include hidden-label;
+            }
+            input#search {
+                z-index: 200;
+                position: relative;
+                @include size(height, 33px);
+                width: 100%;
+                padding: 0;
+                @include size(padding-left, 13px);
+                @include size(line-height, 32.5px);
+
+                border: none;
+                @include size(border-radius, 5px);
+                @include box-shadow(0 0 6.5px #444444 inset);
+
+                font-family: Georgia;
+                @include size(font-size, 13px);
+                background-color: white;
+                color: black;
+
+                /* styling search placeholder */
+                &::placeholder
+                {
+                    font-family: Georgia;
+                    font-style: italic;
+                    color: #767676;
+                }
+                &::-webkit-input-placeholder
+                {
+                    font-family: Georgia;
+                    font-style: italic;
+                    color: #767676;
+                }
+                &::-moz-placeholder
+                {
+                    font-family: Georgia;
+                    font-style: italic;
+                    color: #767676;
+                }
+            }
+        }
+        button {
+            display: inline-block;
+            position: absolute;
+            top: 0;
+            right: 0;
+            @include size(height, 45px);
+            @include size(width, 94px);
+            margin: 0;
+            padding: 0;
+
+            border: none;
+
+            @include mono;
+            @include size(font-size, 11px);
+            background: #018189;
+            color: white;
+        }
+    }
+}
diff --git a/apps/wolnelektury_core/static/scss/main/hidden.scss b/apps/wolnelektury_core/static/scss/main/hidden.scss
new file mode 100755 (executable)
index 0000000..718525b
--- /dev/null
@@ -0,0 +1,53 @@
+.hidden-box-wrapper {
+    position: relative;
+
+    .hidden-box {
+        position: absolute;
+        left: 0;
+        display: none;
+        @include size(padding, 10px 10px 5px 10px);
+        @include white-box;
+
+        z-index: 500;
+
+        ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            @include size(font-size, 11px);
+
+            @include size(column-width, 132px);
+            @include size(-moz-column-width, 132px);
+            @include size(-webkit-column-width, 132px);
+
+            @media screen and (min-width: 24em) {
+                @include size(width, 320px);
+            }
+
+            @media screen and (min-width: 34em) {
+                @include size(width, 480px);
+            }
+
+            @media screen and (min-width: 62.5em) {
+                @include size(width, 528px);
+            }
+
+
+
+            li {
+                margin-bottom: 1em;
+
+                @media screen and (min-width: 62.5em) {
+                    margin-bottom: .5em;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (min-width: 24em) {
+    #menu-collections ul {
+        @include size(width, 180px);
+    }
+}
+
diff --git a/apps/wolnelektury_core/static/scss/main/main_content.scss b/apps/wolnelektury_core/static/scss/main/main_content.scss
new file mode 100755 (executable)
index 0000000..87e1402
--- /dev/null
@@ -0,0 +1,8 @@
+#main-content {
+    position: relative;
+
+    @media screen and (min-width: 62.5em) {
+        @include size(width, 975px);
+        margin: auto;
+    }
+}
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
@@ -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);
+        }
+    }
+}
diff --git a/apps/wolnelektury_core/static/scss/main/menu.scss b/apps/wolnelektury_core/static/scss/main/menu.scss
new file mode 100755 (executable)
index 0000000..38a7d20
--- /dev/null
@@ -0,0 +1,176 @@
+#nav-line {
+    background-color: #e2e2e2;
+    position: relative;
+
+    @media screen and (min-width: 62.5em) {
+        @include size(width, 975px);
+        margin: auto;
+    }
+
+    #show-menu {
+        display: block;
+        float: left;
+        @include size(line-height, 13px);
+        @include size(padding, 18px 13px);
+        color: #0c7076;
+        @include size(font-size, 11px);
+        @include mono;
+
+        .long {
+            display: none;
+
+            &:after {
+                @include size(padding-left, 10px);
+                content: url("/static/img/arrow-gray.png");
+                vertical-align: top;
+            }
+        }
+
+        @media screen and (min-width: 20em) {
+            .long { display: inline; }
+            .short { display: none; }
+        }
+
+        @media screen and (min-width: 53em) {
+            display: none;
+        }
+    }
+
+    ul#menu {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        display: none;
+        position: absolute;
+        @include size(top, 49px);
+        left: 0;
+        @include size(right, 10px);
+        z-index: 400;
+
+        @media screen and (min-width: 24em) {
+            right: auto;
+        }
+
+        @media screen and (min-width: 53em) {
+            display: block !important;
+            position: static;
+            @include size(margin-left, 6px);
+        }
+
+        li.menu {
+            background-color: #e2e2e2;
+
+            @media screen and (min-width: 53em) {
+                float: left;
+            }
+
+            a.menu {
+                display: block;
+                @include size(line-height, 13px);
+                @include size(padding, 18px 13px 15px);
+                @include size(border-bottom, 3px solid #e2e2e2);
+                color: #0c7076;
+                @include size(font-size, 11px);
+                @include mono;
+            }
+
+            a.hidden-box-trigger:hover {
+                border-bottom-color: white;
+            }
+        }
+    }
+
+    #lang-menu {
+        display: block;
+        float: right;
+
+        @include size(padding-left, 25px);
+        @include size(padding-right, 20px);
+        background: #f7f7f7;
+        @include mono;
+
+        @media screen and (min-width: 15em) {
+            position: relative;
+        }
+
+        #lang-button {
+            display:block;
+            @include size(line-height, 17px);
+            @include size(padding-top, 16px);
+            @include size(padding-bottom, 16px);
+
+            @include size(font-size, 10px);
+            color: #717171;
+
+            .label {
+                display: none;
+
+                @media screen and (min-width: 62.5em) {
+                    display: inline;
+                }
+
+                &:after {
+                    @include size(padding-left, 10px);
+                    content: url("/static/img/arrow-gray.png");
+                    vertical-align: top;
+                }
+            }
+
+            .lang-flag {
+                @include size(font-size, 13px);
+                @include size(line-height, 15px);
+            }
+        }
+
+        #lang-menu-items {
+            z-index: 9999;
+
+            button {
+                @include mono;
+                display: none;
+                background: #f7f7f7;
+                color: #6f6f6f;
+                cursor: pointer;
+                width: 100%;
+                margin: 0;
+                @include size(padding, 10px 0);
+
+                @media screen and (min-width: 62.5em) {
+                    @include size(padding, 5px 0);
+                }
+
+                border-width: 0;
+                @include size(border-bottom, 1px solid #ddd);
+
+                @include size(font-size, 13px);
+
+                &.active {
+                    color: #000;
+                }
+            }
+        }
+
+        &:hover, &.hover {
+            #lang-menu-items {
+                position: absolute;
+                padding: 0;
+                left: 0;
+                right: 0;
+
+                @media screen and (min-width: 15em) {
+                    left: auto;
+                    @include size(width, 180px);
+                    @include size(top, 49px);
+                }
+                @media screen and (min-width: 62.5em) {
+                    width: 100%;
+                }
+
+                button {
+                    display: block;
+                }
+            }
+        }
+    }
+}
diff --git a/apps/wolnelektury_core/static/scss/main/search.scss b/apps/wolnelektury_core/static/scss/main/search.scss
new file mode 100755 (executable)
index 0000000..2dac56a
--- /dev/null
@@ -0,0 +1,84 @@
+/* jquery UI overrides us */
+.ui-menu .ui-menu-item a {
+    color: #0d7e85 !important;
+    line-height: 1.636em !important;
+}
+
+.ui-widget {
+    font-family: Georgia !important;
+    @include size(font-size, 10px !important);
+}
+
+.ui-widget-content {
+    background: #EEEEEE !important; /* #E2E2E2 ? */
+    border-radius: 0px !important;
+}
+
+
+
+.inline-tag-lists p span:first-child {
+    color: #281d1c;
+}
+
+/* just on search page */
+.top-tag-list {
+    @include size(margin-top, 22px);
+    @include size(margin-bottom, 16px);
+}
+
+
+.search-result {
+    @include size(width, 975px);
+
+    .book-box-body {
+        @include size(width, 310px);
+    }
+}
+
+
+
+.book-list-header {
+    @include size(width, 975px);
+    padding: 0em;
+    @include size(margin-left, -1px);
+
+    .book-box-inner {
+        min-height: 1em;
+    }
+
+    p {
+        @include size(font-size, 24px);
+        @include size(margin, 5px);
+    }
+}
+
+.snippets {
+    @include size(width, 440px);
+    float: right;
+    @include size(margin-top, -200px);
+
+    .snippet-text {
+        @include size(font-size, 12px);
+        @include size(margin, 13px 0);
+        @include size(padding, 12px);
+        background: #f7f7f7;
+    }
+
+    .anchor {
+        display: none;
+    }
+}
+
+
+.search-hint-label {
+    display: inline-block;
+    @include size(font-size, 11px);
+    @include size(width, 275px);
+    line-height: 1.636em;
+}
+
+.search-hint-category {
+    @include size(font-size, 11px);
+    line-height: 1.636em;
+}
+
diff --git a/apps/wolnelektury_core/static/scss/main/tag.scss b/apps/wolnelektury_core/static/scss/main/tag.scss
new file mode 100755 (executable)
index 0000000..844d3da
--- /dev/null
@@ -0,0 +1,102 @@
+.page-desc {
+    @include size(margin-left, 15px);
+}
+
+#tagged-object-list {
+    @media screen and (min-width: 62.5em) {
+        .left-column, .right-column {
+            @include size(width, 480px);
+        }
+    }
+
+    .see-also, .download {
+        float: left;
+        @include size(margin-top, 20px);
+        @include size(margin-bottom, 20px);
+
+        h2 {
+            @include mono;
+            @include size(font-size, 11px);
+            margin: 0;
+        }
+
+        ul {
+            @include size(font-size, 11px);
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+    }
+
+    .see-also {
+        @include size(margin-left, 80px);
+        @include size(width, 143px);
+    }
+    .download {
+        @include size(margin-left, 20px);
+    }
+
+    .left-column .see-also {
+        margin-left: 0;
+    }
+}
+
+#description {
+    @include size(margin-bottom, 26px);
+    cursor: pointer;
+
+    dl {
+        margin-top: 0;
+    }
+    dt {
+        display: inline;
+        font-weight: bold;
+        margin: 0;
+    }
+    dd {
+        display: inline;
+        margin: 0;
+    }
+    p {
+        margin-top: 0;
+    }
+    #description .meta {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    #description .meta li {
+        text-align: right;
+        color: #666;
+        @include size(font-size, 11.7px);
+    }
+}
+
+.inline-tag-lists {
+    @include size(font-size, 11px);
+
+    .inline-header {
+        @include mono;
+        display: inline-block;
+        vertical-align: top;
+        @include size(width, 77px);
+    }
+
+    .inline-body {
+        display: inline-block;
+        vertical-align: top;
+        @include size(margin-bottom, 5.5px);
+        @include size(width, 385px);
+
+        ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+
+            li {
+                display: inline-block;
+                @include size(margin-right, 11px);
+            }
+        }
+    }
+}
diff --git a/apps/wolnelektury_core/static/scss/polls/polls.scss b/apps/wolnelektury_core/static/scss/polls/polls.scss
new file mode 100644 (file)
index 0000000..28cd5a5
--- /dev/null
@@ -0,0 +1,21 @@
+.poll {\r
+    width: 400px;\r
+    ul {\r
+        list-style-type: none;\r
+    }\r
+}\r
+\r
+.poll-bar {\r
+    border: solid 1px #ddd;\r
+    height:6px;\r
+    margin-bottom: 10px;\r
+}\r
+\r
+.poll-bar-inner {\r
+    background: orange;\r
+    height: 6px;\r
+}\r
+\r
+.poll-msg {\r
+    font-weight: bold;\r
+}
\ No newline at end of file
diff --git a/apps/wolnelektury_core/static/scss/tools.scss b/apps/wolnelektury_core/static/scss/tools.scss
new file mode 100644 (file)
index 0000000..76869c4
--- /dev/null
@@ -0,0 +1,70 @@
+$default-em-size: 16px;
+
+@mixin size($name, $args) {
+    $rems: snowflake;
+    @each $val in $args {
+        $remval: $val;
+        @if type-of($val) == number {
+            @if unit($val) == "px" {
+                $remval: $val / $default-em-size * 1rem;
+            }
+        }
+        // Workaround for PySCSS issue with appending to empty lists.
+        @if $rems == snowflake {
+            $rems: $remval;
+        }
+        @else {
+            $rems: append($rems, $remval);
+        }
+    }
+    #{$name}: $args;
+    #{$name}: $rems;
+}
+
+@mixin min-screen($size) {
+    @if unit($size) == "px" {
+        $size: $size / $default-em-size * 1em;
+    }
+
+    @media screen and (min-width: $size) {
+        @content;
+    }
+}
+
+
+@mixin vendors($name, $args) {
+    @include size(-moz + $name, $args);
+    @include size(-webkit + $name, $args);
+    @include size(-moz + $name, $args);
+}
+
+@mixin vendors($names, $args) {
+    @each $name in $names {
+        @include size($name, $args);
+    }
+}
+
+@mixin box-shadow($args) {
+    @include vendors(
+        -moz-box-shadow
+        -webkit-box-shadow
+        box-shadow,
+            $args);
+}
+
+@mixin mono {
+    font-family: "Andale Mono", "Lucida Sans Typewriter", "Courier New";
+}
+
+@mixin hidden-label {
+    display: block;
+    @include size(width, 1px);
+    @include size(height, 1px);
+    overflow: hidden;
+}
+
+@mixin white-box {
+    @include size(border, 1px solid #ddd);
+    background: #fff;
+    @include box-shadow(2px 2px 2px #ddd);
+}
index e7cceed..9cdc60b 100644 (file)
@@ -22,18 +22,15 @@ PIPELINE_CSS = {
         'source_filenames': [
             'css/jquery.countdown.css', 
 
         'source_filenames': [
             'css/jquery.countdown.css', 
 
-            'css/main/*.scss',
-
             'sponsors/css/sponsors.css',
             'sponsors/css/sponsors.css',
-            'funding/funding.scss',
-            'polls/polls.scss',
-
             'css/social/shelf_tags.css',
 
             'uni_form/uni-form.css',
             'uni_form/default.uni-form.css',
 
             'css/ui-lightness/jquery-ui-1.8.16.custom.css',
             'css/social/shelf_tags.css',
 
             'uni_form/uni-form.css',
             'uni_form/default.uni-form.css',
 
             'css/ui-lightness/jquery-ui-1.8.16.custom.css',
+
+            'scss/all.scss',
         ],
         'output_filename': 'css/compressed/main.css',
     },
         ],
         'output_filename': 'css/compressed/main.css',
     },