Changeset 346:c4f5371b8e83 for themes/ductile

Timestamp:

06/08/11 16:15:05 (14 years ago)

Author:

kozlika

Branch:

themes

Message:

Ductile - Construire un thème, prêt pour Jour 3

Location:

themes/ductile

Files:

• _define.php (modified) (1 diff)
• mediaqueries.css (modified) (4 diffs)
• style.css (modified) (7 diffs)

themes/ductile/_define.php

@@ -14 +14 @@
      /* Description*/         "Chantier pour un nouveau theme",
      /* Author */             "Dotclear Team",
-     /* Version */            '0.2.1'
+     /* Version */            '0.3'
 );
 ?>

themes/ductile/mediaqueries.css

@@ -11 +11 @@
      h1 {
           font-size: 1.8em;
-          margin-left: 3%;
+          padding: 0 3%;
+          background: #706f6f;
+          -moz-box-shadow: 0 2px 3px #bbb;
+          -webkit-box-shadow: 0 2px 3px #bbb;
+          -o-box-shadow: 0 2px 3px #bbb;
+          box-shadow: 0 2px 3px #bbb;
+          }
+     h1 a {
+          display: block;
+          color: #fff;
+          text-shadow: 0 1px 1px #333;
+          }
+     h1 a:hover, h1 a:focus {
+          background: #333;
           }
      #prelude {
@@ -19 +32 @@
 
 @media only screen and (min-width: 481px) {
+     #page {
+          padding-top: 16px;
+          }
      h1 {
      font-size: 2.5em;
@@ -48 +64 @@
           padding: 0 10%;
           }
+     #blognav, #blogextra { 
+          width: 48%; float:left;
+          }
+     #blognav {
+          margin-right: 4%;
+     }
 }
 
@@ -54 +76 @@
           padding: 0 15%;
           }
+     #main {
+          width : 100%;
+          margin : 0 -26% 0 0;
+          float : left;
+          display: inline;
+          }
+     #content {
+          margin : 0 32% 0 0;
+          padding : 10px;
+          }
+     #footer {
+          clear : both;
+          text-align:center;
+          }
+     #sidebar {
+          width : 26%;
+          float : right;
+          margin-top: 3em;
+          }
+     #blognav, #blogextra {
+          margin : 0;
+          }
 }
+
+@media only screen and (min-width: 1280px) {
+     #wrapper {
+          padding: 0 140px 0 340px;
+          }
+     p.post-info { margin-left: -200px; float: left; width: 140px; text-align: right;}
+}

themes/ductile/style.css

@@ -18 +18 @@
      }
 
-/* ----------------------------------------------- liens */
+/* ------------------------------------------------------- liens */
 a {
      color: #666;
@@ -27 +27 @@
      }
 
-/* ----------------------------------------------- page */
+/* ------------------------------------------------------- page */
 #page {
      position: relative;
-     padding-top: 16px;
-     }
-
-/* ----------------------------------------------- top */
+     }
+
+/* ------------------------------------------------------- top */
 h1 a {
      text-decoration: none;
@@ -52 +51 @@
 }
 
-/* ----------------------------------------------- billets */
+/* ------------------------------------------------------- billets */
 .post {
      background: transparent url(img/filet.png) repeat-x left bottom;
@@ -67 +66 @@
      text-decoration: none;
      }
+.post-info, .post-tags, .post-info-co, .read-it {
+     line-height: 1.2;   
+     margin: .33em 0;
+     }
 .post-info, .post-tags {
      font-size: .875em;
-     margin: 0;
      padding: 0;
+     }
+.post-info a, .post-tags a, .post-info-co a {
+     white-space: nowrap;
      }
 .post-tags a {
      padding-right: 1em;
-     background-color: #fff;
-     background-repeat: no-repeat;
-     background-position: left center;  
-     }
-.post-tags a {
-     background-image: url(img/tag.png);
      padding-left: 14px;
+     background: #fff no-repeat left center url(img/tag.png);
      }
 .post-tags li {
@@ -97 +97 @@
      display: inline;
      font-size: 0.875em;
-     line-height: 1.2;
      font-style: italic;
      }
@@ -107 +106 @@
      background-repeat: no-repeat;
      background-position: left center;
-     white-space: nowrap;
      }
 .post-info-co a.comment_count {
@@ -118 +116 @@
      background-image: url(img/attach.png);  
      }
+
+/* ------------------------------------------------------- sidebar */
+#sidebar {
+     font-size: 0.875em;
+     }
+#sidebar h2 {
+     font-size: 1.2em;
+     margin: 0;
+     font-weight: normal;
+     }
+#sidebar h3 {
+     font-size: 1.1em;
+     margin-bottom: 0;
+     font-weight: normal;
+     }
+#sidebar ul {
+     margin: .75em 0 .5em 4px;
+     list-style-type: none;
+     padding: 0;
+     }
+#sidebar ul li ul {
+     margin-top: .5em;
+     }
+#sidebar ul li {
+     padding-left: 16px;
+     background: transparent url(img/square.png) no-repeat 0 .5em;
+     }
+#sidebar ul li ul li {
+     background-image: url(img/square2.png);
+     }
+#sidebar ul li ul li ul li {
+     background-image: url(img/square3.png);
+     }
+#blognav > div, #blogextra > div {
+     background: #f3f2e9;
+     margin-bottom: 1em;
+     padding: 4px 8px;
+     -moz-box-shadow: 2px 2px 4px #bbb;
+     -webkit-box-shadow: 2px 2px 4px #bbb;
+     -o-box-shadow: 2px 2px 4px #bbb;
+     box-shadow: 2px 2px 4px #bbb;
+     -moz-border-radius: 4px;
+     -webkit-border-radius: 4px;
+     border-radius: 4px;
+     }
+     
+/* recherche */
+#search p {
+     background: #fff; 
+     text-align: right;
+     border: 1px solid #ddd;
+     vertical-align: middle;
+     padding: 0;
+     }
+#search input { 
+     margin: 0;
+     border: none;
+     background: transparent;
+     height: 2em;
+     }
+#search #q {
+     float: left;
+     width: 80%;
+     }
+#search #q:focus {
+     background: #fcfcf9;
+     }
+#search .submit {
+     background: #706F6F;
+     color: #fff;
+     vertical-align: top;
+     width: 20%;
+     font-variant: small-caps;
+     }
+#search .submit:hover, #search .submit:focus {
+     background: #333;
+     }
+
+/* ------------------------------------------------------- pagination */
+#navlinks, .pagination {
+     margin-bottom: 1em;
+     padding: 4px 8px;
+     text-align: center;
+     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);
+     -moz-border-radius: 4px;
+     -webkit-border-radius: 4px;
+     border-radius: 4px;
+     border-right: 1px solid #aaa;
+     border-bottom: 1px solid #ccc;
+     }
+#navlinks {
+     margin-top: 2.2em;
+     }
+#navlinks a, .pagination a {
+     padding: 0 1em;
+     }
+     
+/* ------------------------------------------------------- footer */
+#footer {
+     clear: both;
+     background: #706f6f;
+     color: #fff;
+     }
+#footer p {
+     padding: .66em;
+     margin: 0;
+     text-align: right;
+}
+#footer a {
+     color: #fff;
+     }
+#footer a:hover, #footer a:focus {
+     background: #333;
+     }
+
 /* ================================================ 
      personnalisations blog chantier