From: Radek Czajka Date: Wed, 13 Nov 2013 16:00:01 +0000 (+0100) Subject: Reorganize SCSS files, RWD-ize funding. X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/9a7603cfbfdf7c0b4a2210ef454cecf894c5e172 Reorganize SCSS files, RWD-ize funding. --- diff --git a/.gitignore b/.gitignore index 3224d626b..60e1b516b 100644 --- a/.gitignore +++ b/.gitignore @@ -11,7 +11,7 @@ dev.sqlite /static # SCSS output -/apps/wolnelektury_core/static/css/main/*.css +scss/*.css # Python garbage *.pyc diff --git a/apps/funding/static/funding/funding.css b/apps/funding/static/funding/funding.css deleted file mode 100755 index 89dd7aa79..000000000 --- a/apps/funding/static/funding/funding.css +++ /dev/null @@ -1 +0,0 @@ -.funding,.funding-top-header{background:orange;margin:auto;padding:5px 0;position:relative}.funding a.call,.funding-top-header a.call{height:1.2em;width:9em;padding:.35em .5em;margin:.5em;display:inline-block;vertical-align:top;text-align:center;background:rgb(.465%, 59.936%, 63.653%)}.funding .description,.funding-top-header .description{display:inline-block;padding-left:.6em}.funding .description a,.funding-top-header .description a{display:block;color:#000;padding:0 3px}.funding strong,.funding-top-header strong{font-size:1.5em;padding:.2em 0 0}.funding .progress,.funding-top-header .progress{width:95.7em;margin:.3em 0 .4em;border-radius:2em;background-image:url(/static/img/progress-pixel.png);background-repeat:repeat-y;background-color:#f68900;box-shadow:.1em .1em .1em #888}.funding .progress .piece,.funding-top-header .progress .piece{font-size:1.3em;padding:.3em .5em}.funding .with-button .progress,.funding-top-header .with-button .progress{width:78em}.funding .funding .funding-title-strong,.funding .funding-title,.funding-top-header .funding-title,.funding-top-header .funding-top-header .funding-title-strong{font-size:1.1em}.funding .funding-title-strong,.funding-top-header .funding-title-strong{font-weight:bold;font-size:1.5em}.funding .close,.funding-top-header .close{position:absolute;top:0;right:5px}.funding-top-header{width:97.5em}.wlfund{width:100%;border-spacing:0}.wlfund td{padding:1em .5em 1em;text-align:center;border-top:1em solid rgba(255, 255, 255, 0);border-bottom:2px solid #DDD;background-clip:padding-box;-moz-background-clip:padding;-webkit-background-clip:padding}.wlfund td.oneline{white-space:nowrap}.wlfund td:last-child{text-align:right}.wlfund .funding-plus td{background-color:#cfe5e7}.wlfund .funding-minus td{background-color:#fff}.honking{background:#018189;font-size:1.5em;padding:.5em;color:#fff;border:0;box-shadow:.2em .2em .3em #888;position:relative}.honking:hover{box-shadow:none;top:.1em;left:.1em}.share a{margin-right:1.5em}.share a img{vertical-align:middle}.funding-handle{position:absolute;top:0;right:0;z-index:2;background:orange;cursor:pointer;padding:.2em 1em;border-radius:0 0 0 1em;font-size:13px}.funding-cover{float:left;margin-right:10px}.funding-details-intro{padding-top:1em}.funding-details-intro h3:first-of-type{margin-top:0} \ No newline at end of file diff --git a/apps/funding/static/funding/funding.scss b/apps/funding/static/funding/funding.scss deleted file mode 100755 index 13c6ce062..000000000 --- a/apps/funding/static/funding/funding.scss +++ /dev/null @@ -1,152 +0,0 @@ -.funding { - background: orange; - margin: auto; - padding: 5px 0; - position: relative; - a.call { - height: 1.2em; - width: 9em; - padding: .35em .5em; - margin: .5em; - display: inline-block; - vertical-align: top; - text-align: center; - - background: lighten(#018189, .05); - } - .description { - display: inline-block; - padding-left: .6em; - a { - display: block; - color: black; - padding: 0 3px; - } - } - strong { - font-size: 1.5em; - padding: .2em 0 0; - //display: block; - } - .progress { - .piece { - font-size: 1.3em; - padding: .3em .5em; - } - width: 95.7em; - margin: .3em 0 .4em; - border-radius: 2em; - background-image: url(/static/img/progress-pixel.png); - background-repeat: repeat-y; - background-color: mix(#ec6d00, orange, .5); - box-shadow: .1em .1em .1em #888; - } - .with-button .progress { - width: 78em; - } - - .funding-title { - font-size: 1.1em; - } - .funding-title-strong { - @extend .funding-title; - font-weight: bold; - font-size: 1.5em; - } - .close { - position: absolute; - top: 0px; - right: 5px; - } -} - -.funding-top-header { - @extend .funding; - width: 97.5em; -} - - -.wlfund { - width: 100%; - border-spacing:0; - - td { - padding: 1em .5em 1em; - text-align: center; - border-top: 1em solid rgba(255, 255, 255, 0); - border-bottom: 2px solid #DDDDDD; - - background-clip: padding-box; - -moz-background-clip: padding; - -webkit-background-clip: padding; - } - td.oneline { - white-space: nowrap; - } - - td:last-child { - text-align: right; - } - - .funding-plus td { - background-color: mix(#0D7E85, white, .2); - } - - .funding-minus td { - background-color: white; - } -} - - - -.honking { - background: #018189; - font-size: 1.5em; - padding: .5em; - color: white; - border: 0; - box-shadow: 0.2em 0.2em 0.3em #888888; - position: relative; -} -.honking:hover { - box-shadow: none; - top: .1em; - left: .1em; -} - - - -.share { - a { - margin-right: 1.5em; - - img { - vertical-align: middle; - } - } -} - -.funding-handle { - position: absolute; - top: 0; - right: 0; - z-index:2; - background: orange; - cursor:pointer; - padding: .2em 1em; - border-radius: 0 0 0 1em; - font-size: 13px; -} - -.funding-cover { - float:left; - margin-right: 10px; -} - -.funding-details-intro { - padding-top: 1em; - - h3:first-of-type { - margin-top: 0; - } -} diff --git a/apps/funding/templates/funding/tags/funding.html b/apps/funding/templates/funding/tags/funding.html index ffe326e9c..a26c6ca61 100755 --- a/apps/funding/templates/funding/tags/funding.html +++ b/apps/funding/templates/funding/tags/funding.html @@ -5,16 +5,15 @@
{% if closeable %}X{% endif %} {% if link and is_current %} -
+
{% trans "Support!" %} -
+
{% trans "Learn more" %}
{% endif %} -
+
{% if link %}{% endif %} {% if show_title %} {% if is_current and show_title_calling %}{% trans "Help free the book!" %}{% endif %} @@ -34,9 +33,9 @@ {% trans "until fundraiser end" %}: + {% else %} +
{% endif %} - -
{% if link %}{% endif %}
diff --git a/apps/polls/static/polls/polls.css b/apps/polls/static/polls/polls.css deleted file mode 100644 index 0dd10fadf..000000000 --- a/apps/polls/static/polls/polls.css +++ /dev/null @@ -1 +0,0 @@ -.poll{width:400px}.poll ul{list-style-type:none}.poll-bar{border:solid 1px #ddd;height:6px;margin-bottom:10px}.poll-bar-inner{background:orange;height:6px}.poll-msg{font-weight:bold} \ No newline at end of file diff --git a/apps/polls/static/polls/polls.scss b/apps/polls/static/polls/polls.scss deleted file mode 100644 index 28cd5a5cf..000000000 --- a/apps/polls/static/polls/polls.scss +++ /dev/null @@ -1,21 +0,0 @@ -.poll { - width: 400px; - ul { - list-style-type: none; - } -} - -.poll-bar { - border: solid 1px #ddd; - height:6px; - margin-bottom: 10px; -} - -.poll-bar-inner { - background: orange; - height: 6px; -} - -.poll-msg { - font-weight: bold; -} \ No newline at end of file diff --git a/apps/wolnelektury_core/static/css/main/_tools.scss b/apps/wolnelektury_core/static/css/main/_tools.scss deleted file mode 100755 index b3441eff7..000000000 --- a/apps/wolnelektury_core/static/css/main/_tools.scss +++ /dev/null @@ -1,29 +0,0 @@ -@mixin size-px($name, $size) { - #{$name}: $size + px; - #{$name}: ($size / 16) + rem; -} - -@mixin mono { - font-family: "Andale Mono", "Lucida Sans Typewriter", "Courier New"; -} - -@mixin hidden-label { - display: block; - width: 1px; - height: 1px; - overflow:hidden; -} - -@mixin white-box { - border-color: #ddd; - border-style: solid; - @include size-px(border-width, 1); - background: #fff; - - -moz-box-shadow: 2px 2px 2px #ddd; - -webkit-box-shadow: 2px 2px 2px #ddd; - box-shadow: 2px 2px 2px #ddd; - -moz-box-shadow: .125rem .125rem .125rem #ddd; - -webkit-box-shadow: .125rem .125rem .125rem #ddd; - box-shadow: .125rem .125rem .125rem #ddd; -} diff --git a/apps/wolnelektury_core/static/css/main/auth.scss b/apps/wolnelektury_core/static/css/main/auth.scss deleted file mode 100755 index 8a88e12bb..000000000 --- a/apps/wolnelektury_core/static/css/main/auth.scss +++ /dev/null @@ -1,48 +0,0 @@ -@import "tools"; - -.email_list { - .verified { - display: inline-block; - margin-left: 2em; - font-style: italic; - } - .unverified { - display: inline-block; - margin-left: 2em; - color: #717171; - font-style: italic; - } - .primary { - display: inline-block; - margin-left: 2em; - font-weight: bold; - } -} - -.socialaccount_provider { - display: inline-block; - background-repeat: no-repeat; - color: transparent; - - @include size-px(height, 40); - @include size-px(width, 40); - vertical-align: middle; - - &.google { - background-image: url(/static/img/auth/google.png); - } -} - - -.socialaccount_providers { - margin: 0; - @include size-px(margin-top, 10); - @include size-px(margin-bottom, 10); - padding: 0; - - li { - display: inline; - list-style: none; - @include size-px(margin-right, 10); - } -} diff --git a/apps/wolnelektury_core/static/css/main/base.scss b/apps/wolnelektury_core/static/css/main/base.scss deleted file mode 100755 index 0926569fc..000000000 --- a/apps/wolnelektury_core/static/css/main/base.scss +++ /dev/null @@ -1,104 +0,0 @@ -@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 { - color: #0d7e85; - text-decoration: none; - - img { - border: 0; - } -} - -h1 { - @include size-px(font-size, 35); - font-weight: normal; - @include size-px(margin-top, 14); - - a { - color: inherit; - } -} - -h2 { - @include size-px(font-size, 20); - font-weight: normal; -} - -h3 { - @include size-px(font-size, 15); - font-weight: normal; -} - - -.normal-text { - line-height: 1.3em; -} - -.white-box { - @include size-px(padding, 10); - @include white-box; -} - - -ul.plain { - list-style:none; - margin: 0; - padding: 0; -} - - -.theme-list-link { - @include mono; - @include size-px(font-size, 11); - - &:after { - @include size-px(padding-left, 11); - content: url("/static/img/arrow-teal.png"); - vertical-align: middle; - } -} - - -.left-column, .right-column { - @include size-px(max-width, 600); -} -@media screen and (min-width: 62.5em) { - .left-column { - @include size-px(width, 470); - float: left; - } - .right-column { - @include size-px(width, 470); - float:right; - } -} - -.pagination { - display: block; - @include size-px(font-size, 12); - @include size-px(padding, 6); - text-align:center; -} diff --git a/apps/wolnelektury_core/static/css/main/book_box.scss b/apps/wolnelektury_core/static/css/main/book_box.scss deleted file mode 100755 index 02de7a230..000000000 --- a/apps/wolnelektury_core/static/css/main/book_box.scss +++ /dev/null @@ -1,455 +0,0 @@ -@import "tools"; - -@mixin inner-box { - display: block; - color: black; - @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); - - @include white-box; -} - -.book-mini-box img.cover { - @include size-px(height, 193); - @include size-px(width, 139); -} - - -.cover-area { - float: left; - @include size-px(margin-right, 15); - @include size-px(margin-bottom, 5); - - - @media screen and (min-width: 32em) { - position: absolute; - top: 0; - left: 0; - margin-right: 0; - } - - img.cover { - @include size-px(height, 193 / 2); - @include size-px(width, 139 / 2); - - @media screen and (min-width: 20em) { - @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 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; - } -} - - - -.work-list { - margin: 0; - padding: 0; - list-style: none; - - .Book-item { - @media screen and (min-width: 32em) { - display: inline-block; - } - vertical-align: top; - } -} - - -.book-box { - margin: 0; - vertical-align: top; - - @media screen and (min-width: 32em) { - @include size-px(width, 487.5); - } - - .book-box-inner { - position: relative; - @include inner-box; - @include size-px(min-height, 197.5); - } -} - - -.book-wide-box { - margin: 0; - vertical-align: top; - - @media screen and (min-width: 62.5em) { - @include size-px(width, 975); - } - - .book-box-inner { - position: relative; - @include size-px(min-height, 244); - @include inner-box; - @include size-px(margin-left, 0); - @include size-px(margin-right, 0); - - .book-left-column { /* FIXME */ - @include size-px(max-width, 600); - - @media screen and (min-width: 62.5em) { - float: left; - @include size-px(width, 536); - } - } - - .license-icon { - display: block; - @include size-px(margin-top, 5); - } - - @media screen and (min-width: 62.5em) { - .book-box-head, - .tags, - .book-box-tools { - @include size-px(width, 382); - } - } - - #theme-list-wrapper { - @include size-px(margin-left, 154); - margin-bottom: 0; - @include size-px(width, 300); - - p { - @include size-px(margin-top, 10); - @include size-px(margin-bottom, 10); - } - } - - .right-column { - @include size-px(margin-top, 16); - - @media screen and (min-width: 62.5em) { - @include size-px(width, 415); - // Eat the padding - @include size-px(margin-top, -8); - @include size-px(margin-right, -10); - } - - .other-tools, - .other-download { - float: left; - @include size-px(width, 145); - @include size-px(margin-top, 50); - @include size-px(margin-bottom, 0); - @include size-px(margin-left, 5); - @include size-px(margin-right, 0); - @include size-px(font-size, 11); - - h2 { - margin: 0; - @include size-px(font-size, 11); - @include mono; - } - } - .other-download { - @include size-px(margin-left, 15); - @include size-px(width, 220); - } - } - } -} - - -.book-box-body { - margin-bottom: 1em; - @media screen and (min-width: 32em) { - margin-bottom: 0; - @include size-px(height, 170); - } - position: relative; - - .book-box-head { - @include size-px(padding-top, 14); - @include size-px(margin-bottom, 10); - - @media screen and (min-width: 32em) { - @include size-px(min-height, 70); - @include size-px(width, 310); - float: right; - } - - a { - color: black; - } - .author { - @include size-px(font-size, 11); - @include mono; - line-height: 1.2em; - max-height: 2.4em; - overflow: hidden; - - @media screen and (min-width: 32em) { - @include size-px(max-width, 264); - } - } - .title { - @include size-px(font-size, 24); - line-height: 1.2em; - @include size-px(margin-top, 7.2); - margin-bottom: .5em; - - @media screen and (min-width: 32em) { - margin-bottom: 0; - height: 2.4em; - overflow: hidden; - } - } - } - - .tags { - @include size-px(font-size, 11); - line-height: 1.2em; - - @media screen and (min-width: 32em) { - @include size-px(width, 310); - float: right; - clear: right; - max-height: 4.8em; - overflow: hidden; - } - - .category { - display: block; - margin-top: .5em; - margin-bottom: .5em; - - @media screen and (min-width: 32em) { - display: inline; - } - - .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); - margin: 0; - padding: 0; - list-style: none; - - clear: left; - - @media screen and (min-width: 20em) { - clear: none; - @include size-px(margin-left, 139 + 15); - } - - @media screen and (min-width: 32em) { - @include size-px(width, 310); - float: right; - clear: right; - } - - li { - @include mono; - - @media screen and (min-width: 32em) { - display: inline-block; - } - } - - .book-box-read { - @media screen and (min-width: 32em) { - @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; - - @media screen and (min-width: 32em) { - @include size-px(width, 93.5); - } - - a { - position: relative; - z-index: 101; - - &.downarrow { - color: black; - - @media screen and (min-width: 32em) { - color: #0D7E85; - } - - &: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 { - @include size-px(padding-left, 25); - - @media screen and (min-width: 32em) { - display: none; - position: absolute; - - @include size-px(width, 180); - @include size-px(padding-top, 38); - @include size-px(padding-bottom, 9); - @include size-px(padding-left, 19); - @include size-px(padding-right, 19); - - @include white-box; - - z-index: 100; - - @include size-px(top, -16); - @include size-px(left, -19); - } - - span { - display: block; - @include size-px(margin-top, 16); - - @media screen and (min-width: 32em) { - @include size-px(margin-top, 0); - - &:first-child { - @include size-px(margin-top, 16); - } - } - } - } - - &:hover .book-box-formats, - &.hover .book-box-formats { - display: block; - } - } - - .book-box-audiobook { - @media screen and (min-width: 32em) { - @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; -} - - -#book-detail .see-also { - 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); - } - } -} diff --git a/apps/wolnelektury_core/static/css/main/book_list.scss b/apps/wolnelektury_core/static/css/main/book_list.scss deleted file mode 100755 index fc2c1343b..000000000 --- a/apps/wolnelektury_core/static/css/main/book_list.scss +++ /dev/null @@ -1,102 +0,0 @@ -/* listing of all books */ - -@import "tools"; - -#book-a-list { - #book-list-nav { - @include size-px(border-width, 0); - @include size-px(border-bottom-width, 1); - border-style: solid; - border-color: #CFCFCF; - @include size-px(padding, 9.75); - line-height: 2em; - - @media screen and (min-width: 30em) { - @include size-px(border-bottom-width, 0); - @include size-px(border-left-width, 1); - float: right; - width: 50%; - } - - @media screen and (min-width: 62.5em) { - line-height: 1.3em; - } - - h2 { - cursor: pointer; - - &:after { - @include size-px(padding-left, 10); - content: url("/static/img/arrow-gray.png"); - vertical-align: top; - } - - @media screen and (min-width: 30em) { - font-size: 1em; - margin: 0; - cursor: regular; - - &:after { - display: none; - } - } - } - - #book-list-nav-index { - display: none; - @media screen and (min-width: 30em) { - display: block !important; - } - } - - ul { - list-style-type: none; - @include size-px(margin, 5); - padding: 0; - } - .book-list-show-index { - display: none; - } - } - - #book-list { - @include size-px(padding-left, 5); - line-height: 2em; - - @media screen and (min-width: 62.5em) { - @include size-px(padding-left, 50); - line-height: 1.3em; - } - - ol { - @include size-px(padding-left, 13); - @include size-px(margin-top, 4); - @include size-px(margin-bottom, 15.6); - @include size-px(margin-left, 0); - @include size-px(margin-right, 0); - list-style: none; - } - h2 { - @include size-px(font-size, 13); - margin: 0; - a { - color: black; - } - } - } - - #book-list-up { - display: block; - position: fixed; - @include size-px(bottom, 50); - @include size-px(right, 50); - @include size-px(border-left-width, 1); - border-left-style: solid; - border-left-color: #CFCFCF; - @include size-px(padding-top, 20); - @include size-px(padding-bottom, 20); - @include size-px(padding-left, 10); - @include size-px(padding-right, 10); - background-color: white; - } -} diff --git a/apps/wolnelektury_core/static/css/main/catalogue.scss b/apps/wolnelektury_core/static/css/main/catalogue.scss deleted file mode 100755 index 4a08b4657..000000000 --- a/apps/wolnelektury_core/static/css/main/catalogue.scss +++ /dev/null @@ -1,31 +0,0 @@ -/* listing of all books */ - -@import "tools"; - -.catalogue-catalogue { - ul { - column-width: 25em; - -moz-column-width: 25em; - -webkit-column-width: 25em; - - @include size-px(padding-left, 10); - - @media screen and (min-width: 20em) { - @include size-px(padding-left, 40); - } - - li { - margin-bottom: 1em; - - @media screen and (min-width: 62.5em) { - margin-bottom: .5em; - } - } - } - - h2 { - @include size-px(font-size, 26); - margin: 0; - @include size-px(padding, 26); - } -} diff --git a/apps/wolnelektury_core/static/css/main/cite.scss b/apps/wolnelektury_core/static/css/main/cite.scss deleted file mode 100755 index d15faaaa9..000000000 --- a/apps/wolnelektury_core/static/css/main/cite.scss +++ /dev/null @@ -1,50 +0,0 @@ -@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); - - .vip { - margin: 0; - color: #575C63; - @include size-px(font-size, 11); - } - - .cite-body { - @include size-px(font-size, 18); - line-height: 1.3em; - } - - blockquote { - padding: 0; - margin: 0; - - p { - margin: 0; - } - } - - .source - { - color: #444; - @include mono; - @include size-px(font-size, 11); - @include size-px(margin-top, 16); - } -} - - - - -.book-wide-box .cite { - background-color: #f7f7f7; - vertical-align: middle; - @include size-px(width, 395); - margin: 0; - @include size-px(padding, 10); -} diff --git a/apps/wolnelektury_core/static/css/main/dialogs.scss b/apps/wolnelektury_core/static/css/main/dialogs.scss deleted file mode 100755 index a5316774a..000000000 --- a/apps/wolnelektury_core/static/css/main/dialogs.scss +++ /dev/null @@ -1,140 +0,0 @@ -@import "tools"; - -.dialog-window { - position: absolute; - display: none; - background-color: transparent; - @include size-px(margin-top, -5); - @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 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 deleted file mode 100755 index cc37b13da..000000000 --- a/apps/wolnelektury_core/static/css/main/footer.scss +++ /dev/null @@ -1,30 +0,0 @@ -@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/form.scss b/apps/wolnelektury_core/static/css/main/form.scss deleted file mode 100755 index 42e867595..000000000 --- a/apps/wolnelektury_core/static/css/main/form.scss +++ /dev/null @@ -1,26 +0,0 @@ -form table { - th { - vertical-align: top; - text-align: left; - font-weight: normal; - } - td { - padding-bottom: 1em; - } - - .required th:after { - content: " *"; - } - - .errorlist { - color: red; - margin: 0; - padding: 0; - list-style: none; - } - .helptext { - color: #888; - font-size: .9em; - font-style: italic; - } -} diff --git a/apps/wolnelektury_core/static/css/main/fragment.scss b/apps/wolnelektury_core/static/css/main/fragment.scss deleted file mode 100755 index f82d50a4e..000000000 --- a/apps/wolnelektury_core/static/css/main/fragment.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import "tools"; - -.Fragment-item { - @include size-px(margin-bottom, 20); - @include white-box; - - .fragment { - color: black; - display: block; - } - .toggle { - @include size-px(font-size, 11); - display: block; - @include size-px(padding-top, 5); - @include size-px(padding-bottom, 5); - @include size-px(padding-left, 0); - @include size-px(padding-right, 0); - } -} diff --git a/apps/wolnelektury_core/static/css/main/header.scss b/apps/wolnelektury_core/static/css/main/header.scss deleted file mode 100755 index 3bf6fcea3..000000000 --- a/apps/wolnelektury_core/static/css/main/header.scss +++ /dev/null @@ -1,217 +0,0 @@ -@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, 11); - - @media screen and (min-width: 24em) { - @include size-px(padding-top, 6); - @include size-px(font-size, 13); - 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); - position: relative; - - @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); - @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; - } - } - } - - 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 deleted file mode 100755 index a5596882d..000000000 --- a/apps/wolnelektury_core/static/css/main/hidden.scss +++ /dev/null @@ -1,55 +0,0 @@ -@import "tools"; - -.hidden-box-wrapper { - position: relative; - - .hidden-box { - position: absolute; - left: 0; - display: none; - padding: 1em 1em .5em 1em; - @include white-box; - - z-index: 500; - - ul { - list-style: none; - padding: 0; - margin: 0; - @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; - } - } - } - } -} - -@media screen and (min-width: 24em) { - #menu-collections ul { - @include size-px(width, 180); - } -} - diff --git a/apps/wolnelektury_core/static/css/main/main_content.scss b/apps/wolnelektury_core/static/css/main/main_content.scss deleted file mode 100755 index 7d1aad43b..000000000 --- a/apps/wolnelektury_core/static/css/main/main_content.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "tools"; - -#main-content { - position: relative; - - @media screen and (min-width: 62.5em) { - @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 deleted file mode 100755 index 6f45bf67a..000000000 --- a/apps/wolnelektury_core/static/css/main/main_page.scss +++ /dev/null @@ -1,272 +0,0 @@ -@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 deleted file mode 100755 index 496b805e9..000000000 --- a/apps/wolnelektury_core/static/css/main/menu.scss +++ /dev/null @@ -1,194 +0,0 @@ -@import "tools"; - -#nav-line { - background-color: #e2e2e2; - 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; - - display: none; - position: absolute; - top: 49px; - left: 0; - right: 10px; - z-index: 400; - - @media screen and (min-width: 24em) { - right: auto; - } - - @media screen and (min-width: 53em) { - display: block !important; - position: static; - @include size-px(margin-left, 6); - } - - li.menu { - background-color: #e2e2e2; - - @media screen and (min-width: 53em) { - float: left; - } - - a.menu { - display: block; - @include size-px(line-height, 13); - @include size-px(padding-top, 18); - @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-color: white; - } - } - } - - #lang-menu { - display: block; - float: right; - - @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; - - .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; - } - } - - .lang-flag { - @include size-px(font-size, 13); - @include size-px(line-height, 15); - } - } - - #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, 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; - 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; - padding: 0; - left: 0; - 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/search.scss b/apps/wolnelektury_core/static/css/main/search.scss deleted file mode 100755 index 2b96361b0..000000000 --- a/apps/wolnelektury_core/static/css/main/search.scss +++ /dev/null @@ -1,90 +0,0 @@ -@import "tools"; - -/* jquery UI overrides us */ -.ui-menu .ui-menu-item a { - color: #0d7e85 !important; - line-height: 1.636em !important; -} - -.ui-widget { - font-family: Georgia !important; - font-size: 10px !important; - font-size: .625rem !important; -} - -.ui-widget-content { - background: #EEEEEE !important; /* #E2E2E2 ? */ - border-radius: 0px !important; -} - - - -.inline-tag-lists p span:first-child { - color: #281d1c; -} - -/* just on search page */ -.top-tag-list { - @include size-px(margin-top, 22); - @include size-px(margin-bottom, 16); -} - - -.search-result { - @include size-px(width, 975); - - .book-box-body { - @include size-px(width, 310); - } -} - - - -.book-list-header { - @include size-px(width, 975); - padding: 0em; - @include size-px(margin-left, -1); - - .book-box-inner { - min-height: 1em; - } - - p { - @include size-px(font-size, 24); - @include size-px(margin, 5); - } -} - -.snippets { - @include size-px(width, 440); - float: right; - @include size-px(margin-top, -200); - - .snippet-text { - @include size-px(font-size, 12); - @include size-px(margin-top, 13); - @include size-px(margin-bottom, 13); - @include size-px(margin-left, 0); - @include size-px(margin-right, 0); - @include size-px(padding, 12); - background: #f7f7f7; - } - - .anchor { - display: none; - } -} - - -.search-hint-label { - display: inline-block; - @include size-px(font-size, 11); - @include size-px(width, 275); - line-height: 1.636em; -} - -.search-hint-category { - @include size-px(font-size, 11); - line-height: 1.636em; -} - diff --git a/apps/wolnelektury_core/static/css/main/tag.scss b/apps/wolnelektury_core/static/css/main/tag.scss deleted file mode 100755 index a06e0b59f..000000000 --- a/apps/wolnelektury_core/static/css/main/tag.scss +++ /dev/null @@ -1,104 +0,0 @@ -@import "tools"; - -.page-desc { - @include size-px(margin-left, 15); -} - -#tagged-object-list { - @media screen and (min-width: 62.5em) { - .left-column, .right-column { - @include size-px(width, 480); - } - } - - .see-also, .download { - float: left; - @include size-px(margin-top, 20); - @include size-px(margin-bottom, 20); - - h2 { - @include mono; - @include size-px(font-size, 11); - margin: 0; - } - - ul { - @include size-px(font-size, 11); - list-style: none; - padding: 0; - margin: 0; - } - } - - .see-also { - @include size-px(margin-left, 80); - @include size-px(width, 143); - } - .download { - @include size-px(margin-left, 20); - } - - .left-column .see-also { - margin-left: 0; - } -} - -#description { - @include size-px(margin-bottom, 26); - cursor: pointer; - - dl { - margin-top: 0; - } - dt { - display: inline; - font-weight: bold; - margin: 0; - } - dd { - display: inline; - margin: 0; - } - p { - margin-top: 0; - } - #description .meta { - list-style: none; - padding: 0; - margin: 0; - } - #description .meta li { - text-align: right; - color: #666; - @include size-px(font-size, 11.7); - } -} - -.inline-tag-lists { - @include size-px(font-size, 11); - - .inline-header { - @include mono; - display: inline-block; - vertical-align: top; - @include size-px(width, 77); - } - - .inline-body { - display: inline-block; - vertical-align: top; - @include size-px(margin-bottom, 5.5); - @include size-px(width, 385); - - ul { - list-style: none; - padding: 0; - margin: 0; - - li { - display: inline-block; - @include size-px(margin-right, 11); - } - } - } -} diff --git a/apps/wolnelektury_core/static/scss/all.scss b/apps/wolnelektury_core/static/scss/all.scss new file mode 100644 index 000000000..8d6e0d326 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/all.scss @@ -0,0 +1,23 @@ +@import "tools"; + +@import "main/auth"; +@import "main/base"; +@import "main/book_box"; +@import "main/book_list"; +@import "main/catalogue"; +@import "main/cite"; +@import "main/dialogs"; +@import "main/footer"; +@import "main/form"; +@import "main/fragment"; +@import "main/header"; +@import "main/hidden"; +@import "main/main_content"; +@import "main/main_page"; +@import "main/menu"; +@import "main/search"; +@import "main/tag"; + +@import "funding/funding"; + +@import "polls/polls"; diff --git a/apps/wolnelektury_core/static/scss/funding/funding.scss b/apps/wolnelektury_core/static/scss/funding/funding.scss new file mode 100644 index 000000000..61a48d681 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/funding/funding.scss @@ -0,0 +1,174 @@ +.funding { + background: orange; + margin: auto; + @include size(padding, 5px 0); + position: relative; + .close { + @include size(font-size, 10px); + } + .call-area { + float:left; + @include size(padding-right, 6px); + } + a.call { + @include size(height, 18px); + + @include size(padding, 5.25px 7.5px); + @include size(margin, 7.5px); + display: inline-block; + vertical-align: top; + text-align: center; + + background: lighten(#018189, .05); + @include size(width, 135px); + } + .learn-more { + text-align: center; + margin: auto; + @include size(font-size, 10px); + padding: .5em; + @include min-screen(420px) { + padding: 0; + } + } + .description { + @include size(padding-left, 6px); + + a { + display: block; + color: black; + @include size(padding, 0 3px); + } + } + strong { + @include size(font-size, 15px); + @include size(padding, 3px 0 0); + } + .progress { + .piece { + @include size(font-size, 13px); + @include size(padding, 4px 6px); + } + @include size(margin, 3px 12px 4px 0); + @include size(border-radius, 20px); + background-image: url(/static/img/progress-pixel.png); + background-repeat: repeat-y; + background-color: mix(#ec6d00, orange, .5); + @include box-shadow(1px 1px 1px #888); + } + .with-button { + clear: left; + @include min-screen(420px) { + clear: none; + @include size(margin-left, 171px); + } + } + + .funding-title { + @include size(font-size, 11px); + } + .funding-title-strong { + @extend .funding-title; + font-weight: bold; + @include size(font-size, 15px); + } + .close { + position: absolute; + top: 0px; + @include size(right, 5px); + } +} + +.funding-top-header { + @extend .funding; + + @include min-screen(1000px) { + @include size(width, 975px); + } +} + + +.wlfund { + width: 100%; + border-spacing:0; + + td { + @include size(padding, 10px 5px 10px); + text-align: center; + @include size(border-top, 10px solid rgba(255, 255, 255, 0)); + @include size(border-bottom, 2px solid #DDDDDD); + + background-clip: padding-box; + -moz-background-clip: padding; + -webkit-background-clip: padding; + } + td.oneline { + white-space: nowrap; + } + + td:last-child { + text-align: right; + } + + .funding-plus td { + background-color: mix(#0D7E85, white, .2); + } + + .funding-minus td { + background-color: white; + } +} + + + +.honking { + background: #018189; + @include size(font-size, 15px); + @include size(padding, 7.5px); + color: white; + border: 0; + @include box-shadow(3px 3px 4.5px #888888); + position: relative; +} +.honking:hover { + @include box-shadow(none); + @include size(top, 1px); + @include size(left, 1px); +} + + + +.share { + a { + @include size(margin-right, 15px); + + img { + vertical-align: middle; + } + } +} + +.funding-handle { + position: absolute; + top: 0; + right: 0; + z-index: 2; + background: orange; + cursor: pointer; + @include size(padding, 2.6px 13px); + @include size(border-radius, 0 0 0 10px); + @include size(font-size, 13px); +} + +.funding-cover { + float: left; + @include size(margin-right, 10px); +} + +.funding-details-intro { + @include size(padding-top, 10px); + + h3:first-of-type { + margin-top: 0; + } +} diff --git a/apps/wolnelektury_core/static/scss/main/auth.scss b/apps/wolnelektury_core/static/scss/main/auth.scss new file mode 100755 index 000000000..03cf6150a --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/auth.scss @@ -0,0 +1,44 @@ +.email_list { + .verified { + display: inline-block; + margin-left: 2em; + font-style: italic; + } + .unverified { + display: inline-block; + margin-left: 2em; + color: #717171; + font-style: italic; + } + .primary { + display: inline-block; + margin-left: 2em; + font-weight: bold; + } +} + +.socialaccount_provider { + display: inline-block; + background-repeat: no-repeat; + color: transparent; + + @include size(height, 40px); + @include size(width, 40px); + vertical-align: middle; + + &.google { + background-image: url(/static/img/auth/google.png); + } +} + + +.socialaccount_providers { + @include size(margin, 10px 0); + padding: 0; + + li { + display: inline; + list-style: none; + @include size(margin-right, 10px); + } +} diff --git a/apps/wolnelektury_core/static/scss/main/base.scss b/apps/wolnelektury_core/static/scss/main/base.scss new file mode 100755 index 000000000..02f02a37e --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/base.scss @@ -0,0 +1,101 @@ +/* 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(font-size, 13px); +} + +a { + color: #0d7e85; + text-decoration: none; + + img { + border: 0; + } +} + +h1 { + @include size(font-size, 35px); + font-weight: normal; + @include size(margin-top, 14px); + + a { + color: inherit; + } +} + +h2 { + @include size(font-size, 20px); + font-weight: normal; +} + +h3 { + @include size(font-size, 15px); + font-weight: normal; +} + + +.normal-text { + line-height: 1.3em; +} + +.white-box { + @include size(padding, 10px); + @include white-box; +} + + +ul.plain { + list-style:none; + margin: 0; + padding: 0; +} + + +.theme-list-link { + @include mono; + @include size(font-size, 11px); + + &:after { + @include size(padding-left, 11px); + content: url("/static/img/arrow-teal.png"); + vertical-align: middle; + } +} + + +.left-column, .right-column { + @include size(max-width, 600px); +} +@media screen and (min-width: 62.5em) { + .left-column { + @include size(width, 470px); + float: left; + } + .right-column { + @include size(width, 470px); + float:right; + } +} + +.pagination { + display: block; + @include size(font-size, 12px); + @include size(padding, 6px); + text-align:center; +} diff --git a/apps/wolnelektury_core/static/scss/main/book_box.scss b/apps/wolnelektury_core/static/scss/main/book_box.scss new file mode 100755 index 000000000..0ee26be0f --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/book_box.scss @@ -0,0 +1,448 @@ +@mixin inner-box { + display: block; + color: black; + @include size(margin, 1px); + @include size(padding, 8px 10px); + @include white-box; +} + +.book-mini-box img.cover { + @include size(height, 193px); + @include size(width, 139px); +} + + +.cover-area { + float: left; + @include size(margin-right, 15px); + @include size(margin-bottom, 5px); + + @media screen and (min-width: 32em) { + position: absolute; + top: 0; + left: 0; + margin-right: 0; + } + + img.cover { + @include size(height, 193px / 2); + @include size(width, 139px / 2); + + @media screen and (min-width: 20em) { + @include size(height, 193px); + @include size(width, 139px); + } + } +} + +.book-mini-box { + @include size(width, 161.5px); + display: inline-block; + vertical-align: top; + + a { + @include inner-box; + @include size(height, 271px); + @include size(margin, 1px); + overflow: hidden; + } + img.cover { + @include size(margin-bottom, 18px); + } + .desc { + margin-left: 0; + } + .author { + @include size(font-size, 11px); + @include mono; + color: #6d7877; + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .title { + @include size(font-size, 14px); + color: #242424; + } +} + + + +.work-list { + margin: 0; + padding: 0; + list-style: none; + + .Book-item { + @media screen and (min-width: 32em) { + display: inline-block; + } + vertical-align: top; + } +} + + +.book-box { + margin: 0; + vertical-align: top; + + @media screen and (min-width: 32em) { + @include size(width, 487.5px); + } + + .book-box-inner { + position: relative; + @include inner-box; + @include size(min-height, 197.5px); + } +} + + +.book-wide-box { + margin: 0; + vertical-align: top; + + @media screen and (min-width: 62.5em) { + @include size(width, 975px); + } + + .book-box-inner { + position: relative; + @include size(min-height, 244px); + @include inner-box; + @include size(margin-left, 0); + @include size(margin-right, 0); + + .book-left-column { /* FIXME */ + @include size(max-width, 600px); + + @media screen and (min-width: 62.5em) { + float: left; + @include size(width, 536px); + } + } + + .license-icon { + display: block; + @include size(margin-top, 5px); + } + + @media screen and (min-width: 62.5em) { + .book-box-head, + .tags, + .book-box-tools { + @include size(width, 382px); + } + } + + #theme-list-wrapper { + @include size(margin-left, 154px); + margin-bottom: 0; + @include size(width, 300px); + + p { + @include size(margin-top, 10px); + @include size(margin-bottom, 10px); + } + } + + .right-column { + @include size(margin-top, 16px); + + @media screen and (min-width: 62.5em) { + @include size(width, 415px); + // Eat the padding + @include size(margin-top, -8px); + @include size(margin-right, -10px); + } + + .other-tools, + .other-download { + float: left; + @include size(width, 145px); + @include size(margin-top, 50px); + @include size(margin-bottom, 0); + @include size(margin-left, 5px); + @include size(margin-right, 0); + @include size(font-size, 11px); + + h2 { + margin: 0; + @include size(font-size, 11px); + @include mono; + } + } + .other-download { + @include size(margin-left, 15px); + @include size(width, 220px); + } + } + } +} + + +.book-box-body { + @include size(margin-bottom, 10px); + @media screen and (min-width: 32em) { + margin-bottom: 0; + @include size(height, 170px); + } + position: relative; + + .book-box-head { + @include size(padding-top, 14px); + @include size(margin-bottom, 10px); + + @media screen and (min-width: 32em) { + @include size(min-height, 70px); + @include size(width, 310px); + float: right; + } + + a { + color: black; + } + .author { + @include size(font-size, 11px); + @include mono; + @include size(line-height, 13.2px); + @include size(max-height, 26.4px); + overflow: hidden; + + @media screen and (min-width: 32em) { + @include size(max-width, 264px); + } + } + .title { + @include size(font-size, 24px); + line-height: 1.2em; + @include size(margin-top, 7.2px); + @include size(margin-bottom, 12px); + + @media screen and (min-width: 32em) { + margin-bottom: 0; + @include size(height, 57.6px); + overflow: hidden; + } + } + } + + .tags { + @include size(font-size, 11px); + line-height: 1.2em; + + @media screen and (min-width: 32em) { + @include size(width, 310px); + float: right; + clear: right; + @include size(max-height, 57.6px); + overflow: hidden; + } + + .category { + display: block; + @include size(margin-top, 6px); + @include size(margin-bottom, 6px); + + @media screen and (min-width: 32em) { + display: inline; + } + + .mono { + @include mono; + } + + .book-box-tag { + @include size(margin-left, 4.4px); + @include size(margin-right, 5.5px); + } + } + } + +} + + + +.book-box-tools { + @include size(font-size, 11px); + margin: 0; + padding: 0; + list-style: none; + + clear: left; + + @media screen and (min-width: 20em) { + clear: none; + @include size(margin-left, 139px + 15px); + } + + @media screen and (min-width: 32em) { + @include size(width, 310px); + float: right; + clear: right; + } + + li { + @include mono; + + @media screen and (min-width: 32em) { + display: inline-block; + } + } + + .book-box-read { + @media screen and (min-width: 32em) { + @include size(width, 126.5px); + } + + a { + @include mono; + } + + a:before { + content: url("/static/img/read.png"); + @include size(font-size, 25px); + @include size(margin-right, 3.71px); + vertical-align: middle; + font-weight: normal; + } + } + + .book-box-download { + position: relative; + + @media screen and (min-width: 32em) { + @include size(width, 93.5px); + } + + a { + position: relative; + z-index: 101; + + &.downarrow { + color: black; + + @media screen and (min-width: 32em) { + color: #0D7E85; + } + + &:before { + content: url("/static/img/download.png"); + @include size(font-size, 25px); + @include size(margin-right, 3.71px); + vertical-align: middle; + font-weight: normal; + } + } + } + + .book-box-formats { + @include size(padding-left, 25px); + + @media screen and (min-width: 32em) { + display: none; + position: absolute; + + @include size(width, 180px); + @include size(padding-top, 38px); + @include size(padding-bottom, 9px); + @include size(padding-left, 19px); + @include size(padding-right, 19px); + + @include white-box; + + z-index: 100; + + @include size(top, -16px); + @include size(left, -19px); + } + + span { + display: block; + @include size(margin-top, 16px); + + @media screen and (min-width: 32em) { + @include size(margin-top, 0); + + &:first-child { + @include size(margin-top, 16px); + } + } + } + } + + &:hover .book-box-formats, + &.hover .book-box-formats { + display: block; + } + } + + .book-box-audiobook { + @media screen and (min-width: 32em) { + @include size(width, 77px); + } + + a:before { + content: url("/static/img/listen.png"); + @include size(font-size, 25px); + @include size(margin-right, 3.71px); + vertical-align: middle; + font-weight: normal; + } + + } +} + + + + +.star { + @include size(font-size, 22.5px); + @include size(margin-right, 11.25px); + 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; +} + + +#book-detail .see-also { + h1 { + @include size(height, 32px); + margin: 0; + @include size(padding-top, 19px); + @include size(padding-left, 10px); + + @include size(font-size, 11px); + @include mono; + font-weight: normal; + + @media screen and (min-width: 33em) { + @include size(padding-left, 19px); + } + } +} diff --git a/apps/wolnelektury_core/static/scss/main/book_list.scss b/apps/wolnelektury_core/static/scss/main/book_list.scss new file mode 100755 index 000000000..d4115dcbb --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/book_list.scss @@ -0,0 +1,92 @@ +/* listing of all books */ + +#book-a-list { + #book-list-nav { + @include size(border-width, 0); + @include size(border-bottom-width, 1px); + border-style: solid; + border-color: #CFCFCF; + @include size(padding, 9.75px); + line-height: 2em; + + @media screen and (min-width: 30em) { + @include size(border-bottom-width, 0px); + @include size(border-left-width, 1px); + float: right; + width: 50%; + } + + @media screen and (min-width: 62.5em) { + line-height: 1.3em; + } + + h2 { + cursor: pointer; + + &:after { + @include size(padding-left, 10px); + content: url("/static/img/arrow-gray.png"); + vertical-align: top; + } + + @media screen and (min-width: 30em) { + font-size: 1em; + margin: 0; + cursor: regular; + + &:after { + display: none; + } + } + } + + #book-list-nav-index { + display: none; + @media screen and (min-width: 30em) { + display: block !important; + } + } + + ul { + list-style-type: none; + @include size(margin, 5px); + padding: 0; + } + .book-list-show-index { + display: none; + } + } + + #book-list { + @include size(padding-left, 5px); + line-height: 2em; + + @media screen and (min-width: 62.5em) { + @include size(padding-left, 50px); + line-height: 1.3em; + } + + ol { + @include size(padding-left, 13px); + @include size(margin, 4px 0 15.6px 0); + list-style: none; + } + h2 { + @include size(font-size, 13px); + margin: 0; + a { + color: black; + } + } + } + + #book-list-up { + display: block; + position: fixed; + @include size(bottom, 50px); + @include size(right, 50px); + @include size(border-left, solid 1px #CFCFCF); + @include size(padding, 20px 10px); + background-color: white; + } +} diff --git a/apps/wolnelektury_core/static/scss/main/catalogue.scss b/apps/wolnelektury_core/static/scss/main/catalogue.scss new file mode 100755 index 000000000..ba30e8271 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/catalogue.scss @@ -0,0 +1,29 @@ +/* listing of all books */ + +.catalogue-catalogue { + ul { + column-width: 25em; + -moz-column-width: 25em; + -webkit-column-width: 25em; + + @include size(padding-left, 10px); + + @media screen and (min-width: 20em) { + @include size(padding-left, 40px); + } + + li { + margin-bottom: 1em; + + @media screen and (min-width: 62.5em) { + margin-bottom: .5em; + } + } + } + + h2 { + @include size(font-size, 26px); + margin: 0; + @include size(padding, 26px); + } +} diff --git a/apps/wolnelektury_core/static/scss/main/cite.scss b/apps/wolnelektury_core/static/scss/main/cite.scss new file mode 100755 index 000000000..b95628888 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/cite.scss @@ -0,0 +1,45 @@ +.cite { + display: block; + color: black; + background: white; + @include size(padding, 30px 20px 1px 80px); + + .vip { + margin: 0; + color: #575C63; + @include size(font-size, 11px); + } + + .cite-body { + @include size(font-size, 18px); + line-height: 1.3em; + } + + blockquote { + padding: 0; + margin: 0; + + p { + margin: 0; + } + } + + .source + { + color: #444; + @include mono; + @include size(font-size, 11px); + @include size(margin-top, 16px); + } +} + + + + +.book-wide-box .cite { + background-color: #f7f7f7; + vertical-align: middle; + @include size(width, 395px); + margin: 0; + @include size(padding, 10px); +} diff --git a/apps/wolnelektury_core/static/scss/main/dialogs.scss b/apps/wolnelektury_core/static/scss/main/dialogs.scss new file mode 100755 index 000000000..2902862fc --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/dialogs.scss @@ -0,0 +1,138 @@ +.dialog-window { + position: absolute; + display: none; + background-color: transparent; + @include size(margin-top, -5px); + @include size(margin-left, 10px); + @include size(width, 200px); + + @media screen and (max-width: 29.999999em) { + left: 0 !important; + right: 0; + @include size(margin-left, 0); + width: auto; + } + + div.header { + @include mono; + @include size(font-size, 11px); + 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(font-size, 12px); + font-weight: normal; + margin-top: .4em; + } + + textarea, input { + width: 100%; + } +} + + + + + + + +.cuteform { + @include size(font-size, 11px); + + ol, ul { + padding: 0; + margin: 0; + list-style: none; + @include size(font-size, 11px); + + 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(width, 260px); + } + #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/scss/main/footer.scss b/apps/wolnelektury_core/static/scss/main/footer.scss new file mode 100755 index 000000000..8969a5ad7 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/footer.scss @@ -0,0 +1,26 @@ +#footer-wrapper { + @include size(margin-top, 50px); + @include size(padding-top, 30px); + background: #fff; + color: #767676; + @include size(border-top, 1px solid #ddd); +} + +footer#main { + @include size(font-size, 10px); + @include size(margin-left, 5px); + @include size(margin-right, 5px); + + @media screen and (min-width: 62.5em) { + @include size(width, 975px); + margin: auto; + } + + p { + @include size(margin-top, 2.5px); + @include size(margin-bottom, 2.5px); + margin-left: 0; + margin-right: 0; + } +} + diff --git a/apps/wolnelektury_core/static/scss/main/form.scss b/apps/wolnelektury_core/static/scss/main/form.scss new file mode 100755 index 000000000..42e867595 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/form.scss @@ -0,0 +1,26 @@ +form table { + th { + vertical-align: top; + text-align: left; + font-weight: normal; + } + td { + padding-bottom: 1em; + } + + .required th:after { + content: " *"; + } + + .errorlist { + color: red; + margin: 0; + padding: 0; + list-style: none; + } + .helptext { + color: #888; + font-size: .9em; + font-style: italic; + } +} diff --git a/apps/wolnelektury_core/static/scss/main/fragment.scss b/apps/wolnelektury_core/static/scss/main/fragment.scss new file mode 100755 index 000000000..1eaf61ce9 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/fragment.scss @@ -0,0 +1,14 @@ +.Fragment-item { + @include size(margin-bottom, 20px); + @include white-box; + + .fragment { + color: black; + display: block; + } + .toggle { + @include size(font-size, 11px); + display: block; + @include size(padding, 5px 0); + } +} diff --git a/apps/wolnelektury_core/static/scss/main/header.scss b/apps/wolnelektury_core/static/scss/main/header.scss new file mode 100755 index 000000000..4edd53e18 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/header.scss @@ -0,0 +1,215 @@ +$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(bottom, 45px); + 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(line-height, 20px); /* Make links easier to click when wrapped. */ + background-color: $header_bg; + color: #bbb; + + @media screen and (min-width: 62.5em) { + position: relative; + @include size(height, 94px); + @include size(width, 975px); + margin: auto; + } + + a { + color: #17CFDB; + } + + #logo { + display: block; + @include size(height, 94px); + @include size(width, 94px); + + @media screen and (min-width: 24em) { + float: left; + } + + img { + display: block; + } + } + + #tagline { + margin-top: 0; + @include size(margin-left, 5px); + @include size(margin-right, 5px); + padding-top: 0; + @include size(font-size, 11px); + + @media screen and (min-width: 24em) { + @include size(padding-top, 6px); + @include size(font-size, 13px); + text-align: right; + } + + @media screen and (min-width: 62.5em) { + position: absolute; + @include size(top, 10px); + @include size(left, 255px); + @include size(margin-left, 0px); + } + } + + #user-info { + margin-top: 0; + @include size(margin-left, 5px); + @include size(margin-right, 5px); + padding-top: 0; + @include mono; + @include size(font-size, 10px); + position: relative; + + @media screen and (min-width: 24em) { + @include size(padding-top, 15px); + text-align: right; + } + @media screen and (min-width: 62.5em) { + position: absolute; + top: 0; + right: 0; + @include size(margin-left, 0); + @include size(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; + } + } + } + + form#search-area { + position: relative; + clear: both; + @include size(height, 45px); + background: #444444; + color: white; + + @media screen and (min-width: 62.5em) { + position: absolute; + @include size(top, 49px); + @include size(left, 240px); + @include size(right, 0); + } + + #search-field { + position: absolute; + @include size(top, 5px); + @include size(left, 5px); + @include size(right, 113px); + + label { + @include hidden-label; + } + input#search { + z-index: 200; + position: relative; + @include size(height, 33px); + width: 100%; + padding: 0; + @include size(padding-left, 13px); + @include size(line-height, 32.5px); + + border: none; + @include size(border-radius, 5px); + @include box-shadow(0 0 6.5px #444444 inset); + + font-family: Georgia; + @include size(font-size, 13px); + 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(height, 45px); + @include size(width, 94px); + margin: 0; + padding: 0; + + border: none; + + @include mono; + @include size(font-size, 11px); + background: #018189; + color: white; + } + } +} diff --git a/apps/wolnelektury_core/static/scss/main/hidden.scss b/apps/wolnelektury_core/static/scss/main/hidden.scss new file mode 100755 index 000000000..718525be0 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/hidden.scss @@ -0,0 +1,53 @@ +.hidden-box-wrapper { + position: relative; + + .hidden-box { + position: absolute; + left: 0; + display: none; + @include size(padding, 10px 10px 5px 10px); + @include white-box; + + z-index: 500; + + ul { + list-style: none; + padding: 0; + margin: 0; + @include size(font-size, 11px); + + @include size(column-width, 132px); + @include size(-moz-column-width, 132px); + @include size(-webkit-column-width, 132px); + + @media screen and (min-width: 24em) { + @include size(width, 320px); + } + + @media screen and (min-width: 34em) { + @include size(width, 480px); + } + + @media screen and (min-width: 62.5em) { + @include size(width, 528px); + } + + + + li { + margin-bottom: 1em; + + @media screen and (min-width: 62.5em) { + margin-bottom: .5em; + } + } + } + } +} + +@media screen and (min-width: 24em) { + #menu-collections ul { + @include size(width, 180px); + } +} + diff --git a/apps/wolnelektury_core/static/scss/main/main_content.scss b/apps/wolnelektury_core/static/scss/main/main_content.scss new file mode 100755 index 000000000..87e140232 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/main_content.scss @@ -0,0 +1,8 @@ +#main-content { + position: relative; + + @media screen and (min-width: 62.5em) { + @include size(width, 975px); + margin: auto; + } +} diff --git a/apps/wolnelektury_core/static/scss/main/main_page.scss b/apps/wolnelektury_core/static/scss/main/main_page.scss new file mode 100755 index 000000000..ddce4fc21 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/main_page.scss @@ -0,0 +1,256 @@ +#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(padding, 46px 10px 48px 0); + background: none; + color: white; + + @media screen and (min-width: 30em) { + @include size(padding-right, 40px); + } + + .vip { + @include size(margin-left, 10px); + @include size(margin-top, 2.5px); + @include size(margin-bottom, 5px); + @include size(font-size, 11px); + + @media screen and (min-width: 16em) { + padding-left: 10%; + @include size(margin-left, -18px); + } + + @media screen and (min-width: 62.5em) { + float: left; + padding-left: 0; + @include size(margin-left, 16px); + text-align: right; + @include size(width, 147px); + } + } + + .cite-body { + @include size(margin, .5px); + @include size(font-size, 20px); + line-height: 1.16em; + + @media screen and (min-width: 30em) { + @include size(font-size, 30px); + } + } + + .source { + @include size(margin-top, 16px); + @include size(margin-bottom, 16px); + @include size(margin-right, 2px); + @include size(font-size, 12px); + } + + /* Make cite body and source slide to the left. */ + .cite-body, .source { + @include size(margin-left, 10px); + + @media screen and (min-width: 16em) { + padding-left: 21.9%; + @include size(margin-left, -38px); + } + + @media screen and (min-width: 62.5em) { + padding-left: 0; + @include size(margin-left, 175px); + } + } + + /* 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(font-size, 16px); + @media screen and (min-width: 30em) { + @include size(font-size, 20px); + } + } + + h2 { + margin: 0; + @include size(font-size, 11px); + color: #575c63; + } +} + + +#promo-box { + @include size(margin-top, 16px); + + @media screen and (min-width: 33em) { + float: right; + @include size(margin-top, -51px); + @include size(width, 320px); + } + + h1 { + @include size(padding, 20px 5px 0 10px); + @include size(height, 31px); + margin: 0; + background: #191919; + color: white; + @include mono; + @include size(font-size, 13px); + font-weight: normal; + + @media screen and (min-width: 33em) { + @include size(padding-left, 25px); + @include size(padding-right, 25px); + } + } + + #promo-box-body { + @include size(padding, 20px 5px); + @include size(border-bottom, 2px solid #efefef); + background: #efefef; + + @media screen and (min-width: 33em) { + @include size(padding-left, 28px); + @include size(padding-right, 28px); + } + + @media screen and (min-width: 62.5em) { + @include size(height, 300px); + } + + a { + display: block; + color: #6c6c6c; + } + p { + margin-top: 0; + @include size(font-size, 12px); + line-height: 1.55em; + color: #6c6c6c; + } + h2, h3 { + color: #0d777e; + @include size(font-size, 11px); + @include size(height, 27.5px); + margin: 0; + @include mono; + font-weight: normal; + + &:after { + content: " >"; + } + } + } +} + + +#main-last { + h1 { + @include size(height, 32px); + margin: 0; + @include size(padding-top, 19px); + @include size(padding-left, 10px); + + @include size(font-size, 11px); + @include mono; + font-weight: normal; + + @media screen and (min-width: 33em) { + @include size(padding-left, 19px); + } + + 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(margin-top, 5px); + @include size(padding, 0 5px); + vertical-align: top; + color: #989898; + + @media screen and (min-width: 20em) { + display: inline-block; + @include size(width, 206px); + @include size(padding-left, 17px); + @include size(padding-right, 17px); + } + + h1 { + @include size(height, 28px); + margin: 0; + @include size(padding-top, 25px); + @include size(font-size, 11px); + color: #017e85; + font-weight: normal; + @include mono; + } + + a { + color: black; + } + + ol, ul { + @include size(font-size, 11px); + list-style: none; + padding: 0; + margin: 0; + line-height: 1.45em; + + li { + @include size(margin-bottom, 8px); + @media screen and (min-width: 62.5em) { + @include size(margin-bottom, 2.5px); + } + } + } + + .social-links { + @include size(margin-top, 10px); + + a { + @include size(margin-right, 6px); + } + } +} diff --git a/apps/wolnelektury_core/static/scss/main/menu.scss b/apps/wolnelektury_core/static/scss/main/menu.scss new file mode 100755 index 000000000..38a7d20bc --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/menu.scss @@ -0,0 +1,176 @@ +#nav-line { + background-color: #e2e2e2; + position: relative; + + @media screen and (min-width: 62.5em) { + @include size(width, 975px); + margin: auto; + } + + #show-menu { + display: block; + float: left; + @include size(line-height, 13px); + @include size(padding, 18px 13px); + color: #0c7076; + @include size(font-size, 11px); + @include mono; + + .long { + display: none; + + &:after { + @include size(padding-left, 10px); + 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; + + display: none; + position: absolute; + @include size(top, 49px); + left: 0; + @include size(right, 10px); + z-index: 400; + + @media screen and (min-width: 24em) { + right: auto; + } + + @media screen and (min-width: 53em) { + display: block !important; + position: static; + @include size(margin-left, 6px); + } + + li.menu { + background-color: #e2e2e2; + + @media screen and (min-width: 53em) { + float: left; + } + + a.menu { + display: block; + @include size(line-height, 13px); + @include size(padding, 18px 13px 15px); + @include size(border-bottom, 3px solid #e2e2e2); + color: #0c7076; + @include size(font-size, 11px); + @include mono; + } + + a.hidden-box-trigger:hover { + border-bottom-color: white; + } + } + } + + #lang-menu { + display: block; + float: right; + + @include size(padding-left, 25px); + @include size(padding-right, 20px); + background: #f7f7f7; + @include mono; + + @media screen and (min-width: 15em) { + position: relative; + } + + #lang-button { + display:block; + @include size(line-height, 17px); + @include size(padding-top, 16px); + @include size(padding-bottom, 16px); + + @include size(font-size, 10px); + color: #717171; + + .label { + display: none; + + @media screen and (min-width: 62.5em) { + display: inline; + } + + &:after { + @include size(padding-left, 10px); + content: url("/static/img/arrow-gray.png"); + vertical-align: top; + } + } + + .lang-flag { + @include size(font-size, 13px); + @include size(line-height, 15px); + } + } + + #lang-menu-items { + z-index: 9999; + + button { + @include mono; + display: none; + background: #f7f7f7; + color: #6f6f6f; + cursor: pointer; + width: 100%; + margin: 0; + @include size(padding, 10px 0); + + @media screen and (min-width: 62.5em) { + @include size(padding, 5px 0); + } + + border-width: 0; + @include size(border-bottom, 1px solid #ddd); + + @include size(font-size, 13px); + + &.active { + color: #000; + } + } + } + + &:hover, &.hover { + #lang-menu-items { + position: absolute; + padding: 0; + left: 0; + right: 0; + + @media screen and (min-width: 15em) { + left: auto; + @include size(width, 180px); + @include size(top, 49px); + } + @media screen and (min-width: 62.5em) { + width: 100%; + } + + button { + display: block; + } + } + } + } +} diff --git a/apps/wolnelektury_core/static/scss/main/search.scss b/apps/wolnelektury_core/static/scss/main/search.scss new file mode 100755 index 000000000..2dac56ab0 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/search.scss @@ -0,0 +1,84 @@ +/* jquery UI overrides us */ +.ui-menu .ui-menu-item a { + color: #0d7e85 !important; + line-height: 1.636em !important; +} + +.ui-widget { + font-family: Georgia !important; + @include size(font-size, 10px !important); +} + +.ui-widget-content { + background: #EEEEEE !important; /* #E2E2E2 ? */ + border-radius: 0px !important; +} + + + +.inline-tag-lists p span:first-child { + color: #281d1c; +} + +/* just on search page */ +.top-tag-list { + @include size(margin-top, 22px); + @include size(margin-bottom, 16px); +} + + +.search-result { + @include size(width, 975px); + + .book-box-body { + @include size(width, 310px); + } +} + + + +.book-list-header { + @include size(width, 975px); + padding: 0em; + @include size(margin-left, -1px); + + .book-box-inner { + min-height: 1em; + } + + p { + @include size(font-size, 24px); + @include size(margin, 5px); + } +} + +.snippets { + @include size(width, 440px); + float: right; + @include size(margin-top, -200px); + + .snippet-text { + @include size(font-size, 12px); + @include size(margin, 13px 0); + @include size(padding, 12px); + background: #f7f7f7; + } + + .anchor { + display: none; + } +} + + +.search-hint-label { + display: inline-block; + @include size(font-size, 11px); + @include size(width, 275px); + line-height: 1.636em; +} + +.search-hint-category { + @include size(font-size, 11px); + line-height: 1.636em; +} + diff --git a/apps/wolnelektury_core/static/scss/main/tag.scss b/apps/wolnelektury_core/static/scss/main/tag.scss new file mode 100755 index 000000000..844d3dac9 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/tag.scss @@ -0,0 +1,102 @@ +.page-desc { + @include size(margin-left, 15px); +} + +#tagged-object-list { + @media screen and (min-width: 62.5em) { + .left-column, .right-column { + @include size(width, 480px); + } + } + + .see-also, .download { + float: left; + @include size(margin-top, 20px); + @include size(margin-bottom, 20px); + + h2 { + @include mono; + @include size(font-size, 11px); + margin: 0; + } + + ul { + @include size(font-size, 11px); + list-style: none; + padding: 0; + margin: 0; + } + } + + .see-also { + @include size(margin-left, 80px); + @include size(width, 143px); + } + .download { + @include size(margin-left, 20px); + } + + .left-column .see-also { + margin-left: 0; + } +} + +#description { + @include size(margin-bottom, 26px); + cursor: pointer; + + dl { + margin-top: 0; + } + dt { + display: inline; + font-weight: bold; + margin: 0; + } + dd { + display: inline; + margin: 0; + } + p { + margin-top: 0; + } + #description .meta { + list-style: none; + padding: 0; + margin: 0; + } + #description .meta li { + text-align: right; + color: #666; + @include size(font-size, 11.7px); + } +} + +.inline-tag-lists { + @include size(font-size, 11px); + + .inline-header { + @include mono; + display: inline-block; + vertical-align: top; + @include size(width, 77px); + } + + .inline-body { + display: inline-block; + vertical-align: top; + @include size(margin-bottom, 5.5px); + @include size(width, 385px); + + ul { + list-style: none; + padding: 0; + margin: 0; + + li { + display: inline-block; + @include size(margin-right, 11px); + } + } + } +} diff --git a/apps/wolnelektury_core/static/scss/polls/polls.scss b/apps/wolnelektury_core/static/scss/polls/polls.scss new file mode 100644 index 000000000..28cd5a5cf --- /dev/null +++ b/apps/wolnelektury_core/static/scss/polls/polls.scss @@ -0,0 +1,21 @@ +.poll { + width: 400px; + ul { + list-style-type: none; + } +} + +.poll-bar { + border: solid 1px #ddd; + height:6px; + margin-bottom: 10px; +} + +.poll-bar-inner { + background: orange; + height: 6px; +} + +.poll-msg { + font-weight: bold; +} \ No newline at end of file diff --git a/apps/wolnelektury_core/static/scss/tools.scss b/apps/wolnelektury_core/static/scss/tools.scss new file mode 100644 index 000000000..76869c40d --- /dev/null +++ b/apps/wolnelektury_core/static/scss/tools.scss @@ -0,0 +1,70 @@ +$default-em-size: 16px; + +@mixin size($name, $args) { + $rems: snowflake; + @each $val in $args { + $remval: $val; + @if type-of($val) == number { + @if unit($val) == "px" { + $remval: $val / $default-em-size * 1rem; + } + } + // Workaround for PySCSS issue with appending to empty lists. + @if $rems == snowflake { + $rems: $remval; + } + @else { + $rems: append($rems, $remval); + } + } + #{$name}: $args; + #{$name}: $rems; +} + +@mixin min-screen($size) { + @if unit($size) == "px" { + $size: $size / $default-em-size * 1em; + } + + @media screen and (min-width: $size) { + @content; + } +} + + +@mixin vendors($name, $args) { + @include size(-moz + $name, $args); + @include size(-webkit + $name, $args); + @include size(-moz + $name, $args); +} + +@mixin vendors($names, $args) { + @each $name in $names { + @include size($name, $args); + } +} + +@mixin box-shadow($args) { + @include vendors( + -moz-box-shadow + -webkit-box-shadow + box-shadow, + $args); +} + +@mixin mono { + font-family: "Andale Mono", "Lucida Sans Typewriter", "Courier New"; +} + +@mixin hidden-label { + display: block; + @include size(width, 1px); + @include size(height, 1px); + overflow: hidden; +} + +@mixin white-box { + @include size(border, 1px solid #ddd); + background: #fff; + @include box-shadow(2px 2px 2px #ddd); +} diff --git a/wolnelektury/settings/static.py b/wolnelektury/settings/static.py index e7cceed20..9cdc60b2d 100644 --- a/wolnelektury/settings/static.py +++ b/wolnelektury/settings/static.py @@ -22,18 +22,15 @@ PIPELINE_CSS = { 'source_filenames': [ 'css/jquery.countdown.css', - 'css/main/*.scss', - 'sponsors/css/sponsors.css', - 'funding/funding.scss', - 'polls/polls.scss', - 'css/social/shelf_tags.css', 'uni_form/uni-form.css', 'uni_form/default.uni-form.css', 'css/ui-lightness/jquery-ui-1.8.16.custom.css', + + 'scss/all.scss', ], 'output_filename': 'css/compressed/main.css', },