Main page looks almost ok now.
authorRadek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>
Wed, 3 Jul 2013 15:09:27 +0000 (17:09 +0200)
committerRadek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>
Wed, 3 Jul 2013 15:09:27 +0000 (17:09 +0200)
22 files changed:
.gitignore
apps/catalogue/templates/catalogue/menu.html
apps/wolnelektury_core/static/css/base.css
apps/wolnelektury_core/static/css/book_box.css
apps/wolnelektury_core/static/css/cite.css
apps/wolnelektury_core/static/css/header.css
apps/wolnelektury_core/static/css/main/_tools.scss [new file with mode: 0755]
apps/wolnelektury_core/static/css/main/base.scss [new file with mode: 0755]
apps/wolnelektury_core/static/css/main/book_box.scss [new file with mode: 0755]
apps/wolnelektury_core/static/css/main/cite.scss [new file with mode: 0755]
apps/wolnelektury_core/static/css/main/dialogs.scss [new file with mode: 0755]
apps/wolnelektury_core/static/css/main/footer.scss [new file with mode: 0755]
apps/wolnelektury_core/static/css/main/header.scss [new file with mode: 0755]
apps/wolnelektury_core/static/css/main/hidden.scss [new file with mode: 0755]
apps/wolnelektury_core/static/css/main/main_content.scss [new file with mode: 0755]
apps/wolnelektury_core/static/css/main/main_page.scss [new file with mode: 0755]
apps/wolnelektury_core/static/css/main/menu.scss [new file with mode: 0755]
apps/wolnelektury_core/static/css/main_page.css
apps/wolnelektury_core/static/css/screen.css
apps/wolnelektury_core/templates/main_page.html
apps/wolnelektury_core/templates/superbase.html
wolnelektury/settings/static.py

index 6714e23..3224d62 100644 (file)
@@ -10,6 +10,9 @@ dev.sqlite
 # Compress output
 /static
 
 # Compress output
 /static
 
+# SCSS output
+/apps/wolnelektury_core/static/css/main/*.css
+
 # Python garbage
 *.pyc
 .coverage
 # Python garbage
 *.pyc
 .coverage
index 4fe7769..d3f2728 100644 (file)
@@ -4,7 +4,7 @@
     {% for category, name, hash in categories %}
        <li class="hidden-box-wrapper menu">
                <a href="{% url 'catalogue' %}#{{ hash }}" class="hidden-box-trigger menu load-menu">
     {% for category, name, hash in categories %}
        <li class="hidden-box-wrapper menu">
                <a href="{% url 'catalogue' %}#{{ hash }}" class="hidden-box-trigger menu load-menu">
-                       <span class='mono'>{{ name }}</span></a>
+                       {{ name }}</a>
                <div class="hidden-box" id="menu-{{ category }}">
             <img src="{% static "img/indicator.gif" %}" alt="{% trans "Please wait…" %}" />
         </div>
                <div class="hidden-box" id="menu-{{ category }}">
             <img src="{% static "img/indicator.gif" %}" alt="{% trans "Please wait…" %}" />
         </div>
@@ -13,7 +13,7 @@
 
        <li class="hidden-box-wrapper menu">
                <a href="{% url 'catalogue' %}#kolekcje" class="hidden-box-trigger menu load-menu">
 
        <li class="hidden-box-wrapper menu">
                <a href="{% url 'catalogue' %}#kolekcje" class="hidden-box-trigger menu load-menu">
-                       <span class='mono'>{% trans "Collections" %}</span></a>
+                       {% trans "Collections" %}</a>
                <div class="hidden-box" id="menu-collections">
             <img src="{% static "img/indicator.gif" %}" alt="{% trans "Please wait…" %}" />
         </div>
                <div class="hidden-box" id="menu-collections">
             <img src="{% static "img/indicator.gif" %}" alt="{% trans "Please wait…" %}" />
         </div>
 
        <li class="menu">
                <a href="{% url 'book_list' %}" class="menu">
 
        <li class="menu">
                <a href="{% url 'book_list' %}" class="menu">
-                       <span class='mono'>{% trans "All books" %}</span></a>
+                       {% trans "All books" %}</a>
        </li>
        <li class="menu">
                <a href="{% url 'audiobook_list' %}" class="menu">
        </li>
        <li class="menu">
                <a href="{% url 'audiobook_list' %}" class="menu">
-                       <span class='mono'>{% trans "Audiobooks" %}</span></a>
+                       {% trans "Audiobooks" %}</a>
        </li>
        <li class="menu">
                <a href="{% url 'daisy_list' %}" class="menu">
        </li>
        <li class="menu">
                <a href="{% url 'daisy_list' %}" class="menu">
-                       <span class='mono'>{% trans "DAISY" %}</span></a>
+                       {% trans "DAISY" %}</a>
        </li>
 </ul>
        </li>
 </ul>
index 3496937..54099d1 100755 (executable)
@@ -1,25 +1,3 @@
-html {
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    margin: 0;
-    background: #f7f7f7;
-    font-size: .625em;
-    font-family: Georgia;
-    /*line-height: 1.4em;*/
-}
-
-a img {
-       border: 0;
-}
-
-a {
-    color: #0d7e85; /*#1199a2;*/ /* #01adba; */
-    text-decoration: none;
-}
-
 /* jquery UI overrides us */
 .ui-menu .ui-menu-item a {
     color: #0d7e85 !important;
 /* jquery UI overrides us */
 .ui-menu .ui-menu-item a {
     color: #0d7e85 !important;
@@ -72,11 +50,6 @@ h3 {
     font-weight: normal;
 }
 
     font-weight: normal;
 }
 
-.mono {
-    font-family: "Andale Mono", "Lucida Sans Typewriter", "Courier New";
-/*    font-weight: bold; */
-}
-
 .accent1 {
     color: #191919;
 }
 .accent1 {
     color: #191919;
 }
@@ -100,9 +73,7 @@ h3 {
 
 /* #281d1c */
 
 
 /* #281d1c */
 
-.clearboth {
-    clear: both;
-}
+
 
 .white-box {
     border: 1px solid #ddd;
 
 .white-box {
     border: 1px solid #ddd;
@@ -133,30 +104,6 @@ h3 {
 .theme-list-link {
     font-size: 1.1em;
 }
 .theme-list-link {
     font-size: 1.1em;
 }
-.hidden-box-wrapper {
-    position: relative;
-}
-.hidden-box {
-    position: absolute;
-    left: 0;
-    display: none;
-    border: 1px solid #ddd;
-    padding: 1em 1em .5em 1em;
-    background: #fff;
-    -moz-box-shadow: 2px 2px 2px #ddd;
-    -webkit-box-shadow: 2px 2px 2px #ddd;
-    box-shadow: 2px 2px 2px #ddd;
-    z-index: 500;
-}
-.hidden-box ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    font-size: 1.1em;
-}
-.hidden-box li {
-       margin-bottom: .5em;
-}
 
 
 .pagination {
 
 
 .pagination {
@@ -166,17 +113,6 @@ h3 {
        text-align:center;
 }
 
        text-align:center;
 }
 
-#footer {
-    color: #767676;
-    margin-top: 5em;
-    padding-top:3em;
-    background: #fff;
-    border-top: 1px solid #ddd;
-}
-#footer p {
-       margin: .25em 0;
-}
-
 /* just on search page */
 .top-tag-list {
     margin-top: 2.2em;
 /* just on search page */
 .top-tag-list {
     margin-top: 2.2em;
index 190ddd7..1a6e118 100755 (executable)
@@ -12,9 +12,7 @@
     width: 48.75em;
 }
 
     width: 48.75em;
 }
 
-.book-mini-box {
-    width: 16.15em;
-}
+
 
 .book-wide-box {
     /** This is a fullpage box, it must be aligned with the top menu. 
 
 .book-wide-box {
     /** This is a fullpage box, it must be aligned with the top menu. 
     box-shadow: 2px 2px 2px #ddd;
 }
 
     box-shadow: 2px 2px 2px #ddd;
 }
 
-.book-mini-box a {
-    height: 27.1em;
-    margin: .1em;
-    overflow: hidden;
-}
 
 
 .book-wide-box .book-box-inner {
 
 
 .book-wide-box .book-box-inner {
@@ -95,9 +88,6 @@
     width: 13.9em;
     height: 19.3em;
 }
     width: 13.9em;
     height: 19.3em;
 }
-.book-mini-box img.cover {
-    margin-bottom: 1.8em;
-}
 .book-box-inner .cover-area,
 .book-wide-box .cover-area
 {
 .book-box-inner .cover-area,
 .book-wide-box .cover-area
 {
     margin-right: 1.5em;
 }
 
     margin-right: 1.5em;
 }
 
-.book-mini-box .desc {
-    margin-left:0em;
-}
-.book-mini-box .author {
-    font-size: 1.1em;
-    color: #6d7877;
-    display: block;
-    overflow:hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.book-mini-box .title {
-    font-size: 1.4em;
-    color: #242424;
-}
-
 
 .book-box-body {
     height: 17em;
 
 .book-box-body {
     height: 17em;
index d397da2..8084bef 100755 (executable)
@@ -1,9 +1,3 @@
-.cite {
-    display: block;
-    color: black;
-    background: white;
-    padding: 3em 2em .1em 8em;
-}
 .book-wide-box .cite-body,
 #tagged-object-list .cite-body
  {
 .book-wide-box .cite-body,
 #tagged-object-list .cite-body
  {
     font-size: 1.1em;
     margin-top: 1.6em;
 }
     font-size: 1.1em;
     margin-top: 1.6em;
 }
-.cite .vip {
-    margin: 0;
-    color: #575C63;
-    font-size: 1.1em;
-}
-
-
-
-#big-cite {
-    background-color: #444;
-    color: white;
-    padding: 0;
-    margin: 0;
-    background-image: url(/static/img/backdrop/book-drawer2.jpg);
-    background-size: 100%;
-    background-position: 50% 68%;
-    background-repeat: no-repeat;
-}
-
-#big-cite .cite {
-    padding: 4.6em 4em 4.8em 0;
-    background: none;
-    color: white;
-}
-
-#big-cite h2 {
-    margin: 0;
-    font-size: 1.1em;
-    color: #575c63;
-}
-
-
-#big-cite .cite-body {
-    margin: .05em .05em .05em 1em;
-}
-#big-cite .cite-body span {
-    font-size: 3em;
-    line-height: 1.16em;
-}
-
-#big-cite .vip {
-       margin-left: 1em;
-       margin-top: .25em;
-}
-
-#big-cite .vip span {
-       font-size:1.1em;
-}
-
-#big-cite .cite-body span,
-#big-cite .vip span,
-#big-cite .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 */ 
-#big-cite .cite-small .cite-body span {
-       font-size: 2em;
-}
-
-
-#big-cite .source {
-    margin: 1.6em 0.2em 1.6em 1em;
-}
-#big-cite .source span {
-    font-size: 1.2em;
-}
-
-
-
-
-
-.cite blockquote p {
-    margin: 0;
-}
-
-.cite blockquote {
-    padding: 0;
-    margin: 0;
-}
-
 .book-wide-box .cite {
     position: relative;
     top: -1em;
 .book-wide-box .cite {
     position: relative;
     top: -1em;
index f1bd0df..ee0e76b 100755 (executable)
@@ -1,230 +1,3 @@
-#header-bg {
-       z-index: -1;
-       background: #191919;
-       position: absolute;
-       width: 50%;
-       height: 9.4em;
-}
-
-#header {
-    padding-bottom: 0;
-    color: #989898;
-    background: #191919;
-    position: relative;
-}
-#header a {
-       color: #17CFDB;
-}
-
-#half-header {
-    padding-bottom: 0;
-}
-
-#half-header-content {
-    background: #191919;
-    color: #989898;
-}
-
-#logo a, #logo img {
-    display: block;
-}
-
-#tagline {
-       margin-left: 1.5em;
-}
-
-#tagline span {
-    font-size: 1.3em;
-    color: #bbb;
-}
-
-#user-info {
-    margin: 0;
-}
-
-#search-area {
-    margin: 0;
-    background: #444;
-    color: white;
-}
-
-#search-field {
-    display: inline-block;
-    padding-left: .5em;
-    padding-top: 0.5em;
-    padding-bottom: 0;
-}
-
-#search {
-    font-size: 1.3em;
-    padding: 0;
-    /*height: 3.3em;
-    width: 62.6em;
-    padding-left: .5em;
-    -webkit-border-radius: .5em;
-    -moz-border-radius: .5em;
-    border: none;
-    border-radius: .5em;
-    -webkit-box-shadow:0 0 .5em #444 inset;
-    -moz-box-shadow:0 0 .5em #444 inset;
-    box-shadow: 0 0 .5em #444 inset;*/
-    height: 2.54em;
-    padding-left: 1em;
-    -webkit-border-radius: .38em;
-    -moz-border-radius: .38em;
-    border: none;
-    border-radius: .38em;
-    -webkit-box-shadow:0 0 .38em #444 inset;
-    -moz-box-shadow:0 0 .38em #444 inset;
-    box-shadow: 0 0 .5em #444 inset;
-    line-height: 2.5em;
-
-    font-family: Georgia;
-    background-color: #fff;
-    color: #000;
-    z-index: 200;
-    position: relative;
-}
-
-/* styling search placeholder */
-
-#search:-webkit-input-placeholder
-{
-    font-family: Georgia;
-    font-style: italic;
-    color: #767676;
-}
-
-#search.placeholder
-{
-    font-family: Georgia;
-    font-style: italic;
-    color: #767676;
-}
-
-#search:-moz-placeholder
-{
-    font-family: Georgia;
-    font-style: italic;
-    color: #767676;
-}
-
-#search-button {
-    display: inline-block;
-    background: #018189;
-    color: white;
-    padding: 0;
-    margin: 0;
-    width: 9.4em;
-}
-#search-button button {
-    font-size: 1em;
-    height: 4.5em;
-    border: none;
-    background: #018189;
-    color: white;
-    width: 100%;
-    padding: 0;
-}
-
-#search-button button span {
-    font-size: 1.1em;
-    position:relative;
-}
-
-
-#nav-line {
-    background-color: #e2e2e2;
-    height: 4.9em;
-}
-
-ul#menu {
-    list-style: none;
-    padding: 0;
-    margin: 0 0 0 .6em;
-}
-
-li.menu {
-    background-color: #e2e2e2;
-    float: left;
-}
-a.menu {
-    display: block;
-    padding-left: 1.4em;
-    padding-right: 1.4em;
-    /* must match grid-line */
-    height: 3.1em;
-    padding-top: 1.8em;
-    color: #0c7076;
-}
-#menu a.hidden-box-trigger:hover {
-    border-bottom: 3px solid white;
-    margin-bottom: -3px;
-}
-a.menu span {
-    font-size: 1.1em;
-}
-
-
-#lang-button {
-    color: #717171;
-}
-#lang-button:after {
-    padding-left: 1em;
-    content: url("/static/img/arrow-gray.png");
-    vertical-align: middle;
-}
-#lang-menu {
-    position: relative;
-    float: right;
-    display: block;
-    padding-left: 2.5em;
-    padding-right: 2em;
-    /* must match grid-line */
-    height: 3.3em;
-    padding-top: 1.6em;
-    background: #f7f7f7;
-}
-#lang-menu .lang-flag {
-       font-size: 1.3em;
-}
-
-#lang-menu-items {
-       z-index: 9999;
-}
-
-#lang-menu-items button {
-    display: none;
-    background: #f7f7f7;
-    color: #6f6f6f;
-    cursor: pointer;
-    width: 100%;
-    border: solid #ddd;
-    border-width: 0 0 1px 0;
-    padding: .5em 0;
-    margin: 0;
-    font-size: 1.3em;
-}
-
-#lang-menu:hover button,
-#lang-menu.hover button {
-    display: block;
-}
-
-#lang-menu:hover #lang-menu-items,
-#lang-menu.hover #lang-menu-items {
-    position: absolute;
-    width: 100%;
-    padding: 0;
-    left: 0;
-    /* must match grid-line height */
-    top: 3.9em;
-}
-
-#lang-menu .active {
-    color: #000;
-}
-
 .search-hint-label {
     display: inline-block;
     width: 25em;
 .search-hint-label {
     display: inline-block;
     width: 25em;
diff --git a/apps/wolnelektury_core/static/css/main/_tools.scss b/apps/wolnelektury_core/static/css/main/_tools.scss
new file mode 100755 (executable)
index 0000000..cb67dda
--- /dev/null
@@ -0,0 +1,17 @@
+@mixin size-px($name, $size) {
+    #{$name}: $size + px;
+    #{$name}: ($size / 16) + rem;
+}
+@mixin font-size-px($size) {
+    @include size-px(font-size, $size);
+}
+
+@mixin mono {
+    font-family: "Andale Mono", "Lucida Sans Typewriter", "Courier New";
+}
+@mixin hidden-label {
+    display: block;
+    width: 1px;
+    height: 1px;
+    overflow:hidden;
+}
diff --git a/apps/wolnelektury_core/static/css/main/base.scss b/apps/wolnelektury_core/static/css/main/base.scss
new file mode 100755 (executable)
index 0000000..193a88c
--- /dev/null
@@ -0,0 +1,29 @@
+@import "tools";
+
+/* Basic colors and fonts */
+body {
+    font-family: Georgia;
+    background: #f7f7f7;
+    color: black;
+}
+
+a {
+    color: #0d7e85;
+    text-decoration: none;
+
+    img {
+        border: 0;
+    }
+}
+
+
+/* Basic layout */
+html, body {
+    margin: 0;
+    padding: 0;
+}
+
+
+.clearboth {
+    clear: both;
+}
diff --git a/apps/wolnelektury_core/static/css/main/book_box.scss b/apps/wolnelektury_core/static/css/main/book_box.scss
new file mode 100755 (executable)
index 0000000..d308394
--- /dev/null
@@ -0,0 +1,56 @@
+@import "tools";
+
+@mixin inner-box {
+    display: block;
+    color: black;
+    border-style: solid;
+    border-color: #ddd;
+    @include size-px(border-width, 1);
+    @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);
+    background: #fff;
+    -moz-box-shadow: 2px 2px 2px #ddd;
+    -webkit-box-shadow: 2px 2px 2px #ddd;
+    box-shadow: 2px 2px 2px #ddd;
+}
+@mixin cover-thumb {
+    @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 cover-thumb;
+        @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;
+    }
+}
diff --git a/apps/wolnelektury_core/static/css/main/cite.scss b/apps/wolnelektury_core/static/css/main/cite.scss
new file mode 100755 (executable)
index 0000000..598d21e
--- /dev/null
@@ -0,0 +1,26 @@
+@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);
+
+    blockquote {
+        padding: 0;
+        margin: 0;
+
+        p {
+            margin: 0;
+        }
+    }
+
+    .vip {
+        margin: 0;
+        color: #575C63;
+        @include size-px(font-size, 11);
+    }
+}
diff --git a/apps/wolnelektury_core/static/css/main/dialogs.scss b/apps/wolnelektury_core/static/css/main/dialogs.scss
new file mode 100755 (executable)
index 0000000..a58d59a
--- /dev/null
@@ -0,0 +1,141 @@
+@import "tools";
+
+.dialog-window {
+    position: absolute;
+    display: none;
+    background-color: transparent;
+    @include size-px(margin-top, -5);
+    @include size-px(margin-left, 0);
+    left: 0 !important;
+    right: 0;
+
+    @media screen and (min-width: 30em) {
+        left: none;
+        right: none;
+        @include size-px(width, 200);
+        @include size-px(margin-left, 10);
+    }
+
+    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
new file mode 100755 (executable)
index 0000000..cc37b13
--- /dev/null
@@ -0,0 +1,30 @@
+@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/header.scss b/apps/wolnelektury_core/static/css/main/header.scss
new file mode 100755 (executable)
index 0000000..998172b
--- /dev/null
@@ -0,0 +1,191 @@
+@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, 13);
+
+        @media screen and (min-width: 24em) {
+            @include size-px(padding-top, 6);
+            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);
+
+        @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);
+        }
+
+        #user-menu {
+            display: none;
+        }
+    }
+
+    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
new file mode 100755 (executable)
index 0000000..2f6e0d4
--- /dev/null
@@ -0,0 +1,26 @@
+.hidden-box-wrapper {
+    position: relative;
+
+    .hidden-box {
+        position: absolute;
+        left: 0;
+        display: none;
+        border: 1px solid #ddd;
+        padding: 1em 1em .5em 1em;
+        background: #fff;
+        -moz-box-shadow: 2px 2px 2px #ddd;
+        -webkit-box-shadow: 2px 2px 2px #ddd;
+        box-shadow: 2px 2px 2px #ddd;
+        z-index: 500;
+
+        .hidden-box ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            font-size: 1.1em;
+            .hidden-box li {
+                margin-bottom: .5em;
+            }
+        }
+    }
+}
diff --git a/apps/wolnelektury_core/static/css/main/main_content.scss b/apps/wolnelektury_core/static/css/main/main_content.scss
new file mode 100755 (executable)
index 0000000..58b7b2c
--- /dev/null
@@ -0,0 +1,8 @@
+@import "tools";
+
+@media screen and (min-width: 62.5em) {
+    #main-content {
+        @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
new file mode 100755 (executable)
index 0000000..6f45bf6
--- /dev/null
@@ -0,0 +1,272 @@
+@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
new file mode 100755 (executable)
index 0000000..2698856
--- /dev/null
@@ -0,0 +1,110 @@
+@import "tools";
+
+#nav-line {
+    background-color: #e2e2e2;
+    @include size-px(padding-left, 5);
+
+    @media screen and (min-width: 62.5em) {
+        @include size-px(width, 975);
+        margin: auto;
+    }
+
+    ul#menu {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        @include size-px(margin-left, 6);
+
+        li.menu {
+            background-color: #e2e2e2;
+            float: left;
+
+            a.menu {
+                display: block;
+                @include size-px(height, 31);
+                @include size-px(padding-top, 18);
+                @include size-px(padding-left, 14);
+                @include size-px(padding-right, 14);
+                color: #0c7076;
+                @include size-px(font-size, 11);
+                @include mono;
+            }
+
+            a.hidden-box-trigger:hover {
+                border-bottom-style: solid;
+                border-bottom-color: white;
+                @include size-px(border-bottom-width, 3);
+                margin-bottom: -3px;
+            }
+        }
+    }
+
+    #lang-menu {
+        position: relative;
+        display: block;
+        float: right;
+        @include size-px(height, 33);
+        @include size-px(padding-top, 16);
+        @include size-px(padding-left, 25);
+        @include size-px(padding-right, 20);
+        background: #f7f7f7;
+        @include mono;
+
+        #lang-button {
+            @include size-px(font-size, 10);
+            color: #717171;
+
+            .lang-flag {
+                @include size-px(font-size, 13);
+            }
+
+            &:after {
+                @include size-px(padding-left, 10);
+                content: url("/static/img/arrow-gray.png");
+                vertical-align: middle;
+            }
+        }
+
+        #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, 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;
+                width: 100%;
+                padding: 0;
+                left: 0;
+                @include size-px(top, 39);
+
+                button {
+                    display: block;
+                }
+            }
+        }
+    }
+}
index 4bf75ea..8b13789 100755 (executable)
@@ -1,101 +1 @@
 
 
-#promo-box-header {
-    padding-top: 2em;
-    height: 3.1em;
-    padding-bottom: 0;
-    padding-left: 2.5em;
-    padding-right: 2.5em;
-    background: #191919;
-    color: white;
-}
-#promo-box-header h2 {
-    font-size: 1.3em;
-    margin: 0;
-}
-#promo-box-body {
-    border-bottom: 2px solid #efefef;
-    padding: 2em 2.8em;
-    background: #efefef;
-}
-#promo-box h3 {
-    color: #0d777e;
-    font-size: 1.1em;
-    height: 2.5em; /* 2.75@1.1 */
-    margin: 0;
-    font-family: "Andale Mono", "Lucida Sans Typewriter", "Courier New";
-    font-weight: normal;
-}
-#promo-box h3:after {
-       content: " >";
-}
-#promo-box a {
-       color: #0d777e;
-}
-#promo-box-body a {
-       display: block;
-    color: #6c6c6c;
-}
-#promo-box-body p {
-    margin-top: 0;
-    font-size: 1.2em;
-    line-height: 1.55em;
-    color: #6c6c6c;
-}
-
-.main-last {
-    padding-top: 1.9em;
-    height: 3.2em;
-    padding-left: 1.9em;
-    margin: 0;
-    font-size: 1em;
-}
-.main-last span {
-    font-size: 1.1em;
-    color: black;
-}
-.main-last span:after {
-    content: " >";
-}
-
-
-.infopages-box {
-    width: 20.6em;
-    display: inline-block;
-    margin: .5em 0 0 0;
-    padding: 0 1.7em;
-    vertical-align: top;
-    color: #989898;
-}
-.infopages-box h2 {
-    color: #017e85;
-    height: 2.8em;
-    padding-top: 2.5em;
-    font-size: 1em;
-    margin: 0;
-}
-.infopages-box h2 span {
-    font-size: 1.1em;
-}
-.infopages-box a {
-    color: black;
-}
-
-.infopages-box ol, .infopages-box ul {
-    font-size: 1.1em;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    line-height: 1.45em;
-}
-
-.infopages-box li {
-       margin-bottom: .25em;
-}
-
-.infopages-box .social-links {
-    margin-top: 1em;
-}
-
-.infopages-box .social-links a {
-    margin-right: .6em;
-}
index 8522996..763d5c3 100644 (file)
 }
 
 
 }
 
 
-#header-content, div#main-content, div#half-header-content, #footer-content {
-    width: 97.5em;
-    margin: auto;
-}
 
 
-#promo-box {
-    float: right;
-    margin-top: -5.1em;
-}
 
 
-#promo-box-body {
-       height: 30em;
-}
 
 
-#big-cite .vip {
-       float:left;
-       text-align:right;
-       width: 14.7em;
-}
-
-#big-cite .cite-body {
-    margin-left: 17.5em;
-}
-
-#big-cite .source {
-    margin-left: 17.5em;
-}
 
 
 .book-wide-box {
 
 
 .book-wide-box {
 
 /* HEADER */
 
 
 /* HEADER */
 
-#header {
-    height: 3em;
-    padding-top: 1.9em;
-}
-
-#logo {
-    position: absolute;
-    top: 0;
-}
-
 #user-info {
     float: right;
     padding: 0;
 }
 
 #user-info {
     float: right;
     padding: 0;
 }
 
-#tagline {
-    display: inline-block;
-    margin-left: 25.5em;
-}
-
-#search-area {
-    margin-left: 24em;
-    width: 73.5em;
-}
-
-#search-field {
-    width: 63.1em;
-    padding-right: 0;
-}
-
-#search {
-    width: 47.47em;
-}
-
-#search-button {
-       float: right;
-}
-
 #promo-box {
     width: 32em;
 }
 #promo-box {
     width: 32em;
 }
index a751022..54ca003 100755 (executable)
@@ -7,47 +7,47 @@
 {% block ogtitle %}{% trans "Wolne Lektury internet library" %}{% endblock %}
 
 {% block body %}
 {% block ogtitle %}{% trans "Wolne Lektury internet library" %}{% endblock %}
 
 {% block body %}
-    <div id="big-cite"{% if cite.image %}
+    <section id="big-cite"{% if cite.image %}
         style="
             background-image: url('{{ cite.image.url }}');
             background-position: 50% {{ cite.image_shift|default_if_none:50 }}%;
         "{% endif %} >
         {% render_cite cite %}
         style="
             background-image: url('{{ cite.image.url }}');
             background-position: 50% {{ cite.image_shift|default_if_none:50 }}%;
         "{% endif %} >
         {% render_cite cite %}
-    </div>
+    </section>
 
     {% spaceless %}
 
 
 
     {% spaceless %}
 
 
-    <div id="promo-box">
-               <div id="promo-box-header"><h2 class="mono">
-                       {% trans "What's new?" %}
-               </h2></div>
-               <div id="promo-box-body">
-               {% chunk "promo" %}
-       </div>
-    </div>
+    <section id="promo-box">
+        <h1>{% trans "What's new?" %}</h1>
+        <div id="promo-box-body">
+            {% chunk "promo" %}
+        </div>
+    </section>
 
 
 
 
-    <h2 class="main-last"><a href="{% url 'recent_list' %}"><span class="mono">{% trans "Recent publications" %}</span></a></h2>
+    <section id="main-last">
+        <h1><a href="{% url 'recent_list' %}">{% trans "Recent publications" %}</a></h1>
         {% cache 60 last-published-on-main %}
             {% for book in last_published %}
                 {% book_mini book %}
             {% endfor %}
         {% endcache %}
         {% cache 60 last-published-on-main %}
             {% for book in last_published %}
                 {% book_mini book %}
             {% endfor %}
         {% endcache %}
+    </section>
 
     <div class="clearboth"></div>
 
 
     <div class="clearboth"></div>
 
-    <div class="infopages-box">
-        <h2><span class='mono'>{% trans "News" %}</span></h2>
+    <section class="infopages-box">
+        <h1>{% trans "News" %}</h1>
        {# 135 is the id of new publications category of our master blog. perhaps this URL should go to settings. #}
         {% cache 1800 latest-blog-posts %}
             {% latest_blog_posts "http://nowoczesnapolska.org.pl/feed/?cat=-135" %}
         {% endcache %}
        {# 135 is the id of new publications category of our master blog. perhaps this URL should go to settings. #}
         {% cache 1800 latest-blog-posts %}
             {% latest_blog_posts "http://nowoczesnapolska.org.pl/feed/?cat=-135" %}
         {% endcache %}
-    </div>
+    </section>
 
 
 
 
-    <div class="infopages-box">
-        <h2><span class='mono'>{% trans "Utilities" %}</span></h2>
+    <section class="infopages-box">
+        <h1>{% trans "Utilities" %}</h2>
 
         <ul>
             <li><a href="{% url 'suggest' %}" id="suggest" class="ajaxable">{% trans "Report a bug or suggestion" %}</a></li>
 
         <ul>
             <li><a href="{% url 'suggest' %}" id="suggest" class="ajaxable">{% trans "Report a bug or suggestion" %}</a></li>
             <li><a href="http://polski.wolnelektury.pl" lang="pl">Materiały do nauki j. polskiego</a></li>
             
         </ul>
             <li><a href="http://polski.wolnelektury.pl" lang="pl">Materiały do nauki j. polskiego</a></li>
             
         </ul>
-    </div>
+    </section>
 
 
 
 
-    <div class="infopages-box">
-        <h2><span class='mono'>{% trans "Information" %}</span></h2>
+    <section class="infopages-box">
+        <h1>{% trans "Information" %}</h1>
         <ul>
             <li><a href="http://nowoczesnapolska.org.pl/prywatnosc/">{% trans "Privacy policy" %}</a></li>
         {% cache 60 infopages-on-main LANGUAGE_CODE %}
         <ul>
             <li><a href="http://nowoczesnapolska.org.pl/prywatnosc/">{% trans "Privacy policy" %}</a></li>
         {% cache 60 infopages-on-main LANGUAGE_CODE %}
@@ -86,7 +86,7 @@
                 <img src="{% static "img/social/nk.png" %}" alt="Wolne Lektury @ NK.pl" />
             </a>
         </div>
                 <img src="{% static "img/social/nk.png" %}" alt="Wolne Lektury @ NK.pl" />
             </a>
         </div>
-    </div>
+    </section>
 
 
     {% endspaceless %}
 
 
     {% endspaceless %}
index 41146b6..cd84797 100644 (file)
@@ -5,6 +5,7 @@
     {% load catalogue_tags funding_tags reporting_stats sponsor_tags %}
     <head>
         <meta charset="utf-8">
     {% load catalogue_tags funding_tags reporting_stats sponsor_tags %}
     <head>
         <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
         <meta name="application-name" content="Wolne Lektury" />
         <meta property="og:site_name" content="Wolne Lektury" />
         <meta property="og:title" content="{% block ogtitle %}{% endblock %}" />
         <meta name="application-name" content="Wolne Lektury" />
         <meta property="og:site_name" content="Wolne Lektury" />
         <meta property="og:title" content="{% block ogtitle %}{% endblock %}" />
 
         <title>{% block title %}{% trans "Wolne Lektury" %} :: 
             {% block titleextra %}{% endblock %}{% endblock %}</title>
 
         <title>{% block title %}{% trans "Wolne Lektury" %} :: 
             {% block titleextra %}{% endblock %}{% endblock %}</title>
-        <link rel="icon" href="{% static "img/favicon.png" %}" type="image/png" />
+        <link rel="icon" href="{% static 'img/favicon.png' %}" type="image/png" />
         <link rel="search" type="application/opensearchdescription+xml" title="Wolne Lektury" 
         <link rel="search" type="application/opensearchdescription+xml" title="Wolne Lektury" 
-            href="{% static "opensearch.xml" %}" />
-        {% compressed_css "all" %}
-        <link href="{% static "css/core.css" %}" rel="stylesheet" type="text/css" media="screen" />
-        <link href="{% static "css/antiscreen.css" %}" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" />
-        {#% compressed_css "handheld" %#}
+            href="{% static 'opensearch.xml' %}" />
+        {% compressed_css "main" %}
         <!--[if IE]>
                {% compressed_css "ie" %}
         <![endif]-->
         <!--[if IE]>
                {% compressed_css "ie" %}
         <![endif]-->
     <body id="{% block bodyid %}base{% endblock %}">
 
         {% block bodycontent %}
     <body id="{% block bodyid %}base{% endblock %}">
 
         {% block bodycontent %}
-               <div id="header-bg"></div>
-
-        <div id="header">
-
-        <div id="header-content">
-            <div id="logo">
-                <a class="logo" href="/">
-                <img id="logo-image" src="{% static "img/logo-neon.png" %}"
-                    alt="Wolne Lektury" /></a>
-            </div>
-
-            <div id="tagline">
-                <span>
-                {% cache 60 tagline LANGUAGE_CODE %}
-                    {% url 'book_list' as b %}
-                    {% url 'infopage' 'prawa' as r %}
-                        {% count_books book_count %}
-                    {% blocktrans count book_count as c %}
-                    <a href='{{b}}'>{{c}}</a> free reading you have <a href='{{r}}'>right to</a>
-                    {% plural %}
-                    <a href='{{b}}'>{{c}}</a> free readings you have <a href='{{r}}'>right to</a>
-                    {% endblocktrans %}
-                {% endcache %}
-                </span>
-            </div>
-
-            <p id="user-info" class="mono">
+        <div id="header-wrapper">
+        <header id="main">
+            <a href="/" id="logo">
+                <img src="{% static 'img/logo-neon.png' %}"
+                    alt="Wolne Lektury" />
+            </a>
+
+            <p id="user-info">
                 {% if user.is_authenticated %}
                     {% trans "Welcome" %}, 
                 {% if user.is_authenticated %}
                     {% trans "Welcome" %}, 
-                       <span class="hidden-box-wrapper">
-                               <a href="{% url 'user_settings' %}" class="hidden-box-trigger">
-                                       <strong>{{ user.username }}</strong>
-                               </a>
-                               <span id="user-menu" class="hidden-box">
-                                       <a href="{% url 'account_set_password' %}">{% trans "Password" %}</a><br/>
-                                       <a href="{% url 'account_email' %}">{% trans "E-mail" %}</a><br/>
-                                       <a href="{% url 'socialaccount_connections' %}">{% trans "Social accounts" %}</a><br/>
-                               </span>
-                       </span>
+                    <span class="hidden-box-wrapper">
+                        <a href="{% url 'user_settings' %}" class="hidden-box-trigger">
+                            <strong>{{ user.username }}</strong>
+                        </a>
+                        <span id="user-menu" class="hidden-box">
+                            <a href="{% url 'account_set_password' %}">{% trans "Password" %}</a><br/>
+                            <a href="{% url 'account_email' %}">{% trans "E-mail" %}</a><br/>
+                            <a href="{% url 'socialaccount_connections' %}">{% trans "Social accounts" %}</a><br/>
+                        </span>
+                    </span>
                     | <a href="{% url 'social_my_shelf' %}" id="user-shelves-link">{% trans "My shelf" %}</a>
                     {% if user.is_staff %}
                     | <a href="/admin/">{% trans "Administration" %}</a>
                     | <a href="{% url 'social_my_shelf' %}" id="user-shelves-link">{% trans "My shelf" %}</a>
                     {% if user.is_staff %}
                     | <a href="/admin/">{% trans "Administration" %}</a>
                 {% endif %}
             </p>
 
                 {% endif %}
             </p>
 
+            <p id="tagline">
+                {% cache 60 tagline LANGUAGE_CODE %}
+                    {% url 'book_list' as b %}
+                    {% url 'infopage' 'prawa' as r %}
+                        {% count_books book_count %}
+                    {% blocktrans count book_count as c %}
+                    <a href='{{b}}'>{{c}}</a> free reading you have <a href='{{r}}'>right to</a>
+                    {% plural %}
+                    <a href='{{b}}'>{{c}}</a> free readings you have <a href='{{r}}'>right to</a>
+                    {% endblocktrans %}
+                {% endcache %}
+            </p>
 
 
-            <div class="clearboth"></div>
-
-        </div>
-        </div>
-
-        <div id="half-header">
-        <div id="half-header-content">
-
-
-
-            <form id="search-area" action="{% url 'search' %}" class="hidelabels">
-                
-                <div id="search-field" class="grid-line">
-                       <label for="search">{{search_form.q.label}}</label>
-                 {{search_form.q}}
-<!--                    <input title="np. Leśmian" name="q" autocomplete="off" data-source="/fullsearch/hint/">-->
-                </div><div id="search-button">
-                    <button type='submit'><span class="mono">{% trans "Search" %}</span></button>
-                </div>
-                
-                <div class="clearboth"></div>
+            <form id="search-area" action="{% url 'search' %}">
+                <div id="search-field">
+                    <label for="search">{{search_form.q.label}}</label>
+                        {{search_form.q}}
+                </div><button type='submit'>{% trans "Search" %}</button>
             </form>
 
             </form>
 
-
-
-        </div>
+        </header>
         </div>
 
 
         </div>
 
 
-        <div id="main-content">
-            
-            <div id="nav-line">
-                {% catalogue_menu %}
+        <nav id="nav-line">
+            {% catalogue_menu %}
 
             <div id="lang-menu" class="hoverget">
 
             <div id="lang-menu" class="hoverget">
-                <span id='lang-button' class='mono hoverclick'>
+                <span id='lang-button' class='hoverclick'>
                     <span class="lang-flag">⚐</span>
                     {% trans "Language versions" %}</span>
                 <div id="lang-menu-items">
                     <span class="lang-flag">⚐</span>
                     {% trans "Language versions" %}</span>
                 <div id="lang-menu-items">
                     <input type="hidden" name="language" value="{{ lang.0 }}" />
                     <button type="submit"
                         lang="{{ lang.0 }}"
                     <input type="hidden" name="language" value="{{ lang.0 }}" />
                     <button type="submit"
                         lang="{{ lang.0 }}"
-                        class="{% ifequal lang.0 LANGUAGE_CODE %}active{% endifequal %} mono"
+                        class="{% ifequal lang.0 LANGUAGE_CODE %}active{% endifequal %}"
                         >{{ lang.1 }}</button>
                         >{{ lang.1 }}</button>
-                   </form>
+                    </form>
                 {% endfor %}
                 </div>
             </div>
                 {% endfor %}
                 </div>
             </div>
-            </div>
 
             <div class="clearboth"></div>
 
             <div class="clearboth"></div>
+        </nav>
 
 
 
 
-
+        <div id="main-content">
             {% block body %}
             {% endblock %}
             {% block body %}
             {% endblock %}
+            <div class="clearboth"></div>
+        </div>
 
 
 
 
-
-
-        <div class="clearboth"></div>
-
-        </div>{# end main-content #}
-
-
-        <div id="footer">
-        <div id="footer-content">
+        <div id="footer-wrapper">
+        <footer id="main">
             <p>
                {% blocktrans %}
                                Wolne Lektury is a project lead by <a href="http://nowoczesnapolska.org.pl/">Modern Poland Foundation</a>.
             <p>
                {% blocktrans %}
                                Wolne Lektury is a project lead by <a href="http://nowoczesnapolska.org.pl/">Modern Poland Foundation</a>.
             {% block add_footer %}{% endblock %}
 
                        {% sponsor_page "footer" %}
             {% block add_footer %}{% endblock %}
 
                        {% sponsor_page "footer" %}
-        </div>
+        </footer>
         </div>
 
 
 
         {# template #}
         <div id="ajaxable-window" class='dialog-window'>
         </div>
 
 
 
         {# template #}
         <div id="ajaxable-window" class='dialog-window'>
-            <div class="header mono"><a href="#" class="jqmClose">{% trans "Close" %}</a></div>
+            <div class="header"><a href="#" class="jqmClose">{% trans "Close" %}</a></div>
             <div class="target">
                 <p><img src="{% static "img/indicator.gif" %}" alt="*"/> {% trans "Loading" %}</p>
             </div>
             <div class="target">
                 <p><img src="{% static "img/indicator.gif" %}" alt="*"/> {% trans "Loading" %}</p>
             </div>
index a3ff424..9c30dea 100644 (file)
@@ -14,30 +14,24 @@ MEDIA_URL = '/media/'
 STATIC_URL = '/static/'
 
 # CSS and JavaScript file groups
 STATIC_URL = '/static/'
 
 # CSS and JavaScript file groups
+
+
 PIPELINE_CSS = {
 PIPELINE_CSS = {
-    'all': {
+    'main': {
         # styles both for mobile and for big screen
         'source_filenames': [
             'css/jquery.countdown.css', 
 
         # styles both for mobile and for big screen
         'source_filenames': [
             'css/jquery.countdown.css', 
 
-            'css/base.css',
-            'css/cite.css',
-            'css/header.css',
-            'css/main_page.css',
-            'css/dialogs.css',
-            'css/picture_box.css',
-            'css/book_box.css',
-            'css/catalogue.css',
+            'css/main/*.scss',
+
             'sponsors/css/sponsors.css',
             'sponsors/css/sponsors.css',
-            'css/auth.css',
             'funding/funding.scss',
             'polls/polls.scss',
             'funding/funding.scss',
             'polls/polls.scss',
-            'css/form.scss',
 
             'css/social/shelf_tags.css',
             'css/ui-lightness/jquery-ui-1.8.16.custom.css',
         ],
 
             'css/social/shelf_tags.css',
             'css/ui-lightness/jquery-ui-1.8.16.custom.css',
         ],
-        'output_filename': 'css/compressed/all.css',
+        'output_filename': 'css/compressed/main.css',
     },
     'ie': {
         'source_filenames': [
     },
     'ie': {
         'source_filenames': [