Almost-ready.

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

diff --git a/content/media/css/base.scss b/content/media/css/base.scss
index ad5cc0e..47063b2 100644 (file)
--- a/content/media/css/base.scss
+++ b/content/media/css/base.scss
@@ -22,38 +22,57 @@ a {
 }
 
 header {
-    padding: 2rem 20%;
-    text-align: right;
+    padding: 2rem 0;
+    max-width: 48rem;
+    margin: 0 .5rem;
+    @media screen and (min-width: 49em) {
+        margin: 0 auto;
+    }
+
 
     h1 {
+        padding: 1em 0 0 0;
         margin: 0;
-        padding: 0;
-        padding-left: 84px;
+
+        @media screen and (min-width: 30em) {
+            text-align: right;
+            padding: 0;
+        }
         .author {
             font-size: 1rem;
             font-weight: normal;
         }
     }
     img {
-        float: left;
-        width: 74px;
-        height: 74px;
+        margin: auto;
+        @media screen and (min-width: 30em) {
+            float: left;
+        }
     }
 }
 
 section#lead {
     margin-left: 40%;
+    margin-top: 3rem;
     text-align: right;
 }
 
 section.intro, section.outro {
     font-size: 1.3rem;
     background: #edede6;
+    margin-top: 1em;
 
     a {
         display: block;
-        padding: .7em 20%;
+        padding: .7em 0;
         color: black;
+        div {
+            max-width: 48rem;
+            margin: 0 .5rem;
+            @media screen and (min-width: 49em) {
+                margin: 0 auto;
+            }
+        }
         &:hover {
             background: white;
             text-decoration: none;
@@ -66,13 +85,19 @@ section.intro, section.outro {
 }
 
 section.main {
-    padding: 0 20%;
+    padding: 0 0;
+    max-width: 48rem;
+    margin: 0 .5rem;
+    @media screen and (min-width: 49em) {
+        margin: 0 auto;
+    }
 
     div.roza {
         position: relative;
         
         a {
             position: absolute;
+            color: black;
             &#roza-1 {
                 top: 0;
                 left: 33%;
@@ -124,18 +149,29 @@ section.main {
 }
 
 a.download {
-    padding: 0 20%;
+    padding: 0 0;
 }
 
 
 footer {
     border-top: 1px solid #edede6;
-    padding: 1em 20%;
-    margin-top: 3em;
+    padding: 1rem 0;
+    font-size: .75rem;
+    max-width: 48rem;
+    margin: 3rem auto 0;
+
+    .footer-item {
+        padding: .5rem;
+
+        @media screen and (min-width: 24em) {
+            display: inline-block;
+            vertical-align: top;
+            width: 15rem;
+        }
+    }
 }
 
-.ocena img {
-    vertical-align: middle;
+
 }
 
 blockquote {
@@ -150,13 +186,79 @@ blockquote {
     -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;
+        -webkit-column-break-inside: avoid;
+        -o-column-break-inside: avoid;
+        -ms-column-break-inside: avoid;
+        column-break-inside: avoid;
+        break-inside: avoid-column;
+        page-break-inside:avoid;
     }
+}
+
+.pozycja {
+    .ocena {
+        display: inline-block;
+        width: 8em;
+        img {
+            vertical-align: middle;
+        }
+    }
+    .label {
+        display: inline-block;
+    }
+}
+.przypisy {
+    font-size: .9em;
+}
+
+#b-author, #b-user, #b-inter {
+    display: inline-block;
+    width: 10em;
+    padding: 1em 2em;
+    margin: .5em;
+    cursor: pointer;
+    background: #edede6;
+    border: .5em solid #edede6;
+    border-radius: 1em;
+    text-align: center;
+    color: black;
+    span {
+        display: block;
+        font-size: 2em;
+        font-size
+    }
+    &.active {
+        border-color: #ea5b0b;
+    }
+    &:hover {
+        text-decoration: none;
+        background: white;
+    }
+}
+.p-author, .p-user, .p-inter {
+    display: none;
+    position: absolute;
+    margin: auto;
+    img {
+        width: 1em;
+        @media screen and (min-width: 24em) {
+            width: 2em;
+        }
+    }
+}
+#roza-1 .p-author, #roza-1 .p-user, #roza-1 .p-inter {
+    top: 40%;
+    left: 30%;
+}#roza-2 .p-author, #roza-2 .p-user, #roza-2 .p-inter {
+    top: 40%;
+    left: 40%;
+}#roza-3 .p-author, #roza-3 .p-user, #roza-3 .p-inter {
+    bottom: 40%;
+    left: 30%;
+}#roza-4 .p-author, #roza-4 .p-user, #roza-4 .p-inter {
+    top: 40%;
+    left: 30%;
 }
\ No newline at end of file