Initial version.

[static.git] / content / media / css / base.scss

diff --git a/content/media/css/base.scss b/content/media/css/base.scss
index ad5cc0e..c2b0f06 100644 (file)
--- a/content/media/css/base.scss
+++ b/content/media/css/base.scss
@@ -5,39 +5,81 @@ 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;
+        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;
+        }
+
         .author {
             font-size: 1rem;
             font-weight: normal;
         }
     }
-    img {
-        float: left;
-        width: 74px;
-        height: 74px;
+
+    nav {
+        margin-top: 0;
     }
 }
 
@@ -46,16 +88,34 @@ 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%;
+        padding: .25em .5em .25em .5em;
         color: black;
+        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;
+            }
+        }
+
         &:hover {
-            background: white;
+            background: #f4f4f4;
             text-decoration: none;
         }
         .author {
@@ -64,99 +124,114 @@ section.intro, section.outro {
         }
     }
 }
-
-section.main {
-    padding: 0 20%;
-
-    div.roza {
+#tools {
+    background: #eee;
+    padding-bottom: 1em;
+
+    @media screen and (min-width: 36em) {
+        float: right;
+        z-index: 1000;
+        margin: 0 0 1em 1em;
+        width: 14em;
         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%;
-                }
-            }
-        }
+        border-color: #ddd;
+        border-style: solid;
+        border-width: 0 0 1px 1px;
     }
 }
 
-a.download {
-    padding: 0 20%;
-}
-
 
 footer {
-    border-top: 1px solid #edede6;
-    padding: 1em 20%;
+    border-top: 1px solid #fff;
+    padding: 1em 0;
     margin-top: 3em;
 }
 
-.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: 1.5rem 0 1rem;
+    section {
+        display: inline-block;
+        h1 {
+            font-size: .8rem;
+            font-weight: normal;
+            margin: 0 0 .7rem 1.25rem;
+        }
+        a {
+            display: inline-block;
+            margin-left: 1.23rem;
+            margin-bottom: 1rem;
+        }
+        img {
+            width: 8.125rem;
+            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;
+
+body#index {
+    #body {
+        display: -webkit-box;
+        display: -moz-box;
+        display: box;
+        -webkit-box-orient: vertical;
+        -moz-box-orient: vertical;
+        box-orient: vertical;
+
+        @media screen and (min-width: 36em) {
+            display: block;
+        }
+
+
+        header {
+            -webkit-box-ordinal-group: 1;
+            -moz-box-ordinal-group: 1;
+            box-ordinal-group: 1;
+        }
+        #logos {
+            -webkit-box-ordinal-group: 4;
+            -moz-box-ordinal-group: 4;
+            box-ordinal-group: 4;
+        }
+        .home-section {
+            -webkit-box-ordinal-group: 3;
+            -moz-box-ordinal-group: 3;
+            box-ordinal-group: 3;
+        }
+        footer {
+            -webkit-box-ordinal-group: 100;
+            -moz-box-ordinal-group: 100;
+            box-ordinal-group: 100;
+        }
     }
 }
\ No newline at end of file