dw-free: bin/upgrading/s2layers/easyread/layout.s2@5bab31c9f015

     1 layerinfo "type" = "layout";

     2 layerinfo "name" = "EasyRead";

     3 layerinfo redist_uniq = "easyread/layout";

     4 layerinfo author_name = "rb";

     5 layerinfo "des" = "A journal layout which is friendly to low vision users who need a large font, and to screen reader users. Accessibility is paramount.";

     6 layerinfo author_email = "ricky@notdoneliving.net";

     8 set layout_authors = [ { "name" => "rb", "type" => "user" }];

    10 ##===============================

    11 ## Display settings - general

    12 ##===============================

    14 propgroup presentation {

    15     property use num_items_recent;

    16     property use num_items_reading;

    17     property use use_journalstyle_entry_page;

    18     property use layout_type;

    19     property use tags_page_type;

    20     property use margins_size;

    21     property use margins_unit;

    22     property use userpics_style_group;

    23     property use userpics_position;

    24     property use entry_metadata_position;

    25     property use use_custom_friend_colors;

    26     property use use_shared_pic;

    27     property use userlite_interaction_links;

    28     property use entry_management_links;

    29     property use comment_management_links;

    30     property use reg_firstdayofweek;

    31     property use entry_datetime_format_group;

    32     property use comment_datetime_format_group;

    33 }

    35 set layout_type = "one-column-split";

    36 set use_custom_friend_colors = false;

    37 set custom_foreground_element = "subject";

    38 set custom_background_element = "subject";

    40 ##===============================

    41 ## Journal style - colors

    42 ##===============================

    44 propgroup colors {

    46     property use color_page_background;

    47     property use color_page_text;

    48     property use color_page_link;

    49     property use color_page_link_active;

    50     property use color_page_link_visited;

    51     property use color_page_title;

    53     property use color_header_background;

    55     property use color_entry_background;

    56     property use color_entry_text;

    58 }

    60 ##===============================

    61 ## Display settings - fonts

    62 ##===============================

    64 propgroup fonts {

    65     property use font_base;

    66     property use font_fallback;

    67     property use font_base_size;

    68     property use font_base_units;

    69     property use font_journal_title;

    70     property use font_journal_title_size;

    71     property use font_journal_title_units;

    72     property use font_journal_subtitle;

    73     property use font_journal_subtitle_size;

    74     property use font_journal_subtitle_units;

    75     property use font_entry_title;

    76     property use font_entry_title_size;

    77     property use font_entry_title_units;

    78     property use font_comment_title;

    79     property use font_comment_title_size;

    80     property use font_comment_title_units;

    81     property use font_module_heading;

    82     property use font_module_heading_size;

    83     property use font_module_heading_units;

    84     property use font_module_text;

    85     property use font_module_text_size;

    86     property use font_module_text_units;

    87 }

    88 set font_base = """APHont, "Helvetica Neue", Arial, Helvetica, Geneva""";

    89 set font_base_size = "1";

    90 set font_base_units = "em";

    91 set font_fallback = "sans-serif";

    92 set font_journal_title = """APHont, "Helvetica Neue", Arial, Helvetica, Geneva""";

    93 set font_journal_title_size = "3";

    94 set font_journal_title_units = "em";

    95 set font_journal_subtitle = """APHont, "Helvetica Neue", Arial, Helvetica, Geneva""";

    96 set font_journal_subtitle_size = "1.5";

    97 set font_journal_subtitle_units = "em";

    99 ##===============================

   100 ## Display settings - modules

   101 ##===============================

   103 propgroup modules {

   104     property use module_userprofile_group;

   105     property use module_navlinks_group;

   106     property use module_customtext_group;

   107     property use module_calendar_group;

   108     property use module_pagesummary_group;

   109     property use module_tags_group;

   110     property use module_links_group;

   111     property use module_syndicate_group;

   112     property use module_time_group;

   113     property use module_poweredby_group;

   114     property use module_credit_group;

   115     property use module_search_group;

   116     property use module_cuttagcontrols_group;

   117 }

   119 # explicitly define what sections the layout has available

   120 set module_layout_sections = "none|(none)|one|Above entries|two|Below entries";

   122 ##===============================

   123 ## Custom CSS

   124 ##===============================

   126 propgroup customcss {

   127     property use external_stylesheet;

   128     property use include_default_stylesheet;

   129     property use linked_stylesheet;

   130     property use custom_css;

   131 }

   133 propgroup text {

   134 ##===============================

   135 ## Text - main navigation

   136 ##===============================

   138     property use text_view_recent;

   139     property use text_view_friends;

   140     property use text_view_network;

   141     property use text_view_archive;

   142     property use text_view_userinfo;

   143     property use text_view_memories;

   144     property use text_view_tags;

   146 ##===============================

   147 ## Text - entry comment-related

   148 ##===============================

   150     property use text_post_comment;

   151     property use text_max_comments;

   152     property use text_read_comments;

   153     property use text_post_comment_friends;

   154     property use text_read_comments_friends;

   156     property use text_skiplinks_back;

   157     property use text_skiplinks_forward;

   158     property use text_meta_music;

   159     property use text_meta_mood;

   160     property use text_meta_location;

   161     property use text_meta_xpost;

   162     property use text_tags;

   164     property use text_entry_prev;

   165     property use text_entry_next;

   166     property use text_edit_entry;

   167     property use text_edit_tags;

   168     property use text_tell_friend;

   169     property use text_mem_add;

   170     property use text_watch_comments;

   171     property use text_unwatch_comments;

   172     property use text_permalink;

   173     property use text_stickyentry_subject;

   175     property use text_module_customtext;

   176     property use text_module_customtext_content;

   177     property use text_module_customtext_url;

   178 }

   180 set module_userprofile_section = "one";

   181 set module_pagesummary_section = "one";

   183 set module_navlinks_section = "two";

   185 set module_tags_section = "two";

   186 set module_tags_opts_type = "cloud";

   188 set module_links_section = "two";

   189 set module_customtext_section = "two";

   190 set module_customtext_show = false;

   191 set module_syndicate_section = "two";

   192 set module_credit_section = "two";

   193 set module_time_section = "two";

   194 set module_poweredby_section = "two";

   196 set module_calendar_section = "two";

   197 set module_calendar_show = false;

   199 set module_userprofile_order = 1;

   200 set module_pagesummary_order = 2;

   202 set module_navlinks_order = 10;

   203 set module_tags_order = 11;

   204 set module_links_order = 12;

   206 set module_customtext_order = 13;

   207 set module_syndicate_order = 14;

   208 set module_credit_order = 15;

   209 set module_time_order = 16;

   210 set module_poweredby_order = 17;

   211 set module_search_order = 19;

   212 set module_cuttagcontrols_order = 20;

   214 set module_calendar_order = 18;

   216 function Page::print()

   217 {

   218     """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n<head profile="http://www.w3.org/2006/03/hcard http://purl.org/uF/hAtom/0.1/ http://gmpg.org/xfn/11">\n""";

   219     $this->print_head();

   220     $this->print_stylesheets();

   221     $this->print_head_title();

   222     """</head>""";

   223     $this->print_wrapper_start();

   224     $this->print_control_strip();

   225     """

   226     <div id="canvas">

   227         <div class="inner">

   228             <div id="header">

   229                 <div class="inner">

   230                     """;

   231                     $this->print_global_title();

   232                     $this->print_global_subtitle();

   233                     $this->print_title();

   234     """

   235                 </div><!-- end header>inner -->

   236             </div><!-- end header -->

   237             <div id="content">

   238                 <div class="inner">

   239                     <div id="secondary"><div class="inner">

   240                         """;

   241                         $this->print_module_section("one");

   242     """

   243                     </div></div><!--  end secondary and secondary>inner -->

   245                     <div id="primary"><div class="inner">

   246                         """;

   247                         $this->print_body();

   248     """

   249                     </div></div><!-- end primary and primary>inner -->

   250                     <div id="tertiary"><div class="inner">

   251                         """;

   252                         $this->print_module_section("two");

   253     """

   254                     </div></div><!-- end tertiary and tertiary>inner -->

   255                 </div><!-- end content>inner -->

   256             </div> <!-- end content -->

   257         </div> <!-- end canvas>inner -->

   258     """;

   260     """

   261     <div id="footer">

   262         <div class="inner">

   263             """;

   264             print safe """

   265                 <div class="page-top"><a href="#">$*text_page_top</a></div>

   266         </div><!-- end footer>inner -->

   267     </div><!-- end footer -->

   269     </div> <!-- end canvas -->

   270     """;

   271     $this->print_wrapper_end();

   272     """</html>""";

   273 }

   275 function Page::print_default_stylesheet {

   277     var string page_background = generate_background_css ($*image_background_page_url, $*image_background_page_repeat, $*image_background_page_position, $*color_page_background);

   278     var string entry_background = generate_background_css ($*image_background_entry_url, $*image_background_entry_repeat, $*image_background_entry_position, $*color_entry_background);

   279     var string page_colors = generate_color_css($*color_page_text, $*color_page_background, $*color_page_border);

   280     var string entry_colors = generate_color_css($*color_entry_text, $*color_entry_background, $*color_entry_border);

   281     var string page_title_colors = generate_color_css($*color_page_title, new Color, new Color);

   282     var string page_link_colors = generate_color_css($*color_page_link, new Color, new Color);

   283     var string page_link_active_colors = generate_color_css($*color_page_link_active, new Color, new Color);

   284     var string page_link_hover_colors = generate_color_css($*color_page_link_hover, new Color, new Color);

   285     var string page_link_visited_colors = generate_color_css($*color_page_link_visited, new Color, new Color);

   287     var string page_font = generate_font_css("", $*font_base, $*font_fallback, $*font_base_size, $*font_base_units);

   288     var string page_title_font = generate_font_css($*font_journal_title, $*font_base, $*font_fallback, $*font_journal_title_size, $*font_journal_title_units);

   289     var string page_subtitle_font = generate_font_css($*font_journal_subtitle, $*font_base, $*font_fallback, $*font_journal_subtitle_size, $*font_journal_subtitle_units);

   290     var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units);

   291     var string comment_title_font = generate_font_css($*font_comment_title, $*font_base, $*font_fallback, $*font_comment_title_size, $*font_comment_title_units);

   292     var string module_font = generate_font_css($*font_module_text, $*font_base, $*font_fallback, $*font_module_text_size, $*font_module_text_units);

   293     var string module_title_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units);

   295     var string entry_contentsfooter_shift = "";

   296     if ( $*entry_userpic_style == "" ) { $entry_contentsfooter_shift = "84px"; }

   297     elseif ( $*entry_userpic_style == "small" ) { $entry_contentsfooter_shift = "59px"; }

   298     elseif ( $*entry_userpic_style == "smaller" ) { $entry_contentsfooter_shift = "34px"; }

   300     var string entry_header_margin = "";

   301     if ( $*entry_userpic_style == "" ) { $entry_header_margin = "110px"; }

   302     elseif ( $*entry_userpic_style == "small" ) { $entry_header_margin = "85px"; }

   303     elseif ( $*entry_userpic_style == "smaller" ) { $entry_header_margin = "60px"; }

   305     var string comment_header_margin = "";

   306     if ( $*comment_userpic_style == "" ) { $comment_header_margin = "110px"; }

   307     elseif ( $*comment_userpic_style == "small" ) { $comment_header_margin = "85px"; }

   308     elseif ( $*comment_userpic_style == "smaller" ) { $comment_header_margin = "60px"; }

   310     var string entrytitle_padding = $*use_custom_friend_colors ? "padding: .2em;" : "";

   312     var string userpic_css = "";

   313     if ($*userpics_position == "left") {

   314         $userpic_css = """

   315         .has-userpic .entry .header {

   316             margin-left: $entry_header_margin;

   317             }

   318         .has-userpic .comment .header {

   319             margin-left: $comment_header_margin;

   320             }

   322         .has-userpic .entry .poster {

   323             margin-left: $entry_header_margin;

   324             }

   326         #comments .userpic a img, .comment-wrapper .userpic a img  {

   327             float: left;

   328             margin-right: 10px;

   329             }

   330         #comments .comment-content, .comment-wrapper .comment-content {

   331             clear: left;

   332             }

   333         """;

   334     }

   335     elseif ($*userpics_position == "right") {

   336         $userpic_css = """

   337         .has-userpic .entry .header {

   338             margin-right: $entry_header_margin;

   339             }

   340         .has-userpic .comment .header {

   341             margin-right: $comment_header_margin;

   342             }

   344         .has-userpic .entry .poster {

   345             margin-right: $entry_header_margin;

   346             }

   348         .has-userpic .entry .contents .userpic {

   349             text-align: right;

   350             }

   352         #comments .userpic a img, .comment-wrapper .userpic a img  {

   353             float: right;

   354             margin-left: 10px;

   355             }

   356         #comments .comment-content, .comment-wrapper .comment-content {

   357             clear: right;

   358             }

   359         """;

   360     }

   363 """/* Globals */

   364 ul {

   365     margin-top: 0;

   366 }

   368 a {

   369     $page_link_colors

   370 }

   372 a:visited {

   373     $page_link_visited_colors

   374 }

   376 a:focus, a:active {

   377     $page_link_active_colors

   378 }

   380 q { font-style: italic;

   381 }

   383 /* All posts & all navigation */

   384 #primary, #secondary, #tertiary, #footer {

   385     width: 80%;

   386     margin-left: auto;

   387     margin-right: auto;

   388     font-family: $page_font

   389     $entry_colors

   390     padding: 0px 1em;

   392 }

   394 /* General page background */

   395 body {

   396     margin: 0;

   397     font-family: $page_font;

   398     $page_colors

   399 }

   401 html body {

   402     margin-left: $*margins_size$*margins_unit;

   403     margin-right: $*margins_size$*margins_unit;

   404     }

   406 /* Modules */

   407 .module h2 {

   408     $module_title_font

   409 }

   411 .module-content {

   412     $module_font

   413 }

   415 /*

   416  * Journal Header

   417  */

   419 #header {

   420     padding: 10px;

   421     color: $*color_page_title ;

   422     background-color: $*color_header_background ;

   423 }

   425 #header h1#title {

   426     font-weight: bold;

   427     margin-bottom: 0;

   428     $page_title_font

   429 }

   431 #header h2#subtitle {

   432     font-style: italic;

   433     margin-top: 0;

   434     $page_subtitle_font

   435 }

   437 #header h2#pagetitle {

   438     $page_subtitle_font

   439 }

   441 #header h2#pagetitle:before {

   442     content: "This page: ";

   443 }

   445 /* Navigation at top/bottom of recent entries page */

   446 .navigation {

   447     margin-top: 10px;

   448 }

   450 .navigation .inner ul:before {

   451     content: "Navigation: ";

   452 }

   454 .navigation ul {

   455     clear: left;

   456     list-style: none;

   457     font-weight: bold;

   458     padding-left: 0;

   459 }

   461 .navigation .inner ul li {

   462     display: inline;

   463 }

   465 .navigation ul li.page-back:after {

   466     content: " posts";

   467 }

   469 /*

   470  * Page Header (module-section-one)

   471  */

   473 ul.userlite-interaction-links {

   474     list-style: none;

   475     padding-left: 0;

   476 }

   478 ul.userlite-interaction-links.icon-links li {

   479     display: inline;

   480 }

   482 .module-section-one {

   483     clear: left;

   484 }

   486 h2.module-header {

   487     margin-top: 0;

   488     margin-bottom: 0;

   489     clear: left;

   490 }

   492 h2.module-header a {

   493     text-decoration: none;

   494 }

   496 .module-navlinks ul li {

   497     display: inline;

   498 }

   500 .module-tags_list ul.module-list {

   501     list-style: none;

   502     padding-left: 0;

   503     display: inline;

   504 }

   506 .tags_cloud li, .module-tags_cloud li {

   507     display: inline;

   508     list-style-type: none;

   509 }

   511 .module-tags_list ul.module-list li {

   512     display: inline;

   513 }

   515 .module-typelist .manage-link:before,

   516 .module-tags_list .manage-link:before,

   517 .module-tags_multilevel .manage-link:before {

   518     content: "(";

   519 }

   521 .module-typelist .manage-link:after,

   522 .module-tags_list .manage-link:after,

   523 .module-tags_multilevel .manage-link:after {

   524     content: ")";

   525 }

   527 /*

   528  * Single Post and Comment pages

   529  */

   531 #primary .entry, #primary .comment {

   532     position: relative;

   533 }

   535 .comment-title {

   536     $comment_title_font

   537     }

   539 .comment-title h4 {

   540     font-size: inherit;

   541     font-weight: inherit;

   542     margin: 0;

   543     padding: 0;

   544 }

   546 /* Entry header */

   548 .has-userpic .entry .header {

   549     margin-bottom: 1em;

   550 }

   552 .entry {

   553     border-top: solid 2px $*color_page_border;

   554 }

   556 .entry .entry-title {

   557     $entry_title_font

   558     $entrytitle_padding

   559 }

   561 .entry .metadata-label {

   562     font-weight: bold;

   563 }

   565 .entry .metadata-label:first {

   566     text-transform: uppercase;

   567 }

   569 .entry .metadata ul {

   570     list-style: none;

   571     padding-left: 0;

   572 }

   574 .entry .metadata {

   575     margin-top: 1em;

   576     position: relative;

   577 }

   579 .entry .metadata.top-metadata {

   580     margin-top: 0;

   581 }

   583 .entry h3.entry-title {

   584     font-size: 2em;

   585 }

   587 .entry h3.entry-title a {

   588     text-decoration: none;

   589 }

   591 .entry .contents .userpic a img {

   592     border: 0;

   593     margin-bottom: 10px;

   594 }

   596 .has-userpic .entry .poster {

   597     top:-35px;

   598     position:relative;

   599 }

   601 /* Main body of a post */

   602 /* Pushed down in order to accomodate the header being next to the icon. */

   603 .entry .contents {

   604     position: relative;

   605     bottom: $entry_contentsfooter_shift;

   606 }

   608 /* Single post metadata links location/etc. */

   609 .entry .footer {

   610     position: relative;

   611     bottom: $entry_contentsfooter_shift;

   612 }

   614 /* Entry/Comment links */

   615 ul.entry-interaction-links, ul.entry-management-links,

   616 ul.comment-management-links, ul.comment-interaction-links {

   617     list-style: none;

   618     padding-left: 0;

   619     margin-bottom: 10px;

   620     margin-top: 10px;

   621 }

   623 /* entries w/o icons (especially feeds) needs to be styled separately */

   625 .ljsyndicationlink {

   626     margin-top: 1em;

   627 }

   629 #primary .no-userpic .header {

   630     position: static;

   631     padding-bottom: 1em;

   632 }

   634 .no-userpic .poster .entry-poster {

   635     position: static;

   636 }

   638 .no-userpic .entry .contents {

   639     position: static;

   640 }

   642 .no-userpic .entry .footer {

   643     position: static;

   644 }

   646 /*

   647  * Calendar/Archive page

   648  * NB: This is horribly inaccessible so mostly I just have trashed/hidden it :)

   649  */

   651 #archive-year table.month {

   652     display: none;

   653 }

   655 #archive-year .month .header h3,

   656 #archive-year .month .footer a {

   657     margin-left: 0;

   658     float: left;

   659     clear: left;

   660 }

   662 /*

   663  * Comments

   664  */

   665 #comments .userpic a img, .comment-wrapper .userpic a img  {

   666     border: 0;

   667     margin-bottom: 10px;

   668 }

   670 #comments .comment-content, .comment-wrapper .comment-content {

   671     margin-top: 1em;

   672     margin-bottom: 1em;

   673 }

   675 ul.entry-interaction-links li, ul.entry-management-links li,

   676 ul.comment-interaction-links li, ul.comment-management-links li {

   677     display: inline;

   678     font-weight: bold;

   679 }

   681 .tag {

   682     margin-top: 1em;

   683 }

   685 .tag ul {

   686     list-style: none;

   687     display: inline;

   688     padding-left: 0;

   689 }

   691 .tag ul li {

   692     display: inline;

   693 }

   695 /*

   696  * page footer

   697  */

   699 .module-credit .module-content dl dt, .module-credit .module-content dl dd {

   700        display: inline;

   701        margin-left: 0;

   702 }

   704 .module-section-one {

   705     padding-top: 1em;

   706 }

   708 .module-section-two {

   709     border-top: solid $*color_page_border 2px;

   710     padding-top: 1em;

   711 }

   713 ul.module-list {

   714     list-style: none;

   715     padding-left: 0;

   716 }

   718 module-section-two ul.module-list li {

   719     display: inline;

   721 }

   723 .page-top {

   724     text-align: right;

   725     margin-bottom: 10px;

   726 }

   728 /*

   729  * icons page

   730  */

   732 .sorting-options ul {

   733     list-style: none;

   734     padding-left: 0;

   735     }

   737 .sorting-options ul li {

   738     display: inline;

   739     }

   741 .page-icons .icon {

   742     margin: 1em 0;

   743     }

   745 .icon-image {

   746     float: left;

   747     clear: left;

   748     margin-bottom: .25em;

   749     min-width: 100px;

   750     padding-right: 1em;

   751     }

   753 .icon-info {

   754     min-height: 100px;

   755     }

   757 .icon-info span {

   758     font-weight: bold;

   759     }

   761 .icon-info .default {

   762     text-decoration: underline;

   763     }

   765 .icon-info .keywords ul {

   766     display: inline;

   767     list-style: none;

   768     padding-left: 0;

   769     }

   771 .icon-info .keywords ul li {

   772     display: inline;

   773     padding: 0 .25em 0 0;

   774     }

   776 $userpic_css

   778 /* End of CSS file */""";

   779 }

author	fu
	Fri Jan 27 17:59:59 2012 +0800
changeset 4240	5bab31c9f015
parent 4213	9bf2ee057539
child 4302	4fc7eee083ff
permissions	-rw-r--r--