update pdf & slides

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

diff --git a/content/media/css/base.scss b/content/media/css/base.scss
index ad5cc0e..4d30ad2 100644 (file)
--- a/content/media/css/base.scss
+++ b/content/media/css/base.scss
@@ -5,39 +5,76 @@ html {
     margin: 0;
     padding: 0;
 }
     margin: 0;
     padding: 0;
 }

+

 body {
     margin: 0;
     padding: 0;
     font-family: Dosis;
 body {
     margin: 0;
     padding: 0;
     font-family: Dosis;

+

     color: #363a3b;
     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;
 }
 
 a {
     text-decoration: none;

-    color: #ea5b0b;
+    color: black;

     &:hover {
         text-decoration: underline;
     }
 }
 
     &: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 {
 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;
 
     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;
 }
 
     text-align: right;
 }
 

-section.intro, section.outro {
+section.home-section {

     font-size: 1.3rem;
     font-size: 1.3rem;

-    background: #edede6;
+
+    h2 {
+        padding: 1rem;
+        margin: 0;
+    }

 
     a {
         display: block;
 
     a {
         display: block;

-        padding: .7em 20%;
-        color: black;
+

         &:hover {
         &:hover {

-            background: white;
+            background: #f4f4f4;

             text-decoration: none;
         }
             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 {
 }
 
 
 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;
     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
     }
 }
\ No newline at end of file