Changeset 2670:27aac7dcd0e6

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)

Files:

• inc/public/default-templates/currywurst/_footer.html (modified) (1 diff)
• inc/public/default-templates/currywurst/_sidebar.html (modified) (1 diff)
• themes/berlin/scss/init/_mixins-functions.scss (modified) (1 diff)
• themes/berlin/scss/modules/_off-canvas.scss (modified) (2 diffs)
• themes/berlin/scss/partials/_footer.scss (modified) (1 diff)
• themes/berlin/scss/partials/_sidebar.scss (modified) (5 diffs)
• themes/berlin/style.css (modified) (5 diffs)

inc/public/default-templates/currywurst/_footer.html

@@ -1 +1 @@
 <p id="gotop"><a href="#top">Haut de page</a></p>
 
-<div id="footer" role="contentinfo">
-     <div id="blogcustom">
+<div class="footer" id="footer" role="contentinfo">
+     <div class="widgets footer__widgets" id="blogcustom">
+        <h2 class="blogcustom__title">{{tpl:lang Blog info}}</h2>
           {{tpl:Widgets type="custom"}}
      </div> <!-- End #custom widgets -->

inc/public/default-templates/currywurst/_sidebar.html

@@ -1 @@
-<div id="sidebar" role="complementary">
-     <div id="blognav">
+<div class="sidebar" id="sidebar" role="complementary">
+     <div class="widgets blognav__widgets" id="blognav">
+        <h2 class="blognav__title">{{tpl:lang Blog menu}}</h2>
           {{tpl:Widgets type="nav"}}
      </div> <!-- End #blognav -->
-     <div id="blogextra">
+     <div class="widgets blogextra__widgets" id="blogextra">
+        <h2 class="blogextra__title">{{tpl:lang Extra menu}}</h2>
           {{tpl:Widgets type="extra"}}
      </div> <!-- End #blogextra -->

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;

themes/berlin/style.css

@@ -644 +644 @@
   .site-title {
     font-size: 1.8em; } }
-#sidebar {
+.footer__widgets {
+  padding: 1em;
+  background-color: white;
+  text-align: center;
+  line-height: 2; }
+
+.blogcustom__title {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px; }
+
+.footer__widgets .widget {
+  margin-top: 1em; }
+
+.footer__widgets h3 {
+  margin-bottom: 0;
+  font-size: 1em;
+  font-weight: bold; }
+
+.footer__widgets ul {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  *zoom: 1; }
+  .footer__widgets ul li {
+    list-style-image: none;
+    list-style-type: none;
+    margin-left: 0;
+    display: -moz-inline-stack;
+    display: inline-block;
+    vertical-align: middle;
+    *vertical-align: auto;
+    zoom: 1;
+    *display: inline;
+    white-space: nowrap;
+    padding-left: 0.5em;
+    padding-right: 0.5em; }
+
+.sidebar {
   *zoom: 1;
   padding-top: 2em;
@@ -650 +694 @@
   color: white;
   text-shadow: #373737 0px -1px 0px; }
-  #sidebar:after {
+  .sidebar:after {
     content: "";
     display: table;
     clear: both; }
-  #sidebar a:link, #sidebar a:visited {
+  .sidebar a:link, .sidebar a:visited {
     color: #f9f9f9;
     border: none; }
-  #sidebar a:hover, #sidebar a:focus, #sidebar a:active,
-  #sidebar li:hover, #sidebar li:focus {
+  .sidebar a:hover, .sidebar a:focus, .sidebar a:active,
+  .sidebar li:hover, .sidebar li:focus {
     background-color: #d52125; }
 
-#sidebar h2, #sidebar h3 {
+.blognav__title,
+.blogextra__title {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px; }
+
+.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 > ul, #blogextra div > ul {
-  list-style: none;
-  padding-left: 0;
-  line-height: 2.28571; }
-  #blognav div > ul li, #blogextra div > ul li {
-    list-style-image: none;
-    list-style-type: none;
-    margin-left: 0; }
-
-#blognav ul, #blogextra ul {
+  .blognav__widgets .widget > ul, .blogextra__widgets .widget > ul {
+    list-style: none;
+    padding-left: 0;
+    line-height: 2.28571; }
+    .blognav__widgets .widget > ul li, .blogextra__widgets .widget > ul li {
+      list-style-image: none;
+      list-style-type: none;
+      margin-left: 0; }
+
+.blognav__widgets ul, .blogextra__widgets ul {
   margin: 0; }
-#blognav li, #blogextra li {
+.blognav__widgets li, .blogextra__widgets li {
   display: block;
   padding-left: .25em;
   border-bottom: 1px solid gainsboro; }
-#blognav li ul, #blogextra li ul {
+.blognav__widgets li ul, .blogextra__widgets li ul {
   margin-left: -.25em; }
-#blognav li li, #blogextra li li {
+.blognav__widgets li li, .blogextra__widgets li li {
   border-top: 1px solid gainsboro; }
-#blognav li li:last-child, #blogextra li li:last-child {
+.blognav__widgets li li:last-child, .blogextra__widgets li li:last-child {
   border-bottom: none; }
 
@@ -710 +769 @@
   background-color: #373737; }
 
-#sidebar li:hover ul {
+.sidebar li:hover ul {
   background-color: #373737; }
 
 @media screen and (min-width: 30.1em) and (max-width: 60em) {
-  #blognav div, #blogextra div {
+  .blognav__widgets .widget, .blogextra__widgets .widget {
     width: 50%;
     float: left; } }
 @media screen and (min-width: 60.1em) and (max-width: 80em) {
-  #blognav > div, #blogextra > div {
+  .blognav__widgets .widget, .blogextra__widgets .widget {
     width: 33.33%;
     float: left; } }
@@ -1233 +1292 @@
   display: none; }
 
-#sidebar, #main {
+.sidebar, #main {
   -webkit-transition: 0.3s all linear;
   -moz-transition: 0.3s all linear;
@@ -1283 +1342 @@
     margin-left: -66.6666667%; }
 
-  .off-canvas #sidebar {
+  .off-canvas .sidebar {
     position: relative;
     float: right;