layerinfo type = "layout";
layerinfo name = "Tranquility III";
layerinfo redist_uniq = "tranquilityiii/layout";
layerinfo author_name = "branchandroot";
layerinfo des = "Inspired by Tranquility II, by Matthew Vince.";
layerinfo lang = "en";

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

##===============================
## Presentation
##===============================

set layout_type = "two-columns-left";
set userpics_position = "right";
set entry_management_links = "text";
set comment_management_links = "text";

##===============================
## Colors
##===============================

propgroup colors_child {
    property use color_page_details_text;
    }

set color_page_details_text = "#999";

##===============================
##Text
##===============================

set text_entry_prev = "Previous";
set text_entry_next = "Next";
set text_mem_add = "Memory";
set text_watch_comments = "Track";
set text_unwatch_comments = "Untrack";
set text_tell_friend = "Share";
set text_post_comment = "Reply";
set text_post_comment_friends = "Reply";

##===============================
## Functions
##===============================

# Add title to navigation module

function print_module_navlinks() {
    var Page p = get_page();
    var string title = "Navigation";
    open_module("navlinks", "$title", "");
    var string{}[] links = [];
    foreach var string k ($p.views_order) {
        var string class = "list-item-$k";
        var string css = """ class="$k" """;
        if ($p.view == $k) { $css = """ class="current $k" """; }
        $links[size $links] = { "class" => $class, "item" => """<a href="$p.view_url{$k}"$css>"""+lang_viewname($k)+"""</a>""" };
    }
    print_module_list($links);
    close_module();
}

##===============================
## Stylesheet
##===============================

function print_stylesheet () {
var string medium_media_query = generate_medium_media_query();

var string userpic_css = "";
if ($*userpics_position == "left") {
    $userpic_css = """
        .has-userpic .entry .userpic {
            float: left;
            margin: 0 1em .5em 0;
            }

        .has-userpic .comment .userpic {
            float: left;
            margin: .5em .5em .5em 0;
            }
    """;
} elseif ($*userpics_position == "right") {
    $userpic_css = """
        .has-userpic .entry .userpic {
            float: right;
            margin: 0 0 .5em 1em;
            }
        .has-userpic .comment .userpic {
            float: right;
            margin: .5em 0 .5em .5em;
            }
    """;
}

"""

/* Tranquility III
/* by branchandroot
******************************/

/* General
******************************/

body {
    margin: 0;
    }

blockquote {
    border-left: 6px double $*color_entry_border;
    margin: 1em 1em .5em;
    padding: .5em .75em;
    }

a:hover {text-decoration: none; }

dl dt { font-weight: bold; }

/* Page Containers
******************************/

#canvas {
    background-color: $*color_page_background;
    padding: 1em 8%;
    }

#header { padding: .5em 1em; }

#footer {
    padding: 1em;
    margin: 1em;
    }

/* Header
******************************/

#header {
    margin: 1em;
    }

#title a {
    color: $*color_page_title;
    }

#title,
#subtitle,
#pagetitle {
    padding: 0;
    margin: .5em 0;
    }

#title { font-size: x-large; }

#subtitle { font-size: large; }

#pagetitle { font-size: medium; }

/* Main Column
******************************/

#primary > .inner:first-child {
    background-color: $*color_entry_background;
    margin: 1em;
    padding: 2em;
    }

.navigation { text-align: right; }

.navigation ul {
    display: inline;
    margin: 0;
    padding: .25em;
    }

/* Entries
******************************/

.entry-wrapper { margin-bottom: 1em; }

.entry-wrapper .separator-after {
    border-bottom: 1px solid;
    height: 2em;
    }

.entry { border: none; }

.entry-content li { margin-left: 1em; }

.entry-content hr {
    display: block;
    margin: 1em 10%;
    }

.entry .header { padding: .5em 0; }

.entry .datetime { font-size: small; }

$userpic_css

.entry .entry-poster {
    display: block;
    margin-top: .5em;
    }

.entry-content { margin-top: 1em; }

.metadata {
    clear: both;
    font-size: small;
    margin: 1em 0 0;
    }

.metadata.top-metadata {
    clear: none;
    margin-top: 1em;
    }

.metadata-label { font-style: italic; }

.metadata ul {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
    }

.metadata ul li {
    margin-left: 0;
    padding-left: 0;
    }

.entry .footer {
    clear: both;
    margin: .5em 0 0;
    padding-bottom: .5em;
    text-align: right;
    }

.entry .footer > .inner:first-child {
    font-size: small;
    padding: 1px;
    } /* float uneveness fix */

.entry .tag {
    padding: 0 .5em 1em 0;
    text-align: left;
    }

.entry .tag-text { font-weight: bold; }

ul.entry-management-links {
    display: inline;
    margin-bottom: .5em;
    margin-top: .25em;
    }

ul.entry-interaction-links {
    display: inline;
    margin-bottom: .5em;
    margin-right: .5em;
    margin-top: 1em;
    }

ul.entry-management-links li,
ul.entry-interaction-links li {
    border-left: 1px solid;
    padding-left: .5em;
    }

ul.entry-management-links li.first-item {
    border-left: none;
    padding-left: .25em;
    }

ul.entry-interaction-links li.entry-readlink { font-weight: bold; }

.page-entry .entry-management-links,
.page-entry .entry-interaction-links {
    display: block;
    }

.page-entry .entry-management-links { text-align: left; }

.page-entry .entry-interaction-links { text-align: right; }

.page-entry .entry-interaction-links li.first-item { border-left: none; }

/* Comments
******************************/

.comment { padding: .5em; background-color: $*color_entry_background; }

#comments .separator-after {
    border-top: 1px solid;
    height: 1em;
    }

.partial .comment {
    line-height: 1.75em;
    padding: 0;
    }

.partial .comment-title {
   display: inline;
   margin: 0;
   margin-right: .2em;
   }

.partial .comment-poster:before {
   content: "- ";
   }

.comment .poster-ip {
    color: $*color_page_details_text;
    font-size: small;
    }

.comment-content,
.comment .edittime {
    margin-top: 1em;
    }

.comment .header .datetime {
    font-size: small;
    }

.comment .multiform-checkbox {
    color: $*color_entry_text;
    display: block;
    font-size: small;
    text-align: right;
    }

.comment .footer {
    clear: both;
    margin: .5em 0;
    text-align: right;
    }

.comment .footer > .inner:first-child {
    font-size: small;
    padding: 1px;
    } /*float uneveness fix */

.comment .multiform-checkbox { display: block; }

.comment-management-links,
.comment-interaction-links {
    display: inline;
    }

ul.comment-management-links li,
ul.comment-interaction-links li {
    border-left: 1px solid;
    padding-left: .5em;
    }

ul.comment-management-links li.first-item { border-left: none; }

ul.comment-interaction-links li.reply { font-weight: bold; }

.bottomcomment,
.comments-message {
    padding: 1px;
    }

.bottomcomment .entry-management-links,
.bottomcomment .entry-interaction-links {
    margin: .25em 0 .5em;
    }

.comment-pages { text-align: center; }

#qrformdiv table { margin: .5em; }

/* Archive Pages
******************************/

#archive-year .navigation {
    margin-bottom: 2em;
    text-align: left;
    }

div.month { margin: 1em 0 2em; }

table.month td,
table.month th {
    border-color: $*color_page_details_text;
    vertical-align: top;
    }

.month caption { display: none; }

#archive-year .month .footer {
    padding: .5em;
    text-align: center;
    }

#archive-month .navigation {
    text-align: center;
    }

.month .tag-text { font-style: italic; }

.month h3.entry-title { font-weight: bold; }

/* Tags Page
******************************/

.tags-container { margin: 1em 2em; }

/* Icons Page
******************************/

.icons-container { margin: 1em 2em; }

.sorting-options ul { padding-left: 0; }

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

/* Sidebars
******************************/

#secondary a,
#tertiary a {
    color: $*color_module_link;
    }

#secondary a:visited,
#tertiary a:visited {
    color: $*color_module_link_visited;
    }

#secondary a:hover,
#tertiary a:hover {
    color: $*color_module_link_hover;
    }

#secondary a:active,
#tertiary a:active {
    color: $*color_module_link_active;
    }

#secondary > .inner:first-child,
#tertiary > .inner:first-child {
    background-color: $*color_module_background;
    color: $*color_module_text;
    margin: 1em;
    padding: 0;
    }

.module {
    margin: 0 1em 1em;
    padding: .25em;
    }

@media $medium_media_query {
    .two-columns-left #tertiary .separator-after,
    .two-columns-right #tertiary .separator-after {
        clear: both;
        }

    .two-columns-left #tertiary .module,
    .two-columns-right #tertiary .module {
        margin: .5em 1.5em;
        }
}

.module-header {
    font-size: large;
    margin: 0;
    padding: .5em 0;
    }

#secondary .module-header a,
#tertiary .module-header a,
#secondary .module-header a:visited,
#tertiary .module-header a:visited {
    color: $*color_module_text;
    }

.module-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

.module-content ul.userlite-interaction-links { margin-top: .5em; }

.module-calendar table { font-size: small; }

.any-column .module-calendar .module-content,
.any-column .module-syndicate .module-content { text-align: left; }

.module-tags_multilevel ul ul { margin-left: 1em; }

""";
}