Changeset 359:f8482768790a

Timestamp:

06/13/11 18:44:35 (14 years ago)

Author:

kozlika

Branch:

themes

Message:

Ductile, jour 4, HTML and CSS for #footer and #header done.

Location:

themes/ductile

Files:

• img/home-small.png (deleted)
• img/menu.png (added)
• img/sticker-about.png (modified) (previous)
• img/sticker-contact.png (modified) (previous)
• img/sticker-feed.png (modified) (previous)
• img/sticker-hover.png (deleted)
• mediaqueries.css (modified) (6 diffs)
• style.css (modified) (9 diffs)
• tpl/_footer.html (modified) (2 diffs)
• tpl/_top.html (modified) (1 diff)

themes/ductile/mediaqueries.css

@@ -9 +9 @@
 
 @media only screen and (max-width:480px) {
+     #prelude, #blogdesc, #supranav span {
+          display: none !important;
+          }
+
      h1 {
           font-size: 1.8em;
-          border: solid 1px #777;
-          -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-          -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-          -o-box-shadow: rgba(0,0,0,.2);
-          box-shadow: 0 1px 2px rgba(0,0,0,.2);
-          color: #eee;
-          background: #555;
-          background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#555));
-          background: -moz-linear-gradient(top, #777, #555);
-          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#777777', endColorstr='#555555'); 
           }
      h1 a {
-          padding: 6px 3%;
-          color: #fff;
-          text-shadow: 0 1px 1px #333;
-          }
-     h1 a:hover, h1 a:focus {
-          background: #686867;
-          }
-     #prelude, #blogdesc {
-          display: none;
-          }
+          display: block;
+          padding: 6px 8px;
+          background: #f4f4f5;
+          background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f5), to(#d7d7dC));
+          background: -moz-linear-gradient(top,  #f4f4f5,  #d7d7dC);
+          border-right: 1px solid #aaa;
+          border-bottom: 1px solid #ccc;
+          }
+
+     #supranav {
+          border:none;
+          margin: 8px 0 0;
+          }
+     #supranav li a {
+          border-right: 0;
+          display: block;
+          padding: 4px 8px;
+          border-bottom: 1px solid #ccc;
+          }
+
      h2.post-title {
           font-size: 2.5em;
           }
-     #supranav li {
-          display: block !important;
-          }
-     #supranav li+li {
-          border-top: 1px solid #ddd;
-          }
+
      #stickers {
           margin: 0;
@@ -55 +54 @@
           border-left: 8px solid #fff;
           border-right: 8px solid #fff;
-     }
+          }
      #stickers img {
           display: block;
@@ -72 +71 @@
      #top {
           padding-top: 24px;
+          padding-bottom: 4px;
           }
      h1 {
           font-size: 2em;
-          padding-right: 200px;
-          }
-     h1 a, h1 a:hover, h1 a:focus {
-          background-repeat: no-repeat;
-          background-position: left top;
-          padding-left: 68px;
-          background-image: url(img/home-small.png);
-          min-height: 44px;
-          }
+          padding-right: 240px;
+          }
+     h1 a {
+          padding-left: 32px;
+          }
+
+     #supranav {
+          margin: 36px 0 0;
+          border-bottom: 1px solid #ccc;
+          }
+     #supranav li {
+          display: inline;
+          padding: 8px 0;
+          }
+     #supranav li a {
+          display: inline-block;
+          padding: 8px 32px;
+          border-right: 1px solid #ccc;
+          }
+     #supranav li a span {
+          display: block;
+          }
+
      #stickers {
           position: absolute;
@@ -108 +122 @@
           background-color: #fff;
           border-bottom: 4px solid #ad3f4c;
-     }
+          }
 }
 
@@ -142 +156 @@
 @media only screen and (min-width: 961px) {
      #wrapper {
-          padding: 0 15%;
+          padding: 0 13%;
           }
      #main {
@@ -167 +181 @@
           }
      #stickers {
-          padding-right: 15%;
+          padding-right: 13%;
           }
 }

themes/ductile/style.css

@@ -26 +26 @@
 Titres: #909090
 Fond formulaire comm: #eef
+
+Thanks to:
+Colorzilla wysiwyg gradient editor http://www.colorzilla.com/gradient-editor/
 */
 
@@ -63 +66 @@
      }
 a:hover, a:focus {
-     background-color: #eee;
+     background-color: #ebebee;
      text-decoration: none;
      }
@@ -78 +81 @@
      4. HAUT DE PAGE
 ------------------------------------------------------------- */
-
+#header {
+     text-shadow: 0 1px 1px rgba(0,0,0,.2);
+     line-height: 1;
+     }
 h1 {
      font-variant: small-caps;
-     line-height: 1;
      }
 h1 a {
      text-decoration: none;
-     display: inline-block;
      }
 #prelude {
@@ -94 +98 @@
      color: #fff;
      font-size: .875em;
-     }
-#prelude a {
-     color: #fff;
-     }
-#prelude a:focus {
-     color: #666;
+     list-style-type: none;
+     }
+#prelude li {
+     display: inline;
+     }
+#prelude a, #prelude a:hover, #prelude a:visited {
+     position:absolute;
+     left:0px;
+     top:-500px;
+     width:1px;
+     height:1px;
+     overflow:hidden;
+     }
+#prelude a:active, #prelude a:focus {
+     position:static;
+     width:auto;
+     height:auto;
      }
 #blogdesc {
-     margin: -8px 0 0 68px;
+     margin: 0;
+     padding-left: 32px;
      font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
      font-style: italic;
      color: #909090;
+     text-shadow: none;
      }
 #supranav {
-     margin: 24px 0 0;
-     padding: 0;
+     padding: 0 0 0 2px;
      list-style-type: none;
-     padding: 4px 4px 2px 4px;
-     font-size: .875em;
-     border-top: 1px solid #ddd;
-     border-bottom: 1px solid #ddd;
+     line-height: 1.25;
+     font-size: .875em;
      }
 #supranav li {
      font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
      text-transform: uppercase;
-     display: inline;
+     vertical-align: top;
      }
 #supranav li a {
-     display: inline-block;
-     margin-bottom: 2px;
      text-decoration: none;
-     padding: 4px 2em;
      white-space: nowrap;
-     background-color: #F3F2E9;
+     margin-bottom: 4px;
+     -webkit-border-bottom-left-radius: 7px;
+     -moz-border-radius-bottomleft: 7px;
+     border-bottom-left-radius: 7px;    
+     background: transparent url(img/menu.png) no-repeat right top;
+ }
+#supranav li a:hover, #supranav li a:active, #supranav li a:focus {
+     background-color: #ebebee;
+     background-position: right -150px;
+     }
+#supranav li.active a {
+     background-position: right -150px;
+     }
+#supranav li a span {
+     display: block;
+     text-transform: none;
+     text-shadow: none;
+     font-family: georgia;
+     font-style:italic;
      }
 
@@ -171 +200 @@
      font-size: .875em;
      color: #000;
-     background: #f4f4f5;
-     background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f5), to(#d7d7dC));
-     background: -moz-linear-gradient(top,  #f4f4f5,  #d7d7dC);
+     background: rgb(244,244,245);
+     background: -moz-linear-gradient(top, rgba(244,244,245,1) 0%, rgba(215,215,220,1) 100%);
+     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,245,1)), color-stop(100%,rgba(215,215,220,1)));
+     background: -webkit-linear-gradient(top, rgba(244,244,245,1) 0%,rgba(215,215,220,1) 100%);
+     background: -o-linear-gradient(top, rgba(244,244,245,1) 0%,rgba(215,215,220,1) 100%);
+     background: -ms-linear-gradient(top, rgba(244,244,245,1) 0%,rgba(215,215,220,1) 100%);
+     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f5', endColorstr='#d7d7dc',GradientType=0 );
+     background: linear-gradient(top, rgba(244,244,245,1) 0%,rgba(215,215,220,1) 100%);
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
@@ -202 +236 @@
      font-weight: normal;
      margin-bottom: .33em;
-     color: #686867;
+     color: #000;
      line-height: 1.17;
      }
@@ -427 +461 @@
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
      box-shadow: 0 1px 2px rgba(0,0,0,.2);
+     background: rgb(119,119,119);
+     background: -moz-linear-gradient(top, rgba(119,119,119,1) 0%, rgba(85,85,85,1) 100%);
+     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(119,119,119,1)), color-stop(100%,rgba(85,85,85,1)));
+     background: -webkit-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
+     background: -o-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
+     background: -ms-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
+     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#777777', endColorstr='#555555',GradientType=0 );
      color: #eee;
-     background: #555;
-     background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#555));
-     background: -moz-linear-gradient(top, #777, #555);
-     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#777777', endColorstr='#555555'); 
      }
 #comment-form input[type=submit]:hover, #comment-form input[type=submit]:focus,
 #comment-form input[type=reset]:hover, #comment-form input[type=reset]:focus {
-     background: #777;
-     background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#777));
-     background: -moz-linear-gradient(top, #555, #777);
-     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#777777');
+     background: linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);
+     background: rgb(85,85,85);
+     background: -moz-linear-gradient(top, rgba(85,85,85,1) 0%, rgba(119,119,119,1) 100%);
+     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(85,85,85,1)), color-stop(100%,rgba(119,119,119,1)));
+     background: -webkit-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
+     background: -o-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
+     background: -ms-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
+     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#777777',GradientType=0 );
+     background: linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%);
      text-decoration: none;
      }
@@ -529 +571 @@
 #search #q {
      float: left;
-     width: 80%;
+     width: 78%;
      }
 #search #q:focus {
@@ -556 +598 @@
      }
 #footer p {
-     padding: .66em;
+     padding: .66em 2em;
      margin: 0;
      text-align: right;
+     font-size: .875em;
+     font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
      }
 #footer a {

themes/ductile/tpl/_footer.html

@@ -1 +1 @@
 <div id="footer">
+
+<!-- Pour Franck: 
+Bien penser à appliquer une classe "last" au dernier item
+-->
+
      <ul id="stickers">
           <li id="sticker1"><a href="{{tpl:BlogURL}}pages/Contact"><img src="{{tpl:BlogThemeURL}}/img/sticker-contact.png" alt="Contact" /><span>Contact</span></a></li>
@@ -5 +10 @@
           <li id="sticker3" class="last"><a href="{{tpl:BlogURL}}pages/About"><img src="{{tpl:BlogThemeURL}}/img/sticker-about.png" alt="À propos" /><span>À propos</span></a></li>
      </ul>
+
   <p>{{tpl:SysPoweredBy}}</p>
 </div>

themes/ductile/tpl/_top.html

@@ -1 @@
-<div id="top">
-  <h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1>
+<div id="header">
+     <div id="top">
+     <h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1>
   
-  <!-- # --BEHAVIOR-- publicTopAfterContent -->
-  {{tpl:SysBehavior behavior="publicTopAfterContent"}}
+     <!-- # --BEHAVIOR-- publicTopAfterContent -->
+     {{tpl:SysBehavior behavior="publicTopAfterContent"}}
+     </div>
+
+     <ul id="prelude">
+          <li><a href="#main">{{tpl:lang To content}}</a></li>
+          <li><a href="#blognav">{{tpl:lang To menu}}</a></li>
+          <li><a href="#search">{{tpl:lang To search}}</a></li>
+     </ul>
+
+     <!-- Pour Franck: 
+     Il faudrait trouver un moyen pour que 
+     1. la balise <p /> ne soit présente que si la description est non vide
+     2. que l'utilisateur puisse indiquer si oui ou non il souhaite afficher la description (?)
+     -->
+     <p id="blogdesc">{{tpl:BlogDescription}}</p>
+
+     <!-- Pour Franck: 
+     Ajouter un id incrémental
+     Par défaut : accueil, archives (rien dans le span)
+     -->
+     <ul id="supranav">
+          <li id="li1" class="active"><a href="{{tpl:BlogURL}}">Accueil<span> articles récents</span></a></li>
+          <li id="li2"><a href="#">Construire un thème<span> tutoriels</span></a></li>
+          <li id="li3"><a href="#">Maquettes<span> projets graphiques</span></a></li>
+          <li id="li4"><a href="{{tpl:BlogURL}}archive">Archives<span> 2005-2011</span></a></li>
+     </ul>
 </div>
-
-<p id="prelude"><a href="#main">{{tpl:lang To content}}</a> |
-<a href="#blognav">{{tpl:lang To menu}}</a> |
-<a href="#search">{{tpl:lang To search}}</a></p>
-
-<p id="blogdesc">{{tpl:BlogDescription}}</p>
-
-<ul id="supranav">
-     <li><a href="#">Articles récents</a></li>
-     <li><a href="#">Construire un thème</a></li>
-     <li><a href="#">Maquettes</a></li>
-     <li><a href="#">Archives</a></li>
-</ul>