[dw-free] Styles: standardize font options & header images options
[commit: http://hg.dwscoalition.org/dw-free/rev/3d5e22b683c8]
http://bugs.dwscoalition.org/show_bug.cgi?id=2195
Use new font properties for comment titles, instead of hardcoding in the CSS
or using the settings for entry titles. Tweak CSS so that font size is no
longer applied twice to comment titles in Tabula Rasa based layouts.
Patch by
ninetydegrees.
Files modified:
http://bugs.dwscoalition.org/show_bug.cgi?id=2195
Use new font properties for comment titles, instead of hardcoding in the CSS
or using the settings for entry titles. Tweak CSS so that font size is no
longer applied twice to comment titles in Tabula Rasa based layouts.
Patch by
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
Files modified:
- bin/upgrading/s2layers/bases/layout.s2
- bin/upgrading/s2layers/blanket/layout.s2
- bin/upgrading/s2layers/brittle/layout.s2
- bin/upgrading/s2layers/compartmentalize/layout.s2
- bin/upgrading/s2layers/core2base/layout.s2
- bin/upgrading/s2layers/crossroads/layout.s2
- bin/upgrading/s2layers/drifting/layout.s2
- bin/upgrading/s2layers/easyread/layout.s2
- bin/upgrading/s2layers/funkycircles/layout.s2
- bin/upgrading/s2layers/negatives/layout.s2
- bin/upgrading/s2layers/practicality/layout.s2
- bin/upgrading/s2layers/skittlishdreams/layout.s2
-------------------------------------------------------------------------------- diff -r 88f37aa1b380 -r 3d5e22b683c8 bin/upgrading/s2layers/bases/layout.s2 --- a/bin/upgrading/s2layers/bases/layout.s2 Fri Nov 05 14:53:55 2010 +0800 +++ b/bin/upgrading/s2layers/bases/layout.s2 Fri Nov 05 15:53:29 2010 +0800 @@ -108,6 +108,9 @@ propgroup fonts { property use font_entry_title; property use font_entry_title_size; property use font_entry_title_units; + property use font_comment_title; + property use font_comment_title_size; + property use font_comment_title_units; property use font_module_heading; property use font_module_heading_size; property use font_module_heading_units; @@ -140,6 +143,9 @@ set font_entry_title = "Arial"; set font_entry_title = "Arial"; set font_entry_title_size = "1.25"; set font_entry_title_units = "em"; + +set font_comment_title_size = "1.5"; +set font_comment_title_units = "em"; ##=============================== ## Display settings - images @@ -304,12 +310,10 @@ var string page_font = generate_font_css 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); var string page_subtitle_font = generate_font_css($*font_journal_subtitle, $*font_base, $*font_fallback, $*font_journal_subtitle_size, $*font_journal_subtitle_units); - +var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units); +var string comment_title_font = generate_font_css($*font_comment_title, $*font_base, $*font_fallback, $*font_comment_title_size, $*font_comment_title_units); var string module_text_font = generate_font_css($*font_module_text, $*font_base, $*font_fallback, $*font_module_text_size, $*font_module_text_units); var string module_heading_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units); - -var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units); - var string page_background = generate_background_css ($*image_background_page_url, $*image_background_page_repeat, $*image_background_page_position, $*color_page_background); var string header_background = generate_background_css ($*image_background_header_url, $*image_background_header_repeat, @@ -762,7 +766,13 @@ li.first-item {margin-left: 0;} #comments { border-top: 0.083em solid $*color_entry_border; padding-top: 0.5em;} .comment { border: 0.083em solid $*color_entry_border; margin: 0 1em 0 1em; } -.comment-title {font-size: normal 1.5em; padding: 0.5em; } + +.comment-title { + $comment_title_font + font-weight: normal; + padding: 0.5em; + } + .comment-title a {display: block; } .comment-title h4 { diff -r 88f37aa1b380 -r 3d5e22b683c8 bin/upgrading/s2layers/blanket/layout.s2 --- a/bin/upgrading/s2layers/blanket/layout.s2 Fri Nov 05 14:53:55 2010 +0800 +++ b/bin/upgrading/s2layers/blanket/layout.s2 Fri Nov 05 15:53:29 2010 +0800 @@ -78,6 +78,9 @@ propgroup fonts { property use font_entry_title; property use font_entry_title_size; property use font_entry_title_units; + property use font_comment_title; + property use font_comment_title_size; + property use font_comment_title_units; property use font_module_heading; property use font_module_heading_size; property use font_module_heading_units; @@ -258,6 +261,7 @@ var string month_header_colors = generat var string page_title_font = generate_font_css($*font_journal_title, $*font_base, $*font_fallback, $*font_journal_title_size, $*font_journal_title_units); var string page_subtitle_font = generate_font_css($*font_journal_subtitle, $*font_base, $*font_fallback, $*font_journal_subtitle_size, $*font_journal_subtitle_units); var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units); + var string comment_title_font = generate_font_css($*font_comment_title, $*font_base, $*font_fallback, $*font_comment_title_size, $*font_comment_title_units); var string module_font = generate_font_css($*font_module_text, $*font_base, $*font_fallback, $*font_module_text_size, $*font_module_text_units); var string module_title_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units); @@ -384,6 +388,10 @@ ul.entry-interaction-links li { display: /*--- comments ---*/ +.comment-title { + $comment_title_font + } + .comment-title h4 { font-size: inherit; font-weight: inherit; diff -r 88f37aa1b380 -r 3d5e22b683c8 bin/upgrading/s2layers/brittle/layout.s2 --- a/bin/upgrading/s2layers/brittle/layout.s2 Fri Nov 05 14:53:55 2010 +0800 +++ b/bin/upgrading/s2layers/brittle/layout.s2 Fri Nov 05 15:53:29 2010 +0800 @@ -93,6 +93,9 @@ propgroup fonts { property use font_entry_title; property use font_entry_title_size; property use font_entry_title_units; + property use font_comment_title; + property use font_comment_title_size; + property use font_comment_title_units; property string font_navigation_module_text { des = "Preferred font for navigation module text"; @@ -296,6 +299,7 @@ function Page::print_default_stylesheet( var string page_font = generate_font_css("", $*font_base, $*font_fallback, $*font_base_size, $*font_base_units); var string entry_font = generate_font_css($*font_entry_text, $*font_base, $*font_fallback, $*font_entry_text_size, $*font_entry_text_units); var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units); + var string comment_title_font = generate_font_css($*font_comment_title, $*font_base, $*font_fallback, $*font_comment_title_size, $*font_comment_title_units); var string module_title_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units); var string navigation_module_font = generate_font_css($*font_navigation_module_text, $*font_base, $*font_fallback, $*font_navigation_module_text_size, $*font_navigation_module_text_units); var string other_module_font = generate_font_css($*font_other_module_text, $*font_base, $*font_fallback, $*font_other_module_text_size, $*font_other_module_text_units); @@ -671,14 +675,20 @@ td.day { /*--- comments ---*/ +#comments { + $entry_font + } + +.comment-title { + $comment_title_font + } + .comment-title h4 { font-size: inherit; font-weight: inherit; margin: 0; padding: 0; } - -#comments { $entry_font } hr.above-entry-interaction-links, hr.below-reply-container { display: none; } diff -r 88f37aa1b380 -r 3d5e22b683c8 bin/upgrading/s2layers/compartmentalize/layout.s2 --- a/bin/upgrading/s2layers/compartmentalize/layout.s2 Fri Nov 05 14:53:55 2010 +0800 +++ b/bin/upgrading/s2layers/compartmentalize/layout.s2 Fri Nov 05 15:53:29 2010 +0800 @@ -35,6 +35,9 @@ set font_entry_title = "Franklin Gothic set font_entry_title = "Franklin Gothic Book, Arial Narrow, Arial"; set font_entry_title_size = "1.1"; set font_entry_title_units = "em"; + +set font_comment_title_size = "1.1"; +set font_comment_title_units = "em"; set font_module_heading = "Franklin Gothic Book, Arial Narrow, Arial"; set font_module_heading_size = "1.1"; @@ -392,7 +395,6 @@ hr.above-entry-interaction-links, hr.bel .comment-title, .comment-title a { color: $*color_entry_title; - font-size: $*font_entry_title_size; font-weight: bold; text-transform: uppercase; } diff -r 88f37aa1b380 -r 3d5e22b683c8 bin/upgrading/s2layers/core2base/layout.s2 --- a/bin/upgrading/s2layers/core2base/layout.s2 Fri Nov 05 14:53:55 2010 +0800 +++ b/bin/upgrading/s2layers/core2base/layout.s2 Fri Nov 05 15:53:29 2010 +0800 @@ -583,6 +583,9 @@ ul.entry-interaction-links li { .comment .comment-title, .comment .comment-title a { $comment_title_colors +} + +.comment .comment-title { $comment_title_font } diff -r 88f37aa1b380 -r 3d5e22b683c8 bin/upgrading/s2layers/crossroads/layout.s2 --- a/bin/upgrading/s2layers/crossroads/layout.s2 Fri Nov 05 14:53:55 2010 +0800 +++ b/bin/upgrading/s2layers/crossroads/layout.s2 Fri Nov 05 15:53:29 2010 +0800 @@ -29,11 +29,12 @@ set text_post_comment_friends = "Reply"; set font_base = "Verdana, Helvetica"; set font_fallback = "sans-serif"; -set font_module_text = "Verdana, Helvetica, sans-serif"; -set font_module_heading = "Century Gothic, Verdana, sans-serif"; set font_journal_title = "Century Gothic, Verdana, sans-serif"; set font_journal_subtitle = "Century Gothic, Verdana, sans-serif"; set font_entry_title = "Century Gothic, Verdana, sans-serif"; +set font_comment_title = "Century Gothic, Verdana, sans-serif"; +set font_module_heading = "Century Gothic, Verdana, sans-serif"; +set font_module_text = "Verdana, Helvetica, sans-serif"; ##=============================== ## Navigation Module @@ -216,11 +217,17 @@ blockquote > p:first-child { margin-top: blockquote > p:first-child { margin-top: 0; } dl dt { font-weight: bold; } -h1, h2, h3, h4, -.comment-title { font-family: $*font_journal_title; +h1, h2, h3, h4, .comment-title { font-weight: normal; padding-left: .25em; - padding-right: .25em; } + padding-right: .25em; + } + +.tags-container h2, +.page-archive h3, +.page-day h3.day-date { + font-family: $*font_journal_title; + } .entry-title a, .comment-title a { text-decoration: none; } diff -r 88f37aa1b380 -r 3d5e22b683c8 bin/upgrading/s2layers/drifting/layout.s2 --- a/bin/upgrading/s2layers/drifting/layout.s2 Fri Nov 05 14:53:55 2010 +0800 +++ b/bin/upgrading/s2layers/drifting/layout.s2 Fri Nov 05 15:53:29 2010 +0800 @@ -143,6 +143,9 @@ propgroup fonts property use font_entry_title; property use font_entry_title_size; property use font_entry_title_units; + property use font_comment_title; + property use font_comment_title_size; + property use font_comment_title_units; property use font_module_heading; property use font_module_heading_size; property use font_module_heading_units; @@ -277,6 +280,7 @@ function Page::print_default_stylesheet( var string page_title_font = generate_font_css($*font_journal_title, $*font_base, $*font_title_fallback, $*font_journal_title_size, $*font_journal_title_units); var string page_subtitle_font = generate_font_css($*font_journal_subtitle, $*font_base, $*font_title_fallback, $*font_journal_subtitle_size, $*font_journal_subtitle_units); var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units); + var string comment_title_font = generate_font_css($*font_comment_title, $*font_base, $*font_fallback, $*font_comment_title_size, $*font_comment_title_units); var string module_font = generate_font_css($*font_module_text, $*font_base, $*font_fallback, $*font_module_text_size, $*font_module_text_units); var string module_title_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units); @@ -745,6 +749,10 @@ function Page::print_default_stylesheet( border-bottom: 1px solid $*color_entry_border; } + .comment-title { + $comment_title_font + } + .comment-title h4 { font-size: inherit; font-weight: inherit; diff -r 88f37aa1b380 -r 3d5e22b683c8 bin/upgrading/s2layers/easyread/layout.s2 --- a/bin/upgrading/s2layers/easyread/layout.s2 Fri Nov 05 14:53:55 2010 +0800 +++ b/bin/upgrading/s2layers/easyread/layout.s2 Fri Nov 05 15:53:29 2010 +0800 @@ -94,6 +94,9 @@ propgroup fonts { property use font_entry_title; property use font_entry_title_size; property use font_entry_title_units; + property use font_comment_title; + property use font_comment_title_size; + property use font_comment_title_units; property use font_module_heading; property use font_module_heading_size; property use font_module_heading_units; @@ -318,6 +321,7 @@ function Page::print_default_stylesheet var string page_title_font = generate_font_css($*font_journal_title, $*font_base, $*font_fallback, $*font_journal_title_size, $*font_journal_title_units); var string page_subtitle_font = generate_font_css($*font_journal_subtitle, $*font_base, $*font_fallback, $*font_journal_subtitle_size, $*font_journal_subtitle_units); var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units); + var string comment_title_font = generate_font_css($*font_comment_title, $*font_base, $*font_fallback, $*font_comment_title_size, $*font_comment_title_units); var string module_font = generate_font_css($*font_module_text, $*font_base, $*font_fallback, $*font_module_text_size, $*font_module_text_units); var string module_title_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units); @@ -533,6 +537,10 @@ h2.module-header a { position: relative; } +.comment-title { + $comment_title_font + } + .comment-title h4 { font-size: inherit; font-weight: inherit; diff -r 88f37aa1b380 -r 3d5e22b683c8 bin/upgrading/s2layers/funkycircles/layout.s2 --- a/bin/upgrading/s2layers/funkycircles/layout.s2 Fri Nov 05 14:53:55 2010 +0800 +++ b/bin/upgrading/s2layers/funkycircles/layout.s2 Fri Nov 05 15:53:29 2010 +0800 @@ -102,6 +102,8 @@ set font_journal_subtitle_units = "em"; set font_journal_subtitle_units = "em"; set font_entry_title_size = "1.2"; set font_entry_title_units ="em"; +set font_comment_title_size = "1.2"; +set font_comment_title_units ="em"; set font_module_heading_size = "1.2"; set font_module_heading_units = "em"; @@ -425,8 +427,12 @@ h2#pagetitle { .header a:hover { $page_link_hover_colors } .entry-title, - .comment-title, - .page-tags h2 { + .comment-title { + text-transform: uppercase; + } + + .page-tags h2, + .page-archive h3 { $entry_title_font text-transform: uppercase; } diff -r 88f37aa1b380 -r 3d5e22b683c8 bin/upgrading/s2layers/negatives/layout.s2 --- a/bin/upgrading/s2layers/negatives/layout.s2 Fri Nov 05 14:53:55 2010 +0800 +++ b/bin/upgrading/s2layers/negatives/layout.s2 Fri Nov 05 15:53:29 2010 +0800 @@ -136,6 +136,9 @@ propgroup fonts { property use font_entry_title; property use font_entry_title_size; property use font_entry_title_units; + property use font_comment_title; + property use font_comment_title_size; + property use font_comment_title_units; property use font_module_heading; property use font_module_heading_units; property use font_module_heading_size; @@ -148,10 +151,8 @@ set font_fallback = "serif"; set font_fallback = "serif"; set font_base_size = "1"; set font_base_units = "em"; -set font_module_heading = ""; set font_module_heading_size = "1.1"; set font_module_heading_units = "em"; -set font_entry_title = ""; set font_entry_title_size = "1.1"; set font_entry_title_units = "em"; @@ -299,6 +300,7 @@ function Page::print_default_stylesheet( } var string page_font = generate_font_css("", $*font_base, $*font_fallback, $*font_base_size, $*font_base_units); var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units); + var string comment_title_font = generate_font_css($*font_comment_title, $*font_base, $*font_fallback, $*font_comment_title_size, $*font_comment_title_units); var string module_font = generate_font_css($*font_module_text, $*font_base, $*font_fallback, $*font_module_text_size, $*font_module_text_units); var string module_title_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units); @@ -464,6 +466,10 @@ function Page::print_default_stylesheet( .comment-wrapper.partial , .partial .comment { min-height: 0; } + + .comment-title { + $comment_title_font + } .comment-title h4 { font-size: inherit; diff -r 88f37aa1b380 -r 3d5e22b683c8 bin/upgrading/s2layers/practicality/layout.s2 --- a/bin/upgrading/s2layers/practicality/layout.s2 Fri Nov 05 14:53:55 2010 +0800 +++ b/bin/upgrading/s2layers/practicality/layout.s2 Fri Nov 05 15:53:29 2010 +0800 @@ -33,6 +33,9 @@ set font_entry_title = "Lucida Sans"; set font_entry_title = "Lucida Sans"; set font_entry_title_size = "1.37"; set font_entry_title_units = "em"; + +set font_comment_title_size = "1.2"; +set font_comment_title_units = "em"; set font_module_heading = "Lucida Sans"; set font_module_heading_size = "1.37"; @@ -121,7 +124,7 @@ function print_stylesheet () { function print_stylesheet () { var string page_subtitle_font = generate_font_css($*font_journal_subtitle, $*font_base, $*font_fallback, $*font_journal_subtitle_size, $*font_journal_subtitle_units); - + var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units); var string userpic_css = ""; if ($*userpics_position == "left") { @@ -283,9 +286,9 @@ h2#subtitle { /*--- Journal Navigation ---*/ .navigation { + $entry_title_font background: $*color_entry_background; border-bottom: 5px solid $*color_entry_border; - font-family: $*font_entry_title, $*font_fallback; font-size: 1.2em; font-variant: small-caps; margin: 0 0 15px 0; @@ -429,7 +432,8 @@ div.entry-content { } div.entry div.header { - font-family: $*font_entry_title, $*font_fallback; + $entry_title_font + font-size: 1em; padding: 0; } @@ -625,10 +629,9 @@ td.day { } .page-tags h2 { + $entry_title_font border-bottom: 1px solid $*color_entry_border; color: $*color_entry_title; - font-family: $*font_entry_title, $*font_fallback; - font-size: $*font_entry_title_size$*font_entry_title_units; font-variant: small-caps; font-weight: normal; margin: 0 0 .5em 0; @@ -652,7 +655,6 @@ hr.above-entry-interaction-links, hr.bel .comment-title, .comment-title a { color: $*color_entry_title; - font-size: 1.2em; font-variant: small-caps; } diff -r 88f37aa1b380 -r 3d5e22b683c8 bin/upgrading/s2layers/skittlishdreams/layout.s2 --- a/bin/upgrading/s2layers/skittlishdreams/layout.s2 Fri Nov 05 14:53:55 2010 +0800 +++ b/bin/upgrading/s2layers/skittlishdreams/layout.s2 Fri Nov 05 15:53:29 2010 +0800 @@ -169,6 +169,9 @@ propgroup fonts { property use font_entry_title; property use font_entry_title_size; property use font_entry_title_units; + property use font_comment_title; + property use font_comment_title_size; + property use font_comment_title_units; property use font_module_heading_size; property use font_module_heading; property use font_module_heading_units; @@ -389,9 +392,9 @@ function Page::print_default_stylesheet var string page_font = generate_font_css("", $*font_base, $*font_fallback, $*font_base_size, $*font_base_units ); var string journal_title_font = generate_font_css($*font_journal_title, $*font_base, $*font_fallback, $*font_journal_title_size, $*font_journal_title_units); var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units); + var string comment_title_font = generate_font_css($*font_comment_title, $*font_base, $*font_fallback, $*font_comment_title_size, $*font_comment_title_units); + var string module_title_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units); var string module_font = generate_font_css($*font_module_text, $*font_base, $*font_fallback, $*font_module_text_size, $*font_module_text_units); - var string module_title_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units); - var string page_background = generate_background_css( $*image_background_page_url, $*image_background_page_repeat, $*image_background_page_position, $*color_page_background ); @@ -594,6 +597,10 @@ h1, h2, h3, h4 {font-weight: 700; font-v .page-entry .entry, .page-entry .comment, .page-entry .text_noentries_day {border:0px;} .page-entry #comments {padding-top:20px;} +.comment-title { + $comment_title_font + } + .comment-title h4 { font-size: inherit; font-weight: inherit; --------------------------------------------------------------------------------