fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] changelog2011-12-28 09:57 am
  • Add Memory
  • Share This Entry

[dw-free] Misc. Styles & Themes: remove extra specificity from CSS

[commit: http://hg.dwscoalition.org/dw-free/rev/be1225838f6d]

http://bugs.dwscoalition.org/show_bug.cgi?id=4143

Remove extraneous div.X in Blanket, reformat CSS.

Patch by [personal profile] ninetydegrees.

Files modified:
  • bin/upgrading/s2layers/blanket/layout.s2
--------------------------------------------------------------------------------
diff -r 11b2b07f721f -r be1225838f6d bin/upgrading/s2layers/blanket/layout.s2
--- a/bin/upgrading/s2layers/blanket/layout.s2	Wed Dec 28 17:28:50 2011 +0800
+++ b/bin/upgrading/s2layers/blanket/layout.s2	Wed Dec 28 17:57:07 2011 +0800
@@ -206,20 +206,20 @@
 
     property use text_skiplinks_back;
     property use text_skiplinks_forward;
-    property use text_meta_music; 
-    property use text_meta_mood; 
-    property use text_meta_location; 
+    property use text_meta_music;
+    property use text_meta_mood;
+    property use text_meta_location;
     property use text_meta_xpost;
-    property use text_tags; 
+    property use text_tags;
 
     property use text_entry_prev;
-    property use text_entry_next; 
-    property use text_edit_entry; 
-    property use text_edit_tags; 
-    property use text_tell_friend; 
-    property use text_mem_add; 
-    property use text_watch_comments; 
-    property use text_unwatch_comments; 
+    property use text_entry_next;
+    property use text_edit_entry;
+    property use text_edit_tags;
+    property use text_tell_friend;
+    property use text_mem_add;
+    property use text_watch_comments;
+    property use text_unwatch_comments;
     property use text_permalink;
     property use text_stickyentry_subject;
 
@@ -242,29 +242,29 @@
 
 function Page::print_default_stylesheet () {
 
-var string page_colors = generate_color_css( $*color_page_text, $*color_page_background, new Color );
+    var string page_colors = generate_color_css( $*color_page_text, $*color_page_background, new Color );
 
-var string page_link_colors = generate_color_css( $*color_page_link, new Color, new Color );
-var string page_link_active_colors = generate_color_css( $*color_page_link_active, new Color, new Color );
-var string page_link_hover_colors = generate_color_css( $*color_page_link_hover, new Color, new Color );
-var string page_link_visited_colors = generate_color_css( $*color_page_link_visited, new Color, new Color );
+    var string page_link_colors = generate_color_css( $*color_page_link, new Color, new Color );
+    var string page_link_active_colors = generate_color_css( $*color_page_link_active, new Color, new Color );
+    var string page_link_hover_colors = generate_color_css( $*color_page_link_hover, new Color, new Color );
+    var string page_link_visited_colors = generate_color_css( $*color_page_link_visited, new Color, new Color );
 
-var string header_colors = generate_color_css( new Color, $*color_header_background, new Color);
-var string journal_title_colors = generate_color_css( $*color_page_title, new Color, new Color );
-var string page_title_colors = generate_color_css( $*color_page_title->lighter(), new Color, new Color );
+    var string header_colors = generate_color_css( new Color, $*color_header_background, new Color);
+    var string journal_title_colors = generate_color_css( $*color_page_title, new Color, new Color );
+    var string page_title_colors = generate_color_css( $*color_page_title->lighter(), new Color, new Color );
 
-var string module_colors = generate_color_css( $*color_module_text, $*color_module_background, new Color );
-var string module_title_colors = generate_color_css( $*color_module_title, $*color_module_title_background, new Color );
+    var string module_colors = generate_color_css( $*color_module_text, $*color_module_background, new Color );
+    var string module_title_colors = generate_color_css( $*color_module_title, $*color_module_title_background, new Color );
 
-var string entry_colors = generate_color_css( $*color_entry_text, $*color_entry_background, new Color );
-var string entry_title_colors = generate_color_css( $*color_entry_title, new Color, new Color );
-var string entry_accent_colors = generate_color_css( $*color_entry_accent, new Color, new Color );
-var string userpic_colors = generate_color_css( new Color, $*color_entry_background, $*color_entry_border->darker() );
+    var string entry_colors = generate_color_css( $*color_entry_text, $*color_entry_background, new Color );
+    var string entry_title_colors = generate_color_css( $*color_entry_title, new Color, new Color );
+    var string entry_accent_colors = generate_color_css( $*color_entry_accent, new Color, new Color );
+    var string userpic_colors = generate_color_css( new Color, $*color_entry_background, $*color_entry_border->darker() );
 
-var string input_colors = generate_color_css( $*color_entry_text, $*color_entry_background, $*color_entry_border );
+    var string input_colors = generate_color_css( $*color_entry_text, $*color_entry_background, $*color_entry_border );
 
-var string active_month_colors = generate_color_css( $*color_page_link_hover->darker(), new Color, new Color );
-var string month_header_colors = generate_color_css( $*color_entry_border->darker(130), $*color_entry_border, new Color );
+    var string active_month_colors = generate_color_css( $*color_page_link_hover->darker(), new Color, new Color );
+    var string month_header_colors = generate_color_css( $*color_entry_border->darker(130), $*color_entry_border, new Color );
 
     var string page_font = generate_font_css("", $*font_base, $*font_fallback, $*font_base_size, $*font_base_units);
     var string page_title_font = generate_font_css($*font_journal_title, $*font_base, $*font_fallback, $*font_journal_title_size, $*font_journal_title_units);
@@ -277,94 +277,351 @@
     var string userpic_css = "";
     if ($*userpics_position == "left") {
         $userpic_css = """
-        .userpic { float: left; margin: 0 10px 10px 0; }
+        .userpic {
+            float: left;
+            margin: 0 10px 10px 0;
+            }
         """;
     }
     elseif ($*userpics_position == "right") {
         $userpic_css = """
-        .userpic { float: right; margin: 0 0 10px 10px; }
+        .userpic {
+            float: right;
+            margin: 0 0 10px 10px;
+            }
         """;
     }
 
 """
 /* Blanket */
+/* by renoir */
 
-body { padding: 0; margin: 0; text-align: center; $page_colors $page_font }
+body {
+    $page_colors $page_font
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    }
 
-a, a:active { text-decoration: none; $page_link_colors }
-a:visited { $page_link_visited_colors }
-a:hover { $page_link_hover_colors }
+a {
+    text-decoration: none;
+    $page_link_colors
+    }
 
-q { font-style: italic; }
+a:visited {
+    $page_link_visited_colors
+    }
 
-#canvas { margin: 0 auto 3em auto; text-align: justify; padding: 0; }
-#content { padding: 0; margin: 0; }
-#primary { width: 60%; margin: 0 auto;  z-index: 0; padding: 0; }
+a:hover {
+    $page_link_hover_colors
+    }
+
+a:active {
+    $page_link_active_colors
+    }
+
+q {
+    font-style: italic;
+    }
+
+input, textarea {
+    $input_colors
+    padding: 5px;
+    line-height: 1.8em;
+    }
+
+#canvas {
+    margin: 0 auto 3em;
+    padding: 0;
+    text-align: justify;
+    }
+
+#content {
+    margin: 0;
+    padding: 0;
+    }
+
+#primary {
+    margin: 0 auto;
+    padding: 0;
+    width: 60%;
+    z-index: 0;
+    }
 
 /*--- header + footer ---*/
-#header { width: 60%; margin: 0 auto 2em auto; $header_colors }
-#header>.inner { border-left: 20px solid $*color_header_footer_border; padding: 4em 2em; }
-#footer { display: block; clear: both; }
-.page-top { width: 60%; margin: 0 auto; text-transform: uppercase; text-align: right; }
-.navigation { text-transform: uppercase; text-align: right; }
-li.page-back, li.page-forward { display: inline; list-style: none; padding: 0; margin: 0 0 0 0.3125em; }
-li.page-separator { display: none; }
-div.navigation ul { display: inline; padding: 0; margin: 0; }
+
+#header {
+    $header_colors
+    margin: 0 auto 2em;
+    width: 60%;
+    }
+
+#header>.inner {
+    border-left: 20px solid $*color_header_footer_border;
+    padding: 4em 2em;
+    }
+
+#footer {
+    clear: both;
+    display: block;
+    }
+
+.page-top {
+    margin: 0 auto;
+    text-align: right;
+    text-transform: uppercase;
+    width: 60%;
+    }
+
+.navigation {
+    text-align: right;
+    text-transform: uppercase;
+    }
+
+li.page-back,
+li.page-forward {
+    display: inline;
+    list-style: none;
+    margin: 0 0 0 .3125em;
+    padding: 0;
+    }
+
+li.page-separator {
+    display: none;
+    }
+
+.navigation ul {
+    display: inline;
+    margin: 0;
+    padding: 0;
+    }
+
+.navigation li {
+    display: inline;
+    list-style: none;
+    }
 
 /*--- header texts ---*/
-div#header h1#title { font-weight: normal; text-transform: uppercase; letter-spacing: 0; padding: 0; margin: 0; $journal_title_colors $page_title_font }
-div#header h2#subtitle { font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding: 0; margin: 0; $journal_title_colors $page_subtitle_font }
-div#header h2#pagetitle { font-weight: normal; text-transform: uppercase; letter-spacing: 1px; padding: 0; margin: 1em 0 0 0; $page_title_colors $page_subtitle_font }
+
+#header h1#title {
+    $journal_title_colors $page_title_font
+    font-weight: normal;
+    letter-spacing: 0;
+    margin: 0;
+    padding: 0;
+    text-transform: uppercase;
+    }
+
+#header h2#subtitle {
+    $journal_title_colors $page_subtitle_font
+    font-weight: normal;
+    letter-spacing: 1px;
+    margin: 0;
+    padding: 0;
+    text-transform: lowercase;
+    }
+
+#header h2#pagetitle {
+    $page_title_colors $page_subtitle_font
+    font-weight: normal;
+    letter-spacing: 1px;
+    margin: 1em 0 0;
+    padding: 0;
+    text-transform: uppercase;
+    }
 
 /*--- navigation links ---*/
-div.module-navlinks { position: fixed; bottom: 0; z-index: 100; padding: 0.75em; width: 100%; margin: 0 auto; $module_colors }
-div.module-navlinks ul.module-list { display: inline; padding: 0; margin: 0 0 0 2em; text-transform: uppercase; letter-spacing: -0.5px; }
-div.module-navlinks ul.module-list li { display: inline; margin: 0 1em 0 0; list-style: none; border-right: 1px solid $*color_module_border; padding: 0 0.5em 0 0; }
+
+.module-navlinks {
+    $module_colors
+    bottom: 0;
+    margin: 0 auto;
+    padding: .75em;
+    position: fixed;
+    width: 100%;
+    z-index: 100;
+    }
+
+.module-navlinks ul.module-list {
+    display: inline;
+    letter-spacing: -0.5px;
+    margin: 0 0 0 2em;
+    padding: 0;
+    text-transform: uppercase;
+    }
+
+.module-navlinks ul.module-list li {
+    border-right: 1px solid $*color_module_border;
+    display: inline;
+    list-style: none;
+    margin: 0 1em 0 0;
+    padding: 0 .5em 0 0;
+    }
 
 /*--- modules ---*/
-#secondary { width: 60%; margin: 0 auto; z-index: 0; padding: 0; $entry_colors }
-#secondary>.inner { border-left: 20px solid $*color_header_footer_border; padding: 4em 2em; }
 
-#secondary .module { float: left; margin: 2em 1em;}
-#secondary .module-header, #secondary .module-header a { $module_title_colors }
-#secondary .module-header { $module_title_font }
-#secondary .separator-after { clear: both; }
-.module-tags_cloud { margin: 3em 0; width: 100%; float: none; border-top: 1px solid $*color_entry_border; border-bottom: 1px solid $*color_entry_border; }
-.module-tags_cloud .module-content { padding: 0 3em 1em 3em; }
-.module-tags_cloud li, .tags_cloud li { display: inline; list-style-type: none; }
+#secondary {
+    $entry_colors
+    margin: 0 auto;
+    padding: 0;
+    width: 60%;
+    z-index: 0;
+    }
 
-#secondary .module-content { text-align: left; $module_font }
-#secondary .module-content ul {  list-style: outside; margin-left: 1em;  padding-left: 0; }
-#secondary .module-content li { margin: .5em 0; }
+#secondary>.inner {
+    border-left: 20px solid $*color_header_footer_border;
+    padding: 4em 2em;
+    }
 
-ul.userlite-interaction-links.icon-links { list-style: none; margin-left: 0; padding-left: 0; }
-ul.userlite-interaction-links.icon-links li { display: inline; padding: 0 .20em; }
-.module-calendar td a { display: block; padding: 2px; }
-.module-credit dt, .module-credit dd { display: inline; margin: 0; padding: 0; }
-.module-credit dt { font-weight: bold; margin-right: 0.5em; }
+#secondary .module {
+    float: left;
+    margin: 2em 1em;
+    }
 
-.module-search .search-form { margin: .2em auto; }
-.module-search .search-box { margin: .2em; }
+#secondary .module-header,
+#secondary .module-header a {
+    $module_title_colors
+    }
+
+#secondary .module-header {
+    $module_title_font
+    }
+
+#secondary .separator-after {
+    clear: both;
+    }
+
+.module-tags_cloud {
+    border-bottom: 1px solid $*color_entry_border;
+    border-top: 1px solid $*color_entry_border;
+    float: none;
+    margin: 3em 0;
+    width: 100%;
+    }
+
+.module-tags_cloud .module-content {
+    padding: 0 3em 1em;
+    }
+
+.module-tags_cloud li,
+.tags_cloud li {
+    display: inline;
+    list-style-type: none;
+    }
+
+#secondary .module-content {
+    text-align: left;
+    $module_font
+    }
+
+#secondary .module-content ul {
+    list-style: outside;
+    margin-left: 1em;
+    padding-left: 0;
+    }
+
+#secondary .module-content li {
+    margin: .5em 0;
+    }
+
+ul.userlite-interaction-links.icon-links {
+    list-style: none;
+    margin-left: 0;
+    padding-left: 0;
+    }
+
+ul.userlite-interaction-links.icon-links li {
+    display: inline;
+    padding: 0 .20em;
+    }
+
+.module-calendar td a {
+    display: block;
+    padding: 2px;
+    }
+
+.module-credit dt,
+.module-credit dd {
+    display: inline;
+    margin: 0;
+    padding: 0;
+    }
+
+.module-credit dt {
+    font-weight: bold;
+    margin-right: .5em;
+    }
+
+.module-search .search-form {
+    margin: .2em auto;
+    }
+
+.module-search .search-box {
+    margin: .2em;
+    }
 
 /*--- entry ---*/
-div.entry { padding: 2em; margin: 0 0 2em 0; border-left: 20px solid $*color_page_border; $entry_colors }
-div.entry-content { margin: 1em 0 0 0; }
 
-div.header { padding: 0; margin: 0 0 1em 0; }
-h3.entry-title { font-weight: normal; text-transform: lowercase; letter-spacing: -1; padding: 0; margin: 0; $entry_title_font $entry_title_colors }
-h3.entry-title a { $entry_title_colors }
+.entry {
+    $entry_colors
+    border-left: 20px solid $*color_page_border;
+    margin: 0 0 2em;
+    padding: 2em;
+    }
 
-.datetime { font-size: 0.9em; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; padding: 0; $entry_accent_colors }
-.datetime a { $entry_accent_colors }
+.entry-content {
+    margin: 1em 0 0;
+    }
 
-.userpic { display: block; }
+
+.header {
+    margin: 0 0 1em;
+    padding: 0;
+    }
+
+h3.entry-title {
+    $entry_title_font $entry_title_colors
+    font-weight: normal;
+    letter-spacing: -1px;
+    margin: 0;
+    padding: 0;
+    text-transform: lowercase;
+    }
+
+h3.entry-title a {
+    $entry_title_colors
+    }
+
+.datetime {
+    $entry_accent_colors
+    font-size: .9em;
+    font-weight: normal;
+    letter-spacing: 1px;
+    padding: 0;
+    text-transform: uppercase;
+    }
+
+.datetime a {
+    $entry_accent_colors
+    }
+
+.userpic {
+    display: block;
+    }
 
 .userpic img {
     padding: 5px;
     $userpic_colors
     }
 
-span.poster { font-size: 0.9em; font-weight: normal; text-transform: uppercase; letter-spacing: 0; padding: 0; $entry_accent_colors }
+.poster {
+    $entry_accent_colors
+    font-size: 0.9em;
+    font-weight: normal;
+    letter-spacing: 0;
+    padding: 0;
+    text-transform: uppercase;
+    }
 
 /* To prevent overlapping when icon's on the left */
 /* and list is the first thing in content */
@@ -373,27 +630,110 @@
     list-style-position: inside;
     }
 
-.metadata { margin: 2em 0 0 0; }
-.metadata.top-metadata { margin: 1em 0 2em 0; }
-div.metadata ul { padding: 0; margin: 0; }
-div.metadata ul li { list-style: none; font-size: 0.9em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0; $entry_accent_colors }
-span.metadata-label-location, span.metadata-label-mood, span.metadata-label-music { display: none; }
-span.metadata-item-location { padding: 0 0 0 1.3em; }
-span.metadata-item-mood { padding: 0 0 0 1.3em; }
-span.metadata-item-music { padding: 0 0 0 1.3em; }
+.metadata {
+    margin: 2em 0 0;
+    }
 
-span.tag-text { display: none; }
-div.tag ul { padding: 0 0 0 1.3em; margin: 0; display: inline; }
-div.tag ul li { display: inline; list-style: none; font-size: 0.9em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0; $entry_accent_colors }
+.metadata.top-metadata {
+    margin: 1em 0 2em;
+    }
 
-ul.entry-management-links { padding: 0; margin: 2em 0 0 0; }
-ul.entry-management-links li { display: inline; list-style: none; font-size: 0.9em; font-weight: normal; text-transform: lowercase; letter-spacing: 0; padding: 0 5px 0 0; $entry_accent_colors }
+.metadata ul {
+    margin: 0;
+    padding: 0;
+    }
 
-ul.entry-interaction-links { padding: 0 0 0.5em 0; margin: 1em 0 0 0; text-align: center; border-bottom: 1px solid $*color_entry_border; }
-ul.entry-interaction-links li { display: inline; list-style: none; font-size: 0.9em; font-weight: normal; text-transform: uppercase; letter-spacing: 0; padding: 0 5px 0 0; $entry_accent_colors }
+.metadata ul li {
+    $entry_accent_colors
+    font-size: .9em;
+    font-weight: normal;
+    letter-spacing: 0;
+    list-style: none;
+    padding: 0;
+    text-transform: lowercase;
+    }
+
+.metadata-label-location,
+.metadata-label-mood,
+.metadata-label-music {
+    display: none;
+    }
+
+.metadata-item-location,
+.metadata-item-mood,
+.metadata-item-music {
+    padding: 0 0 0 1.3em;
+    }
+
+.tag-text {
+    display: none;
+    }
+
+.tag ul {
+    display: inline;
+    margin: 0;
+    padding: 0 0 0 1.3em;
+    }
+
+.tag ul li {
+    $entry_accent_colors
+    display: inline;
+    font-size: .9em;
+    font-weight: normal;
+    letter-spacing: 0;
+    list-style: none;
+    padding: 0;
+    text-transform: lowercase;
+    }
+
+ul.entry-management-links {
+    margin: 2em 0 0;
+    padding: 0;
+    }
+
+ul.entry-management-links li {
+    $entry_accent_colors
+    display: inline;
+    font-size: .9em;
+    font-weight: normal;
+    letter-spacing: 0;
+    list-style: none;
+    padding: 0 5px 0 0;
+    text-transform: lowercase;
+    }
+
+ul.entry-interaction-links {
+    border-bottom: 1px solid $*color_entry_border;
+    margin: 1em 0 0;
+    padding: 0 0 .5em;
+    text-align: center;
+    }
+
+ul.entry-interaction-links li {
+    $entry_accent_colors
+    display: inline;
+    font-size: .9em;
+    font-weight: normal;
+    letter-spacing: 0;
+    list-style: none;
+    padding: 0 5px 0 0;
+    text-transform: uppercase;
+    }
 
 /*--- comments ---*/
 
+.comment-wrapper {
+    margin: 2em 0;
+    padding: 0;
+    }
+
+.comment {
+    $entry_colors
+    border-left: 20px solid $*color_page_border;
+    margin: 0 auto 2em;
+    padding: 40px 20px;
+    }
+
 .comment-title {
     $comment_title_font
     }
@@ -403,47 +743,127 @@
     font-weight: inherit;
     margin: 0;
     padding: 0;
-}
+    }
 
-hr.above-entry-interaction-links, hr.below-reply-container { display: none; }
+hr.above-entry-interaction-links,
+hr.below-reply-container {
+    display: none;
+    }
 
-input, textarea { padding: 5px; font: 1em Helvetica, Arial, 'Arial Narrow', sans-serif; line-height: 1.8em; $input_colors }
-textarea.textbox  { width: 100% !important; }
+textarea.textbox {
+    width: 100% !important;
+    }
 
-.comment { margin: 0 auto 2em auto; padding: 40px 20px; border-left: 20px solid $*color_page_border; $entry_colors }
-.comment-wrapper { margin: 2em 0; padding: 0; }
+.bottomcomment,
+.comments-message {
+    $entry_colors
+    border-left: 20px solid $*color_page_border;
+    margin: 0 auto 2em;
+    padding: 4em 2em;
+    }
 
-.bottomcomment, .comments-message { margin: 0 auto 2em auto; padding: 4em 2em; border-left: 20px solid $*color_page_border; $entry_colors }
+.comment-management-links ul,
+.comment-interaction-links ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    }
 
-.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; list-style: none; }
-.comment-management-links li, .comment-interaction-links li { display: inline; }
+.comment-management-links li,
+.comment-interaction-links li {
+    display: inline;
+    }
 
-#qrform table { border: 0!important; }
+#qrform table {
+    border: 0 !important;
+    }
 
 /*--- archive ---*/
-li.active { list-style: none; display: inline; text-transform: uppercase; padding: 0; margin: 0; text-align: center; $active_month_colors }
 
-.month { margin: 0 auto 2em auto; padding: 4em 2em; border-left: 20px solid $*color_page_border; $entry_colors }
-.month h3 { font-size: 1em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding: 0; margin: 0; text-align: right; $entry_title_colors }
+li.active {
+    $active_month_colors
+    display: inline;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    text-transform: uppercase;
+    }
 
-div.navigation ul { display: inline; }
-div.navigation li { display: inline; list-style: none; }
+.month {
+    $entry_colors
+    border-left: 20px solid $*color_page_border;
+    margin: 0 auto 2em;
+    padding: 4em 2em;
+    }
 
-.month th { font-size: 0.9em; font-weight: normal; text-transform: uppercase; padding: 5px; text-align: center; $month_header_colors }
-.month table { width: 100%; border: 0; margin: auto; }
-.month caption { display: none; }
+.month h3 {
+    $entry_title_colors
+    font-size: 1em;
+    font-weight: normal;
+    letter-spacing: 1px;
+    margin: 0;
+    padding: 0;
+    text-align: right;
+    text-transform: lowercase;
+    }
 
-td.day { padding: .5em; border: .1em solid $*color_entry_border; }
+.month th {
+    $month_header_colors
+    font-size: .9em;
+    font-weight: normal;
+    padding: 5px;
+    text-align: center;
+    text-transform: uppercase;
+    }
+
+.month table {
+    border: 0;
+    margin: auto;
+    width: 100%;
+    }
+
+.month caption {
+    display: none;
+    }
+
+td.day {
+    border: .1em solid $*color_entry_border;
+    padding: .5em;
+    }
 
 /*--- tags ---*/
-.page-tags .tags-container h2 { font-size: 1em; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding: 0; margin: 0; text-align: right; $entry_title_colors }
 
-.page-tags .tags-container { margin: 0 auto 2em auto; padding: 4em 2em; border-left: 20px solid $*color_page_border; $entry_colors}
+.page-tags .tags-container {
+    $entry_colors
+    border-left: 20px solid $*color_page_border;
+    margin: 0 auto 2em;
+    padding: 4em 2em;
+    }
 
-.page-tags .tags-container ul { margin: 1em; padding: 0; }
-.page-tags .tags-container ul li { margin: 0 0 0 1em; padding: 0; list-style: none; }
+.page-tags .tags-container h2 {
+    $entry_title_colors
+    font-size: 1em;
+    font-weight: normal;
+    letter-spacing: 1px;
+    margin: 0;
+    padding: 0;
+    text-align: right;
+    text-transform: lowercase;
+    }
+
+.page-tags .tags-container ul {
+    margin: 1em;
+    padding: 0;
+    }
+
+.page-tags .tags-container ul li {
+    list-style: none;
+    margin: 0 0 0 1em;
+    padding: 0;
+    }
 
 $userpic_css
+
 """;
-
 }
--------------------------------------------------------------------------------