{% 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">
+++ /dev/null
-/*
- * 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;
-}
}
-h1 {
- font-size: 3.5em;
- font-weight: normal;
- margin-top: .4em
-}
-h1 a {
- color: inherit;
-}
+
+
+
+
+
ul.plain {
list-style:none;
padding: 0;
}
-.normal-text {
- font-size: 1.3em;
- line-height: 1.3em;
-}
+
+
+
h2 {
font-size: 2em;
-.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;
}
*/
-.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;
}
-.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;
}
-.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;
-.work-list {
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
.work-item {
margin: 0;
padding: 0;
+++ /dev/null
-@import url(screen.css);
-@import url(antiscreen.css) handheld;
-@import url(antiscreen.css) only screen and (max-device-width:480px);
+++ /dev/null
-.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;
-}
line-height: 1.636em;
}
-
-
-
-#user-menu {
- left: 0;
- top: 2em;
- width: 15em;
- line-height:1.6em;
-}
-#user-menu a {
- color: #0D7E85;
-}
@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 {
}
}
+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;
}
-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 {
overflow: hidden;
}
img.cover {
- @include cover-thumb;
@include size-px(margin-bottom, 18);
}
.desc {
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;
+}
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 {
@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;
}
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);
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;
+ }
}
}
+@import "tools";
+
.hidden-box-wrapper {
position: relative;
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;
+ }
}
}
}
#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);
}
}
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;
&: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;
width: 47em;
}
-.hidden-box ul {
- width: 48em;
- column-width: 12em;
- -moz-column-width: 12em;
- -webkit-column-width: 12em;
-}
#menu-collections ul {
width: 18em;
}
-/* HEADER */
-#user-info {
- float: right;
- padding: 0;
-}
-
-#promo-box {
- width: 32em;
-}
/* Book list */
})();
+$('#show-menu').click(function(event) {
+ event.preventDefault();
+ $('#menu').toggle('slow');
+});
$('#themes-list-toggle').click(function(event) {
<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">
fnp / wolnelektury.git / commitdiff