Changeset 497:935efe2fe067 for themes

Timestamp:

07/03/11 17:11:21 (14 years ago)

Author:

kozlika

Branch:

themes

Message:

[Ductile] Fignolages divers, meilleure adaptation pour les mobiles, un peu de couleur.

Location:

themes/ductile

Files:

• mediaqueries.css (modified) (4 diffs)
• style.css (modified) (10 diffs)
• tpl/_footer.html (modified) (1 diff)
• tpl/_head.html (modified) (1 diff)
• tpl/_top.html (modified) (2 diffs)

themes/ductile/mediaqueries.css

@@ -13 +13 @@
 -------------------------------------------------------------------- */
 @media only screen and (max-width:480px) {
-     .nomobile {
+     .nosmall {
           display: none !important;
           }
@@ -28 +28 @@
           border-bottom: 1px solid #ccc;
           }
-     #supranav {
+     .supranav, #prelude {
           border:none;
           margin: 8px 0 0;
-          }
-     #supranav li a {
+          background: #fff;
+          }
+     .supranav li a, #prelude li a {
           border-right: 0;
           display: block;
           padding: 4px 8px;
           border-bottom: 1px solid #ccc;
+          text-decoration: none;
+          white-space: nowrap;
+          margin-bottom: 4px;
+          -webkit-border-bottom-left-radius: 7px;
+          -moz-border-radius-bottomleft: 7px;
+          border-bottom-left-radius: 7px;
+          }
+     #gotop li {
+          text-transform: none;
+          }
+     #prelude li a {
+          background: transparent url(img/menumobile.png) no-repeat right center;
+           }
+     #sn-bottom li a {
+          background: transparent url(img/menumobile.png) no-repeat right top;
+          }
+     #gotop li a {
+          background: transparent url(img/menumobile.png) no-repeat right -150px;
           }
      .post-title {
@@ -80 +99 @@
 
 @media only screen and (min-width: 481px) {
+     .nobig {
+          display: none;
+          }
+     #prelude {
+          position: absolute;
+          margin: 0;
+          top: 0;
+          left: 3px;
+          color: #fff;
+          font-size: .875em;
+          list-style-type: none;
+          }
+     #prelude li {
+          display: inline;
+          text-transform: none !important;
+          }
+     #prelude a, #prelude a:hover, #prelude a:visited {
+          position:absolute;
+          left:0;
+          top:-500px;
+          width:1px;
+          height:1px;
+          overflow:hidden;
+          background-image: none !important;
+          }
+     #prelude a:active, #prelude a:focus {
+          position:static;
+          width:auto;
+          height:auto;
+          }
      #top {
           padding-top: 24px;
@@ -89 +138 @@
           margin-left: 32px;
           }
-     #supranav {
+     #sn-bottom {
+          display: none;
+          }
+     .supranav {
           margin: 36px 0 0;
           border-bottom: 1px solid #ccc;
           }
-     #supranav li {
+     .supranav li {
           display: inline;
           padding: 8px 0;
           }
-     #supranav li a {
+     .supranav li a {
           display: inline-block;
           padding: 8px 32px 8px 28px;
           border-right: 1px solid #ccc;
           }
-     #supranav li a span {
+     .supranav li a span {
           display: block;
           }

themes/ductile/style.css

@@ -23 +23 @@
 Couleurs :
 Typo: #222 courant, #4c4c85 commentaires
+Titres non cliquables: #14709e
 Liens: #666 courant, #ad3f4c titre billet et Lire la suite
 Fond formulaire comm: #eef
@@ -91 +92 @@
      text-decoration: none;
      color: #333;
-     }
-#prelude {
-     position: absolute;
-     margin: 0;
-     top: 0;
-     left: 3px;
-     color: #fff;
-     font-size: .875em;
-     list-style-type: none;
-     }
-#prelude li {
-     display: inline;
-     }
-#prelude a, #prelude a:hover, #prelude a:visited {
-     position:absolute;
-     left:0;
-     top:-500px;
-     width:1px;
-     height:1px;
-     overflow:hidden;
-     }
-#prelude a:active, #prelude a:focus {
-     position:static;
-     width:auto;
-     height:auto;
      }
 #blogdesc {
@@ -124 +100 @@
      text-shadow: none;
      }
-#supranav {
+.supranav, #prelude {
      font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
      padding: 0 0 0 4px;
@@ -131 +107 @@
      font-size: .875em;
      }
-#supranav li {
+.supranav li, #prelude li {
      text-transform: uppercase;
      vertical-align: top;
      }
-#supranav li a {
+.supranav li a {
      text-decoration: none;
      white-space: nowrap;
@@ -144 +120 @@
      background: transparent url(img/menu.png) no-repeat right top;
  }
-#supranav li a:hover, #supranav li a:active, #supranav li a:focus {
+.supranav li a:hover, 
+.supranav li a:active, 
+.supranav li a:focus {
      background-color: #ebebee;
      background-position: right -150px;
      }
-#supranav li.active a {
+.supranav li.active a {
      background-position: right -150px;
      }
-#supranav li a span {
+.supranav li a span {
      display: block;
      text-transform: none;
@@ -177 +155 @@
 #content-info h2 { 
      font-size: 1.2em;
+     color: #14709e;
      }
 #subcategories {
@@ -235 +214 @@
 .post-title {
      margin-bottom: .33em;
-     color: #000;
+     color: #14709e;
      line-height: 1.17;
      }
@@ -248 +227 @@
      font-variant: small-caps;
      font-weight: normal;
-     color: #666;
+     color: #14709e;
      }
 .post-info, 
@@ -295 +274 @@
      font-size: .875em;
      }
+.footnotes h4 {
+     font-variant: normal;
+     font-weight: bold;
+}
 .read-it {
      text-align: right;
@@ -722 +705 @@
      font-weight: normal;
      text-transform: lowercase;
+     color: #14709e;
      }
 .arch-block h4 {

themes/ductile/tpl/_footer.html

@@ +1 @@
+<ul id="gotop" class="supranav nobig"><li><a href="#top">Haut de page</a></li></ul>
+
+<ul id="sn-bottom" class="supranav nobig">
+     <li class="li1" class="active"><a href="{{tpl:BlogURL}}">Accueil<span> articles récents</span></a></li>
+     <li class="li2"><a href="#">Construire un thème<span> tutoriels</span></a></li>
+     <li class="li3"><a href="#">Maquettes<span> projets graphiques</span></a></li>
+     <li class="li4"><a href="{{tpl:BlogURL}}archive">Archives<span> 2005-2011</span></a></li>
+</ul>
+
 <div id="footer">
+
      {{tpl:SysBehavior behavior="publicInsideFooter"}}
+
 
      <p>{{tpl:SysPoweredBy}}</p>
 </div>
 
-<!-- compat media queries -->
-<!--[if lt IE 9]>
-     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
-<![endif]-->
-
 {{tpl:SysBehavior behavior="publicFooterContent"}}

themes/ductile/tpl/_head.html

@@ -1 +1 @@
 <!-- media queries -->
      <meta name="viewport" content="width=device-width" />
+     <!-- compat media queries -->
+     <!--[if lt IE 9]>
+          <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
+     <![endif]-->
+
 
 <style type="text/css" media="screen">

themes/ductile/tpl/_top.html

@@ -1 +1 @@
 <div id="header">
 
-     <ul id="prelude" class="nomobile">
-          <li><a href="#main">{{tpl:lang To content}}</a></li>
+     <div id="top">
+     <h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1>
+          <p id="blogdesc" class="nosmall">{{tpl:BlogDescription}}</p>
+     </div>
+
+     <ul id="prelude">
+          <li class="nosmall"><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>
-
-     <div id="top">
-     <h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1>
-          <p id="blogdesc" class="nomobile">{{tpl:BlogDescription}}</p>
-     </div>
 
      <!-- # --BEHAVIOR-- publicTopAfterContent -->
@@ -19 +19 @@
      Par défaut : accueil, archives (rien dans le span)
      -->
-     <ul id="supranav">
-          <li id="li1" class="active"><a href="{{tpl:BlogURL}}">Accueil<span class="nomobile"> articles récents</span></a></li>
-          <li id="li2"><a href="#">Construire un thème<span class="nomobile"> tutoriels</span></a></li>
-          <li id="li3"><a href="#">Maquettes<span class="nomobile"> projets graphiques</span></a></li>
-          <li id="li4"><a href="{{tpl:BlogURL}}archive">Archives<span class="nomobile"> 2005-2011</span></a></li>
+     <ul id="sn-top" class="supranav nosmall">
+          <li class="li1" class="active"><a href="{{tpl:BlogURL}}">Accueil<span> articles récents</span></a></li>
+          <li class="li2"><a href="#">Construire un thème<span> tutoriels</span></a></li>
+          <li class="li3"><a href="#">Maquettes<span> projets graphiques</span></a></li>
+          <li class="li4"><a href="{{tpl:BlogURL}}archive">Archives<span> 2005-2011</span></a></li>
      </ul>
 </div>