X-Git-Url: https://git.mdrn.pl/static.git/blobdiff_plain/4678df00afdffa0ff438fb4dc9885e1d267c88eb..c0aeb248a7a3313b0b0941cf3c922b49c2fc57a6:/content/media/css/base.scss?ds=inline

diff --git a/content/media/css/base.scss b/content/media/css/base.scss
index ad5cc0e..4d30ad2 100644
--- a/content/media/css/base.scss
+++ b/content/media/css/base.scss
@@ -5,39 +5,76 @@ html {
     margin: 0;
     padding: 0;
 }
+
 body {
     margin: 0;
     padding: 0;
     font-family: Dosis;
+
     color: #363a3b;
-    background-color: white;
+    background-color: #e8e8e8;
+    background-repeat:no-repeat;
+    background-position: 100% 120px;
+}
+
+#body {
+    max-width: 48em;
+    margin: 0 auto;
+    spadding: 0 .5rem;
 }
 
 a {
     text-decoration: none;
-    color: #ea5b0b;
+    color: black;
     &:hover {
         text-decoration: underline;
     }
 }
 
+#home-link {
+    padding: .5em;
+    display: block;
+    float:left;
+
+    &:hover {
+        text-decoration: none;
+        background: rgba(255,255,255,.9);
+    }
+}
+
+#top-logo {
+    float: right;
+    margin: 0 1rem 0 1rem;
+}
+
 header {
-    padding: 2rem 20%;
-    text-align: right;
+    background-image: url("{{ media_url('images/okladka.jpg') }}");
+    background-position: 50% 76%;
+    background-size: auto 100%;
+
+    @media screen and (min-width: 20em) {
+        padding-top: 8rem;
+    }
+
+    @media screen and (min-width: 24em) {
+        background-size: 100% auto;
+    }
 
     h1 {
         margin: 0;
-        padding: 0;
-        padding-left: 84px;
-        .author {
-            font-size: 1rem;
-            font-weight: normal;
+        padding: 2em .5em 1em;
+        background: rgba(255,255,255,.7);
+        clear: both;
+
+        @media screen and (min-width: 20em) {
+            padding: 1em;
+            float: right;
+            text-align: right;
         }
     }
-    img {
-        float: left;
-        width: 74px;
-        height: 74px;
+
+    nav {
+        margin-top: 0;
     }
 }
 
@@ -46,117 +83,201 @@ section#lead {
     text-align: right;
 }
 
-section.intro, section.outro {
+section.home-section {
     font-size: 1.3rem;
-    background: #edede6;
+
+    h2 {
+        padding: 1rem;
+        margin: 0;
+    }
 
     a {
         display: block;
-        padding: .7em 20%;
-        color: black;
+
         &:hover {
-            background: white;
+            background: #f4f4f4;
             text-decoration: none;
         }
-        .author {
-            display: block;
-            font-size: 1rem;
-        }
     }
-}
 
-section.main {
-    padding: 0 20%;
+    .link-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
 
-    div.roza {
-        position: relative;
-        
-        a {
-            position: absolute;
-            &#roza-1 {
-                top: 0;
-                left: 33%;
-                right: 33%;
-                bottom: 55%;
-                &:hover {
-                    background: url({{ media_url('images/roza-select-1.png') }});
-                    background-size: 294%;
-                    background-position: 50% 0;
-                }
-            }
-            &#roza-2 {
-                top: 33%;
-                left: 55%;
-                right: 0;
-                bottom: 33%;
-                &:hover {
-                    background: url({{ media_url('images/roza-select-2.png') }});
-                    background-size: 222%;
-                    background-position: 100% 50%;
-                }
-            }
-            &#roza-3 {
-                top: 55%;
-                left: 33%;
-                right: 33%;
-                bottom: 0;
-
-                &:hover {
-                    background: url({{ media_url('images/roza-select-3.png') }});
-                    background-size: 294%;
-                    background-position: 50% 100%;
-                }
-            }
-            &#roza-4 {
-                top: 33%;
-                left: 0;
-                right: 55%;
-                bottom: 33%;
-
-                &:hover {
-                    background: url({{ media_url('images/roza-select-4.png') }});
-                    background-size: 222%;
-                    background-position: 0 50%;
+        li {
+            margin: 0;
+            padding: 0;
+
+            a {
+                padding: .25em .5em .25em .5em;
+                position:relative;
+                font-size: 1.2rem;
+
+                @media screen and (min-width: 20em) {
+                    padding-left: 2.7rem;
+                    font-size: 1.3rem;
+
+                    &:before {
+                        content: '\bb';
+                        position: absolute;
+                        left: 1rem;
+                    }
                 }
             }
         }
     }
 }
+#tools {
+    background: #eee;
+    padding-bottom: 1em;
 
-a.download {
-    padding: 0 20%;
+    @media screen and (min-width: 36em) {
+        float: right;
+        z-index: 1000;
+        margin: 0 0 1em 1em;
+        width: 14em;
+        position: relative;
+        border-color: #ddd;
+        border-style: solid;
+        border-width: 0 0 1px 1px;
+    }
 }
 
 
 footer {
-    border-top: 1px solid #edede6;
-    padding: 1em 20%;
-    margin-top: 3em;
+    border-top: 1px solid #fff;
+    padding: 1rem 0;
+    margin-top: 0;
+    font-size: .75rem;
+
+    .footer-item {
+        padding: .5rem;
+
+        @media screen and (min-width: 24em) {
+            display: inline-block;
+            vertical-align: top;
+            width: 15rem;
+        }
+    }
 }
 
-.ocena img {
-    vertical-align: middle;
+nav {
+    clear: both;
+    margin-top: 3em;
+
+    a:hover {
+        text-decoration: none;
+        background: rgba(255,255,255,.9);
+    }
+
+    .link-prev {
+        float: left;
+        padding: 1em;
+        &:before {
+            content: '\25c4';
+            margin-right: .4em;
+        }
+    }
+    .link-next {
+        float: right;
+        text-align:right;
+        padding: 1em;
+        &:after {
+            content: '\25ba';
+            margin-left: .4em;
+        }
+    }
 }
 
-blockquote {
+
+#logos {
     margin: 0;
-    padding: 0;
-    font-style: italic;
+    padding: .5rem 0 .5rem;
+    text-align: left;
+    section {
+        display: inline-block;
+        h1 {
+            text-align: left;
+            font-size: .8rem;
+            font-weight: normal;
+            margin: 0 0 .5rem 1rem;
+
+            @media screen and (min-width: 42em) {
+                margin-left: 2rem;
+            }
+            @media screen and (min-width: 48em) {
+                margin-left: 3rem;
+            }
+        }
+        a {
+            display: inline-block;
+            margin-left: 1rem;
+            margin-bottom: .5rem;
+
+            @media screen and (min-width: 42em) {
+                margin-left: 2rem;
+            }
+            @media screen and (min-width: 48em) {
+                margin-left: 3rem;
+            }
+        }
+        img {
+            width: 6rem;
+            vertical-align: middle;
+        }
+    }
 }
 
-.twocol {
-    -moz-column-count: 2;
-    -webkit-column-count: 2;
-    -o-column-count: 2;
-    -ms-column-count: 2;
-    column-count: 2;
-    -moz-column-break-inside: avoid;
-    -webkit-column-break-inside: avoid;
-    -o-column-break-inside: avoid;
-    -ms-column-break-inside: avoid;
-    column-break-inside: avoid;
-
-    p {
-        margin: 0 0 1em;
+#toc {
+    margin-bottom: 3rem;
+}
+
+body#index {
+    #body {
+        @media screen and (min-width: 36em) {
+            display: -webkit-box;
+            display: -moz-box;
+            display: -ms-flexbox;
+            display: -webkit-flex;
+            display: flex;
+
+            -webkit-box-orient: vertical;
+            -moz-box-orient: vertical;
+            -webkit-box-direction: normal;
+            -moz-box-direction: normal;
+            -webkit-flex-direction: column;
+            -ms-flex-direction: column;
+            flex-direction: column;
+
+            #logos {
+                -webkit-box-ordinal-group: 1;
+                -moz-box-ordinal-group: 1;
+                -ms-flex-order: 1;
+                -webkit-order: 1;
+                order: 1;
+            }
+            header {
+                -webkit-box-ordinal-group: 2;
+                -moz-box-ordinal-group: 2;
+                -ms-flex-order: 2;
+                -webkit-order: 2;
+                order: 2;
+            }
+            #toc {
+                -webkit-box-ordinal-group: 3;
+                -moz-box-ordinal-group: 3;
+                -ms-flex-order: 3;
+                -webkit-order: 3;
+                order: 3;
+            }
+            footer {
+                -webkit-box-ordinal-group: 100;
+                -moz-box-ordinal-group: 100;
+                -ms-flex-order: 100;
+                -webkit-order: 100;
+                order: 100;
+            }
+        }
     }
 }
\ No newline at end of file