Changeset 2670:27aac7dcd0e6 for themes/berlin/scss

Timestamp:

02/23/14 10:17:41 (12 years ago)

Author:

Anne Kozlika <kozlika@…>

Branch:

default

Message:

Berlin: footer's widgets presentation. Closes #1928 (needs to be tests with lot of use cases, please)

Location:

themes/berlin/scss

Files:

• init/_mixins-functions.scss (modified) (1 diff)
• modules/_off-canvas.scss (modified) (2 diffs)
• partials/_footer.scss (modified) (1 diff)
• partials/_sidebar.scss (modified) (5 diffs)

themes/berlin/scss/init/_mixins-functions.scss

@@ -16 +16 @@
     background-image: url($css-img-path+'/'+$file-name+'.svg'), none;
 }
+
+@mixin visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}

themes/berlin/scss/modules/_off-canvas.scss

@@ -11 +11 @@
 }
 // Sexy glissando
-#sidebar, #main {
+.sidebar, #main {
     @include transition(.3s all linear);
 }
@@ -64 +64 @@
         margin-left: -1*(zen-grid-item-width(8));
     }
-    .off-canvas #sidebar {
+    .off-canvas .sidebar {
         position: relative;
         @include zen-grid-item (11, 1, right);

themes/berlin/scss/partials/_footer.scss

@@ +1 @@
+.footer__widgets {
+    padding: 1em;
+    background-color: $white;
+    text-align: center;
+    line-height: 2;
+}
+.blogcustom__title {
+    @include visually-hidden;
+}
+.footer__widgets .widget {
+    margin-top: 1em;
+}
+.footer__widgets h3 {
+    margin-bottom: 0;
+    font-size: 1em;
+    font-weight: bold;
+}
+.footer__widgets ul {
+    @include inline-block-list(.5em);
+}

themes/berlin/scss/partials/_sidebar.scss

@@ -1 @@
-#sidebar {
+.sidebar {
     @include pie-clearfix;
     padding-top: 2em;
@@ -14 +14 @@
     }
 }
-#sidebar h2, #sidebar h3 {
+.blognav__title,
+.blogextra__title {
+    @include visually-hidden;
+}
+
+.blognav__widgets h3,
+.blognav__widgets h4,
+.blogextra__widgets h3,
+.blogextra__widgets h4 {
     font-size: 1em;
     color: $white;
     font-weight: bold;
 }
-#sidebar h2 {
+.blognav__widgets h3,
+.blogextra__widgets h3 {
     text-transform: uppercase;
 }
-#sidebar h3 {
+.blognav__widgets h4,
+.blogextra__widgets h4 {
     margin-top: 1.5em;
     margin-bottom: 0;
 }
-#blognav > div, #blogextra > div {
+.blognav__widgets .widget, .blogextra__widgets .widget {
     padding: 1em;
     font-size: .875em;
     line-height: 1.71429;
-}
-#blognav div, #blogextra div {
     > ul {
         @include no-bullets;
@@ -38 +46 @@
     }
 }
-#blognav, #blogextra {
+.blognav__widgets, .blogextra__widgets {
     ul {
         margin: 0;
@@ -67 +75 @@
     background-color: $gray-very-dark;
 }
-#sidebar li:hover ul {
+.sidebar li:hover ul {
     background-color: $gray-very-dark;
 }
 @media screen and(min-width: ($small-screen + .1em)) and (max-width: $large-screen) {
-    #blognav div, #blogextra div {
+    .blognav__widgets .widget, .blogextra__widgets .widget {
         width: 50%;
         float: left;
@@ -77 +85 @@
 }
 @media screen and(min-width: ($large-screen + .1em)) and(max-width: $xlarge-screen) {
-    #blognav > div, #blogextra > div {
+    .blognav__widgets .widget, .blogextra__widgets .widget {
         width: 33.33%;
         float: left;