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 num_items_icons;
    property use use_journalstyle_entry_page;
    property use layout_type;
    property use reverse_sortorder_group;
    property use reg_firstdayofweek;
    property use tags_page_type;
    property use icons_page_sort;
    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 entry_datetime_format_group;
    property use comment_datetime_format_group;
    property use all_entrysubjects;
    property use all_commentsubjects;
    property use custom_control_strip_colors;

}

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;

    property use control_strip_bgcolor;
    property use control_strip_fgcolor;
    property use control_strip_bordercolor;
    property use control_strip_linkcolor;

}

##===============================
## 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;
    property use font_sources;
}
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";
set font_entry_title_size = "2";
set font_entry_title_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;
    property use module_subscriptionfilters_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 {

    property use text_module_userprofile;
    property use text_module_links;
    property use text_module_syndicate;
    property use text_module_tags;
    property use text_module_popular_tags;
    property use text_module_pagesummary;
    property use text_module_active_entries;
    property use text_module_customtext;
    property use text_module_customtext_url;
    property use text_module_customtext_content;
    property use text_module_credit;
    property use text_module_search;
    property use text_module_cuttagcontrols;
    property use text_module_subscriptionfilters;

##===============================
## Text - main navigation
##===============================

    property use text_view_recent;
    property use text_view_friends;
    property use text_view_friends_comm;
    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_read_comments_screened_visible;
    property use text_read_comments_screened;

    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_subscriptionfilters_order = 21;

set module_calendar_order = 18;

function Page::print()
{
    """<!DOCTYPE html>\n<html 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_meta_tags();
    $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_header();
    """
                </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 medium_media_query = generate_medium_media_query();
    var string large_media_query = generate_large_media_query();

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

    print_custom_control_strip_css();

"""/* 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 h1#title a {
    color: $*color_page_title;
    text-decoration: none;
}

#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;
    font-weight: bold;
    padding-left: 0;
}

.navigation ul li {
    display: inline;
}

.navigation ul li.page-back:after {
    content: " posts";
}

/*
 * Page Header (module-section-one)
 */

ul.userlite-interaction-links {
    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 {
    padding-left: 0;
    display: inline;
}

.module-tags_list ul.module-list li {
    display: inline;
}

.tags_cloud li, .module-tags_cloud 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: ")";
}

.search-box {
    max-width:100%;
}

/*
 * Single Post and Comment pages
 */

#primary .entry, #primary .comment {
    position: relative;
}

.comment-wrapper {
    min-width: 15em;
}

.comment-posted {
    font-weight:bold;
}

.comment-title {
    $comment_title_font
    margin: 0;
    }

/* Entry header */

.has-userpic .entry .header {
    margin-bottom: 1em;
    position: relative;
    z-index: 99;
}

.entry {
    border-top: solid 2px $*color_page_border;
}

.entry .entry-title {
    $entry_title_font
    $entrytitle_padding
}

/* ensure comment content stretches out horizontally so it's readable */
.comment-content:before {
    content: "";
    display: block;
    overflow: hidden;
    width: 10em;
}
.comment-content { border-top: 1px transparent solid; } /* for firefox */

/* To constrain the width and prevent layout breaking */
.entry-content img, .comment-content img {
    max-width: 100%;
    height: auto;
}

@media $large_media_query {
    .entry-content img, .comment-content img { max-width: none; }
}

/* Set height to keep spacing */
/* Use standard H3 font size */
.no-subject .entry .entry-title {
    background: none;
    height: 1.17em;
}

.entry h3.entry-title a {
    text-decoration: none;
}

.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 .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
 */

.no-subject .comment .comment-title {
    background: none;
}

#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 {
    display: inline;
    padding-left: 0;
}

.tag ul li {
    display: inline;
}

/*
 * page footer
 */

.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 {
    padding-left: 0;
    }

.sorting-options ul li {
    display: inline;
    }

.icons-container .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-keywords ul {
    display: inline;
    padding-left: 0;
    }

.icon-keywords ul li {
    display: inline;
    }

$userpic_css

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