cuttingcorners.s2

layerinfo "type" = "layout";
layerinfo "name" = "Cutting Corners";
layerinfo author_name = "Nick F";
layerinfo author_email = "nick.fagerlund@gmail.com";
layerinfo des = "A Tabula-Rasa-alike that uses round-cornered cards for everything, avoids overflowing on mobile at all costs, and uses CSS grid for layout.";
layerinfo is_public = 1;
layerinfo source_viewable = 1;

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

propgroup presentation {
    property use layout_type;
    property use num_items_recent;
    property use num_items_reading;
    property use use_custom_friend_colors;
    property use use_shared_pic;
    property use use_journalstyle_entry_page;
    property use margins_size;
    property use margins_unit;
    property use sidebar_width;
    property use medium_breakpoint_width;
    property use large_breakpoint_width;
    property use custom_control_strip_colors;

    property use reverse_sortorder_group;
    property use reg_firstdayofweek;
    property use tags_page_type;
    property use num_items_icons;
    property use icons_page_sort;

    property use all_entrysubjects;
    property use all_commentsubjects;
    property use entry_datetime_format_group;
    property use comment_datetime_format_group;
    property use userpics_style_group;
    property use userpics_position;
    property use entry_metadata_position;
    property use userlite_interaction_links;
    property use entry_management_links;
    property use comment_management_links;

    property use comment_indent_style;
    property use comment_indent_limit_mobile;
    property use comment_indent_limit_desktop;
    property use comment_indent_depth_caption;

    property string rectangle_spacing {des = "Space between major box elements (in rem or px)";}
    property string rectangle_radius {des = "Corner radius for major box elements (in rem or px)";}
    property string breathing_room_full {des = "Space between minor elements (in rem or px)";}
    property string breathing_room_half {des = "Smaller space between minor elements (in rem or px)";}
    property string breathing_room_double {des = "Wider space between minor elements (in rem or px)";}

}

set layout_type = "two-columns-left";
set margins_size = "5";
set margins_unit = "%";
set sidebar_width = "15em";
set userpics_position = "left";
set use_custom_friend_colors = false;
set custom_foreground_element = "userpic_border";
set custom_background_element = "userpic_background";
set rectangle_spacing = ".9rem";
set rectangle_radius = ".3rem";
set breathing_room_full = ".6rem";
set breathing_room_half = ".3rem";
set breathing_room_double = "1.2rem";

set comment_indent_style = "responsive";

##===============================
## 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_hover;
    property use color_page_link_visited;

    property use color_module_background;
    property use color_module_text;
    property use color_module_link;
    property use color_module_link_active;
    property use color_module_link_hover;
    property use color_module_link_visited;
    property use color_module_title_background;
    property use color_module_title;
    property use color_module_border;

    property use color_header_background;
    property use color_page_title;
    property Color color_header_border {des = "Page header border color";}

    property use color_footer_background;
    property use color_footer_link;
    property use color_footer_link_active;
    property use color_footer_link_hover;
    property use color_footer_link_visited;
    property Color color_footer_border {des = "Page footer border color";}

    property use color_entry_background;
    property use color_entry_text;
    property use color_entry_link;
    property use color_entry_link_active;
    property use color_entry_link_hover;
    property use color_entry_link_visited;
    property use color_entry_title_background;
    property use color_entry_title;
    property use color_entry_interaction_links;
    property use color_entry_interaction_links_active;
    property use color_entry_interaction_links_hover;
    property use color_entry_interaction_links_visited;
    property use color_entry_border;

    property use color_comment_title_background;
    property use color_comment_title;

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

# Default to black borders so the cards still show up in minimalist themes.
# Themes can remove specific borders by setting their colors to "".
set color_entry_border = "#000";
set color_module_border = "#000";
set color_header_border = "#000";
set color_footer_border = "#000";

##===============================
## Fonts
##===============================

propgroup fonts {
    property use font_base;
    property use font_fallback;
    property use font_base_size;
    property use font_base_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_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_sources;
    property string font_default_link_decoration {
        des = "Default text-decoration for links";
        note = "Usually 'underline' or 'none', but can be any valid value for the CSS 'text-decoration' property. Used for most links; sometimes overridden for obviously clickable UI elements.";
    }
}

set font_base = """"Avenir Next", Avenir, Lato, Candara, Helvetica, Arial""";
set font_fallback = "sans-serif";
set font_base_size = "1";
set font_base_units = "em";

set font_journal_title_size = "2.2";
set font_journal_title_units = "em";

set font_journal_subtitle_size = "1.3";
set font_journal_subtitle_units = "em";

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_size = "1.37";
set font_module_heading_units = "em";

set font_default_link_decoration = "underline";

##===============================
## Images
##===============================

propgroup images {
    property use image_background_page_group;
    property use image_background_module_group;
    property use image_background_header_group;
    property use image_background_header_height;
    property use image_background_entry_group;
}

##===============================
## Modules
##===============================

propgroup modules {
    property use module_userprofile_group;
    property use module_navlinks_group;
    property use module_calendar_group;
    property use module_links_group;
    property use module_syndicate_group;
    property use module_tags_group;
    property use module_pagesummary_group;
    property use module_active_group;
    property use module_time_group;
    property use module_poweredby_group;
    property use module_customtext_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|Main Module Section|two|Secondary Module Section";

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

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;

    property use text_view_recent;
    property use text_view_archive;
    property use text_view_friends;
    property use text_view_friends_comm;
    property use text_view_network;
    property use text_view_tags;
    property use text_view_memories;
    property use text_view_userinfo;

    property use text_entry_prev;
    property use text_entry_next;
    property use text_edit_entry;
    property use text_edit_tags;
    property use text_mem_add;
    property use text_tell_friend;
    property use text_watch_comments;
    property use text_unwatch_comments;

    property use text_read_comments;
    property use text_read_comments_friends;
    property use text_read_comments_screened_visible;
    property use text_read_comments_screened;
    property use text_post_comment;
    property use text_post_comment_friends;
    property use text_permalink;

    property use text_meta_location;
    property use text_meta_mood;
    property use text_meta_music;
    property use text_meta_xpost;
    property use text_tags;

    property use text_stickyentry_subject;

    property use text_max_comments;
    property use text_skiplinks_back;
    property use text_skiplinks_forward;

    property use text_day_prev;
    property use text_day_next;
}

##===============================
## Custom CSS
##===============================

propgroup customcss {
    property use external_stylesheet;
    property use include_default_stylesheet;
    property use linked_stylesheet;
    property use custom_css;
}

## Add helpful nav to the header

function Page::print_header()
{
    # The bit from core2:
    $this->print_global_title();
    $this->print_global_subtitle();
    $this->print_title();

    # The bit from here:
    # Optional list of emoji to jump places goes here, use CSS to hide on non-mobile
    var string module_jump_id;
    if ($*layout_type == "one-column-split") {
        $module_jump_id = "#tertiary";
    } else {
        $module_jump_id = "#secondary";
    }
"""
<ul id="corners-micro-nav">
<li><a href="$this.view_url{"recent"}" title="recent">📜</a></li>
<li><a href="$this.view_url{"read"}" title="read">👯‍♀️</a></li>
<li><a href="$this.view_url{"network"}" title="network">🌎</a></li>
<li><a href="$this.view_url{"userinfo"}" title="userinfo">🤷🏽‍♀️</a></li>
<li><a href="$module_jump_id" title="Jump to Links/Navs">🔜</a></li>
</ul>
""";
}


function generate_border_color_css (Color border_color) : string
"Returns nothing, or a css border-color: <COLOR>; thing."
{
    var string color_css = "";
    if ($border_color.as_string != "") {
        $color_css = $color_css + "border-color: $border_color;\n";
    }
    return $color_css;
}

function Page::print_default_stylesheet() {
    var string medium_media_query = generate_medium_media_query();
    var string large_media_query = generate_large_media_query();
    # Duplicating logic from core2 generate_media_query, because it only does max-width
        # use the user-provided breakpoint width
        var string small_max_width = $*medium_breakpoint_width;
        # no user-provided breakpoint width, base our min-width as a multiplier on the sidebar width
        if ($small_max_width == "" and $*sidebar_width != "") {
            # set the min width in ems
            $small_max_width = $*sidebar_width->css_multiply_length(3);
        }
        # $*sidebar_width wasn't in a format we expected, fall back to a default
        if ($small_max_width == "") {
            $small_max_width = "40em";
        }
        var string small_media_query = "only screen and (max-width: $small_max_width)";

    # Page/header/footer background vars
    var string page_background = generate_background_css ($*image_background_page_url, $*image_background_page_repeat, $*image_background_page_position, $*color_page_background);
    var string footer_background = generate_background_css( "", "", "", $*color_footer_background );
    var string header_background = generate_background_css ($*image_background_header_url, $*image_background_header_repeat, $*image_background_header_position, $*color_header_background);
    if ($*image_background_header_height > 0) {
        $header_background = """
            $header_background
            height: """ + $*image_background_header_height + """px;""";
    }

    # Entry/module backgrounds
    var string entry_background = generate_background_css ($*image_background_entry_url, $*image_background_entry_repeat, $*image_background_entry_position, $*color_entry_background);
    var string module_background = generate_background_css ($*image_background_module_url, $*image_background_module_repeat, $*image_background_module_position, $*color_module_background);
    var string entry_title_background = generate_color_css(new Color, $*color_entry_title_background, new Color);
    var string comment_title_background = generate_color_css(new Color, $*color_comment_title_background, new Color);
    var string module_title_background = generate_color_css(new Color, $*color_module_title_background, new Color);

    # Page/entry/module colors (excluding border)
    var string page_colors = generate_color_css($*color_page_text, $*color_page_background, new Color);
    var string entry_colors = generate_color_css($*color_entry_text, new Color, new Color);
    var string module_colors = generate_color_css($*color_module_text, new Color, new Color);

    # Borders
    var string module_border = generate_color_css(new Color, new Color, $*color_module_border);
    var string entry_border = generate_color_css(new Color, new Color, $*color_entry_border);
    var string header_border = generate_color_css(new Color, new Color, $*color_header_border);
    var string footer_border = generate_color_css(new Color, new Color, $*color_footer_border);

    var string optional_module_border_color = generate_border_color_css($*color_module_border);
    var string optional_entry_border_color = generate_border_color_css($*color_entry_border);

    # Titles of different objects vars
    var string page_title_colors = generate_color_css($*color_page_title, new Color, new Color);
    var string entry_title_colors = generate_color_css($*color_entry_title, new Color, new Color);
    var string comment_title_colors = generate_color_css($*color_comment_title, new Color, new Color);
    var string module_title_colors = generate_color_css($*color_module_title, new Color, new Color);

    # All link colors vars
    # Page links
    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);
    # Footer links
    var string footer_link_colors = generate_color_css( $*color_footer_link, new Color, new Color );
    var string footer_link_active_colors = generate_color_css( $*color_footer_link_active, new Color, new Color );
    var string footer_link_hover_colors = generate_color_css( $*color_footer_link_hover, new Color, new Color );
    var string footer_link_visited_colors = generate_color_css( $*color_footer_link_visited, new Color, new Color );
    # Entry links
    var string entry_link_colors = generate_color_css($*color_entry_link, new Color, new Color);
    var string entry_link_active_colors = generate_color_css($*color_entry_link_active, new Color, new Color);
    var string entry_link_hover_colors = generate_color_css($*color_entry_link_hover, new Color, new Color);
    var string entry_link_visited_colors = generate_color_css($*color_entry_link_visited, new Color, new Color);
    # Entry interaction links
    var string entry_interaction_link_colors = generate_color_css($*color_entry_interaction_links, new Color, new Color);
    var string entry_interaction_link_active_colors = generate_color_css($*color_entry_interaction_links_active, new Color, new Color);
    var string entry_interaction_link_hover_colors = generate_color_css($*color_entry_interaction_links_hover, new Color, new Color);
    var string entry_interaction_link_visited_colors = generate_color_css($*color_entry_interaction_links_visited, new Color, new Color);
    # Module links
    var string module_link_colors = generate_color_css($*color_module_link, new Color, new Color);
    var string module_link_active_colors = generate_color_css($*color_module_link_active, new Color, new Color);
    var string module_link_hover_colors = generate_color_css($*color_module_link_hover, new Color, new Color);
    var string module_link_visited_colors = generate_color_css($*color_module_link_visited, new Color, new Color);


    # All fonts vars
    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 userpic_flex_direction = $*userpics_position == "left" ? "row" : "row-reverse";

    print_custom_control_strip_css();

    """
/* resets & stuff */

H1, H2, H3 {
    margin: .25em 0;
    padding: .25em 0;
}

h1 {
    font-size: calc(20.3px + 1.14vw);
}
h2 {
    font-size: calc(17.6px + 0.75vw);
}
h3 {
    font-size: calc(16.4px + 0.23vw);
}
h4 {
    font-size: calc(14.5px + 0.1vw);
}

img {
    border: none;
}

hr {
    display: none;
}

body {
    $page_font
    padding: 0;
    margin: 0;
    $page_background
    $page_colors
}

/* Basic elements */

p { margin: 1em 0; }

a {
    $page_link_colors
    text-decoration: $*font_default_link_decoration;
}
a:visited { $page_link_visited_colors }
a:hover { $page_link_hover_colors }
a:active { $page_link_active_colors }

q { font-style: italic; }

ul {
    list-style: disc outside;
    margin: .2em 0 0 2.5em;
}

ol {
    list-style: decimal outside;
    margin: .2em 0 0 2.5em;
}


/* #content layout */

#canvas {
    margin: 0 8px;
}

@media $medium_media_query {
    #canvas {
        margin-left: $*margins_size$*margins_unit;
        margin-right: $*margins_size$*margins_unit;
    }
}

/* Assign named grid areas */
#primary   { grid-area: primary; }
#secondary { grid-area: secondary; }
#tertiary  { grid-area: tertiary; }

#primary, #secondary, #tertiary {
    min-width: 0; /* allow grid to shrink them */
}

/* Grid setup, with default layout (.one-column, small screens) */
#content > .inner {
    display: grid;
    grid-gap: $*rectangle_spacing;
    grid-template-columns: 1fr;
    grid-template-areas:
        "primary"
        "secondary"
        "tertiary";
}

/* Split single column layout: */
.one-column-split #content > .inner {
    grid-template-columns: 1fr;
    grid-template-areas:
        "secondary"
        "primary"
        "tertiary";
}

/* All the multi-column layouts: */
@media $medium_media_query {
    .two-columns-left #content > .inner {
        grid-template-columns: $*sidebar_width 1fr;
        grid-template-areas:
            "secondary primary"
            "tertiary tertiary";
    }

    .two-columns-right #content > .inner {
        grid-template-columns: 1fr $*sidebar_width;
        grid-template-areas:
            "primary secondary"
            "tertiary tertiary";
    }

    .three-columns-left #content > .inner {
        grid-template-columns: $*sidebar_width $*sidebar_width 1fr;
        grid-template-areas:
            "secondary tertiary primary";
    }

    .three-columns-right #content > .inner {
        grid-template-columns: 1fr $*sidebar_width $*sidebar_width;
        grid-template-areas:
            "primary secondary tertiary";
    }

    .three-columns-sides #content > .inner {
        grid-template-columns: $*sidebar_width 1fr $*sidebar_width;
        grid-template-areas:
            "secondary primary tertiary";
    }
}

/* --- Micro-nav emoji: should only appear on mobile or one-column --- */

#corners-micro-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

#corners-micro-nav > li {
    display: inline;
    margin: $*breathing_room_half;
}

#corners-micro-nav a {
    text-decoration: none;
}

@media $medium_media_query {
    .multiple-columns #corners-micro-nav {
        display: none;
    }
}

/*--- Journal Header and Footer ---*/

#content-footer, #invisible-separator {
    display: none; /* These are old hacks in the Rasa markup. */
}

#header, #footer {
    margin: 0;
    padding: $*breathing_room_full;
    text-align: center;
}

#header {
    $header_background
    $page_title_colors
    $header_border
    border-top: none;
    border-radius: 0 0 $*rectangle_radius $*rectangle_radius;
}

h1#title {
    $page_title_font
}

h1#title, h1#title a {
    $page_title_colors
    text-decoration: none;
}

h2#subtitle,
h2#pagetitle {
    $page_subtitle_font
    border: none;
    $page_title_colors
    font-weight: bold;
}

@media $small_media_query {
    h1#title, h2#pagetitle, h2#subtitle {
        padding: 0;
        margin-top: 0;
    }
    h1#title {
        font-size: 1.9em;
    }
    h2#pagetitle, h2#subtitle {
        font-size: 1.2em;
    }
}

#footer {
    $footer_background
    $footer_border
    border-bottom: none;
    border-radius: $*rectangle_radius $*rectangle_radius 0 0;
    margin-top: $*rectangle_spacing;
}

#footer a { $footer_link_colors }
#footer a:visited { $footer_link_visited_colors }
#footer a:hover { $footer_link_hover_colors }
#footer a:active { $footer_link_active_colors }


/*--- Journal Navigation ---*/

.navigation {
    $entry_title_font
    $entry_colors
    $entry_background
    $entry_border
    font-size: 1.2em;
    text-align: center;
    margin: $*rectangle_spacing 0;
    padding: $*breathing_room_half 0;
    border-radius: $*rectangle_radius;
}

.navigation ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-left: 0;
    padding-left: 0;
}
.navigation li {
    display: inline;
    padding: 0 $*breathing_room_full;
}
.noentries {
    padding: 0 .5em;
}

.topnav a, .bottomnav a {
    $entry_title_colors
}

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

/*--- Common styling for entries, comments, and the tags page ---*/

    /* boxes and stuff: */

.entry,
.comment,
.page-tags .tags-container {
    $entry_colors
    $entry_border
    margin-top: $*rectangle_spacing;
    border-radius: $*rectangle_radius;
    padding: 0;
}

.entry,
.page-tags .tags-container {
    $entry_title_background
}

.comment {
    $comment_title_background
}

.entry   .contents,
.comment .contents,
.page-tags .tags-container .contents {
    padding: $*breathing_room_double;
    /* no different background props for comments: */
    $entry_background
    overflow-x: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media $small_media_query {
    .entry   .contents,
    .comment .contents,
    .page-tags .tags-container .contents {
        padding: $*breathing_room_full;
    }
}

.entry   .header,
.comment .header,
.page-tags .tags-container .header {
    border-bottom: 1px solid;
    $optional_entry_border_color
    margin: 0;
    padding: $*breathing_room_half $*breathing_room_full;
    border-radius: $*rectangle_radius $*rectangle_radius 0 0;
    overflow-x: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Collapsed comments - kinda like a header, so use header padding. */
.comment-wrapper.partial .comment .inner {
    padding: $*breathing_room_half $*breathing_room_full;
}

.entry   .footer,
.comment .footer,
.page-tags .tags-container .footer {
    padding: $*breathing_room_full;
    $entry_background
    border-bottom-left-radius: $*rectangle_radius;
    border-bottom-right-radius: $*rectangle_radius;
    border-top: 1px solid;
    $optional_entry_border_color
}

/* Use lines to show threading, instead of big indents. */
.comment-thread {
    border-left: 1px solid;
    $optional_entry_border_color
    border-image: linear-gradient(${*color_entry_border}00, ${*color_entry_border}ff 2.5rem, ${*color_entry_border}ff 95%, ${*color_entry_border}00 99%) 1; /* Safari needs "transparent color" or it assumes "transparent black" */
    border-right-width: 0; /* safari. */
    padding-left: $*breathing_room_half;
}
.comment-thread.comment-depth-1 {
    border-left: none;
    padding-left: 0;
    border-left-width: 0; /* safari. */
}

    /* Misc alignment fixes and stuff: */

/* minimum comfortable width for reading a comment: */
.comment-wrapper {
    padding: 0;
    min-width: 15em;
}

/* ...but collapsed comments can shrink down a bit more. At around 8em,
   ordinary-length usernames start overflowing the boxes anyway,
   so there's not much point going below 9em. */
.comment-wrapper.partial {
    min-width: 9em;
}

textarea#commenttext {
    width: 100%; /* fix for FF form width glitch */
}

    /* titles and stuff: */

.no-subject .entry .entry-title {
    background: none;
    border: none;
}

h3.entry-title,
.page-tags .tags-container .header h2 {
    margin: 0;
    padding-top: 0;
    $entry_title_colors
    $entry_title_font
}

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

@media $small_media_query {
    h3.entry-title,
    .page-tags .tags-container .header h2 {
        font-size: 1.15em;
    }
    .comment .comment-title {
        font-size: 1.05em;
    }
}

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

h4.comment-title a {
    text-decoration: none;
    $comment_title_colors
}

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

    /* Links: */

.entry a { $entry_link_colors }
.entry a:visited { $entry_link_visited_colors }
.entry a:hover { $entry_link_hover_colors }
.entry a:active { $entry_link_active_colors }

.entry-interaction-links a, .entry-management-links a { $entry_interaction_link_colors }
.entry-interaction-links a:visited, .entry-management-links a:visited { $entry_interaction_link_visited_colors }
.entry-interaction-links a:hover, .entry-management-links a:hover { $entry_interaction_link_hover_colors }
.entry-interaction-links a:active, .entry-management-links a:active { $entry_interaction_link_active_colors }

    /* Content: */

/* ensure comment content stretches out horizontally so it's readable */
.comment-content:before {
    content: "";
    display: block;
    overflow: hidden;
    width: 10em;
}

/* Separate metadata from real content */
.entry-content,
.comment-content {
    padding-top: $*breathing_room_half;
    margin-top: $*breathing_room_half;
    border-top: 1px solid;
    $optional_entry_border_color
    border-image: linear-gradient(to right, ${*color_entry_border}00, ${*color_entry_border}ff 30%, ${*color_entry_border}ff 70%, ${*color_entry_border}00) 1; /* Safari needs "transparent color" or it assumes "transparent black" */
    border-bottom: 0; /* safari */
}

/* Sometimes there's none tho */

.poster.empty + .entry-content {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

/* Never blow out layout for wide boyz, and make portrait boyz fit in the window. */
.entry-content img, .comment-content img {
    height: auto;
    max-width: 100%;
    max-height: 95vh;
    object-fit: contain;
    object-position: left;
}

.entry-content   th,
.comment-content th {
    $entry_title_background
    padding: $*breathing_room_half;
}

.entry-content   td,
.comment-content td {
    $module_title_background
    padding: $*breathing_room_half;
}

.entry-content   > p:first-child,
.comment-content > p:first-child {
    margin-top: 0;
}

.entry-content   hr,
.comment-content hr {
    display: block;
    margin: 1em 10%;
    border: 2px solid;
    border-radius: 1px;
    $optional_entry_border_color
}

.entry-content   blockquote,
.comment-content blockquote {
    $entry_colors
    border-left: 4px solid;
    $optional_entry_border_color
    border-bottom: 0;
    border-radius: .15rem;
    margin: 1em;
    padding: 0 $*breathing_room_full 0 $*breathing_room_full;
}

.entry-content   pre,
.comment-content pre {
    word-wrap: normal;
    overflow-wrap: normal;
    white-space: pre;
}

.entry-content   ul, .entry-content   ol,
.comment-content ul, .comment-content ol {
    margin: 0;
}

.page-tags .tags-container .ljtaglist ul {
    margin: 0;
    padding: 0;
}

.entry-content   li,
.comment-content li {
    margin-top: $*breathing_room_half;
}

.entry-content   li p,
.comment-content li p {
    margin-top: 1em;
    margin-bottom: 0;
}

.entry-content   li p:first-child,
.comment-content li p:first-child {
    margin-top: 0;
}

/* Don't add extra height at bottom of userpic box */
.userpic a {
   display: block;
   line-height: 0;
}

/* Anchor any absolute descendents */
.entry   > .inner,
.comment > .inner {
  position: relative;
}

.has-userpic .entry   .header > .inner::before,
.has-userpic .comment .header > .inner::before {
  content: "";
  display: block;
  width: calc(110px + $*breathing_room_half);
  height: 110px;
  float: $*userpics_position;
}

.has-userpic .entry   .userpic,
.has-userpic .comment .userpic {
    position: absolute;
    top: $*breathing_room_half;
    ${*userpics_position}: $*breathing_room_full;
    box-sizing: border-box;
    display: flex;
    flex-direction: $userpic_flex_direction;
    justify-content: flex-start;
    align-items: center;
    height: 110px;
    width: 110px;
}

.cuttag-action img {
    vertical-align: text-bottom;
}


    /* Little stuff: */

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

.datetime {
    font-size: .9em;
}

.poster {
    display: block;
    margin-bottom: $*breathing_room_half;
}

.poster-ip {
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: .9em;
}

.metadata {
    font-size: .85em;
    margin: 1em 0 0;
    text-align: right;
}

.metadata-item {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.metadata ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}
.metadata li {
    margin-bottom: .5em;
}
.metadata.top-metadata ul {
    margin: 0;
}
.metadata.top-metadata {
    margin-bottom: 1em;
}

.tag ul {
    display: inline;
    margin-left: 0;
    padding-left: 0;
}

.tag ul li {
    display: inline;
} /* same for month view */

    /* Manage/interact links */

ul.entry-management-links {
    margin-left: 0;
    padding-left: 0;
}
ul.entry-management-links li {
    display: inline;
    padding: 0 $*breathing_room_half;
}

ul.entry-interaction-links {
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}

ul.entry-interaction-links li {
    display: inline;
    padding: 0 $*breathing_room_half;
}

ul.comment-management-links {
    display: inline;
    margin-left: $*breathing_room_double;
    padding-left: 0;
    text-align: right;
}
ul.comment-management-links li {
    display: inline;
    padding: 0 $*breathing_room_half;
}

ul.comment-interaction-links {
    margin-left: 0;
    padding-left: 0;
    margin-top: $*breathing_room_double;
}

ul.comment-interaction-links li {
    display: inline;
    padding: 0 $*breathing_room_half;
}




/* archive */

.month {
    $entry_colors
    $entry_background
    $entry_border
    border-radius: $*rectangle_radius;
    margin: 0 0 $*rectangle_spacing 0;
    padding: $*breathing_room_double;
}

/* nb that this affects the "view subjects" page too */
.month h3 {
    $entry_title_colors
    font-size: 1.2em;
    font-weight: normal;
}

.month caption {
    display: none;
}

table.month {
    margin: 0 auto;
    border-collapse: collapse;
    border-bottom: none;
    width: 100%;
}

table.month td,
table.month th {
    $entry_colors
    $entry_border
    padding: $*breathing_room_half;
}

table.month td {
    text-align: left;
    vertical-align: top;
    font-weight: normal;
    height: 3.25em;
    $entry_background
}
table.month th {
    text-align: center;
    $entry_title_background
}

table.month td.day-has-entries{
    $entry_title_background
}

table.month td p {
    margin: 0;
    font-size: 1.14em;
    font-weight: bold;
    text-align: right;
}

.month dl dt {
    font-weight: bold;
}
.month dl .time {
    padding-right: .5em;
}
.month dl h3 {
    display: inline;
}
.month dl h3.entry-title a {
    text-decoration: underline;
}
.page-month .month .entry-poster {
    margin-right: .5em;
}
.month dl .tag ul {
    margin-top: 0;
}

/* icons */

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

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

.icon-keywords ul {
    display: inline;
    margin-left: 0;
    padding-left: 0;
}

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

/* modules */

li.page-separator {
    display: none;
}

.module {
    $module_title_background
    $module_colors
    $module_border
    margin-top: $*rectangle_spacing;
    border-radius: $*rectangle_radius;
    padding: 0;
}

.module a { $module_link_colors }
.module a:visited { $module_link_visited_colors }
.module a:hover { $module_link_hover_colors }
.module a:active { $module_link_active_colors }

.module-content {
    $module_font
    $module_background
    padding: $*breathing_room_full;
    border-bottom-left-radius: $*rectangle_radius;
    border-bottom-right-radius: $*rectangle_radius;
    overflow-x: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* some modules are header-less */
.module-content:first-child {
    border-top-left-radius: $*rectangle_radius;
    border-top-right-radius: $*rectangle_radius;
}

h2.module-header {
    $module_title_colors
    $module_title_font
    border-bottom: 1px solid;
    $optional_module_border_color
    $module_title_colors
    margin: 0;
    padding: $*breathing_room_half $*breathing_room_full;
    border-radius: $*rectangle_radius $*rectangle_radius 0 0;
    overflow-x: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h2.module-header a {
    $module_title_colors
}

.module-content ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.module-content li {
    margin: .5em 0;
    padding: 0 0 0 5px;
}

.module-content .userpic {
    text-align: center;
}

.module-content .userpic img {
    $entry_title_background
    $entry_border
    padding: $*breathing_room_half;
}

.journal-name {
    margin-top: $*breathing_room_half;
    text-align: center;
}

.journal-website-name {
    text-align: center;
}

ul.userlite-interaction-links.icon-links {
    margin: $*breathing_room_half 0 0;
    padding-left: 0;
    text-align: center;
}

ul.userlite-interaction-links.icon-links li {
    display: inline;
    padding: 0 .20em;
    margin: 0 auto;
}

ul.userlite-interaction-links.text-links {
    text-align: left;
    padding: 0 0 0 $*breathing_room_half;
    list-style: none;
}

.any-column .module-calendar table { margin: 0; }
.module-calendar .module-content { text-align: left; }
@media $medium_media_query {
    .multiple-columns .module-calendar .module-content {
        text-align: center;
    }

    .multiple-columns .module-calendar table {
        margin: 0 auto;
    }

    .multiple-columns .module-syndicate .module-content {
        text-align: center;
    }
}

.module-calendar td {
    padding: 1px;
}
.module-calendar td a {
    display: block;
    padding: 2px;
}

.search-box {
    margin: .2em auto;
    max-width: 100%;
}

.search-form .search-box-item,
.search-form .search-button-item {
    display: block
}

.search-form .comment_search_checkbox_item {
    display: inline
}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
    white-space: normal !important;
}
.module-pagesummary .module-content {
    word-wrap: break-word;
}

.module-credit .category-title {
    font-weight: bold;
}

.tags_cloud li, .module-tags_cloud li { display: inline; }

/*
  Horrible, no-good hack to make the icon browser not be useless on mobile!

  The box sizes get generated in px by jquery-ui when the element is created and
  inserted as inline styles.

  This is kind of janky? Somehow the min-heights are interfering with the
  generated heights and making jquery come up with a different answer than it
  normally would. But, it's still better than the defaults, where it's just
  completely unusable.
*/

#iconselector_icons_list {
   margin: 0;
   padding: 0;
}

@media only screen and (max-width: 45em) {
    .iconselector {
        font-size: .8em;
        left: 4vw !important;
        width: 90vw !important;
    }
    .iconselector .ui-dialog-titlebar {
        padding-top: 0;
        padding-bottom: 0;
    }
    .iconselector .ui-dialog-content {
        min-height: 360px !important;
        padding-bottom: 0;
    }
    .iconselector_top {
        margin-bottom: 0;
    }
    .iconselector_top .keywords {
        display: block;
    }
    .iconselector .kwmenu label:first-child {
        /* yes on screenreaders, no on display */
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
    .iconselector .kwmenu .keyword {
        display: block;
        white-space: nowrap;
        overflow-x: hidden;
    }
    #iconselector_select {
        float: none;
        margin-top: .2em;
        display: block;
    }
    #iconselector_icons {
        min-height: 160px;
        max-height: 100%;
    }
}

/* Stop *dramatic woodchuck* zoom for search module and polls */

@media (pointer: coarse) {
    .module-content input[type="text"],
    .entry-content input[type="text"],
    .entry-content select,
    .entry-content textarea {
        font-size: 16px;
    }
}

    """;
}