From: Radek Czajka Date: Wed, 3 Jul 2013 15:09:27 +0000 (+0200) Subject: Main page looks almost ok now. X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/23783edfd0a5d4d8e2dabd7a5f2d51643de099a6 Main page looks almost ok now. --- diff --git a/.gitignore b/.gitignore index 6714e2301..3224d626b 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,9 @@ dev.sqlite # Compress output /static +# SCSS output +/apps/wolnelektury_core/static/css/main/*.css + # Python garbage *.pyc .coverage diff --git a/apps/catalogue/templates/catalogue/menu.html b/apps/catalogue/templates/catalogue/menu.html index 4fe776925..d3f2728f7 100644 --- a/apps/catalogue/templates/catalogue/menu.html +++ b/apps/catalogue/templates/catalogue/menu.html @@ -4,7 +4,7 @@ {% for category, name, hash in categories %}
  • - {{ name }} + {{ name }} @@ -13,7 +13,7 @@
  • - {% trans "Collections" %} + {% trans "Collections" %} @@ -21,14 +21,14 @@
  • - {% trans "All books" %} + {% trans "All books" %}
  • - {% trans "Audiobooks" %} + {% trans "Audiobooks" %}
  • - {% trans "DAISY" %} + {% trans "DAISY" %}
    • diff --git a/apps/wolnelektury_core/static/css/base.css b/apps/wolnelektury_core/static/css/base.css index 3496937ea..54099d111 100755 --- a/apps/wolnelektury_core/static/css/base.css +++ b/apps/wolnelektury_core/static/css/base.css @@ -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; @@ -72,11 +50,6 @@ h3 { font-weight: normal; } -.mono { - font-family: "Andale Mono", "Lucida Sans Typewriter", "Courier New"; -/* font-weight: bold; */ -} - .accent1 { color: #191919; } @@ -100,9 +73,7 @@ h3 { /* #281d1c */ -.clearboth { - clear: both; -} + .white-box { border: 1px solid #ddd; @@ -133,30 +104,6 @@ h3 { .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 { @@ -166,17 +113,6 @@ h3 { 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; diff --git a/apps/wolnelektury_core/static/css/book_box.css b/apps/wolnelektury_core/static/css/book_box.css index 190ddd773..1a6e1189a 100755 --- a/apps/wolnelektury_core/static/css/book_box.css +++ b/apps/wolnelektury_core/static/css/book_box.css @@ -12,9 +12,7 @@ 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. @@ -46,11 +44,6 @@ box-shadow: 2px 2px 2px #ddd; } -.book-mini-box a { - height: 27.1em; - margin: .1em; - overflow: hidden; -} .book-wide-box .book-box-inner { @@ -95,9 +88,6 @@ 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 { @@ -105,22 +95,6 @@ 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; diff --git a/apps/wolnelektury_core/static/css/cite.css b/apps/wolnelektury_core/static/css/cite.css index d397da2ee..8084befd3 100755 --- a/apps/wolnelektury_core/static/css/cite.css +++ b/apps/wolnelektury_core/static/css/cite.css @@ -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 { @@ -17,93 +11,6 @@ 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; diff --git a/apps/wolnelektury_core/static/css/header.css b/apps/wolnelektury_core/static/css/header.css index f1bd0df94..ee0e76bf4 100755 --- a/apps/wolnelektury_core/static/css/header.css +++ b/apps/wolnelektury_core/static/css/header.css @@ -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; diff --git a/apps/wolnelektury_core/static/css/main/_tools.scss b/apps/wolnelektury_core/static/css/main/_tools.scss new file mode 100755 index 000000000..cb67ddab3 --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/_tools.scss @@ -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 index 000000000..193a88cd8 --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/base.scss @@ -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 index 000000000..d30839403 --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/book_box.scss @@ -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 index 000000000..598d21ea8 --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/cite.scss @@ -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 index 000000000..a58d59a6b --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/dialogs.scss @@ -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 index 000000000..cc37b13da --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/footer.scss @@ -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 index 000000000..998172bc0 --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/header.scss @@ -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 index 000000000..2f6e0d4e1 --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/hidden.scss @@ -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 index 000000000..58b7b2c64 --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/main_content.scss @@ -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 index 000000000..6f45bf67a --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/main_page.scss @@ -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 index 000000000..26988563c --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/menu.scss @@ -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; + } + } + } + } +} diff --git a/apps/wolnelektury_core/static/css/main_page.css b/apps/wolnelektury_core/static/css/main_page.css index 4bf75ea23..8b1378917 100755 --- a/apps/wolnelektury_core/static/css/main_page.css +++ b/apps/wolnelektury_core/static/css/main_page.css @@ -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; -} diff --git a/apps/wolnelektury_core/static/css/screen.css b/apps/wolnelektury_core/static/css/screen.css index 8522996dc..763d5c39b 100644 --- a/apps/wolnelektury_core/static/css/screen.css +++ b/apps/wolnelektury_core/static/css/screen.css @@ -23,33 +23,9 @@ } -#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 { @@ -99,44 +75,11 @@ /* 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; } diff --git a/apps/wolnelektury_core/templates/main_page.html b/apps/wolnelektury_core/templates/main_page.html index a751022e1..54ca0031f 100755 --- a/apps/wolnelektury_core/templates/main_page.html +++ b/apps/wolnelektury_core/templates/main_page.html @@ -7,47 +7,47 @@ {% block ogtitle %}{% trans "Wolne Lektury internet library" %}{% endblock %} {% block body %} -
    {% render_cite cite %} -
    + {% spaceless %} -
    -

    - {% trans "What's new?" %} -

    -
    - {% chunk "promo" %} -
    -
    +
    +

    {% trans "What's new?" %}

    +
    + {% chunk "promo" %} +
    +
    -

    {% trans "Recent publications" %}

    +
    +

    {% trans "Recent publications" %}

    {% cache 60 last-published-on-main %} {% for book in last_published %} {% book_mini book %} {% endfor %} {% endcache %} +
    -
    -

    {% trans "News" %}

    +
    +

    {% trans "News" %}

    {# 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 %} -
    + -
    -

    {% trans "Utilities" %}

    +
    +

    {% trans "Utilities" %}

    -
    + -
    -

    {% trans "Information" %}

    +
    +

    {% trans "Information" %}

    - + {% endspaceless %} diff --git a/apps/wolnelektury_core/templates/superbase.html b/apps/wolnelektury_core/templates/superbase.html index 41146b633..cd8479741 100644 --- a/apps/wolnelektury_core/templates/superbase.html +++ b/apps/wolnelektury_core/templates/superbase.html @@ -5,6 +5,7 @@ {% load catalogue_tags funding_tags reporting_stats sponsor_tags %} + @@ -17,13 +18,10 @@ {% block title %}{% trans "Wolne Lektury" %} :: {% block titleextra %}{% endblock %}{% endblock %} - + - {% compressed_css "all" %} - - - {#% compressed_css "handheld" %#} + href="{% static 'opensearch.xml' %}" /> + {% compressed_css "main" %} @@ -34,45 +32,26 @@ {% block bodycontent %} -
    - -