layerinfo type = "layout"; layerinfo name = "Practicality"; layerinfo redist_uniq = "practicality/layout"; layerinfo author_name = "timeasmymeasure"; layerinfo author_email= "timeasmymeasure@gmail.com"; layerinfo lang = "en"; ##=============================== ## Layout ##=============================== set layout_authors = [ { "name" => "timeasmymeasure", "type" => "user" } ]; set layout_type = "two-columns-left"; set userpics_position = "right"; set custom_control_strip_colors = "on_no_gradient"; ##=============================== ## Colors ##=============================== propgroup colors_child { property use color_header_link; property use color_header_link_active; property use color_header_link_hover; property use color_header_link_visited; } ##=============================== ## Fonts ##=============================== set font_base = "'Trebuchet MS', Arial"; set font_fallback = "sans-serif"; set font_base_size = "1"; set font_base_units = "em"; set font_journal_title = "'Lucida Sans'"; set font_journal_title_size = "1.8"; set font_journal_title_units = "em"; set font_journal_subtitle = "'Lucida Sans'"; set font_journal_subtitle_size = "1.3"; set font_journal_subtitle_units = "em"; set font_entry_title = "'Lucida Sans'"; set font_entry_title_size = "1.37"; set font_entry_title_units = "em"; set font_comment_title_size = "1.2"; set font_comment_title_units = "em"; set font_module_heading = "'Lucida Sans'"; set font_module_heading_size = "1.37"; set font_module_heading_units = "em"; ##=============================== ## Modules ##=============================== set module_time_section = "two"; set module_poweredby_section = "two"; property string module_navlinks_section_override { values = "none|(none)|header|Header|one|Main Module Section|two|Secondary Module Section"; grouped = 1; } set grouped_property_override = { "module_navlinks_section" => "module_navlinks_section_override" }; set module_navlinks_section = "one"; function Page::print() { """\n\n\n"""; $this->print_meta_tags(); $this->print_head(); $this->print_stylesheets(); $this->print_head_title(); """"""; $this->print_wrapper_start(); $this->print_control_strip(); """
"""; if ($*layout_type == "one-column-split") { """
"""; $this->print_module_section("one"); """
"""; } """
"""; $this->print_body(); """
"""; if ($*layout_type != "one-column-split") { """
"""; $this->print_module_section("one"); """
"""; } """
"""; $this->print_module_section("two"); """
"""; """
"""; $this->print_wrapper_end(); """"""; } ##=============================== ## Stylesheet ##=============================== function print_stylesheet () { var string medium_media_query = generate_medium_media_query(); var string small_media_query = generate_small_media_query(); var string make_invisible = generate_invisible_css(); 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 entry_header_margin = ""; if ( $*entry_userpic_style == "" ) { $entry_header_margin = "135px"; } elseif ( $*entry_userpic_style == "small" ) { $entry_header_margin = "110px"; } elseif ( $*entry_userpic_style == "smaller" ) { $entry_header_margin = "85px"; } var string comment_header_margin = ""; if ( $*comment_userpic_style == "" ) { $comment_header_margin = "135px"; } elseif ( $*comment_userpic_style == "small" ) { $comment_header_margin = "110px"; } elseif ( $*comment_userpic_style == "smaller" ) { $comment_header_margin = "85px"; } var string userpic_css = ""; if ($*userpics_position == "left") { $userpic_css = """ /* Float placeholder for userpic */ .has-userpic .entry .contents > .inner::before, .has-userpic .comment .contents > .inner::before { content: ""; display: block; position: static; width: 140px; height: 100px; float: left; } .has-userpic .entry .userpic, .has-userpic .comment .userpic { position: absolute; left: 10px; top: -20px; } .has-userpic .entry .header, .has-userpic .comment .header { text-align: right; } .has-userpic .entry .header .datetime { display: block; margin-left: $entry_header_margin; } .has-userpic .comment .header .datetime { display: block; margin-left: $comment_header_margin; } """; } elseif ($*userpics_position == "right") { $userpic_css = """ /* Float placeholder for userpic */ .has-userpic .entry .contents > .inner::before, .has-userpic .comment .contents > .inner::before { content: ""; display: block; position: static; width: 140px; height: 100px; float: right; } .has-userpic .entry .userpic, .has-userpic .comment .userpic { position: absolute; right: 10px; top: -20px; } .has-userpic .entry .header .datetime { display: block; margin-right: $entry_header_margin; } .has-userpic .comment .header .datetime { display: block; margin-right: $comment_header_margin; } """; } var string responsive_indent_css = ""; if ($*comment_indent_style == "responsive") { $responsive_indent_css = """ /* Responsive comment thread indentation */ .comment-thread { margin-top: 7px; } @media $small_media_query { /* Mobile indents */ .comment-depth-indent-mobile { margin-left: 10px; } /* Establish an anchoring containing block for thread lines */ .comment-thread { position: relative; } /* Once the thread lines absolute themselves off the page, don't scroll for them. Content shouldn't be affected because it gets overflow-x:auto-ed well before becoming the section container's problem. Make sure to set comment_indent_limit_mobile low enough to work for 320px viewport widths, because if there's slop it'll get cut off. */ #comments { overflow-x: hidden; } /* Go-behind thread lines for non-indented threads */ .comment-thread::before { content: ""; width: 2px; /* Leave a gap between threads, so it's easier to see the /transition between two replies to the same parent */ height: 100%; display: block; position: absolute; background-color: ${*color_entry_border}; z-index: -1; /* Since the thread blocks stay at the same indent level from here on out, we need to manually indent each add'l line. */ left: calc( (var(--comment-depth) - var(--comment-indent-limit-mobile)) * 10px); top: 0; border-radius: 1px; } /* On-the-left thread lines for threads that still get indented */ .comment-thread.comment-depth-indent-mobile::before { left: -10px; /* Let the compounding margins handle the indent */ } /* Skip the first one */ .comment-thread.comment-depth-1::before { display:none; } /* Color every fifth one differently for easy counting */ .comment-thread.comment-depth-mod5-1::before { background-color: ${*color_entry_background}; } /* Hide numeric indicators if indent is working */ .thread-depth.indent-mobile { $make_invisible } } @media $medium_media_query { .comment-depth-indent-desktop { margin-left: 20px; } .thread-depth.indent-desktop { $make_invisible } } .comment-depth-1 { margin-left: 0; } """; } """ /*--------------------*/ /*--- Practicality ---*/ /*--------------------*/ /*--- Main ---*/ body { margin: 0; } a, a:link, a:visited { text-decoration: none; } p { margin: 1em 0; } input, textarea { background: $*color_entry_background; border: 1px solid $*color_page_text; color: $*color_entry_text; } blockquote { background: $*color_page_background; border-bottom: 3px solid $*color_entry_border; color: $*color_page_text; margin: 1em 1em 1.5em 3em; padding: 10px; width: 85%; } ul { list-style: square inside; margin: .2em 0 0 2.5em; } ol { list-style: decimal inside; margin: .2em 0 0 2.5em; } /*--- Main Containers ---*/ #canvas { width: 90%; margin: 0 auto; } @media $small_media_query { #canvas { width: calc(100% - 10px); } } #primary > .inner:first-child { padding: 0; } #secondary > .inner:first-child, #tertiary > .inner:first-child { padding: 0; } @media $medium_media_query { .column-left #primary > .inner:first-child { padding-left: 1em; } .column-right #primary > .inner:first-child { padding-right: 1em; } .three-columns-left #secondary > .inner:first-child, .three-columns-right #secondary > .inner:first-child { padding-right: .5em; } .three-columns-left #tertiary > .inner:first-child, .three-columns-right #tertiary > .inner:first-child { padding-left: .5em; } } /*--- Journal Header ---*/ #header { padding: .1em .5em; } h1#title, h1#title a { color: $*color_page_title; font-variant: small-caps; text-align: right; } h2#subtitle, h2#pagetitle { border: none; color: $*color_page_title; font-variant: small-caps; font-weight: bold; } h2#subtitle { margin: -1em 0 0; text-align: right; } #header .module-navlinks { $page_subtitle_font background: transparent; border: none; color: $*color_header_link; font-variant: small-caps; font-weight: bold; letter-spacing: 0; margin: -1em 0 0; text-align: center; } #header .module-navlinks li { display: inline; padding: 0 1em; } #header .module-navlinks li a { color: $*color_header_link; } #header .module-navlinks li a:active { color: $*color_header_link_active; } #header .module-navlinks li a:hover { color: $*color_header_link_hover; } #header .module-navlinks li a:visited { color: $*color_header_link_visited; } /*--- Journal Navigation ---*/ .navigation { $entry_title_font background: $*color_entry_background; color: $*color_entry_text; border-bottom: 5px solid $*color_entry_border; font-size: 1.2em; font-variant: small-caps; margin: 0 0 15px 0; padding: 5px; } .topnav a, .bottomnav a { color: $*color_entry_title; } .navigation.empty { display: none; } .page-read .navigation.empty { display: block; padding: 10px; } .page-read .navigation.empty ul { margin: 0; padding: 0; } .page-read .navigation.empty ul li { margin: 0; padding: 0; } /*--- Sidebar ---*/ li.page-separator { display: none; } .module { border: none; border-bottom: 5px solid $*color_module_border; margin-bottom: 15px; padding: 10px; } h2.module-header { border-bottom: 1px solid $*color_page_link; color: $*color_module_title; font-variant: small-caps; font-weight: normal; margin: 0 0 10px 0; } h2.module-header a { color: $*color_module_title; } ul.module-list { list-style: none; } ul.module-list li , ul.module-list-item li { padding: 0 0 0 5px; } .module-content .userpic { text-align: center; } .module-content .userpic img { background: $*color_header_background; border: none; padding: 10px; } .journal-name { font-variant: small-caps; margin-top: 5px; text-align: center; } .journal-website-name { font-variant: small-caps; text-align: center; } ul.userlite-interaction-links.icon-links { margin: 5px 0 0; text-align: center; } ul.userlite-interaction-links.icon-links li { margin: 0 auto; } ul.userlite-interaction-links.text-links { padding: 0 0 0 5px; list-style: none; } .module-navlinks { color: $*color_module_title; font-variant: small-caps; font-size: 1.45em; letter-spacing: -.1em; list-style: none; text-align: right; } .module-navlinks a { color: $*color_module_title; } .manage-link { margin: 10px 0 0; text-align: right; } .module-calendar table { text-align: center; } .module-calendar th { background: $*color_page_background; color: $*color_page_text; border: 1px solid $*color_entry_border; padding: 0; } .module-calendar td.empty-day { border: 1px solid $*color_entry_border; } .module-calendar td.entry-day { background: $*color_page_background; border: 1px solid $*color_entry_border; } .module-calendar td.entry-day a { color: $*color_page_link; } .module-calendar td.entry-day a:visited { color: $*color_page_link_visited; } .module-calendar td.entry-day a:hover { color: $*color_page_link_hover; } .module-calendar td.entry-day a:active { color: $*color_page_link_active; } /*--- Entries ---*/ .entry { border: none; border-bottom: 5px solid $*color_entry_border; padding: 10px; margin: 0 0 15px 0; } /* Provide an anchor for absolute positioning of descendents like userpic */ .entry .contents { position: relative; } /* Don't allow one overflowing flist entry to trash the whole page's layout */ .entry .contents > .inner { overflow-x: auto; } .entry-content { margin: 10px 0 0; min-height: 100px; } .entry-content td, .entry-content th { border: 1px solid $*color_entry_border; } .entry .header { $entry_title_font font-size: 1em; padding: 0; } h3.entry-title { font-weight: normal; font-variant: small-caps; } h3.entry-title a, h3.entry-title a:active, h3.entry-title a:hover, h3.entry-title a:visited { color: $*color_entry_title; } .datetime { color: $*color_entry_text; font-size: .75em; font-variant: small-caps; } .datetime a { color: $*color_entry_text; } .has-userpic .entry .userpic { border: none; } .entry .userpic img { background: $*color_header_background; border: none; padding: 10px; } .entry-poster { border-bottom: 1px solid $*color_entry_link; color: $*color_entry_title; display: block; font-size: .8em; font-variant: small-caps; margin-bottom: 10px; } .entry-poster a, .entry-poster a:active, .entry-poster a:hover, .entry-poster a:visited { color: $*color_entry_title; } .metadata { font-size: .85em; font-variant: small-caps; margin: 1em 0 0; text-align: right; } .metadata ul { padding: 0; margin: 0; } .metadata ul li { padding: 0; margin: 0; } .metadata-item-location, .metadata-item-music, .metadata-item-mood, .tag ul { color: $*color_entry_link; text-align: right; } .entry .footer { clear: both; } .tag { margin: 1em 0 .5em 0; font-size: 0.85em; font-variant: small-caps; } .tag ul li { margin: .5em 0 0; text-align: right; } ul.entry-management-links { border-top: 1px solid $*color_entry_border; margin: .5em 0 0; padding: .5em 0 0; text-align: center; } ul.entry-management-links li { margin: 0 auto; text-align: center; } ul.entry-interaction-links { margin: 0; padding: 0; text-align: center; } ul.entry-interaction-links li, ul.entry-management-links li { color: $*color_entry_interaction_links; font-size: 1.3em; font-variant: small-caps; margin: 0 .5em 0 0; padding: 0; } ul.entry-interaction-links a, ul.entry-interaction-links a:active, ul.entry-interaction-links a:hover, ul.entry-interaction-links a:visited, ul.entry-management-links a, ul.entry-management-links a:active, ul.entry-management-links a:hover, ul.entry-management-links a:visited { color: $*color_entry_interaction_links; } /*--- Archive Page ---*/ .month { background: $*color_entry_background; color: $*color_entry_text; border-bottom: 5px solid $*color_entry_border; margin: 0 0 1em 0; padding: 2em; } .month a { color: $*color_entry_link; } .month a:visited { color: $*color_entry_link_visited; } .month a:hover { color: $*color_entry_link_hover; } .month a:active { color: $*color_entry_link_active; } table.month { border-bottom: none; } .month table { margin: auto; width: 100%; } table.month td, table.month th { border: 1px solid $*color_entry_border; } .month caption { display: none; } .month h3 { color: $*color_entry_title; font-size: 1.2em; font-weight: normal; } .month th { background: $*color_page_background; color: $*color_page_text; border: 1px solid $*color_entry_border; text-align: center; } .month td.day { border: 1px solid $*color_entry_border; color: $*color_entry_text; font-weight: normal; } td.day { padding: 1em; } .month td.day-has-entries { background: $*color_page_background; color: $*color_page_text; font-weight: normal; text-align: left; } .month td.day-has-entries p { font-size: 1.14em; font-weight: bold; text-align: right; } .month td.day-has-entries p a { color: $*color_page_link; } .month td.day-has-entries p a:visited { color: $*color_page_link_visited; } .month td.day-has-entries p a:hover { color: $*color_page_link_hover; } .month td.day-has-entries p a:active { color: $*color_page_link_active; } .month dl, .month dt, .month dd { margin: 0; padding: 0; } /*--- Tags Page ---*/ .page-tags .tags-container { background: $*color_entry_background; color: $*color_entry_text; border-bottom: 5px solid $*color_entry_border; padding: .5em; } .page-tags .tags-container a { color: $*color_entry_link; } .page-tags .tags-container a:visited { color: $*color_entry_link_visited; } .page-tags .tags-container a:hover { color: $*color_entry_link_hover; } .page-tags .tags-container a:active { color: $*color_entry_link_active; } .page-tags .tags-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; } .page-tags .tags-container .ljtaglist { list-style: none; 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; } .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; } /*--- Comments ---*/ hr.above-entry-interaction-links, hr.below-reply-container { display: none; } .comment-wrapper { min-width: 14em; } $responsive_indent_css .comment { background: $*color_entry_background; color: $*color_entry_text; border-bottom: 5px solid $*color_entry_border; padding: 1em; } /* Provide an anchor for absolute positioning of descendents like userpic */ .comment .contents { position: relative; } /* Don't allow one overflowing comment to trash the whole page's layout */ .comment .contents > .inner { overflow-x: auto; } .comment a { color: $*color_entry_link; } .comment a:visited { color: $*color_entry_link_visited; } .comment a:hover { color: $*color_entry_link_hover; } .comment a:active { color: $*color_entry_link_active; } .comment-title, .comment-title a { color: $*color_entry_title; font-variant: small-caps; } .comment-content { border-bottom: 1px solid $*color_entry_border; border-top: 1px solid $*color_page_link; min-height: 100px; padding: .5em; } .comment-poster { color: $*color_entry_title; margin-bottom: .5em; font-variant: small-caps; font-size: .8em; } .comment-poster a { color: $*color_entry_title; } .poster-ip { font-variant: small-caps; font-size: .7em; } textarea.textbox { background: $*color_entry_background; color: $*color_entry_text; width: 80% !important; } .has-userpic .comment .userpic { border: none; display: block; } .comment .userpic img { background: $*color_header_background; border: none; padding: 10px; } .comment-management-links ul, .comment-interaction-links ul { display: inline; font-size: 0.8em; font-variant: small-caps; text-align: center; } .comment-management-links li, .comment-interaction-links li { font-size: 1.1em; font-variant: small-caps; text-align: center; } .comment-interaction-links li a, .comment-management-links li a { color: $*color_entry_interaction_links; } #qrform table { border: none !important; } .bottomcomment { background: $*color_entry_background; color: $*color_entry_text; border-bottom: 5px solid $*color_entry_border; margin: .5em 0; padding: .7em; } .bottomcomment a { color: $*color_entry_link; } .bottomcomment a:visited { color: $*color_entry_link_visited; } .bottomcomment a:hover { color: $*color_entry_link_hover; } .bottomcomment a:active { color: $*color_entry_link_active; } /*--- Contextual Pop-ups ---*/ .ContextualPopup { background: $*color_entry_background; border: 1px solid $*color_entry_border !important; border-radius: 0; color: $*color_entry_text; } .ContextualPopup div.Inner a, .ContextualPopup div.Inner a:visited, .ContextualPopup div.Inner a:active { text-decoration: none; } .ContextualPopup a { color: $*color_entry_link; } .ContextualPopup a:visited { color: $*color_entry_link_visited; } .ContextualPopup a:hover { color: $*color_entry_link_hover; } .ContextualPopup a:active { color: $*color_entry_link_active; } .ContextualPopup .Userpic { border: 5px solid $*color_header_background; margin: .5em; padding: 0; } $userpic_css """; }