css for smaller screens
authorRadek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>
Tue, 6 Mar 2012 15:47:48 +0000 (16:47 +0100)
committerRadek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>
Tue, 6 Mar 2012 15:47:48 +0000 (16:47 +0100)
13 files changed:
wolnelektury/settings.py
wolnelektury/static/css/base.css
wolnelektury/static/css/book_box.css
wolnelektury/static/css/catalogue.css
wolnelektury/static/css/cite.css
wolnelektury/static/css/header.css
wolnelektury/static/css/logo.css
wolnelektury/static/css/main_page.css
wolnelektury/static/css/screen.css [new file with mode: 0644]
wolnelektury/templates/base.html
wolnelektury/templates/catalogue/book_short.html
wolnelektury/templates/lesmianator/poem.html
wolnelektury/templates/main_page.html

index a1ad878..8ee4e43 100644 (file)
@@ -207,6 +207,13 @@ COMPRESS_CSS = {
         ],
         'output_filename': 'css/all.min?.css',
     },
+    'screen': {
+        'source_filenames': ['css/screen.css'],
+        'output_filename': ['css/screen.min?.css'],
+        'extra_context': {
+            'media': 'screen and (min-width: 800px)',
+        },
+    },
     'ie': {
         'source_filenames': [
             'css/ie.css',
index 70aa172..3160611 100755 (executable)
@@ -64,14 +64,6 @@ ul.plain {
     padding: 0;
 }
 
-.left-column {
-    width: 47em;
-    float: left;
-}
-.right-column {
-    float:right;
-    width: 47em;
-}
 .normal-text {
     font-size: 1.3em;
     line-height: 1.3em;
@@ -125,13 +117,6 @@ h2 {
     box-shadow: 2px 2px 2px #ddd;
 }
 
-
-#header-content, div#main-content, div#half-header-content, #footer-content {
-    width: 97.5em;
-    margin: auto;
-}
-
-
 .page-desc {
     margin-left: 1.5em;
 }
@@ -175,7 +160,6 @@ h2 {
     column-width: 12em;
     -moz-column-width: 12em;
     -webkit-column-width: 12em;
-    width: 48em;
 }
 .hidden-box li {
        margin-bottom: .5em;
index 876bf06..6b28068 100755 (executable)
@@ -17,8 +17,6 @@
 }
 
 .book-wide-box {
-    width: 97.5em;
-
     /** This is a fullpage box, it must be aligned with the top menu. 
         This corresponds to a .1em margin below **/
     margin-left: -0.1em;
    min-height: 24.4em;
 }
 
-.search-result {
-    width: 97.5em;
-}
-
 .search-result .book-box-body {
     width: 31em;
 }
 
 .book-list-header {
-    width: 97.5em;
     padding: 0em;
     margin-left: -0.1em;
 }
     font-size: 1.1em;
 }
 
+.book-wide-box {
+       min-width: 48.75em;
+}
 .book-wide-box .book-box-tools {
     margin-left: 14em;
     width: 32em;
 
 .book-wide-box #theme-list-wrapper {
     margin-left: 15.4em;
+       margin-bottom: 3em;
        width: 30em;
 }
 
@@ -260,11 +257,6 @@ ul.book-box-tools {
     width: 7em;
 }
 
-.book-wide-box .right-column {
-    float: right;
-    width: 41.5em;
-}
-
 ul.inline-items, ul.inline-items li {
     margin: 0;
     padding: 0;
@@ -329,11 +321,6 @@ ul.inline-items li {
     display: none;
 }
 
-.snippets {
-    width: 44em;
-    float: right;
-}
-
 .snippets .snippet-text {
     background: #f7f7f7;
     font-size: 1.2em;
index 74338f8..0e952ba 100755 (executable)
 }
 
 
-#tagged-object-list .left-column, #tagged-object-list .right-column {
-    width: 48em;
-}
-
-
 /* listing of all books */
 #book-list {
    padding-left: 50px;
 }
+/* FIXME: MEDIA?
+ * 
 #book-list-nav {
     position: absolute;
     right: 50px;
@@ -31,6 +28,7 @@
     padding: 10px;
     font-size: 1.2em;
 }
+ */
 
 #book-list-nav ul {
     list-style-type: none;
        width: 7em;
 }
 .inline-body {
-       width: 35em;
        display: inline-block;
        vertical-align: top;
        margin-bottom: .5em;
index 91c6851..69c28a7 100755 (executable)
 
 
 #big-cite {
-    background-color: #bd9a89; /* average image color */
-    color: white;
+    background-color: white; /* #bd9a89; /* average image color */
+    color: black;
     padding: 0;
     margin: 0;
     background-image: url(/static/img/backdrop/horiavarlan-4268896468.jpg);
     background-size: 100%;
     background-position: 50% 70%;
+    background-repeat: no-repeat;
 }
 
 #big-cite .cite {
@@ -49,7 +50,7 @@
 
 
 #big-cite .cite-body {
-    margin: .05em .05em .05em 17.5em;
+    margin: .05em .05em .05em 1em;
 }
 #big-cite .cite-body span {
     font-size: 3em;
@@ -57,9 +58,7 @@
 }
 
 #big-cite .vip {
-       float:left;
-       text-align:right;
-       width: 14.7em;
+       margin-left: 1em;
        margin-top: .25em;
 }
 
@@ -86,7 +85,7 @@
 
 
 #big-cite .source {
-    margin: 1.6em 0.2em 1.6em 17.5em;
+    margin: 1.6em 0.2em 1.6em 1em;
 }
 #big-cite .source span {
     font-size: 1.2em;
index ef47897..0cde9e0 100755 (executable)
@@ -7,7 +7,6 @@
 }
 
 #header {
-    height: 3em;
     padding-top: 1.9em;
     padding-bottom: 0;
     color: #989898;
 }
 
 
-#user-info {
-    float: right;
-    margin: 0;
-}
-
-#logo {
-    position: absolute;
-    top: -1.6em;
-    margin-left: 1.5em;
-}
-
 #logo a {
     color:#f7f7f7;
     font-size: 2.05em;
 }
 
 #tagline {
-    display: inline-block;
-    margin-left: 25.5em;
+       margin-left: 1.5em;
 }
+
 #tagline span {
     font-size: 1.3em;
     color: #bbb;
 }
 
+#user-info {
+    margin: 0;
+    padding: 1em 0;
+    margin-left: 1.5em;
+}
+
 #search-area {
     margin: 0;
     background: #444;
     color: white;
-    margin-left: 24em;
-    width: 73.5em;
 }
 
 #search-field {
     display: inline-block;
-    width: 63.1em;
     padding-left: .5em;
-    padding-right: 0;
+    padding-right: .5em;
     padding-top: 0.5em;
     padding-bottom: 0;
 }
@@ -84,7 +75,6 @@
     -moz-box-shadow:0 0 .5em #444 inset;
     box-shadow: 0 0 .5em #444 inset;*/
     height: 2.54em;
-    width: 47.47em;
     padding-left: 1em;
     -webkit-border-radius: .38em;
     -moz-border-radius: .38em;
     padding: 0;
     margin: 0;
     width: 9.4em;
-    float: right;
 }
 #search-button button {
     font-size: 1em;
index c7e7882..611b4ba 100644 (file)
@@ -9,7 +9,9 @@
   src: url(/static/fonts/WL.ttf) format("truetype");
 }
 
+#logo {
+       margin-left: 1.5em;
+}
 #logo a {
     font-family: WL-Logo;
-    line-height: 7em;
 }
index bc8e68f..b564e82 100755 (executable)
@@ -1,8 +1,6 @@
 
 #promo-box {
-    float: right;
     width: 32em;
-    margin-top: -5.1em;
 }
 #promo-box-header {
     padding-top: 2em;
@@ -19,7 +17,6 @@
 #promo-box-body {
     border-bottom: 2px solid #efefef;
     padding: 2em 2.8em;
-    height: 30em;
     background: #efefef;
 }
 #promo-box-title {
@@ -89,7 +86,7 @@
 }
 
 .infopages-box .social-links a {
-    font-family: WL-Nav;
+    font-family: WL-Nav, courier;
     font-size: 3em;
     color: #281d1c;
     margin-right: .2em;
diff --git a/wolnelektury/static/css/screen.css b/wolnelektury/static/css/screen.css
new file mode 100644 (file)
index 0000000..3a344dc
--- /dev/null
@@ -0,0 +1,132 @@
+.left-column {
+    width: 47em;
+    float: left;
+}
+.right-column {
+    float:right;
+    width: 47em;
+}
+
+.hidden-box ul {
+       width: 48em;
+}
+
+#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 {
+    width: 97.5em;
+}
+.book-wide-box .book-box-body {
+       width: 38.2em;
+}
+
+
+#tagged-object-list .left-column, #tagged-object-list .right-column {
+    width: 48em;
+}
+
+
+
+
+.inline-body {
+       width: 35em;
+}
+
+
+.search-result {
+    width: 97.5em;
+}
+
+
+.book-list-header {
+    width: 97.5em;
+}
+
+.book-wide-box .right-column {
+    width: 41.5em;
+    margin-top: -23em;
+}
+
+.book-wide-box #theme-list-wrapper {
+       margin-bottom: 0;
+}
+
+.snippets {
+    width: 44em;
+    float: right;
+    margin-top: -20em;
+}
+
+/* LOGO */
+
+#logo a {
+       line-height: 7em;
+}
+
+
+/* HEADER */
+
+#header {
+    height: 3em;
+}
+
+#logo {
+    position: absolute;
+    top: -1.6em;
+}
+
+#user-info {
+    float: right;
+    padding: 0 !important;
+    margin-left: 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 !important;
+}
+
+#search {
+    width: 47.47em;
+}
+
+#search-button {
+       float: right;
+}
index 554e6d3..e3faca1 100644 (file)
@@ -11,6 +11,7 @@
         <link rel="icon" href="{{ STATIC_URL }}img/favicon.png" type="image/png" />
         <link rel="search" type="application/opensearchdescription+xml" title="Wolne Lektury" href="{{ STATIC_URL }}opensearch.xml" />
         {% compressed_css "all" %}
+        {% compressed_css "screen" %}
         <!--[if IE]>
                {% compressed_css "ie" %}
         <![endif]-->
index 77e775e..3541d0f 100644 (file)
@@ -16,8 +16,6 @@
             " alt="Cover" />
         {% endif %}
     </a>
-    {% block right-column %}
-    {% endblock %}
     <div class="book-box-body">
 
 
     {% block book-box-extra-info %}{% endblock %}
     {% block box-append %}
     {% endblock %}
+    {% block right-column %}
+    {% endblock %}
     <div class="clearboth"></div>
 </div>
 </div>
index 78c5d5f..5d44a26 100644 (file)
@@ -20,9 +20,7 @@
             <span style='float: right'>Wolne Lektury przepuszczone przez mikser.</a>
         </div>
         <div id="header">
-            <div id="logo">
-                <a href="/">Wolne Lektury</a>
-            </div>
+            <a href="/"><img src="{{ STATIC_URL }}img/logo-220.png" alt="Wolne Lektury" /></a>
         </div>
         <div id="book-text">
             <h1>
index 77dff58..9e8f922 100755 (executable)
@@ -57,9 +57,9 @@
 
         <div class="social-links">
             <a href="http://pl-pl.facebook.com/pages/Wolne-Lektury/203084073268"
-                title='Wolne Lektury @ Facebook'>[f]</a>
+                title='Wolne Lektury @ Facebook'>f</a>
             <a href="http://nk.pl/profile/30441509"
-                title='Wolne Lektury @ NK'>[nk]</a>
+                title='Wolne Lektury @ NK'>nk</a>
         </div>
     </div>