layerinfo "type" = "layout";

layerinfo "name" = "EasyRead";

layerinfo redist_uniq = "easyread/layout";

layerinfo author_name = "rb";

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.";

layerinfo author_email = "ricky@notdoneliving.net";

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

##===============================

## Display settings - general

##===============================

propgroup presentation {

    property use num_items_recent;

    property use num_items_reading;

    property use use_journalstyle_entry_page;

    property use layout_type;

    property use tags_page_type;

    property use margins_size;

    property use margins_unit;

    property use userpics_style_group;

    property use userpics_position;

    property use entry_metadata_position;

    property use use_custom_friend_colors;

    property use use_shared_pic;

    property use userlite_interaction_links;

    property use entry_management_links;

    property use comment_management_links;

    property use reg_firstdayofweek;

    property use entry_datetime_format_group;

    property use comment_datetime_format_group;

}

set layout_type = "one-column-split";

set use_custom_friend_colors = false;

set custom_foreground_element = "subject";

set custom_background_element = "subject";

##===============================

## Journal style - colors

##===============================

propgroup colors {

    property use color_page_background;

    property use color_page_text;

    property use color_page_link;

    property use color_page_link_active;

    property use color_page_link_visited;

    property use color_page_title;

    property use color_header_background;

    property use color_entry_background;

    property use color_entry_text;

}

##===============================

## Display settings - fonts

##===============================

propgroup fonts {

    property use font_base;

    property use font_fallback;

    property use font_base_size;

    property use font_base_units;

    property use font_journal_title;

    property use font_journal_title_size;

    property use font_journal_title_units;

    property use font_journal_subtitle;

    property use font_journal_subtitle_size;

    property use font_journal_subtitle_units;

    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;

    property use font_module_text;

    property use font_module_text_size;

    property use font_module_text_units;

}

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

set font_base_size = "1";

set font_base_units = "em";

set font_fallback = "sans-serif";

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

set font_journal_title_size = "3";

set font_journal_title_units = "em";

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

set font_journal_subtitle_size = "1.5";

set font_journal_subtitle_units = "em";

##===============================

## Display settings - modules

##===============================

propgroup modules {

    property use module_userprofile_group;

    property use module_navlinks_group;

    property use module_customtext_group;

    property use module_calendar_group;

    property use module_pagesummary_group;

    property use module_tags_group;

    property use module_links_group;

    property use module_syndicate_group;

    property use module_time_group;

    property use module_poweredby_group;

    property use module_credit_group;

    property use module_search_group;

    property use module_cuttagcontrols_group;

}

# explicitly define what sections the layout has available

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

##===============================

## Custom CSS

##===============================

propgroup customcss {

    property use external_stylesheet;

    property use include_default_stylesheet;

    property use linked_stylesheet;

    property use custom_css;

}

propgroup text {

##===============================

## Text - main navigation

##===============================

    property use text_view_recent;

    property use text_view_friends;

    property use text_view_network;

    property use text_view_archive;

    property use text_view_userinfo;

    property use text_view_memories;

    property use text_view_tags;

##===============================

## Text - entry comment-related

##===============================

    property use text_post_comment;

    property use text_max_comments;

    property use text_read_comments;

    property use text_post_comment_friends;

    property use text_read_comments_friends;

    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_xpost;

    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_permalink;

    property use text_stickyentry_subject;

    property use text_module_customtext;

    property use text_module_customtext_content;

    property use text_module_customtext_url;

}

set module_userprofile_section = "one";

set module_pagesummary_section = "one";

set module_navlinks_section = "two";

set module_tags_section = "two";

set module_tags_opts_type = "cloud";

set module_links_section = "two";

set module_customtext_section = "two";

set module_customtext_show = false;

set module_syndicate_section = "two";

set module_credit_section = "two";

set module_time_section = "two";

set module_poweredby_section = "two";

set module_calendar_section = "two";

set module_calendar_show = false;

set module_userprofile_order = 1;

set module_pagesummary_order = 2;

set module_navlinks_order = 10;

set module_tags_order = 11;

set module_links_order = 12;

set module_customtext_order = 13;

set module_syndicate_order = 14;

set module_credit_order = 15;

set module_time_order = 16;

set module_poweredby_order = 17;

set module_search_order = 19;

set module_cuttagcontrols_order = 20;

set module_calendar_order = 18;

function Page::print()

{

    """<!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""";

    $this->print_head();

    $this->print_stylesheets();

    $this->print_head_title();

    """</head>""";

    $this->print_wrapper_start();

    $this->print_control_strip();

    """

    <div id="canvas">

        <div class="inner">

            <div id="header">

                <div class="inner">

                    """;

                    $this->print_global_title();

                    $this->print_global_subtitle();

                    $this->print_title();

    """

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

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

            <div id="content">

                <div class="inner">

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

                        """;

                        $this->print_module_section("one");

    """

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

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

                        """; 

                        $this->print_body();

    """

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

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

                        """;

                        $this->print_module_section("two");

    """

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

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

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

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

    """;

    """

    <div id="footer">

        <div class="inner">

            """;

            print safe """

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

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

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

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

    """;

    $this->print_wrapper_end();

    """</html>""";

}

function Page::print_default_stylesheet {

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

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

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

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

    var string page_title_colors = generate_color_css($*color_page_title, 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 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_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 entry_contentsfooter_shift = "";

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

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

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

    var string entry_header_margin = "";

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

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

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

    var string comment_header_margin = "";

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

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

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

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

    var string userpic_css = "";

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

        $userpic_css = """

        .has-userpic .entry .header {

            margin-left: $entry_header_margin;

            }

        .has-userpic .comment .header {

            margin-left: $comment_header_margin;

            }

        .has-userpic .entry .poster {

            margin-left: $entry_header_margin;

            }

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

            float: left;

            margin-right: 10px;

            }

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

            clear: left;

            }

        """;

    }

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

        $userpic_css = """

        .has-userpic .entry .header {

            margin-right: $entry_header_margin;

            }

        .has-userpic .comment .header {

            margin-right: $comment_header_margin;

            }

        .has-userpic .entry .poster {

            margin-right: $entry_header_margin;

            }

        .has-userpic .entry .contents .userpic {

            text-align: right;

            }

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

            float: right;

            margin-left: 10px;

            }

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

            clear: right;

            }

        """;

    }

"""/* Globals */

ul {

    margin-top: 0;

}

a {

    $page_link_colors

}

a:visited {

    $page_link_visited_colors

}

a:focus, a:active {

    $page_link_active_colors

}

q { font-style: italic;

}

/* All posts & all navigation */

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

    width: 80%;

    margin-left: auto;

    margin-right: auto;

    font-family: $page_font

    $entry_colors

    padding: 0px 1em;

}

/* General page background */

body {

    margin: 0;

    font-family: $page_font;

    $page_colors

}

html body {

    margin-left: $*margins_size$*margins_unit;

    margin-right: $*margins_size$*margins_unit;

    }

/* Modules */

.module h2 {

    $module_title_font

}

.module-content {

    $module_font

}

/*

 * Journal Header

 */

#header {

    padding: 10px;

    color: $*color_page_title ;

    background-color: $*color_header_background ;

}

#header h1#title {

    font-weight: bold;

    margin-bottom: 0;

    $page_title_font

}

#header h2#subtitle {

    font-style: italic;

    margin-top: 0;

    $page_subtitle_font

}

#header h2#pagetitle {

    $page_subtitle_font

}

#header h2#pagetitle:before {

    content: "This page: ";

}

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

.navigation {

    margin-top: 10px;

}

.navigation .inner ul:before {

    content: "Navigation: ";

}

.navigation ul {

    clear: left;

    list-style: none;

    font-weight: bold;

    padding-left: 0;

}

.navigation .inner ul li {

    display: inline;  

}

.navigation ul li.page-back:after {

    content: " posts";

}

/*

 * Page Header (module-section-one)

 */

ul.userlite-interaction-links {

    list-style: none;

    padding-left: 0;

}

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

    display: inline;

}

.module-section-one {

    clear: left;

}

h2.module-header {

    margin-top: 0;

    margin-bottom: 0;

    clear: left;

}

h2.module-header a {

    text-decoration: none;

}

.module-navlinks ul li {

    display: inline;

}

.module-tags_list ul.module-list {

    list-style: none;

    padding-left: 0;

    display: inline;

}

.tags_cloud li, .module-tags_cloud li { 

    display: inline;

    list-style-type: none; 

}

.module-tags_list ul.module-list li {

    display: inline;

}

.module-typelist .manage-link:before,

.module-tags_list .manage-link:before,

.module-tags_multilevel .manage-link:before {

    content: "(";

}

.module-typelist .manage-link:after,

.module-tags_list .manage-link:after,

.module-tags_multilevel .manage-link:after {

    content: ")";

}

/*

 * Single Post and Comment pages

 */

#primary .entry, #primary .comment {

    position: relative;

}

.comment-title {

    $comment_title_font

    }

.comment-title h4 {

    font-size: inherit;

    font-weight: inherit;

    margin: 0;

    padding: 0;

}

/* Entry header */

.has-userpic .entry .header {

    margin-bottom: 1em;

}

.entry {

    border-top: solid 2px $*color_page_border;

}

.entry .entry-title {

    $entry_title_font

    $entrytitle_padding

}

.entry .metadata-label {

    font-weight: bold;

}

.entry .metadata-label:first {

    text-transform: uppercase;

}

.entry .metadata ul {  

    list-style: none;

    padding-left: 0;

}

.entry .metadata {

    margin-top: 1em;

    position: relative;

}

.entry .metadata.top-metadata {

    margin-top: 0;

}

.entry h3.entry-title {

    font-size: 2em;

}

.entry h3.entry-title a {

    text-decoration: none;

}

.entry .contents .userpic a img {

    border: 0;

    margin-bottom: 10px;

}

.has-userpic .entry .poster {

    top:-35px;

    position:relative;

}

/* Main body of a post */

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

.entry .contents {

    position: relative;

    bottom: $entry_contentsfooter_shift;

}

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

.entry .footer {

    position: relative;

    bottom: $entry_contentsfooter_shift;

}

/* Entry/Comment links */

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

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

    list-style: none;

    padding-left: 0;

    margin-bottom: 10px;

    margin-top: 10px;

}

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

.ljsyndicationlink {

    margin-top: 1em;

}

#primary .no-userpic .header {

    position: static;

    padding-bottom: 1em;

}

.no-userpic .poster .entry-poster {

    position: static;

}

.no-userpic .entry .contents {

    position: static;

}

.no-userpic .entry .footer {

    position: static;

}

/*

 * Calendar/Archive page

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

 */

#archive-year table.month {

    display: none;

}

#archive-year .month .header h3,

#archive-year .month .footer a {

    margin-left: 0;

    float: left;

    clear: left;

}

/*

 * Comments

 */

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

    border: 0;

    margin-bottom: 10px;

}

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

    margin-top: 1em;

    margin-bottom: 1em;

}

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

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

    display: inline;

    font-weight: bold;

}

.tag {

    margin-top: 1em;

}

.tag ul {

    list-style: none;

    display: inline;

    padding-left: 0;

}

.tag ul li {

    display: inline;

}

/*

 * page footer

 */

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

       display: inline;

       margin-left: 0;

}

.module-section-one {

    padding-top: 1em;

}

.module-section-two {

    border-top: solid $*color_page_border 2px;

    padding-top: 1em;

}

ul.module-list {

    list-style: none;

    padding-left: 0;

}

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

    display: inline;

}

.page-top {

    text-align: right;

    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;

    padding: 0 .25em 0 0;

    }

$userpic_css

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

}