fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] changelog2012-01-19 08:18 am
  • Add Memory
  • Share This Entry

[dw-free] Style custom /icons pages

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

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

Style /icons page for Compartmentalize, Practicality, Dusty Foot, Crisped,
Skittlish Dreams, Five AM, EasyRead, Refried Tablet

Patch by [personal profile] ninetydegrees.

Files modified:
  • bin/upgrading/s2layers/compartmentalize/layout.s2
  • bin/upgrading/s2layers/crisped/layout.s2
  • bin/upgrading/s2layers/dustyfoot/layout.s2
  • bin/upgrading/s2layers/easyread/layout.s2
  • bin/upgrading/s2layers/fiveam/layout.s2
  • bin/upgrading/s2layers/practicality/layout.s2
  • bin/upgrading/s2layers/refriedtablet/layout.s2
  • bin/upgrading/s2layers/skittlishdreams/layout.s2
--------------------------------------------------------------------------------
diff -r 96a6b0ba5067 -r 9bf2ee057539 bin/upgrading/s2layers/compartmentalize/layout.s2
--- a/bin/upgrading/s2layers/compartmentalize/layout.s2	Thu Jan 19 16:01:54 2012 +0800
+++ b/bin/upgrading/s2layers/compartmentalize/layout.s2	Thu Jan 19 16:19:15 2012 +0800
@@ -618,6 +618,59 @@
     padding-left: .5em;
     }
 
+/*--- Icons Page ---*/
+
+.icons-container {
+    $entry_colors
+    border-top: 20px solid $*color_entry_border;
+    margin: 0 0 .5em;
+    padding: 1em;
+    }
+
+.icons-container a { color: $*color_entry_link; }
+.icons-container a:visited { color: $*color_entry_link_visited; }
+.icons-container a:hover { color: $*color_entry_link_hover; }
+.icons-container a:active { color: $*color_entry_link_active; }
+
+.icons-container h2 {
+    font-weight: normal;
+    text-transform: uppercase;
+    }
+
+.sorting-options ul {
+    padding-left: 0;
+    }
+
+.sorting-options ul li {
+    margin: .5em .2em 0 0;
+    }
+
+.page-icons .comment {
+    background: transparent;
+    border: none;
+    padding: 0;
+    }
+
+.page-icons .icon {
+    margin: 1em 0;
+    }
+
+.icon-image {
+    float: left;
+    clear: left;
+    margin-bottom: .25em;
+    min-width: 100px;
+    padding-right: 1em;
+    }
+
+.icon-info {
+    min-height: 100px;
+    }
+
+.icon-info .default {
+    text-decoration: underline;
+    }
+
 /*--- Contextual Pop-up ---*/
 
 div.ContextualPopup {
diff -r 96a6b0ba5067 -r 9bf2ee057539 bin/upgrading/s2layers/crisped/layout.s2
--- a/bin/upgrading/s2layers/crisped/layout.s2	Thu Jan 19 16:01:54 2012 +0800
+++ b/bin/upgrading/s2layers/crisped/layout.s2	Thu Jan 19 16:19:15 2012 +0800
@@ -51,6 +51,8 @@
 
 function print_stylesheet () {
 
+    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") {
@@ -509,9 +511,10 @@
 .page-tags .tags-container h2 {
     background-color: $*color_entry_title_background;
     color: $*color_entry_title;
+    font-size: 1.17em;
+    $entry_title_font
+    font-weight: normal;
     padding: 5px 10px;
-    font-size: $*font_entry_title_size$*font_entry_title_units;
-    font-weight: normal;
     text-transform: uppercase;
     }
 
@@ -526,7 +529,7 @@
 /* Icons Page
 ***************************************************************************/
 
-.page-icons .icons-container {
+.icons-container {
     background-color: $*color_entry_background;
     border-right: 1px solid $*color_entry_border;
     border-bottom: 2px solid $*color_entry_border;
@@ -534,34 +537,59 @@
     margin-bottom: 10px;
     }
 
-.page-icons .icons-container a { color: $*color_entry_link; }
-.page-icons .icons-container a:visited { color: $*color_entry_link_visited; }
-.page-icons .icons-container a:hover { color: $*color_entry_link_hover; }
-.page-icons .icons-container a:active { color: $*color_entry_link_active; }
+.icons-container a { color: $*color_entry_link; }
+.icons-container a:visited { color: $*color_entry_link_visited; }
+.icons-container a:hover { color: $*color_entry_link_hover; }
+.icons-container a:active { color: $*color_entry_link_active; }
 
 .page-icons .icons-container h2 {
     background-color: $*color_entry_title_background;
     color: $*color_entry_title;
+    font-size: 1.17em;
+    $entry_title_font
+    font-weight: normal;
     padding: 5px 10px;
-    font-size: $*font_entry_title_size$*font_entry_title_units;
-    font-weight: normal;
     text-transform: uppercase;
     }
 
-.page-icons .icons-container .inner {
+.icons-container .contents,
+.icons-container .footer {
     padding: 15px;
     }
 
-.page-icons .icons-container .icon {
-    margin-top: 10px;
+.sorting-options ul {
+    padding-left: 0;
     }
 
-.page-icons .keywords ul {
-    margin-left: 0;
+.page-icons .comment {
+    background: transparent;
+    border: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
     }
 
-.page-icons .keywords ul li {
-    padding: 0;
+.page-icons .icon {
+    margin: 1em 0;
+    }
+
+.icon-image {
+    float: left;
+    clear: left;
+    margin-bottom: .25em;
+    min-width: 100px;
+    padding-right: 1em;
+    }
+
+.icon-info {
+    min-height: 100px;
+    }
+
+.icon-info span {
+    font-weight: bold;
+    }
+
+.icon-info .default {
+    text-decoration: underline;
     }
 
 /* Modules
diff -r 96a6b0ba5067 -r 9bf2ee057539 bin/upgrading/s2layers/dustyfoot/layout.s2
--- a/bin/upgrading/s2layers/dustyfoot/layout.s2	Thu Jan 19 16:01:54 2012 +0800
+++ b/bin/upgrading/s2layers/dustyfoot/layout.s2	Thu Jan 19 16:19:15 2012 +0800
@@ -778,29 +778,48 @@
 /* Icons Page
 ***************************************************************************/
 
-.page-icons .icons-container {
+.icons-container {
     margin: 10px 10px 0 10px;
     }
 
-.page-icons .icons-container h2 {
+.icons-container h2 {
     border-bottom: 1px solid $*color_entry_border;
     color: $*color_entry_title;
     font-variant: small-caps;
     margin-bottom: 10px;
     }
 
-.page-icons .icon {
-    border-bottom: 5px solid $*color_entry_border;
-    margin: 0 10px 20px;
-    padding: 10px 0;
+.sorting-options ul {
+    padding-left: 0;
     }
 
-.page-icons .keywords ul {
-    margin-left: 0;
+.page-icons .comment {
+    border: none;
+    padding: 0;
     }
 
-.page-icons .keywords ul li {
-    padding: 0;
+.page-icons .icon {
+    margin: 1em 0;
+    }
+
+.icon-image {
+    float: left;
+    clear: left;
+    margin-bottom: .25em;
+    min-width: 100px;
+    padding-right: 1em;
+    }
+
+.icon-info {
+    min-height: 100px;
+    }
+
+.icon-info span {
+    font-weight: bold;
+    }
+
+.icon-info .default {
+    text-decoration: underline;
     }
 
 /* Modules
diff -r 96a6b0ba5067 -r 9bf2ee057539 bin/upgrading/s2layers/easyread/layout.s2
--- a/bin/upgrading/s2layers/easyread/layout.s2	Thu Jan 19 16:01:54 2012 +0800
+++ b/bin/upgrading/s2layers/easyread/layout.s2	Thu Jan 19 16:19:15 2012 +0800
@@ -725,6 +725,53 @@
     margin-bottom: 10px;
 }
 
+/*
+ * icons page
+ */
+
+.sorting-options ul {
+    list-style: none;
+    padding-left: 0;
+    }
+
+.sorting-options ul li {
+    display: inline;
+    }
+
+.page-icons .icon {
+    margin: 1em 0;
+    }
+
+.icon-image {
+    float: left;
+    clear: left;
+    margin-bottom: .25em;
+    min-width: 100px;
+    padding-right: 1em;
+    }
+
+.icon-info {
+    min-height: 100px;
+    }
+
+.icon-info span {
+    font-weight: bold;
+    }
+
+.icon-info .default {
+    text-decoration: underline;
+    }
+
+.icon-info .keywords ul {
+    display: inline;
+    list-style: none;
+    padding-left: 0;
+    }
+
+.icon-info .keywords ul li {
+    display: inline;
+    }
+
 $userpic_css
 
 /* End of CSS file */""";
diff -r 96a6b0ba5067 -r 9bf2ee057539 bin/upgrading/s2layers/fiveam/layout.s2
--- a/bin/upgrading/s2layers/fiveam/layout.s2	Thu Jan 19 16:01:54 2012 +0800
+++ b/bin/upgrading/s2layers/fiveam/layout.s2	Thu Jan 19 16:19:15 2012 +0800
@@ -6,7 +6,6 @@
 
 set layout_authors = [ { "name" => "winterfish", "type" => "user" } ];
 
-
 ##===============================
 ## Presentation
 ##===============================
@@ -930,25 +929,39 @@
     padding: .5em 0 1em;
     }
 
-.icons-container .icon {
+.sorting-options ul {
+    padding-left: 0;
+    }
+
+.page-icons .icon {
     margin: 1.5em 0;
     }
 
-.icons-container .icon-image {
+.icon-image {
     float: left;
     clear: left;
+    margin-bottom: .25em;
+    min-width: 100px;
     padding-right: 1em;
     }
 
-.icons-container .icon-info {
+.icon-info {
     min-height: 100px;
     }
 
-.icons-container .keywords ul {
+.icon-info span {
+    font-weight: bold;
+    }
+
+.icon-info .default {
+    text-decoration: underline;
+    }
+
+.icon-info .keywords ul {
     margin-left: 0;
     }
 
-.icons-container .keywords ul li {
+.icon-info .keywords ul li {
     padding: 0;
     }
 
diff -r 96a6b0ba5067 -r 9bf2ee057539 bin/upgrading/s2layers/practicality/layout.s2
--- a/bin/upgrading/s2layers/practicality/layout.s2	Thu Jan 19 16:01:54 2012 +0800
+++ b/bin/upgrading/s2layers/practicality/layout.s2	Thu Jan 19 16:19:15 2012 +0800
@@ -719,6 +719,63 @@
     margin-left: 0;
     }
 
+/*--- Icons Page ---*/
+
+.icons-container {
+    background: $*color_entry_background;
+    color: $*color_entry_text;
+    border-bottom: 5px solid $*color_entry_border;
+    padding: .5em;
+    }
+
+.icons-container a { color: $*color_entry_link; }
+.icons-container a:visited { color: $*color_entry_link_visited; }
+.icons-container a:hover { color: $*color_entry_link_hover; }
+.icons-container a:active { color: $*color_entry_link_active; }
+
+.icons-container h2 {
+    $entry_title_font
+    border-bottom: 1px solid $*color_entry_border;
+    color: $*color_entry_title;
+    font-variant: small-caps;
+    font-weight: normal;
+    margin: 0 0 .5em 0;
+    }
+
+.sorting-options ul {
+    padding-left: 0;
+    }
+
+.page-icons .comment {
+    background: transparent;
+    border-bottom: none;
+    padding: 0;
+    }
+
+.page-icons .icon {
+    margin: 1em 0;
+    }
+
+.icon-image {
+    float: left;
+    clear: left;
+    margin-bottom: .25em;
+    min-width: 100px;
+    padding-right: 1em;
+    }
+
+.icon-info {
+    min-height: 100px;
+    }
+
+.icon-info span {
+    font-weight: bold;
+    }
+
+.icon-info .default {
+    text-decoration: underline;
+    }
+
 /*--- Comments ---*/
 
 hr.above-entry-interaction-links, hr.below-reply-container {
diff -r 96a6b0ba5067 -r 9bf2ee057539 bin/upgrading/s2layers/refriedtablet/layout.s2
--- a/bin/upgrading/s2layers/refriedtablet/layout.s2	Thu Jan 19 16:01:54 2012 +0800
+++ b/bin/upgrading/s2layers/refriedtablet/layout.s2	Thu Jan 19 16:19:15 2012 +0800
@@ -618,6 +618,36 @@
     color: $*color_comment_text_frozen;
     }
 
+/*--- Icons Page ---*/
+
+.sorting-options ul {
+    padding-left: 0;
+    }
+
+.page-icons .icon {
+    margin: 1em 0;
+    }
+
+.icon-image {
+    float: left;
+    clear: left;
+    margin-bottom: .25em;
+    min-width: 100px;
+    padding-right: 1em;
+    }
+
+.icon-info {
+    min-height: 100px;
+    }
+
+.icon-info span {
+    font-weight: bold;
+    }
+
+.icon-info .default {
+    text-decoration: underline;
+    }
+
 $userpic_css
 
 """;
diff -r 96a6b0ba5067 -r 9bf2ee057539 bin/upgrading/s2layers/skittlishdreams/layout.s2
--- a/bin/upgrading/s2layers/skittlishdreams/layout.s2	Thu Jan 19 16:01:54 2012 +0800
+++ b/bin/upgrading/s2layers/skittlishdreams/layout.s2	Thu Jan 19 16:19:15 2012 +0800
@@ -395,6 +395,49 @@
     $this->print_navigation( { "class" => "bottomnav" } );
 }
 
+# so that the decorative background image will show up
+function IconsPage::print_navigation( string{} opts ) {
+    """
+    <div class="navigation $opts{"class"}">
+        <div class="inner">
+        </div><!-- navigation>inner -->
+    </div><!-- navigation -->
+    """;
+}
+
+function IconsPage::print_body {
+    $this->print_navigation( { "class" => "topnav" } );
+    """<div class='icons-container'>\n<div class="inner">\n""";
+    """<div class="header">\n<div class="inner">\n""";
+    print safe "<h2>$*text_icons_page_header</h2>";
+    "</div>\n</div>\n";
+    """<div class="contents">\n<div class="inner">\n""";
+    """<div class="sorting-options">\n<ul>\n""";
+    var int sort_ct = 0;
+    foreach var string k ($.sort_keyseq) {
+        var string text = lang_icon_sortorder_title($k);
+        if ( $k == $.sortorder ) {
+            print safe """<li class='$k active'>$text""";
+        } else {
+            print safe """<li class='$k'><a href='$.sort_urls{$k}'>$text</a>""";
+        }
+        if ( (++$sort_ct) < size $.sort_keyseq) { print $*text_default_separator; }
+        "</li>\n";
+    }
+    "</ul>\n</div>\n";
+    $.pages->print({ "class" => "icon-pages toppages" });
+    foreach var Icon i ($.icons) {
+        $i->print();
+    }
+    $.pages->print({ "class" => "icon-pages bottompages" });
+    "</div>\n</div>\n";
+    """<div class="footer">\n<div class="inner">\n""";
+    $this->print_icon_manage_link();
+    "</div>\n</div>\n";
+    "</div>\n</div>\n";
+    $this->print_navigation( { "class" => "bottomnav" } );
+}
+
 function generate_background_css_flipped (
     string background_image, 
     string background_image_repeat, 
@@ -594,9 +637,43 @@
 .two-columns-right #content {margin: 0 -5px 0 0; float: left;}
 .two-columns-left #content {margin: 0 0 0 -5px; float: right;}
 
-.tags-container { padding: 10px; margin-top: 10px; background-color: $*color_entry_background; }
-.two-columns-right.page-tags #wrap {margin-left: 20px; }
-.two-columns-left.page-tags #wrap {margin-right: 20px; }
+.tags-container,
+.icons-container {
+    background-color: $*color_entry_background;
+    color: $*color_entry_text;
+    margin-top: 10px;
+    padding: 10px;
+    }
+
+.tags-container a,
+.icons-container a {
+    color: $*color_entry_link;
+    }
+
+.tags-container a:visited,
+.icons-container a:visited {
+    color: $*color_entry_link_visited;
+    }
+
+.tags-container a:hover,
+.icons-container a:hover {
+    color: $*color_entry_link_hover;
+    }
+
+.tags-container a:active,
+.icons-container a:active {
+    color: $*color_entry_link_active;
+    }
+
+.two-columns-right.page-tags #wrap,
+.two-columns-right.page-icons #wrap {
+    margin-left: 20px;
+    }
+
+.two-columns-left.page-tags #wrap,
+.two-columns-left.page-icons #wrap {
+    margin-right: 20px;
+    }
 
 .module-section-one .inner {border-bottom:2px solid $header_bottom_color;}
 .two-columns-right .module-section-one .inner {text-align: right;}
@@ -793,9 +870,21 @@
 .two-columns-left #archive-month .navigation,
 .two-columns-left #archive-day .navigation  {margin-left:-22px; $navigation_background_redux}
 
-.page-tags .navigation {height:61px;  margin-bottom:-10px;}
-.two-columns-right.page-tags .navigation {$navigation_background}
-.two-columns-left.page-tags .navigation {$navigation_background_redux}
+.page-tags .navigation,
+.page-icons .navigation {
+    height: 61px;
+    margin-bottom: -10px;
+    }
+
+.two-columns-right.page-tags .navigation,
+.two-columns-right.page-icons .navigation {
+    $navigation_background
+    }
+
+.two-columns-left.page-tags .navigation,
+.two-columns-left.page-icons .navigation {
+    $navigation_background_redux
+    }
 
 .two-columns-right .bottomcomment, .two-columns-right .comments-message { $navigation_background }
 .two-columns-left .bottomcomment, .two-columns-left .comments-message { $navigation_background_redux }
@@ -814,9 +903,25 @@
 .two-columns-right #archive-month .navigation   {margin:0 -22px 0 0;}
 .two-columns-left #archive-month .navigation   {margin:0 0 0 -22px;}
 
-.page-tags #content h2 {padding: 0.2em; margin: 0; border: solid 1px $*color_page_border; $entry_colors font-size: 1.2em; margin-bottom: 20px; }
-.two-columns-right.page-tags #content h2 {margin-right: 10px; }
-.two-columns-left.page-tags #content h2 {margin-left: 10px; }
+.page-tags #content h2,
+.page-icons #content h2 {
+    $entry_colors
+    border: solid 1px $*color_page_border;
+    font-size: 1.2em;
+    margin: 0;
+    margin-bottom: 20px;
+    padding: .2em;
+    }
+
+.two-columns-right.page-tags #content h2,
+.two-columns-right.page-icons #content h2 {
+    margin-right: 10px;
+    }
+
+.two-columns-left.page-tags #content h2,
+.two-columns-left.page-icons #content h2 {
+    margin-left: 10px;
+    }
 
 #archive-month dt {font-weight: bold; }
 .two-columns-right #archive-month .entry-title {display: inline-block; margin:0 0 .5em 0; padding-left: 5px; }
@@ -868,6 +973,60 @@
     display: inline;
     }
 
+
+/*--- Icons Page ---*/
+
+.sorting-options ul {
+    list-style: none;
+    padding-left: 0;
+    text-align: center;
+    }
+
+.sorting-options ul li {
+    display: inline;
+    }
+
+.page-icons .comment {
+    background: transparent;
+    border: none;
+    margin: 0;
+    padding: 0;
+    }
+
+.page-icons .icon {
+    margin: 1em 0;
+    }
+
+.icon-image {
+    float: left;
+    clear: left;
+    margin-bottom: .25em;
+    min-width: 100px;
+    padding-right: 1em;
+    }
+
+.icon-info {
+    min-height: 100px;
+    }
+
+.icon-info span {
+    font-weight: bold;
+    }
+
+.icon-info .default {
+    text-decoration: underline;
+    }
+
+.keywords ul {
+    display: inline;
+    list-style: none;
+    padding-left: 0;
+    }
+
+.keywords ul li {
+    display: inline;
+    }
+
 $entryicon_css
 
     """;
--------------------------------------------------------------------------------