Changeset 670:9b06caee1e1e
- Timestamp:
- 08/06/11 12:17:28 (14 years ago)
- Branch:
- themes
- Location:
- themes/ductile
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
themes/ductile/mediaqueries.css
r660 r670 32 32 padding: 6px 8px; 33 33 background: #f4f4f5; 34 background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f5), to(#d7d7dC)); 34 background-image: -webkit-gradient(linear, left top, left bottom, from( #f4f4f5), to(#d7d7dC)); 35 background: -webkit-linear-gradient(top, #f4f4f5, #d7d7dC); 35 36 background: -moz-linear-gradient(top, #f4f4f5, #d7d7dC); 37 background: -o-linear-gradient(top, #f4f4f5, #d7d7dC); 38 background: -ms-linear-gradient(top, #f4f4f5, #d7d7dC); 39 background: linear-gradient(top, #f4f4f5, #d7d7dC); 36 40 border-right: 1px solid #aaa; 37 41 border-bottom: 1px solid #ccc; 38 42 } 39 43 .supranav, #prelude { 40 border: none;44 border: none; 41 45 margin: 8px 0 0; 42 46 background: #fff; 47 padding-left: 0; 43 48 } 44 49 .supranav li a, #prelude li a { … … 50 55 white-space: nowrap; 51 56 margin-bottom: 4px; 52 -webkit-border-bottom-left-radius: 7px;53 -moz-border-radius-bottomleft: 7px;54 border-bottom-left-radius: 7px;55 57 } 56 58 #gotop li { 59 border-top: 1px solid #ccc; 57 60 text-transform: none; 61 padding-top: 6px; 58 62 } 59 63 #prelude { 60 64 margin: .5em 0 !important; 61 padding-left: 0 !important;62 65 } 63 66 #prelude li a { … … 79 82 font-weight: bold; 80 83 } 84 #other-criteria .arch-block, #more-criteria .arch-block { 85 margin-left: 0 !important; 86 } 81 87 #stickers { 82 88 margin: 0; 83 89 padding: 0; 84 border-bottom: 8px solid #fff;90 border-bottom: 1px solid #fff; 85 91 } 86 92 #stickers li { … … 89 95 margin-left: 0; 90 96 border-style: solid; 91 border-color: #fff; 92 border-width: 2px 6px; 97 border-width: 1px 0 0 0; 93 98 overflow: hidden; 94 99 } … … 113 118 Autres (plus de 480px) 114 119 -------------------------------------------------------------------- */ 115 116 120 @media only screen and (min-width: 481px) { 117 121 .nobig { … … 121 125 position: absolute; 122 126 margin: 0; 127 padding: 0 0 0 4px; 123 128 top: 0; 124 129 left: 3px; 125 130 color: #fff; 126 font-size: .875em;127 131 list-style-type: none; 128 132 } … … 148 152 padding-top: 24px; 149 153 } 150 #logo {154 #logo { 151 155 float:left; 152 margin: 0 1.5em 0 1em;156 margin: 0 32px 0 24px; 153 157 } 154 158 #logo a { … … 169 173 margin: 36px 0 0; 170 174 border-bottom: 1px solid #ccc; 175 padding: 0 0 0 4px; 171 176 } 172 177 .supranav li { … … 180 185 border-right: 1px solid #ccc; 181 186 min-height: 2.5em; 187 -moz-border-radius: 0 0 0 7px; 188 -webkit-border-radius: 0 0 0 7px; 189 border-radius: 0 0 0 7px; 182 190 } 183 191 .supranav li a span { … … 216 224 } 217 225 #stickers a:hover span, #stickers a:focus span { 218 color: #6 66;226 color: #686867; 219 227 position: static; 220 228 top: 0; … … 246 254 } 247 255 img { 248 max-width: 100%;256 max-width: 97%; 249 257 height: auto; 250 258 width: auto\9; /* pour ie8 */ -
themes/ductile/style.css
r668 r670 58 58 } 59 59 blockquote { 60 border : 2px solid #eef;60 border-left: 4px solid #ccc; 61 61 padding: 1px 1em .5em; 62 background: #f9f9f9; 63 } 64 blockquote:before { 65 color: #ccc; 66 content: open-quote; 67 font-size: 4em; 68 display: block; 69 float: left; 62 70 } 63 71 code, pre { … … 70 78 white-space: normal; 71 79 } 72 73 80 a { 74 color: #6 66;81 color: #686867; 75 82 } 76 83 a:hover, a:focus { … … 81 88 margin-top: 0; 82 89 } 83 90 h2, h2 a { 91 font-weight: normal; 92 margin-top: .75em; 93 } 84 94 /* ------------------------------------------------------------ 85 95 3. PAGE … … 112 122 font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif; 113 123 font-style: italic; 114 color: # 888;124 color: #686867; 115 125 text-shadow: none; 116 126 } 117 127 .supranav, #prelude { 118 font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;119 padding: 0 0 0 4px;120 128 list-style-type: none; 121 129 line-height: 1.25; 122 130 font-size: .875em; 131 font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif; 123 132 } 124 133 .supranav li, #prelude li { … … 159 168 5. WRAPPER MAIN CONTENT 160 169 ------------------------------------------------------------- */ 161 162 170 #wrapper { 163 clear: both;164 }165 #main {}166 #content { 167 padding-bottom: 2em; 171 clear: both; 172 position: relative; 173 } 174 #content { 175 padding-bottom: 2em; 168 176 } 169 177 170 178 /* ------------------------------------------------------- content-info */ 171 179 #content-info { 172 margin-top: 2em; 173 font-size: .875em; 180 font-size: .875em; 181 } 182 #content-info h2 { 183 color: #14709e; 184 margin-top: 1em; 185 margin-bottom: .33em; 186 } 187 #subcategories { 174 188 font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif; 175 } 176 #content-info h2 { 177 font-size: 1.2em; 178 color: #14709e; 179 } 180 #subcategories { 181 font-size: .875em; 182 font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif; 183 } 184 #subcategories h3 { 189 padding-top: 1em; 190 font-size: .875em; 191 } 192 #subcategories h3, #subcategories ul { 193 display: inline; 194 padding-right: 1em; 195 } 196 #subcategories h3 { 185 197 font-size: 1.1em; 186 198 font-variant: small-caps; … … 188 200 #content-info p, 189 201 #content-info ul, 190 #subcategories ul { 202 #subcategories ul { 191 203 margin: .5em 0; 192 204 padding: 0; 193 205 list-style-type: none; 194 206 } 195 #subcategories li { 207 #subcategories li { 196 208 margin: 0; 197 display: inline; 209 display: inline; 198 210 padding-right: 1em; 199 211 } … … 201 213 color: #fff; 202 214 } 203 215 .feed-info a { 216 font-size: .875em; 217 padding-top: .1em; 218 padding-bottom: .1em; 219 } 204 220 /* ------------------------------------------------------- pagination, navlinks */ 205 221 .navlinks, … … 219 235 background: linear-gradient(top, rgba(244,244,245,1) 0%,rgba(215,215,220,1) 100%); 220 236 -moz-border-radius: 4px; 221 -webkit-border-radius: 4px; 237 -o-border-radius: 4px; 238 -ms-border-radius: 4px; 239 -khtml-border-radius: 4px; 222 240 border-radius: 4px; 223 241 border-right: 1px solid #aaa; 224 242 border-bottom: 1px solid #ccc; 225 243 } 226 .navlinks {227 margin-top: 4em;228 }229 244 .navlinks a, 230 245 .pagination a { 231 padding: 0 1em; 232 white-space: nowrap; 246 color: #333; 233 247 } 234 248 … … 236 250 6. BILLETS 237 251 ------------------------------------------------------------- */ 238 239 252 .post { 240 253 background: transparent url(img/filet.png) repeat-x left bottom; … … 276 289 font-variant: small-caps; 277 290 } 291 .post-content img, .post-excerpt img { 292 border: 1px solid #ccc; 293 max-width: 96%; 294 padding: 4px; 295 } 278 296 .post-info, 279 297 .post-tags, … … 313 331 background: transparent no-repeat 6px center url(img/date.png); 314 332 } 315 .post-info a,316 .post-info-co a,317 .permalink a {318 white-space: nowrap;319 }320 333 .post-tags a { 321 334 padding-right: 1em; … … 331 344 .post ul { 332 345 list-style-type: square; 346 margin-left: 0; 347 } 348 .post ol { 349 margin-left: 0; 333 350 } 334 351 .footnotes { … … 380 397 font-variant: small-caps; 381 398 font-weight: normal; 382 color: #6 66;399 color: #686867; 383 400 } 384 401 #attachments ul { … … 441 458 padding-bottom: .2em; 442 459 line-height: 1.25; 443 color: #6 66;460 color: #686867; 444 461 font-family: "New Century Schoolbook","Century Schoolbook", "Century Schoolbook L", Georgia, serif; 445 462 } … … 490 507 -webkit-border-radius: 3px; 491 508 -moz-border-radius: 3px; 509 -o-border-radius: 3px; 510 -ms-border-radius: 3px; 511 -khtml-border-radius: 3px; 492 512 border-radius: 3px; 493 513 font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif; 494 514 } 495 .field textarea { 496 padding: .5em 1em; 515 .field textarea { 516 padding: .5em 1em; 497 517 } 498 518 .field input:focus, … … 502 522 #comment-form input[type=submit], 503 523 #comment-form input[type=reset] { 524 color: #eee; 504 525 font-size: .875em; 505 526 display: inline-block; … … 509 530 padding: .33em .66em; 510 531 text-shadow: 0 1px 1px rgba(0,0,0,.3); 511 -webkit-border-radius: 5px; 532 background: rgb(119,119,119); 533 border: solid 1px #686867; 534 -webkit-border-radius: 5px; 512 535 -moz-border-radius: 5px; 536 -o-border-radius: 5px; 537 -ms-border-radius: 5px; 538 -khtml-border-radius: 5px; 513 539 border-radius: 5px; 514 border: solid 1px #777;515 540 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 516 541 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 542 -o-box-shadow: 0 1px 2px rgba(0,0,0,.2); 517 543 box-shadow: 0 1px 2px rgba(0,0,0,.2); 518 background: rgb(119,119,119); 519 background: -moz-linear-gradient(top, rgba(119,119,119,1) 0%, rgba(85,85,85,1) 100%); 520 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(119,119,119,1)), color-stop(100%,rgba(85,85,85,1))); 544 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(119,119,119,1)), color-stop(100%, rgba(85,85,85,1))); 521 545 background: -webkit-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%); 546 background: -moz-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%); 522 547 background: -o-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%); 523 548 background: -ms-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%); 524 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#777777', endColorstr='#555555',GradientType=0 ); 525 color: #eee; 549 background: linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%); 526 550 } 527 551 #comment-form input[type=submit]:hover, #comment-form input[type=submit]:focus, 528 552 #comment-form input[type=reset]:hover, #comment-form input[type=reset]:focus { 529 background: linear-gradient(top, rgba(119,119,119,1) 0%,rgba(85,85,85,1) 100%);530 553 background: rgb(85,85,85); 531 background: -moz-linear-gradient(top, rgba(85,85,85,1) 0%, rgba(119,119,119,1) 100%); 532 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(85,85,85,1)), color-stop(100%,rgba(119,119,119,1))); 554 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(85,85,85,1)), color-stop(100%, rgba(119,119,119,1))); 533 555 background: -webkit-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%); 556 background: -moz-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%); 534 557 background: -o-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%); 535 558 background: -ms-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%); 536 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#777777',GradientType=0 );537 559 background: linear-gradient(top, rgba(85,85,85,1) 0%,rgba(119,119,119,1) 100%); 538 560 text-decoration: none; … … 542 564 padding: 4px; 543 565 } 544 .form-help { 566 .form-help { 545 567 margin-top: 0; 546 568 font-size: .875em; … … 594 616 margin-bottom: 0; 595 617 } 596 #sidebar ulli {618 #sidebar li { 597 619 padding-left: 16px; 598 620 background: transparent url(img/square.png) no-repeat 0 .5em; … … 604 626 background-image: url(img/square3.png); 605 627 } 606 #sidebar .syndicate ulli {628 #sidebar .syndicate li { 607 629 background-image: none; 608 630 padding-left: 0; … … 667 689 background: #686867; 668 690 color: #fff; 691 font-size: .875em; 669 692 } 670 693 #footer p { … … 672 695 margin: 0; 673 696 text-align: right; 674 font-size: .875em;675 font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;676 697 } 677 698 #footer a { … … 680 701 #footer a:hover, 681 702 #footer a:focus { 682 background : #686867;703 background-color: #686867; 683 704 } 684 705 #stickers { … … 686 707 margin: 0; 687 708 } 688 689 709 /* ------------------------------------------------------------ 690 710 10. CLASSES COMMUNES 691 711 ------------------------------------------------------------- */ 692 693 712 /* ------------------------------------------------------- RSS */ 694 .feed { 695 padding-left: 20px; 696 background : transparent url(img/feed.png) no-repeat left center; 697 } 698 699 /* ------------------------------------------------------- tags */ 713 .feed { 714 padding-left: 22px; 715 background: transparent url(img/feed.png) no-repeat left center; 716 } 717 /* ------------------------------------------------------- tags */ 700 718 .dc-tags .content-inner, 701 719 .dc-tags .content-inner ul { … … 708 726 #sidebar .tags ul li, 709 727 #sidebar .tags ul li a { 710 display 711 width 712 padding-left 713 padding-right 714 background-color 728 display: inline; 729 width: auto; 730 padding-left: 0; 731 padding-right: .5em; 732 background-color: transparent; 715 733 background-image: none; 716 734 text-decoration: none; 717 line-height 735 line-height: 1.5em; 718 736 } 719 737 .tags ul li a:hover { 720 background-image :none; 721 } 722 .dc-tags .tag0, .tags .tag0 { font-size: 85%; } 723 .dc-tags .tag10, .tags .tag10 { font-size: 90%; } 724 .dc-tags .tag20, .tags .tag20 { font-size: 95%; } 725 .dc-tags .tag30, .tags .tag30 { font-size: 100%; } 726 .dc-tags .tag40, .tags .tag40 { font-size: 105%; } 727 .dc-tags .tag50, .tags .tag50 { font-size: 110%; } 728 .dc-tags .tag60, .tags .tag60 { font-size: 115%; } 729 .dc-tags .tag70, .tags .tag70 { font-size: 120%; } 730 .dc-tags .tag80, .tags .tag80 { font-size: 125%; } 731 .dc-tags .tag90, .tags .tag90 { font-size: 130%; } 732 .dc-tags .tag100, .tags .tag100 { font-size: 135%; } 733 738 background-image: none; 739 } 740 .dc-tags .tag0, .tags .tag0 { 741 font-size: 85%; 742 } 743 .dc-tags .tag10, .tags .tag10 { 744 font-size: 90%; 745 } 746 .dc-tags .tag20, .tags .tag20 { 747 font-size: 95%; 748 } 749 .dc-tags .tag30, .tags .tag30 { 750 font-size: 100%; 751 } 752 .dc-tags .tag40, .tags .tag40 { 753 font-size: 105%; 754 } 755 .dc-tags .tag50, .tags .tag50 { 756 font-size: 110%; 757 } 758 .dc-tags .tag60, .tags .tag60 { 759 font-size: 115%; 760 } 761 .dc-tags .tag70, .tags .tag70 { 762 font-size: 120%; 763 } 764 .dc-tags .tag80, .tags .tag80 { 765 font-size: 125%; 766 } 767 .dc-tags .tag90, .tags .tag90 { 768 font-size: 130%; 769 } 770 .dc-tags .tag100, .tags .tag100 { 771 font-size: 135%; 772 } 734 773 /* ------------------------------------------------------- messages d'erreur */ 735 774 .error { 736 border 737 background 738 padding 775 border: 1px solid #c44; 776 background: #df0; 777 padding: 0.5em; 739 778 } 740 779 .error ul { 741 padding-left 780 padding-left: 20px; 742 781 } 743 782 .error li { 744 list-style : square; 745 } 746 783 list-style: square; 784 } 747 785 /* ------------------------------------------------------- class à dispo pour billets */ 748 .left { float: left; margin-right : 1em; } 749 .right { float: right; margin-left : 1em; } 750 .center { margin-left : auto; margin-right : auto; } 751 .left-text { text-align : left; } 752 .right-text { text-align : right; } 753 .center-text { text-align : center; } 754 .little-text { font-size : .875em;} 755 .little-upper-text { font-size : .875em; text-transform : uppercase; } 756 hr.hidden {background: #fff; color: #fff; border-color: #fff; } 757 758 786 .left { 787 float: left; 788 margin-right: 1em; 789 } 790 .right { 791 float: right; 792 margin-left: 1em; 793 } 794 .center { 795 margin-left: auto; 796 margin-right: auto; 797 } 798 .left-text { 799 text-align: left; 800 } 801 .right-text { 802 text-align: right; 803 } 804 .center-text { 805 text-align: center; 806 } 807 .little-text { 808 font-size: .875em; 809 } 810 .little-upper-text { 811 font-size: .875em; 812 text-transform: uppercase; 813 } 814 hr.hidden { 815 background: #fff; 816 color: #fff; 817 border-color: #fff; 818 margin: 0; 819 } 759 820 /* ------------------------------------------------------------ 760 821 11. PAGES SPECIFIQUES … … 766 827 767 828 /* ---------------------------------------------------------------- archives */ 768 .dc-archive {}769 #time-criteria {}770 #other-criteria {}771 #more-arch {}772 829 .arch-block { 773 830 display: inline-block; … … 801 858 margin-left: 20px; 802 859 } 803 860 #time-criteria h3:first-child { 861 margin-top: 0; 862 } 804 863 #by-date { 805 864 margin-right: 0; 806 865 margin-bottom: 1em; 866 margin-top: 2em; 807 867 } 808 868 #by-date h3 { … … 827 887 font-size: .875em; 828 888 } 829 830 889 #by-cat ul { 831 890 background: transparent url(img/vline.png) repeat-y; … … 843 902 #by-tag { 844 903 width: 18em; 845 } 904 } 846 905 #by-tag ul li { 847 906 display: inline; 848 907 padding-right: 1em; 849 908 } 850 #by-tag .tag0 { color: #909090; font-size: 90%; } 851 #by-tag .tag10 { color: #828282; font-size: 92%; } 852 #by-tag .tag20 { color: #737373; font-size: 94%; } 853 #by-tag .tag30 { color: #656565; font-size: 96%; } 854 #by-tag .tag40 { color: #484848; font-size: 98%; } 855 #by-tag .tag50 { color: #3A3A3A; font-size: 100%; } 856 #by-tag .tag60 { color: #2B2B2B; font-size: 102%; } 857 #by-tag .tag70 { color: #1D1D1D; font-size: 104%; } 858 #by-tag .tag80 { color: #0E0E0E; font-size: 106%; } 859 #by-tag .tag90 { color: #030303; font-size: 108%; } 860 #by-tag .tag100 { color: #000; font-size: 110%;} 861 862 909 #by-tag .tag0 { 910 color: #909090; 911 font-size: 90%; 912 } 913 #by-tag .tag10 { 914 color: #828282; 915 font-size: 92%; 916 } 917 #by-tag .tag20 { 918 color: #737373; 919 font-size: 94%; 920 } 921 #by-tag .tag30 { 922 color: #656565; 923 font-size: 96%; 924 } 925 #by-tag .tag40 { 926 color: #484848; 927 font-size: 98%; 928 } 929 #by-tag .tag50 { 930 color: #3A3A3A; 931 font-size: 100%; 932 } 933 #by-tag .tag60 { 934 color: #2B2B2B; 935 font-size: 102%; 936 } 937 #by-tag .tag70 { 938 color: #1D1D1D; 939 font-size: 104%; 940 } 941 #by-tag .tag80 { 942 color: #0E0E0E; 943 font-size: 106%; 944 } 945 #by-tag .tag90 { 946 color: #030303; 947 font-size: 108%; 948 } 949 #by-tag .tag100 { 950 color: #000; 951 font-size: 110%; 952 } 863 953 .dc-archive #search { 864 954 padding: 4px; … … 877 967 margin-bottom: .33em; 878 968 } 879 880 969 .dc-archive-month h2.post-title { 881 970 font-size: 1.3em; 882 971 } 883 884 .dc-tags { } 885 .dc-tag { } 886 972 /* ---------------------------------------------------------------- 404 */ 887 973 .dc-404 #content-info { 888 974 padding-bottom: 200px; … … 898 984 font-variant: small-caps; 899 985 } 900 .dc-search #content-info em { 901 color: #14709e; 902 } 903 904 986 /* ---------------------------------------------------------------- search */ 987 .dc-search #content-info em { 988 color: #14709e; 989 } 905 990 /* --------------------------------------------------- 906 991 12. ET POUR FINIR NE PAS OUBLIER LES CLEARERS … … 915 1000 #comments, #footer, 916 1001 .clearer { 917 clear: both;1002 clear: both; 918 1003 } 919 1004 .post-content:before, .post-content:after { … … 922 1007 } 923 1008 .post-content:after { 924 clear: both;1009 clear: both; 925 1010 } 926 1011 .post:before, .post:after { … … 937 1022 .post-content img, .post-excerpt img { 938 1023 border: 1px solid #ccc; 939 } 1024 padding: 4px; 1025 max-width: 96%; 1026 }
Note: See TracChangeset
for help on using the changeset viewer.