From: Radek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>
Date: Thu, 4 Jul 2013 13:37:26 +0000 (+0200)
Subject: Make some menus reponsive, some work on book boxes.
X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/145bf215dceaee2808be13e45e8c5c09907ecd36

Make some menus reponsive, some work on book boxes.
---

diff --git a/apps/catalogue/templates/catalogue/menu.html b/apps/catalogue/templates/catalogue/menu.html
index d3f2728f7..2da629d74 100644
--- a/apps/catalogue/templates/catalogue/menu.html
+++ b/apps/catalogue/templates/catalogue/menu.html
@@ -1,5 +1,9 @@
 {% load i18n static %}
 
+<a id="show-menu" href="{% url 'catalogue' %}">
+    <span class="long">{% trans "Catalogue of the library" %}</span>
+    <span class="short">{% trans "Catalogue" %}</span>
+</a>
 <ul id="menu">
     {% for category, name, hash in categories %}
 	<li class="hidden-box-wrapper menu">
diff --git a/apps/wolnelektury_core/static/css/antiscreen.css b/apps/wolnelektury_core/static/css/antiscreen.css
deleted file mode 100644
index 5a8e34c59..000000000
--- a/apps/wolnelektury_core/static/css/antiscreen.css
+++ /dev/null
@@ -1,149 +0,0 @@
-/*
- * Style for handheld devices. Should cancel screen.css. 
- */
-
-a {
-    display: inline-block;
-    padding: .5em;
-}
-
-.left-column {
-    width: auto !important;
-    float: none !important;
-}
-.right-column {
-    float: none !important;
-    width: auto !important;
-}
-
-.hidden-box ul {
-    width: 20em !important;
-    column-width: auto !important;
-    -moz-column-width: auto !important;
-    -webkit-column-width: auto !important;
-}
-
-#header-content, div#main-content, div#half-header-content, #footer-content {
-    width: auto !important;
-    margin: 0 !important;
-}
-
-#promo-box {
-    float: none !important;
-    margin-top: 0 !important;
-}
-
-#promo-box-body {
-    height: auto !important;
-}
-
-#big-cite .vip {
-    float: none !important;
-    text-align: left !important;
-    width: auto !important;
-}
-
-#big-cite .cite-body {
-    margin-left: 0 !important;
-}
-
-#big-cite .source {
-    margin-left: 0 !important;
-}
-
-
-.book-wide-box {
-    width: auto !important;
-}
-.book-wide-box .book-box-body {
-    width: auto !important;
-}
-
-
-#tagged-object-list .left-column, #tagged-object-list .right-column {
-    width: auto !important;
-}
-
-
-
-
-.inline-body {
-    width: auto !important;
-}
-
-
-.search-result {
-    width: auto !important;
-}
-
-
-.book-list-header {
-    width: auto !important;
-}
-
-.book-wide-box .right-column {
-    width: auto !important;
-    margin-top: 0 !important;
-}
-
-.book-wide-box #theme-list-wrapper {
-    margin-bottom: 0 !important;
-}
-
-.snippets {
-    width: auto !important;
-    float: none !important;
-    margin-top: 0 !important;
-}
-
-
-/* HEADER */
-
-#header {
-    height: auto !important;
-    padding-top: 0 !important;
-}
-#logo {
-    position: static !important;
-}
-#user-info {
-    float: none !important;
-    padding: 1em 0 !important;
-}
-
-#tagline {
-    display: block !important;
-    margin-left: 0 !important;
-}
-
-#search-area {
-    margin-left: 0 !important;
-    width: auto !important;
-}
-
-#search-field {
-    width: auto !important;
-    padding-right: 0.5em !important;
-}
-
-#search {
-    width: auto !important;
-}
-
-#search-button {
-    float: none !important;
-}
-
-#promo-box {
-    width: auto;
-}
-
-/* Book list */
-
-#book-list-nav {
-    border-left: none !important;
-    padding: 0 !important;
-    position: static !important;
-    right: 0 !important;
-    width: auto !important;
-}
diff --git a/apps/wolnelektury_core/static/css/base.css b/apps/wolnelektury_core/static/css/base.css
index 54099d111..76c0e4311 100755
--- a/apps/wolnelektury_core/static/css/base.css
+++ b/apps/wolnelektury_core/static/css/base.css
@@ -15,14 +15,11 @@
 }
 
 
-h1 {
-    font-size: 3.5em;
-    font-weight: normal;
-    margin-top: .4em
-}
-h1 a {
-	color: inherit;
-}
+
+
+
+
+
 
 ul.plain {
     list-style:none;
@@ -30,10 +27,9 @@ ul.plain {
     padding: 0;
 }
 
-.normal-text {
-    font-size: 1.3em;
-    line-height: 1.3em;
-}
+
+
+
 
 h2 {
     font-size: 2em;
diff --git a/apps/wolnelektury_core/static/css/book_box.css b/apps/wolnelektury_core/static/css/book_box.css
index 1a6e1189a..c9037c231 100755
--- a/apps/wolnelektury_core/static/css/book_box.css
+++ b/apps/wolnelektury_core/static/css/book_box.css
@@ -1,51 +1,21 @@
-.book-mini-box, .Book-item {
-    display: inline-block;
-    vertical-align: top;
-}
-
-.book-wide-box, .book-box {
+.book-wide-box {
     margin: 0;
     vertical-align: top;
 }
-
-.book-box {
-    width: 48.75em;
-}
-
-
-
 .book-wide-box {
     /** This is a fullpage box, it must be aligned with the top menu. 
         This corresponds to a .1em margin below **/
     margin-left: -0.1em;
 }
 
-/* 
- * A mini-box wraps it's contents (image + label) in an <a>
- * other boxes have an inner box as a wrapper.
- */
-
-.book-box-inner {
-    /* min, so it can grow */
-    min-height: 19.75em; 
-    margin: .5em;
-}
 
-.book-mini-box a, .book-box-inner {
-    display: block;
-    color: black;
-    border: 1px solid #ddd;
-/*    height: 20em; */
-    padding: .8em 1em;
-    margin: .1em;
-    background: #fff;
-    -moz-box-shadow: 2px 2px 2px #ddd;
-    -webkit-box-shadow: 2px 2px 2px #ddd;
-    box-shadow: 2px 2px 2px #ddd;
-}
 
 
 
+/* 
+ * A mini-box wraps it's contents (image + label) in an <a>
+ * other boxes have an inner box as a wrapper.
+ */
 .book-wide-box .book-box-inner {
    /* min, so it can grow */ 
    min-height: 24.4em;
@@ -81,99 +51,10 @@
 }
 */
 
-.book-mini-box img.cover,
-.book-box img.cover,
-.book-wide-box img.cover,
-.search-result img.cover {
-    width: 13.9em;
-    height: 19.3em;
-}
-.book-box-inner .cover-area,
-.book-wide-box .cover-area
-{
-    float: left;
-    margin-right: 1.5em;
-}
-
-
-.book-box-body {
-    height: 17em;
-    overflow:hidden;
-    position: relative;
-}
-
 .book-wide-box .book-box-body {
     min-height: 17em;
 }
 
-.book-box-head {
-    min-height: 7em;
-    padding-top: 1.4em;
-    margin-bottom: 1em;
-}
-.book-box-head a {
-    color: black;
-}
-.book-box-head .author {
-    font-size: 1.1em;
-    max-width: 24em;
-}
-.book-box-head .title {
-    font-size: 2.4em;
-    height: 2.4em;
-    overflow:hidden;
-    margin-top: .3em;
-}
-.book-box-body .tags {
-    font-size: 1.1em;
-}
-.book-box-tag {
-    margin-right: .5em;
-    margin-left: .4em;
-}
-.book-box-download {
-    position: relative;
-}
-
-.book-box-download a {
-    position: relative;
-    z-index: 101;
-}
-
-.book-box-formats {
-    display: none;
-    position: absolute;
-
-    width: 16.363em;
-    border: 1px solid #ddd;
-    padding: 3.454em 1.727em .818em 1.727em;
-    background: #fff;
-    -moz-box-shadow: 2px 2px 2px #ddd;
-    -webkit-box-shadow: 2px 2px 2px #ddd;
-    box-shadow: 2px 2px 2px #ddd;
-
-    z-index: 100;
-    top: -1.454em;
-    left: -1.727em;
-}
-.book-box-formats span {
-    display: block;
-}
-
-.book-box-download .book-box-formats span:first-child {
-    margin-top: 1.454em;
-}
-
-.book-box-download:hover .book-box-formats,
-.book-box-download.hover .book-box-formats {
-    display: block;
-}
-
-.book-box-tools {
-	width: 46em;
-    font-size: 1.1em;
-}
-
 .book-wide-box {
 	min-width: 48.75em;
 }
@@ -190,49 +71,6 @@
 
 
 
-.book-box-read a:before {
-    content: url("/static/img/read.png");
-    font-size: 2.25em;
-    margin-right: .15em;
-    vertical-align: middle;
-    font-weight: normal;
-}
-
-.book-box-download a.downarrow:before {
-    content: url("/static/img/download.png");
-    font-size: 2.25em;
-    margin-right: .15em;
-    vertical-align: middle;
-    font-weight: normal;
-}
-
-.book-box-audiobook a:before {
-    content: url("/static/img/listen.png");
-    font-size: 2.25em;
-    margin-right: .15em;
-    vertical-align: middle;
-    font-weight: normal;
-}
-
-ul.book-box-tools {
-    margin: 0;
-    padding: 0;
-}
-
-.book-box-tools li {
-    display: inline-block;
-}
-
-.book-box-read {
-    width: 11.5em;
-}
-.book-box-download {
-    width: 8.5em;
-}
-.book-box-audiobook {
-    width: 7em;
-}
-
 ul.inline-items, ul.inline-items li {
     margin: 0;
     padding: 0;
@@ -273,39 +111,6 @@ ul.inline-items li {
 }
 
 
-.star {
-    font-size: 2.25em;
-    margin-right: .5em;
-    position: absolute;
-    right: 0;
-}
-.star 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;
-}
 
 .snippets .snippet-text {
     background: #f7f7f7;
diff --git a/apps/wolnelektury_core/static/css/catalogue.css b/apps/wolnelektury_core/static/css/catalogue.css
index 5f52f248c..e4f6816b5 100755
--- a/apps/wolnelektury_core/static/css/catalogue.css
+++ b/apps/wolnelektury_core/static/css/catalogue.css
@@ -1,9 +1,3 @@
-.work-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
 .work-item {
     margin: 0;
     padding: 0;
diff --git a/apps/wolnelektury_core/static/css/core.css b/apps/wolnelektury_core/static/css/core.css
deleted file mode 100644
index 514f8af3a..000000000
--- a/apps/wolnelektury_core/static/css/core.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@import url(screen.css);
-@import url(antiscreen.css) handheld;
-@import url(antiscreen.css) only screen and (max-device-width:480px);
diff --git a/apps/wolnelektury_core/static/css/dialogs.css b/apps/wolnelektury_core/static/css/dialogs.css
deleted file mode 100755
index d83116ba6..000000000
--- a/apps/wolnelektury_core/static/css/dialogs.css
+++ /dev/null
@@ -1,117 +0,0 @@
-.cuteform {
-    font-size: 1.1em;
-}
-.cuteform ol, .cuteform ul {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    font-style: 1.1em;
-}
-
-.cuteform ol li, .cuteform ul li {
-    margin-top: 0.7em;
-}
-
-.cuteform label {
-    display: block;
-}
-
-.cuteform span.help-text {
-    display: block;
-    font-size: 0.8em;
-    color: #999;
-}
-
-.cuteform .error {
-    color: #BF3024;
-    display: block;
-}
-.cuteform .errorlist {
-    color: #BF3024;
-}
-
-
-.jqmOverlay { background-color: #000; }
-
-
-.dialog-window {
-    position: absolute;
-    display: none;
-    background-color: transparent;
-    margin-top: -0.5em;
-    margin-left: 1em;
-    width: 20em;
-}
-
-.dialog-window div.header {
-    font-size: 1.1em;
-    width: 4em;
-    background-color: #FFF;
-    border-right: 0.3em solid #DDD;
-    padding: 0.5em 1em 0.5em 1em;
-    right: 0;
-    left: auto;
-    float: right;
-    text-align: center;
-}
-
-
-.dialog-window div.target {
-    background-color: #FFF;
-    color: black;
-    border-right: 0.3em solid #DDD;
-    border-bottom: 0.3em solid #DDD;
-    padding: 1em;
-    clear: both;
-}
-
-.dialog-window h1 {
-    font-size: 1.2em;
-}
-
-.dialog-window textarea, .dialog-window input {
-    width: 100%;
-}
-
-.hidelabels label {
-	display: block;
-	width: 1px;
-	height: 1px;
-	overflow:hidden;
-}
-
-
-
-#login-window {
-    width: 26em;
-}
-#register-window {
-    width: 26em;
-}
-#context-login-window {
-	width: 26em;
-}
-
-#suggest-window {
-    width: 26em;
-}
-
-#suggest-window textarea {
-    height: 6em;
-}
-
-#suggest-publishing-window {
-    width: 29em;
-}
-
-#suggest-publishing-window textarea {
-    height: 3em;
-}
-
-#custom-pdf-window {
-    width: 24em;   
-}
-
-#custom-pdf-window label {
-    display: inline;
-}
diff --git a/apps/wolnelektury_core/static/css/header.css b/apps/wolnelektury_core/static/css/header.css
index ee0e76bf4..a7f934141 100755
--- a/apps/wolnelektury_core/static/css/header.css
+++ b/apps/wolnelektury_core/static/css/header.css
@@ -10,15 +10,3 @@
     line-height: 1.636em;
     
 }
-
-
-
-#user-menu {
-	left: 0;
-	top: 2em;
-	width: 15em;
-	line-height:1.6em;
-}
-#user-menu a {
-	color: #0D7E85;
-}
diff --git a/apps/wolnelektury_core/static/css/main/base.scss b/apps/wolnelektury_core/static/css/main/base.scss
index 193a88cd8..51089817d 100755
--- a/apps/wolnelektury_core/static/css/main/base.scss
+++ b/apps/wolnelektury_core/static/css/main/base.scss
@@ -1,10 +1,26 @@
 @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 {
@@ -16,14 +32,16 @@ a {
     }
 }
 
+h1 {
+    @include size-px(font-size, 35);
+    font-weight: normal;
+    @include size-px(margin-top, 14);
 
-/* Basic layout */
-html, body {
-    margin: 0;
-    padding: 0;
+    a {
+        color: inherit;
+    }
 }
 
-
-.clearboth {
-    clear: both;
+.normal-text {
+    line-height: 1.3em;
 }
diff --git a/apps/wolnelektury_core/static/css/main/book_box.scss b/apps/wolnelektury_core/static/css/main/book_box.scss
index d30839403..1eecec254 100755
--- a/apps/wolnelektury_core/static/css/main/book_box.scss
+++ b/apps/wolnelektury_core/static/css/main/book_box.scss
@@ -16,10 +16,15 @@
     -webkit-box-shadow: 2px 2px 2px #ddd;
     box-shadow: 2px 2px 2px #ddd;
 }
-@mixin cover-thumb {
+
+img.cover {
     @include size-px(height, 193);
     @include size-px(width, 139);
 }
+.cover-area {
+    float: left;
+    @include size-px(margin-right, 15);
+}
 
 
 .book-mini-box {
@@ -34,7 +39,6 @@
         overflow: hidden;
     }
     img.cover {
-        @include cover-thumb;
         @include size-px(margin-bottom, 18);
     }
     .desc {
@@ -54,3 +58,200 @@
         color: #242424;
     }
 }
+
+
+
+.work-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    .Book-item {
+        display: inline-block;
+        vertical-align: top;
+    }
+}
+
+.book-box {
+    @include size-px(width, 487.5);
+    margin: 0;
+    vertical-align: top;
+
+    .book-box-inner {
+        @include inner-box;
+        @include size-px(min-height, 197.5);
+    }
+}
+
+.book-box-body {
+    @include size-px(height, 170);
+    overflow:hidden;
+    position: relative;
+
+    .book-box-head {
+        @include size-px(min-height, 70);
+        @include size-px(padding-top, 14);
+        @include size-px(margin-bottom, 10);
+
+        a {
+            color: black;
+        }
+        .author {
+            @include size-px(font-size, 11);
+            @include size-px(max-width, 264);
+            @include mono;
+        }
+        .title {
+            @include size-px(font-size, 24);
+            @include size-px(height, 57.6);
+            @include size-px(margin-top, 7.2);
+            overflow:hidden;
+        }
+    }
+
+    .tags {
+        @include size-px(font-size, 11);
+
+        .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);
+    @include size-px(width, 506);
+    margin: 0;
+    padding: 0;
+    @include mono;
+
+    li {
+        display: inline-block;
+    }
+
+    .book-box-read {
+        @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;
+        @include size-px(width, 93.5);
+
+        a {
+            position: relative;
+            z-index: 101;
+
+            &.downarrow: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 {
+            display: none;
+            position: absolute;
+
+            @include size-px(width, 180);
+            border-color: #ddd;
+            border-style: solid;
+            @include size-px(border-width, 1);
+            @include size-px(padding-top, 38);
+            @include size-px(padding-bottom, 9);
+            @include size-px(padding-left, 19);
+            @include size-px(padding-right, 19);
+            background: #fff;
+            -moz-box-shadow: 2px 2px 2px #ddd;
+            -webkit-box-shadow: 2px 2px 2px #ddd;
+            box-shadow: 2px 2px 2px #ddd;
+
+            z-index: 100;
+
+            @include size-px(top, -16);
+            @include size-px(left, -19);
+
+            span {
+                display: block;
+
+                &:first-child {
+                    @include size-px(margin-top, 16);
+                }
+            }
+        }
+
+        &:hover .book-box-formats,
+        &.hover .book-box-formats {
+            display: block;
+        }
+    }
+
+    .book-box-audiobook {
+        @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;
+}
diff --git a/apps/wolnelektury_core/static/css/main/dialogs.scss b/apps/wolnelektury_core/static/css/main/dialogs.scss
index a58d59a6b..a5316774a 100755
--- a/apps/wolnelektury_core/static/css/main/dialogs.scss
+++ b/apps/wolnelektury_core/static/css/main/dialogs.scss
@@ -5,15 +5,14 @@
     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);
+    @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 {
diff --git a/apps/wolnelektury_core/static/css/main/header.scss b/apps/wolnelektury_core/static/css/main/header.scss
index 998172bc0..3bf6fcea3 100755
--- a/apps/wolnelektury_core/static/css/main/header.scss
+++ b/apps/wolnelektury_core/static/css/main/header.scss
@@ -69,10 +69,11 @@ header#main {
         @include size-px(margin-left, 5);
         @include size-px(margin-right, 5);
         padding-top: 0;
-        @include size-px(font-size, 13);
+        @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;
         }
 
@@ -91,6 +92,7 @@ header#main {
         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);
@@ -101,10 +103,34 @@ header#main {
             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;
+            }
         }
     }
 
diff --git a/apps/wolnelektury_core/static/css/main/hidden.scss b/apps/wolnelektury_core/static/css/main/hidden.scss
index 2f6e0d4e1..9e437e82e 100755
--- a/apps/wolnelektury_core/static/css/main/hidden.scss
+++ b/apps/wolnelektury_core/static/css/main/hidden.scss
@@ -1,3 +1,5 @@
+@import "tools";
+
 .hidden-box-wrapper {
     position: relative;
 
@@ -13,13 +15,36 @@
         box-shadow: 2px 2px 2px #ddd;
         z-index: 500;
 
-        .hidden-box ul {
+        ul {
             list-style: none;
             padding: 0;
             margin: 0;
-            font-size: 1.1em;
-            .hidden-box li {
-                margin-bottom: .5em;
+            @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;
+                }
             }
         }
     }
diff --git a/apps/wolnelektury_core/static/css/main/menu.scss b/apps/wolnelektury_core/static/css/main/menu.scss
index 26988563c..ad6483b0d 100755
--- a/apps/wolnelektury_core/static/css/main/menu.scss
+++ b/apps/wolnelektury_core/static/css/main/menu.scss
@@ -2,66 +2,135 @@
 
 #nav-line {
     background-color: #e2e2e2;
-    @include size-px(padding-left, 5);
+    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;
-        @include size-px(margin-left, 6);
+
+        display: none;
+        position: absolute;
+        top: 49px;
+        left: 0;
+        right: 10px;
+
+        @media screen and (min-width: 24em) {
+            right: auto;
+        }
+
+        @media screen and (min-width: 53em) {
+            display: block;
+            position: static;
+            @include size-px(margin-left, 6);
+        }
 
         li.menu {
             background-color: #e2e2e2;
-            float: left;
+
+            @media screen and (min-width: 53em) {
+                float: left;
+            }
 
             a.menu {
                 display: block;
-                @include size-px(height, 31);
+                @include size-px(line-height, 13);
                 @include size-px(padding-top, 18);
-                @include size-px(padding-left, 14);
-                @include size-px(padding-right, 14);
+                @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-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;
 
+        @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;
 
-            .lang-flag {
-                @include size-px(font-size, 13);
+            .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;
+                }
             }
 
-            &:after {
-                @include size-px(padding-left, 10);
-                content: url("/static/img/arrow-gray.png");
-                vertical-align: middle;
+            .lang-flag {
+                @include size-px(font-size, 13);
+                @include size-px(line-height, 15);
             }
         }
 
@@ -77,8 +146,14 @@
                 width: 100%;
                 margin: 0;
                 padding: 0;
-                @include size-px(padding-top, 5);
-                @include size-px(padding-bottom, 5);
+
+                @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;
@@ -96,10 +171,18 @@
         &:hover, &.hover {
             #lang-menu-items {
                 position: absolute;
-                width: 100%;
                 padding: 0;
                 left: 0;
-                @include size-px(top, 39);
+                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_page.css b/apps/wolnelektury_core/static/css/main_page.css
deleted file mode 100755
index 8b1378917..000000000
--- a/apps/wolnelektury_core/static/css/main_page.css
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/apps/wolnelektury_core/static/css/screen.css b/apps/wolnelektury_core/static/css/screen.css
index 763d5c39b..3d34fdda8 100644
--- a/apps/wolnelektury_core/static/css/screen.css
+++ b/apps/wolnelektury_core/static/css/screen.css
@@ -11,12 +11,6 @@
     width: 47em;
 }
 
-.hidden-box ul {
-	width: 48em;
-    column-width: 12em;
-    -moz-column-width: 12em;
-    -webkit-column-width: 12em;
-}
 
 #menu-collections ul {
     width: 18em;
@@ -73,16 +67,7 @@
 }
 
 
-/* HEADER */
 
-#user-info {
-    float: right;
-    padding: 0;
-}
-
-#promo-box {
-    width: 32em;
-}
 
 
 /* Book list */
diff --git a/apps/wolnelektury_core/static/js/base.js b/apps/wolnelektury_core/static/js/base.js
index 9676d5b4c..5c7dc1129 100755
--- a/apps/wolnelektury_core/static/js/base.js
+++ b/apps/wolnelektury_core/static/js/base.js
@@ -101,6 +101,10 @@
 		})();
 		
 
+$('#show-menu').click(function(event) {
+    event.preventDefault();
+    $('#menu').toggle('slow');
+});
 
 
 $('#themes-list-toggle').click(function(event) {
diff --git a/apps/wolnelektury_core/templates/superbase.html b/apps/wolnelektury_core/templates/superbase.html
index cd8479741..12be5d46a 100644
--- a/apps/wolnelektury_core/templates/superbase.html
+++ b/apps/wolnelektury_core/templates/superbase.html
@@ -98,7 +98,8 @@
             <div id="lang-menu" class="hoverget">
                 <span id='lang-button' class='hoverclick'>
                     <span class="lang-flag">⚐</span>
-                    {% trans "Language versions" %}</span>
+                    <span class="label">{% trans "Language versions" %}</span>
+                </span>
                 <div id="lang-menu-items">
                 {% for lang in LANGUAGES %}
                     <form action="{% url 'django.views.i18n.set_language' %}" method="post">