# Compress output
/static
+# SCSS output
+/apps/wolnelektury_core/static/css/main/*.css
+
# Python garbage
*.pyc
.coverage
{% 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>
<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>
<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">
- <span class='mono'>{% trans "Audiobooks" %}</span></a>
+ {% trans "Audiobooks" %}</a>
</li>
<li class="menu">
<a href="{% url 'daisy_list' %}" class="menu">
- <span class='mono'>{% trans "DAISY" %}</span></a>
+ {% trans "DAISY" %}</a>
</li>
</ul>
-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;
font-weight: normal;
}
-.mono {
- font-family: "Andale Mono", "Lucida Sans Typewriter", "Courier New";
-/* font-weight: bold; */
-}
-
.accent1 {
color: #191919;
}
/* #281d1c */
-.clearboth {
- clear: both;
-}
+
.white-box {
border: 1px solid #ddd;
.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 {
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;
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.
box-shadow: 2px 2px 2px #ddd;
}
-.book-mini-box a {
- height: 27.1em;
- margin: .1em;
- overflow: hidden;
-}
.book-wide-box .book-box-inner {
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
{
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;
-.cite {
- display: block;
- color: black;
- background: white;
- padding: 3em 2em .1em 8em;
-}
.book-wide-box .cite-body,
#tagged-object-list .cite-body
{
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;
-#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;
--- /dev/null
+@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;
+}
--- /dev/null
+@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;
+}
--- /dev/null
+@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;
+ }
+}
--- /dev/null
+@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);
+ }
+}
--- /dev/null
+@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;
+}
--- /dev/null
+@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;
+ }
+}
+
--- /dev/null
+@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;
+ }
+ }
+}
--- /dev/null
+.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;
+ }
+ }
+ }
+}
--- /dev/null
+@import "tools";
+
+@media screen and (min-width: 62.5em) {
+ #main-content {
+ @include size-px(width, 975);
+ margin: auto;
+ }
+}
--- /dev/null
+@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);
+ }
+ }
+}
--- /dev/null
+@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;
+ }
+ }
+ }
+ }
+}
-#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;
-}
}
-#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 {
/* HEADER */
-#header {
- height: 3em;
- padding-top: 1.9em;
-}
-
-#logo {
- position: absolute;
- top: 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;
}
{% 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 %}
- </div>
+ </section>
{% 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 %}
+ </section>
<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 %}
- </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>
<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 %}
<img src="{% static "img/social/nk.png" %}" alt="Wolne Lektury @ NK.pl" />
</a>
</div>
- </div>
+ </section>
{% endspaceless %}
{% 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 %}" />
<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"
- 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]-->
<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" %},
- <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>
{% 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>
-
-
- </div>
+ </header>
</div>
- <div id="main-content">
-
- <div id="nav-line">
- {% catalogue_menu %}
+ <nav id="nav-line">
+ {% catalogue_menu %}
<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">
<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>
- </form>
+ </form>
{% endfor %}
</div>
</div>
- </div>
<div class="clearboth"></div>
+ </nav>
-
+ <div id="main-content">
{% 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>.
{% block add_footer %}{% endblock %}
{% sponsor_page "footer" %}
- </div>
+ </footer>
</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>
STATIC_URL = '/static/'
# CSS and JavaScript file groups
+
+
PIPELINE_CSS = {
- 'all': {
+ 'main': {
# 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',
- 'css/auth.css',
'funding/funding.scss',
'polls/polls.scss',
- 'css/form.scss',
'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': [
fnp / wolnelektury.git / commitdiff