Tidying up CSS. * Closes #21.
h3rald h3rald@h3rald.com
Fri, 11 Sep 2009 14:05:56 +0200
6 files changed,
53 insertions(+),
73 deletions(-)
M
content/css/_code.sass
→
content/css/_code.sass
@@ -1,11 +1,10 @@
----- ----- -=code_font - font-family: "Consolas", "Monaco", "Monospace" +@import definitions .highlight +code_font - border: 1px solid #A4282D + +double_border padding: 5px margin: 5px 0 overflow: auto
A
content/css/_definitions.sass
@@ -0,0 +1,27 @@
+----- +----- + +// Variables +!red = #A4282D +!gray = #555 + +// Mixins +=double_border + border = 3px double !red + +=button_img(!img) + background: url(../images/theme/buttons/#{!img}.png) + +=title_font + font-family: "Palatino Linotype", "Palatino", "Book Antiqua", "Serif" + +=body_font + font-family: "Georgia", "Serif" + +=title + +title_font + font-variant: small-caps + margin: 1em 0 0 0 + +=code_font + font-family: "Consolas", "Monaco", "Monospace"
M
content/css/_elements.sass
→
content/css/_elements.sass
@@ -1,9 +1,10 @@
----- ----- +@import definitions + #content img margin: 0 5px padding: 2px - #content li, dd@@ -20,15 +21,18 @@
p line-height: 1.5em margin: 1em 0 + + p[style] + +double_border + margin: 0 5px + padding: 3px blockquote, .note - font-family: Georgia, Serif - color: #555 + color: !gray font-style: italic padding: 0 0 0 33px margin: 0 background: url(../images/theme/quote.png) no-repeat top left - .hidden display: none@@ -38,9 +42,6 @@ background-position: -9999px -9999px
#navigation a display: block - -=button_img(!img) - background: url(../images/theme/buttons/#{!img}.png) #nav-about width: 115px@@ -64,7 +65,6 @@ +button_img("other_h")
.nav-other +button_img("other_h") - #nav-projects width: 127px@@ -132,11 +132,9 @@
.s-bookmarks +button_img("bookmarks_h") - .spacer-20 display: block height: 20px - .spacer-50 display: block@@ -150,52 +148,42 @@ .spacer-200
display: block height: 200px - .feed-item list-style-type: none margin: 0.8em 0.3em - .feed-item-text, .feed-item-date display: block - .feed-item-text margin-top: 0.3em margin-left: 1em font-style: italic - .left-column float: left width: 400px - .right-column float: right width: 400px - .clearleft clear: both - .article-item padding: 0.5em 0 display: block - .tag font-weight: bold - font-style: italic - + font-size: 0.8em .project-data - border-left: 1px solid #A4282D + border-left = 3px double !red padding: 0 1em 1em 1.5em margin: 0 0 0 1.5em height: 300px - ul overflow: hidden@@ -203,7 +191,7 @@
&.article-meta float: left list-style-type: none - border-left: 3px solid #222 + border-left = 3px solid !gray padding-left: 0.5em margin-left: 0.5em margin-bottom: 1em@@ -213,7 +201,7 @@ text-align: center
list-style-type: none display: block margin: auto - border: 1px solid #222 + border = 1px solid !gray background: #fff padding: 5px 0@@ -229,20 +217,17 @@ #content .article-meta li
margin-left: 0 .date - font-style: italic + font-size: 0.8em .inner-border img margin-top: 7px - #legacy-comments, #intensedebate max-width: 800px margin: auto - .legacy-comment padding: 5px 0 - .lc-header display: block@@ -251,45 +236,37 @@ border: 1px solid #232323
background: #121212 padding: 5px - table - border-bottom: 1px solid #A4282D - + +double_border tr, td, th padding: 5px - td - border-left: 1px solid #A4282D - border-right: 1px solid #A4282D - + border-left = 1px solid !red + border-right = 1px solid !red th - border: 1px solid #A4282D - + border = 1px solid !red #taglist, #timeline width: 100% border-bottom: none margin: 20px 0 - #taglist tr, #timeline tr padding: 2px width: 100% - #taglist td, #timeline td padding: 2px border-left: none border-right: none - #content input &[type=submit] color: #333 - border: 2px solid #333 + border = 2px solid !gray background: #ccc outline: none padding: 0.1em 0.3em@@ -315,8 +292,6 @@ vertical-align: middle
&:hover, &:focus, &:active border: 2px solid #CF282D - background: #FFEA8D - #search_form clear: both@@ -325,45 +300,36 @@
.gsc-resultsHeader, .gs-visibleUrl, .gsc-trailing-more-results, .gs-watermark display: none - .gsc-result padding: 0.5em 0 - table.gsc-search-box height: 25px margin: auto margin-top: 20px - .gsc-control, .gsc-resultsRoot width: 850px - .gsc-search-box border: none td border: none - .gsc-input width: 400px - .gsc-branding color: #000 font-style: italic font-size: 80% - font-family: Georgia, Serif border: none margin: auto padding: 0 - td.gsc-branding-img text-align: left - div.gsc-clear-button background: transparent url('../images/theme/icons/close.png') no-repeat center 50%@@ -373,14 +339,12 @@
&:hover cursor: pointer - .gsc-cursor-page display: inline padding-right: 7px &:hover cursor: pointer - .gsc-cursor-current-page font-weight: bold
M
content/css/_layout.sass
→
content/css/_layout.sass
@@ -127,6 +127,7 @@ text-align: left
font-size: 90% display: block height: 600px + color: #CACACA .footer-left, .footer-right width: 30%
M
content/css/_text.sass
→
content/css/_text.sass
@@ -1,14 +1,6 @@
----- ----- -=title_font - font-family: "Palatino Linotype", "Palatino", "Book Antiqua", "Serif" -=body_font - font-family: "Georgia", "Serif" - -=title - +title_font - font-variant: small-caps - margin: 1em 0 0 0 +@import definitions /* TEXT */@@ -31,7 +23,7 @@ font-size: 1.3em
+title .dropcap - font-family: !title_font + +title_font float: left font-size: 4.2em line-height: 0.75em@@ -47,9 +39,6 @@ text-align: center
em font-style: italic - -#footer, #border-bottom - color: #BDB7BA /**** Article Lists ****/@@ -72,14 +61,14 @@
/******* LINKS *******/ a, a.gs-title - text-decoration: underline + text-decoration: none outline: none h4 a text-decoration: none a, a.gs-title, .gsc-cursor-page - color: #A4282D + color = !red a:hover, a.gs-title:hover, .gsc-cursor-page:hover color: #CF282D
M
content/css/main.sass
→
content/css/main.sass
@@ -1,6 +1,6 @@
----- ----- -@import _layout.sass +@import layout.sass @import elements.sass @import text.sass @import code.sass