Permalink
Browse files

Integrating 'ekynoxe' advices on the style.

* Looks much better and cleaner
* Simplified the CSS
* Simplified the HTML
  • Loading branch information...
detro committed Mar 12, 2011
1 parent 15edfd1 commit b2586e50a0210d1c2e558c0ad55ea81bd9ebd085
@@ -0,0 +1,50 @@
+/* --------------------------------- article */
+article header h1 {
+ font-size: 38px;
+ color: black;
+ letter-spacing: -2px;
+ font-weight: bold;
+ font-variant: normal;
+ text-shadow: none;
+ border-left: 10px solid #a22;
+ padding-left: 15px;
+ margin: 0px;
+}
+article header h1 a,
+article header h1 a:link,
+article header h1 a:visited {
+ color: black;
+ text-decoration: none;
+ display: block;
+}
+
+article header h1 a:hover {
+ color: #a22;
+ margin-left: -5px;
+}
+
+article ul.meta {
+ list-style-position: inside;
+ list-style-type: none;
+ padding: 0 5px; margin: 0;
+ width: 215px;
+ color: #aaa;
+ font-size: 14px;
+ display: block;
+}
+
+article ul.meta li {
+ line-height: 24px;
+}
+
+article ul.meta li.datetime {
+ list-style-image: url('/static/{{ config.theme }}/icons/clock.png')
+}
+
+article ul.meta li.comments {
+ list-style-image: url('/static/{{ config.theme }}/icons/comments.png')
+}
+
+article ul.meta li.tags {
+ list-style-image: url('/static/{{ config.theme }}/icons/tag.png')
+}
View
@@ -3,7 +3,11 @@
}
.serif {
- font-family: 'Palatino Linotype', 'Book Antiqua', 'Palatino', Georgia, Times, serif;
+ font-family: 'Palatino Linotype', 'Book Antiqua', 'Palatino', Georgia, 'Times New Roman', Times, serif;
+}
+
+.fancy {
+ font-family: 'Baskerville', 'Times New Roman', 'Times', serif;
}
::-moz-selection{ background: #aaa; color:#fff; text-shadow: none; }
@@ -15,108 +19,45 @@ html, body, h1, h2, h3, h4, h5 {
font-weight: normal;
}
-h1, h2, h3, h4, h5 {
- font-variant: small-caps;
-}
-
body, nav#topnavbar, footer#bottomfooter {
/* Force a minimum width for the body AND for fixed elements */
min-width: 1100px;
}
-h1, h2, h3, h4, h5 { color: #611; text-shadow: 0px 1px 2px #888; margin: 20px 0; }
+h1, h2, h3, h4, h5 {
+ font-variant: small-caps;
+ color: #611;
+ text-shadow: 0px 1px 2px #888;
+ margin: 20px 0;
+}
h1 { font-size: 32px; }
h2 { font-size: 26px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
-p {
- margin-top: 20px;
-}
-
-p:first-child {
- margin-top: 0;
-}
-
-div.img img, blockquote {
- background: #fafafa;
- background: linear-gradient(top, #fafafa, #eee);
- background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#eee));
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#eeeeee', GradientType=0 );
-
- border-top: 1px solid #fff;
- border-left: 1px solid #ddd;
- border-right: 1px solid #ddd;
- border-bottom: 1px solid #ddd;
-
- border-radius: 5px;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
-
- box-shadow: 0 0 5px #ddd;
- -o-box-shadow: 0 0 5px #ddd;
- -webkit-box-shadow: 0 0px 5px #ddd;
- -moz-box-shadow: 0 0 5px #ddd;
-
- text-shadow: 0 1px 0 #fff;
-}
-
-div.img img {
- padding: 15px;
- margin: 10px auto;
- display: block;
- clear: both;
- font-size: 110%;
-}
-
-blockquote {
- font-style: italic;
- padding: 10px 20px;
- margin: 10px 0;
-}
-
-div.linenodiv pre, div.highlight pre {
- font-size: 11px;
- margin: 10px 0;
- white-space: pre;
- font-family: 'Monaco', 'Courier New', 'Courier', monospace;
-}
-
-div.highlight pre {
- background-color: #fafafa;
-
- border-top: 1px solid #fff;
- border-left: 1px solid #ddd;
- border-right: 1px solid #ddd;
- border-bottom: 1px solid #ddd;
-
- box-shadow: 0 0 5px #ddd;
- -o-box-shadow: 0 0 5px #ddd;
- -webkit-box-shadow: 0 0px 5px #ddd;
- -moz-box-shadow: 0 0 5px #ddd;
-
- text-shadow: 0 1px 0 #fff;
-}
-
a, a:link, a:visited {
color: #aaa;
text-decoration: none;
- -webkit-transition: color .15s ease-out;
- -moz-transition: color .15s ease-out;
- -o-transition: color .15s ease-out;
- transition: color .15s ease-out;
+ -webkit-transition: all .15s ease-out;
+ -moz-transition: all .15s ease-out;
+ -o-transition: all .15s ease-out;
+ transition: all .15s ease-out;
}
a:hover {
color: #822;
}
+p {
+ margin-top: 0px;
+ margin-bottom: 20px;
+}
+
div#container {
width: 720px;
- min-height: 860px;
+ min-height: 800px;
margin-left: auto;
margin-right: auto;
}
@@ -128,127 +69,10 @@ div#main {
div#slogan {
display: block;
font-size: 16px;
- color: #dddddd;
+ color: #ddd;
font-style: italic;
}
-/* --------------------------------- nav#topnavbar */
-nav#topnavbar {
- background-color: #eee;
- height: 40px;
- font-size: 20px;
- box-shadow: 0 2px 7px #888;
- -o-box-shadow: 0 2px 7px #888;
- -webkit-box-shadow: 0 2px 7px #888;
- -moz-box-shadow: 0 2px 7px #888;
- text-shadow: 0 1px 0 #fff;
- z-index: 5;
-}
-
-nav#topnavbar img#feed {
- margin: 8px; padding: 0;
- width: 24px; height: 24px;
- float: left;
-}
-
-nav#topnavbar span#internallinks a.blogname {
- font-weight: bold;
- font-variant: small-caps;
-}
-
-nav#topnavbar span#internallinks,
-nav#topnavbar span#adminlinks {
- font-size: 16px;
- float: left;
- height: 40px;
- margin: 0; padding: 0;
-}
-
-nav#topnavbar span#links {
- font-size: 16px;
- float: right;
- height: 40px;
- margin: 0; padding: 0;
-}
-
-nav#topnavbar span#internallinks ul li,
-nav#topnavbar span#adminlinks ul li,
-nav#topnavbar span#links ul li {
- float: left;
- margin: 0;
- height: 40px;
-}
-
-nav#topnavbar span#internallinks ul li.current,
-nav#topnavbar span#adminlinks ul li.current {
- background: #822;
- background: linear-gradient(top, #822, #711);
- background: -moz-linear-gradient(top, #822 0%, #711 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#822), color-stop(100%,#711));
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#882222', endColorstr='#771111',GradientType=0 );
-}
-
-nav#topnavbar span#internallinks ul li.current a,
-nav#topnavbar span#adminlinks ul li.current a {
- color: #fff;
- text-shadow: 0 -1px 0px #222;
-}
-
-nav#topnavbar span#internallinks ul li a,
-nav#topnavbar span#adminlinks ul li a,
-nav#topnavbar span#links ul li a,
-nav#topnavbar span#links ul li.text {
- display: inline-block;
- height: 28px;
- padding: 12px 5px 0 5px;
-}
-
-nav#topnavbar span#searchbox {
- float: right;
- margin: 0; padding: 0;
- height: 40px; width: 190px;
- text-align: center;
-}
-
-nav#topnavbar span#searchbox input[type='text'] {
- height: 20px; width: 140px;
- margin: 8px 0;
- border: 1px solid #ddd;
- font-size: 16px; line-height: 22px;
-}
-
-nav#topnavbar span#searchbox input[type='image'] {
- width: 24px; height: 24px;
- padding: 0; margin: 0;
- border: 0;
-}
-
-nav#topnavbar span.leftseparator {
- border-left: 1px solid #ddd;
-}
-
-/* --------------------------------- div#bottomnavigation */
-div#bottomnavigation {
- margin: 40px -50px 0 -50px;
-}
-
-div#bottomnavigation span {
- font-size: 16px;
- height: 24px;
-}
-
-div#bottomnavigation span#olderlink {
- background: transparent url('/static/{{ config.theme }}/icons/back.png') center left no-repeat;
- padding: 10px 0 0 22px;
- float: left;
-}
-
-div#bottomnavigation span#newerlink {
- background: transparent url('/static/{{ config.theme }}/icons/forward.png') center right no-repeat;
- padding: 10px 22px 0 0;
- float: right;
-}
-
/* --------------------------------- footer */
footer#bottomfooter {
padding: 20px 0 35px;
@@ -307,17 +131,6 @@ footer#bottomfooter div#rightfoot div#slogan {
display: block;
}
-/* --------------------------------- article */
-article header h1 { font-size: 38px; color: black; letter-spacing: -1px; margin: 1px 0; }
-article header h1 a,
-article header h1 a:link,
-article header h1 a:visited,
-article header h1 a:hover {
- color: black;
- text-decoration: none;
- border: none;
-}
-
/* --------------------------------- div#centermessage */
div#centermessage {
margin: 200px auto 0px auto;
@@ -0,0 +1,62 @@
+/* --------------------------------- article.content */
+article.content {
+ margin: 20px 0 40px 0;
+ background: transparent;
+ color: black;
+}
+
+article.content section {
+ margin: 30px 0;
+ font-size: 18px;
+ line-height: 160%;
+}
+
+article.content section ul.meta {
+ float: left;
+ margin: 0 10px 0 0;
+}
+
+article.content section:first-letter {
+ font-family: 'Baskerville', 'Times New Roman', 'Times', serif;
+ font-size: 60px;
+ float: left;
+ line-height: 50px;
+ text-transform: uppercase;
+ padding: 0 3px 0 0;
+ text-shadow: 0px 1px 2px #888;
+}
+
+/* --------------------------------- div#share_buttons */
+div#share_buttons {
+ display: block;
+ height: 75px;
+}
+
+div#share_buttons > span {
+ color: #ccc;
+ clear: left;
+ float: left;
+ height: 72px;
+ padding-top: 22px;
+ font-size: 26px;
+ font-style: italic;
+}
+
+div#share_buttons ul {
+ float: right;
+ clear: right;
+ height: 72px;
+ display: block;
+}
+
+div#share_buttons ul li {
+ list-style: none;
+ display: inline;
+ margin-left: 30px;
+}
+
+div#share_buttons ul li a.google-buzz-button { display: inline; margin-left: -8px; }
+
+div#share_buttons ul li a.google-buzz-button span.buzz-counter { padding: 8px 0 0 0; }
+
+div#share_buttons ul li span.db-wrapper { height: 72px; }
Oops, something went wrong.

0 comments on commit b2586e5

Please sign in to comment.