myrtillenne

Neon

Sun, 12 Oct 2025 16:45:01 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

sidebar image
left or right sidebar
2 colour schemes
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Tabula rasa" and apply any theme.
Choose the "2 Column (sidebar on the left)" or the "2 Columns (sidebar on the right)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "icons" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Custom CSS" tab. Choose one of the color schemes and paste the code into the "Use embeded CSS" field. Press enter and paste the layout code into the field as well. Uncheck "Use layout's stylesheet(s)".

Green-red:/*------------------------------------- - layout - neon (tabula rasa) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - image - https://www.freepik.com/author/svstudioart -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #b0acaf; --line-height: 1.5; --background-color: #1c2124; --link-color: #ec4882; --link-hover-color: #27c2cb; --main-font: Syne, sans-serif; --title-font: Federant, sans-serif; --gradient1-color: #27c2cb; --gradient2-color: #ec4882; --title-color:#293338; --heading-color: #c0bcbf; --heading-link-color: #ec4882; --heading-link-hover-color: #49becb; --heading-background-color: #293338; --entry-background-color: #353e44; --icon-color: #27c2cb; --icon-hover-color: #ec4882; --icon-background-color: #1c2124; --entry-icon-color: #27c2cb; --sidebar-width: 350px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/196215.jpg"); --sidebar-image-height: 500px; --spacing: 50px; --entry-width: 1000px; --userpic-size: 100px; }
Purple-yellow:/*------------------------------------- - layout - neon (tabula rasa) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - image - https://www.freepik.com/author/freepik -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #b0acaf; --line-height: 1.5; --background-color: #1F1C24; --link-color: #AC95D9; --link-hover-color: #F7C973; --main-font: Syne, sans-serif; --title-font: Federant, sans-serif; --gradient1-color: #F7C973; --gradient2-color: #9374CD; --title-color:#293338; --heading-color: #c0bcbf; --heading-link-color: #AC95D9; --heading-link-hover-color: #F7C973; --heading-background-color: #2F2938; --entry-background-color: #423D50; --icon-color: #AC95D9; --icon-hover-color: #F7C973; --icon-background-color: #1F1C24; --entry-icon-color: #F7C973; --sidebar-width: 350px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/199157.jpg"); --sidebar-image-height: 500px; --spacing: 50px; --entry-width: 1000px; --userpic-size: 100px; }
Layout:/*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { font-family: var(--main-font); font-size: var(--text-size); padding: 0; margin: 0; line-height: var(--line-height); background-color: var(--background-color); color: var(--text-color); } html body { margin-left: 0; margin-right: 0; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited, a:active { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { margin: 1em 0; padding: 1em; border: 1px solid transparent; background: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 8px; } blockquote:before { display: inline-block; content: "format_quote"; font-family: Material Icons; font-size: 26px; line-height: 0; vertical-align: middle; margin-right: 10px; color: var(--entry-icon-color); } /*------------ content ------------*/ #canvas { position: relative; clear: left; } @media (min-width: 800px) { #content > .inner:first-child { margin: var(--spacing); } } @media (min-width: 1024px) { #content > .inner:first-child { max-width: calc(var(--entry-width) + var(--spacing)); } #content > .inner:first-child { margin: var(--spacing) auto; padding: 0 var(--spacing); } .two-columns-left #content > .inner:first-child { border-left: var(--sidebar-width) solid transparent; } .two-columns-right #content > .inner:first-child { border-right: var(--sidebar-width) solid transparent; } .two-columns #primary { width: 100%; margin-right: -100%; margin-left: 0; float: left; } .two-columns-left #primary > .inner:first-child { padding-left: var(--spacing); } .two-columns-right #primary > .inner:first-child { padding-right: var(--spacing); } } @media (min-width: 1280px) { .two-columns-left #content > .inner:first-child { border-right: calc(var(--userpic-size) + 10px) solid transparent; } .two-columns-right #content > .inner:first-child { border-left: calc(var(--userpic-size) + 10px) solid transparent; } } /*--------------- header ---------------*/ #header { background: var(--heading-background-color); border-bottom: 5px solid; border-image: linear-gradient( to right, var(--gradient2-color), var(--gradient1-color) ) 1; text-align: center; margin-bottom: var(--spacing); } #header > .inner { padding: 1em; font-family: var(--title-font); } #header a { color: var(--heading-link-color); } #header a:hover { color: var(--heading-link-hover-color); } h1#title { font-size: 1.2em; line-height: 1.2; padding: 0; margin: 0; display: inline; } h2#subtitle { font-size: 1.2em; font-weight: normal; padding: 0; margin-left: 0.5em; line-height: 1; color: var(--heading-color); display: inline; } h2#pagetitle { display: none; } /*--------------- entries ---------------*/ .entry, .comment { margin-bottom: var(--spacing); background: var(--entry-background-color); border-radius: 8px; position: relative; } .sticky-entry-icon, .admin-post-icon { display: none; } .header { background: var(--heading-background-color); border-radius: 8px 8px 0 0; border-bottom: 3px solid; border-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ) 1; } .header .inner { padding: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .entry .entry-title, .full .comment-title { font-size: 1.2em; line-height: 1.2; font-weight: normal; font-family: var(--title-font); padding: 6px 10px; margin: 0; flex-grow: 1; color: var(--heading-color); } .entry .entry-title a, .full .comment-title a { color: var(--heading-link-color); } .entry .entry-title a:hover, .full .comment-title a:hover { color: var(--heading-link-hover-color); } .sticky-entry .header .inner:before { content: "push_pin"; font-family: Material Icons; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; color: var(--icon-color); background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; } .admin-post .header .inner:after { content: "verified"; font-family: Material Icons; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; color: var(--icon-color); background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; order: -1; } .header .datetime { color: var(--icon-color); border-radius: 14px; line-height: 24px; padding: 6px; border: 2px solid transparent; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; } .sticky-entry .datetime { display: none; } .entry .datetime, .entry .datetime a, .comment .header .datetime { text-transform: lowercase; color: var(--icon-color); } .entry .datetime a:hover { color: var(--icon-hover-color); } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; font-family: Material Icons; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; color: var(--icon-color); } .security-private .access-filter:before { content: "visibility_off"; font-family: Material Icons; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; color: var(--icon-color); } .restrictions-NSFW .restrictions:before { content: "warning"; font-family: Material Icons; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; color: var(--icon-color); } .restrictions-18 .restrictions:before { content: "18+"; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; color: var(--icon-color); } .entry .contents, .comment .contents { margin-top: 2em; padding: 0 2em; } .two-columns-left .userpic { float: right; margin-left: 10px; } .two-columns-right .userpic { float: left; margin-right: 10px; } .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border-radius: 8px; } @media (min-width: 640px) { .userpic img { max-width: var(--userpic-size); max-height: var(--userpic-size); } } @media (min-width: 1280px) { .has-userpic .userpic { position: absolute; top: 0; right: -10px; transform: translateX(100%); margin: 0; } .two-columns-right .has-userpic .userpic { left: -10px; transform: translateX(-100%); right: auto; } } .entry .poster { font-size: 0; display: block; } .two-columns-left .entry .poster { clear: left; } .two-columns-right .entry .poster { clear: right; } .entry .poster .ljuser { font-size: var(--text-size); padding-right: 0.25em; } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster .ljuser:before, .full .poster:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; } .entry .poster .ljuser:nth-child(1):before, .full .poster:before { content: "account_circle"; } .entry .poster .ljuser:nth-child(2):before { content: "public"; } .entry .poster a, .full .poster a { color: var(--text-color); } .entry .poster a:hover, .full .poster a:hover { color: var(--link-color); } .entry-content { margin: 2em 0; } @media (min-width: 1024px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action { display: flex; align-items: center; line-height: 1; } .cuttag-action img { display: none; } .cuttag-action:before { content: "content_cut"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 5px; } .cuttag-action:after { content: ""; height: 0; width: 100%; height: 1px; background: linear-gradient( to right, transparent 50%, var(--entry-background-color) 50% ), linear-gradient(to right, var(--gradient1-color), var(--gradient2-color)); background-size: 10px 1px, 100% 1px; } .cut-open, .cut-close { display: none; } .cut-text { font-weight: normal; margin-left: 27px; display: block; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata li { padding-bottom: 0.5em; } .metadata-label { display: none; } .metadata img { vertical-align: middle; } #metadata-music:before { content: "queue_music"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-mood:before { content: "face"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-location:before { content: "flag"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-xpost:before { content: "add_location"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } .entry .footer { background: var(--heading-background-color); border-radius: 0 0 8px 8px; } .entry .footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .entry .footer .inner:before { content: ""; flex: 0 0 100%; width: 100%; border-bottom: 3px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; } .entry div.tag { background: var(--entry-background-color); padding: 0 2em 0.5em; flex: 0 0 100%; box-sizing: border-box; order: -1; } .entry div.tag:before { content: "tag"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; } .tag-text { display: none; } .tag-nav-trigger { vertical-align: middle; } ul.entry-management-links, ul.entry-interaction-links { margin: 0; padding: 0; list-style: none; } .entry ul.entry-management-links, .entry ul.entry-interaction-links { padding: 10px; } ul.entry-management-links.icon-links li { display: inline; } ul.entry-management-links.text-links li, ul.entry-interaction-links li { display: inline; padding: 0 5px; font-family: var(--title-font); } ul.entry-management-links li a img { display: none; } ul.entry-management-links.icon-links li a:before { display: inline-block; font-family: Material Icons; font-size: 24px; line-height: 24px; color: var(--icon-color); border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; transition: color 0.4s ease; } ul.entry-management-links.icon-links li a:hover:before { color: var(--icon-hover-color); } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "add_alert"; } .icon-links .link_next a:before { content: "arrow_forward"; } ul.entry-management-links.text-links li a, ul.entry-interaction-links li a { color: var(--heading-link-color); } ul.entry-management-links.text-links li a:hover, ul.entry-interaction-links li a:hover { color: var(--heading-link-hover-color); } /*--------------- comments ---------------*/ .comment-pages { margin: 10px 0; padding: 1em 2em; color: var(--heading-color); font-family: var(--title-font); background: var(--heading-background-color); line-height: 1; text-align: center; border-radius: 8px; } .comment-pages:last-of-type { margin-bottom: var(--spacing); } .comment-pages a { color: var(--heading-link-color); } .comment-pages a:hover { color: var(--heading-link-hover-color); } .comment-wrapper { min-width: 15em; } .thread-depth { display: inline-block; color: var(--icon-color); border-radius: 14px; line-height: 24px; padding: 6px; border: 2px solid transparent; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; } .no-subject .comment .comment-title, .no-subject .entry-title { padding: 0; margin: 0; } .partial .comment-title { margin: 0; } .comment-date-text, .comment-from-text, .comment-ip-text { display: none; } .full .poster { display: block; } .two-columns-left .full .poster { clear: left; } .two-columns-right .full .poster { clear: right; } .comment .poster-ip { font-size: 1em; } .partial .comment { padding: 1em; background: var(--entry-background-color); border-radius: 8px; } .comment-content { padding: 2em 0; } .comment .footer { padding: 10px; background: var(--heading-background-color); border-radius: 0 0 8px 8px; border-top: 3px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; color: var(--heading-text-color); } .comment .footer .inner { display: flex; flex-wrap: wrap; align-items: center; } ul.comment-management-links, ul.comment-interaction-links { margin: 0; padding: 0; list-style: none; } ul.comment-management-links { order: -1; margin-right: auto; } ul.comment-management-links.icon-links li { display: inline; } .multiform-checkbox, ul.comment-management-links.text-links li, ul.comment-interaction-links li { display: inline; padding: 0 5px; font-family: var(--title-font); color: var(--heading-color); } ul.comment-management-links.text-links li a, ul.comment-interaction-links li a { color: var(--heading-link-color); } ul.comment-management-links.text-links li a:hover, ul.comment-interaction-links li a:hover { color: var(--heading-link-hover-color); } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a:before { display: inline-block; font-family: Material Icons; font-size: 24px; line-height: 24px; color: var(--icon-color); border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; transition: color 0.4s ease; } ul.comment-management-links.icon-links li a:hover:before { color: var(--icon-hover-color); } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } .bottomcomment { padding: 10px; background: var(--heading-background-color); border-radius: 8px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .bottomcomment input { font-family: var(--main-font); font-size: var(--text-size); color: var(--icon-color); border: 2px solid transparent; margin: 0 5px; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; } .bottomcomment select { font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color); border: 1px solid transparent; background-color: var(--entry-background-color); background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 8px; padding: 6px; margin: 0 5px; } .bottomcomment label { flex-basis: 100%; text-align: center; } .bottomcomment ul.entry-interaction-links { margin-left: auto; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrformdiv .de { font-family: var(--title-font); } .entry #qrform { padding: 10px; } .comment #qrform { padding-top: 20px; } #qrdiv input, #qrdiv select, #qrdiv textarea { color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); border-radius: 8px; border: 1px solid transparent; background-color: var(--entry-background-color); background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; font-family: var(--title-font); color: var(--heading-link-color); } #postform { padding: 1.5em; background: var(--entry-background-color); border: 0; border-radius: 8px; margin: var(--spacing) 0; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .tags-container, .icons-container { margin-bottom: var(--spacing); background: var(--entry-background-color); border-radius: 8px; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-family: var(--title-font); font-size: 1.2em; line-height: 1; font-weight: normal; padding: 6px 10px; margin: 0; } #archive-year .month .footer, #primary .manage-link { font-family: var(--title-font); padding: 10px 20px; background: var(--heading-background-color); border-top: 3px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; border-radius: 0 0 8px 8px; } #archive-year .month .footer a, #primary .manage-link a { color: var(--heading-link-color); font-family: var(--title-font); } #archive-year .month .footer a:hover, #primary .manage-link a:hover { color: var(--heading-link-hover-color); } /*------------ archive ------------*/ .day-date { display: none; } .month caption { display: none; } .month table { text-align: center; width: 100%; border-collapse: collapse; } .month tbody tr { background: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ); background-size: 100% 1px; background-position: left top; background-repeat: no-repeat; } .month td, .month th { padding: 1em 0; border: 0; font-weight: normal; width: 1em; } table.month td.day-has-entries .label, table.month td p { display: inline-block; margin: 0; } table.month td p:before { content: "( "; } table.month td p:after { content: " )"; } #archive-year .navigation li a { display: inline-block; color: var(--icon-color); border-radius: 14px; line-height: 24px; padding: 6px; border: 2px solid transparent; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; } #archive-year .navigation li a:hover { color: var(--icon-hover-color); } .month dl { margin: var(--spacing) 0 0; } .month dt { float: left; display: block; width: 100%; background: var(--heading-background-color); border-radius: 8px 8px 0 0; font-size: 1.2em; line-height: 1.2; margin-bottom: 2em; padding: 10px; box-sizing: border-box; border-bottom: 3px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; font-family: var(--title-font); } #primary .month dt a { color: var(--heading-link-color); } #primary .month dt a:hover { color: var(--heading-link-hover-color); } .month dl .time { padding-right: 0.5em; } .month dl h3 { display: inline; font-size: 1em; } .page-month .month .entry-poster { margin-right: 0.5em; } .month dl .tag ul { margin-top: 0; } .month dd { margin: 0 0 var(--spacing); padding: 2em; background: var(--entry-background-color); border-radius: 8px; } .month dd br { display: block; } #archive-month .month-back, #archive-month .month-forward { color: var(--icon-color); border-radius: 14px; line-height: 24px; padding: 6px; border: 2px solid transparent; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; } #archive-month .navigation select { border: 1px solid transparent; background-color: var(--entry-background-color); background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)) !important; background-origin: border-box; background-clip: padding-box, border-box; color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); border-radius: 8px; } #archive-month .navigation input[type="submit"] { border: 0; color: var(--heading-link-color); background: transparent; font-family: var(--title-font); font-size: var(--text-size); } /*------------ tags ------------*/ .tags-container .contents { padding: 2em; } ul.ljtaglist { padding: 0; margin-left: 1em; list-style-position: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0; padding: 0.5em 2em; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { padding: 0.5em 2em; border-top: 1px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; } .icon { border-top: 1px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; padding: 1em; margin: 0; display: flex; } .icon-image { order: 2; padding-left: 1em; } .icon-image img { display: block; } .icon-info { flex-grow: 1; padding: 0 1em; } .icon-pages p { margin: 0; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } /*------------ modules ------------*/ @media (min-width: 1024px) { .two-columns #secondary { width: var(--sidebar-width); } .two-columns-left #secondary { float: left; margin-left: calc(-1 * var(--sidebar-width)); } .two-columns-right #secondary { float: right; margin-right: calc(-1 * var(--sidebar-width)); } } .module { margin-bottom: var(--spacing); border-radius: 8px; overflow: hidden; } .module-content { background: var(--entry-background-color); padding: 1em; } .module .module-content ul { margin: 0; padding: 0; list-style: none; } .module:not(.module-navlinks, .module-tags_multilevel, .module-tags_cloud) .module-content ul { margin: -1em; } .module:not(.module-navlinks, .module-tags_multilevel, .module-tags_cloud) .module-content li { border-top: 1px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; padding: 0.5em 1em; } .module:not(.module-navlinks, .module-tags_cloud) .module-content li:before { content: "chevron_right"; font-family: Material Icons; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); transition: all 0.2s linear; } .module:not(.module-navlinks, .module-tags_multilevel, .module-tags_cloud) .module-content li:hover:before { margin-right: 10px; } .module:not(.module-navlinks, .module-tags_multilevel, .module-tags_cloud) .module-content li:first-child { border: 0; } .module h2 { background: var(--heading-background-color); font-family: var(--title-font); font-size: 1.2em; font-weight: normal; display: flex; align-items: center; margin: 0; padding: 10px; padding-right: 20px; color: var(--heading-color); border-bottom: 3px solid; border-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ) 1; } .module h2 a { color: var(--heading-link-color); } .module h2 a:hover { color: var(--heading-link-hover-color); } .module h2:before { display: block; font-family: Material Icons; font-size: 24px; line-height: 24px; color: var(--icon-color); border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; margin-right: auto; } .module-navlinks:before { content: ""; display: block; width: 100%; height: var(--sidebar-image-height); background-image: var(--sidebar-image); background-size: cover; border-bottom: 3px solid; border-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ) 1; } .module-navlinks .module-content { padding: 10px; background: var(--heading-background-color); } .module-navlinks ul { display: flex; justify-content: space-evenly; flex-wrap: wrap; } .module-navlinks li a { display: block; font-size: 0; } .module-navlinks li a:before { display: block; font-family: Material Icons; font-size: 24px; line-height: 24px; color: var(--icon-color); border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; text-align: center; border-radius: 14px; transition: color 0.4s ease; } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "calendar_month"; } .list-item-read a:before { content: "feed"; } .list-item-tags a:before { content: "style"; } .list-item-network a:before { content: "travel_explore"; } .list-item-memories a:before { content: "collections_bookmark"; } .list-item-userinfo a:before { content: "account_box"; } .module-typelist h2:before { content: "explore"; } .module-tags_list h2:before, .module-tags_multilevel h2:before, .module-tags_cloud h2:before { content: "loyalty"; } .module-customtext h2:before { content: "comment"; } .module-navlinks li a:hover:before { color: var(--icon-hover-color); } .module-calendar .module-content { text-align: center; padding: 0; } .module-calendar table { margin: 0 auto; width: 100%; border-collapse: collapse; } .module-calendar table td { padding: 0.5em 0; } .module-calendar table th { padding: 0.5em 0; } .module-calendar table tr:not(:first-child) { background: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ); background-size: 100% 1px; background-position: left top; background-repeat: no-repeat; } .module-calendar .module-header a { padding-left: 0.25em; } .module-calendar h2:before { content: "calendar_month"; } .module-pagesummary h2:before { content: "article"; } .module-active h2:before { content: "local_fire_department"; } .module-search h2:before { content: "search"; } .module-cuttagcontrols h2:before { content: "content_cut"; } .module-syndicate h2:before { content: "rss_feed"; } .module-subscriptionfilters h2:before { content: "filter_alt"; } .module-credit h2:before { content: "code_off"; } .module-tags_multilevel .module-content ul { margin-left: 1em; } .module-tags_multilevel .module-content > ul { margin: 0; } .module-credit ul { display: none; } .module-credit .module-content:before { content: 'Theme "Neon" by myrtillenne'; } .module .manage-link, .module-userprofile, .module-time, .module-powered { display: none; } /*------------ navigation ------------*/ .navigation { padding: 10px; margin-bottom: var(--spacing); background: var(--heading-background-color); border-radius: 8px; overflow: hidden; } .navigation ul { margin: 0; padding: 0; list-style: none; } .navigation li { display: inline; color: var(--heading-color); } .navigation li a { color: var(--icon-color); } .navigation li a:hover { color: var(--icon-hover-color); } li.page-back { float: left; } li.page-forward { float: right; } li.page-back a, li.page-forward a { font-size: 0; } li.page-back a:before, li.page-forward a:before { font-family: Material Icons; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } /*------------ footer ------------*/ #footer { clear: both; background: var(--heading-background-color); border-top: 3px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; padding: 5px; text-align: center; } .page-top a { font-size: 0; color: var(--icon-color); } .page-top a:hover { color: var(--icon-hover-color); } .page-top a:before { content: "arrow_upward"; font-family: Material Icons; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; padding: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); width: 200px; text-align: center; border-radius: 8px; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; padding: 0.5em; margin: 0; } div.ContextualPopup .Userpic { border: 0; float: none; padding: 10px; } div.ContextualPopup .Userpic img { max-width: 100px; max-height: 100px; width: auto; height: auto; display: block; margin: 0 auto; border-radius: 8px; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; } div.ContextualPopup li { padding: 0.5em; border-top: 1px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; line-height: 1; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { color: var(--heading-color); background: var(--heading-background-color); justify-content: center; padding: 0.75em 0; } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--heading-link-color); } #lj_controlstrip a:hover { color: var(--heading-link-hover-color); text-decoration: none; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { color: var(--heading-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid transparent !important; background-color: var(--entry-background-color); background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)) !important; background-origin: border-box; background-clip: padding-box, border-box; font-size: var(--text-size) !important; font-family: var(--main-font) !important; border-radius: 8px; color: var(--text-color) !important; padding: 6px !important; } #lj_controlstrip input[type="submit"] { color: var(--icon-color) !important; border-radius: 14px; border: 2px solid transparent !important; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)) !important; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip img { border-radius: 8px; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; }
Into the "Custom stylesheet URL" field paste the following.
https://fonts.googleapis.com/css2?family=Material+Icons&family=Syne&family=Federant&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

RESOURCES

icon font by Google
images from freepik by freepik, svstudioart

comments

Bloom

Sun, 04 Jun 2023 18:52:02 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

header image
sidebar image
left or right sidebar
2 colour schemes
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Basic boxes" and apply any theme.
Choose the "2 Column (sidebar on the left)" or the "2 Columns (sidebar on the right)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "icons" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Custom CSS" tab. Choose one of the color schemes and paste the code into the "Use embeded CSS" field. Press enter and paste the layout code into the field as well. Uncheck "Use layout's stylesheet(s)".

Light:/*------------------------------------- - layout - bloom - light (basic boxes) - https://myrtillenne.dreamwidth.org - icon font - material symbols - https://fonts.google.com/icons - header image - freepik - https://www.freepik.com/author/freepik - sidebar image - tawatchai07 - https://www.freepik.com/author/tawatchai07 -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #4f3900; --line-height: 1.5; --background-color: #c6dde3; --link-color: #c28d01; --link-hover-color: #2e8bb4; --main-font: Nunito, sans-serif; --title-font: Shadows Into Light, sans-serif; --heading-color: #f2efe3; --heading-link-color: #f2e2a4; --heading-link-hover-color: #f2efe3; --heading-background-color: #4fabd2; --content-width: 1200px; --entry-background-color: #f2efe3; --entry-border-color: #8abbce; --icon-color: #2e8bb4; --icon-hover-color: #c28d01; --icon-background-color: #f2efe3; --entry-icon-color: #8abbce; --header-image: url("https://rosecarmine.dreamwidth.org/file/191726.png"); --header-image-height: 400px; --header-image-size: cover; --sidebar-width: 300px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/187206.jpg"); --sidebar-image-height: 400px; --spacing: 40px; }
Dark:/*------------------------------------- - layout - bloom - dark (basic boxes) - https://myrtillenne.dreamwidth.org - icon font - material symbols - https://fonts.google.com/icons - images - svstudioart - https://www.freepik.com/author/svstudioart -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #C9A3A6; --line-height: 1.5; --background-color: #00849B; --link-color: #31E0FF; --link-hover-color: #F47784; --main-font: Nunito, sans-serif; --title-font: Shadows Into Light, sans-serif; --heading-color: #C9A3A6; --heading-link-color: #F47784; --heading-link-hover-color: #31E0FF; --heading-background-color: #002135; --content-width: 1200px; --entry-background-color: #004055; --entry-border-color: #00849B; --icon-color: #002135; --icon-hover-color: #002135; --icon-background-color: #31E0FF; --entry-icon-color: #00849B; --header-image: url("https://rosecarmine.dreamwidth.org/file/190457.jpg"); --header-image-height: 400px; --header-image-size: cover; --sidebar-width: 300px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/190141.jpg"); --sidebar-image-height: 400px; --spacing: 40px; }
Layout:/*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { color: var(--text-color); background: var(--background-color); font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); margin: 0; } a, a:visited { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { margin: 1em 0; padding: 1em; border: 1px solid var(--entry-border-color); border-radius: 8px; } blockquote:before { display: inline-block; content: "format_quote"; font-family: Material Symbols Outlined; font-size: 26px; line-height: 0; vertical-align: middle; margin-right: 10px; color: var(--entry-icon-color); } /*------------ content ------------*/ #canvas > .inner:first-child { max-width: var(--content-width); margin-top: var(--spacing); } @media (min-width: 800px) { #canvas > .inner:first-child { margin: var(--spacing); } } @media (min-width: 1024px) { #canvas > .inner:first-child { margin: var(--spacing) auto 0; padding: 0 var(--spacing); } .two-columns-left #content { border-left: var(--sidebar-width) solid transparent; } .two-columns-right #content { border-right: var(--sidebar-width) solid transparent; } } @media (min-width: 1280px) { #canvas > .inner:first-child { padding: 0 120px; } } @media (min-width: 1024px) { .two-columns #primary { width: 100%; margin-right: -100%; margin-left: 0; float: left; } .two-columns-left #primary > .inner:first-child { margin-left: var(--spacing); } .two-columns-right #primary > .inner:first-child { margin-right: var(--spacing); } } #content-footer { clear: both; } /*--------------- header ---------------*/ #header { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); border-radius: 8px; color: var(--heading-color); overflow: hidden; } @media (min-width: 800px) { #header:before { content: ""; display: block; width: 100%; height: var(--header-image-height); background-image: var(--header-image); background-size: var(--header-image-size); background-position: top center; border-radius: 8px 8px 0 0; } } #header > .inner:first-child { background: var(--heading-background-color); } #header .module-wrapper { order: 2; } #header > .inner:first-child { border-radius: 0 0 8px 8px; display: flex; flex-wrap: wrap; align-items: center; } #journaltitles-container { padding: 0.75em 1em; flex: 1; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } h1#title { font-size: 1.5em; padding: 0 0.5em 0 0; font-family: var(--title-font); margin: 0; display: inline; } h1#title a { color: var(--heading-link-color); } h1#title a:hover { color: var(--heading-link-hover-color); } h2#subtitle { font-size: 1em; font-weight: normal; padding: 0; margin: 0; display: inline; } h2#pagetitle { display: none; } .module-navlinks { padding: 5px; } .module-navlinks ul { display: flex; gap: 5px; } .module-navlinks li a { display: block; padding: 7px; font-size: 0; color: var(--icon-color); border-radius: 8px; background: var(--icon-background-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .module-navlinks li a:hover { color: var(--icon-hover-color); } .module-navlinks li a:before { display: block; font-family: Material Symbols Outlined; font-size: 26px; line-height: 26px; } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "calendar_month"; } .list-item-read a:before { content: "feed"; } .list-item-tags a:before { content: "style"; } .list-item-network a:before { content: "travel_explore"; } .list-item-memories a:before { content: "collections_bookmark"; } .list-item-userinfo a:before { content: "account_box"; } /*--------------- entries ---------------*/ .entry, .comment { margin: var(--spacing) 0; background: var(--entry-background-color); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); border-radius: 8px; position: relative; } .sticky-entry-icon, .admin-post-icon { display: none; } .header { background: var(--heading-background-color); border-radius: 8px 8px 0 0; } .header .inner { padding: 5px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .entry .entry-title, .full .comment-title { font-size: 1.2em; line-height: 1.2; font-weight: normal; padding: 6px; margin: 0; flex-grow: 1; color: var(--heading-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .entry .entry-title a, .full .comment-title a { color: var(--heading-link-color); } .entry .entry-title a:hover, .full .comment-title a:hover { color: var(--heading-link-hover-color); } .sticky-entry .header .inner:before { content: "push_pin"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; display: inline-block; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .admin-post .header .inner:after { content: "verified"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; display: inline-block; order: -1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .header .datetime { color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .sticky-entry .datetime { display: none; } .entry .datetime, .entry .datetime a, .comment .header .datetime { text-transform: lowercase; color: var(--icon-color); } .entry .datetime a:hover { color: var(--icon-hover-color); } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; display: inline-block; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .security-private .access-filter:before { content: "visibility_off"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; display: inline-block; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .restrictions-NSFW .restrictions:before { content: "warning"; font-family: Material Symbols Outlined; font-size: 22px; display: inline-block; color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; vertical-align: middle; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .restrictions-18 .restrictions:before { content: "18+"; font-size: 16px; font-family: arial, sans-serif; font-weight: bold; vertical-align: middle; color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; vertical-align: middle; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .entry .contents, .comment .contents { padding: 0 2em; margin: 2em 0; } #primary .userpic { float: right; margin-left: 1em; } .two-columns-right #primary .userpic { float: left; margin-right: 1em; margin-left: 0; } #primary .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border-radius: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); } @media (min-width: 640px) { #primary .userpic img { max-width: var(--userpic-size); max-height: var(--userpic-size); } } @media (min-width: 1280px) { .has-userpic .userpic { position: absolute; top: 0; right: -10px; transform: translateX(100%); } .two-columns-right .has-userpic .userpic { left: -10px; transform: translateX(-100%); right: auto; } } .entry .poster { font-size: 0; display: block; } .entry .poster .ljuser { font-size: var(--text-size); padding-right: 0.25em; } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster.empty { display: none; } .poster .ljuser:before, .full .poster:before { font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; } .entry .poster .ljuser:nth-child(1):before, .full .poster:before { content: "account_circle"; } .entry .poster .ljuser:nth-child(2):before { content: "public"; } .entry-content, .comment-content { margin-top: 2em; } @media (min-width: 1024px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li::marker, .comment-content li::marker { color: var(--entry-icon-color); } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action { display: flex; align-items: center; line-height: 1; } .cuttag-action img { display: none; } .cuttag-action:before { content: "content_cut"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 5px; } .cuttag-action:after { content: ""; height: 0; width: 100%; border-bottom: 1px dashed var(--entry-border-color); } .cut-open, .cut-close { display:none; } .cut-text{ font-weight: normal; margin-left: 27px; display: block; } .metadata { margin-top: 2em; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata-label { display: none; } .metadata img { vertical-align: middle; } .metadata li { display: inline; margin-right: 1em; } #metadata-music:before { content: "queue_music"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-mood:before { content: "face"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-location:before { content: "flag"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-xpost:before { content: "add_location"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } .footer { clear: both; } .entry .footer { margin-top: 1em; background: var(--heading-background-color); border-radius: 0 0 8px 8px; } .entry .footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .entry div.tag { background: var(--entry-background-color); border-radius: 0 0 8px 8px; flex: 0 0 100%; } .entry .tag ul { margin: 0; padding: 0 5px 5px; } .entry .tag ul li { display: inline-block; margin-top: 5px; line-height: 1; font-size: 0; } .entry .tag ul li a { display: inline-block; padding: 8px; border-radius: 8px; font-size: var(--text-size); color: var(--heading-link-color); background: var(--heading-background-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .entry .tag ul li a:hover { color: var(--heading-link-hover-color); } .entry .tag-text { display: none; } .tag-nav-trigger { float: right; } .entry div.tag { flex: 0 0 100%; order: 3; } ul.entry-management-links, ul.entry-interaction-links { margin: 0; padding: 5px 10px; } ul.entry-management-links li, ul.entry-interaction-links li { display: inline; padding: 0 5px; } ul.entry-management-links li a, ul.entry-interaction-links li a { color: var(--heading-link-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } ul.entry-management-links li a:hover, ul.entry-interaction-links li a:hover { color: var(--heading-link-hover-color); } ul.entry-management-links li a img { display: none; } ul.entry-management-links li a:before { font-family: Material Symbols Outlined; font-size: 24px; } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "add_alert"; } .icon-links .link_next a:before { content: "arrow_forward"; } /*--------------- comments ---------------*/ .comment-pages { color: var(--heading-color); background: var(--heading-background-color); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 1em 2em; margin-top: 10px; } .comment-pages a { color: var(--heading-link-color); } .comment-pages a:hover { color: var(--heading-link-hover-color); } .comment-pages:first-of-type { margin-top: var(--spacing); } .comment-pages:last-of-type { margin-bottom: var(--spacing); } .comment-wrapper { min-width: 15em; } .thread-depth { color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .comment-title { font-weight: normal; padding: 0; margin: 0; } .comment-date-text, .comment-from-text { display: none; } .comment .poster-ip { display: block; } .partial .comment { background: var(--entry-background-color); margin: var(--spacing) 0; padding: 0.5em 1em; border-radius: 8px; } .comment .footer { background: var(--heading-background-color); border-radius: 0 0 8px 8px; } .comment .footer .inner { display: flex; flex-wrap: wrap; align-items: center; padding: 5px 10px; color: var(--heading-color); } .multiform-checkbox { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); padding: 0 5px; } ul.comment-management-links { margin: 0; padding: 0; list-style: none; order: -1; margin-right: auto; } ul.comment-management-links li { display: inline; margin: 0 5px; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a:before { font-family: Material Symbols Outlined; font-size: 24px; } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } ul.comment-interaction-links { margin: 0; padding: 0; } ul.comment-interaction-links li { display: inline; margin: 0 5px; } ul.comment-management-links li a, ul.comment-interaction-links li a { color: var(--heading-link-color); background: var(--heading-background-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } ul.comment-management-links li a:hover, ul.comment-interaction-links li a:hover { color: var(--heading-link-hover-color); } .bottomcomment { color: var(--heading-color); background: var(--heading-background-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); border-radius: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 10px; } .bottomcomment ul.entry-management-links { margin-right: auto; padding: 0; } .bottomcomment ul.entry-interaction-links { margin-left: auto; padding: 0; } .bottomcomment label { flex-basis: 100%; text-align: center; } #multiform_mode, #multiform_submit { border: 0; font-size: var(--text-size); font-family: var(--main-font); margin: 0 2px; padding: 9px; background: var(--icon-background-color); border-radius: 8px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { padding: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--entry-border-color); background: var(--entry-background-color); color: var(--text-color); font-family: var(--main-font); font-size: var(--text-size); border-radius: 8px; } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: var(--heading-background-color); border: 0; font-size: 1em; padding: 0.5em; color: var(--heading-link-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); line-height: 1; } #postform { padding: 2em; background: var(--entry-background-color); border: 0; border-radius: 8px; margin: var(--spacing) 0; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .tags-container, .icons-container { background: var(--entry-background-color); margin: var(--spacing) 0; border-radius: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.2em; line-height: 1.2; font-weight: normal; padding: 6px; margin: 0; color: var(--heading-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .tags-container .contents { padding: 2em; } #archive-year .month .footer .inner, .manage-link { line-height: 1.2; padding: 10px; background: var(--heading-background-color); border-radius: 0 0 8px 8px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } #archive-year .month .footer a, .manage-link a { color: var(--heading-link-color); } #archive-year .month .footer a:hover, .manage-link a:hover { color: var(--heading-link-hover-color); } /*------------ archive ------------*/ .month caption { display: none; } .day-date { display: none; } .month table { text-align: center; width: 100%; border-collapse: collapse; } table.month td { padding: 0.5em; width: 2em; height: 2em; font-weight: normal; border-top: 1px solid var(--entry-border-color); border-right: 1px solid var(--entry-border-color); } table.month th { padding: 0.5em; font-weight: normal; border-right: 1px solid var(--entry-border-color); } table.month td:last-child, table.month th:last-child { border-right: none; } table.month td.day-has-entries .label, table.month td p { display: inline-block; margin: 0; } table.month td p:before { content: "[ "; color: var(--text-color); } table.month td p:after { content: " ]"; color: var(--text-color); } .month dl { margin: var(--spacing) 0 0; } .month dt { float: left; display: block; width: 100%; background: var(--heading-background-color); border-radius: 8px 8px 0 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); font-size: 1.2em; line-height: 1.2; margin-bottom: 2em; padding: 10px; box-sizing: border-box; } #primary .month dt a { color: var(--heading-link-color); } #primary .month dt a:hover { color: var(--heading-link-hover-color); } .month dl h3 { font-size: 1em; padding: 0; margin: 0; display: inline; } .month dl .time { padding-right: 0.5em; } .page-month .month .entry-poster { margin-right: 0.5em; } .page-month .month .entry-poster.empty { margin-right: 0; } .month dd { margin: 0; padding: 2em; background: var(--entry-background-color); border-radius: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); margin-bottom: var(--spacing); } .month .tag ul { display: inline; margin: 0; padding: 0; } .month .tag ul li { display: inline; } .month dl br { display: none; } .month dl .tag-text { font-style: normal; } #archive-year .navigation ul { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; color: var(--heading-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } #archive-year .navigation li a { display: block; padding: 7px; background: var(--icon-background-color); color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); border-radius: 8px; } #archive-year .navigation li a:hover { color: var(--icon-hover-color); } #archive-month .navigation ul form { display: flex; align-items: center; } #archive-month .navigation select { background: var(--icon-background-color); border: 0; border-radius: 8px; font-family: var(--main-font); font-size: var(--text-size); color: var(--icon-color); padding: 9px; } #archive-month .navigation input { background: var(--icon-background-color); border: 0; border-radius: 8px; font-family: var(--main-font); font-size: var(--text-size); color: var(--icon-color); padding: 9px; } #archive-month .navigation li { padding: 0 5px; color: var(--heading-color); } #archive-month .navigation li a { color: var(--heading-link-color); } #archive-month .navigation li a:hover { color: var(--heading-link-hover-color); } /*------------ tags ------------*/ ul.ljtaglist { font-family: var(--date-font); margin: 0 0 0 1em; padding: 0; list-style: none; } ul.ljtaglist li:before { content: "chevron_right"; font-family: Material Symbols Outlined; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); transition: all 0.2s linear; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0; padding: 1em; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { border-top: 1px solid var(--entry-border-color); padding: 1em; } .icons-container .icon { border-top: 1px solid var(--entry-border-color); display: flex; flex-wrap: wrap; } .icon-image { order: 2; padding: 1em; border-left: 1px solid var(--entry-border-color); } .icon-image img { display: block; } .icon-info { padding: 1em; flex: 1; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*------------ navigation ------------*/ .navigation ul { margin: var(--spacing) 0; padding: 0; list-style: none; } .navigation ul { background: var(--heading-background-color); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); border-radius: 8px; overflow: hidden; padding: 5px; } .navigation li { display: inline; } li.page-back { float: left; font-size: 0; } li.page-forward { float: right; font-size: 0; } li.page-back a, li.page-forward a { display: block; padding: 7px; background: var(--icon-background-color); color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); border-radius: 8px; } li.page-back a:hover, li.page-forward a:hover { color: var(--icon-hover-color); } li.page-back a:before, li.page-forward a:before { display: block; font-family: Material Symbols Outlined; font-size: 26px; line-height: 26px; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } /*------------ sidebar ------------*/ @media (min-width: 1024px) { .two-columns #secondary { width: var(--sidebar-width); } .two-columns-left #secondary { float: left; margin-left: calc(-1 * var(--sidebar-width)); } .two-columns-right #secondary { float: right; margin-right: calc(-1 * var(--sidebar-width)); } } #secondary .module { margin: var(--spacing) 0; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); border-radius: 8px; overflow: hidden; } #secondary .module-content { background: var(--entry-background-color); border-radius: 0 0 8px 8px; } .module h2 { background: var(--heading-background-color); font-size: 1.2em; font-weight: normal; display: flex; align-items: center; margin: 0; padding: 5px; color: var(--heading-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .module h2 a { color: var(--heading-link-color); } .module h2 a:hover { color: var(--heading-link-hover-color); } .module h2:before { float: left; text-align: center; font-family: Material Symbols Outlined; font-size: 26px; line-height: 26px; padding: 7px; margin-right: 10px; color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; } #secondary .module-content { padding: 1em; } .module-content ul { margin: 0; padding: 0; list-style: none; } .module-userprofile { color: var(--heading-color); } @media (min-width: 1024px) { .module-userprofile:after { content: ""; display: block; width: 100%; height: var(--sidebar-image-height); background: var(--sidebar-image); background-size: cover; } } .module-userprofile .module-content { display: flex; align-items: center; padding: 5px !important; background: var(--heading-background-color) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); font-size: 1.2em; border-radius: 8px 8px 0 0 !important; } .journal-name { margin-left: 10px; } .module-userprofile .userpic img { max-width: 40px; max-height: 40px; width: auto; height: auto; border-radius: 8px; display: block; } .module-typelist h2:before { content: "explore"; } .module-tags_list h2:before, .module-tags_multilevel h2:before, .module-tags_cloud h2:before { content: "loyalty"; } .module-calendar h2:before { content: "calendar_month"; } .module-customtext h2:before { content: "comment"; } .module-pagesummary h2:before { content: "article"; } .module-active h2:before { content: "local_fire_department"; } .module-search h2:before { content: "search"; } .module-cuttagcontrols h2:before { content: "content_cut"; } .module-syndicate h2:before { content: "rss_feed"; } .module-subscriptionfilters h2:before { content: "filter_alt"; } .module-credit h2:before { content: "code_off"; } .module-typelist .module-content, .module-tags_list .module-content, .module-pagesummary .module-content, .module-active .module-content, .module-subscriptionfilters .module-content { padding: 0 !important; } .module-typelist li, .module-tags_list li, .module-pagesummary li, .module-active li, .module-subscriptionfilters li { border-top: 1px solid var(--entry-border-color); padding: 0.5em 1em; } #secondary .module-content li:before { content: "chevron_right"; font-family: Material Symbols Outlined; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); transition: all 0.2s linear; } #secondary .module-content li:hover:before { margin-right: 10px; } #secondary .module-content li:first-child { border: 0; } .module-tags_cloud li { display: inline; } .module-tags_multilevel ul { padding-left: 1em; } .module-tags_multilevel ul:first-child { padding-left: 0; } .module-tags_cloud li:before { display: none; } .module-calendar .module-content { text-align: center; padding: 0 !important; } .module-calendar table { margin: 0 auto; width: 100%; border-collapse: collapse; } .module-calendar td { border-top: 1px solid var(--entry-border-color); border-right: 1px solid var(--entry-border-color); padding: 0.5em 0; } .module-calendar td:last-child, .module-calendar th:last-child { border-right: none; } .module-calendar th { padding: 0.5em 0; border-right: 1px solid var(--entry-border-color); } .module-calendar .module-header a { padding-right: 0.25em; } .entry-day { background: var(--heading-background-color); } .entry-day a { background: var(--heading-background-color); color: var(--heading-link-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .entry-day a:hover { color: var(--heading-link-hover-color); } .module-credit ul { display: none; } .module-credit .module-content:before { content: 'Theme "Bloom" by myrtillenne'; } .module-search .module-content { text-align: center; } .search-form .search-box-item, .search-form .search-button-item { display: block; } input.search-box { margin: 0 auto; background: var(--entry-background-color); border: 1px solid var(--entry-border-color); border-radius: 8px; padding: 5px; font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color-alt); } input.search-button { padding: 5px 10px; background: var(--heading-background-color); border-radius: 8px; color: var(--heading-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .module .manage-link, .module-userprofile h2, .journal-website-name, ul.userlite-interaction-links, .module-time, .module-powered { display: none; } /*------------ footer ------------*/ #footer { clear: both; background: var(--heading-background-color); padding: 5px; text-align: center; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); } .page-top a { font-size: 0; color: var(--icon-color); } .page-top a:hover { color: var(--icon-hover-color); } .page-top a:before { display: inline-block; content: "arrow_upward"; font-family: "Material Symbols Outlined"; font-size: 26px; line-height: 26px; padding: 7px; background: var(--icon-background-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); border-radius: 8px; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; padding: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); width: 200px; text-align: center; border-radius: 8px; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; padding: 0.5em; margin: 0; } div.ContextualPopup .Userpic { border: 0; float: none; padding: 10px; } div.ContextualPopup .Userpic img { max-width: 100px; max-height: 100px; width: auto; height: auto; display: block; margin: 0 auto; border-radius: 8px; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; } div.ContextualPopup li { padding: 0.5em; border-top: 1px solid var(--entry-border-color); line-height: 1; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--entry-background-color); color: var(--text-color); justify-content: center; padding: 0.75em 0; border-bottom: 1px solid var(--border-color); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { text-decoration: none; color: var(--link-hover-color); } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { font-weight: normal; font-size: var(--text-size); color: var(--text-color); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--entry-border-color); background: var(--entry-background-color) !important; font-size: var(--text-size) !important; color: var(--text-color); font-family: var(--main-font) !important; border-radius: 8px; padding: 6px 0 !important; line-height: 1; } #lj_controlstrip input[type="submit"] { font-size: 1em; padding: 8px !important; color: var(--heading-link-color); border: 1px solid transparent; background: var(--heading-background-color) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic img { border-radius: 8px; }
Into the "Custom stylesheet URL" field paste the following.
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&family=Nunito&family=Shadows+Into+Light&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

RESOURCES

icon font by Google
images from freepik by freepik, tawatchai07, svstudioart

comments

Aurora

Sat, 18 Mar 2023 00:09:31 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

multiple columns
left or right sidebar
navigation, links list, custom text and tags list
4 colour schemes
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "2 Column (sidebar on the left)" or the "2 Columns (sidebar on the right)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "text-only" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Modules" tab and set "Custom text" to number 5.
Click on the "Custom CSS" tab. Choose one of the color schemes and paste the code into the "Use embeded CSS" field. Press enter and paste the layout code into the field as well. Uncheck "Use layout's stylesheet(s)".

Magenta-orange:/*------------------------------------- - layout - aurora - magenta-orange (tabula rasa) - https://myrtillenne.dreamwidth.org -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 14px; --line-height: 1.5; --main-font: Poppins, sans-serif; --title-font: Poppins, sans-serif; --background-color: #e7dfd8; --text-color: #473a32; --link-color: #bc549d; --link-hover-color: #eca24f; --text-color-alt: #473a32; --link-color-alt: #bc549d; --link-hover-color-alt: #eca24f; --title-color: #fbebd9; --title-shadow-color: #bc549d; --header-height: 250px; --gradient1-color: #bc549d; --gradient2-color: #eca24f; --header-border1-color:rgba(255, 255, 255, 0.3); --header-border2-color:rgba(255, 255, 255, 0.5); --header-border3-color:rgba(255, 255, 255, 0.7); --column-number: 2; --column-width: 500px; --column-spacing: 50px; --entry-width: 800px; /* on entry pages */ --entry-background-color: #f8f4f1; --entry-background-color-alt: #fbebd9; --sidebar-width: 400px; --sidebar-link-color: #473a32; --sidebar-link-hover-color: #473a32; --userpic-size: 80px; }
Green-red:/*------------------------------------- - layout - aurora - green-red (tabula rasa) - https://myrtillenne.dreamwidth.org -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 14px; --line-height: 1.5; --main-font: Poppins, sans-serif; --title-font: Poppins, sans-serif; --background-color: #E0E4E4; --text-color: #506363; --link-color: #4DC8B9; --link-hover-color: #E46B96; --text-color-alt: #506363; --link-color-alt: #357D75; --link-hover-color-alt: #506363; --title-color: #F8FAFA; --title-shadow-color: #4DC8B9; --header-height: 250px; --gradient1-color: #4DC8B9; --gradient2-color: #E46B96; --header-border1-color:rgba(255, 255, 255, 0.3); --header-border2-color:rgba(255, 255, 255, 0.5); --header-border3-color:rgba(255, 255, 255, 0.7); --column-number: 2; --column-width: 500px; --column-spacing: 50px; --entry-width: 800px; /* on entry pages */ --entry-background-color: #F8FAFA; --entry-background-color-alt: #D2E6E3; --sidebar-width: 400px; --sidebar-link-color: #E46B96; --sidebar-link-hover-color: #4DC8B9; --userpic-size: 80px; }
Blue-green:/*------------------------------------- - layout - aurora - blue-green (tabula rasa) - https://myrtillenne.dreamwidth.org -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 14px; --line-height: 1.5; --main-font: Poppins, sans-serif; --title-font: Poppins, sans-serif; --background-color: #324452; --text-color: #C9CDC7; --link-color: #0197F1; --link-hover-color: #9CD980; --text-color-alt: #000; --link-color-alt: #C0E7AD; --link-hover-color-alt: #C6D5BF; --title-color: #1D262E; --title-shadow-color: #0181CD; --header-height: 250px; --gradient1-color: #0181CD; --gradient2-color: #88D165; --header-border1-color:rgba(29, 38, 46, 0.3); --header-border2-color:rgba(29, 38, 46, 0.5); --header-border3-color:rgba(29, 38, 46, 0.7); --column-number: 2; --column-width: 500px; --column-spacing: 50px; --entry-width: 800px; /* on entry pages */ --entry-background-color: #1D262E; --entry-background-color-alt: #349FA5; --sidebar-width: 400px; --sidebar-link-color: #C6D5BF; --sidebar-link-hover-color: #C0E7AD; --userpic-size: 80px; }
Grey-purple:/*------------------------------------- - layout - aurora - grey-purple (tabula rasa) - https://myrtillenne.dreamwidth.org -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 14px; --line-height: 1.5; --main-font: Poppins, sans-serif; --title-font: Poppins, sans-serif; --background-color: #D3D5DC; --text-color: #3D3D4B; --link-color: #6C6CD5; --link-hover-color: #3D3D4B; --text-color-alt: #3D3D4B; --link-color-alt: #6C6CD5; --link-hover-color-alt: #3D3D4B; --title-color: #F7F7F9; --title-shadow-color: #3D3D4B; --header-height: 250px; --gradient1-color: #AFB1C0; --gradient2-color: #8C8CD9; --header-border1-color:rgba(255, 255, 255, 0.3); --header-border2-color:rgba(255, 255, 255, 0.5); --header-border3-color:rgba(255, 255, 255, 0.7); --column-number: 2; --column-width: 500px; --column-spacing: 50px; --entry-width: 800px; /* on entry pages */ --entry-background-color: #F7F7F9; --entry-background-color-alt: #E2E2F5; --sidebar-width: 400px; --sidebar-link-color: #3D3D4B; --sidebar-link-hover-color: #6C6CD5; --userpic-size: 80px; }
Layout:/*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { padding: 0; margin: 0; background-color: var(--background-color); font-family: var(--main-font); line-height: var(--line-height); font-size: var(--text-size); color: var(--text-color); } a, a:link, a:visited { text-decoration: none; transition: color 0.4s; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } q { font-style: italic; } blockquote { margin: 1em 0; background: var(--entry-background-color-alt); clip-path: polygon( 0 0, 100% 0%, 100% calc(100% - 20px), calc(100% - 30px) 100%, 0 calc(100% - 15px) ); padding: 1em 1em 1.5em; color: var(--text-color-alt); } blockquote a { color: var(--link-color-alt); } blockquote a:hover { color: var(--link-hover-color-alt); } @media (min-width: 1024px) { .two-columns-left #canvas { border-left: var(--sidebar-width) solid transparent; } .two-columns-right #canvas { border-right: var(--sidebar-width) solid transparent; } } #primary { margin: var(--column-spacing) auto 0; } @media (min-width: 800px) { #primary { padding: 0 var(--column-spacing); max-width: var(--entry-width); } .page-recent #primary, .page-read #primary, .page-archive #primary, .page-day #primary { max-width: calc( var(--column-number) * var(--column-width) + (var(--column-number) - 1) * var(--column-spacing) ); } } #entries > .inner:first-child { column-count: var(--column-number); column-gap: var(--column-spacing); column-width: var(--column-width); } /*--------------- header ---------------*/ #header { position: relative; height: var(--header-height); padding-bottom: 20px; background-image: linear-gradient( var(--gradient1-color), var(--gradient2-color) ); clip-path: polygon( 0 0, 100% 0%, 100% calc(100% - 30px), 40% 100%, 0 calc(100% - 30px) ); z-index: 2; font-family: var(--title-font); color: var(--title-color); text-shadow: 1px 1px 0 var(--title-shadow-color); } #header > .inner { height: 100%; clip-path: polygon( 0 0, 100% 0%, 100% calc(100% - 30px), 40% 100%, 0 calc(100% - 30px) ); display: flex; flex-direction: column; justify-content: flex-end; padding: 2em 2em 60px; box-sizing: border-box; } #header > .inner:after { content: ""; position: absolute; bottom: 20px; left: 0; width: 100%; height: 40px; background: var(--header-border1-color); clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 40% 30px); } #header:before { content: ""; position: absolute; bottom: 10px; left: 0; width: 100%; height: 40px; background: var(--header-border2-color); clip-path: polygon( 0 0, 0 calc(100% - 30px), 40% 100%, 100% calc(100% - 30px), 100% 0, 40% 30px ); } #header:after { content: ""; position: absolute; bottom: 0px; left: 0; width: 100%; height: 40px; background: var(--header-border3-color); clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 40% 30px); } @media (min-width: 1024px) { .two-columns #header { position: fixed; top: 0; width: var(--sidebar-width); } .two-columns-left #header { left: 0; } .two-columns-right #header { right: 0; } } h1#title { font-size: 2em; margin: 0; padding: 0; line-height: 1; } h1#title a { color: var(--title-color); } h2#subtitle { font-size: 1em; margin: 0; padding: 0.25em 0 0; font-weight: normal; } h2#pagetitle { display: none; } /*--------------- entries ---------------*/ .entry-wrapper { margin-bottom: var(--column-spacing); break-inside: avoid; display: inline-block; width: 100%; } .page-entry .entry-wrapper { max-width: var(--entry-width); display: block; } .entry, .comment { background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient(var(--gradient1-color), var(--gradient2-color)) 1; padding: 10px; } .header { background: var(--entry-background-color-alt); clip-path: polygon( 0 0, 100% 0%, 100% calc(100% - 20px), calc(100% - 30px) 100%, 0 calc(100% - 15px) ); padding: 10px; color: var(--text-color-alt); } .has-userpic .entry .header { display: flex; flex-direction: column; justify-content: center; min-height: var(--userpic-size); } @media (min-width: 640px) { .has-userpic .entry .header .inner { width: calc(100% - var(--userpic-size)); box-sizing: border-box; } } .header .inner { padding: 10px 10px 20px; line-height: 1; } .entry .entry-title, .full .comment-title { font-size: 1.2em; margin: 0 0 0.5em; padding: 0; font-family: var(--title-font); position: relative; line-height: 1; } .entry .entry-title, .entry .entry-title a, .full .comment-title a { color: var(--link-color-alt); } .entry .entry-title a:hover { color: var(--link-hover-color-alt); } .no-subject .entry .entry-title, .no-subject .comment .comment-title { margin: 0; padding: 0; } .sticky-entry-icon, .admin-post-icon { display: none; } .restrictions img, .access-filter img { display: none; } .month .restrictions, .month .access-filter, .month .admin-post-icon, .month .sticky-entry-icon { display: none; } .security-protected .access-filter:before { content: "LOCKED"; padding-right: 0.25em; } .security-private .access-filter:before { content: "PRIVATE"; padding-right: 0.25em; } .restrictions-NSFW .restrictions:before { content: "NSFW"; padding-right: 0.25em; } .restrictions-18 .restrictions:before { content: "18+"; padding-right: 0.25em; } .entry .datetime a { color: var(--text-color-alt); } .has-userpic .userpic { float: right; } .entry .userpic img, .comment .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; } .has-userpic .entry .userpic { margin-top: 10px; } @media (min-width: 640px) { .entry .userpic img { max-width: var(--userpic-size); max-height: var(--userpic-size); clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 23px) 100%, 0 100% ); } .has-userpic .entry .userpic { margin-top: calc(-1 * (var(--userpic-size) + 10px)); margin-right: 10px; height: var(--userpic-size); display: flex; align-items: flex-end; } } .entry .poster { font-size: 0; } .entry .poster .ljuser { font-size: var(--text-size); margin-right: 0.5em; } .entry .poster .ljuser a, .comment .poster .ljuser a { color: var(--text-color); } .entry .poster .ljuser:before, .comment .poster .ljuser:before { content: "@"; color: var(--link-color); } .poster .ljuser img { display: none; } .poster.empty { display: block; height: 1px; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .entry-content { margin: 2em 1em; clear: left; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol { padding-left: 1em; } .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .cuttag-action img { display: none; } .cuttag-action:before { content: "+"; display: inline-block; font-size: 26px; line-height: 22px; vertical-align: bottom; font-family: arial; } .cuttag-action-after:before { transform: rotate(45deg); } .cut-open, .cut-close { display:none; } .cut-text { font-size: var(--text-size); font-weight: normal; display: inline; margin-left: 0.5em; } .metadata ul { list-style: none; margin: 0; padding: 0 1em; } .metadata li { margin-bottom: 0.25em; } .metadata-label, .tag-text { display: inline-block; padding: 0.25em 0.5em; background: var(--entry-background-color-alt); color: var(--text-color-alt); } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; } ul.entry-management-links, ul.entry-interaction-links { margin: 0; padding: 0; display: inline; } .entry ul.entry-management-links::before { content: ""; display: block; margin-top: 2em; } ul.entry-management-links li, ul.entry-interaction-links li { display: inline-block; margin-right: 0.5em; font-weight: bold; } ul.entry-management-links li a, ul.entry-interaction-links li a { padding: 0.25em 0; display: block; color: var(--sidebar-link-color); } ul.entry-management-links li a:hover, ul.entry-interaction-links li a:hover { color: var(--sidebar-link-hover-color); } ul.entry-management-links li:after, ul.entry-interaction-links li:after { content: ""; display: block; width: 20px; height: 1px; background-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ); transition: all 0.4s linear; } ul.entry-management-links li:hover:after, ul.entry-interaction-links li:hover:after { width: 100%; } .entry .footer, .comment .footer { padding: 0 1em 1em; } /*--------------- comments ---------------*/ #comments { margin-bottom: var(--column-spacing); } .comment-pages { margin-bottom: 10px; background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient(var(--gradient1-color), var(--gradient2-color)) 1; padding: 1em; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .comment { margin-bottom: var(--column-spacing); } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .comment-date-text, .comment-from-text { display: none; } @media (min-width: 640px) { .comment .userpic img { max-width: var(--userpic-size); max-height: var(--userpic-size); } } .comment .userpic { margin-top: 10px; } .comment-content { padding: 2em 1em; } .multiform-checkbox { background: var(--entry-background-color-alt); color: var(--text-color-alt); display: inline-block; padding: 0.25em 0.5em; margin-right: 0.5em; } ul.comment-management-links, ul.comment-interaction-links { margin: 0; padding: 0; display: inline; } ul.comment-management-links li, ul.comment-interaction-links li { display: inline-block; font-weight: bold; margin-right: 0.5em; } ul.comment-management-links li a, ul.comment-interaction-links li a { padding: 0.25em 0; display: block; color: var(--sidebar-link-color); } ul.comment-management-links li a:hover, ul.comment-interaction-links li a:hover { color: var(--sidebar-link-hover-color); } ul.comment-management-links li:after, ul.comment-interaction-links li:after { content: ""; display: block; width: 20px; height: 1px; background-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ); transition: all 0.4s linear; } ul.comment-management-links li:hover:after, ul.comment-interaction-links li:hover:after { width: 100%; } .bottomcomment { margin-bottom: var(--column-spacing); background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient(var(--gradient1-color), var(--gradient2-color)) 1; padding: 1em; } .bottomcomment select { border: 0; background: var(--entry-background-color-alt); color: var(--text-color-alt); font-size: var(--text-size); font-family: var(--main-font); } .bottomcomment input { background: transparent; border: 0; font-size: var(--text-size); padding: 0.5em; color: var(--link-color); line-height: 1; font-family: var(--main-font); } .partial .comment { margin-bottom: var(--column-spacing); background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient(var(--gradient1-color), var(--gradient2-color)) 1; padding: 1em; } .partial .comment-title { margin: 0; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #postform { margin-bottom: var(--column-spacing); background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient(var(--gradient1-color), var(--gradient2-color)) 1; padding: 2em; } #qrform { border: 0; padding: 2em 0 0; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 0; background: var(--entry-background-color-alt); color: var(--text-color-alt); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: var(--text-size); padding: 0.5em; color: var(--link-color); line-height: 1; } /*------------ archive, tags, icons containers ------------*/ #archive-month .month, .tags-container, .icons-container { margin-bottom: var(--column-spacing); background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient(var(--gradient1-color), var(--gradient2-color)) 1; padding: 10px; } .month-wrapper { margin-bottom: var(--column-spacing); break-inside: avoid; display: inline-block; width: 100%; } .month-wrapper div.month { background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient(var(--gradient1-color), var(--gradient2-color)) 1; padding: 10px; } .month-wrapper .month .contents, .tags-container .contents, .icons-container .contents { padding: 0 1em; } #archive-year > .inner:first-child { column-count: var(--column-number); column-gap: var(--column-spacing); column-width: var(--column-width); } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.2em; margin: 0; padding: 0; font-family: var(--title-font); line-height: 1; color: var(--link-color-alt); } .month .footer, #primary .manage-link { display: inline-block; margin: 1em; } .month .footer a, #primary .manage-link a { padding: 0.25em 0; display: block; color: var(--sidebar-link-color); } .month .footer a:hover, #primary .manage-link a:hover { color: var(--sidebar-link-hover-color); } .month .footer:after, #primary .manage-link:after { content: ""; display: block; width: 20px; height: 1px; background-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ); transition: all 0.4s linear; } .month .footer:hover:after, #primary .manage-link:hover:after { width: 100%; } /*------------ archive ------------*/ .day-date { display: none; } .month caption { display: none; } table.month { margin: 0 auto; border-collapse: collapse; width: 100%; border: none; text-align: center; } table.month td, table.month th { padding: 0.5em; height: auto; } table.month td.day-has-entries .label, table.month td p { display: inline-block; margin: 0; } table.month td p:before { content: "[ "; } table.month td p:after { content: " ]"; } .month dl { margin: 0; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dl dt { background: var(--entry-background-color-alt); clip-path: polygon( 0 0, 100% 0%, 100% calc(100% - 20px), calc(100% - 30px) 100%, 0 calc(100% - 15px) ); padding: 10px 20px 20px; font-size: 1.2em; font-family: var(--title-font); } .month dl dt a { color: var(--link-color-alt); } .month dl dt a:hover { color: var(--link-hover-color-alt); } dd { margin: 0; padding: 1em; } .month dd > span { padding-right: 0.25em; } #archive-year .navigation ul, #archive-month .navigation ul form { display: inline-block; } #archive-year .navigation li, #archive-month .navigation li { display: inline-block; padding: 0 0.5em; } #archive-month .navigation input, #archive-month .navigation select { border: 0; background: var(--entry-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } /*------------ tags ------------*/ ul.ljtaglist { margin: 0 0 0 1em; padding: 0; list-style: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0; padding: 0; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { margin-top: 1em; } .icons-container .icon { display: flex; flex-wrap: wrap; margin-top: 1em; } .icon-image img { display: block; } .icon-info { padding-left: 1em; flex: 1; } .icon-info div { margin-bottom: 0.25em; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .default.label { display: inline-block; padding: 0.25em 0.5em; background: var(--entry-background-color-alt); color: var(--text-color-alt); } .keywords-label { display: inline-block; padding: 0.25em 0.5em; background: var(--entry-background-color-alt); color: var(--text-color-alt); } .icon-pages p { margin: 0; } /*------------ sidebar ------------*/ #secondary { position: relative; background: var(--entry-background-color); margin-bottom: -45px; } #secondary .module-wrapper { padding: 3em 2em; } #secondary > .inner:first-child { padding-bottom: 45px; } @media (min-width: 1024px) { .two-columns #secondary { position: fixed; bottom: 0; height: 100%; width: var(--sidebar-width); z-index: 1; margin: 0; } .two-columns-left #secondary { left: 0; } .two-columns-right #secondary { right: 0; } .two-columns #secondary > .inner:first-child { height: 100%; padding-top: var(--header-height); box-sizing: border-box; } .two-columns #secondary .module-wrapper { height: 100%; box-sizing: border-box; } .two-columns .module-section-one { height: 100%; overflow: auto; } } .module-section-one { scrollbar-width: thin; scrollbar-color: var(--entry-background-color-alt) var(--entry-background-color); } .module-section-one::-webkit-scrollbar { width: 10px; height: 10px; } .module-section-one::-webkit-scrollbar-track { background: var(--entry-background-color); } .module-section-one::-webkit-scrollbar-thumb { background: var(--entry-background-color-alt); border: 3px solid var(--entry-background-color); } .module-section-one::-webkit-scrollbar-corner { background: var(--entry-background-color); } .module-navlinks, .module-typelist, .module-navlinks .module-content, .module-typelist .module-content, .module-navlinks .module-content ul, .module-typelist .module-content ul { display: inline; } .module a { color: var(--sidebar-link-color); } .module a:hover { color: var(--sidebar-link-hover-color); } .module-content ul, .module-content ul { padding: 0; margin: 0; list-style: none; } .module-navlinks li, .module-typelist li { display: inline-block; margin-right: 0.5em; } .module li a { padding: 0.25em 0; display: inline-block; font-weight: bold; position: relative; } .module li a:after { content: ""; display: block; width: 20px; height: 1px; background-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ); transition: all 0.4s linear; position: absolute; left: 0; bottom: 0; } .module li a:hover:after { width: 100%; } .module-tags_list, .module-tags_cloud, .module-tags_multilevel, .module-customtext { overflow: auto; margin-top: 1.5em; } .module-tags_multilevel ul { padding-left: 1em; } .module-tags_multilevel ul:first-child { padding-left: 0; } .module-tags_cloud li, .module-tags_cloud li a { font-size: 1em !important; } .module-tags_cloud li { display: inline-block; margin-right: 0.25em; } .module .non-link-tag { display: inline-block; padding: 0.25em 0.5em; margin-top: 0.5em; background: var(--entry-background-color-alt); color: var(--text-color-alt); } .module-customtext { background: var(--entry-background-color-alt); clip-path: polygon( 0 0, 100% 0%, 100% calc(100% - 20px), calc(100% - 30px) 100%, 0 calc(100% - 15px) ); padding: 1em 1em 1.5em; color: var(--text-color-alt); } .module-customtext a { color: var(--link-color-alt); } .module-customtext a:hover { color: var(--link-hover-color-alt); } .module h2, .module .manage-link, .module-userprofile, .module-calendar, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered { display: none; } /*------------ navigation ------------*/ .navigation { background: var(--entry-background-color); margin-bottom: var(--column-spacing); display: inline-block; width: 100%; } .navigation ul { margin: 0; padding: 0; display: inline-block; background-image: linear-gradient( -135deg, var(--entry-background-color) 30px, transparent 30px ), linear-gradient(-135deg, var(--header-border1-color) 40px, transparent 30px), linear-gradient(-135deg, var(--header-border1-color) 50px, transparent 30px), linear-gradient(-135deg, var(--header-border1-color) 60px, transparent 30px), linear-gradient(var(--gradient1-color), var(--gradient2-color)); padding: 0.5em 80px 0.5em 0.5em; } .navigation li { line-height: 1; display: inline; padding: 0 0.5em; color: var(--title-color); text-shadow: 1px 1px 0 var(--title-shadow-color); } .navigation li a { color: var(--title-color); } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } /*------------ footer ------------*/ #footer { position: relative; padding-top: 20px; background-image: linear-gradient( var(--gradient2-color), var(--gradient1-color) ); clip-path: polygon(0 30px, 0 100%, 100% 100%, 100% 30px, 60% 0); z-index: 2; } #footer .inner { position: relative; clip-path: polygon(0 30px, 0 100%, 100% 100%, 100% 30px, 60% 0); height: 40px; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; } #footer .inner:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 40px; background: var(--header-border1-color); clip-path: polygon( 0 0, 0 100%, 60% calc(100% - 30px), 100% 100%, 100% 0, 60% 0 ); } #footer:before { content: ""; position: absolute; top: 10px; left: 0; width: 100%; height: 40px; background: var(--header-border2-color); clip-path: polygon( 0 30px, 0 100%, 60% calc(100% - 30px), 100% 100%, 100% 30px, 60% 0 ); } #footer:after { content: ""; position: absolute; top: 0px; left: 0; width: 100%; height: 40px; background: var(--header-border3-color); clip-path: polygon( 0 11%, 0 100%, 60% calc(100% - 30px), 100% 100%, 100% 9%, 60% 0 ); } .page-top a { font-size: 0; display: block; width: 100%; height: 40px; } @media (min-width: 1024px) { .two-columns #footer { position: fixed; bottom: 0; width: var(--sidebar-width); } .two-columns-left #footer { left: 0; } .two-columns-right #footer { right: 0; } } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); color: var(--text-color); border: 0; padding: 1em; font-family: inherit; border-radius: 0; width: 200px; text-align: center; } .ContextualPopup a { color: var(--sidebar-link-color); } .ContextualPopup a:hover { color: var(--sidebar-link-hover-color); } div.ContextualPopup .Relation { font-size: 1em; font-weight: normal; margin: 0.5em 0 0; padding: 0; } div.ContextualPopup .Userpic { display: inline-block; float: none; border: none; margin: 0; background: var(--entry-background-color-alt); clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 90%, 0 0); padding: 10px; margin: 0 auto; } div.ContextualPopup .Userpic img { clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 90%, 0 0); } .ContextualPopup .Actions ul { list-style: none; margin: 0.5em 0 0; padding: 0; } div.ContextualPopup li { font-weight: bold; float: left; clear: left; } div.ContextualPopup li a { padding: 0.25em 0; display: block; } div.ContextualPopup li:after { content: ""; display: block; width: 20px; height: 1px; background-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ); transition: all 0.4s linear; } div.ContextualPopup li:hover:after { width: 100%; } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--entry-background-color); color: var(--text-color); padding: 0.75em 0; text-align: center; justify-content: center; z-index: 9; } @media (min-width: 1024px) { .two-columns #lj_controlstrip { transform: translateY(-100%); position: fixed; transition: transform 0.7s; } .two-columns #lj_controlstrip:before { content: ""; position: absolute; bottom: -30px; height: 30px; width: 30px; } .two-columns #lj_controlstrip::after { content: ""; position: absolute; bottom: -30px; height: 20px; width: 30px; cursor: pointer; color: var(--sidebar-icon-color); background-image: linear-gradient( var(--gradient1-color), var(--gradient2-color) ); clip-path: polygon(50% 40%, 100% 0, 100% 60%, 50% 100%, 0 60%, 0 0); } .two-columns-left #lj_controlstrip:before { right: 10px; } .two-columns-left #lj_controlstrip::after { right: 10px; } .two-columns-right #lj_controlstrip:before { left: 10px; } .two-columns-right #lj_controlstrip::after { left: 10px; } #lj_controlstrip:hover { transform: translateY(0); } } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip input, #lj_controlstrip select { border: 0; background: var(--entry-background-color-alt) !important; font-size: var(--text-size) !important; color: var(--text-color-alt) !important; font-family: var(--main-font) !important; } #lj_controlstrip_search input#search { width: 12em; } #lj_controlstrip input[type="submit"] { border: 0; background: transparent !important; text-transform: uppercase; padding: 0.25em; color: var(--sidebar-link-color) !important; font-weight: bold; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a { background: var(--entry-background-color-alt); clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 90%, 0 0); padding: 5px; } #lj_controlstrip_userpic a img { clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 90%, 0 0); }
Into the "Custom stylesheet URL" field paste the following.
https://fonts.googleapis.com/css2?family=Poppins&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

comments

Bold

Sat, 26 Nov 2022 14:26:51 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

header image
header icon
sidebar image
left or right sidebar
2 colour schemes
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "2 Column (sidebar on the left)" or the "2 Columns (sidebar on the right)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "text-only" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Modules" tab. Set "Profile" to number 1 and "Navigation" to number 2.
Click on the "Custom CSS" tab. Choose one of the color schemes and paste the code into the "Use embeded CSS" field. Press enter and paste the layout code into the field as well. Uncheck "Use layout's stylesheet(s)".

Dark:/*------------------------------------- - layout - bold - dark (tabula rasa) - https://myrtillenne.dreamwidth.org - header image - kotkoa - https://www.freepik.com/author/kotkoa - header icon - valuavitaly - https://www.freepik.com/author/valuavitaly - sidebar image - wirestock - https://www.freepik.com/author/wirestock -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Merriweather, serif; --title-font: Merriweather, serif; --background-color: #174B53; --text-color: #9FC0C4; --link-color: #00B7C6; --link-hover-color: #DE6BA8; --header-height: 250px; --header-background-color: #00B7C6; /* also the color of the footer */ --header-image: url("https://rosecarmine.dreamwidth.org/file/163040.png"); --header-icon: url(https://rosecarmine.dreamwidth.org/file/168031.jpg); --header-icon-width: 150px; --header-icon-height: 150px; --title-background-color: #222; --header-text-color: #D0BBC6; --header-link-color: #DF6A8D; --header-link-hover-color: #00B7C6; --entry-width: 1000px; --entry-background-color: #162E30; --entry-title-background-color: #00B7C6; --entry-title-color: #222; --entry-title-hover-color: #222; --heading-background-color: #BDE9EC; --heading-color: #174B53; --heading-hover-color: #D33464; --sidebar-width: 300px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/167514.jpg"); --sidebar-image-height: 300px; --userpic-size: 100px; }
Light:/*------------------------------------- - layout - bold - light (tabula rasa) - https://myrtillenne.dreamwidth.org - header image - kotkoa - https://www.freepik.com/author/kotkoa - header icon - valuavitaly - https://www.freepik.com/author/valuavitaly - sidebar image - kjpargeter - https://www.freepik.com/author/kjpargeter -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Merriweather, serif; --title-font: Merriweather, serif; --background-color: #DEEDED; --text-color: #3D5556; --link-color: #39ACAC; --link-hover-color: #3D5556; --header-height: 250px; --header-background-color: #54C1C7; /* also the color of the footer */ --header-image: url(https://rosecarmine.dreamwidth.org/file/174224.png); --header-icon: url(https://rosecarmine.dreamwidth.org/file/177131.jpg); --header-icon-width: 150px; --header-icon-height: 150px; --title-background-color: #ADE4E4; --header-text-color: #3D5556; --header-link-color: #1A9BA2; --header-link-hover-color: #3D5556; --entry-width: 1000px; --entry-background-color: #F2F9F9; --entry-title-background-color: #ADE4E4; --entry-title-color: #3D5556; --entry-title-hover-color: #1A9BA2; --heading-background-color: #54C1C7; --heading-color: #F8F7C9; --heading-hover-color: #F2F9F9; --sidebar-width: 300px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/171348.jpg"); --sidebar-image-height: 300px; --userpic-size: 100px; }
Layout:/*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { padding: 0; margin: 0; background-color: var(--background-color); font-family: var(--main-font); line-height: var(--line-height); font-size: var(--text-size); color: var(--text-color); } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { margin: 1.5em 0; padding: 0; font-style: italic; } blockquote:first-letter { float: left; font-size: 2.5em; padding: 7px 9px; line-height: 0.75; font-family: var(--title-font); color: var(--heading-color); background: var(--heading-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); margin-right: 5px; } #content-footer { height: 0; font-size: 0; clear: both; } /*--------------- header ---------------*/ #header { text-align: center; color: var(--header-text-color); margin-bottom: 40px; font-style: italic; } #header > .inner:first-child { padding: 0.5em 2em; background: var(--title-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } @media (min-width: 800px) { #header { position: relative; display: flex; flex-direction: column; height: var(--header-height); background-image: var(--header-image); background-color: var(--header-background-color); background-position: top center; justify-content: flex-end; margin-bottom: 100px; } #header:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--header-icon-width); height: var(--header-icon-height); background-image: var(--header-icon); background-size: cover; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); border: 7px solid var(--title-background-color); } #header > .inner:first-child { margin: 0 20px; align-self: center; transform: translateY(50%); } } h1#title { font-family: var(--title-font); font-size: 1.5em; margin: 0; padding: 0; line-height: 1.2; display: inline; } h1#title a { color: var(--header-link-color); } h1#title a:hover { color: var(--header-link-hover-color); } h2#subtitle { margin: 0 0 0 0.75em; padding: 0; font-size: 1em; line-height: 1.2; display: inline; } h2#pagetitle { display: none; } /*--------------- content ---------------*/ #canvas { position: relative; } @media (min-width: 800px) { #content { margin: 0 auto; padding: 0 40px; } } @media (min-width: 1280px) { #content { margin: 0 auto; padding: 0 90px; } } @media (min-width: 1024px) { #content { max-width: calc(var(--entry-width) + var(--sidebar-width) + 40px); } .two-columns-left #content > .inner:first-child { border-left: var(--sidebar-width) solid transparent; } .multiple-columns #primary { width: 100%; margin-right: -100%; margin-left: 0; float: left; clear: both; } .two-columns-left #primary > .inner:first-child { padding-left: 40px; } .two-columns-left #secondary { float: left; width: var(--sidebar-width); margin-left: calc(-1 * var(--sidebar-width)); } .two-columns-right #content > .inner:first-child { border-right: var(--sidebar-width) solid transparent; } .two-columns-right #primary > .inner:first-child { padding-right: 40px; } .two-columns-right #secondary { float: right; width: var(--sidebar-width); margin-right: calc(-1 * var(--sidebar-width)); } } /*--------------- entries ---------------*/ .entry, .full .comment { margin-bottom: 40px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); background: var(--entry-background-color); } .header { text-align: center; background: var(--entry-title-background-color); margin-bottom: 2.5em; padding: 0 10px; } .entry .entry-title, .full .comment-title { margin: 0; padding: 1em 0 0; line-height: 1.2; font-family: var(--title-font); font-size: 1.2em; color: var(--entry-title-color); } .entry .entry-title a, .full .comment-title a { color: var(--entry-title-color); } .entry .entry-title a:hover, .full .comment-title :hover { color: var(--entry-title-hover-color); } .sticky-entry-icon, .admin-post-icon { display: none; } .no-subject .entry .entry-title, .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .header .datetime { display: inline-block; color: var(--heading-color); background: var(--heading-background-color); line-height: 1; padding: 0.5em 1em; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); transform: translateY(50%); font-style: italic; } .header .datetime a { color: var(--heading-color); } .header .datetime a:hover { color: var(--heading-hover-color); } .restrictions img, .access-filter img { display: none; } .restrictions-NSFW .entry .datetime:before { content: "[NSFW] "; } .restrictions-18 .entry .datetime:before { content: "[18+] "; } .security-protected .entry .date:before { content: "[LOCKED] "; } .security-private .entry .dater:before { content: "[PRIVATE] "; } .entry .contents, .comment .contents { padding: 0 2em; } .has-userpic .userpic { float: right; margin-left: 1em; text-align: right; } .two-columns-right .has-userpic .userpic { float: left; margin-right: 1em; margin-left: 0; text-align: left; } .has-userpic .userpic img { max-width: 50px; max-height: 50px; width: auto; height: auto; border: 5px solid var(--entry-title-background-color); background: var(--entry-title-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } @media (min-width: 1024px) { .has-userpic .userpic img { max-width: var(--userpic-size); max-height: var(--userpic-size); } } @media (min-width: 1280px) { .has-userpic .userpic { width: calc(var(--userpic-size) + 10px); margin-right: calc(-1 * (var(--userpic-size) + 10px) / 2 - 2em); } .two-columns-right .has-userpic .userpic { margin-left: calc(-1 * (var(--userpic-size) + 10px) / 2 - 2em); margin-right: 1em; } } .entry .poster, .full .poster, .poster-ip { display: inline-block; line-height: 1; background: var(--heading-background-color); padding: 0.5em 1em; font-style: italic; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); color: var(--heading-color); } .entry .poster a, .full .poster a { color: var(--heading-color); } .entry .poster a:hover, .full .poster a:hover { color: var(--heading-hover-color); } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster.empty { display: none; } .entry-content { margin: 2em 0; } @media (min-width: 1024px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action img { display: none; } .cuttag-action { display: inline-block; font-size: 26px; width: 22px; line-height: 22px; padding: 5px; vertical-align: bottom; font-family: arial; text-align: center; color: var(--heading-color); background: var(--heading-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } .cuttag-action:before { content: "+"; display: inline-block; } .cuttag-action-after:before { transform: rotate(45deg); } .cuttag-action:hover { color: var(--heading-hover-color); } .cut-open, .cut-close { display:none; } .cut-text { font-size: var(--text-size); font-weight: normal; display: inline; margin-left: 0.5em; } .metadata li:first-letter, .entry div.tag:first-letter { font-family: var(--title-font); font-style: italic; font-weight: bold; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata li { margin-bottom: 0.25em; } .entry div.tag { text-align: left; } .tag ul { padding: 0; margin: 0; display: inline; } .tag li { display: inline; } ul.entry-management-links.icon-links { margin: 2em 0 1em; padding: 0; } ul.entry-management-links.icon-links li { display: inline; margin: 0 0.5em; } ul.entry-management-links.text-links, ul.entry-interaction-links { padding: 0; margin: 0; line-height: 1; display: inline; } .entry ul.entry-management-links.text-links:before { content: ""; display: block; margin-top: 2em; } ul.entry-management-links.text-links li, ul.entry-interaction-links li { padding: 0.5em; margin: 2px 0; display: inline-block; background: var(--heading-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } .entry-management-links.text-links li a, .entry-interaction-links li a { color: var(--heading-color); } .entry-management-links.text-links li a:hover, .entry-interaction-links li a:hover { color: var(--heading-hover-color); } .footer { padding: 0 2em 2em; text-align: center; } /*------------ comments ------------*/ .comment-pages { background: var(--title-background-color); text-align: center; margin: 40px 0; padding: 7px; color: var(--header-text-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } .comment-pages a { color: var(--header-link-color); } .comment-pages a:hover { color: var(--header-link-hover-color); } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; position: relative; z-index: 9; } .thread-depth { display: block; padding-top: 1em; color: var(--entry-title-color); } .partial { padding: 1em; margin: 40px 0; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); background: var(--entry-background-color); } .comment .comment-title { margin: 0; } .comment-date-text, .comment-from-text { display: none; } .comment-content { padding: 2em 0; } ul.comment-management-links.icon-links { padding: 0; margin: 1em 0; } ul.comment-management-links.icon-links li { margin: 0 0.5em; display: inline; } ul.comment-management-links.text-links, ul.comment-interaction-links { padding: 0; margin: 0; display: inline; } .multiform-checkbox, ul.comment-management-links.text-links li, ul.comment-interaction-links li { padding: 0.5em; margin: 2px 0; display: inline-block; color: var(--heading-color); background: var(--heading-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); line-height: 1; font-style: italic; } .multiform-checkbox { margin-right: 0.25em; } .multiform-checkbox input { margin: 0; } ul.comment-management-links.text-links li a, ul.comment-interaction-links li a { color: var(--heading-color); padding: 0 !important; } ul.comment-management-links.text-links li a:hover, ul.comment-interaction-links li a:hover { color: var(--heading-hover-color); } .bottomcomment { background: var(--entry-background-color); text-align: center; margin: 40px 0; padding: 1em; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .bottomcomment ul.entry-management-links.icon-links { margin-top: 0; } .bottomcomment label:before { content: ""; display: block; margin-top: 1em; } #multiform_mode, #multiform_submit { border: 0; font-size: var(--text-size); font-family: var(--main-font); padding: 5px; background: var(--heading-background-color); color: var(--heading-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { margin-top: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { padding: 5px 10px; background: var(--heading-background-color); border: 0; color: var(--heading-color); font-size: var(--text-size); font-family: var(--main-font); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } #qrdiv input[type="button"], #qrdiv input[type="submit"] { padding: 5px 10px; border: 0; background: var(--heading-background-color); color: var(--heading-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } #postform { margin-bottom: 40px; padding: 2em; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); background: var(--entry-background-color); } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .tags-container, .icons-container { background: var(--entry-background-color); margin-bottom: 40px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1em; display: inline-block; line-height: 1; padding: 0.5em 1em; margin: 0; font-weight: normal; color: var(--heading-color); transform: translateY(50%); background: var(--heading-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } .month-wrapper .contents, .icons-container .contents, .tags-container .contents { padding: 0 2em; } .month .footer .inner, #primary .manage-link { margin-top: 1em; padding: 0.5em; display: inline-block; background: var(--heading-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); line-height: 1; font-style: italic; } .month .footer a, .tags-container .footer a, .icons-container .footer a { color: var(--heading-color); } .month .footer a:hover, .tags-container .footer a:hover, .icons-container .footer a:hover { color: var(--heading-hover-color); } /*------------ archive------------*/ .day-date { display: none; } .month caption { display: none; } .month table { width: 100%; border: none; text-align: center; border-collapse: separate; border-spacing: 5px; table-layout: fixed; } table.month { margin: 0 auto; } table.month th { background: var(--entry-title-background-color); color: var(--entry-title-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); width: 1em; padding: 5px 0; } table.month td { background: var(--heading-background-color); color: var(--heading-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); padding: 5px 0; } table.month td.day-has-entries { position: relative; } .day.day-has-entries { background: var(--entry-title-background-color); color: var(--entry-title-color); } .day.day-has-entries .label { color: var(--entry-title-color); } table.month .day-has-entries p { left: 0; top: 0; position: absolute; z-index: 9; height: 100%; width: 100%; display: block; margin: 0; } table.month .day-has-entries p a { color: transparent; height: 100%; width: 100%; display: block; } .month dl { margin: 0; } .month dl dd { background: var(--entry-background-color); margin: 0 0 40px; padding: 2em; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .month dl dt { background: var(--entry-title-background-color); text-align: center; color: var(--entry-title-color); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .month dl dt a { display: inline-block; color: var(--heading-color); background: var(--heading-background-color); line-height: 1; padding: 0.5em 1em; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); transform: translateY(50%); font-style: italic; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dd { margin: 2em 2em 0; } .month dd > span { padding-right: 0.25em; } #archive-month .navigation select { background: var(--entry-background-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color); font-style: italic; } #archive-month .navigation input { background: transparent; color: var(--header-link-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); font-style: italic; } /*------------ tags ------------*/ ul.ljtaglist { padding: 0; margin-left: 1em; list-style: disc inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .page-icons .bottompages { text-align: center; margin-top: 2em; } .icon { margin-top: 1em; display: flex; } .icon-image { padding-right: 1em; } .icon-image img { display: block; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } .sorting-options ul { margin: 0 0 2em; padding: 0; text-align: center; } .sorting-options ul li { display: inline; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } .icon .default { line-height: 1; padding: 0.5em 1em; color: var(--heading-color); background: var(--heading-background-color); display: inline-block; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } /*------------ modules ------------*/ .module { background: var(--entry-background-color); margin-bottom: 40px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); text-align: center; } .module:before { content: ""; display: block; height: 2em; background: var(--entry-title-background-color); } .module h2 { font-size: 1em; line-height: 1; padding: 0.5em 1em; margin: 0; color: var(--heading-color); background: var(--heading-background-color); font-weight: normal; display: inline-block; transform: translateY(-50%); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } .module h2 a { color: var(--heading-color); } .module h2 a:hover { color: var(--heading-hover-color); } .module-content { padding: 0 1.5em 1.5em; } .module-content ul { list-style: none; margin: 0; padding: 0; clear: both; text-align: left; } .module-content li { padding: 0.25em 0; break-inside: avoid; } .module-navlinks ul, .module-typelist ul { text-align: center; } .module-navlinks li, .module-typelist li { display: inline-block; padding: 0.25em; font-style: italic; } .module-navlinks li a, .module-typelist li a { } .module-calendar .module-content { text-align: center; padding: 0 10px 10px; } .module-calendar table { margin: 0 auto; width: 100%; border-collapse: separate; border-spacing: 5px; } .module-calendar table th { background: var(--entry-title-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); padding: 5px 0; max-width: 1em; color: var(--entry-title-color); } .module-calendar td { background: var(--heading-background-color); color: var(--heading-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); padding: 5px 0; max-width: 1em; } .module-calendar .entry-day { background: var(--entry-title-background-color); } .module-calendar .entry-day a { color: var(--entry-title-color); } .module-calendar .entry-day a:hover { color: var(--entry-title-hover-color); } .tags_cloud li, .module-tags_cloud li { display: inline; } .module .manage-link, .module-userprofile h2, .module .userpic, .journal-website-name, ul.userlite-interaction-links, .module-time, .module-powered { display: none !important; } .journal-name { display: inline-block; padding: 0.5em 1em; background: var(--heading-background-color); transform: translateY(50%); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); line-height: 1; font-style: italic; color: var(--heading-color); } .module-userprofile { background-color: var(--entry-title-background-color); display: flex; align-items: flex-end; margin: 0; } .module .userpic { padding-top: 20px; } @media (min-width: 1024px) { .module-userprofile { background-image: var(--sidebar-image); background-size: cover; background-position: top center; height: var(--sidebar-image-height); } } .module-userprofile .module-content { padding: 0; text-align: center; flex: 0 0 100%; } .module-userprofile:before, .module-navlinks:before { display: none; } .module-navlinks .module-content { padding-top: 2em; } .module-customtext .module-content { text-align: left; } .search-form .search-box-item, .search-form .search-button-item { display: block; } input.search-box { margin: 0 auto; background: var(--heading-background-color); border: 0; padding: 5px; font-family: var(--main-font); font-size: var(--text-size); color: var(--heading-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } input.search-button { padding: 5px 10px; background: var(--heading-background-color); color: var(--heading-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } .module-credit ul { display: none; } .module-credit .module-content:before { content: 'Theme "Bold" by myrtillenne'; } /*--------------- navigation ---------------*/ .navigation .page-separator, .topnav, .noentries, .navigation.empty { display: none; } .navigation { text-align: center; margin-bottom: 40px; } .navigation ul { margin: 0; padding: 0 0.5em; background: var(--title-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); display: inline-block; font-style: italic; } .navigation li { display: inline-block; line-height: 1; padding: 0.5em; color: var(--header-text-color); } .navigation a { color: var(--header-link-color); } .navigation a:hover { color: var(--header-link-hover-color); } @media (min-width: 1024px) { #entries .navigation { margin: 0; position: absolute; bottom: 40px; transform: translateY(50%); } } /*------------ footer ------------*/ #footer { background: var(--header-background-color); height: 40px; margin-top: 40px; } #footer .inner { max-width: calc(var(--entry-width) + var(--sidebar-width) + 40px); padding: 0 40px; margin: 0 auto; } @media (min-width: 1280px) { #footer .inner { padding: 0 90px; } } .two-columns-left #footer .inner { text-align: left; } .two-columns-right #footer .inner { text-align: right; } .page-top { display: inline-block; transform: translateY(-50%); background: var(--title-background-color); line-height: 1; padding: 0.5em 1em; font-style: italic; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } .page-top a { color: var(--header-link-color); } .page-top a:hover { color: var(--header-link-hover-color); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; padding: 0; border-radius: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); width: 200px; text-align: center; } div.ContextualPopup .Relation { display: inline-block; font-weight: normal; font-size: 1em; color: var(--heading-color); background: var(--heading-background-color); line-height: 1; transform: translateY(-1em); padding: 0.5em 1em; margin: 0 10px; font-style: italic; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } div.ContextualPopup .Userpic { margin: 0; border: 0; padding: 1em 0 2em; float: none; background: var(--entry-title-background-color); } div.ContextualPopup .Userpic img { border: 5px solid var(--heading-background-color); background: var(--heading-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } div.ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0 1em 1em; } div.ContextualPopup li { list-style: none; margin-top: 0.25em; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--title-background-color); justify-content: center; padding: 0.75em 0; color: var(--header-text-color); } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--header-link-color); } #lj_controlstrip a:hover { text-decoration: none; color: var(--header-link-hover-color); } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { font-weight: normal; font-size: 1em; color: var(--header-text-color); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid transparent; font-size: 1em !important; font-family: var(--main-font) !important; background: var(--entry-background-color) !important; color: var(--text-color) !important; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); font-style: italic; } #lj_controlstrip input[type="submit"] { padding: 0.5em; color: var(--header-link-color) !important; font-family: var(--title-font) !important; background: transparent !important; box-shadow: none; font-style: italic; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_userpic img { max-width: 50px; max-height: 50px; width: auto; height: auto; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; }
Into the "Custom stylesheet URL" field paste the following.
https://fonts.googleapis.com/css2?family=Merriweather&family=Merriweather:ital@1&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

RESOURCES

images from freepik by kotkoa, valuavitaly, wirestock, kjpargeter

comments

Notebook

Sun, 06 Nov 2022 10:56:25 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

header image (pattern)
sidebar image (square)
left or right sidebar
2 colour schemes
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Paletteable" and apply any theme.
Choose the "2 Column (sidebar on the left)" or the "2 Columns (sidebar on the right)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "icons" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Custom CSS" tab. Choose one of the color schemes and paste the code into the "Use embeded CSS" field. Press enter and paste the layout code into the field as well. Uncheck "Use layout's stylesheet(s)".

Light:/*------------------------------------- - layout - notebook - light (paletteable) - https://myrtillenne.dreamwidth.org - icon font - material symbols - https://fonts.google.com/icons - header image - callmetak - https://www.freepik.com/author/callmetak - sidebar image - garetsvisual - https://www.freepik.com/author/garetsvisual -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Poppins, sans-serif; --title-font: Poppins, sans-serif; --background-color: #f1e0d8; --text-color: #69483f; --link-color: #ff7566; --link-hover-color: #69483f; --header-height: 200px; --header-image: url("https://rosecarmine.dreamwidth.org/file/155902.jpg"); --entry-width: 1000px; --entry-background-color: #faf5ef; --entry-border-color: #e9c8ba; --sidebar-width: 300px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/156108.jpg"); --icon-color: #ff9488; --icon-hover-color: #69483f; }
Dark:/*------------------------------------- - layout - notebook - dark (paletteable) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - header image - rawpixel.com - https://www.freepik.com/author/rawpixel-com - sidebar image - lookstudio - https://www.freepik.com/author/lookstudio -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Poppins, sans-serif; --title-font: Poppins, sans-serif; --background-color: #3F2D57; --text-color: #B7ACC4; --link-color: #A576D8; --link-hover-color: #B691DF; --header-height: 200px; --header-image: url("https://rosecarmine.dreamwidth.org/file/157278.png"); --entry-width: 1000px; --entry-background-color: #261B34; --entry-border-color: #784BAB; --sidebar-width: 300px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/157846.jpg"); --icon-color: #B691DF; --icon-hover-color: #A576D8; }
Layout:/*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { padding: 0; margin: 0; background-color: var(--background-color); font-family: var(--main-font); line-height: var(--line-height); font-size: var(--text-size); color: var(--text-color); } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { margin: 1em 0; padding: 20px; border: 1px solid var(--entry-border-color); } blockquote:before { float: left; content: "format_quote"; font-family: Material Symbols Outlined; font-size: 22px; line-height: 22px; padding: 7px; margin-top: -20px; margin-left: -20px; margin-right: 20px; border-right: 1px solid var(--entry-border-color); border-bottom: 1px solid var(--entry-border-color); color: var(--icon-color); } #content-footer { height: 0; font-size: 0; clear: both; } /*--------------- header ---------------*/ #header { background: var(--entry-background-color); text-align: center; border-top: 1px solid var(--entry-border-color); } #header > .inner:first-child { text-align: center; border-bottom: 1px solid var(--entry-border-color); display: flex; flex-wrap: wrap; justify-content: center; padding: 10px; } @media (min-width: 800px) { #header:before { content: ""; display: block; width: 100%; height: var(--header-height); background: var(--header-image); background-position: top center; border-bottom: 1px solid var(--entry-border-color); } } h1#title { font-family: var(--title-font); font-size: 1em; margin: 0; padding: 0 5px; line-height: 1.2; display: inline; text-transform: uppercase; } h2#subtitle { margin: 0; padding: 0 5px; font-size: 1em; line-height: 1.2; display: inline; font-weight: normal; } h2#pagetitle { display: none; } /*--------------- content ---------------*/ #content > .inner:first-child { padding-top: 40px; } @media (min-width: 800px) { #content { margin: 0 auto; padding: 0 40px; } } @media (min-width: 1024px) { #content { max-width: calc(var(--entry-width) + var(--sidebar-width) + 40px); } .two-columns-left #content > .inner:first-child { border-left: var(--sidebar-width) solid transparent; } .multiple-columns #primary { width: 100%; margin-right: -100%; margin-left: 0; float: left; clear: both; } .two-columns-left #primary > .inner:first-child { padding-left: 40px; } .two-columns-left #secondary { float: left; width: var(--sidebar-width); margin-left: calc(-1 * var(--sidebar-width)); } .two-columns-right #content > .inner:first-child { border-right: var(--sidebar-width) solid transparent; } .two-columns-right #primary > .inner:first-child { padding-right: 40px; } .two-columns-right #secondary { float: right; width: var(--sidebar-width); margin-right: calc(-1 * var(--sidebar-width)); } } @media (min-width: 1280px) { #content { max-width: calc(var(--entry-width) + 234px + var(--sidebar-width) + 40px); } #content > .inner:first-child { padding: 40px 117px 0; } } /*--------------- entries ---------------*/ .entry, .full .comment { margin-bottom: 40px; border: 1px solid var(--entry-border-color); background: var(--entry-background-color); position: relative; } .entry .header .inner, .comment .header .inner { display: flex; border-bottom: 1px solid var(--entry-border-color); flex-wrap: wrap; } .entry .entry-title { margin: 0; padding: 10px; font-weight: normal; font-size: 1em; line-height: 22px; flex-grow: 1; border-right: 1px solid var(--entry-border-color); border-bottom: 1px solid var(--entry-border-color); margin-right: -1px; margin-bottom: -1px; } .sticky-entry-icon, .admin-post-icon { display: none; } .sticky-entry-title:before { content: "push_pin"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; color: var(--icon-color); } .no-subject .entry .entry-title, .no-subject .comment .comment-title { background: none; padding: 0; } .header .datetime { display: flex; line-height: 22px; } .comment .header .datetime { padding: 10px; } .header .date { border-right: 1px solid var(--entry-border-color); padding: 10px; } .header .time { padding: 10px; } .header a { color: var(--text-color); } .header a:hover { color: var(--link-color); } .sticky-entry .datetime { display: none; } .restrictions, .access-filter { border-right: 1px solid var(--entry-border-color); border-bottom: 1px solid var(--entry-border-color); padding: 10px; line-height: 22px; margin-right: -1px; margin-bottom: -1px; } .restrictions img, .access-filter img { display: none; } .restrictions-NSFW .restrictions:before { content: "NSFW"; } .restrictions-18 .restrictions:before { content: "18+"; } .security-protected .access-filter:before { content: "lock"; font-family: Material Symbols Outlined; font-size: 22px; float: left; color: var(--icon-color); } .security-private .access-filter:before { content: "visibility_off"; font-family: Material Symbols Outlined; font-size: 22px; float: left; color: var(--icon-color); } .has-userpic .userpic { float: right; background: var(--entry-background-color); border: 1px solid var(--entry-border-color); margin-left: 10px; margin-top: -1px; margin-right: -1px; } .two-columns-right .has-userpic .userpic { float: left; margin-left: 0; margin-right: 10px; margin-left: -1px; } .has-userpic .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; padding: 5px; } @media (min-width: 1024px) { .has-userpic .userpic img { max-width: 100px; max-height: 100px; } } @media (min-width: 1280px) { .has-userpic .userpic { position: absolute; top: -1px; right: -5px; transform: translateX(100%); margin: 0; } .two-columns-right .has-userpic .userpic { left: -10px; right: auto; transform: translateX(-100%); } } .entry .poster, .full .poster { display: block; margin: 0 10px; padding-top: 10px; clear: left; } .two-columns-right .entry .poster, .two-columns-right .full .poster { clear: right; } .entry .poster { font-size: 0; } .entry .poster a, .full .poster a { color: var(--text-color); } .entry .poster a:hover, .full .poster a:hover { color: var(--link-color); } .entry .poster .ljuser { font-size: var(--text-size); display: inline-flex; line-height: 22px; align-items: center; margin-right: -1px; border: 1px solid var(--entry-border-color); } .entry .poster .ljuser:before { font-family: "Material Symbols Outlined"; font-size: 22px; padding: 7px; color: var(--icon-color); border-right: 1px solid var(--entry-border-color); } .entry .poster .ljuser:nth-child(1):before { content: "person"; } .entry .poster .ljuser:nth-child(2):before { content: "group"; } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; padding: 0 0.5em; } .poster.empty { padding-top: 1px; } .entry-content { margin: 2em; } @media (min-width: 1024px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content li::marker, .comment-content li::marker { color: var(--icon-color); } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action { display: flex; align-items: center; line-height: 1; } .cuttag-action img { display: none; } .cuttag-action:before { content: "content_cut"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--icon-color); } .cuttag-action:after { content: ""; height: 0; width: 100%; border-bottom: 1px dashed var(--entry-border-color); } .cut-open, .cut-close { display:none; } .cut-text{ font-weight: normal; margin-left: 27px; display:block; } .metadata ul { list-style: none; margin: 0; padding: 0; line-height: 1.2; } .metadata li { display: flex; border-top: 1px solid var(--entry-border-color); } #metadata-music .metadata-label:before { content: "headphones"; } #metadata-mood .metadata-label:before { content: "face"; } #metadata-location .metadata-label:before { content: "location_on"; } #metadata-xpost .metadata-label:before { content: "add_location"; } .metadata-label { border-right: 1px solid var(--entry-border-color); overflow: hidden; font-size: 0; text-align: center; flex-shrink: 0; } .metadata-label:before { font-family: Material Symbols Outlined; font-size: 22px; line-height: 22px; padding: 10px; display: block; color: var(--icon-color); } .metadata li img { margin-left: 0.5em; align-self: center; } .metadata-item { align-self: center; padding: 0.25em 0.5em; } .entry div.tag { display: flex; line-height: 1.2; border-top: 1px solid var(--entry-border-color); } .entry .tag-text { border-right: 1px solid var(--entry-border-color); overflow: hidden; font-size: 0; flex-shrink: 0; } .entry .tag-text:before { content: "tag"; font-family: Material Symbols Outlined; font-size: 22px; line-height: 22px; padding: 10px; display: block; color: var(--icon-color); text-align: center; } .entry .tag ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0.25em 0.5em; align-items: center; } .tag ul li { display: inline; margin-right: 0.25em; } .entry .tag a, .metadata a { color: var(--text-color); } .entry .tag a:hover, .metadata a:hover { color: var(--link-color); } .tag-nav-trigger, .tag-nav-actions input { align-self: center; } .tag ul { padding: 0; margin: 0; display: inline; } .tag li { display: inline; } .entry-management-links, .entry-interaction-links { margin: 0; padding: 0; list-style: none; } .entry-management-links, .entry-interaction-links { border-top: 1px solid var(--entry-border-color); } .entry-management-links.icon-links li, .entry-interaction-links li { float: left; border-right: 1px solid var(--entry-border-color); } .entry-management-links li a, .entry-interaction-links li a { color: var(--text-color); } .entry-management-links li a:hover, .entry-interaction-links li a:hover { color: var(--link-color); } .entry-management-links.icon-links li a { color: var(--icon-color); display: block; } .entry-management-links.icon-links li a:hover { color: var(--icon-hover-color); } .entry-management-links li a img { display: none; } .entry-management-links.icon-links li a:before { font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 10px; display: block; } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "notifications"; } .icon-links .link_next a:before { content: "arrow_forward"; } .entry-management-links.text-links { padding: 10px; } .entry-management-links.text-links li { display: inline-block; padding-right: 10px; } .entry-interaction-links { clear: left; } @media (min-width: 600px) { .entry-management-links.text-links { border-bottom: 1px solid var(--entry-border-color); } .entry-interaction-links { border: 0; clear: none; } } .entry-interaction-links li a { display: block; } li.entry-readlink a { padding: 10px; line-height: 22px; } li.entry-permalink a, li.entry-replylink a { font-size: 0; color: var(--icon-color); } li.entry-permalink a:hover, li.entry-replylink a:hover { color: var(--icon-hover-color); } li.entry-permalink a:before, li.entry-replylink a:before { font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 10px; display: block; } li.entry-permalink a:before { content: "launch"; } li.entry-replylink a:before { content: "add_comment"; } .footer:after { content: ""; display: block; clear: both; } /*------------ comments ------------*/ .comment-pages { background: var(--entry-background-color); border: 1px solid var(--entry-border-color); text-align: center; margin: 40px 0; padding: 7px; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; position: relative; z-index: 9; } .partial { padding: 1em; margin: 40px 0; background: var(--entry-background-color); border: 1px solid var(--entry-border-color); } .comment .comment-title { margin: 0; } .comment-date-text, .comment-from-text { display: none; } .full .comment-title { margin: 0; padding: 10px; font-weight: normal; font-size: 1em; line-height: 22px; flex-grow: 1; border-right: 1px solid var(--entry-border-color); margin-right: -1px; } .thread-depth { padding: 10px; line-height: 22px; border-right: 1px solid var(--entry-border-color); } .full .poster .ljuser { display: inline-flex; line-height: 22px; align-items: center; border: 1px solid var(--entry-border-color); } .full .poster .ljuser:before { content: "person"; font-family: "Material Symbols Outlined"; font-size: 22px; padding: 7px; color: var(--icon-color); border-right: 1px solid var(--entry-border-color); } .full .poster .anonymous { display: inline-block; padding: 7px; border: 1px solid var(--entry-border-color); } .poster-ip { display: inline-block; border: 1px solid var(--entry-border-color); padding: 0.5em; margin: 10px 10px 0; line-height: 22px; } .comment-content { padding: 2em; border-bottom: 1px solid var(--entry-border-color); } .multiform-checkbox { float: left; line-height: 22px; padding: 10px; border-right: 1px solid var(--entry-border-color); } .comment-management-links { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--entry-border-color); } .comment-management-links:after { content: ""; display: block; clear: both; } .comment-management-links.icon-links li { float: left; border-right: 1px solid var(--entry-border-color); } .comment-management-links.icon-links li a { display: block; color: var(--icon-color); padding: 0 !important; } .comment-management-links.icon-links li a:hover { color: var(--icon-hover-color); } .comment-management-links li a img { display: none; } .comment-management-links.icon-links li a:before { font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 10px; display: block; } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } .comment-management-links.text-links li { display: inline-block; line-height: 22px; padding: 10px 0 0 10px; } ul.comment-interaction-links { margin: 0; padding: 10px; clear: left; } ul.comment-interaction-links li { display: inline; padding-right: 0.5em; } .comment-management-links li a, .comment-interaction-links li a { color: var(--text-color); } .comment-management-links li a:hover, .comment-interaction-links li a:hover { color: var(--link-color); } .bottomcomment { background: var(--entry-background-color); text-align: center; margin: 50px 0; border: 1px solid var(--entry-border-color); } .bottomcomment .entry-management-links { border-top: 0; text-align: left; } .bottomcomment .entry-management-links.icon-links { border: 0; } .bottomcomment .entry-interaction-links:after { content: ""; display: block; clear: left; } .bottomcomment label:before { content: ""; display: block; clear: left; border-top: 1px solid var(--entry-border-color); padding-top: 2px; } #multiform_mode { background: var(--entry-background-color); border: 1px solid var(--entry-border-color); font-size: var(--text-size); font-family: var(--main-font); clear: both; } #multiform_submit { border: 0; font-size: var(--text-size); font-family: var(--main-font); padding: 6px 10px; background: var(--entry-background-color); border-radius: 8px; color: var(--text-color); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { border-top: 1px solid var(--entry-border-color); padding: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { background: var(--entry-background-color); border: 1px solid var(--entry-border-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { padding: 5px 10px; } #postform { margin-bottom: 40px; padding: 2em; background: var(--entry-background-color); border: 1px solid var(--entry-border-color); } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .tags-container, .icons-container { background: var(--entry-background-color); margin-bottom: 40px; border: 1px solid var(--entry-border-color); } .month .header, .tags-container .header, .icons-container .header { border-bottom: 1px solid var(--entry-border-color); } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1em; position: relative; line-height: 24px; padding: 10px; font-weight: normal; margin: 0; } .month .header:before, .tags-container .header:before, .icons-container .header:before { float: left; font-family: Material Symbols Outlined; font-size: 24px; line-height: 24px; padding: 10px; border-right: 1px solid var(--entry-border-color); margin-right: 10px; color: var(--icon-color); } .month .header:before { content: "calendar_month"; } .tags-container .header:before { content: "style"; } .icons-container .header:before { content: "photo_library"; } .tags-container .contents { padding: 2em; } .month .footer, #primary .manage-link { text-align: center; border-top: 1px solid var(--entry-border-color); padding: 0.5em; } .month .footer a, .tags-container .footer a, .icons-container .footer a { color: var(--text-color); } .month .footer a:hover, .tags-container .footer a:hover, .icons-container .footer a:hover { color: var(--link-color); } /*------------ archive------------*/ .day-date { display: none; } .month caption { display: none; } .month table { width: 100%; border: none; text-align: center; border-collapse: collapse; } table.month { margin: 0 auto; } table.month td { border-top: 1px solid var(--entry-border-color); border-right: 1px solid var(--entry-border-color); max-width: 1em; height: 3.25em; } table.month th { padding: 0.5em 0; border-right: 1px solid var(--entry-border-color); max-width: 1em; } table.month td:last-child, table.month th:last-child { border-right: none; } table.month td p { margin: 0; } table.month td.day-has-entries .label { font-weight: bold; } .page-month .month { background: var(--entry-background-color); margin-bottom: 50px; border: 1px solid var(--entry-border-color); } .month dl { margin: 0; } .month dl dt { border-top: 1px solid var(--entry-border-color); border-bottom: 1px solid var(--entry-border-color); } .month dl dt a { display: inline-block; border-right: 1px solid var(--entry-border-color); padding: 0.5em; } .month dl dt:first-child { border-top: 0; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dd { padding: 2em; margin: 0; } .month dd > span { padding-right: 0.25em; } #archive-year .navigation li { border-bottom: 1px solid var(--entry-border-color); margin-bottom: -1px; } #archive-month .navigation form { display: flex; } #archive-month .navigation select { background: var(--entry-background-color); border: 1px solid var(--entry-border-color); font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color); padding: 5px; } #archive-month .navigation input { background: transparent; color: var(--text-color); border: 1px solid var(--entry-border-color); font-family: var(--main-font); font-size: var(--text-size); padding: 5px; } /*------------ tags ------------*/ ul.ljtaglist { padding: 0; margin-left: 1em; list-style: disc inside; } ul.ljtaglist li::marker { color: var(--icon-color); } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .page-icons .bottompages { border-top: 1px solid var(--entry-border-color); text-align: center; padding: 1em; } .icon { border-top: 1px solid var(--entry-border-color); display: flex; } .icon-image { padding: 10px; border-right: 1px solid var(--entry-border-color); } .icon-info { padding: 1em; } .icon-image img { display: block; } .sorting-options ul { margin: 0; padding: 1em; text-align: center; } .sorting-options ul li { display: inline; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*------------ modules ------------*/ .module { background: var(--entry-background-color); margin-bottom: 40px; border: 1px solid var(--entry-border-color); } .module h2 { font-size: 1em; display: flex; font-weight: normal; align-items: center; margin: 0; padding: 0; border-bottom: 1px solid var(--entry-border-color); } .module h2:before { display: inline-block; font-family: Material Symbols Outlined; font-size: 24px; line-height: 24px; padding: 10px; margin-right: 10px; color: var(--icon-color); border-right: 1px solid var(--entry-border-color); } .module-navlinks h2:before { content: "map"; } .module-typelist h2:before { content: "explore"; } .module-tags_list h2:before, .module-tags_multilevel h2:before, .module-tags_cloud h2:before { content: "loyalty"; } .module-calendar h2:before { content: "calendar_month"; } .module-customtext h2:before { content: "comment"; } .module-pagesummary h2:before { content: "article"; } .module-active h2:before { content: "local_fire_department"; } .module-search h2:before { content: "search"; } .module-cuttagcontrols h2:before { content: "content_cut"; } .module-syndicate h2:before { content: "rss_feed"; } .module-subscriptionfilters h2:before { content: "filter_alt"; } .module-credit h2:before { content: "code_off"; } .module-credit ul { display: none; } .module-credit .module-content:before { content: 'Theme "Notebook" by myrtillenne'; } .module h2, .module h2 a { color: var(--text-color); } .module h2 a:hover { color: var(--link-color); } .module-content { padding: 1.5em; } .module-content ul { list-style: none; padding: 0; clear: both; } .module-content > ul { margin: -1.5em; } .module-content li { border-bottom: 1px solid var(--entry-border-color); padding: 0.5em 1em; } .module-navlinks li a:hover, .module-typelist li a:hover { letter-spacing: 2px; } .module-content li:last-child { border-bottom: 0; } .module-tags_multilevel .module-content ul{ margin-left: 1em; } .module-tags_multilevel .module-content > ul, .module-tags_cloud .module-content ul{ margin:0; } .module-tags_multilevel .module-content li, .module-tags_cloud .module-content li { border-bottom: 0; padding: 0; } .module-calendar .module-content { text-align: center; padding: 0; } .module-calendar table { margin: 0 auto; width: 100%; border-collapse: collapse; } .module-calendar td { border-top: 1px solid var(--entry-border-color); border-right: 1px solid var(--entry-border-color); padding: 0.5em 0; } .module-calendar td:last-child { border-right: none; } .module-calendar th { padding: 0.5em 0; } .module-calendar .module-header a { padding-right: 0.25em; } .tags_cloud li, .module-tags_cloud li { display: inline; } .module .manage-link, .module .userpic, .journal-website-name, ul.userlite-interaction-links, .module-time, .module-powered { display: none !important; } .module-userprofile .module-content { padding: 0; } .module .journal-name { display: flex; font-weight: normal; align-items: center; } .module .journal-name:before { content: "person"; display: inline-block; font-family: Material Symbols Outlined; font-size: 24px; line-height: 24px; padding: 10px; margin-right: 10px; color: var(--icon-color); border-right: 1px solid var(--entry-border-color); } .module-userprofile .module-header { display: none; } @media (min-width: 1024px) { .module-userprofile .module-header { display: block; padding: 10px; } .module-userprofile .module-header a { display: none; } .module-userprofile .module-header:after { content: ""; display: block; padding-bottom: 100%; background-image: var(--sidebar-image); background-size: cover; } } .module-search .module-content { text-align: center; padding: 0; } .search-form form { display: flex; flex-wrap: wrap; } .comment_search_label { display: none; } .comment_search_checkbox_item { order: 9; flex: 0 0 100%; padding: 10px; border-top: 1px solid var(--entry-border-color); box-sizing: border-box; } .comment_search_checkbox_item:after { content: "Include comments"; } .search-box-item { flex: 1; padding: 5px; } .search-button-item { padding: 5px; border-left: 1px solid var(--entry-border-color); } input.search-box { width: 100%; background: var(--entry-background-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color); } input.search-button { background: var(--entry-background-color); color: var(--text-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); } /*--------------- navigation ---------------*/ .navigation .page-separator, .topnav, .noentries, .navigation.empty { display: none; } .navigation { background: var(--entry-background-color); margin-bottom: 40px; } .navigation ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--entry-border-color); overflow: hidden; } .navigation li { padding: 0.5em; border-right: 1px solid var(--entry-border-color); float: left; } li.page-back { padding: 0; border-right: 1px solid var(--entry-border-color); } li.page-forward { padding: 0; border-left: 1px solid var(--entry-border-color); border-right: 0; float: right; } li.page-back a, li.page-forward a { font-size: 0; display: block; color: var(--icon-color); } li.page-back a:hover, li.page-forward a:hover { color: var(--icon-hover-color); } #entries .navigation li a:before { display: block; font-family: "Material Symbols Outlined"; font-size: 24px; line-height: 24px; padding: 10px; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } /*------------ footer ------------*/ #footer { clear: both; background: var(--entry-background-color); border-top: 1px solid var(--entry-border-color); border-bottom: 1px solid var(--entry-border-color); text-align: center; } .page-top a { font-size: 0; color: var(--icon-color); } .page-top a:hover { color: var(--icon-hover-color); } .page-top a:before { display: inline-block; content: "arrow_upward"; font-family: "Material Symbols Outlined"; font-size: 24px; line-height: 24px; padding: 10px; border-left: 1px solid var(--entry-border-color); border-right: 1px solid var(--entry-border-color); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 1px solid var(--entry-border-color); padding: 10px 0 0; border-radius: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); width: 220px; text-align: center; box-shadow: none; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; padding: 0.5em; margin: 0; } div.ContextualPopup .Userpic { margin: 0; border: 0; float: none; } div.ContextualPopup .Userpic img { border: 1px solid var(--entry-border-color); padding: 5px; } div.ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; } div.ContextualPopup li { padding: 0.5em; border-top: 1px solid var(--entry-border-color); line-height: 1; list-style: none; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--entry-background-color); justify-content: center; padding: 0.75em 0; color: var(--text-color); } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { text-decoration: none; color: var(--link-hover-color); } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { font-weight: normal; font-size: 1em; color: var(--text-color); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip_search form, #lj_controlstrip_login form { display: flex; flex-wrap: wrap; justify-content: flex-end; } #lj_controlstrip_login input, #lj_controlstrip_search select, #lj_controlstrip input { border: 1px solid var(--entry-border-color); font-size: 1em !important; padding: 5px !important; font-family: var(--main-font) !important; background: var(--entry-background-color) !important; color: var(--text-color) !important; margin-right: -1px !important; } #lj_controlstrip_search input#search { width: 12em; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_userpic a img { max-width: 50px; max-height: 50px; width: auto; height: auto; padding: 5px; border: 1px solid var(--entry-border-color); } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_user form div { display: flex; } #lj_controlstrip_user .ljuser { line-height: 22px; padding: 5px; border: 1px solid var(--entry-border-color); border-right: 0; }
Into the "Custom stylesheet URL" field paste the following.
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&family=Poppins&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

RESOURCES

icon font by Google
images from freepik by callmetak, garetsvisual, rawpixel.com, lookstudio

comments

Highlight

Sat, 15 Oct 2022 19:44:01 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

header image (pattern)
5 colour schemes
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Paletteable" and apply any theme.
Choose the "1 Column (modules at bottom; no sidebar)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "icons" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Custom CSS" tab. Choose one of the color schemes and paste the code into the "Use embeded CSS" field. Press enter and paste the layout code into the field as well. Uncheck "Use layout's stylesheet(s)".

Orange:/*------------------------------------- - layout - orange highlight (paletteable) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - header image - lukasdedi - https://www.freepik.com/author/lukasdedi -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Literata, serif; --title-font: Literata, serif; --background-color: #e7d9be; --text-color: #33302b; --link-color: #d67014; --link-hover-color: #5e3f2b; --header-height: 350px; --header-background-color: #33302b; --header-text-color: #dac2ad; --header-link-color: #efac63; --header-link-hover-color: #e7d9be; --header-image: url("https://rosecarmine.dreamwidth.org/file/145046.jpg"); --entry-width: 1000px; --entry-background-color: #f2eadb; --entry-border-color: #dac2ad; --heading-background-color: #efac63; --heading-color: #5e3f2b; --sidebar-width: 300px; --icon-color: #f2eadb; --icon-hover-color: #5e3f2b; }
Blue:/*------------------------------------- - layout - blue highlight (paletteable) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - header image - lukasdedi - https://www.freepik.com/author/lukasdedi -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Literata, serif; --title-font: Literata, serif; --background-color: #cde1ed; --text-color: #013451; --link-color: #1e7dcc; --link-hover-color: #293e5f; --header-height: 350px; --header-background-color: #013451; --header-text-color: #abcbdc; --header-link-color: #6cbbe6; --header-link-hover-color: #abcbdc; --header-image: url("https://rosecarmine.dreamwidth.org/file/147065.jpg"); --entry-width: 1000px; --entry-background-color: #ecf4f9; --entry-border-color: #accbdb; --heading-background-color: #6cbbe6; --heading-color: #293e5f; --sidebar-width: 300px; --icon-color: #ecf4f9; --icon-hover-color: #293e5f; }
Green:/*------------------------------------- - layout - green highlight (paletteable) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - header image - mariadetarosarinda - https://www.freepik.com/author/mariadetarosarinda -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Literata, serif; --title-font: Literata, serif; --background-color: #cceee3; --text-color: #3d5048; --link-color: #35997b; --link-hover-color: #94983d; --header-height: 350px; --header-background-color: #e5f9f8; --header-text-color: #3d5048; --header-link-color: #35997b; --header-link-hover-color: #3d5048; --header-image: url("https://rosecarmine.dreamwidth.org/file/148031.jpg"); --entry-width: 1000px; --entry-background-color: #f3fcfc; --entry-border-color: #b5ddd7; --heading-background-color: #75c1ac; --heading-color: #f3fcfc; --sidebar-width: 300px; --icon-color: #f2f7d2; --icon-hover-color: #f3fcfc; }
Red:/*------------------------------------- - layout - red highlight (paletteable) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - header image - mariadetarosarinda - https://www.freepik.com/author/mariadetarosarinda -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Literata, serif; --title-font: Literata, serif; --background-color: #e1e1e1; --text-color: #333; --link-color: #da3a73; --link-hover-color: #333; --header-height: 350px; --header-background-color: #200d0f; --header-text-color: #f5d9d5; --header-link-color: #ec689a; --header-link-hover-color: #f5d9d5; --header-image: url("https://rosecarmine.dreamwidth.org/file/150720.jpg"); --entry-width: 1000px; --entry-background-color: #f7f7f7; --entry-border-color: #ccc; --heading-background-color: #dc457a; --heading-color: #faeae7; --sidebar-width: 300px; --icon-color: #f5d9d5; --icon-hover-color: #200d0f; }
Purple:/*------------------------------------- - layout - purple highlight (paletteable) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - header image - upklyak - https://www.freepik.com/author/upklyak -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Literata, serif; --title-font: Literata, serif; --background-color: #2d2732; --text-color: #c4b4d6; --link-color: #b686f0; --link-hover-color: #ded6e9; --header-height: 350px; --header-background-color: #6840aa; --header-text-color: #c4b4d6; --header-link-color: #c49df2; --header-link-hover-color: #c4b4d6; --header-image: url("https://rosecarmine.dreamwidth.org/file/153204.jpg"); --entry-width: 1000px; --entry-background-color: #403748; --entry-border-color: #77559f; --heading-background-color: #7d55bf; --heading-color: #ded6e9; --sidebar-width: 300px; --icon-color: #1f1528; --icon-hover-color: #ded6e9; }
Layout:/*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { padding: 0; margin: 0; background-color: var(--background-color); font-family: var(--main-font); line-height: var(--line-height); font-size: var(--text-size); color: var(--text-color); } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { margin: 1em 0; padding-left: 1.5em; position: relative; font-style: italic; } blockquote:first-letter { font-family: var(--title-font); font-weight: bold; line-height: 1; margin-left: -1em; font-size: 1.5em; } blockquote:after { content: ""; position: absolute; top: 2em; left: 0; width: 1px; height: calc(100% - 2em); background: var(--entry-border-color); } #content-footer { height: 0; font-size: 0; clear: both; } /*--------------- header ---------------*/ #header { background: var(--header-background-color); color: var(--header-text-color); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } #header > .inner:first-child { padding: 0.5em 2em; display: flex; flex-wrap: wrap; align-items: center; } @media (min-width: 800px) { #header > .inner:first-child { max-width: calc(var(--entry-width) + var(--sidebar-width) + 150px); margin: 0 auto; padding: 0.5em; padding-left: 134px; border-left: 50px solid transparent; border-right: 50px solid transparent; box-sizing: border-box; min-height: 50px; } #header:before { content: ""; display: block; width: 100%; height: var(--header-height); background: var(--header-image); background-position: top center; } } h1#title { font-family: var(--title-font); font-size: 1.5em; font-style: italic; margin: 0 0.5em 0 0; padding: 0; line-height: 1.2; } h1#title a { color: var(--header-link-color); } h1#title a:hover { color: var(--header-link-hover-color); } h2#subtitle { margin: 0; padding: 0; font-size: 1em; line-height: 1.2; } h2#subtitle::before { content: "[ "; } h2#subtitle::after { content: " ]"; } h2#pagetitle { display: none; } /*--------------- content ---------------*/ #canvas { margin-bottom: 50px; } #content > .inner:first-child { position: relative; padding-top: 50px; } @media (min-width: 800px) { #content { margin: 0 auto; padding: 0 50px; } } @media (min-width: 1024px) { #content { max-width: calc(var(--entry-width) + var(--sidebar-width) + 50px); } #content > .inner:first-child { border-right: var(--sidebar-width) solid transparent; } #primary { width: 100%; margin-right: -100%; margin-left: 0; float: left; clear: both; } #secondary { float: right; width: var(--sidebar-width); margin-right: calc(-1 * var(--sidebar-width)); } #primary > .inner:first-child { padding-right: 50px; } } /*--------------- entries ---------------*/ .entry, .full .comment { margin-bottom: 50px; padding: 10px 0; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); background: var(--entry-background-color); } .entry .entry-title, .full .comment-title { margin: 0; padding: 0.5em calc(2 * var(--text-size)); line-height: 1.2; font-family: var(--title-font); font-weight: normal; font-style: italic; font-size: 1.2em; box-sizing: border-box; } .sticky-entry-icon, .admin-post-icon { display: none; } @media (min-width: 800px) { .has-userpic .entry-title, .has-userpic .comment-title { padding-left: 144px; min-height: 40px; } } .no-subject .entry .entry-title, .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .header .datetime { display: block; color: var(--heading-color); background: var(--heading-background-color); line-height: 34px; padding: 0 2em; } .header .datetime a { color: var(--heading-color); } @media (min-width: 800px) { .has-userpic .header .datetime { padding-left: 144px; } } .restrictions img, .access-filter img { display: none; } .restrictions-NSFW .entry .datetime:before { content: "[NSFW] "; } .restrictions-18 .entry .datetime:before { content: "[18+] "; } .access-filter:before { float: right; font-family: "Material Icons"; font-size: 24px; line-height: 24px; padding: 10px; background: var(--heading-background-color); border-radius: 10px; margin-right: 10px; margin-top: -5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } .security-protected .access-filter:before { content: "lock"; } .security-private .access-filter:before { content: "visibility_off"; } .has-userpic .userpic { float: left; margin: 10px 20px 0 10px; } .has-userpic .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border: 5px solid var(--heading-background-color); background: var(--heading-background-color); border-radius: 5px; display: block; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } @media (min-width: 800px) { .has-userpic .userpic { width: 114px; height: 114px; text-align: center; margin: -74px 20px 0 10px; display: flex; align-items: center; justify-content: center; } .has-userpic .userpic img { border: 7px solid var(--heading-background-color); max-width: 100px; max-height: 100px; border-radius: 10px; } } .entry .poster, .full .poster { display: block; padding: 0.5em 2em 0; } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster.empty { padding-top: 1px; } .entry-content { margin: 2em; } @media (min-width: 1024px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action { display: flex; align-items: center; line-height: 1; } .cuttag-action img { display: none; } .cuttag-action:before { content: "content_cut"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } .cuttag-action:after { content: ""; height: 0; width: 100%; border-bottom: 1px dashed var(--entry-border-color); } .cut-open, .cut-close { display:none; } .cut-text{ font-weight: normal; margin-left: 27px; display: block; } .metadata { padding: 0 2em; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata li { margin-bottom: 0.25em; } .entry div.tag { padding: 0 2em; } .tag ul { padding: 0; margin: 0; display: inline; } .tag li { display: inline; } ul.entry-management-links { background: var(--heading-background-color); padding: 0.5em 2em; margin: 1em 0; line-height: 1; } ul.entry-management-links.icon-links { height: 20px; margin: 20px 0; padding: 0 10px; display: flex; justify-content: flex-end; list-style: none; } ul.entry-management-links.icon-links li { margin-left: 5px; } ul.entry-management-links.icon-links li a { color: var(--icon-color); } ul.entry-management-links.icon-links li a:hover { color: var(--icon-hover-color); } ul.entry-management-links.text-links li { margin-right: 0.5em; display: inline; } .entry-management-links.text-links li a { color: var(--heading-color); } .entry-management-links li a img { display: none; } .entry-management-links li a:before { display: block; font-family: "Material Icons"; font-size: 22px; line-height: 22px; padding: 8px; background: var(--heading-background-color); border-radius: 8px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); margin-top: -9px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "notifications"; } .icon-links .link_next a:before { content: "arrow_forward"; } ul.entry-interaction-links { margin: 0; padding: 0 2em 1em; } ul.entry-interaction-links li { display: inline; padding-right: 0.25em; } /*------------ comments ------------*/ .comment-pages { background: var(--header-background-color); text-align: center; margin: 50px 0; padding: 7px; color: var(--header-text-color); border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .comment-pages a { color: var(--header-link-color); } .comment-pages a:hover { color: var(--header-link-hover-color); } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; position: relative; z-index: 9; } .partial { padding: 1em; margin: 50px 0; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); background: var(--entry-background-color); } .comment .comment-title { margin: 0; } .comment-date-text, .comment-from-text { display: none; } .comment-content { padding: 2em; } .multiform-checkbox { padding: 0 2em; } ul.comment-management-links { background: var(--heading-background-color); padding: 0.5em 2em; margin: 1em 0; line-height: 1; } ul.comment-management-links.icon-links { height: 20px; margin: 20px 0; padding: 0 10px; display: flex; justify-content: flex-end; list-style: none; } ul.comment-management-links.icon-links li { margin-left: 5px; } ul.comment-management-links.icon-links li a { color: var(--icon-color); } ul.comment-management-links.icon-links li a:hover { color: var(--icon-hover-color); } ul.comment-management-links.text-links li { margin-right: 0.5em; display: inline; } ul.comment-management-links.text-links li a { color: var(--heading-color); } ul.comment-management-links li a img { display: none; } ul.comment-management-links li a:before { display: block; font-family: "Material Icons"; font-size: 22px; line-height: 22px; padding: 8px; background: var(--heading-background-color); border-radius: 8px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); display: block; margin-top: -9px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } ul.comment-interaction-links { margin: 0; padding: 0 2em 1em; } ul.comment-interaction-links li { display: inline; padding-right: 0.25em; } .bottomcomment ul.entry-management-links.icon-links { margin: 10px 0; } .bottomcomment ul.entry-management-links.text-links { margin: 0 0 1em; text-align: left; } .bottomcomment ul.entry-interaction-links { text-align: left; } .bottomcomment { background: var(--entry-background-color); text-align: center; margin: 50px 0; padding: 10px 0; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } #multiform_mode { background: var(--entry-background-color); border: 1px solid var(--entry-border-color); padding: 5px; font-size: var(--text-size); font-family: var(--main-font); border-radius: 8px; } #multiform_submit { border: 0; font-size: var(--text-size); font-family: var(--main-font); padding: 6px 10px; background: var(--heading-background-color); border-radius: 8px; color: var(--heading-color); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { padding: 0 10px; } #qrdiv input, #qrdiv select, #qrdiv textarea { background: var(--entry-background-color); border: 1px solid var(--entry-border-color); color: var(--text-color-alt); font-size: var(--text-size); font-family: var(--main-font); border-radius: 8px; } #qrdiv input[type="button"], #qrdiv input[type="submit"] { padding: 5px 10px; border: 0; background: var(--heading-background-color); border-radius: 8px; color: var(--heading-color); } .qr-meta .block-icon img { border-radius: 5px; } #postform { margin-bottom: 50px; padding: 2em; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); background: var(--entry-background-color); } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .tags-container, .icons-container { background: var(--entry-background-color); margin-bottom: 50px; padding: 10px 0; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .month .header, .tags-container .header, .icons-container .header { background: var(--heading-background-color); line-height: 34px; padding: 0 10px; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1em; position: relative; z-index: 1; padding: 0 20px; font-weight: normal; color: var(--heading-color); } .month .header:before, .tags-container .header:before, .icons-container .header:before { float: left; font-family: Material Icons; font-size: 24px; line-height: 24px; padding: 10px; background: var(--heading-background-color); border-radius: 10px; margin-top: -5px; margin-right: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .month .header:before { content: "calendar_month"; } .tags-container .header:before { content: "style"; } .icons-container .header:before { content: "photo_library"; } .tags-container .contents { padding: 2em; } .month .footer, #primary .manage-link { background: var(--heading-background-color); line-height: 34px; text-align: center; } .month .footer a, .tags-container .footer a, .icons-container .footer a { color: var(--heading-color); } /*------------ archive------------*/ .day-date { display: none; } .month caption { display: none; } .month table { width: 100%; border: none; text-align: center; border-collapse: collapse; } table.month { margin: 0 auto; } table.month td { padding: 0.5em 0; border-top: 1px solid var(--entry-border-color); } table.month th { padding: 0.5em 0; } table.month td p { margin: 0; display: inline; } table.month td p:before { content: "[ "; } table.month td p:after { content: " ]"; } table.month td.day-has-entries .label { font-weight: bold; } .page-month .month { background: var(--entry-background-color); padding: 10px 0; margin-bottom: 50px; border-radius: 2px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .month dl dt { background: var(--heading-background-color); height: 20px; margin-top: 2em; } .month dl dt a { margin: -12px 10px 0; background: var(--heading-background-color); width: 44px; text-align: center; border-radius: 10px; line-height: 44px; float: left; color: var(--icon-color); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .month dl dt:first-child { margin-top: 0; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dd { margin: 2em 2em 0; } .month dd > span { padding-right: 0.25em; } #archive-month .navigation { background: var(--header-background-color); } #archive-month .navigation select { background: var(--entry-background-color); border: 0; border-radius: 8px; font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color); } #archive-month .navigation input { background: transparent; border-radius: 8px; color: var(--header-link-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); text-transform: uppercase; } /*------------ tags ------------*/ ul.ljtaglist { padding: 0; margin-left: 1em; list-style: disc inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .page-icons .bottompages { border-top: 1px solid var(--entry-border-color); text-align: center; padding: 1em; } .icon { border-top: 1px solid var(--entry-border-color); padding: 1em; display: flex; } .icon-image { padding-right: 1em; } .icon-image img { display: block; } .sorting-options ul { margin: 0; padding: 1em; text-align: center; } .sorting-options ul li { display: inline; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*------------ modules ------------*/ .module { background: var(--entry-background-color); padding-top: 10px; margin-bottom: 50px; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .module h2 { font-size: 1em; position: relative; padding: 0 10px; background: var(--heading-background-color); line-height: 34px; font-weight: normal; } .module h2:before { float: left; font-family: Material Icons; font-size: 24px; line-height: 24px; padding: 10px; background: var(--heading-background-color); border-radius: 10px; margin-top: -5px; margin-right: 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); color: var(--icon-color); } .module-navlinks h2:before { content: "map"; } .module-typelist h2:before { content: "explore"; } .module-tags_list h2:before, .module-tags_multilevel h2:before, .module-tags_cloud h2:before { content: "loyalty"; } .module-calendar h2:before { content: "calendar_month"; } .module-customtext h2:before { content: "comment"; } .module-pagesummary h2:before { content: "article"; } .module-active h2:before { content: "local_fire_department"; } .module-search h2:before { content: "search"; } .module-cuttagcontrols h2:before { content: "content_cut"; } .module-syndicate h2:before { content: "rss_feed"; } .module-subscriptionfilters h2:before { content: "filter_alt"; } .module-credit h2:before { content: "code_off"; } .module-credit ul { display: none; } .module-credit .module-content:before { content: 'Theme "Highlight" by myrtillenne'; } .module h2, .module h2 a, .module .manage-link a { color: var(--heading-color); } .module-content { padding: 1.5em; } .module-content ul { list-style: none; margin: -1.5em; padding: 0; clear: both; } .module-content li { border-bottom: 1px solid var(--entry-border-color); padding: 0.5em 1em; } .module-content li:last-child { border-bottom: 0; } .module-calendar .module-content { text-align: center; padding: 0; } .module-calendar table { margin: 0 auto; width: 100%; border-collapse: collapse; } .module-calendar table td { border-top: 1px solid var(--entry-border-color); padding: 0.5em 0; } .module-calendar table th { padding: 0.5em 0; } .module-calendar .entry-day { font-style: italic; } .tags_cloud li, .module-tags_cloud li { display: inline; } .module .manage-link, .module-userprofile h2, .journal-website-name, .journal-name, ul.userlite-interaction-links, .module-time, .module-powered { display: none !important; } .module .userpic img { display: block; border: 7px solid var(--header-background-color); background: var(--header-background-color); border-radius: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); margin: 0 auto; } .module-userprofile, .module-userprofile .module-content { padding: 0; background: transparent; box-shadow: none; } @media (min-width: 800px) { .module-userprofile, .module-userprofile .module-content { margin: 0; } .module .userpic { width: 114px; height: 114px; text-align: center; position: absolute; top: -82px; left: 0; display: flex; align-items: center; } } .module-search .module-content { text-align: center; } .search-form .search-box-item, .search-form .search-button-item { display: block; } input.search-box { margin: 0 auto; background: var(--entry-background-color); border: 1px solid var(--entry-border-color); border-radius: 8px; padding: 5px; font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color-alt); } input.search-button { padding: 5px 10px; background: var(--heading-background-color); border-radius: 8px; color: var(--heading-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); } /*--------------- navigation ---------------*/ .navigation .page-separator, .topnav, .noentries, .navigation.empty { display: none; } .navigation { background: var(--header-background-color); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); border-radius: 5px; margin-bottom: 50px; color: var(--header-text-color); } .navigation ul { margin: 0; padding: 0; padding: 0.5em; } .navigation li { display: inline; padding: 0 0.25em; } .navigation a { color: var(--header-link-color); } .navigation a:hover { color: var(--header-link-hover-color); } #entries .navigation { height: 20px; } #entries .navigation ul { float: left; margin-top: -12px; padding: 0 10px; list-style: none; display: flex; flex-wrap: wrap; } @media (min-width: 1024px) { #entries .navigation { background: transparent; box-shadow: none; border-radius: 0; position: absolute; left: 49px; bottom: -32px; z-index: 9; height: auto; margin: 0; } } li.page-back, li.page-forward { margin-right: 5px; padding: 0; } li.page-back a, li.page-forward a { font-size: 0; display: block; } #entries .navigation li a:before { display: block; font-family: "Material Icons"; font-size: 24px; line-height: 24px; padding: 10px; background: var(--header-background-color); border-radius: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } /*------------ footer ------------*/ #footer { clear: both; } #footer .inner { background: var(--header-background-color); height: 20px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); border-radius: 5px; } @media (min-width: 800px) { #footer { padding: 0 50px; } } @media (min-width: 1024px) { #footer { margin: 0 auto; max-width: calc(var(--entry-width) + var(--sidebar-width) + 50px); padding: 0 50px; } #footer .inner { margin-right: calc(var(--sidebar-width) + 50px); } } .page-top { float: left; margin-top: -12px; margin-left: 10px; } .page-top a { font-size: 0; display: block; color: var(--header-link-color); } .page-top a:hover { color: var(--header-link-hover-color); } .page-top a:before { display: block; content: "arrow_upward"; font-family: "Material Icons"; font-size: 24px; line-height: 24px; padding: 10px; background: var(--header-background-color); border-radius: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; padding: 10px 0 0; border-radius: 5px; font-family: var(--main-font); font-size: 1em; color: var(--text-color); width: 220px; text-align: center; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; padding: 0.5em; margin: 0; } div.ContextualPopup .Userpic { margin: 0; border: 0; float: none; position: relative; } div.ContextualPopup .Userpic:before { content: ""; position: absolute; width: 100%; height: 20px; top: 50%; left: 0; margin-top: -10px; background: var(--heading-background-color); z-index: -1; } div.ContextualPopup .Userpic img { border-radius: 8px; border: 6px solid var(--heading-background-color); background: var(--heading-background-color); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } div.ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; } div.ContextualPopup li { padding: 0.5em; border-top: 1px solid var(--entry-border-color); line-height: 1; list-style: none; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--header-background-color); justify-content: center; padding: 0.75em 0; color: var(--header-text-color); } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--header-link-color); } #lj_controlstrip a:hover { text-decoration: none; color: var(--header-link-hover-color); } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { font-weight: normal; font-size: 1em; color: var(--header-text-color); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid transparent; font-size: 1em !important; font-family: var(--main-font) !important; background: var(--entry-background-color) !important; color: var(--text-color) !important; border-radius: 8px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } #lj_controlstrip input[type="submit"] { padding: 0.5em; color: var(--header-link-color) !important; font-family: var(--title-font) !important; background: transparent !important; text-transform: uppercase; box-shadow: none; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_userpic img { border-radius: 8px; max-width: 50px; max-height: 50px; width: auto; height: auto; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; }
Into the "Custom stylesheet URL" field paste the following.
https://fonts.googleapis.com/css2?family=Material+Icons&family=Literata&family=Literata:ital@1&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

RESOURCES

icon font by Google
images from freepik by lukasdedi, mariadetarosarinda, upklyak

comments

Tiles

Sat, 17 Sep 2022 20:21:35 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

header image (800x350px)
default icon, navigation links, links list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "1 Column (modules at bottom; no sidebar)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "icons" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Modules" tab. Set "Profile" to number 1, "Navigation" to number 2, "Links list" to number 4 and "Custom text" to number 13. Uncheck the other modules.
Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)".
/*------------------------------------- - layout - tiles (tabula rasa) - https://myrtillenne.dreamwidth.org - icon font - material symbols - https://fonts.google.com/icons - header image - tawatchai07 - https://www.freepik.com/tawatchai07 /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --content-width: 800px; /*also the width of the header image*/ --main-font: DM Sans, sans-serif; --title-font: DM Sans, sans-serif; --background-color: #c4c5ec; --text-color: #333342; --link-color: #9d67b8; --link-hover-color: #6363a0; --entry-background-color: #f4f4ff; --text-color-alt: #333342; --link-color-alt: #6363a0; --link-hover-color-alt: #9d67b8; --entry-background-color-alt: #e6e6f7; --gradient1-color: #9696de; --gradient2-color: #c4a2d4; --icon-color: #f4f4ff; --header-image: url(https://rosecarmine.dreamwidth.org/file/141415.jpg); --header-image-height: 350px; --sidebar-width: 350px; --link1-icon: "photo_camera"; --link2-icon: "photo"; --link3-icon: "movie"; --link4-icon: "business_center"; --link5-icon: "shopping_cart"; --link6-icon: "code_off"; --link7-icon: "headphones"; --link8-icon: "star"; --link9-icon: "computer"; --link10-icon: "folder_open"; --userpic-size: 100px; } /*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { color: var(--text-color); background: var(--background-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); margin: 0; } /*--------------- links ---------------*/ a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { background: var(--entry-background-color-alt); color: var(--text-color-alt); margin: 1em 0; padding: 1em; border-radius: 5px; } blockquote a { color: var(--link-color-alt); } blockquote a:hover { color: var(--link-hover-color-alt); } /*--------------- content ---------------*/ #canvas { margin-top: 50px; } @media (min-width: 1024px) { #canvas { margin-left: var(--sidebar-width); margin-bottom: 50px; } } #primary { max-width: var(--content-width); margin: 0 auto; } @media (min-width: 800px) { #primary { padding: 0 50px; } } /*--------------- header ---------------*/ #header { text-align: center; margin: 50px auto; max-width: var(--content-width); } @media (min-width: 800px) { #header { padding: 0 50px; } } #header > .inner { background: var(--entry-background-color); margin-top: 4px; padding: 2em; border-radius: 5px; } @media (min-width: 800px) { #header:before { content: ""; display: block; width: 100%; height: var(--header-image-height); background-image: var(--header-image); background-size: cover; background-position: center center; border-radius: 5px; } } h1#title { font-size: 1.5em; line-height: 1.2; margin: 0; padding: 0; font-weight: normal; } h2#subtitle { font-size: 1em; font-weight: normal; background: var(--entry-background-color-alt); color: var(--text-color-alt); border-radius: 5px; padding: 5px 10px; margin: 0.5em 0 0; } h2#pagetitle { display: none; } /*--------------- entries ---------------*/ .entry, .full .comment { margin: 50px 0; background: var(--entry-background-color); border-radius: 5px; padding: 2em; } .has-userpic .entry .header, .has-userpic .comment .header { float: left; } @media (min-width: 800px) { .has-userpic .entry .header { width: calc(100% - var(--userpic-size) - 1em - 10px); } } .entry .entry-title, .full .comment-title { font-size: 1.5em; line-height: 1.2; font-weight: normal; margin: 0 0 1em; padding: 0; } .no-subject .entry .entry-title { margin: 0; } .sticky-entry-icon, .admin-post-icon { display: none; } .header .datetime { float: left; display: flex; align-items: flex-start; line-height: 22px; margin-bottom: 4px; } .header .datetime span { color: var(--text-color-alt); background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; margin-right: 4px; } .header .datetime:before { content: "today"; font-family: "Material Symbols Outlined"; font-size: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .header .datetime a { color: var(--link-color-alt); } .header .datetime a:hover { color: var(--link-hover-color-alt); } .restrictions img, .access-filter img { display: none; } .access-filter:before, .restrictions:before { font-family: "Material Symbols Outlined"; font-size: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); float: left; line-height: 22px; margin-right: 4px; margin-bottom: 4px; } .security-protected .access-filter:before { content: "lock"; } .security-private .access-filter:before { content: "visibility_off"; } .restrictions-NSFW .restrictions:before { content: "warning"; } .restrictions-18 .restrictions:before { content: "18+"; font-size: 16px; font-family: arial, sans-serif; font-weight: bold; } .has-userpic .userpic { float: right; margin-left: 1em; shape-outside: circle(50%); } #primary .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border-radius: 50%; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); } @media (min-width: 800px) { #primary .userpic img { max-width: var(--userpic-size); max-height: var(--userpic-size); } } .entry .poster { clear: left; display: block; color: var(--text-color-alt); } .entry .poster { font-size: 0; } .entry .poster .ljuser { font-size: var(--text-size); display: inline-flex; align-items: flex-start; line-height: 22px; margin-bottom: 4px; } .entry .poster .ljuser:before { font-family: "Material Symbols Outlined"; font-size: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .entry .poster .ljuser b { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; margin-right: 4px; font-weight: normal; display: block; } .entry .poster .ljuser:nth-child(1):before, .full .poster:before { content: "person"; } .entry .poster .ljuser:nth-child(2):before { content: "group"; } .poster .ljuser img { display: none; } .entry .poster a, .full .poster a { color: var(--link-color-alt); } .entry .poster a:hover, .full .poster a:hover { color: var(--link-hover-color-alt); } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .entry-content { margin: 2em 0; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol { padding-left: 1em; } .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .cuttag-action img { display: none; } .cut-wrapper{ display: inline-flex; align-items: flex-start; } .cuttag, .cuttag-action-after { font-size: 26px; min-width: 22px; line-height: 22px; padding: 5px; font-family: arial; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; } .cuttag-action:before { content: "+"; color: var(--icon-color); } .cuttag-action-after { display: inline-block; } .cuttag-action-after:before { display: inline-block; transform: rotate(45deg); } .cut-open, .cut-close { display: none; } .cut-text { font-weight: normal; line-height: 22px; padding: 5px; background: var(--entry-background-color-alt); border-radius: 5px; } .cut-text a { font-size: var(--text-size); color: var(--link-color-alt); } .cut-text a:hover { color: var(--link-hover-color-alt); } .metadata ul { list-style: none; margin: 0; padding: 0; } .metadata-label, .entry .tag-text { display: none; } .metadata li { margin: 4px 0; line-height: 22px; display: flex; align-items: flex-start; color: var(--text-color-alt); } .metadata li:before { font-family: "Material Symbols Outlined"; font-size: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } #metadata-music:before { content: "headphones"; } #metadata-mood:before { content: "face"; } #metadata-location:before { content: "location_on"; } #metadata-xpost:before { content: "add_location"; } .metadata img { margin-right: 4px; align-self: center; } .metadata-item { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; } .metadata a, .entry div.tag a { color: var(--link-color-alt); } .metadata a:hover, .entry div.tag a:hover { color: var(--link-hover-color-alt); } .entry div.tag:before { content: "tag"; font-family: "Material Symbols Outlined"; font-size: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); line-height: 22px; float: left; } .entry .tag ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; } .entry .tag ul li { color: transparent; margin-bottom: 4px; font-size: 0; } .entry .tag ul li a { font-size: var(--text-size); background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; display: inline-block; line-height: 22px; margin-right: 4px; } .tag-nav-trigger { float: right; } .entry-management-links, .entry-interaction-links { margin: 0; padding: 0; list-style: none; } .entry-management-links li, .entry-interaction-links li { margin-right: 4px; margin-bottom: 4px; float: left; } .entry-management-links li a, .entry-interaction-links li a { display: block; color: var(--link-color-alt); } .entry-management-links li a:hover, .entry-interaction-links li a:hover { color: var(--link-hover-color-alt); } .entry-management-links li a img { display: none; } .entry-management-links li a:before { font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); display: block; } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "notifications"; } .icon-links .link_next a:before { content: "arrow_forward"; } .entry-management-links.text-links li a { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; } li.entry-readlink a { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; } li.entry-permalink a { font-size: 0; } li.entry-replylink a { font-size: 0; } li.entry-permalink a:before, li.entry-replylink a:before { font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); display: block; } li.entry-permalink a:before { content: "launch"; } li.entry-replylink a:before { content: "add_comment"; } .footer:after { content: ""; display: block; clear: both; } /*--------------- comments ---------------*/ #comments { margin: 50px 0; } .comment-pages { font-family: var(--title-font); background: var(--entry-background-color); padding: 0.5em; text-align: center; border-radius: 5px; margin-top: 10px; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .no-subject .comment .comment-title { padding: 0; margin: 0; } .comment-date-text, .comment-from-text { display: none !important; } .full .poster { line-height: 22px; clear: left; float: left; color: var(--text-color-alt); display: flex; } .full .poster:before { font-family: "Material Symbols Outlined"; font-size: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .full .poster b, .full .anonymous { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; margin-right: 4px; font-weight: normal; display: block; } .full .poster:before { content: "person"; } .comment .poster-ip { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; display: inline-block; margin-top: 4px; color: var(--text-color-alt); } .comment-content { padding: 2em 0; clear: left; } .comment .multiform-checkbox { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; float: left; margin-right: 4px; color: var(--text-color-alt); } .comment-management-links, .comment-interaction-links { margin: 0; padding: 0; list-style: none; } .comment-management-links li, .comment-interaction-links li { margin-right: 4px; margin-bottom: 4px; float: left; color: var(--text-color-alt); } .comment-management-links.icon-links li a { padding: 0 !important; } .comment-management-links li a img { display: none; } .comment-management-links li a:before { font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); display: block; } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } .comment-management-links.text-links li, .comment-interaction-links li { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; display: block; } .comment-management-links li a, .comment-interaction-links li a { color: var(--link-color-alt); } .comment-management-links li a:hover, .comment-interaction-links li a:hover { color: var(--link-hover-color-alt); } .bottomcomment { padding: 1em; background: var(--entry-background-color); border-radius: 5px; margin: 10px 0; overflow: hidden; } .bottomcomment .entry-interaction-links:after { content: ""; display: block; clear: left; } textarea#commenttext { width: 100%; } .partial .comment { background: var(--entry-background-color); margin-top: 10px; padding: 1em; border-radius: 5px; } .partial .comment-title { margin: 0; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { padding-top: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { background: var(--entry-background-color-alt); border: 0; color: var(--text-color-alt); font-size: var(--text-size); font-family: var(--main-font); border-radius: 5px; } #qrdiv input[type="button"], #qrdiv input[type="submit"] { padding: 5px 10px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } #postform { padding: 2em; margin-top: 5px; background: var(--entry-background-color); border-radius: 5px; margin: 50px 0; } #multiform_mode { background: var(--entry-background-color-alt); border: 0; padding: 5px; font-size: var(--text-size); color: var(--text-color-alt); font-family: var(--main-font); border-radius: 5px; } #multiform_submit { border: 0; font-size: var(--text-size); font-family: var(--main-font); padding: 5px 10px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .qr-meta .block-icon img { border-radius: 5px; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .page-month .month, .tags-container, .icons-container { margin: 50px 0; background: var(--entry-background-color); padding: 2em; border-radius: 5px; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.5em; font-family: var(--title-font); font-weight: normal; margin: 0; padding: 0; line-height: 1.2; } .month-wrapper .contents, .tags-container .contents, .icons-container .contents { margin-top: 2em; } #archive-year .month .footer, #primary .manage-link { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; margin-top: 2em; } #archive-year .month .footer a, #primary .manage-link a { color: var(--link-color-alt); } #archive-year .month .footer a:hover, #primary .manage-link a:hover { color: var(--link-hover-color-alt); } /*------------ archive ------------*/ .day-date { display: none; } .month caption { display: none; } table.month { margin: 0 auto; border-collapse: separate; border-spacing: 4px; width: 100%; border: none; text-align: center; table-layout: fixed; } table.month td { position: relative; } table.month th { line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); font-weight: normal; } .day .label { display: block; background: var(--entry-background-color-alt); color: var(--text-color-alt); border-radius: 5px; line-height: 22px; padding: 5px; } .day.day-has-entries .label { line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } table.month .day-has-entries p { left: 0; top: 0; position: absolute; z-index: 9; height: 100%; width: 100%; display: block; margin: 0; } table.month .day-has-entries p a { color: transparent; height: 100%; width: 100%; display: block; } .month dl { margin: 0; } .month dl dt { background: var(--entry-background-color-alt); border-radius: 5px; line-height: 22px; padding: 5px 10px; margin-top: 2em; } .month dl dt:first-child { margin-top: 0; } .month dl dt a { color: var(--link-color-alt); } .month dl dt a:hover { color: var(--link-hover-color-alt); } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dd { margin: 2em 0 0; } .month dd > span { padding-right: 0.25em; } .month .tag ul { display: inline; margin: 0; padding: 0; } .month .tag li { display: inline; } #archive-month .navigation form { display: flex; flex-wrap: wrap; list-style: none; } #archive-month .navigation select { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; border: 0; font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color-alt); } #archive-month .navigation input { line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); border: 0; font-family: var(--main-font); font-size: var(--text-size); } li.month-back, li.month-forward { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; } #archive-year .navigation li a { display: block; background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; } #archive-year .navigation li.active { line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /*------------ tags ------------*/ ul.ljtaglist { margin: 0 0 0 1em; padding: 0; list-style: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0; padding: 0; } .sorting-options ul li { display: inline; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .page-icons .toppages { display: none; } .icons-container .icon { display: flex; flex-wrap: wrap; margin-top: 1em; padding: 1em; background: var(--entry-background-color-alt); color: var(--text-color-alt); border-radius: 5px; } .icons-container .icon:last-child { border-bottom: 0; } .icons-container .icon a { color: var(--link-color-alt); } .icons-container .icon a:hover { color: var(--link-hover-color-alt); } .icon-image { order: 2; min-width: auto; margin: 0; } .icon-image img { display: block; } .icon-info { flex: 1; } .icon-pages { margin-top: 2em; } .icon-pages p { margin: 0; padding: 0; } /*------------ sidebar ------------*/ #secondary { background: var(--entry-background-color); overflow: hidden; scrollbar-width: thin; scrollbar-color: var(--entry-background-color-alt) var(--entry-background-color); } .module-section-one { max-width: var(--content-width); margin: 2em auto; padding: 0 2em; } @media (min-width: 1024px) { #secondary { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100%; overflow: auto; display: flex; } .module-section-one { margin: 50px 0; } } #secondary > .inner:first-child { margin: auto; width: 100%; } .module-content ul { list-style: none; padding: 0; margin: 0; } .module-content li { display: flex; align-items: flex-start; margin: 4px 0; line-height: 22px; } .module-content li:before { font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .module-content li a { background: var(--entry-background-color-alt); color: var(--link-color-alt); border-radius: 5px; flex: 1; padding: 5px 10px; } .module-content li a:hover { color: var(--link-hover-color-alt); } .module-userprofile { text-align: center; margin-bottom: 2em; } .module .userpic img { border-radius: 50%; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); } .journal-name { display: inline-block; padding: 5px 10px; border-radius: 5px; line-height: 22px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .list-item-recent:before { content: "home"; } .list-item-archive:before { content: "calendar_month"; } .list-item-read:before { content: "feed"; } .list-item-tags:before { content: "style"; } .list-item-network:before { content: "person_search"; } .list-item-memories:before { content: "bookmark"; } .list-item-userinfo:before { content: "account_circle"; } .module-typelist li:before { content: "near_me"; } .module-typelist li:nth-child(1):before { content: var(--link1-icon); } .module-typelist li:nth-child(2):before { content: var(--link2-icon); } .module-typelist li:nth-child(3):before { content: var(--link3-icon); } .module-typelist li:nth-child(4):before { content: var(--link4-icon); } .module-typelist li:nth-child(5):before { content: var(--link5-icon); } .module-typelist li:nth-child(6):before { content: var(--link6-icon); } .module-typelist li:nth-child(7):before { content: var(--link7-icon); } .module-typelist li:nth-child(8):before { content: var(--link8-icon); } .module-typelist li:nth-child(9):before { content: var(--link9-icon); } .module-typelist li:nth-child(10):before { content: var(--link10-icon); } .module-customtext { margin-top: 2em; } .module h2, .module .manage-link, ul.userlite-interaction-links, .journal-website-name, .module-calendar, .module-tags_list, .module-tags_cloud, .module-tags_multilevel, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered { display: none; } #secondary::-webkit-scrollbar { width: 12px; height: 12px; } #secondary::-webkit-scrollbar-track { background: var(--entry-background-color); } #secondary::-webkit-scrollbar-thumb { background: var(--entry-background-color-alt); border-radius: 5px; border: 3px solid var(--entry-background-color); } #secondary::-webkit-scrollbar-corner { background: var(--entry-background-color); } /*------------ navigation ------------*/ .navigation ul { background: var(--entry-background-color); border-radius: 5px; margin: 50px 0; padding: 4px 4px 0; color: var(--text-color-alt); display: flex; flex-wrap: wrap; list-style: none; } .navigation li { margin-right: 4px; margin-bottom: 4px; } @media (min-width: 1024px) { #entries .navigation ul { background: transparent; margin: 0; float: left; } } #entries .navigation li a { display: inline-block; background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; } #entries .navigation li:before { float: left; font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } li.page-back:before { content: "arrow_back"; } li.page-forward:before { content: "arrow_forward"; } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } .navigation a { color: var(--link-color-alt); } .navigation a:hover { color: var(--link-hover-color-alt); } /*------------ footer ------------*/ #footer .inner { text-align: center; background: var(--entry-background-color); padding-bottom: 2em; } @media (min-width: 1024px) { #footer { padding: 0 50px; max-width: var(--content-width); margin: 0 auto; } #footer .inner { text-align: right; border-radius: 5px; padding: 4px; } } .page-top { display: inline-block; } .page-top a { font-size: 0; } .page-top a:before { float: left; content: "arrow_upward"; font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { color: var(--text-color); background: var(--entry-background-color); color: var(--text-color); border: 0; padding: 1em; font-family: inherit; border-radius: 5px; width: 200px; text-align: center; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } div.ContextualPopup .Relation { font-size: 1em; font-weight: normal; margin: 1em 0 0; padding: 8px; border-radius: 5px; line-height: 1; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } div.ContextualPopup .Userpic { border: none; float: none; margin: 0; } div.ContextualPopup .Userpic img { border-radius: 50%; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; text-align: center; } .ContextualPopup .Actions li { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; margin-top: 4px; } .ContextualPopup .Actions li a { color: var(--link-color-alt); } .ContextualPopup .Actions li a:hover { color: var(--link-hover-color-alt); } /*------------ control strip ------------*/ #lj_controlstrip { justify-content: center; text-align: center; background: var(--entry-background-color); color: var(--text-color); padding: 0.75em 0; z-index: 9; position: relative; } @media (min-width: 1024px) { #lj_controlstrip { transform: translateY(-100%); position: fixed; transition: transform 0.7s; } #lj_controlstrip:before { content: ""; position: absolute; bottom: -41px; height: 41px; width: 32px; right: 9px; } #lj_controlstrip:after { font-family: "Material Symbols Outlined"; content: "unfold_more"; font-size: 22px; position: absolute; bottom: -41px; right: 9px; cursor: pointer; line-height: 22px; text-align: center; color: var(--link-color); background: var(--entry-background-color); padding: 5px; border-radius: 5px; } #lj_controlstrip:hover { transform: translateY(0); } } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em !important; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip input, #lj_controlstrip select { border: 0; background: var(--entry-background-color-alt) !important; color: var(--text-color-alt) !important; font-size: var(--text-size) !important; font-family: var(--main-font); border-radius: 5px; } #lj_controlstrip input[type="submit"] { background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ) !important; color: var(--icon-color) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); padding: 5px 10px; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a img { border-radius: 50%; padding: 3px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); }
Paste the following into the "Custom stylesheet URL" field.
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&family=DM+Sans&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

https://fonts.google.com/icons

RESOURCES

icon font by Google
image from freepik

comments

Jewels

Sat, 13 Aug 2022 12:17:38 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

sidebar image (350x450px)
navigation links, links list, tags list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Basic Boxes" and apply any theme.
Choose the "1 Column (modules at bottom; no sidebar)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "icons" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)".
/*------------------------------------- - layout - jewels (basic boxes) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - image - https://www.freepik.com/author/aopsan -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --main-font: Work Sans, sans-serif; --title-font: Arima, sans-serif; --line-height: 1.5; --text-color: #503a3d; --background-color: #e8d6ef; --link-color: #9c4aa6; --link-hover-color: #e9a572; --icon-gradient1-color: #ebd1ba; --icon-gradient2-color: #ed9f54; --icon-background-gradient1-color: #af61b8; --icon-background-gradient2-color: #291f28; --icon-container-background-color: #af61b8; --icon-container-text-color: #f4e6d9; --entry-width: 800px; --entry-background-color: #fbf8fc; --entry-border-color: #dcc0e7; --entry-icon-color: #e9a572; --userpic-size: 100px; --sidebar-width: 350px; --sidebar-image-height: 450px; --sidebar-image: url(https://rosecarmine.dreamwidth.org/file/138884.jpg); } /*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { font-family: var(--main-font); font-size: var(--text-size); padding: 0; margin: 0; line-height: var(--line-height); background-color: var(--background-color); color: var(--text-color); } html body { margin-left: 0; margin-right: 0; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited, a:active { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { margin: 1em 0; padding-left: 1em; position: relative; font-style: italic; } blockquote:before { content: "format_quote"; font-family: Material Icons; font-size: 24px; line-height: 0; margin-left: -1rem; margin-right: 5px; color: var(--entry-icon-color); font-style: normal; vertical-align: middle; } blockquote:after { content: ""; position: absolute; top: 2em; left: 0; width: 1px; height: calc(100% - 2.5em); background: var(--entry-border-color); } /*------------ content ------------*/ #canvas { margin: 0 auto; max-width: var(--content-width); } @media (min-width: 800px) { #canvas { padding: 0 60px; } } @media (min-width: 1024px) { #canvas { border-left: var(--sidebar-width) solid transparent; max-width: calc(var(--entry-width) + 60px); } #primary { width: 100%; float: right; } #primary > .inner:first-child { margin: 60px 0; padding-left: 60px; } } /*--------------- header ---------------*/ #header { margin: 60px 0; } #header > .inner:first-child { text-align: center; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; background: var(--icon-container-background-color); overflow: hidden; } #journaltitles-container { padding: 1em; background: var(--entry-background-color); border-radius: 0 0 8px 8px; } h1#title { font-size: 1.5em; font-weight: normal; font-family: var(--title-font); line-height: 1.2; padding: 0; margin: 0; } h2#subtitle { font-size: 1em; font-weight: normal; padding: 0; margin: 0.5em 0 0; line-height: 1; } h2#pagetitle { display: none; } @media (min-width: 1024px) { #header { float: left; width: var(--sidebar-width); margin-left: calc(-1 * var(--sidebar-width)); } #header:before { content: ""; display: block; width: 100%; height: var(--sidebar-image-height); background-image: var(--sidebar-image); background-size: cover; background-position: center center; margin-bottom: 10px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } } #header .module-wrapper { order: 2; } /*------------ modules ------------*/ @media (min-width: 1024px) { #secondary { width: var(--sidebar-width); clear: left; margin: 60px 0; margin-left: calc(-1 * var(--sidebar-width)); } } #secondary .module { background: var(--icon-container-background-color); margin: 60px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 8px; overflow: hidden; } #secondary .module-content { background: var(--entry-background-color); border-radius: 8px 8px 0 0; } .module h2 { color: var(--icon-container-text-color); font-size: 1.2em; font-family: var(--title-font); margin: 0; padding: 10px 10px 10px 15px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); font-weight: normal; display: flex; align-items: center; justify-content: space-between; position: relative; } .module h2 a { color: var(--icon-container-text-color); } .module h2:before { content: "explore"; display: block; font-family: Material Icons; font-size: 24px; line-height: 24px; color: transparent; background-image: linear-gradient( 135deg, var(--icon-background-gradient1-color), var(--icon-background-gradient2-color) ), linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-origin: border-box; background-clip: padding-box, border-box; padding: 7px; border: 2px solid transparent; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); border-radius: 15px; order: 2; text-shadow: none; } .module h2:after { position: absolute; right: 10px; display: block; text-align: center; font-family: Material Icons; font-size: 24px; line-height: 24px; border: 9px solid transparent; background-image: linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; } .module-typelist h2:after { content: "explore"; } .module-tags_list h2:after, .module-tags_multilevel h2:after, .module-tags_cloud h2:after { content: "loyalty"; } .module-customtext h2:after { content: "comment"; } .module-customtext .module-content { padding: 1em; } .module-content ul { margin: 0; padding: 0; list-style: none; } #secondary .module-content li { border-top: 1px solid var(--entry-border-color); padding: 0.5em 1em; } #secondary .module-content li:before { content: "chevron_right"; font-family: Material Icons; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); transition: all 0.2s linear; } #secondary .module-content li:hover:before { margin-right: 10px; } #secondary .module-content li:first-child { border: 0; } .module-navlinks ul { display: flex; justify-content: space-evenly; padding: 10px 0; flex-wrap: wrap; } .module-navlinks li { text-align: center; background-image: linear-gradient( 135deg, var(--icon-background-gradient1-color), var(--icon-background-gradient2-color) ), linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); border-radius: 15px; } .module-navlinks li a { display: block; padding: 7px; font-size: 0; } .module-navlinks li a:before { display: block; font-family: Material Icons; font-size: 24px; line-height: 24px; background-image: linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "calendar_month"; } .list-item-read a:before { content: "feed"; } .list-item-tags a:before { content: "style"; } .list-item-network a:before { content: "travel_explore"; } .list-item-memories a:before { content: "collections_bookmark"; } .list-item-userinfo a:before { content: "account_box"; } .module .manage-link, .module-userprofile, .module-calendar, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered { display: none; } /*--------------- entries ---------------*/ .entry, .comment { margin: 60px 0; } .sticky-entry-icon, .admin-post-icon { display: none; } .entry .header, .comment .header { float: left; } .header .inner { padding: 2em 2em 0; } @media (min-width: 640px) { .has-userpic .entry .header { width: calc(100% - var(--userpic-size) - 2.5em); } .has-userpic .entry .header .inner { padding-right: 0; } } .entry .entry-title, .full .comment-title { font-size: 1.5em; font-family: var(--title-font); line-height: 1.2; font-weight: normal; padding: 0; margin: 0 0 1em; } .header .datetime:before { content: "today"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; } .entry .datetime, .entry .datetime a, .comment .header .datetime { text-transform: lowercase; color: var(--text-color); } .entry .datetime a:hover { color: var(--link-color); } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); } .security-private .access-filter:before { content: "visibility_off"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); } .restrictions-NSFW .restrictions:before { content: "warning"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); } .restrictions-18 .restrictions:before { content: "18+"; font-size: 16px; font-family: arial, sans-serif; font-weight: bold; vertical-align: middle; color: var(--entry-icon-color); } .contents { background: var(--entry-background-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 8px; } .entry .contents, .comment .contents { padding: 2em; } .userpic { float: right; } .entry .userpic img, .comment .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); margin-left: 0.5em; } @media (min-width: 640px) { .entry .userpic img, .comment .userpic img { max-width: var(--userpic-size); max-height: var(--userpic-size); } } .entry .poster { font-size: 0; clear: left; display: block; } .entry .poster .ljuser { font-size: var(--text-size); padding-right: 0.25em; } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster.empty { display: none; } .poster .ljuser:before, .full .poster:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; } .entry .poster .ljuser:nth-child(1):before, .full .poster:before { content: "account_circle"; } .entry .poster .ljuser:nth-child(2):before { content: "public"; } .entry .poster a, .full .poster a { color: var(--text-color); } .entry .poster a:hover, .full .poster a:hover { color: var(--link-color); } .entry-content { padding-top: 2em; clear: left; } @media (min-width: 1024px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action { display: flex; align-items: center; line-height: 1; } .cuttag-action img { display: none; } .cuttag-action:before { content: "content_cut"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 5px; } .cuttag-action:after { content: ""; height: 0; width: 100%; border-bottom: 1px dashed var(--entry-border-color); } .cut-open, .cut-close { display:none; } .cut-text{ font-weight: normal; margin-left: 27px; display: block; } .metadata { margin-top: 2em; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata-label { display: none; } .metadata img { vertical-align: middle; } #metadata-music:before { content: "queue_music"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-mood:before { content: "face"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-location:before { content: "flag"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-xpost:before { content: "add_location"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } .entry .footer { margin-top: 10px; background: var(--icon-container-background-color); border-radius: 8px; padding-bottom: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); overflow: hidden; } .entry .footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .entry div.tag { background: var(--entry-background-color); border-radius: 0 0 8px 8px; padding: 1em 2em; flex: 0 0 100%; box-sizing: border-box; } .tag ul { display: inline; margin: 0; padding: 0; } .tag ul li { display: inline; } .tag-text { display: none; } .tag:before { content: "tag"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } .metadata a, .tag a { color: var(--text-color); } .metadata a:hover, .tag a:hover { color: var(--link-color); } .tag-nav-trigger { vertical-align: middle; } ul.entry-management-links { margin: 10px 0 0; padding: 0 10px; list-style: none; } ul.entry-management-links.icon-links { display: flex; flex-wrap: wrap; } ul.entry-management-links.icon-links li { text-align: center; background-image: linear-gradient( 135deg, var(--icon-background-gradient1-color), var(--icon-background-gradient2-color) ), linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); border-radius: 15px; margin-right: 5px; } ul.entry-management-links.icon-links li a { display: block; padding: 7px; } ul.entry-management-links li a img { display: none; } ul.entry-management-links li a:before { display: block; font-family: Material Icons; font-size: 24px; line-height: 24px; background-image: linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "add_alert"; } .icon-links .link_next a:before { content: "arrow_forward"; } ul.entry-management-links.text-links, ul.entry-interaction-links { margin: 10px 0 0; padding: 0 10px; } ul.entry-management-links.text-links li, ul.entry-interaction-links li { display: inline; padding: 0 5px; } ul.entry-management-links.text-links li a, ul.entry-interaction-links li a { color: var(--icon-container-text-color); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } /*--------------- comments ---------------*/ .comment-pages { margin: 10px 0; padding: 1em 2em; background: var(--entry-background-color); line-height: 1; box-shadow: 1px 2px 2px var(--entry-shadow-color); text-align: center; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .comment-wrapper { min-width: 15em; } .thread-depth::before { content: "subdirectory_arrow_right"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.5em; } .no-subject .comment .comment-title, .no-subject .entry-title { padding: 0; margin: 0; } .partial .comment-title { margin: 0; } .comment .header .datetime { display: block; float: left; margin-right: 0.25em; } .comment-date-text, .comment-from-text, .comment-ip-text { display: none; } .full .poster { display: block; clear: left; } .comment .poster-ip { font-size: 1em; } .partial .comment { padding: 1em; background: var(--entry-background-color); border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .comment-content { padding-top: 2em; } .comment .footer { margin-top: 10px; background: var(--icon-container-background-color); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); overflow: hidden; } .comment .footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .multiform-checkbox { padding: 10px 10px 10px 15px; } .multiform-checkbox label { color: var(--icon-container-text-color); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } ul.comment-management-links { margin: 10px 0; padding: 0 10px; list-style: none; } ul.comment-management-links.icon-links { display: flex; } ul.comment-management-links.icon-links li { text-align: center; background-image: linear-gradient( 135deg, var(--icon-background-gradient1-color), var(--icon-background-gradient2-color) ), linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); border-radius: 15px; margin-left: 5px; } ul.comment-management-links.icon-links li a { display: block; padding: 7px !important; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a:before { display: block; font-family: Material Icons; font-size: 24px; line-height: 24px; background-image: linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #comments ul.entry-management-links, #comments ul.entry-interaction-links, .comment-pages.bottompages { display: none; } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } ul.comment-management-links.text-links li { display: inline; color: var(--icon-container-text-color); padding: 0 5px; font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } ul.comment-management-links.text-links li a { color: var(--icon-container-text-color); } ul.comment-interaction-links { order: -1; background: var(--entry-background-color); border-radius: 0 0 8px 8px; margin: 0; padding: 1em 2em; flex: 0 0 100%; box-sizing: border-box; } ul.comment-interaction-links li { display: inline; margin-right: 0.5em; } .bottomcomment { padding: 0 2em; background: var(--icon-container-background-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 8px; } .bottomcomment label { color: var(--icon-container-text-color); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); padding-top: 10px; display: inline-block; } .bottomcomment input { background: transparent; color: var(--icon-container-text-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); border: 0; font-family: var(--title-font); font-size: var(--text-size); padding: 0; } .bottomcomment select, .bottomcomment input { margin-bottom: 10px; } .bottomcomment select { background: var(--entry-background-color); border: 0; color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); border-radius: 8px; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrformdiv .de { color: var(--icon-container-text-color); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } #qrform { padding: 10px; } .entry #qrform { padding-bottom: 0; } #qrdiv input, #qrdiv select, #qrdiv textarea { background: var(--entry-background-color); border: 0; color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); border-radius: 8px; } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; color: var(--icon-container-text-color); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } #postform { padding: 10px; border-radius: 8px; background: var(--icon-container-background-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } #talkform-from { background: var(--entry-background-color); border-radius: 8px; padding: 1em; margin: -10px -10px 10px; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .tags-container, .icons-container { margin: 60px 0; } .month-wrapper .header, .tags-container .header, .icons-container .header { float: left; width: 100%; padding-bottom: 2em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.2em; font-family: var(--title-font); line-height: 1; font-weight: normal; padding: 0; margin: 0; } #archive-year .month .footer, #primary .manage-link { margin-top: 10px; padding: 10px 15px; background: var(--icon-container-background-color); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } #archive-year .month .footer a, #primary .manage-link a { color: var(--icon-container-text-color); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } /*------------ archive ------------*/ .day-date { display: none; } .month caption { display: none; } .month table { text-align: center; width: 100%; border-collapse: collapse; } .month tr { border-top: 1px solid var(--entry-border-color); } .month td, .month th { padding: 1em 0; border: 0; font-weight: normal; width: 1em; } table.month th:first-letter { font-family: var(--title-font); font-weight: bold; color: var(--entry-icon-color); line-height: 1; } table.month td.day-has-entries .label, table.month td p { display: inline-block; margin: 0; } table.month td p:before { content: "( "; } table.month td p:after { content: " )"; } #archive-year .navigation li { color: var(--icon-container-text-color); font-family: var(--title-font); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); padding: 0 5px; } #archive-year .navigation li a { color: var(--icon-container-text-color); } .month dl { background: var(--entry-background-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 8px; margin: 0 0 10px; } .month dl dt { font-family: var(--title-font); font-weight: normal; border-top: 1px solid var(--entry-border-color); padding: 0.5em 2em; } .month dl dt:first-child { border-top: 0; } .month dl .time { padding-right: 0.5em; } .month dl h3 { display: inline; font-size: 1em; } .page-month .month .entry-poster { margin-right: 0.5em; } .month dl .tag ul { margin-top: 0; } .month dd { margin: 0; padding: 2em; border-top: 1px solid var(--entry-border-color); } .month dd br { display: block; } #archive-month .month-back, #archive-month .month-forward { color: var(--icon-container-text-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); padding: 0 5px; } #archive-month .month-back a, #archive-month .month-forward a { color: var(--icon-container-text-color); } #archive-month .navigation select { border: 0; background: var(--entry-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); border-radius: 8px; } #archive-month .navigation input[type="submit"] { border: 0; color: var(--icon-container-text-color); background: transparent; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); font-family: var(--title-font); font-size: var(--text-size); } /*------------ tags ------------*/ .tags-container .contents { padding: 2em; } ul.ljtaglist { padding: 0; margin-left: 1em; list-style-position: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0 0 2em; padding: 0 2em; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { text-align: center; margin-top: 1em; } .icon { border-top: 1px solid var(--entry-border-color); padding: 1em; margin: 0; display: flex; } .icon-image { order: 2; padding-left: 1em; } .icon-image img { display: block; } .icon-info { flex-grow: 1; padding: 0 1em; } .icon-pages p { margin: 0; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } /*------------ navigation ------------*/ .navigation ul { margin: 0; padding: 0; list-style: none; } .navigation ul { background: var(--icon-container-background-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 8px; overflow: hidden; padding: 10px; } .navigation li { display: inline; } li.page-back { float: left; font-size: 0; text-align: center; background-image: linear-gradient( 135deg, var(--icon-background-gradient1-color), var(--icon-background-gradient2-color) ), linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; text-align: center; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.5); border-radius: 15px; margin-right: 5px; } li.page-forward { float: right; font-size: 0; text-align: center; background-image: linear-gradient( 135deg, var(--icon-background-gradient1-color), var(--icon-background-gradient2-color) ), linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; text-align: center; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.5); border-radius: 15px; margin-left: 5px; } li.page-back a, li.page-forward a { display: block; padding: 7px; } li.page-back a:before, li.page-forward a:before { display: block; font-family: Material Icons; font-size: 24px; line-height: 24px; background-image: linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } /*------------ footer ------------*/ #footer { margin: 60px; display: flex; justify-content: center; } @media (min-width: 1024px) { #footer { position: fixed; bottom: 12px; right: 12px; margin: 0; } } .page-top a { display: block; padding: 4px; font-size: 0; background: var(--entry-background-color); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .page-top a:before { display: block; font-family: Material Icons; font-size: 28px; line-height: 28px; text-align: center; content: "expand_less"; color: var(--entry-icon-color); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; border-radius: 8px; padding: 2em; font-family: inherit; color: var(--text-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } div.ContextualPopup .Relation { font-size: 1em; font-family: var(--title-font); font-weight: normal; margin: 0; } div.ContextualPopup .Userpic { border: none; } div.ContextualPopup .Userpic img { border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } div.ContextualPopup .Actions ul { padding: 1em 0 0; margin: 0; } /*------------ control strip ------------*/ #lj_controlstrip { color: var(--text-color); background: var(--entry-background-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); justify-content: center; padding: 0.75em 0; } @media (min-width: 1024px) { #lj_controlstrip { transform: translateY(-100%); position: fixed; transition: transform 0.7s; z-index: 9; } #lj_controlstrip::before { content: ""; position: absolute; bottom: -48px; height: 48px; width: 36px; right: 12px; } #lj_controlstrip:after { font-family: Material Icons; content: "more_horiz"; font-size: 24px; position: absolute; bottom: -48px; height: 36px; width: 36px; right: 12px; cursor: pointer; line-height: 36px; text-align: center; background: var(--entry-background-color); color: var(--entry-icon-color); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } #lj_controlstrip:hover { transform: translateY(0); } } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { background: var(--entry-background-color) !important; border: 1px solid var(--entry-border-color); font-size: var(--text-size) !important; font-family: var(--main-font) !important; border-radius: 8px; } #lj_controlstrip input[type="submit"] { border: 0; border-radius: 0; text-transform: uppercase; color: var(--link-color); } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip img { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 8px; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; }Paste the following into the "Custom stylesheet URL" field.
https://fonts.googleapis.com/css2?family=Material+Icons&family=Work+Sans&family=Arima&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

RESOURCES

icon font by Google
image from freepik

comments

App

Sun, 03 Jul 2022 14:41:25 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

container
sidebar image (300x300px)
default icon, navigation links, links list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Basic Boxes" and apply any theme.
Choose the "1 Column (modules at bottom; no sidebar)" page setup.
Go to the "Customize your theme" page and click on the "Modules" tab. Set "Profile" to number 1, "Navigation" to number 2, "Links list" to number 4 and "Custom text" to number 13. Uncheck the other modules.
Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)"./*------------------------------------- - layout - app (basic boxes) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://material.io - image - https://www.freepik.com/author/vectorom -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --text-color: #594840; --background-color: #d7e2e3; --link-color: #58a3ab; --link-hover-color: #e0a061; --content-width: 1200px; --content-background-color: #ecf0f0; --entry-border-color: #b9c6c5; --icon-color: #ecf0f0; --icon-border-color: #fff; --gradient1-color: #61b9c0; --gradient2-color: #e0a061; --main-font: Archivo, sans-serif; --title-font: Keania One, sans-serif; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/135512.jpg"); --sidebar-image-width: 300px; --sidebar-image-height: 300px; } /*--------------- fonts ---------------*/ @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; src: url("https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format("woff2"); } /*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { background: var(--background-color); border: 0; color: var(--text-color); line-height: var(--line-height); font-family: var(--main-font); font-size: var(--text-size); margin: 0; padding: 0; } html, body { overflow: auto; } html body { margin: 0; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited, a:active { text-decoration: none; transition: all 0.4s linear; } q { font-style: italic; } blockquote { padding: 0; margin: 1em; } blockquote:first-letter { float: left; font-size: 2.5em; padding: 7px 9px; line-height: 0.75; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); margin-right: 5px; color: var(--icon-color); font-family: var(--title-font); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } blockquote:after { content:""; display:block; clear:both; } /*--------------- content layout ---------------*/ #canvas { padding-bottom: 52px; background: var(--content-background-color); } #canvas > .inner:first-child { height: 100%; } @media screen and (min-width: 800px) { #canvas { position: fixed; height: 90%; top: 5%; max-width: var(--content-width); margin: auto; left: 5%; right: 5%; padding-top: 52px; padding-bottom: 52px; box-sizing: border-box; border: 1px solid var(--entry-border-color); } #content { height: 100%; overflow: auto; } #primary { padding: 0 2em; } } @media screen and (min-width: 1024px) { #content > .inner:first-child { display: flex; height: 100%; overflow: hidden; } #primary { flex: 1; overflow: auto; order: 2; } } #primary::-webkit-scrollbar { width: 10px; height: 10px; } #primary::-webkit-scrollbar-track { background: var(--content-background-color); } #primary::-webkit-scrollbar-thumb { background: var(--entry-border-color); border: 2px solid var(--content-background-color); } #primary::-webkit-scrollbar-corner { background: var(--content-background-color); } /*--------------- header ---------------*/ #header { font-family: var(--title-font); } #journaltitles-container { background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border: 1px solid var(--icon-border-color); display: flex; align-items: center; justify-content: space-between; min-height: 50px; } h1#title { font-size: 1em; margin: 0; padding: 0 1em; color: var(--icon-color); font-weight: normal; } h1#title a { color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } h1#title a:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } h2#subtitle { font-size: 1em; margin: 0; padding: 0 1em; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); font-weight: normal; text-align: right; } h2#pagetitle { display: none; } @media screen and (min-width: 800px) { #journaltitles-container { height: 52px; position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; box-sizing: border-box; } } .module-navlinks { line-height: 50px; text-align: center; height: 52px; overflow: hidden; width: 100%; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); box-sizing: border-box; position: fixed; bottom: 0; left: 0; border: 1px solid var(--icon-border-color); z-index: 9; } .module-navlinks ul { display: flex; margin: 0; padding: 0; list-style: none; } .module-navlinks li { flex: 1; border-right: 1px solid var(--icon-border-color); position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); overflow: hidden; transition: all 0.4s linear; } .module-navlinks li:last-child { border-right: 0; } .module-navlinks li:before { display: block; font-family: Material Icons; font-size: 28px; line-height: 50px; text-align: center; transition: all 0.4s linear; position: absolute; width: 100%; height: 100%; color: var(--icon-color); } .module-navlinks li:hover:before { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } .list-item-recent:before { content: "home"; } .list-item-archive:before { content: "date_range"; } .list-item-read:before { content: "library_books"; } .list-item-network:before { content: "public"; } .list-item-tags:before { content: "style"; } .list-item-memories:before { content: "collections_bookmark"; } .list-item-userinfo:before { content: "account_box"; } .module-navlinks li a { display: block; color: var(--icon-color); position: relative; z-index: 1; opacity: 0; } @media screen and (min-width: 800px) { .module-navlinks { position: absolute; } .module-navlinks ul { margin: 0 50px; border-left: 1px solid var(--icon-border-color); border-right: 1px solid var(--icon-border-color); } } @media screen and (min-width: 1024px) { .module-navlinks li:hover:before { opacity: 0; text-shadow: none; } .module-navlinks li a:hover { opacity: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } } /*--------------- entries ---------------*/ .entry, .comment { margin: 2em 0; border: 1px solid var(--entry-border-color); } .entry .header, .comment .header { float: left; } .has-userpic .entry .header, .has-userpic .comment .header { width: calc(100% - 52px); } @media screen and (min-width: 800px) { .has-userpic .entry .header, .has-userpic .comment .header { width: calc(100% - 102px); } } .entry .header .inner { padding: 2em 2em 0; } .entry .entry-title, .comment .comment-title { padding: 0; margin: 0 0 0.25em; font-size: 1.2em; line-height: 1.2; font-family: var(--title-font); font-weight: normal; } .no-subject .entry .entry-title, .no-subject .comment .comment-title { margin: 0; padding: 0; } .sticky-entry-icon, .admin-post-icon { display: none; } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; display: inline-block; vertical-align: middle; width: 34px; height: 34px; margin-right: 2px; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); font-family: Material Icons; font-size: 22px; text-align: center; line-height: 34px; color: var(--icon-color); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .security-private .access-filter:before { content: "visibility_off"; display: inline-block; vertical-align: middle; width: 34px; height: 34px; margin-right: 2px; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); font-family: Material Icons; font-size: 22px; text-align: center; line-height: 34px; color: var(--icon-color); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .restrictions-NSFW .restrictions:before { content: "warning"; display: inline-block; vertical-align: middle; width: 34px; height: 34px; margin-right: 2px; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); font-family: Material Icons; font-size: 22px; text-align: center; line-height: 34px; color: var(--icon-color); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .restrictions-18 .restrictions:before { content: "18+"; font-size: 16px; font-family: arial, sans-serif; font-weight: bold; display: inline-block; vertical-align: middle; width: 34px; height: 34px; margin-right: 2px; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); text-align: center; line-height: 34px; color: var(--icon-color); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .entry .contents { padding: 2em 2em 0; } .entry .userpic { float: right; margin: -2em -2em 0 0; } #primary .userpic img { height: auto; width: auto; max-width: 50px; max-height: 50px; border-left: 1px solid var(--entry-border-color); border-bottom: 1px solid var(--entry-border-color); } @media screen and (min-width: 1024px) { #primary .userpic img { max-width: 100px; max-height: 100px; } } .entry .poster { font-size: 0; display: block; clear: left; } .entry .poster .ljuser { font-size: var(--text-size); } .entry .poster .ljuser:before { content: "["; } .entry .poster .ljuser:after { content: "]"; } .poster .ljuser b { font-weight: normal; } .poster.empty, .poster .ljuser img { display: none; } .entry-content { padding: 2em 0; clear: left; } @media screen and (min-width: 1024px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action img { display: none; } .cuttag-action { display: inline-block; font-size: 26px; width: 34px; height: 34px; line-height: 34px; vertical-align: bottom; font-family: arial; text-align: center; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border: 1px solid var(--icon-border-color); } .cuttag-action:before { content: "+"; display: inline-block; } .cuttag-action-after:before { transform: rotate(45deg); } .cuttag-action:hover { color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } .cut-open, .cut-close { display: none; } .cut-text { font-size: var(--text-size); font-weight: normal; display: inline; margin-left: 0.5em; } .metadata ul { margin: 0; padding: 0 0 2em; list-style: none; } .metadata li, .entry .tag { margin-bottom: 2px; } .metadata-label, .entry .tag-text { display: none; } .metadata li:before, .entry div.tag:before { display: inline-block; vertical-align: middle; content: ""; width: 34px; height: 34px; margin-right: 2px; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); font-family: Material Icons; font-size: 22px; text-align: center; line-height: 34px; color: var(--icon-color); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .metadata img { vertical-align: middle; } #metadata-music:before { content: "speaker"; } #metadata-mood:before { content: "sentiment_satisfied_alt"; } #metadata-location:before { content: "location_on"; } #metadata-xpost:before { content: "add_location"; } .entry div.tag { padding: 0 2em; margin-bottom: 2em; } .entry div.tag:before { content: "loyalty"; } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; } .tag-nav-trigger { vertical-align: middle; } ul.entry-management-links { background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); order: 9; border: 1px solid var(--icon-border-color); margin: 0; padding: 0.5em; text-align: center; font-family: var(--title-font); clear: both; } ul.entry-management-links li { display: inline; padding: 0 0.25em; } ul.entry-management-links.icon-links { display: flex; padding: 0; } ul.entry-management-links.icon-links li { flex: 1; list-style: none; border-right: 1px solid var(--icon-border-color); } ul.entry-management-links.icon-links li:last-child { border-right: 0; } ul.entry-management-links li a img { display: none; } ul.entry-management-links li a { color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } ul.entry-management-links li a:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } ul.entry-management-links.icon-links li a { padding: 0.5em 0; display: block; } ul.entry-management-links.icon-links li a:before { font-family: Material Icons; font-size: 22px; line-height: 22px; display: block; } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "add_alert"; } .icon-links .link_next a:before { content: "arrow_forward"; } ul.entry-interaction-links { text-transform: uppercase; margin: 0 0 1em; padding: 0; text-align: center; } ul.entry-interaction-links li { display: inline; padding: 0 0.25em; } .entry .footer .inner { display: flex; flex-direction: column; } /*--------------- comments ---------------*/ #comments { margin-bottom: 2em; } .comment-pages { text-align: center; } .comment-pages.bottompages { display: none; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .comment .header .inner { padding: 2em 2em 0; } .thread-depth { display: inline-block; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); padding: 0.5em; margin-bottom: 1em; line-height: 1; border: 1px solid var(--icon-border-color); } .comment .userpic { float: right; } .comment .header .datetime, .full .comment .poster, .poster-ip { display: block; } .header .comment-date-text, .full .comment-from-text, .comment-ip-text { display: none; } .full .comment .poster, .poster-ip { display: block; clear: left; padding: 0 2em; } .full .comment .poster .ljuser:before { content: "["; } .full .comment .poster .ljuser:after { content: "]"; } .comment-content { text-align: justify; clear: left; padding: 2em; } .comment .footer .inner { display: flex; flex-direction: column; } .multiform-checkbox { text-align: center; text-transform: uppercase; } ul.comment-management-links { background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); order: 9; border: 1px solid var(--icon-border-color); margin: 0; padding: 0.5em; text-align: center; font-family: var(--title-font); clear: both; } ul.comment-management-links li { display: inline; padding: 0 0.25em; } ul.comment-management-links.icon-links { display: flex; padding: 0; } ul.comment-management-links.icon-links li { flex: 1; list-style: none; border-right: 1px solid var(--icon-border-color); } ul.comment-management-links.icon-links li:last-child { border-right: 0; } ul.comment-management-links li a { color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } ul.comment-management-links li a:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a { padding: 0.5em 0; display: block; } ul.comment-management-links.icon-links li a:before { font-family: Material Icons; font-size: 22px; line-height: 22px; display: block; } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } ul.comment-interaction-links { text-transform: uppercase; margin: 0 0 1em; padding: 0 2em; text-align: center; } ul.comment-interaction-links li { display: inline; padding: 0 0.25em; } .partial .comment { padding: 1em; } .bottomcomment ul.entry-management-links, .bottomcomment ul.entry-interaction-links, .comment-pages.bottompages { display: none; } .bottomcomment { text-align: center; } .bottomcomment select { border: 1px solid var(--entry-border-color); background: var(--content-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } .bottomcomment input { border: 1px solid var(--icon-border-color); background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--icon-color); font-size: var(--text-size); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); padding: 0.5em; line-height: 1; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #postform { margin: 2em 0; padding: 1em; border: 1px solid var(--entry-border-color); } #qrform { padding: 1em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--entry-border-color); background: var(--content-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { border: 1px solid var(--icon-border-color); background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--icon-color); font-size: var(--text-size); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); padding: 0.5em; line-height: 1; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { margin: 2em 0; border: 1px solid var(--entry-border-color); } .month .header, .tags-container .header, .icons-container .header { text-align: center; padding-top: 2em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-family: var(--title-font); font-size: 1.2em; padding: 0; margin: 0; font-weight: normal; } .month .contents, .tags-container .contents { padding: 2em; } #primary .manage-link, .month-wrapper .footer { text-align: center; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border: 1px solid var(--icon-border-color); padding: 0.5em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); font-family: var(--title-font); } #primary .manage-link a, .month-wrapper .footer a { color: var(--icon-color); } #primary .manage-link a:hover, .month-wrapper .footer a:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } /*------------ archive ------------*/ .month caption { display: none; } table.month { margin: 0 auto; border-collapse: separate; border-spacing: 1px; width: 100%; border: none; text-align: center; } table.month td { width: 2.5em; line-height: 2.5em; height: 2.5em; position: relative; } table.month td.day-has-entries .label { display: block; color: var(--icon-color); background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); width: 2.5em; line-height: 2.5em; height: 2.5em; margin: 0 auto; border: 1px solid var(--icon-border-color); font-family: var(--title-font); transition: all 0.4s linear; } table.month td.day-has-entries:hover .label { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } table.month .day-has-entries p { left: 0; top: 0; position: absolute; z-index: 9; height: 100%; width: 100%; display: block; margin: 0; } table.month .day-has-entries p a { color: transparent; height: 100%; width: 100%; display: block; } .month dl { margin: 0; } .month dl dt { text-align: center; text-transform: uppercase; font-weight: normal; padding: 0.5em; border-top: 1px solid var(--entry-border-color); border-bottom: 1px solid var(--entry-border-color); font-family: var(--title-font); } .month dl dt:first-child { border-top: 0; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dd { margin: 0; padding: 2em; } .month dd > span { padding-right: 0.25em; } .month dl .tag ul { margin: 0; } .day-date { display: none; } #archive-year .navigation { margin: 2em 0; } #archive-year .navigation li { display: inline; padding: 0 0.5em; } .page-month .navigation { text-align: center; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); color: var(--icon-color); } .page-month .navigation a { color: var(--icon-color); } .page-month .navigation a:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } #archive-month .navigation ul form { display: flex; flex-wrap: wrap; } #archive-month .navigation li { border-right: 1px solid var(--icon-border-color); padding: 0.5em; flex-grow: 1; } #archive-month .navigation li:last-child { border-right: 0; } #archive-month .navigation input, #archive-month .navigation select { border: 1px solid var(--icon-border-color); background: var(--content-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #archive-month .navigation input[type="submit"] { border: 0; background: transparent; color: var(--icon-color); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /*------------ tags ------------*/ ul.ljtaglist { list-style: square inside; padding: 0; margin-left: 1em; } ul.ljtaglist:first-child, .tags_cloud ul { list-style-position: inside; padding: 0; margin: 0; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .page-icons .bottompages { text-align: center; padding: 2em; border-top: 1px solid var(--entry-border-color); } .sorting-options ul { margin: 0 0 2em; padding: 0; text-align: center; } .sorting-options ul li { display: inline; } .icons-container .icon { display: flex; flex-wrap: wrap; } .icon { border-top: 1px solid var(--entry-border-color); } .icon-image img { display: block; } .icon-info { padding: 1.5em; flex: 1; } .icon-keywords ul { margin: 0; padding: 0; display: inline; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*--------------- navigation ---------------*/ .navigation .page-separator, .topnav, .navigation.empty, .noentries { display: none; } .navigation { text-align: center; } .navigation ul { margin: 0; padding: 0; } .navigation li { padding: 0 0.5em; display: inline; } .separator-after { clear: both; } @media screen and (min-width: 800px) { #entries .navigation li a { width: 50px; height: 50px; display: block; overflow: hidden; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } #entries .navigation li a:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } #entries .navigation li a:before { display: block; font-family: Material Icons; font-size: 28px; line-height: 50px; text-align: center; vertical-align: middle; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } li.page-back, li.page-forward { position: absolute; width: 50px; height: 50px; bottom: 0; z-index: 10; padding: 0; } li.page-back { left: 0; } li.page-forward { right: 0; } } /*--------------- modules ---------------*/ #secondary { margin: 2em 0; } @media screen and (min-width: 800px) { #secondary { margin: 2em; } } #secondary > .inner:first-child { border: 1px solid var(--entry-border-color); } #secondary > .inner:first-child::-webkit-scrollbar { width: 10px; height: 10px; } #secondary > .inner:first-child::-webkit-scrollbar-track { background: var(--content-background-color); } #secondary > .inner:first-child::-webkit-scrollbar-thumb { background: var(--entry-border-color); border: 2px solid var(--content-background-color); } #secondary > .inner:first-child::-webkit-scrollbar-corner { background: var(--content-background-color); } @media screen and (min-width: 1024px) { #secondary { width: var(--sidebar-image-width); padding-top: var(--sidebar-image-height); position: relative; margin-right: 0; } #secondary::before { content: ""; position: absolute; top: 0; left: 0; width: var(--sidebar-image-width); height: var(--sidebar-image-height); background-image: var(--sidebar-image); background-size: cover; background-position: center center; } #secondary > .inner:first-child { max-height: 100%; overflow: auto; } .module .userpic { position: absolute; margin-top: -102px; width: 100%; height: 102px; display: flex; align-items: flex-end; justify-content: center; } } #secondary .module { border-top: 1px solid var(--entry-border-color); margin-top: -1px; } .module .userpic img { border: 1px solid var(--icon-border-color); background: var(--content-background-color); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); display: block; margin: 10px auto; } .module-section-one .module-content ul { list-style: none; margin: 0; padding: 0; } .module-section-one .module-content li { line-height: 1; } .module-section-one .module-content li a { display: block; border-top: 1px solid var(--entry-border-color); padding: 0.5em 1em; background-size: 0 100%; background-repeat: no-repeat; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); } .module-section-one .module-content li a:hover { background-size: 100% 100%; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .module-section-one .module-content li:first-child a { border: 0; } .module-customtext { padding: 1em; } .module-customtext .module-content:first-letter { float: left; font-size: 2.5em; padding: 7px 9px; line-height: 0.75; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); margin-right: 5px; text-transform: uppercase; color: var(--icon-color); font-family: var(--title-font); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .module-customtext:after { content:""; display:block; clear:both; } .module h2, .journal-website-name, .journal-name, ul.userlite-interaction-links, .module-calendar, .module-tags_list, .module-tags_multilevel, .module-tags_cloud, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered, .module .manage-link { display: none !important; } /*--------------- footer ---------------*/ #footer { background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border: 1px solid var(--icon-border-color); border-bottom: 0; text-align: center; padding: 0.5em; font-family: var(--title-font); } #footer a { color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } #footer a:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } @media screen and (min-width: 800px) { #footer { display: none; } } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--content-background-color); font-family: var(--main-font); border: 0; } div.ContextualPopup .Relation { font-size: 1em; padding: 0.5em; font-weight: normal; font-family: var(--title-font); background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); margin-right: 82px; color: var(--icon-color); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } div.ContextualPopup .Userpic { border: none; padding: 0; } div.ContextualPopup .Userpic img { border: 1px solid var(--entry-border-color); } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--icon-color); padding: 0.75em 0; justify-content: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); z-index: 9; } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--icon-color); } #lj_controlstrip_statustext { color: var(--icon-color); font-weight: normal; font-size: 1em; } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_search { text-align: right; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--icon-border-color); background: var(--content-background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { background: transparent !important; border: 0; font-size: 1em; font-family: var(--title-font) !important; color: var(--icon-color) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); padding: 0.5em; } @media (min-width: 800px) { #lj_controlstrip { transform: translateY(-100%); position: fixed; transition: transform 0.7s; border-bottom: 1px solid var(--icon-border-color); } #lj_controlstrip:before { content: ""; position: absolute; bottom: -46px; height: 46px; width: 36px; right: 10px; } #lj_controlstrip:after { font-family: "Material Icons"; content: "settings"; font-size: 24px; position: absolute; bottom: -48px; height: 36px; width: 36px; right: 10px; cursor: pointer; line-height: 36px; text-align: center; color: var(--icon-color); background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border: 1px solid var(--icon-border-color); } #lj_controlstrip:hover { transform: translateY(0); } } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Archivo&family=Keania+One&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

RESOURCES

icon font by Google
image from freepik

comments

Shine

Sun, 12 Jun 2022 18:17:14 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

sidebar image
navigation links, links list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "1 Column (modules at bottom; no sidebar)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "text-only" for "Select whether entry management links are printed as text or using the available icons" and "Select whether comment management links are printed as text or using the available icons". For "Indentation for nested comment threads" select "Responsive" (optional).
Click on the "Modules" tab. Set "Navigation" to number 2, "Links list" to number 4 and "Custom text" to number 13. Uncheck the other modules.
Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)"./*------------------------------------- - layout - shine (tabula rasa) - https://myrtillenne.dreamwidth.org - image - unsplash.com -------------------------------------*/ /*--------------- general ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Ubuntu, sans-serif; --title-font: Ubuntu, sans-serif; --background-color: #cbd2e2; --text-color: #3d4361; --link-color: #429eb3; --link-hover-color: #a761be; --gradient1-color: #48b8cc; --gradient2-color: #a256ba; --content-background-color: #f5f8fc; --content-width: 1200px; --entry-title-gradient1-color: #429eb3; --entry-title-gradient2-color: #a761be; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/133759.jpg"); --sidebar-width: 300px; --sidebar-image-width: 200px; --sidebar-image-height: 200px; --sidebar-border-color: #cbd2e2; --sidebar-text-color: #dbeaf0; --sidebar-link-color: #f5f8fc; --sidebar-link-hover-color: #fff; } H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { padding: 0; margin: 0; background-color: var(--background-color); font-family: var(--main-font); line-height: var(--line-height); font-size: var(--text-size); color: var(--text-color); } a, a:link, a:visited { text-decoration: none; transition: color 0.4s; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } q { font-style: italic; } blockquote { background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); padding: 1em; margin: 1em 0; color: var(--sidebar-text-color); border-radius: 10px; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } blockquote a { color: var(--sidebar-link-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } blockquote a:hover { color: var(--sidebar-link-hover-color); } #canvas { padding: 40px 0; } @media (min-width: 640px) { #canvas { margin: 0 auto; padding: 40px; max-width: var(--content-width); } } #canvas > .inner:first-child { position: relative; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); border-radius: 10px; background: var(--content-background-color); } @media (min-width: 900px) { #canvas > .inner:first-child { border-left: var(--sidebar-width) solid transparent; padding-bottom: 2em; padding-left: 2em; } } #content-footer { clear: both; } #primary > .inner:first-child { padding: 0 2em 2em; } @media (min-width: 900px) { #primary { width: 100%; float: right; } #primary > .inner:first-child { padding: 0 2em; } } #header { background-image: linear-gradient( var(--gradient1-color), var(--gradient2-color) ); text-align: center; border-radius: 10px 10px 0 0; } #header > .inner { padding: 2em; } @media (min-width: 900px) { #header { float: left; width: var(--sidebar-width); margin-left: calc(-1 * var(--sidebar-width)); position: relative; z-index: 2; background: transparent; } #header > .inner:before { content: ""; width: var(--sidebar-image-width); height: var(--sidebar-image-height); display: block; margin: 20px auto 2em; border-top: 2px solid rgba(0, 0, 0, 0.3); border-right: 2px solid rgba(255, 255, 255, 0.3); border-left: 2px solid rgba(0, 0, 0, 0.3); border-bottom: 2px solid rgba(255, 255, 255, 0.3); background: var(--sidebar-image); background-clip: padding-box; background-size: cover; } #header > .inner { padding: 1em 2em 0; } } h1#title { font-size: 1.5em; font-family: var(--title-font); margin: 0; padding: 0; line-height: 1; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } h1#title a { color: var(--sidebar-link-color); } h2#subtitle { font-size: 1em; margin: 0; padding: 1em 0 0; font-weight: normal; line-height: 1; color: var(--sidebar-link-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } h2#subtitle:before { content: ""; display: block; height: 1px; width: 20px; background: var(--sidebar-border-color); margin: 0 auto 1em; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } h2#pagetitle { display: none; } /*--------------- entries ---------------*/ .entry, .comment { padding-top: 2em; } @media (min-width: 900px) { .entry .header, .comment .header { float: left; width: calc(100% - 100px); } } .entry .entry-title, .full .comment-title { font-size: 1.5em; margin: 0 0 0.25em; padding-right: 1em; font-family: var(--title-font); line-height: 1.2; background-image: linear-gradient( 45deg, var(--entry-title-gradient1-color), var(--entry-title-gradient2-color) ); -webkit-text-fill-color: transparent; background-clip: text, padding-box; -webkit-background-clip: text, padding-box; display: table; } .entry .entry-title, .entry .entry-title a, .full .comment-title a { color: var(--entry-header-link-color); } .entry .entry-title a:hover { color: var(--entry-header-link-hover-color); } .no-subject .entry .entry-title, .no-subject .comment .comment-title { margin: 0; padding: 0; } .sticky-entry-icon, .admin-post-icon { display: none; } .restrictions img, .access-filter img { display: none; } .month .restrictions, .month .access-filter, .month .admin-post-icon, .month .sticky-entry-icon { display: none; } .security-protected .access-filter:before { content: "LOCKED"; padding-right: 0.25em; } .security-private .access-filter:before { content: "PRIVATE"; padding-right: 0.25em; } .restrictions-NSFW .restrictions:before { content: "NSFW"; padding-right: 0.25em; } .restrictions-18 .restrictions:before { content: "18+"; padding-right: 0.25em; } .entry .datetime a { color: var(--entry-header-text-color); } .has-userpic .userpic { float: right; } .entry .userpic img, .comment .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border-radius: 5px; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } @media (min-width: 640px) { .entry .userpic img, .comment .userpic img { max-width: 100px; max-height: 100px; border-radius: 10px; } } .entry .poster { font-size: 0; display: block; clear: left; } .entry .poster:before { content: ""; display: block; font-size: var(--text-size); padding-top: 0.5em; } .entry .poster .ljuser { display: inline-block; font-size: var(--text-size); margin-right: 0.5em; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); padding: 0.5em; border-radius: 5px; line-height: 1; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } .entry .poster .ljuser a, .full .comment .poster, .full .comment .poster .ljuser a { color: var(--sidebar-link-color); } .entry .poster .ljuser a:hover, .full .comment .poster .ljuser a:hover { color: var(--sidebar-link-hover-color); } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster.empty { display: none; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .entry-content { padding-top: 2em; margin-bottom: 2em; clear: left; } @media (min-width: 1024px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol { padding-left: 1em; } .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .cuttag-action img { display: none; } .cuttag-action { display: inline-block; font-size: 26px; width: 30px; height: 30px; line-height: 30px; vertical-align: bottom; font-family: arial; text-align: center; color: var(--content-background-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } .cuttag-action:before { content: "+"; display: inline-block; } .cuttag-action-after:before { transform: rotate(45deg); } .cuttag-action:hover { color: var(--content-background-color); } .cut-open, .cut-close { display: none; } .cut-text { font-size: var(--text-size); font-weight: normal; display: inline; margin-left: 0.5em; } .metadata ul { list-style: none; margin: 0; padding: 0; } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; } ul.entry-management-links { margin: 0; padding: 0; line-height: 1; text-align: center; } ul.entry-management-links:before { content: ""; display: block; margin-top: 2em; } ul.entry-management-links li { display: inline; margin: 0 0.5em; } ul.entry-interaction-links { margin: 1em 0 0; padding: 0.5em; line-height: 1; text-align: center; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } ul.entry-interaction-links li { display: inline; margin: 0 0.5em; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } ul.entry-interaction-links li a { color: var(--sidebar-link-color); } ul.entry-interaction-links li a:hover { color: var(--sidebar-link-hover-color); } .entry .footer { clear: both; } /*--------------- comments ---------------*/ .comment-pages { text-align: center; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); margin: 0.5em 0 0; padding: 0.5em; line-height: 1; color: var(--sidebar-text-color); } .comment-pages a { color: var(--sidebar-link-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .comment-pages a:hover { color: var(--sidebar-link-hover-color); } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .partial .comment:after { content: ""; display: block; width: 100%; height: 7px; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); margin-top: 1em; } .partial .comment-title { margin: 0; } .thread-depth { display: inline-block; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--sidebar-link-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); padding: 0.5em; margin-bottom: 1em; border-radius: 5px; line-height: 1; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .comment-date-text, .comment-from-text { display: none; } .full .comment .poster { display: block; clear: left; } .full .comment .poster .ljuser, .full .comment .poster .anonymous { display: inline-block; font-size: var(--text-size); margin-top: 0.5em; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); padding: 0.5em; border-radius: 5px; line-height: 1; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } .comment-content { padding: 2em 0; } .comment .footer { text-align: center; clear: both; } .multiform-checkbox input { vertical-align: top; } ul.comment-management-links { margin: 0; padding: 0; line-height: 1; text-align: center; display: inline; } ul.comment-management-links li { padding: 0.5em; display: inline; } ul.comment-interaction-links { margin: 0.5em 0 0; padding: 0.5em; line-height: 1; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } ul.comment-interaction-links li { padding: 0.5em; display: inline; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } ul.comment-interaction-links li a { color: var(--sidebar-link-color); } ul.comment-interaction-links li a:hover { color: var(--sidebar-link-hover-color); } #comments ul.entry-management-links, #comments ul.entry-interaction-links, .comment-pages.bottompages { display: none; } .bottomcomment { text-align: center; } .bottomcomment label:before { content: ""; display: block; margin-top: 2em; } .bottomcomment select { border: 1px solid; border-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ) 1; background: var(--content-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } .bottomcomment input { border: 0; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--sidebar-link-color); font-size: var(--text-size); font-family: var(--main-font); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); padding: 0.5em; border-radius: 5px; line-height: 1; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #postform { padding-top: 2em; } #qrform { border: 0; padding: 2em 0 0; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid; border-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ) 1; background: var(--content-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { border: 0; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--sidebar-link-color); font-size: var(--text-size); font-family: var(--main-font); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); padding: 0.5em; border-radius: 5px; line-height: 1; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { padding-top: 2em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.5em; margin: 0; font-family: var(--title-font); line-height: 1.2; background-image: linear-gradient( 135deg, var(--entry-title-gradient1-color), var(--entry-title-gradient2-color) ); -webkit-text-fill-color: transparent; background-clip: text, padding-box; -webkit-background-clip: text, padding-box; display: table; } .month .contents, .tags-container .contents { padding-top: 2em; } .month .footer, #primary .manage-link { text-align: center; line-height: 1; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); padding: 0.5em; margin-top: 2em; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } .month .footer a, #primary .manage-link a { color: var(--sidebar-link-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .month .footer a:hover, #primary .manage-link a:hover { color: var(--sidebar-link-hover-color); } /*------------ archive ------------*/ .day-date { display: none; } .month caption { display: none; } table.month { margin: 0 auto; border-collapse: separate; border-spacing: 3px; width: 100%; border: none; text-align: center; } table.month td { width: 2.5em; line-height: 2.5em; height: 2.5em; position: relative; } table.month td.day-has-entries .label { display: block; color: var(--content-background-color); background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); width: 2.5em; line-height: 2.5em; height: 2.5em; margin: 0 auto; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } table.month .day-has-entries p { left: 0; top: 0; position: absolute; z-index: 9; height: 100%; width: 100%; display: block; margin: 0; } table.month .day-has-entries p a { color: transparent; height: 100%; width: 100%; display: block; } .month dl { margin: 0; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dl dt { padding: 0.5em; text-align: center; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); line-height: 1; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } .month dl dt a { color: var(--sidebar-link-color); } .month dl dt a:hover { color: var(--sidebar-link-hover-color); } dd { margin: 0; padding: 2em 0; } .month dd > span { padding-right: 0.25em; } #archive-year .navigation { text-align: center; } #archive-month .navigation ul form { display: inline-block; } #archive-year .navigation li, #archive-month .navigation li { display: inline; padding: 0 0.5em; } #archive-month .navigation ul { margin: 0; padding: 0 2em; text-align: center; } #archive-month .navigation select { border: 1px solid; border-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ) 1; background: var(--content-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #archive-month .navigation input { border: 0; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--sidebar-link-color); font-size: var(--text-size); font-family: var(--main-font); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); padding: 0.5em; border-radius: 5px; line-height: 1; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } /*------------ tags ------------*/ ul.ljtaglist { margin: 0 0 0 1em; padding: 0; list-style: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0 0 2em; padding: 0; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { margin-top: 2em; text-align: center; } .icons-container .icon { display: flex; flex-wrap: wrap; align-items: center; margin-top: 1em; } .icon-image img { display: block; } .icon-info { padding-left: 1em; flex: 1; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*------------ sidebar ------------*/ #secondary { z-index: 1; } .module-section-one .inner { padding: 2em; clear: left; } .module-section-one { background-image: linear-gradient( var(--gradient1-color), var(--gradient2-color) ); padding-bottom: 3em; border-radius: 0 0 10px 10px; } @media (min-width: 900px) { #secondary { width: var(--sidebar-width); margin-left: calc(-1 * var(--sidebar-width)); position: relative; } #secondary:before { content: ""; position: absolute; left: 0; top: -16px; width: calc(var(--sidebar-width) + 13px); height: 16px; border-radius: 16px 0 0 0; background: var(--gradient1-color); background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100% ); z-index: 2; } #secondary:after { content: ""; position: absolute; background: var(--gradient1-color); right: -26px; top: -16px; width: 26px; height: 16px; border-radius: 16px 16px 0 0; background-image: linear-gradient( 45deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100% ); z-index: 3; } #secondary > .inner:first-child:before { content: ""; display: block; position: absolute; width: var(--sidebar-width); height: 40px; right: 0; top: -16px; background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100% ); z-index: 4; } .module-wrapper { filter: drop-shadow(7px 7px 3px rgba(0, 0, 0, 0.3)); } .module-section-one { clip-path: polygon( 100% 0, 100% 100%, 50% calc(100% - 80px), 0% 100%, 0% 0% ); background-image: linear-gradient( var(--gradient1-color), var(--gradient2-color) ); padding-bottom: 80px; border-radius: 0; } #secondary .separator-before { content: ""; position: absolute; left: 0; top: -16px; width: var(--sidebar-width); height: 16px; border-radius: 16px 0 0 0; background: var(--gradient1-color); z-index: 1; } } .module { color: var(--sidebar-text-color); } .module a { color: var(--sidebar-link-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .module a:hover { color: var(--sidebar-link-hover-color); } .module-content { display: inline; } .module-content ul { padding: 0; margin: 0; list-style: none; } .module li { line-height: 1; display: flex; align-items: center; margin-bottom: 0.75em; } .module li:before { content: ""; width: 20px; flex-shrink: 0; height: 1px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); background: var(--sidebar-border-color); transition: all 0.4s ease; } .module li:after { content: ""; flex: 1; min-width: 20px; height: 1px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); background: var(--sidebar-border-color); transition: all 0.4s ease; } .module li a { padding: 0 1em; } .module li:hover:before { width: 30px; } .module-customtext { margin-top: 2em; } .module h2, .module-userprofile, .module .manage-link, .journal-website-name, .journal-name, ul.userlite-interaction-links, .module-calendar, .module-tags_list, .module-tags_cloud, .module-tags_multilevel, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered { display: none; } /*------------ navigation ------------*/ .navigation ul { margin: 2em 0 0; padding: 0; text-align: center; line-height: 1; } .navigation li { display: inline; } li.page-back { float: left; } li.page-forward { float: right; } .navigation:after { display: block; content: ""; clear: both; } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } /*------------ footer ------------*/ #footer { float: left; width: 100%; line-height: 1; margin-top: -3em; text-align: center; z-index: 1; position: relative; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } #footer a { color: var(--sidebar-link-color); } #footer a:hover { color: var(--sidebar-link-hover-color); } @media (min-width: 900px) { #footer { width: var(--sidebar-width); padding: 0 2em; text-shadow: none; } #footer a { color: var(--link-color); } #footer a:hover { color: var(--link-hover-color); } } /*------------ contextual pop-up ------------*/ div.ContextualPopup { color: var(--text-color); background: var(--content-background-color); color: var(--text-color); border: 0; padding: 1.5em; font-family: inherit; border-radius: 0; width: 200px; text-align: center; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } div.ContextualPopup .Relation { font-size: 1em; font-weight: normal; margin: 0; padding: 1em 0; } div.ContextualPopup .Userpic { border: none; float: none; margin: 0; } div.ContextualPopup .Userpic img { border-radius: 10px; max-width: 100px; max-height: 100px; width: auto; height: auto; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; text-align: center; } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--content-background-color); color: var(--text-color); padding: 0.75em 0; width: auto; justify-content: center; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: 1em; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid; border-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ) 1; background: var(--content-background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { border: 0; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ) !important; color: var(--sidebar-link-color) !important; font-size: var(--text-size); font-family: var(--main-font); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); padding: 0.5em; border-radius: 5px; line-height: 1; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a img { border-radius: 5px; max-width: 50px; max-height: 50px; width: auto; height: auto; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Ubuntu&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

RESOURCES

image from unsplash.com

comments

Scroll

Sun, 01 May 2022 15:13:08 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

header image
navigation links, links list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "1 Column (modules at top and bottom; no sidebar)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "text-only" for "Select whether entry management links are printed as text or using the available icons" and "Select whether comment management links are printed as text or using the available icons". For "Indentation for nested comment threads" select "Responsive" (optional).
Click on the "Modules" tab. Set "Custom text" to number 1, "Navigation" to number 2 and "Links list" to number 4. Uncheck the other modules.
Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)"./*------------------------------------- - layout - scroll (tabula rasa) - https://myrtillenne.dreamwidth.org - header image - tawatchai07 - https://www.freepik.com/tawatchai07 -------------------------------------*/ /*--------------- general ---------------*/ :root { --text-size: 16px; --text-color: #37324b; --line-height: 1.5; --background-color: #bab6e1; --border-color: #bfabcd; --link-color: #8851ac; --link-hover-color: #d08764; --main-font: Source Sans Pro, sans-serif; --title-font: Philosopher, sans-serif; --header-image: url(https://rosecarmine.dreamwidth.org/file/130149.jpg); --header-image-height: 350px; --entry-width: 800px; --entry-background-color: #eeebf1; --customtext-height: 9em; --entry-background-color-alt: #5e3e88; --text-color-alt: #dec9e4; --link-color-alt: #e2d3cd; --link-hover-color-alt: #dec9e4; } H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { padding: 0; margin: 0; background-color: var(--background-color); font-family: var(--main-font); line-height: var(--line-height); font-size: var(--text-size); color: var(--text-color); } a, a:link, a:visited { text-decoration: none; transition: color 0.4s; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } q { font-style: italic; } blockquote { background: var(--entry-background-color-alt); border: 1px solid var(--border-color); margin: 1em 0; padding: 1em; color: var(--text-color-alt); } blockquote a { color: var(--link-color-alt); } blockquote a:hover { color: var(--link-hover-color-alt); } q { font-style: italic; } #canvas { margin: 2em 0; } @media (min-width: 1024px) { #content { padding: 0 144px; } } #content > .inner:first-child { max-width: var(--entry-width); margin: 0 auto; background: var(--entry-background-color); border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); } /*--------------- header ---------------*/ #header { position: relative; } @media (min-width: 1024px) { #header { padding: 0 144px; } } #header > .inner { background: var(--entry-background-color); max-width: var(--entry-width); margin: 0 auto; padding: 2em 0; text-align: center; border: 1px solid var(--border-color); border-bottom: 0; } @media (min-width: 800px) { #header:before { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: var(--header-image-height); background: var(--entry-background-color-alt); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); z-index: -1; } #header:after { content: ""; display: block; bottom: 0; max-width: var(--entry-width); margin: 0 auto; height: var(--header-image-height); background-image: var(--header-image); border: 1px solid var(--border-color); border-bottom: 0; background-size: cover; background-position: center center; } } h1#title { font-family: var(--title-font); text-transform: uppercase; font-size: 2em; line-height: 1.2; margin: 0; padding: 0 1em; } h2#subtitle { font-size: 1em; font-weight: normal; margin: 0; padding: 0.5em 2em 0; line-height: 1.2; } h2#pagetitle { display: none; } /*--------------- entries ---------------*/ .entry, .comment-thread { border-top: 1px solid var(--border-color); position: relative; } .entry .header, .comment .header { border-bottom: 1px solid var(--border-color); padding: 0.5em; text-align: center; } .entry .entry-title { font-family: var(--title-font); font-size: 1.5em; line-height: 1.2; margin: 0; padding: 0.5em; } .no-subject .entry .entry-title { background: none; border: none; padding: 0; } .sticky-entry-icon, .admin-post-icon { display: none; } .restrictions img, .access-filter img { display: none; } .month .restrictions, .month .access-filter, .month .admin-post-icon, .month .sticky-entry-icon { display: none; } .security-protected .access-filter:before { content: "LOCKED"; padding-right: 0.25em; } .security-private .access-filter:before { content: "PRIVATE"; padding-right: 0.25em; } .restrictions-NSFW .restrictions:before { content: "NSFW"; padding-right: 0.25em; } .restrictions-18 .restrictions:before { content: "18+"; padding-right: 0.25em; } .entry .userpic, .comment .userpic { float: left; margin: -1px 1em 0 -1px; } .entry .userpic img, .comment .userpic img { padding: 5px; background: var(--entry-background-color-alt); border: 1px solid var(--border-color); max-width: 50px; max-height: 50px; width: auto; height: auto; } @media (min-width: 800px) { .entry .userpic img, .comment .userpic img { max-width: 100px; max-height: 100px; padding: 10px; } } @media (min-width: 1024px) { .entry .userpic, .comment .userpic { position: absolute; top: 0; width: 122px; text-align: right; left: -134px; margin: 0; } } .entry .poster { font-size: 0; display: block; text-align: center; } .entry .poster .ljuser { font-size: var(--text-size); padding: 0.5em 0.25em 0; display: inline-block; } .poster .ljuser img { display: none; } .poster.empty { display: none; } .entry-content { padding: 2em 2em 0; margin-bottom: 2em; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol { padding-left: 1em; } .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .cuttag-action img { display: none; } .cuttag-action { display: inline-block; font-size: 26px; width: 30px; height: 30px; line-height: 30px; vertical-align: bottom; font-family: arial; text-align: center; color: var(--link-color-alt); background: var(--entry-background-color-alt); border: 1px solid var(--border-color); } .cuttag-action:hover { color: var(--link-hover-color-alt); } .cuttag-action:before { content: "+"; display: inline-block; } .cuttag-action-after:before { transform: rotate(45deg); } .cut-open, .cut-close { display: none; } .cut-text { font-size: var(--text-size); font-weight: normal; display: inline; margin-left: 0.5em; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .metadata { padding: 0 2em; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .entry div.tag { padding: 0 2em; } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; } ul.entry-management-links::before { content: ""; display: block; margin-top: 2em; padding-bottom: 0.5em; border-top: 1px solid var(--border-color); clear: both; } ul.entry-management-links { padding: 0 0 0.5em; margin: 0; text-align: center; line-height: 1.2; text-transform: uppercase; font-family: var(--title-font); } ul.entry-management-links li, ul.comment-management-links li { display: inline; padding: 0 0.25em; } ul.entry-interaction-links { padding: 0.5em; margin: 0; background: var(--entry-background-color-alt); text-align: center; text-transform: uppercase; line-height: 1.2; border-top: 1px solid var(--border-color); font-family: var(--title-font); } ul.entry-interaction-links li, ul.comment-interaction-links li { display: inline; padding: 0 0.25em; } .entry-interaction-links a, .comment-interaction-links a { color: var(--link-color-alt); } .entry-interaction-links a:hover, .comment-interaction-links a:hover { color: var(--link-hover-color-alt); } /*--------------- comments ---------------*/ .comment-pages { background: var(--entry-background-color-alt); text-align: center; padding: 0.5em; text-transform: uppercase; color: var(--text-color-alt); line-height: 1.2; border-top: 1px solid var(--border-color); font-family: var(--title-font); } .comment-pages a { color: var(--link-color-alt); } .comment-pages a:hover { color: var(--link-hover-color-alt); } .comment-pages.bottompages { display: none; } .comment-thread:not(.comment-depth-1) .comment { border-left: 1px solid var(--border-color); margin-left: -1px; } .dwexpcomment { margin-top: 0 !important; } .comment-wrapper { min-width: 15em; } .comment { background: var(--entry-background-color); } .dwexpcomment { margin-top: 0; } .page-reply .full .comment { position: relative; } .comment .comment-title { margin: 0; } .full .comment .comment-title { font-family: var(--title-font); font-size: 1.5em; line-height: 1.2; margin: 0; padding: 0.5em; } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .comment-date-text, .comment-from-text { display: none; } .comment .contents { text-align: center; } .full .comment .poster { display: inline-block; padding-top: 0.5em; } .poster-ip { display: inline-block; padding-top: 0.5em; } .poster-ip:before { content: "("; } .poster-ip:after { content: ")"; } .comment-content { text-align: left; margin: 2em; } .partial .comment { background: var(--entry-background-color-alt); color: var(--text-color-alt); padding: 0.5em 1em; } .partial .comment a { color: var(--link-color-alt); } .partial .comment a:hover { color: var(--link-hover-color-alt); } .comment .footer { text-align: center; } .multiform-checkbox { text-transform: uppercase; font-family: var(--title-font); display: block; padding-bottom: 0.5em; line-height: 1; } ul.comment-management-links { padding: 0.5em; margin: 0; line-height: 1.2; text-transform: uppercase; font-family: var(--title-font); border-top: 1px solid var(--border-color); clear: both; } ul.comment-interaction-links { padding: 0.5em; margin: 0; background: var(--entry-background-color-alt); text-transform: uppercase; line-height: 1.2; border-top: 1px solid var(--border-color); font-family: var(--title-font); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; border-top: 1px solid var(--border-color); } #qrform { padding: 2em; } #postform { padding: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--border-color); background: var(--entry-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: var(--entry-background-color-alt); font-size: var(--text-size); padding: 0.5em; color: var(--link-color-alt); line-height: 1; text-transform: uppercase; font-family: var(--title-font); } #comments ul.entry-interaction-links { display: none; } #comments ul.entry-management-links { display: none; } .bottomcomment { text-align: center; padding: 0.5em 0; border-top: 1px solid var(--border-color); } .bottomcomment select { border: 1px solid var(--border-color); background: var(--entry-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } .bottomcomment input { border: 1px solid var(--border-color); background: var(--entry-background-color-alt); color: var(--link-color-alt); font-size: var(--text-size); font-family: var(--title-font); text-transform: uppercase; padding: 0.5em; line-height: 1; } /*------------ archive, tags, icons containers ------------*/ .month .header, .tags-container .header, .icons-container .header { border-top: 1px solid var(--border-color); text-align: center; padding: 0.5em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-family: var(--title-font); font-size: 1.5em; line-height: 1.2; margin: 0; padding: 0.5em; } .tags-container .contents, .icons-container .contents { border-top: 1px solid var(--border-color); } .month .footer, #primary .manage-link { background: var(--entry-background-color-alt); text-align: center; text-transform: uppercase; padding: 0.5em; line-height: 1.2; border-top: 1px solid var(--border-color); font-family: var(--title-font); } .month .footer a, #primary .manage-link a { color: var(--link-color-alt); } .month .footer a:hover, #primary .manage-link a:hover { color: var(--link-hover-color-alt); } /*------------ archive ------------*/ .month caption { display: none; } .month table { border: none; text-align: center; border-collapse: collapse; width: 100%; } table.month td, table.month th { border-right: 1px solid var(--border-color); max-width: 1em; height: 3.25em; } table.month td:last-child, table.month th:last-child { border-right: none; } table.month tr, table.month th { border-top: 1px solid var(--border-color); } table.month th { background: var(--entry-background-color-alt); text-transform: uppercase; color: var(--link-color-alt); font-family: var(--title-font); } table.month td.day-has-entries { background: var(--entry-background-color-alt); color: var(--text-color-alt); } table.month td a { color: var(--link-color-alt); } table.month td a:hover { color: var(--link-hover-color-alt); } table.month td p { margin: 0; } .month dl { margin: 0; } .month dl dt { font-weight: bold; text-align: center; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 0.5em; text-transform: uppercase; font-family: var(--title-font); } .month dl .time { padding-right: 0.5em; } .month dl h3 { display: inline; font-size: 1em; } .page-month .month .entry-poster { margin-right: 0.5em; } .month dl .tag ul { margin-top: 0; } .month dd { margin: 0; padding: 2em; } .month dl br { display: block; } .day-date { display: none; } #archive-month .navigation input, #archive-month .navigation select { border: 1px solid var(--border-color); background: var(--entry-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #archive-month .navigation input[type="submit"] { border: 1px solid var(--border-color); background: var(--entry-background-color-alt); color: var(--link-color-alt); padding: 0.25em; font-family: var(--title-font); text-transform: uppercase; } /*------------ tags ------------*/ .tags-container .contents { padding: 2em; } ul.ljtaglist { padding: 0; margin-left: 1em; list-style: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .sorting-options ul { margin: 0; padding: 1em; text-align: center; } .sorting-options ul li { display: inline; } .icon { border-top: 1px solid var(--border-color); display: flex; } .icon-image { margin-bottom: -1px; } .icon-image img { padding: 10px; background: var(--entry-background-color-alt); display: block; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .icon-info { padding: 2em; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .page-icons .bottompages { text-align: center; padding: 1em; text-transform: uppercase; border-top: 1px solid var(--border-color); } .icon-pages p { margin: 0; } .keywords-label, .comment-text, .description-text { font-weight: bold; } /*------------ modules ------------*/ .module ul { padding: 0.5em; margin: 0; background: var(--entry-background-color-alt); text-align: center; text-transform: uppercase; line-height: 1.2; border-top: 1px solid var(--border-color); font-family: var(--title-font); } .module li { display: inline; padding: 0 0.25em; } .module li a { text-transform: uppercase; color: var(--link-color-alt); } .module li a:hover { color: var(--link-hover-color-alt); } .module-customtext { padding: 2em; background: var(--entry-background-color); border-top: 1px solid var(--border-color); } .module-customtext .module-content { max-height: var(--customtext-height); overflow: auto; text-align: left; } @media (min-width: 800px) { .module-customtext .module-content { text-align: justify; } } .module-customtext .module-content::-webkit-scrollbar { width: 5px; height: 5px; } .module-customtext .module-content::-webkit-scrollbar-track { background: transparent; } .module-customtext .module-content::-webkit-scrollbar-thumb { background: var(--border-color); } .module-customtext .module-content::-webkit-scrollbar-corner { background: var(--border-color); } .module h2, .module-userprofile, .module .manage-link, .journal-website-name, .journal-name, ul.userlite-interaction-links, .module-calendar, .module-tags_list, .module-tags_multilevel, .module-tags_cloud, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered { display: none; } /*--------------- navigation ---------------*/ .navigation { text-align: center; line-height: 1.2; font-family: var(--title-font); } .navigation ul { margin: 0; padding: 0.5em; border-top: 1px solid var(--border-color); } .navigation li { display: inline; padding: 0.5em; text-transform: uppercase; } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } @media (min-width: 1024px) { #footer { padding: 0 144px; } } #footer .inner { max-width: var(--entry-width); border: 1px solid var(--border-color); margin: 0 auto; } .page-top { background: var(--entry-background-color-alt); line-height: 1.2; padding: 0.5em 0; text-align: center; text-transform: uppercase; font-family: var(--title-font); } #footer a { color: var(--link-color-alt); } #footer a:hover { color: var(--link-hover-color-alt); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 1px solid var(--border-color); box-shadow: none; padding: 0; border-radius: 0; font-family: var(--main-font); color: var(--text-color); } div.ContextualPopup .Relation { font-size: 1em; padding: 1em; margin: 0; font-family: var(--title-font); } .ContextualPopup .Actions ul { margin: 0; padding: 0 1em 1em; } div.ContextualPopup .Userpic { border: none; padding: 0; } div.ContextualPopup .Userpic img { padding: 7px; background: var(--entry-background-color-alt); border-left: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } div.ContextualPopup a { color: var(--link-color); } div.ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { color: var(--text-color-alt); padding: 0.75em 0; width: auto; justify-content: center; text-align: center; border-bottom: 1px solid var(--border-color); background: var(--entry-background-color-alt); } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color-alt); } #lj_controlstrip a:hover { color: var(--link-hover-color-alt); text-decoration: none; } #lj_controlstrip_statustext { color: var(--text-color-alt); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip input, #lj_controlstrip select { border: 0; background: var(--entry-background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { border: 0; text-transform: uppercase; padding: 0.25em; background: transparent !important; color: var(--header-text-color) !important; font-family: var(--title-font) !important; } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_search { text-align: right; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Source+Sans+Pro&family=Philosopher&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

RESOURCES

image by tawatchai07 from freepik.com

comments

Medallion

Sat, 12 Mar 2022 14:11:41 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

default icon, navigation links, links list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "1 Column (modules at bottom; no sidebar)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "text-only" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Modules" tab. Set "Profile" to number 1, "Navigation" to number 2, "Links list" to number 4 and "Custom text" to number 13. Uncheck the other modules.
Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)"./*------------------------------------- - layout - medallion (tabula rasa) - https://myrtillenne.dreamwidth.org -------------------------------------*/ /*--------------- general ---------------*/ :root { --text-size: 16px; --text-color: #6d543d; --line-height: 1.5; --background-color: #f8f5f3; --link-color: #e68328; --link-hover-color: #b17043; --main-font: Libre Baskerville, sans-serif; --title-font: Libre Baskerville, sans-serif; --title-color: #6d543d; --title-hover-color: #b17043; --entry-width: 1000px; --border-color: #c9ab8b; --sidebar-width: 36vw; } H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { padding: 0; margin: 0; background-color: var(--background-color); font-family: var(--main-font); line-height: var(--line-height); font-size: var(--text-size); color: var(--text-color); } a, a:link, a:visited { text-decoration: none; transition: color 0.4s; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } q { font-style: italic; } blockquote { padding: 1em; margin: 1em 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } blockquote::first-letter { font-size: 3.6em; float: left; padding: 0 0.1em 0 0; line-height: 0.8em; font-style: italic; } @media (min-width: 1024px) { #content { border-left: var(--sidebar-width) solid transparent; } } #primary { max-width: var(--entry-width); margin: 0 auto; padding: 0 2em; } #header > .inner { text-align: center; padding: 3em 2em 0; } h1#title { font-size: 2em; font-family: var(--title-font); font-style: italic; color: var(--title-color); margin: 0; padding: 0; line-height: 1; } h1#title a { color: var(--title-color); } h1#title a:hover { color: var(--title-hover-color); } h2#subtitle { font-size: 1em; color: var(--title-color); margin: 0; padding: 0.25em 0 0; font-weight: normal; } @media (min-width: 1024px) { #header { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100%; border-right: 1px solid var(--border-color); } #header > .inner { padding: 10vh 2em 0; } } h2#pagetitle { display: none; } /*--------------- entries ---------------*/ .entry-wrapper, .comment-wrapper { margin: 3em 0; } .entry .header { text-align: center; padding-bottom: 2em; } .has-userpic .entry .header { margin-bottom: 31px; } @media (min-width: 800px) { .has-userpic .entry .header { margin: 0; } } .entry .entry-title, .full .comment-title { font-size: 1.5em; margin: 0 0 1.5em; padding: 0; font-family: var(--title-font); font-style: italic; line-height: 1; } .entry .entry-title, .entry .entry-title a, .full .comment-title a { color: var(--title-color); } .entry .entry-title a:hover { color: var(--title-hover-color); } .no-subject .entry .entry-title, .no-subject .comment .comment-title { margin: 0; padding: 0; } .sticky-entry-icon, .admin-post-icon { display: none; } .restrictions img, .access-filter img { display: none; } .month .restrictions, .month .access-filter, .month .admin-post-icon, .month .sticky-entry-icon { display: none; } .security-protected .access-filter:before { content: "LOCKED"; padding-right: 0.25em; } .security-private .access-filter:before { content: "PRIVATE"; padding-right: 0.25em; } .has-userpic .restrictions, .has-userpic .access-filter { height: 56px; padding: 0; position: relative; z-index: 1; } .security-protected .access-filter:before { content: "LOCKED"; padding-right: 0.25em; } .security-private .access-filter:before { content: "PRIVATE"; padding-right: 0.25em; } .restrictions-NSFW .restrictions:before { content: "NSFW"; padding-right: 0.25em; } .restrictions-18 .restrictions:before { content: "18+"; padding-right: 0.25em; } .has-userpic .entry .datetime { height: 56px; padding: 0; position: relative; z-index: 1; } .entry .datetime a { color: var(--text-color); } @media (min-width: 800px) { .entry .datetime { float: left; padding-bottom: 1em; } .restrictions, .access-filter { float: right; padding-left: 0.25em; padding-bottom: 1em; } } .entry .contents { position: relative; clear: both; } .has-userpic .entry .contents { padding-top: 31px; } .no-userpic .entry .contents:before { content: ""; display: block; height: 3px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .has-userpic .entry .userpic { display: flex; align-items: center; width: 100%; height: 62px; position: absolute; top: -31px; left: 0; } .entry .userpic:before, .entry .userpic:after { content: ""; height: 3px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); flex: 1; } .entry .userpic img, .comment .userpic img { padding: 5px; max-width: 50px; max-height: 50px; display: block; border-radius: 50%; border: 1px solid var(--border-color); } .entry .poster { font-size: 0; } .entry .poster .ljuser { font-size: var(--text-size); padding-top: 1em; } .has-userpic .entry .poster .ljuser { padding-top: 0; } .entry .poster .ljuser:nth-child(1) { float: left; } .entry .poster .ljuser:nth-child(2) { float: right; } .poster .ljuser b { font-weight: normal; } @media (min-width: 800px) { .has-userpic .entry .contents { padding-top: 0; } .has-userpic .entry .userpic { height: 112px; top: -56px; } .entry .userpic img, .comment .userpic img { max-width: 100px; max-height: 100px; } .entry .poster .ljuser { padding-top: 1em; } .has-userpic .entry .poster .ljuser { display: flex; width: calc(50% - 56px); min-height: 56px; padding: 0; align-items: flex-end; position: relative; z-index: 1; } .has-userpic .entry .poster .ljuser:nth-child(2) { justify-content: flex-end; } .has-userpic .poster.empty { height: 56px; display: block; } } .poster .ljuser img { display: none; } .poster.empty { display: none; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .entry-content { padding-top: 2em; margin-bottom: 2em; clear: left; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol { padding-left: 1em; } .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .cuttag-action img { display: none; } .cuttag-action { display: inline-block; width: 24px; height: 24px; font-size: 24px; line-height: 1em; text-align: center; vertical-align: middle; font-family: arial; border: 1px solid var(--border-color); border-radius: 50%; } .cuttag-action:before { content: "+"; display: block; } .cuttag-action-after:before { transform: rotate(45deg); } .cut-open, .cut-close { display: none; } .cut-text { font-size: var(--text-size); font-weight: normal; display: inline; margin-left: 0.5em; } .metadata ul { list-style: none; margin: 0; padding: 0; } .metadata li { margin-bottom: 0.25em; } .tag { text-align: left; } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; } ul.entry-management-links, ul.entry-interaction-links { margin: 0; padding: 0; display: inline; line-height: 1; } ul.entry-management-links::before { content: ""; display: block; margin-top: 2em; } ul.entry-management-links li { display: inline; margin: 0 0.5em; } ul.entry-interaction-links li { display: inline; margin: 0 0.5em; } .entry .footer, .comment .footer { padding-bottom: 3em; clear: both; text-align: center; } #primary .separator-after { display: flex; align-items: center; width: 100%; } #primary .separator-after:before, #primary .separator-after:after { content: ""; height: 3px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); flex: 1; } #primary .separator-after .inner { border: 1px solid var(--border-color); border-radius: 50%; padding: 3px; } #primary .separator-after .inner:before { content: ""; width: 20px; height: 20px; display: block; border-radius: 50%; background: var(--border-color); } /*--------------- comments ---------------*/ .comment-pages { text-align: center; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .full .thread-depth { display: block; margin-bottom: 1em; } .comment .header { float: left; } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .comment-date-text { display: none; } .comment .userpic { float: right; shape-outside: circle(50%); } .full .comment .poster { display: block; clear: left; } .comment-content { padding: 2em 0; } .multiform-checkbox input { vertical-align: top; } ul.comment-management-links, ul.comment-interaction-links { margin: 0; padding: 0; display: inline; line-height: 1; } ul.comment-management-links li { padding: 0.5em; display: inline; } ul.comment-interaction-links li { padding: 0.5em; display: inline; } #comments ul.entry-management-links, #comments ul.entry-interaction-links, .comment-pages.bottompages { display: none; } .bottomcomment { text-align: center; margin-bottom: 3em; } .bottomcomment input, .bottomcomment select { border: 1px solid var(--border-color); background: var(--background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } .partial .comment { padding-bottom: 3em; } .partial .comment-title { margin: 0; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #postform { border: 1px solid var(--border-color); padding: 2em; margin-bottom: 40px; } #qrform { border: 0; padding: 2em 0 0; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--border-color); background: var(--background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: var(--text-size); padding: 0.5em; color: var(--link-color); line-height: 1; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { margin: 3em 0; } .month-wrapper .header, .tags-container .header, .icons-container .header { padding-bottom: 2em; text-align: center; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.5em; margin: 0; padding: 0; font-family: var(--title-font); font-style: italic; line-height: 1; } .month .footer { padding: 2em 0 3em; text-align: center; line-height: 1; } #primary .manage-link { padding-top: 2em; text-align: center; line-height: 1; } /*------------ archive ------------*/ .day-date { display: none; } .month caption { display: none; } table.month { margin: 0 auto; border-collapse: collapse; width: 100%; border: none; text-align: center; } table.month tr { border-bottom: 1px solid var(--border-color); } table.month th { font-weight: normal; } table.month tr:first-child { border-top: none; } table.month td, table.month th { padding: 0.5em; border: 0; height: auto; } table.month td.day-has-entries .label, table.month td p { display: inline-block; margin: 0; } table.month td p:before { content: "( "; } table.month td p:after { content: " )"; } .month dl { margin: 0; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dl dt { font-family: var(--title-font); font-weight: bold; font-size: 1.2em; line-height: 1; text-align: center; font-style: italic; } .month dl dt a { color: var(--title-color); } .month dl dt a:hover { color: var(--title-hover-color); } dd { margin: 0; padding: 2em 0; } .month dd > span { padding-right: 0.25em; } #archive-year .navigation { text-align: center; } #archive-year .navigation ul, #archive-month .navigation ul form { display: inline-block; } #archive-year .navigation li, #archive-month .navigation li { display: inline-block; padding: 0 0.5em; } #archive-month .navigation { padding: 0 2em; text-align: center; } #archive-month .navigation input, #archive-month .navigation select { border: 1px solid var(--border-color); background: var(--background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } /*------------ tags ------------*/ ul.ljtaglist { margin: 0 0 0 1em; padding: 0; list-style: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0; padding: 0; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { padding: 0.25em; text-align: center; } .icons-container .icon { border-top: 1px solid var(--border-color); display: flex; flex-wrap: wrap; align-items: center; margin-top: 1em; padding-top: 1em; } .icon-image img { display: block; } .icon-info { padding-left: 1em; flex: 1; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*------------ sidebar ------------*/ .module-section-one { margin: 0 auto; max-width: var(--entry-width); } .module-section-one .inner { margin: 3em 2em; column-count: 3; column-width: 140px; } @media (min-width: 1024px) { #secondary { position: fixed; left: 0; bottom: 0; width: var(--sidebar-width); z-index: 1; } } .module-userprofile { column-span: all; display: flex; align-items: center; margin-bottom: 1.5em; } .module-userprofile:before, .module-userprofile:after { content: ""; height: 3px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); flex: 1; } .module .userpic { margin: 0 auto; border: 1px solid var(--border-color); padding: 5px; border-radius: 50%; } .module .userpic img { display: block; border-radius: 50%; } .module-content ul { padding: 0; margin: 0; list-style: none; } .module-content li { break-inside: avoid; padding-left: 24px; position: relative; } .module-content li a:before { content: ""; display: block; position: absolute; width: 6px; height: 6px; padding: 2px; background: var(--border-color); background-clip: content-box; border: 1px solid var(--border-color); margin-top: -6px; top: 50%; left: 0; border-radius: 50%; } .module-customtext { column-span: all; overflow: auto; margin-top: 1.5em; } @media (min-width: 1024px) { .module-customtext { max-height: 25vh; } } .module-customtext::-webkit-scrollbar { width: 5px; height: 5px; } .module-customtext::-webkit-scrollbar-track { background: transparent; } .module-customtext::-webkit-scrollbar-thumb { background: var(--border-color); } .module-customtext::-webkit-scrollbar-corner { background: var(--border-color); } .module h2, .module .manage-link, .journal-website-name, .journal-name, ul.userlite-interaction-links, .module-calendar, .module-tags_list, .module-tags_cloud, .module-tags_multilevel, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered { display: none; } /*------------ navigation ------------*/ .navigation ul { margin: 0; padding: 0; text-align: center; } .navigation li { line-height: 1; display: inline; padding: 0 0.5em; } @media (min-width: 1024px) { li.page-back { float: left; } li.page-forward { float: right; } } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } /*------------ footer ------------*/ #footer { margin: 3em 0; text-align: center; } #footer .inner { max-width: var(--entry-width); margin: 0 auto; } @media (min-width: 800px) { #footer .inner { max-width: var(--entry-width); margin: 0 auto; padding: 0 2em; } } @media (min-width: 1024px) { #footer { margin-left: var(--sidebar-width); } } .page-top { line-height: 1; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { color: var(--text-color); background: var(--background-color); border: 0; padding: 2em; font-family: inherit; border-radius: 0; width: 200px; text-align: center; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } div.ContextualPopup .Relation { font-size: 1em; font-weight: normal; margin: 0 0 1em; padding: 1em 0; border-bottom: 1px solid var(--border-color); } div.ContextualPopup .Userpic { border: none; float: none; margin: 0; } div.ContextualPopup .Userpic img { border-radius: 50%; border: 1px solid var(--border-color); padding: 5px; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; text-align: center; } /*------------ control strip ------------*/ #lj_controlstrip { background: transparent; color: var(--text-color); padding: 0.75em 0; width: auto; justify-content: center; text-align: center; } @media (min-width: 800px) { #lj_controlstrip { padding: 0.75em 2em; } } @media (min-width: 1024px) { #lj_controlstrip { margin-left: var(--sidebar-width); } } #lj_controlstrip:before { content: ""; width: 100%; order: 9; flex: 0 0 100%; } #lj_controlstrip:after { content: ""; width: 100%; max-width: var(--entry-width); border-bottom: 1px solid var(--border-color); padding-top: 1em; margin: 0 auto; order: 10; } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--border-color); background: var(--background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { border: 0; background: transparent !important; text-transform: uppercase; font-size: var(--text-size); color: var(--text-color); font-family: var(--main-font); padding: 0.25em; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a img { border-radius: 50%; border: 1px solid var(--border-color); padding: 3px; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout".

comments

Fragment

Thu, 30 Dec 2021 19:46:32 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

sidebar image (set to "cover")
default icon, navigation links, links list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "1 Column (modules at bottom; no sidebar)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "text-only" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Modules" tab. Set "Profile" to number 1, "Navigation" to number 2, "Links list" to number 4 and "Custom text" to number 13. Uncheck the other modules.
Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". /*------------------------------------- - layout - fragment (tabula rasa) - https://myrtillenne.dreamwidth.org - image - unsplash.com -------------------------------------*/ /*--------------- general ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Source Sans Pro, sans-serif; --title-font: Charm, sans-serif; --background-color: #302d40; --text-color: #b5b3c4; --link-color: #f8b8b6; --link-hover-color: #c5b9fd; --title-color: #c5b9fd; --title-shadow-color: #302d40; --entry-width: 1000px; --entry-border-color: #69638d; --entry-header-background-color: #f8b8b6; --entry-header-text-color: #302d40; --entry-header-link-color: #544e7c; --entry-header-link-hover-color: #302d40; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/122915.jpg"); --sidebar-width: 36vw; --sidebar-background-color: rgba(30, 28, 38, 0.7); --sidebar-border-color: #1e1c26; --sidebar-text-color: #c7c5d1; --sidebar-link-color: #f8b8b6; --sidebar-link-hover-color: #c5b9fd; --customtext-height: 9em; } H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { padding: 0; margin: 0; background-color: var(--background-color); font-family: var(--main-font); line-height: var(--line-height); font-size: var(--text-size); color: var(--text-color); } a, a:link, a:visited { text-decoration: none; transition: color 0.4s; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } q { font-style: italic; } blockquote { background: var(--entry-header-background-color); clip-path: polygon(0 0, 100% 0, 100% 100%, 1em 100%); padding: 1em 1em 1em 2em; margin: 1em 0; color: var(--entry-header-text-color); } blockquote a { color: var(--entry-header-link-color); } blockquote a:hover { color: var(--entry-header-link-hover-color); } @media (min-width: 1024px) { #content { border-left: calc(var(--sidebar-width) + 4vw) solid transparent; } } @media (min-width: 800px) { #primary { max-width: var(--entry-width); margin: 0 auto; padding: 0 40px; } } #header > .inner { text-align: center; padding: 40px 2em 0; } h1#title { font-size: 2em; font-family: var(--title-font); margin: 0; padding: 0; line-height: 1; } h2#subtitle { font-size: 1em; margin: 0; padding: 0.25em 0 0; font-weight: normal; } @media (min-width: 1024px) { #header { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: calc(100% - 4vw); border: 2vw solid var(--sidebar-border-color); background-image: var(--sidebar-image); background-size: cover; background-position: center center; background-clip: content-box; } #header > .inner { padding: 10vh 2em 0; } h1#title { color: var(--title-color); text-shadow: 1px 1px 5px var(--title-shadow-color), -1px -1px 5px var(--title-shadow-color); } h1#title a { color: var(--title-color); } h2#subtitle { color: var(--title-color); text-shadow: 1px 1px 5px var(--title-shadow-color), -1px -1px 5px var(--title-shadow-color); } } h2#pagetitle { display: none; } /*--------------- entries ---------------*/ .entry, .comment { padding: 5px; border: 1px solid var(--entry-border-color); margin: 40px 0; } .entry .header, .comment .header { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0% 100%); background: var(--entry-header-background-color); padding: 1.5em; color: var(--entry-header-text-color); } .entry .entry-title, .full .comment-title { font-size: 1.5em; margin: 0 0 0.5em; padding: 0; font-family: var(--title-font); position: relative; line-height: 1; } .entry .entry-title, .entry .entry-title a, .full .comment-title a { color: var(--entry-header-link-color); } .entry .entry-title a:hover { color: var(--entry-header-link-hover-color); } .no-subject .entry .entry-title, .no-subject .comment .comment-title { margin: 0; padding: 0; } .sticky-entry-icon, .admin-post-icon { display: none; } .restrictions img, .access-filter img { display: none; } .month .restrictions, .month .access-filter, .month .admin-post-icon, .month .sticky-entry-icon { display: none; } .security-protected .access-filter:before { content: "LOCKED"; padding-right: 0.25em; } .security-private .access-filter:before { content: "PRIVATE"; padding-right: 0.25em; } .restrictions-NSFW .restrictions:before { content: "NSFW"; padding-right: 0.25em; } .restrictions-18 .restrictions:before { content: "18+"; padding-right: 0.25em; } .entry .datetime a { color: var(--entry-header-text-color); } .entry .contents { padding: 0 2em; } .has-userpic .userpic { float: right; shape-outside: circle(50%); margin: 0 -15px 0 1em; } .entry .userpic img, .comment .userpic img { display: block; border-radius: 50%; border: 5px solid var(--entry-header-background-color); padding: 5px; max-width: 50px; max-height: 50px; } @media (min-width: 640px) { .entry .userpic img, .comment .userpic img { max-width: 100px; max-height: 100px; } } .entry .poster { font-size: 0; } .entry .poster:before { content: ""; display: block; font-size: var(--text-size); padding-top: 1em; } .entry .poster .ljuser { font-size: var(--text-size); margin-right: 0.5em; } .entry .poster .ljuser a, .comment .poster .ljuser a { color: var(--text-color); } .entry .poster .ljuser:before, .comment .poster .ljuser:before { content: "@"; color: var(--link-color); } .poster .ljuser img { display: none; } .poster.empty { display: none; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .entry-content { padding-top: 2em; margin-bottom: 2em; clear: left; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol { padding-left: 1em; } .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .cuttag-action img { display: none; } .cuttag-action:before { content: "+"; display: inline-block; font-size: 26px; line-height: 22px; vertical-align: bottom; font-family: arial; } .cuttag-action-after:before { transform: rotate(45deg); } .cut-open, .cut-close { display: none; } .cut-text { font-size: var(--text-size); font-weight: normal; display: inline; margin-left: 0.5em; } .metadata ul { list-style: none; margin: 0; padding: 0; } .metadata li { margin-bottom: 0.25em; } .tag { text-align: left; } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; } ul.entry-management-links, ul.entry-interaction-links { margin: 0; padding: 0; display: inline; line-height: 1; } ul.entry-management-links::before { content: ""; display: block; margin-top: 2em; } ul.entry-management-links li { display: inline; margin: 0 0.5em; } ul.entry-interaction-links li { display: inline; margin: 0 0.5em; } .entry .footer, .comment .footer { padding: 0 2em 2em; clear: both; text-align: center; } /*--------------- comments ---------------*/ .comment-pages { text-align: center; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .comment-date-text, .comment-from-text { display: none; } .comment .contents { padding: 0 2em; } .full .comment .poster { display: block; padding-top: 1em; } .comment-content { padding: 2em 0; } .multiform-checkbox input { vertical-align: top; } ul.comment-management-links, ul.comment-interaction-links { margin: 0; padding: 0; display: inline; line-height: 1; } ul.comment-management-links li { padding: 0.5em; display: inline; } ul.comment-interaction-links li { padding: 0.5em; display: inline; } #comments ul.entry-management-links, #comments ul.entry-interaction-links, .comment-pages.bottompages { display: none; } .bottomcomment { text-align: center; margin-bottom: 40px; } .bottomcomment input, .bottomcomment select { border: 1px solid var(--entry-border-color); background: var(--background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } .partial .comment { padding: 1em; } .partial .comment-title { margin: 0; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #postform { border: 1px solid var(--entry-border-color); padding: 2em; margin-bottom: 40px; } #qrform { border: 0; padding: 2em 0 0; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--entry-border-color); background: var(--background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: var(--text-size); padding: 0.5em; color: var(--link-color); line-height: 1; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { padding: 5px; border: 1px solid var(--entry-border-color); margin: 40px 0; } .month-wrapper .header, .tags-container .header, .icons-container .header { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0% 100%); background: var(--entry-header-background-color); padding: 1.5em; color: var(--entry-header-link-color); } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.5em; margin: 0 0 0.5em; padding: 0; font-family: var(--title-font); position: relative; line-height: 1; } .month .contents, .tags-container .contents, .icons-container .contents { padding: 2em; } .month .footer, #primary .manage-link { padding: 0 2em 2em; text-align: center; line-height: 1; } /*------------ archive ------------*/ .day-date { display: none; } .month caption { display: none; } table.month { margin: 0 auto; border-collapse: collapse; width: 100%; border: none; text-align: center; } table.month tr { border: 1px solid var(--entry-border-color); border-right: none; border-left: none; } table.month th { font-weight: normal; } table.month tr:first-child { border-top: none; } table.month td:last-child, table.month th:last-child { border-right: none; } table.month td, table.month th { padding: 0.5em; border: 0; height: auto; } table.month td.day-has-entries .label, table.month td p { display: inline-block; margin: 0; } table.month td p:before { content: "[ "; } table.month td p:after { content: " ]"; } .month dl { margin: 0; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dl dt { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0% 100%); background: var(--entry-header-background-color); padding: 1em; font-family: var(--title-font); font-weight: bold; font-size: 1.2em; line-height: 1; } .month dl dt a { color: var(--entry-header-link-color); } .month dl dt a:hover { color: var(--entry-header-link-hover-color); } dd { margin: 0; padding: 1em 2em 2em; } .month dd > span { padding-right: 0.25em; } #archive-year .navigation { text-align: center; } #archive-year .navigation ul, #archive-month .navigation ul form { display: inline-block; } #archive-year .navigation li, #archive-month .navigation li { display: inline-block; padding: 0 0.5em; } #archive-month .navigation { padding: 0 2em 2em; text-align: center; } #archive-month .navigation input, #archive-month .navigation select { border: 1px solid var(--entry-border-color); background: var(--background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } /*------------ tags ------------*/ ul.ljtaglist { margin: 0 0 0 1em; padding: 0; list-style: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0; padding: 0; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { padding: 0.25em; text-align: center; } .icons-container .icon { border-top: 1px solid var(--entry-border-color); display: flex; flex-wrap: wrap; align-items: center; margin-top: 1em; padding-top: 1em; } .icon-image img { display: block; } .icon-info { padding-left: 1em; flex: 1; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*------------ sidebar ------------*/ .module-section-one { text-align: center; } .module-section-one .inner { margin: 2em; } @media (min-width: 1024px) { #secondary { position: fixed; left: 0; bottom: 0; width: var(--sidebar-width); margin: 2vw; z-index: 1; } .module-section-one { margin: 5px; position: relative; } .module-section-one:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; padding-top: 50px; clip-path: polygon(0 50px, 100% 0, 100% 100%, 0% 100%); background: var(--sidebar-background-color); backdrop-filter: blur(1px); z-index: -1; } .module-section-one .inner { padding: 15px 2em 2em; margin: 0; } } .module { display: inline; color: var(--sidebar-text-color); } .module a { color: var(--sidebar-link-color); } .module a:hover { color: var(--sidebar-link-hover-color); } .module .userpic { margin-bottom: 1em; } .module .userpic img { border-radius: 50%; border: 5px solid var(--entry-header-background-color); padding: 5px; } @media (min-width: 1024px) { .module .userpic { position: absolute; top: -130px; left: 20px; display: flex; align-items: flex-end; height: 100px; margin: 0; } .module .userpic img { display: block; border: 5px solid var(--sidebar-background-color); backdrop-filter: blur(1px); } } .module-content { display: inline; } .module-content ul { padding: 0; margin: 0; list-style: none; display: inline; } .module li { display: inline-block; line-height: 1; padding: 0.25em 0.5em; } .module-customtext { display: block; max-height: var(--customtext-height); overflow: auto; margin-top: 1em; text-align: left; } .module-customtext::-webkit-scrollbar { width: 5px; height: 5px; } .module-customtext::-webkit-scrollbar-track { background: transparent; } .module-customtext::-webkit-scrollbar-thumb { background: var(--sidebar-link-color); } .module-customtext::-webkit-scrollbar-corner { background: var(--sidebar-link-color); } .module h2, .module .manage-link, .journal-website-name, .journal-name, ul.userlite-interaction-links, .module-calendar, .module-tags_list, .module-tags_cloud, .module-tags_multilevel, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered { display: none; } /*------------ navigation ------------*/ .navigation ul { margin: 0; padding: 0; text-align: center; } .navigation li { line-height: 1; display: inline; padding: 0 0.5em; } @media (min-width: 1024px) { #entries .navigation li { padding: 1em 0; } li.page-back { float: left; } li.page-forward { float: right; } } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } /*------------ footer ------------*/ #footer { margin: 40px 0; text-align: center; } #footer .inner { max-width: var(--entry-width); margin: 0 auto; } @media (min-width: 800px) { #footer .inner { max-width: var(--entry-width); margin: 0 auto; padding: 0 40px; } } @media (min-width: 1024px) { #footer { margin-left: calc(var(--sidebar-width) + 4vw); } } .page-top { border-top: 1px solid var(--entry-border-color); padding-top: 1em; line-height: 1; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-header-background-color); color: var(--entry-header-text-color); border: 0; padding: 1.5em; font-family: inherit; border-radius: 0; width: 200px; text-align: center; } .ContextualPopup a { color: var(--entry-header-link-color); } .ContextualPopup a:hover { color: var(--entry-header-link-hover-color); } div.ContextualPopup .Relation { font-size: 1em; font-weight: normal; margin: 0; padding: 1em 0; } div.ContextualPopup .Userpic { border: none; float: none; margin: 0; } div.ContextualPopup .Userpic img { border-radius: 50%; border: 5px solid var(--background-color); padding: 5px; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; text-align: center; } div.ContextualPopup li { } /*------------ control strip ------------*/ #lj_controlstrip { background: transparent; color: var(--text-color); padding: 0.75em 0; width: auto; justify-content: center; text-align: center; } @media (min-width: 800px) { #lj_controlstrip { padding: 0.75em 40px; } } @media (min-width: 1024px) { #lj_controlstrip { margin-left: calc(var(--sidebar-width) + 4vw); } } #lj_controlstrip:before { content: ""; width: 100%; order: 9; flex: 0 0 100%; } #lj_controlstrip:after { content: ""; width: 100%; max-width: var(--entry-width); border-bottom: 1px solid var(--entry-border-color); padding-top: 1em; margin: 0 auto; order: 10; } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--entry-border-color); background: var(--background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { border: 0; text-transform: uppercase; padding: 0.25em; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a img { border-radius: 50%; border: 2px solid var(--entry-header-background-color); padding: 3px; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Source+Sans+Pro&family=Charm&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout".

RESOURCES

image from unsplash.com

comments

Line

Sat, 27 Nov 2021 16:23:42 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

header image (1000x350px)
expanding topbar
navigation links, calendar, links list, tags list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Basic Boxes" and apply any theme.
Choose the "1 Column (modules at bottom; no sidebar)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "text-only" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Modules" tab and enable "Custom text". The layout supports "Navigation", "Calendar", "Links list", "Tags" and "Custom text". Uncheck the other modules.
Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)"./*------------------------------------- - layout - line (basic boxes) - https://myrtillenne.dreamwidth.org - header image - unsplash.com -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #234974; --line-height: 1.5; --body-gradient1-color: #3088b8; --body-gradient2-color: #e9c7d3; --link-color: #c93f70; --link-hover-color: #3088b8; --main-font: Average, serif; --title-font: Amita, serif; --content-width: 1000px; --header-height: 350px; --content-border-color: rgba(255, 255, 255, 0.5); --header-image: url(https://rosecarmine.dreamwidth.org/file/115077.jpg); --title-color: #0e2f52; --title-background-color: rgba(255, 255, 255, 0.5); --subtitle-color: #0e2f52; --subtitle-background-color: rgba(255, 255, 255, 0.3); --header-border-color: #fff; --heading-color: #fff; --heading-background-color: #6db4da; --entry-background-color: #f5fbfc; --entry-title-color: #fff; --entry-title-background-color: #9bcce6; --entry-date-color: #234974; --entry-date-background-color: #c9e3f1; --controlstrip-color: #fff; } /*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { font-family: var(--main-font); font-size: var(--text-size); padding: 0; margin: 0; line-height: var(--line-height); color: var(--text-color); background: linear-gradient( to bottom, var(--body-gradient1-color), var(--body-gradient2-color) ); background-attachment: fixed; } html body { margin-left: 0; margin-right: 0; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited, a:active { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { border-top: 5px solid var(--entry-date-background-color); border-bottom: 5px solid var(--entry-date-background-color); padding: 0.5em; font-style: italic; margin: 1em 0; color: var(--entry-date-text-color); } @media (min-width: 600px) { #canvas { max-width: var(--content-width); margin: 0 auto; border: 20px solid var(--content-border-color); } } #canvas > .inner:first-child { background: var(--entry-background-color); } @media (min-width: 800px) { #content > .inner:first-child { display: flex; flex-direction: column; } #secondary { order: -1; } } /*--------------- header ---------------*/ #header { text-align: center; } #journaltitles-container { padding-top: 10px; } h1#title { font-size: 1.2em; font-family: var(--title-font); font-style: italic; font-weight: normal; padding: 0.5em; margin: 0; line-height: 1; } h1#title a { color: inherit; } h2#subtitle { font-size: 1em; text-transform: lowercase; font-weight: normal; padding: 0.5em; margin: 5px 0 0; font-family: var(--title-font); line-height: 1; } @media (min-width: 800px) { #journaltitles-container { background-image: var(--header-image); background-position: center center; width: 100%; height: var(--header-height); padding-top: 0; padding-bottom: 20px; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; } h1#title { background: var(--title-background-color); color: var(--title-color); } h1#title a { color: inherit; } h2#subtitle { background: var(--subtitle-background-color); color: var(--subtitle-color); } } h2#pagetitle { display: none; } /*------------ entries ------------*/ .entry .header .inner { padding-top: 5px; } .entry .entry-title { font-size: 1.2em; letter-spacing: 1px; background: var(--entry-title-background-color); font-family: var(--title-font); font-style: italic; padding: 0.5em 1em; margin: 0 0 5px; font-weight: normal; transition: all 0.4s ease; line-height: 1; background-size: 200% 200%; background-image: linear-gradient( to right, var(--heading-background-color) 50%, var(--entry-title-background-color) 0 ); background-position: right; } .entry .entry-title:hover { background-position: left; letter-spacing: 5px; color: var(--entry-title-color); } .entry .entry-title, .entry .entry-title a { color: var(--entry-title-color); } .entry .entry-title:hover a { color: var(--entry-title-color); } .no-subject .entry .entry-title { background: none; padding: 0; margin: 0; } .admin-post-icon, .sticky-entry-icon { display: none; } .entry .datetime { letter-spacing: 1px; line-height: 1; width: 100%; display: block; padding: 0.5em 1em; text-transform: lowercase; transition: all 0.4s ease; box-sizing: border-box; background-size: 200% 200%; background-image: linear-gradient( to right, var(--entry-title-background-color) 50%, var(--entry-date-background-color) 0 ); background-position: right; } .entry .datetime, .entry .datetime a { color: var(--entry-date-color); } .entry .datetime:hover a { color: var(--entry-title-color); } .entry .datetime:hover { background-position: left; letter-spacing: 5px; color: var(--entry-title-color); } .restrictions, .access-filter { display: none; } .security-protected .entry .datetime:before { content: "[LOCKED] "; } .security-private .entry .datetime:before { content: "[PRIVATE] "; } .restrictions-NSFW .entry .date:before { content: "[NSFW] "; } .restrictions-18 .entry .date:before { content: "[18+] "; } @media (min-width: 800px) { .has-userpic .entry .header { float: right; width: calc(100% - 106px); margin-left: -1em; } } .entry .contents { margin: 2em 2em 0; } .entry .userpic { float: left; margin-right: 1em; } .userpic img { max-width: 50px; max-height: 50px; width: auto; height: auto; } @media (min-width: 800px) { .entry .contents { margin-top: 0; } .has-userpic .entry .userpic { margin-left: -2em; width: 100px; height: 100px; padding: 0 3px 3px; display: flex; align-items: center; justify-content: center; background: var(--heading-background-color); } .userpic img { max-width: 100px; max-height: 100px; display: block; } } .entry .poster { font-size: 0; display: block; clear: right; } .entry .poster .ljuser { font-size: var(--text-size); } .entry .poster .ljuser:nth-child(1):before { content: "Written by "; } .entry .poster .ljuser:nth-child(2):before { content: "in "; padding-left: 0.25em; } .poster .ljuser img { display: none; } .entry-content { margin: 2em 0; } @media (min-width: 800px) { .entry .poster:before { content: ""; padding-top: 1em; display: block; font-size: var(--text-size); } .entry .poster.empty:before { padding: 0; } .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content a, .comment-content a { background-image: linear-gradient( var(--entry-date-background-color), var(--entry-date-background-color) ); background-size: 0% 1px; background-position-y: 100%; background-position-x: 100%; background-repeat: no-repeat; transition: color 0.4s ease, background-size 0.4s ease-in-out; } .entry-content a:hover, .comment-content a:hover { background-size: 100% 1px; background-position-x: 0%; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .metadata { margin: 0 -2em; clear: both; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata li { margin-bottom: 5px; border-bottom: 1px solid var(--entry-date-background-color); font-style: italic; padding: 0 2em; } .footer { clear: both; } .entry div.tag { padding: 0 2em; margin-bottom: 5px; border-bottom: 1px solid var(--entry-date-background-color); font-style: italic; } .tag ul { display: inline; margin-left: 0; padding-left: 0; } .tag ul li { display: inline; } ul.entry-management-links { margin: 0; padding: 0.5em; background: var(--entry-title-background-color); text-transform: uppercase; line-height: 1; text-align: center; } ul.entry-management-links li, ul.entry-interaction-links li { display: inline; padding: 0 0.25em; } ul.entry-interaction-links { margin: 5px 0 0; padding: 0.5em; background: var(--heading-background-color); text-transform: uppercase; line-height: 1; text-align: center; } .entry-management-links a, .entry-management-links a:hover { color: var(--entry-title-color); } .entry-interaction-links a, .entry-interaction-links a:hover { color: var(--heading-color); } .page-entry .entry { margin-bottom: 5px; } /*------------ comments ------------*/ .comment-pages { text-align: center; font-family: var(--title-font); margin: 0.5em; } .full .comment { margin: 5px 0; background: var(--entry-background-color); } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .comment:after { content: ""; display: block; clear: both; } .partial { background: var(--entry-date-background-color); padding: 0.5em 1em; color: var(--entry-date-color); margin: 5px 0; } .partial a, .partial a:hover { color: var(--entry-date-color); } .comment .header { background: var(--heading-background-color); overflow: hidden; padding: 0.5em 1em; line-height: 1; } .full .comment .thread-depth, .full .comment .comment-title, .full .comment .header .datetime { float: left; color: var(--heading-color); } .full .comment .comment-title { margin-right: 0.5em; } .thread-depth { float: left; margin-right: 0.5em; } .comment .comment-title { margin: 0; } .full .comment .comment-title a, .full .comment .comment-title a:hover { color: var(--heading-color); } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .comment-date-text { display: none; } .comment .userpic { float: left; margin-right: 1em; margin-bottom: 0; } .comment .userpic img { background: var(--heading-background-color); padding: 0 3px 3px; } .full .comment .poster, .full .comment .poster-ip { display: block; margin-left: 2em; } .full .comment .poster { padding-top: 1em; } .comment-content { padding: 2em; } .comment .footer { margin: 0 2em 2em; } ul.comment-management-links, ul.comment-interaction-links { margin: 0; padding: 0; display: inline; } ul.comment-management-links li, ul.comment-interaction-links li { display: inline; padding-right: 0.25em; } .comment-pages.bottompages { display: none; } #comments ul.entry-interaction-links { display: none; } #comments ul.entry-management-links { display: none; } .bottomcomment { text-align: center; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform, #postform { padding: 2em; border-bottom: 20px solid var(--heading-background-color); } #postform { margin-bottom: 5px; } .comment #qrform { border: 0; padding: 2em 0 0; } .page-reply .comment { border-bottom: 20px solid var(--heading-background-color); } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--entry-date-background-color); background: var(--entry-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: var(--entry-date-background-color); border: 0; font-size: var(--text-size); padding: 0.5em; color: var(--entry-date-color); text-transform: uppercase; line-height: 1; } /*------------ archive, tags, icons containers ------------*/ .tags-container, .icons-container { padding-bottom: 5px; } .page-month .month { margin-top: 5px; border-bottom: 20px solid var(--heading-background-color); } .month .header, .tags-container .header, .icons-container .header { background: var(--entry-title-background-color); text-align: center; margin-top: 5px; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.2em; font-family: var(--title-font); font-style: italic; font-weight: normal; line-height: 1; color: var(--entry-title-color); padding: 0.5em; margin: 0; } .month .contents, .tags-container .contents, .icons-container .contents { padding: 2em; } .month .footer, .tags-container .footer, .icons-container .footer { background: var(--heading-background-color); text-align: center; text-transform: uppercase; padding: 0.5em; line-height: 1; } .month .footer a, .tags-container .footer a, .icons-container .footer a { color: var(--heading-color); } /*------------ archive------------*/ .month caption { display: none; } table.month { margin: 0 auto; border-collapse: collapse; width: 100%; } table.month td { height: 3.25em; padding: 3px; text-align: center; } table.month tr { border: 1px solid var(--entry-date-background-color); border-right: none; border-left: none; } table.month tr:last-child { border-bottom: none; } table.month tr:first-child { border-top: none; } table.month th { border: none; padding: 0.5em; background: var(--entry-date-background-color); color: var(--entry-date-color); text-transform: uppercase; font-weight: normal; } table.month td.day-has-entries .label, table.month td p { display: inline-block; } table.month td p:before { content: "[ "; } table.month td p:after { content: " ]"; } .month dl { margin: 0; } .month dl dt { text-align: center; background: var(--entry-title-background-color); font-size: 1em; padding: 0.5em; font-family: var(--title-font); font-weight: normal; line-height: 1; } .month dl dt a { color: var(--entry-title-color); } .month dl .time { padding-right: 0.5em; } .month dl h3 { display: inline; font-size: 1em; } .page-month .month .entry-poster { margin-right: 0.5em; } .month dl .tag ul { margin-top: 0; } .month dd { margin: 2em; } .month dd br { display: block; } .day-date { display: none; } /*------------ tags ------------*/ ul.ljtaglist { padding: 0; margin-left: 1em; list-style: none; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } ul.ljtaglist li:before { content: "-"; padding-right: 4px; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .sorting-options ul { margin: 0; padding: 0.5em; text-align: center; color: var(--entry-date-color); background: var(--entry-date-background-color); line-height: 1; text-transform: uppercase; } .sorting-options a { color: var(--entry-date-color); } .sorting-options ul li { display: inline; } .sorting-options a { color: var(--entry-date-color); } .icon { border-top: 20px solid var(--heading-background-color); margin-top: 10px; overflow: hidden; } .icon-image { float: left; } .icon-image img { background: var(--heading-background-color); padding: 0 3px 3px; margin-right: 2em; } .icon-info { padding: 2em; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .page-icons .bottompages { text-align: center; font-family: var(--title-font); } .icon-pages p { margin: 0; padding: 0; } /*------------ modules ------------*/ @media (min-width: 800px) { .module-section-one { border-top: 1px solid var(--header-border-color); overflow: hidden; height: 2em; transition: all 0.4s ease; } .module-section-one:hover { height: 250px; border-bottom: 20px solid var(--heading-background-color); } .module-section-one .inner { display: flex; height: 250px; } .module-section-one .module { flex: 1; } } .module .module-header { font-size: 1em; text-transform: uppercase; background: var(--heading-background-color); padding: 0.5em; line-height: 1; margin: 0; color: var(--heading-color); font-weight: normal; text-align: center; } .module .module-header a, .module .module-header a:hover { color: var(--heading-color); } .module-section-one .module-content { padding: 1em; } @media (min-width: 800px) { .module-section-one .module-content { height: calc(100% - 2em); overflow: auto; box-sizing: border-box; } } .module-section-one .module-content ul { list-style: none; margin-left: 1em; padding: 0; } .module-content ul:first-child { margin: 0; } .module-section-one .module-content li { border-bottom: 1px solid var(--entry-date-background-color); margin-bottom: 3px; position: relative; } .module-section-one .module-content li:after { content: ""; position: absolute; display: block; height: 1px; width: 0; bottom: -1px; right: 0; background: var(--heading-background-color); transition: width 0.4s ease-in-out; } .module-section-one .module-content li:hover:after { width: 100%; left: 0; } .module-calendar .module-content { text-align: center; } .module-calendar table { margin: 0 auto; border-collapse: collapse; width: 100%; height: 100%; } .module-calendar th { background: var(--entry-title-background-color); color: var(--entry-title-color); font-weight: normal; } .tags_cloud li, .module-tags_cloud li { display: inline; } .module-customtext .module-content { font-style: italic; } .module-userprofile, .module-pagesummary, .module-cuttagcontrols, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered, .module .manage-link { display: none !important; } .module-section-header { border-bottom: 1px solid var(--header-border-color); background: var(--heading-background-color); } .module-navlinks ul { text-align: center; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-evenly; } .module-navlinks li { padding: 0.5em 1em; display: inline-block; text-transform: uppercase; line-height: 1; background-image: linear-gradient( var(--header-border-color), var(--header-border-color) ); background-size: 0% 1px; background-position-y: 0%; background-position-x: 100%; background-repeat: no-repeat; transition: background-size 0.4s ease-in-out; } .module-navlinks li:hover { background-size: 100% 1px; background-position-x: 0%; } .module-navlinks a { color: var(--heading-color); } .module-content::-webkit-scrollbar { width: 10px; height: 10px; } .module-content::-webkit-scrollbar-track { background: transparent; } .module-content::-webkit-scrollbar-thumb { background: var(--entry-title-background-color); border: 3px solid var(--entry-background-color); } .module-content::-webkit-scrollbar-corner { background: var(--entry-title-background-color); } /*------------ navigation ------------*/ .navigation { min-height: 5px; text-align: center; } .navigation ul { margin: 0; padding: 0; } .navigation li { display: inline-block; padding: 0.5em; line-height: 1; font-family: var(--title-font); } .topnav, .noentries, .navigation .page-separator { display: none; } /*------------ footer ------------*/ #footer { text-align: center; background: var(--heading-background-color); text-transform: uppercase; line-height: 1; padding: 0.5em; } #footer a { color: var(--heading-color); } #footer a:hover { color: var(--heading-color); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); padding: 0.5em; } div.ContextualPopup .Relation { font-size: 1em; border-top: 10px solid var(--heading-background-color); padding: 1em 1em 0; margin: 0; font-family: var(--title-font); font-weight: normal; } div.ContextualPopup .Userpic { border: none; margin: 10px 0 0; padding: 0 0 0 1em; } div.ContextualPopup .Userpic img { background: var(--heading-background-color); padding: 0 3px 3px; } .ContextualPopup .Actions ul { margin: 0; padding: 1em; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: transparent; justify-content: center; padding: 0.75em 0; color: var(--controlstrip-color); } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--controlstrip-color); } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { color: var(--controlstrip-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip input, #lj_controlstrip select { border: 0; background: var(--entry-background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { padding: 0.25em; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Average&family=Amita&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout".

RESOURCES

image from unsplash.com

comments

Candy

Sat, 18 Sep 2021 13:33:49 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

default icon, navigation links, links list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "1 Column (modules at top and bottom; no sidebar)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "text-only" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Modules" tab. Set "Profile" to number 1, "Navigation" to number 2, "Custom text" to number 3, "Links list" to number 4. Uncheck the other modules.
Click on the on "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". /*------------------------------------- - layout - candy (tabula rasa) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://material.io -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #57486a; --line-height: 1.5; --body-background-color: #f3ebf3; --link-color: #f260c7; --link-hover-color: #6394ed; --main-font: PT Sans, sans-serif; --title-font: Sirin Stencil, sans-serif; --gradient1-color: #e292c6; --gradient2-color: #92aee4; --title-gradient1-color: #f260c7; --title-gradient2-color: #6394ed; --entry-gradient1-color: #eab0d5; --entry-gradient2-color: #a3bbe9; --content-width: 800px; --entry-background-color: #faf8fa; --entry-border-color: #e7d8e7; --sidebar-link-color: #57486a; --sidebar-link-hover-color: #f260c7; --sidebar-icon-color: #f3ebf3; --customtext-height: 10.5em; } /*--------------- fonts ---------------*/ @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; src: url("https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format("woff2"); } /*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { font-family: var(--main-font); font-size: var(--text-size); padding: 0; margin: 0; line-height: var(--line-height); background-color: var(--body-background-color); background-image: url(); color: var(--text-color); } html body { margin-left: 0; margin-right: 0; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited, a:active { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { margin: 1.5em 0; padding-left: 1em; font-style: italic; border-left: 2px solid; border-image: linear-gradient( var(--entry-gradient1-color), var(--entry-gradient2-color) ) 1; } /*--------------- content ---------------*/ #canvas { margin: 20px auto; max-width: var(--content-width); } @media (min-width: 800px) { #canvas { padding: 0 70px; margin: 70px auto; } } @media (min-width: 1024px) { #canvas { padding: 0 240px; margin: 100px auto; } } /*--------------- header ---------------*/ #header { float: left; width: 100%; background: transparent; position: relative; z-index: 3; } #header > .inner:first-child { padding: 2em; text-align: center; line-height: 1.2; } h1#title { font-family: var(--title-font); font-size: 1.5em; font-weight: normal; margin: 0; padding: 0; } h1#title span { background-image: linear-gradient( 45deg, var(--title-gradient1-color), var(--title-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 0 0.25em; } h2#subtitle { font-size: 1em; padding: 0; margin: 0.5em 0 0; font-weight: normal; text-transform: lowercase; } h2#pagetitle { display: none; } /*------------ modules ------------*/ #secondary { margin-bottom: 20px; background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ) 1; padding-bottom: 0.5em; } #secondary .separator-after { clear: left; } .module-content ul { list-style: none; margin: 0; padding: 0; } .module-navlinks { margin: 1.5em 2em; } .module-navlinks li { text-transform: lowercase; display: inline-block; line-height: 1; margin-right: 0.5em; font-family: var(--title-font); } .module-navlinks li a:before { display: inline-block; font-family: Material Icons; font-size: 22px; margin-right: 0.25em; vertical-align: middle; line-height: 22px; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); -webkit-text-fill-color: transparent; background-clip: text, padding-box; -webkit-background-clip: text, padding-box; } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "today"; } .list-item-read a:before { content: "menu_book"; } .list-item-tags a:before { content: "style"; } .list-item-network a:before { content: "people_alt"; } .list-item-memories a:before { content: "star"; } .list-item-userinfo a:before { content: "person"; } .module-navlinks li a { color: var(--text-color); } .module-navlinks li a:hover { color: var(--link-color); } @media (min-width: 1024px) { .module-navlinks { width: 180px; margin: 0 0 0 -222px; top: 100px; position: fixed; text-align: right; padding: 0; } .module-navlinks li { display: block; margin-right: 0; margin-bottom: 0.5em; } .module-navlinks li a:before { display: none; } .module-navlinks li a:after { display: inline-block; font-family: Material Icons; font-size: 24px; margin-left: 0.75em; vertical-align: middle; height: 36px; width: 36px; line-height: 36px; text-align: center; color: var(--sidebar-icon-color); background-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 32px; transition: all 0.5s; } .module-navlinks li a:hover:after { text-shadow: 0 0 1px var(--sidebar-icon-color); } .list-item-recent a:after { content: "home"; } .list-item-archive a:after { content: "today"; } .list-item-read a:after { content: "menu_book"; } .list-item-tags a:after { content: "style"; } .list-item-network a:after { content: "people_alt"; } .list-item-memories a:after { content: "star"; } .list-item-userinfo a:after { content: "person"; } .module-navlinks li a { color: var(--sidebar-link-color); } .module-navlinks li a:hover { color: var(--sidebar-link-hover-color); } } .module-userprofile { text-align: center; } .module-userprofile .userpic { margin-bottom: 8px; } .module .userpic img { max-width: 50px; max-height: 50px; border: 3px solid transparent; padding: 2px; border-radius: 50%; background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient( -45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-origin: border-box; background-clip: padding-box, border-box; } .journal-name, .journal-website-name { line-height: 1; text-transform: lowercase; margin-bottom: 8px; display: inline; font-family: var(--title-font); color: var(--text-color); } .journal-name:before, .journal-website-name:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .journal-name:before { content: "account_circle"; } .journal-website-name:before { content: "public"; } @media (min-width: 1024px) { .module-userprofile { float: right; width: 180px; margin-top: -2px; margin-right: -220px; padding: 0; text-align: left; } .module .userpic img { max-width: 100px; max-height: 100px; border-width: 5px; background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); } .journal-name, .journal-website-name { margin-bottom: 8px; display: block; } .journal-name, .journal-website-name a { color: var(--sidebar-link-color); } .journal-website-name a:hover { color: var(--sidebar-link-hover-color); } .journal-name:before, .journal-website-name:before { background-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); } } .module-typelist { text-transform: lowercase; margin: 1.5em 2em; clear: left; } .module-typelist ul:before { content: "explore"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--icon-color); line-height: 0; margin-right: 0.25em; background: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .module-typelist li { display: inline; } .module-typelist li:after { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background: var(--entry-border-color); margin: 0 0.5em 0 0.75em; } .module-typelist li:last-child:after { display: none; } .module-typelist li a { color: var(--text-color); } .module-typelist li a:hover { color: var(--link-color); } .module-customtext { border: 1px solid var(--entry-border-color); margin: 0 0.5em; padding: 1.5em; clear: left; } .module-customtext .module-content { max-height: var(--customtext-height); overflow: auto; } @media (min-width: 800px) { .module-customtext { text-align: justify; } } .module-customtext .module-content::-webkit-scrollbar { width: 5px; height: 5px; } .module-customtext .module-content::-webkit-scrollbar-track { background: transparent; } .module-customtext .module-content::-webkit-scrollbar-thumb { background: var(--entry-border-color); } .module-customtext .module-content::-webkit-scrollbar-corner { background: var(--entry-border-color); } .module h2, ul.userlite-interaction-links, .module-calendar, .module-tags_list, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered, .module .manage-link { display: none; } /*--------------- entries ---------------*/ .entry { margin-bottom: 20px; background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ) 1; } @media (min-width: 800px) { .entry { margin: 70px 0; } } @media (min-width: 1024px) { .entry { margin: 100px 0; } } .entry .header, .comment .header { float: left; width: 100%; } .entry .header .inner, .comment .header .inner { padding: 2em; text-align: center; line-height: 1.2; } .entry .entry-title { font-family: var(--title-font); font-size: 1.5em; font-weight: normal; background-image: linear-gradient( 45deg, var(--title-gradient1-color), var(--title-gradient2-color) ); -webkit-text-fill-color: transparent; background-clip: text, padding-box; -webkit-background-clip: text, padding-box; display: table; margin: 0 auto; } .no-subject .entry .entry-title { background: none; border: none; } .admin-post-icon, .sticky-entry-icon { display: none; } .entry .datetime, .entry .datetime a, .comment .header .datetime { text-transform: lowercase; color: var(--text-color); } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; font-family: Material Icons; font-size: 22px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .security-private .access-filter:before { content: "visibility_off"; font-family: Material Icons; font-size: 22px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .restrictions-NSFW .restrictions:before { content: "warning"; font-family: Material Icons; font-size: 22px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .restrictions-18 .restrictions:before { content: "18+"; font-family: arial; font-size: 18px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .has-userpic .userpic { text-align: center; } .has-userpic .userpic img { max-width: 50px; max-height: 50px; width: auto; height: auto; border: 3px solid transparent; padding: 2px; border-radius: 50%; background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient( -45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-origin: border-box; background-clip: padding-box, border-box; } @media (min-width: 1024px) { .has-userpic .userpic { width: 180px; margin-top: -2px; margin-right: -220px; margin-left: 0; float: right; margin-left: 1em; margin-bottom: 8px; text-align: left; } .has-userpic .userpic img { max-width: 100px; max-height: 100px; border: 5px solid transparent; background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); } } .entry .poster, .full .comment .poster { font-family: var(--title-font); } .entry .poster { font-size: 0; text-align: center; display: block; line-height: 1; } .entry .poster a, .full .poster a { color: var(--text-color); } .entry .poster .ljuser { font-size: var(--text-size); margin-right: 0.25em; } .poster .ljuser:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 0.25em; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .poster .ljuser img { display: none; } .poster .ljuser { white-space: normal !important; } .poster .ljuser b { font-weight: normal; } .poster { word-wrap: break-word; } @media (min-width: 1024px) { .entry .poster, .full .comment .poster { float: right; width: 180px; margin-right: -220px; clear: right; text-align: left; color: var(--sidebar-link-color); } .entry .poster .ljuser { display: block; margin-bottom: 8px; } .entry .poster a, .full .poster a { color: var(--sidebar-link-color); } .entry .poster .ljuser:before, .full .poster .ljuser:before { background-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); } } .entry .poster .ljuser:nth-child(1):before, .full .poster .ljuser:before { content: "account_circle"; } .entry .poster .ljuser:nth-child(2):before { content: "public"; } .entry-content, .comment-content { border: 1px solid var(--entry-border-color); margin: 1.5em 0.5em; padding: 1.5em; clear: left; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action { display: flex; align-items: center; line-height: 1; } .cuttag-action img { display: none; } .cuttag-action:before { content: "content_cut"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 5px; background: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .cuttag-action:after { content: ""; height: 0; width: 100%; border-bottom: 1px dashed var(--entry-border-color); } .cut-open, .cut-close { display:none; } .cut-text{ text-transform: lowercase; font-weight: normal; margin-left: 27px; display: block; } .metadata { padding: 0 2em; } .metadata ul { list-style: none; margin: 0; padding: 0; } .metadata li { display: inline; margin-right: 0.5em; } .metadata-label { display: none; } .metadata li img { vertical-align: middle; } #metadata-music:before { content: "library_music"; font-family: Material Icons; font-size: 22px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #metadata-mood:before { content: "sentiment_satisfied_alt"; font-family: Material Icons; font-size: 22px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #metadata-location:before { content: "location_on"; font-family: Material Icons; font-size: 22px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #metadata-xpost:before { content: "add_location"; font-family: Material Icons; font-size: 22px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .tag-text { display: none; } .tag-nav-trigger { vertical-align: middle; } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; color: transparent; } .tag ul li:after { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background: var(--entry-border-color); margin: 0 0.5em; } .tag ul li:last-child:after { display: none; } div.tag:before { content: "loyalty"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--icon-color); background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-right: 0.25em; } ul.entry-management-links, ul.entry-interaction-links { margin: 0; padding: 0; display: inline; text-transform: lowercase; } ul.entry-management-links a, ul.entry-interaction-links a { color: var(--text-color); } ul.entry-management-links a:hover, ul.entry-interaction-links a:hover { color: var(--link-color); } ul.entry-management-links li { display: inline; margin-right: 0.5em; } ul.entry-management-links li a:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 0.25em; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link_prev a:before { content: "arrow_back"; } .edit_entry a:before { content: "edit"; } .edit_tags a:before { content: "local_offer"; } .mem_add a:before { content: "favorite"; } .tell_friend a:before { content: "share"; } .watch_comments a:before { content: "notification_important"; } .link_next a:before { content: "arrow_forward"; } ul.entry-interaction-links li { display: inline; margin-right: 0.5em; } ul.entry-interaction-links li a:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 0.25em; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } li.entry-permalink a:before { content: "launch"; } li.entry-readlink a:before { content: "question_answer"; } li.entry-replylink a:before { content: "add_comment"; } .entry .footer, .comment .footer { padding: 0 2em 2em; text-transform: lowercase; } /*--------------- comments ---------------*/ .comment-pages { color: var(--sidebar-link-color); font-family: var(--title-font); } .comment-pages a { color: var(--sidebar-link-color); } .comment-pages a:hover { color: var(--sidebar-link-hover-color); } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .comment { margin: 20px 0; background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ) 1; clear: both; } .page-reply .full .comment { margin-top: 0; } @media (min-width: 800px) { .comment { margin: 50px 0; } } .comment .header .inner { padding-top: 2em; line-height: 1.2; } .comment .comment-title { margin: 0; padding: 0; } .full .comment .comment-title { font-family: var(--title-font); font-size: 1.2em; font-weight: normal; text-shadow: 0 0.75em 0 var(--title-shadow-color); background-image: linear-gradient( 45deg, var(--title-gradient1-color), var(--title-gradient2-color) ); -webkit-text-fill-color: transparent; background-clip: text, padding-box; -webkit-background-clip: text, padding-box; display: table; margin: 0 auto; padding: 0.25em 0; } .no-subject .comment .comment-title { background: none; border: none; margin: 0; padding: 0; } .comment-from-text, .comment-date-text, .comment-ip-text { display: none; } .full .poster, .poster-ip { text-align: center; display: block; line-height: 1; } .comment-pages { text-align: center; } .comment-pages.bottompages { display: none; } .comment .footer { padding: 0 2em 2em; } .multiform-checkbox { display: inline; margin-right: 0.5em; } ul.comment-management-links, ul.comment-interaction-links { display: inline; margin: 0; padding: 0; text-transform: lowercase; } ul.comment-management-links li, ul.comment-interaction-links li { display: inline; padding: 0; margin-right: 0.5em; } .partial .comment { padding: 2em; } .bottomcomment { color: var(--sidebar-link-color); margin: 20px 0; } #comments ul.entry-interaction-links, #comments ul.entry-management-links { display: none; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { margin-top: 1.5em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--entry-border-color); background: var(--entry-background-color); color: var(--text-color); font-size: var(--text-size); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: var(--text-size); padding: 0.5em; color: var(--link-color); font-family: var(--title-font); line-height: 1; } #postform { padding: 2em; margin: 20px 0; background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ) 1; } @media (min-width: 800px) { #postform { margin: 100px 0; } } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { margin-bottom: 20px; background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ) 1; } @media (min-width: 800px) { .month-wrapper, #archive-month, .tags-container, .icons-container { margin: 70px 0; } } @media (min-width: 1024px) { .month-wrapper, #archive-month, .tags-container, .icons-container { margin: 100px 0; } } .month .header, .tags-container .header, .icons-container .header { text-align: center; padding-top: 2em; padding-bottom: 1.5em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-family: var(--title-font); font-size: 1.5em; font-weight: normal; line-height: 1; background: linear-gradient( 45deg, var(--title-gradient1-color), var(--title-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: table; margin: 0 auto; } .month .contents, .tags-container .contents, .icons-container .contents { margin: 0.5em; } .month .footer, #primary .manage-link { margin-top: 1.5em; padding: 0 2em 2em; text-transform: lowercase; } .footer a, #primary .manage-link a { color: var(--text-color); } .footer a:hover, #primary .manage-link a:hover { color: var(--link-color); } /*------------ archive ------------*/ .month caption { display: none; } .month table { width: 100%; text-align: center; } table.month { margin: 0 auto; border-collapse: collapse; text-align: center; } table.month td, table.month th { max-width: 0; padding: 0.25em; border: 1px solid var(--entry-border-color); } table.month td p { margin: 0; display: inline; } table.month td p:before { content: "( "; } table.month td p:after { content: " )"; } .page-month .month { padding: 0.5em; } .month dl { margin: 0; } .month dl dt { font-family: var(--title-font); font-size: 1.2em; line-height: 1; background: linear-gradient( 45deg, var(--title-gradient1-color), var(--title-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: table; margin: 0 auto; padding: 1em 0; } .month dl .time { padding-right: 0.5em; } .month dl h3 { display: inline; font-size: 1em; } .page-month .month .entry-poster { margin-right: 0.5em; } .month dd { margin: 0; padding: 1.5em; border: 1px solid var(--entry-border-color); } .month dd br { display: block; } #archive-year .navigation ul { margin-bottom: 20px; } @media (min-width: 800px) { #archive-year .navigation ul { margin: 100px 0; } } #archive-year .navigation li { display: inline-block; width: 3em; height: 3em; line-height: 3em; color: var(--sidebar-icon-color); border-radius: 50%; background-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); margin: 5px; } #archive-year .navigation li a { color: var(--sidebar-icon-color); } #archive-year .navigation li a:hover { text-shadow: 0 0 1px var(--sidebar-icon-color); } #archive-year .navigation li.active { font-weight: bold; } #archive-month .navigation ul { padding: 1em 2em 2em; } #archive-month .navigation li { display: inline; } .day-date { display: none; } /*------------ tags ------------*/ .tags-container .contents { padding: 1.5em; border: 1px solid var(--entry-border-color); } ul.ljtaglist { padding: 0; margin-left: 1em; } ul.ljtaglist:first-child, .tags_cloud ul { list-style-position: inside; padding: 0; margin: 0; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .page-icons .bottompages { text-align: center; margin: 2em; } .icon { border: 1px solid var(--entry-border-color); margin-top: 0.5em; display: flex; } .icon-image { border-right: 1px solid var(--entry-border-color); padding: 0.5em; } .icon-image img { display: block; } .icon-info { text-transform: lowercase; padding: 1.5em; } .icon-info div span { font-style: normal; } .default.label { font-size: 0; } .default.label:before { content: "star"; font-family: Material Icons; font-size: 22px; font-style: normal; vertical-align: top; line-height: 22px; background: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .sorting-options ul { margin: 0; padding: 0; text-align: center; } .sorting-options ul li { display: inline; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*--------------- navigation ---------------*/ .topnav { display: none; } .navigation { text-transform: lowercase; text-align: center; } .navigation ul { margin: 0; padding: 0; } #entries .navigation ul { line-height: 1; text-align: right; margin-right: 20px; font-family: var(--title-font); } @media (min-width: 1024px) { #entries .navigation ul { position: fixed; width: 180px; margin-left: -220px; margin-bottom: 36px; margin-right: 0; bottom: 100px; } } #entries .navigation li { display: block; margin-bottom: 8px; list-style: none; } #entries .navigation li a { color: var(--sidebar-link-color); } #entries .navigation li a:hover { color: var(--sidebar-link-hover-color); } #entries .navigation li a:after { display: inline-block; font-family: Material Icons; font-size: 22px; margin-left: 0.75em; vertical-align: middle; height: 36px; width: 36px; line-height: 36px; text-align: center; color: var(--sidebar-icon-color); background: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 36px; transition: all 0.5s; } #entries .navigation li a:hover:after { text-shadow: 0 0 1px var(--sidebar-icon-color); } li.page-back a:after { content: "arrow_back"; } li.page-forward a:after { content: "arrow_forward"; } li.page-separator { display: none !important; } .noentries { display: none; } /*--------------- footer ---------------*/ #footer { text-align: right; text-transform: lowercase; line-height: 1; margin-right: 20px; font-family: var(--title-font); } @media (min-width: 1024px) { #footer { position: fixed; width: 180px; margin-left: -220px; margin-right: 0; bottom: 100px; height: 36px; } } #footer a { color: var(--sidebar-link-color); } #footer a:hover { color: var(--sidebar-link-hover-color); } .page-top a:after { content: "arrow_upward"; display: inline-block; font-family: Material Icons; font-size: 22px; margin-left: 0.75em; vertical-align: middle; height: 36px; width: 36px; line-height: 36px; text-align: center; color: var(--sidebar-icon-color); background: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 32px; transition: all 0.5s; } .page-top a:hover:after { text-shadow: 0 0 1px var(--sidebar-icon-color); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); padding: 0.5em; width: 200px; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; text-align: center; margin-top: 1em; } div.ContextualPopup .Userpic { border: 0; float: none; text-align: center; padding-top: 1em; } div.ContextualPopup .Userpic img { border: 5px solid transparent; padding: 2px; border-radius: 50%; background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient( -45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-origin: border-box; background-clip: padding-box, border-box; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 1em; border: 1px solid var(--entry-border-color); } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--entry-background-color); color: var(--text-color); justify-content: center; padding: 0.75em 0; border-bottom: 2px solid; border-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ) 1; z-index: 9; } @media (min-width: 800px) { #lj_controlstrip { transform: translateY(-100%); position: fixed; transition: transform 0.7s; } #lj_controlstrip:before { content: ""; position: absolute; bottom: -46px; height: 46px; width: 36px; right: 10px; } #lj_controlstrip:after { font-family: "Material Icons"; content: "more_horiz"; font-size: 24px; position: absolute; bottom: -46px; height: 36px; width: 36px; right: 10px; cursor: pointer; line-height: 36px; text-align: center; color: var(--sidebar-icon-color); background-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 36px; } #lj_controlstrip:hover { transform: translateY(0); } } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: 1.5; padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--entry-border-color); background: var(--entry-background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { border: 0; background: transparent; font-size: var(--text-size); color: var(--text-color); font-family: var(--main-font); padding: 0.25em; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a img { border: 3px solid transparent; padding: 1px; border-radius: 50%; background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient( -45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-origin: border-box; background-clip: padding-box, border-box; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=PT+Sans&family=Sirin+Stencil&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout".

RESOURCES

icon font by Google

comments

String of beads

Mon, 03 May 2021 14:53:35 GMT

Posted by: rosecarmine

LIVE PREVIEWLIVE PREVIEW

FEATURES

default icon, navigation links, links list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "1 Column (modules at top and bottom; no sidebar)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "icons" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Modules" tab. Set "Profile" to number 1, "Navigation" to number 2, "Custom text" to number 3, "Links list" to number 4. Uncheck the other modules.
Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)".
Ver. 1 /*------------------------------------- - layout - string of beads (tabula rasa) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://material.io - background - Davidzydd - https://www.freepik.com -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #0e3358; --line-height: 1.5; --background-color: #d1e1e4; --link-color: #008acc; --link-hover-color: #0e3358; --main-font: Open Sans, sans-serif; --title-font: Shadows Into Light Two, sans-serif; --title-color: #d1e1e4; --title-shadow-color: #0e3358; --entry-width: 1000px; --border-color: #0e3358; --sidebar-background-image: url(https://rosecarmine.dreamwidth.org/file/100758.jpg); --sidebar-background-color: #2d7aa4; --sidebar-width: 450px; --sidebar-icon-color: #d1e1e4; --sidebar-icon-hover-color: #eff4f5; --sidebar-link-color: #d1e1e4; --sidebar-link-background-color: #0e3358; --customtext-background-color: rgba(14, 51, 88, 0.7); --customtext-text-color: #d1e1e4; --customtext-link-color: #d1e1e4; --customtext-link-hover-color: #d1e1e4; --entry-background-color: #eff4f5; --blockquote-background-color: #2d7aa4; --blockquote-text-color: #eff4f5; --blockquote-link-color: #eff4f5; --blockquote-link-hover-color: #eff4f5; --shadow-color: rgba(0, 0, 0, 0.6); } /*--------------- fonts ---------------*/ @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; src: url("https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format("woff2"); } /*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { font-family: var(--main-font); font-size: var(--text-size); padding: 0; margin: 0; line-height: var(--line-height); background-color: var(--background-color); color: var(--text-color); } html body { margin-left: 0; margin-right: 0; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited, a:active { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } .entry blockquote, .comment blockquote { background: var(--blockquote-background-color); color: var(--blockquote-text-color); padding: 1em; margin: 1em 0 50px; position: relative; border-radius: 10px; } .entry blockquote:before, .comment blockquote:before { content: ""; position: absolute; bottom: -30px; left: 25px; padding: 10px; border-radius: 50px; background: var(--blockquote-background-color); } .entry blockquote:after, .comment blockquote:after { content: ""; position: absolute; bottom: -40px; left: 45px; padding: 5px; border-radius: 50px; background: var(--blockquote-background-color); } blockquote a { color: var(--blockquote-link-color); border-bottom: 2px dotted var(--blockquote-text-color); } blockquote a:hover { color: var(--blockquote-link-hover-color); } /*--------------- header ---------------*/ #header { position: relative; float: left; width: 100%; text-align: center; font-family: var(--title-font); z-index: 2; text-shadow: 1px 1px 2px var(--title-shadow-color), -1px -1px 2px var(--title-shadow-color); } #header > .inner { padding: 2em 2em 20px; } @media (min-width: 800px) { #header > .inner { padding: 70px 70px 20px; } } @media (min-width: 1124px) { #header { top: 0; left: 0; position: fixed; width: var(--sidebar-width); } #header > .inner { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 60px 0 50px; height: 200px; } } h1#title { font-size: 1.5em; margin: 0; color: var(--title-color); font-style: italic; } h1#title a { color: inherit; } h2#subtitle { font-size: 1em; margin: 0; color: var(--title-color); border-top: 2px dotted var(--border-color); } h2#pagetitle { display: none; } /*--------------- content ---------------*/ #canvas { margin-bottom: 20px; } @media (min-width: 1124px) { #content { border-left: var(--sidebar-width) solid transparent; max-width: var(--entry-width); } } #primary { margin: 40px 0 20px; } @media (min-width: 800px) { #canvas { margin-bottom: 70px; } #primary { margin: 90px 70px 20px; } } @media (min-width: 1124px) { #primary { margin: 70px; } #primary > .inner:first-child { padding-left: 50px; } } /*--------------- entries ---------------*/ .entry, .full .comment { box-shadow: 0 0 2px var(--shadow-color); margin: 20px 0; } .entry > .inner:first-child, .full .comment > .inner:first-child { background: var(--entry-background-color); padding: 2em; } @media (min-width: 800px) { .entry, .full .comment { background-image: var(--sidebar-background-image); background-color: var(--sidebar-background-color); padding-right: 60px; box-shadow: 0 0 2px var(--shadow-color); margin: 70px 0; } .entry > .inner:first-child, .full .comment > .inner:first-child { border-right: 20px solid var(--border-color); box-shadow: inset -8px 0 3px -6px var(--shadow-color); } } .entry .header, .comment .header { margin-bottom: 2em; } .entry .header .inner, .comment .header .inner { border-bottom: 2px dotted var(--border-color); padding-bottom: 1em; } .entry .entry-title { margin: 0; padding: 0 0 0.5em; font-family: var(--title-font); font-style: italic; font-weight: normal; font-size: 1.5em; line-height: 1; } .admin-post-icon, .sticky-entry-icon { display: none; } .header a, .metadata a, .footer a { color: var(--text-color); } .header a:hover, .metadata a:hover, .footer a:hover { color: var(--link-color); } .no-subject .entry .entry-title { background: none; border: none; padding: 0; } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; font-family: Material Icons; font-size: 22px; vertical-align: middle; } .security-private .access-filter:before { content: "visibility_off"; font-family: Material Icons; font-size: 22px; vertical-align: middle; } .restrictions-NSFW .restrictions:before { content: "warning"; font-family: Material Icons; font-size: 22px; vertical-align: middle; } .restrictions-18 .restrictions:before { content: "18+"; font-size: 16px; font-family: arial, sans-serif; font-weight: bold; vertical-align: middle; } .has-userpic .userpic { float: right; shape-outside: circle(50%) padding-box; padding-left: 1em; } .has-userpic .userpic img { border: 5px solid var(--border-color); background: var(--border-color); display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border-radius: 50%; box-shadow: 0 0 2px var(--shadow-color); } @media (min-width: 800px) { .has-userpic .userpic { width: 120px; margin-right: calc(-70px - 2em); } .has-userpic .userpic img { max-width: 100px; max-height: 100px; width: auto; height: auto; border: 10px solid var(--border-color); box-shadow: -2px 0 2px var(--shadow-color); margin: 0 auto; } } .entry .poster { font-size: 0; } .entry .poster .ljuser { font-size: var(--text-size); padding-right: 0.25em; } .entry .poster:before { content: "Written by "; font-size: var(--text-size); } .entry .poster .ljuser:nth-child(2):before { content: "in "; } .poster.empty { display: none; } .poster .ljuser img { display: none; } .ljuser b { font-weight: normal; } .entry-content, .comment-content { margin: 2em 0; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action { display: flex; align-items: center; line-height: 1; } .cuttag-action img { display: none; } .cuttag-action:before { content: "content_cut"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--text-color); } .cuttag-action:after { content: ""; height: 0; width: 100%; border-bottom: 1px dashed var(--border-color); } .cut-open, .cut-close { display:none; } .cut-text{ font-weight: normal; margin-left: 27px; display: block; } .metadata li { line-height: 1.2; margin-bottom: 0.5em; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata-label { display: none; } .metadata img { vertical-align: middle; } #metadata-music:before { content: "speaker"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } #metadata-mood:before { content: "sentiment_satisfied_alt"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } #metadata-location:before { content: "location_on"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } #metadata-xpost:before { content: "add_location"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } .entry .tag { margin-bottom: 0.5em; line-height: 1.2; } .tag-text { display: none; } .tag ul { display: inline; margin-left: 0; padding-left: 0; } .tag ul li { display: inline; } .tag:before { content: "loyalty"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } .tag-nav-trigger { vertical-align: middle; } ul.entry-management-links { margin: 0; padding: 0; float: left; } ul.entry-management-links li { display: inline; margin-right: 5px; } ul.entry-management-links li a img { display: none; } ul.entry-management-links.icon-links li a:before { font-family: Material Icons; font-size: 22px; line-height: 22px; } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "add_alert"; } .icon-links .link_next a:before { content: "arrow_forward"; } ul.entry-interaction-links li { display: inline; margin-left: 0.5em; } ul.entry-interaction-links { margin: 0; padding: 0; float: right; } .footer:after { content: ""; display: block; clear: both; } /*------------ comments ------------*/ .comment-pages { background: var(--entry-background-color); padding: 1em; text-align: center; box-shadow: 0 0 2px var(--shadow-color); margin: 10px 0; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .full .thread-depth { display: block; line-height: 1; margin-bottom: 1em; } .comment .comment-title { margin: 0; font-weight: normal; } .full .comment .comment-title { padding: 0 0 0.5em; font-family: var(--title-font); font-style: italic; font-weight: normal; font-size: 1.5em; line-height: 1; } .comment-date-text { display: none; } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .poster-ip { display: block; } .partial { background: var(--entry-background-color); box-shadow: 0 0 2px var(--shadow-color); padding: 1em; margin: 20px 0; } .multiform-checkbox { margin-right: 0.5em; float: left; } .multiform-checkbox input { vertical-align: top; } ul.comment-management-links { margin: 0; padding: 0; float: right; } ul.comment-management-links li { display: inline-block; margin-left: 5px; } ul.comment-management-links.icon-links li { width: 22px; overflow: hidden; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a:before { font-family: Material Icons; font-size: 22px; line-height: 22px; } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } ul.comment-interaction-links li { display: inline; margin-right: 0.5em; } ul.comment-interaction-links { margin: 0; padding: 0; float: left; } .comment-pages.bottompages, #comments ul.entry-interaction-links, #comments ul.entry-management-links { display: none; } .bottomcomment { background: var(--entry-background-color); text-align: center; box-shadow: 0 0 2px var(--shadow-color); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { padding-top: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--border-color); background: var(--entry-background-color); color: var(--text-color); font-family: var(--main-font); font-size: var(--text-size); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: var(--text-size); font-family: var(--title-font); padding: 0.5em; color: var(--link-color); line-height: 1; } #postform { padding: 2em; background: var(--entry-background-color); box-shadow: 0 0 2px var(--shadow-color); } /*------------ archive, tags, icons containers------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); margin: 20px 0; } .month-wrapper .month > .inner:first-child, .tags-container > .inner:first-child, .icons-container > .inner:first-child, #archive-month > .inner:first-child { background: var(--entry-background-color); padding: 2em; } @media (min-width: 800px) { .month-wrapper, #archive-month, .tags-container, .icons-container { background: var(--sidebar-background-image); padding-right: 60px; margin: 70px 0; } .month-wrapper .month > .inner:first-child, .tags-container > .inner:first-child, .icons-container > .inner:first-child, #archive-month > .inner:first-child { border-right: 20px solid var(--border-color); box-shadow: inset -8px 0 3px -6px var(--shadow-color); } } .month .header, .tags-container .header, .icons-container .header { margin-bottom: 2em; border-bottom: 2px dotted var(--border-color); padding-bottom: 1em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { padding: 0; font-family: var(--title-font); font-style: italic; font-weight: normal; font-size: 1.5em; line-height: 1; } .month .footer, #primary .manage-link { border-top: 2px dotted var(--border-color); margin-top: 2em; padding-top: 1em; } /*------------ archive------------*/ table.month { margin: 0 auto; border-spacing: 3px; text-align: center; } table.month td { width: 2em; height: 2em; } table.month th { padding: 3px; background: var(--blockquote-background-color); color: var(--blockquote-text-color); font-family: var(--title-font); font-weight: normal; width: 2em; border-radius: 4px; } table.month td p { margin: 0; padding: 3px; } table.month td.day-has-entries { position: relative; } .day.day-has-entries .label { border: 1px solid var(--border-color); display: block; border-radius: 50px; width: 2em; height: 2em; line-height: 2em; } table.month .day-has-entries p { left: 0; top: 0; position: absolute; z-index: 9; } table.month .day-has-entries p a { color: transparent; padding: 1em; } .month dl { margin: 0; } .month dl dt { border-bottom: 1px dotted var(--border-color); font-family: var(--title-font); font-size: 1em; padding-bottom: 1em; font-style: italic; } .month dl dt a { color: var(--text-color); } .month dl dt a:hover { color: var(--link-color); } .month dl .time { padding-right: 0.5em; } .month dl h3 { display: inline; font-size: 1em; } .page-month .month .entry-poster { margin-right: 0.5em; } .month dl .tag ul { margin-top: 0; } .month dd { margin: 1em 0 0; } .day-date { display: none; } .month caption { display: none; } #archive-year .navigation li a, #archive-year li.active { display: inline-block; height: 50px; width: 50px; background: var(--border-color); line-height: 50px; border-radius: 50px; text-align: center; color: var(--sidebar-icon-color); box-shadow: 0 0 2px var(--shadow-color); margin: 0 5px; } #archive-year .navigation li a:hover, #archive-year li.active { color: var(--sidebar-icon-hover-color); } #archive-year .navigation li a:hover { transform: rotate(360deg); } /*------------ tags ------------*/ ul.ljtaglist { list-style-position: inside; padding: 0; margin-left: 1em; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0 0 1em; padding: 0; } .sorting-options ul li { display: inline; } .icon { border-top: 2px dotted var(--border-color); border-bottom: 2px dotted var(--border-color); padding: 1em 0; margin: 1em 0; display: flex; } .icon-image { margin-right: 1em; } .icon-image img { display: block; } .default.label { font-size: 0; } .default.label:before { content: "star"; font-family: Material Icons; font-size: 22px; font-style: normal; vertical-align: top; line-height: 22px; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } .keywords-label, .comment-text, .description-text { font-weight: bold; } /*------------ modules ------------*/ #secondary { background-image: var(--sidebar-background-image); background-color: var(--sidebar-background-color); border-bottom: 20px solid var(--border-color); box-shadow: 0 2px 2px var(--shadow-color); position: relative; } @media (min-width: 1124px) { #secondary { position: fixed; left: 0; top: 0; width: var(--sidebar-width); height: 100%; border-right: 20px solid var(--border-color); border-bottom: 0; box-shadow: 2px 0 2px var(--shadow-color); z-index: 1; } } .module-section-one { clear: left; } .module-section-one { padding: 0 2em 50px; } @media (min-width: 800px) { .module-section-one { padding: 0 70px 70px; } } @media (min-width: 1124px) { .module-section-one { padding: 200px 60px 0 50px; } .module-section-one .inner { display: flex; flex-direction: column; min-height: 0; height: calc(100vh - 200px); padding-bottom: 50px; box-sizing: border-box; } } .module-content ul { list-style: none; margin: 0; padding: 0; } .module .userpic img { display: block; border: 5px solid var(--border-color); border-radius: 50%; max-width: 70px; max-height: 70px; width: auto; height: auto; margin: 0 auto; } @media (min-width: 800px) { .module-userprofile { width: 120px; height: 120px; position: absolute; bottom: -70px; left: 70px; display: flex; align-items: center; } .module .userpic img { border: 10px solid var(--border-color); max-width: 100px; max-height: 100px; box-shadow: 0 2px 2px var(--shadow-color); background: var(--border-color); } } @media (min-width: 1124px) { .module-userprofile { top: 80px; right: -70px; left: auto; bottom: auto; } .module .userpic img { box-shadow: 2px 0 2px var(--shadow-color); } } .module-navlinks { position: absolute; left: 2em; bottom: -30px; text-align: center; } @media (min-width: 800px) { .module-navlinks { left: 190px; } } .module-navlinks li { float: left; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--border-color); box-shadow: 0 2px 2px var(--shadow-color); margin-left: 2px; } @media (min-width: 1124px) { .module-navlinks { width: 40px; top: 200px; right: -30px; left: auto; bottom: auto; } .module-navlinks li { float: none; box-shadow: 2px 0 2px rgba(0, 0, 0, 0.4); margin: 2px auto; } } .module-navlinks li a { color: var(--sidebar-icon-color); } .module-navlinks li a:hover { color: var(--sidebar-icon-hover-color); } .module-navlinks li a:before { display: block; font-family: Material Icons; font-size: 22px; vertical-align: middle; height: 40px; width: 40px; line-height: 40px; } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "date_range"; } .list-item-read a:before { content: "rss_feed"; } .list-item-tags a:before { content: "style"; } .list-item-network a:before { content: "language"; } .list-item-memories a:before { content: "star"; } .list-item-userinfo a:before { content: "info"; } .module-typelist { margin-top: 10px; padding-top: 10px; border-top: 2px dotted var(--border-color); } .module-typelist ul { display: flex; flex-wrap: wrap; margin: -2px; } .module-typelist li { flex-grow: 1; text-align: center; line-height: 1; } @media (min-width: 1124px) { .module-typelist li { min-width: 50%; } } .module-typelist li a { background: var(--sidebar-link-background-color); margin: 2px; font-style: italic; color: var(--sidebar-link-color); display: block; padding: 0.5em; } .module-typelist li a:first-letter { font-family: var(--title-font); } .module-typelist li a:hover { background: var(--customtext-background-color); color: var(--customtext-link-color); backdrop-filter: blur(1px); } .module-customtext { margin-top: 20px; background: var(--customtext-background-color); backdrop-filter: blur(1px); padding: 1em; color: var(--customtext-text-color); } .module-customtext .module-content { max-height: 10em; overflow: auto; } @media (min-width: 1124px) { .module-customtext { overflow: hidden; } .module-customtext .module-content { max-height: 100%; } } .module-customtext a { color: var(--customtext-link-color); border-bottom: 2px dotted var(--customtext-text-color); } .module-customtext a:hover { color: var(--customtext-link-hover-color); } .module-customtext .module-content::-webkit-scrollbar { width: 5px; height: 5px; } .module-customtext .module-content::-webkit-scrollbar-track { background: transparent; } .module-customtext .module-content::-webkit-scrollbar-thumb { background: var(--customtext-link-color); } .module-customtext .module-content::-webkit-scrollbar-corner { background: var(--customtext-link-color); } .module h2, .module-calendar, .journal-website-name, .journal-name, ul.userlite-interaction-links, .module-tags_list, .module-tags_multilevel, .module-tags_cloud, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered, .module .manage-link { display: none; } /*--------------- navigation ---------------*/ .navigation .page-separator, .topnav { display: none; } .navigation ul { margin: 0; padding: 0; text-align: center; } .navigation li { display: inline; } #entries .navigation li { display: inline-block; width: 40px; height: 40px; overflow: hidden; background: var(--border-color); border-radius: 50%; box-shadow: 0 0 2px var(--shadow-color); margin: 0 10px; } #entries .navigation li a { color: var(--sidebar-icon-color); } #entries .navigation li a:hover { color: var(--sidebar-icon-hover-color); } #entries .navigation li a:before { display: block; font-family: Material Icons; font-size: 22px; height: 40px; width: 40px; line-height: 40px; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } @media (min-width: 1124px) { #entries .navigation ul { position: fixed; left: var(--sidebar-width); margin-left: -50px; bottom: 65px; width: 120px; z-index: 3; } #entries .navigation li { display: block; margin: 2px auto; box-shadow: 2px 0 2px var(--shadow-color); } } li.page-separator { display: none !important; } .noentries { display: none; } /*------------ footer ------------*/ #footer { text-align: center; margin-bottom: 25px; } .page-top { width: 40px; height: 40px; background: var(--border-color); border-radius: 50%; box-shadow: 0 0 2px var(--shadow-color); overflow: hidden; margin: 0 auto; } @media (min-width: 1124px) { #footer { position: fixed; left: var(--sidebar-width); bottom: 0; margin-left: -50px; width: 120px; height: 40px; z-index: 3; } .page-top { box-shadow: 2px 0 2px var(--shadow-color); } } .page-top a { color: var(--sidebar-icon-color); } .page-top a:hover { color: var(--sidebar-icon-hover-color); } .page-top a:before { content: "arrow_upward"; display: block; font-family: Material Icons; font-size: 22px; height: 40px; width: 40px; line-height: 40px; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); padding: 1em; width: 180px; border-radius: 0; text-align: center; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; margin: 0; padding: 1em 0; } div.ContextualPopup .Userpic { border: 0; float: none; margin: 0; } div.ContextualPopup .Userpic img { border: 5px solid var(--border-color); border-radius: 50%; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 1em 0 0; border-top: 2px dotted var(--border-color); } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--entry-background-color); color: var(--text-color); justify-content: center; padding: 0.75em 0; border-bottom: 5px solid var(--border-color); z-index: 9; box-shadow: 0 2px 0 var(--shadow-color); transform: translateY(-100%); position: absolute; transition: transform 0.7s; z-index: 9; } #lj_controlstrip:before { content: ""; position: absolute; bottom: -65px; height: 60px; width: 40px; right: 10px; } #lj_controlstrip:after { font-family: "Material Icons"; content: "settings"; font-size: 22px; position: absolute; bottom: -65px; height: 40px; width: 40px; right: 10px; cursor: pointer; line-height: 40px; text-align: center; background: var(--border-color); color: var(--sidebar-icon-color); border-radius: 50%; background-clip: padding-box; box-shadow: 0 0 2px var(--shadow-color); } #lj_controlstrip:hover { transform: translateY(0); } @media (min-width: 1124px) { #lj_controlstrip { position: fixed; } #lj_controlstrip:before { left: var(--sidebar-width); right: auto; margin-left: -10px; } #lj_controlstrip:after { left: var(--sidebar-width); right: auto; margin-left: -10px; box-shadow: 2px 0 2px var(--shadow-color); } } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: 1.5; padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--border-color); background: var(--entry-background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { border: 0; background: transparent; font-size: var(--text-size); color: var(--text-color); font-family: var(--title-font) !important; padding: 0.25em; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a img { border: 3px solid var(--border-color); border-radius: 50%; }Ver. 2 /*------------------------------------- - layout - string of beads (tabula rasa) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://material.io - background - nenilkime - https://www.freepik.com -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #213431; --line-height: 1.5; --background-color: #deefec; --link-color: #069aa2; --link-hover-color: #29413d; --main-font: Open Sans, sans-serif; --title-font: Shadows Into Light Two, sans-serif; --title-color: #fbfdfd; --title-shadow-color: #26575b; --entry-width: 1000px; --border-color: #26575b; --header-background-image: url(https://rosecarmine.dreamwidth.org/file/96950.jpg); --header-background-color: #abdad0; --header-icon-color: #fbfdfd; --header-icon-hover-color: #ffff99; --header-link-color: #213431; --header-link-background-color: #68b7b1; --customtext-background-color: #abdad0; --customtext-text-color: #213431; --customtext-link-color: #ffff99; --customtext-link-hover-color: #fbfdfd; --customtext-height: 10em; --entry-background-color: #fbfdfd; --blockquote-background-color: #abdad0; --blockquote-text-color: #213431; --blockquote-link-color: #ffff99; --blockquote-link-hover-color: #fbfdfd; --shadow-color: rgba(0, 0, 0, 0.5); } /*--------------- fonts ---------------*/ @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; src: url("https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format("woff2"); } /*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { font-family: var(--main-font); font-size: var(--text-size); padding: 0; margin: 0; line-height: var(--line-height); background-color: var(--background-color); color: var(--text-color); } html body { margin-left: 0; margin-right: 0; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited, a:active { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } .entry blockquote, .comment blockquote { background: var(--blockquote-background-color); color: var(--blockquote-text-color); padding: 1em; margin: 1em 0 50px; position: relative; border-radius: 10px; } .entry blockquote:before, .comment blockquote:before { content: ""; position: absolute; bottom: -30px; left: 25px; padding: 10px; border-radius: 50px; background: var(--blockquote-background-color); } .entry blockquote:after, .comment blockquote:after { content: ""; position: absolute; bottom: -40px; left: 45px; padding: 5px; border-radius: 50px; background: var(--blockquote-background-color); } blockquote a { color: var(--blockquote-link-color); border-bottom: 2px dotted var(--blockquote-text-color); } blockquote a:hover { color: var(--blockquote-link-hover-color); } /*--------------- header ---------------*/ #header { position: relative; float: left; width: 100%; text-align: center; font-family: var(--title-font); z-index: 2; text-shadow: 1px 1px 2px var(--title-shadow-color), -1px -1px 2px var(--title-shadow-color); } #header > .inner { padding: 2em 2em 20px; margin: 0 auto; max-width: var(--entry-width); } @media (min-width: 800px) { #header > .inner { padding: 70px 70px 20px; } } h1#title { font-size: 1.5em; margin: 0; color: var(--title-color); font-style: italic; } h1#title a { color: inherit; } h2#subtitle { font-size: 1em; margin: 0; color: var(--title-color); border-top: 2px dotted var(--border-color); } h2#pagetitle { display: none; } /*--------------- content ---------------*/ #canvas { margin-bottom: 20px; } #primary { margin: 40px auto 20px; max-width: var(--entry-width); } @media (min-width: 800px) { #canvas { margin-bottom: 70px; } #primary { margin: 90px auto 20px; padding: 0 70px; } } /*--------------- entries ---------------*/ .entry, .full .comment { box-shadow: 0 0 2px var(--shadow-color); margin: 20px 0; } .entry > .inner:first-child, .full .comment > .inner:first-child { background: var(--entry-background-color); padding: 2em; } @media (min-width: 800px) { .entry, .full .comment { background-image: var(--header-background-image); background-color: var(--header-background-color); padding-right: 60px; box-shadow: 0 0 2px var(--shadow-color); margin: 70px 0; } .entry > .inner:first-child, .full .comment > .inner:first-child { border-right: 20px solid var(--border-color); box-shadow: inset -8px 0 3px -6px var(--shadow-color); } } .entry .header, .comment .header { margin-bottom: 2em; } .entry .header .inner, .comment .header .inner { border-bottom: 2px dotted var(--border-color); padding-bottom: 1em; } .entry .entry-title { margin: 0; padding: 0 0 0.5em; font-family: var(--title-font); font-style: italic; font-weight: normal; font-size: 1.5em; line-height: 1; } .admin-post-icon, .sticky-entry-icon { display: none; } .header a, .metadata a, .footer a { color: var(--text-color); } .header a:hover, .metadata a:hover, .footer a:hover { color: var(--link-color); } .no-subject .entry .entry-title { background: none; border: none; padding: 0; } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; font-family: Material Icons; font-size: 22px; vertical-align: middle; } .security-private .access-filter:before { content: "visibility_off"; font-family: Material Icons; font-size: 22px; vertical-align: middle; } .restrictions-NSFW .restrictions:before { content: "warning"; font-family: Material Icons; font-size: 22px; vertical-align: middle; } .restrictions-18 .restrictions:before { content: "18+"; font-size: 16px; font-family: arial, sans-serif; font-weight: bold; vertical-align: middle; } .has-userpic .userpic { float: right; shape-outside: circle(50%) padding-box; padding-left: 1em; } .has-userpic .userpic img { border: 5px solid var(--border-color); background: var(--border-color); display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border-radius: 50%; box-shadow: 0 0 2px var(--shadow-color); } @media (min-width: 800px) { .has-userpic .userpic { width: 120px; margin-right: calc(-70px - 2em); } .has-userpic .userpic img { max-width: 100px; max-height: 100px; width: auto; height: auto; border: 10px solid var(--border-color); box-shadow: -2px 0 2px var(--shadow-color); margin: 0 auto; } } .entry .poster { font-size: 0; } .entry .poster .ljuser { font-size: var(--text-size); padding-right: 0.25em; } .entry .poster:before { content: "Written by "; font-size: var(--text-size); } .entry .poster .ljuser:nth-child(2):before { content: "in "; } .poster.empty { display: none; } .poster .ljuser img { display: none; } .ljuser b { font-weight: normal; } .entry-content, .comment-content { margin: 2em 0; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action { display: flex; align-items: center; line-height: 1; } .cuttag-action img { display: none; } .cuttag-action:before { content: "content_cut"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--text-color); } .cuttag-action:after { content: ""; height: 0; width: 100%; border-bottom: 1px dashed var(--border-color); } .cut-open, .cut-close { display:none; } .cut-text{ font-weight: normal; margin-left: 27px; display: block; } .metadata li { line-height: 1.2; margin-bottom: 0.5em; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata-label { display: none; } .metadata img { vertical-align: middle; } #metadata-music:before { content: "speaker"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } #metadata-mood:before { content: "sentiment_satisfied_alt"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } #metadata-location:before { content: "location_on"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } #metadata-xpost:before { content: "add_location"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } .entry .tag { margin-bottom: 0.5em; line-height: 1.2; } .tag-text { display: none; } .tag ul { display: inline; margin-left: 0; padding-left: 0; } .tag ul li { display: inline; } .tag:before { content: "loyalty"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } .tag-nav-trigger { vertical-align: middle; } ul.entry-management-links { margin: 0; padding: 0; float: left; } ul.entry-management-links li { display: inline; margin-right: 5px; } ul.entry-management-links li a img { display: none; } ul.entry-management-links.icon-links li a:before { font-family: Material Icons; font-size: 22px; line-height: 22px; } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "add_alert"; } .icon-links .link_next a:before { content: "arrow_forward"; } ul.entry-interaction-links li { display: inline; margin-left: 0.5em; } ul.entry-interaction-links { margin: 0; padding: 0; float: right; } .footer:after { content: ""; display: block; clear: both; } /*------------ comments ------------*/ .comment-pages { background: var(--entry-background-color); padding: 1em; text-align: center; box-shadow: 0 0 2px var(--shadow-color); margin: 10px 0; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .full .thread-depth { display: block; line-height: 1; margin-bottom: 1em; } .comment .comment-title { margin: 0; font-weight: normal; } .full .comment .comment-title { padding: 0 0 0.5em; font-family: var(--title-font); font-style: italic; font-weight: normal; font-size: 1.5em; line-height: 1; } .comment-date-text { display: none; } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .poster-ip { display: block; } .partial { background: var(--entry-background-color); box-shadow: 0 0 2px var(--shadow-color); padding: 1em; margin: 20px 0; } .multiform-checkbox { margin-right: 0.5em; float: left; } .multiform-checkbox input { vertical-align: top; } ul.comment-management-links { margin: 0; padding: 0; float: right; } ul.comment-management-links li { display: inline-block; margin-left: 5px; } ul.comment-management-links.icon-links li { width: 22px; overflow: hidden; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a:before { font-family: Material Icons; font-size: 22px; line-height: 22px; } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } ul.comment-interaction-links li { display: inline; margin-right: 0.5em; } ul.comment-interaction-links { margin: 0; padding: 0; float: left; } .comment-pages.bottompages, #comments ul.entry-interaction-links, #comments ul.entry-management-links { display: none; } .bottomcomment { background: var(--entry-background-color); text-align: center; box-shadow: 0 0 2px var(--shadow-color); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { padding-top: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--border-color); background: var(--entry-background-color); color: var(--text-color); font-family: var(--main-font); font-size: var(--text-size); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: var(--text-size); font-family: var(--title-font); padding: 0.5em; color: var(--link-color); line-height: 1; } #postform { padding: 2em; background: var(--entry-background-color); box-shadow: 0 0 2px var(--shadow-color); } /*------------ archive, tags, icons containers------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); margin: 20px 0; } .month-wrapper .month > .inner:first-child, .tags-container > .inner:first-child, .icons-container > .inner:first-child, #archive-month > .inner:first-child { background: var(--entry-background-color); padding: 2em; } @media (min-width: 800px) { .month-wrapper, #archive-month, .tags-container, .icons-container { background: var(--header-background-image); padding-right: 60px; margin: 70px 0; } .month-wrapper .month > .inner:first-child, .tags-container > .inner:first-child, .icons-container > .inner:first-child, #archive-month > .inner:first-child { border-right: 20px solid var(--border-color); box-shadow: inset -8px 0 3px -6px var(--shadow-color); } } .month .header, .tags-container .header, .icons-container .header { margin-bottom: 2em; border-bottom: 2px dotted var(--border-color); padding-bottom: 1em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { padding: 0; font-family: var(--title-font); font-style: italic; font-weight: normal; font-size: 1.5em; line-height: 1; } .month .footer, #primary .manage-link { border-top: 2px dotted var(--border-color); margin-top: 2em; padding-top: 1em; } /*------------ archive------------*/ table.month { margin: 0 auto; border-spacing: 3px; text-align: center; } table.month td { width: 2em; height: 2em; } table.month th { padding: 3px; background: var(--blockquote-background-color); color: var(--blockquote-text-color); font-family: var(--title-font); font-weight: normal; width: 2em; border-radius: 4px; } table.month td p { margin: 0; padding: 3px; } table.month td.day-has-entries { position: relative; } .day.day-has-entries .label { border: 1px solid var(--border-color); display: block; border-radius: 50px; width: 2em; height: 2em; line-height: 2em; } table.month .day-has-entries p { left: 0; top: 0; position: absolute; z-index: 9; } table.month .day-has-entries p a { color: transparent; padding: 1em; } .month dl { margin: 0; } .month dl dt { border-bottom: 1px dotted var(--border-color); font-family: var(--title-font); font-size: 1em; padding-bottom: 1em; font-style: italic; } .month dl dt a { color: var(--text-color); } .month dl dt a:hover { color: var(--link-color); } .month dl .time { padding-right: 0.5em; } .month dl h3 { display: inline; font-size: 1em; } .page-month .month .entry-poster { margin-right: 0.5em; } .month dl .tag ul { margin-top: 0; } .month dd { margin: 1em 0 0; } .day-date { display: none; } .month caption { display: none; } #archive-year .navigation li a, #archive-year li.active { display: inline-block; height: 50px; width: 50px; background: var(--border-color); line-height: 50px; border-radius: 50px; text-align: center; color: var(--header-icon-color); box-shadow: 0 0 2px var(--shadow-color); margin: 0 5px; } #archive-year .navigation li a:hover, #archive-year li.active { color: var(--header-icon-hover-color); } #archive-year .navigation li a:hover { transform: rotate(360deg); } /*------------ tags ------------*/ ul.ljtaglist { list-style-position: inside; padding: 0; margin-left: 1em; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0 0 1em; padding: 0; } .sorting-options ul li { display: inline; } .icon { border-top: 2px dotted var(--border-color); border-bottom: 2px dotted var(--border-color); padding: 1em 0; margin: 1em 0; display: flex; } .icon-image { margin-right: 1em; } .icon-image img { display: block; } .default.label { font-size: 0; } .default.label:before { content: "star"; font-family: Material Icons; font-size: 22px; font-style: normal; vertical-align: top; line-height: 22px; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } .keywords-label, .comment-text, .description-text { font-weight: bold; } /*------------ modules ------------*/ #secondary { background-image: var(--header-background-image); background-color: var(--header-background-color); border-bottom: 20px solid var(--border-color); box-shadow: 0 2px 2px var(--shadow-color); } .module-section-one { clear: left; margin: 0 auto; max-width: var(--entry-width); position: relative; } .module-section-one { padding: 0 2em 50px; } @media (min-width: 800px) { .module-section-one { padding: 0 70px 70px; } } .module-content ul { list-style: none; margin: 0; padding: 0; } .module .userpic img { display: block; border: 5px solid var(--border-color); border-radius: 50%; max-width: 70px; max-height: 70px; width: auto; height: auto; margin: 0 auto; } @media (min-width: 800px) { .module-userprofile { width: 120px; height: 120px; position: absolute; bottom: -70px; left: 70px; display: flex; align-items: center; } .module .userpic img { border: 10px solid var(--border-color); max-width: 100px; max-height: 100px; box-shadow: 0 2px 2px var(--shadow-color); background: var(--border-color); } } .module-navlinks { position: absolute; left: 2em; bottom: -30px; text-align: center; } @media (min-width: 800px) { .module-navlinks { left: 190px; } } .module-navlinks li { float: left; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--border-color); box-shadow: 0 2px 2px var(--shadow-color); margin-left: 2px; } .module-navlinks li a { color: var(--header-icon-color); } .module-navlinks li a:hover { color: var(--header-icon-hover-color); } .module-navlinks li a:before { display: block; font-family: Material Icons; font-size: 22px; vertical-align: middle; height: 40px; width: 40px; line-height: 40px; } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "date_range"; } .list-item-read a:before { content: "rss_feed"; } .list-item-tags a:before { content: "style"; } .list-item-network a:before { content: "language"; } .list-item-memories a:before { content: "star"; } .list-item-userinfo a:before { content: "info"; } .module-typelist { margin-top: 10px; padding-top: 10px; border-top: 2px dotted var(--border-color); } .module-typelist ul { display: flex; flex-wrap: wrap; margin: -2px; } .module-typelist li { flex-grow: 1; text-align: center; line-height: 1; } .module-typelist li a { background: var(--header-link-background-color); margin: 2px; font-style: italic; color: var(--header-link-color); display: block; padding: 0.5em; } .module-typelist li a:first-letter { font-family: var(--title-font); } .module-typelist li a:hover { background: var(--customtext-background-color); color: var(--customtext-link-color); backdrop-filter: blur(1px); } .module-customtext { margin-top: 20px; background: var(--customtext-background-color); backdrop-filter: blur(1px); padding: 1em; color: var(--customtext-text-color); } .module-customtext .module-content{ overflow: auto; max-height: var(--customtext-height); } .module-customtext a { color: var(--customtext-link-color); border-bottom: 2px dotted var(--customtext-text-color); } .module-customtext a:hover { color: var(--customtext-link-hover-color); } .module-customtext .module-content::-webkit-scrollbar { width: 5px; height: 5px; } .module-customtext .module-content::-webkit-scrollbar-track { background: transparent; } .module-customtext .module-content::-webkit-scrollbar-thumb { background: var(--customtext-link-color); } .module-customtext .module-content::-webkit-scrollbar-corner { background: var(--customtext-link-color); } @media (min-width: 800px) { .module-customtext { text-align: justify; } } .module h2, .module-calendar, .journal-website-name, .journal-name, ul.userlite-interaction-links, .module-tags_list, .module-tags_multilevel, .module-tags_cloud, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered, .module .manage-link { display: none; } /*--------------- navigation ---------------*/ .navigation .page-separator, .topnav { display: none; } .navigation ul { margin: 0; padding: 0; text-align: center; } .navigation li { display: inline; } #entries .navigation li { display: inline-block; width: 40px; height: 40px; overflow: hidden; background: var(--border-color); border-radius: 50%; box-shadow: 0 0 2px var(--shadow-color); margin: 0 10px; } #entries .navigation li a { color: var(--header-icon-color); } #entries .navigation li a:hover { color: var(--header-icon-hover-color); } #entries .navigation li a:before { display: block; font-family: Material Icons; font-size: 22px; height: 40px; width: 40px; line-height: 40px; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } li.page-separator { display: none !important; } .noentries { display: none; } /*------------ footer ------------*/ #footer { text-align: center; margin-bottom: 25px; } .page-top { width: 40px; height: 40px; background: var(--border-color); border-radius: 50%; box-shadow: 0 0 2px var(--shadow-color); overflow: hidden; margin: 0 auto; } .page-top a { color: var(--header-icon-color); } .page-top a:hover { color: var(--header-icon-hover-color); } .page-top a:before { content: "arrow_upward"; display: block; font-family: Material Icons; font-size: 22px; height: 40px; width: 40px; line-height: 40px; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); padding: 1em; width: 180px; border-radius: 0; text-align: center; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; margin: 0; padding: 1em 0; } div.ContextualPopup .Userpic { border: 0; float: none; margin: 0; } div.ContextualPopup .Userpic img { border: 5px solid var(--border-color); border-radius: 50%; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 1em 0 0; border-top: 2px dotted var(--border-color); } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--entry-background-color); color: var(--text-color); justify-content: center; padding: 0.75em 0; border-bottom: 5px solid var(--border-color); z-index: 9; box-shadow: 0 2px 0 var(--shadow-color); transform: translateY(-100%); position: absolute; transition: transform 0.7s; z-index: 9; } #lj_controlstrip:before { content: ""; position: absolute; bottom: -65px; height: 60px; width: 40px; right: 10px; } #lj_controlstrip:after { font-family: "Material Icons"; content: "settings"; font-size: 22px; position: absolute; bottom: -65px; height: 40px; width: 40px; right: 10px; cursor: pointer; line-height: 40px; text-align: center; background: var(--border-color); color: var(--header-icon-color); border-radius: 50%; background-clip: padding-box; box-shadow: 0 0 2px var(--shadow-color); } #lj_controlstrip:hover { transform: translateY(0); } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: 1.5; padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--border-color); background: var(--entry-background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { border: 0; background: transparent; font-size: var(--text-size); color: var(--text-color); font-family: var(--title-font) !important; padding: 0.25em; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a img { border: 3px solid var(--border-color); border-radius: 50%; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Open+Sans&family=Shadows+Into+Light+Two&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout".

RESOURCES

icon font by Google
background images by Davidzydd and nenilkime from freepik.com

comments

Browser

Sat, 17 Apr 2021 11:44:35 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

navigation links, links list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Basic boxes" and apply any theme.
Choose the "1 Column (modules at top and bottom; no sidebar)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "icons" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Modules" tab. Set "Navigation" to number 2, "Custom text" to number 3, "Links list" to number 4. Uncheck the other modules.
Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". /*------------------------------------- - layout - browser (basic boxes) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://material.io - background image - https://unsplash.com/photos/qfT4RFbk4Eg -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #6a3e44; --line-height: 1.5; --body-background-color: #cfdee2; --body-background-image: url(https://rosecarmine.dreamwidth.org/file/92274.jpg); --link-color: #ff435f; --link-hover-color: #4da3bb; --main-font: Barlow, sans-serif; --title-font: Barlow, sans-serif; --content-width: 1000px; --entry-background-color: #fbf9f9; --entry-border-color: #e9ccbe; --entry-shadow-color: rgba(0, 0, 0, 0.2); --entry-title-color: #fbf9f9; --entry-title-background-color: rgba(255, 102, 106, 0.8); --entry-title-shadow-color: rgba(0, 0, 0, 0.4); --entry-icon-color: #f1a0a5; --entry-icon-hover-color: #a9d3e0; --customtext-height: 11em; } /*--------------- fonts ---------------*/ @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; src: url("https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format("woff2"); } /*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { font-family: var(--main-font); font-size: var(--text-size); padding: 0; margin: 0; line-height: var(--line-height); background-color: var(--body-background-color); background-image: var(--body-background-image); background-size: cover; background-position: center center; background-attachment: fixed; color: var(--text-color); } html body { margin-left: 0; margin-right: 0; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited, a:active { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { position: relative; padding: 1.5em 1em 1em; margin: 2em 0 1em; font-style: italic; border: 1px solid var(--entry-border-color); border-radius: 4px; } blockquote:before { content: "format_quote"; top: -17px; left: 50%; margin-left: -17px; position: absolute; width: 32px; height: 32px; display: block; font-family: Material Icons; font-size: 24px; line-height: 32px; text-align: center; color: var(--entry-icon-color); font-style: normal; border: 1px solid var(--entry-border-color); background: var(--entry-background-color); border-radius: 50%; } /*--------------- content ---------------*/ #canvas { margin: 20px auto; max-width: var(--content-width); } @media (min-width: 600px) { #canvas { padding: 0 20px; margin: 50px auto; } } @media (min-width: 1024px) { #canvas { border-left: 134px solid transparent; border-right: 134px solid transparent; margin: 100px auto; } } /*--------------- header ---------------*/ #header { float: left; width: 100%; } #header > .inner:first-child { padding: 10px 4px 0; } #journaltitles-container { padding: 2em 2em 0; background: var(--entry-background-color); border-radius: 4px 4px 0 0; text-align: center; } h1#title { font-family: var(--title-font); font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0; } h2#subtitle { font-size: 1em; line-height: 1.5; padding: 0; margin: 0; font-weight: normal; text-transform: lowercase; } h2#pagetitle { display: none; } .module-section-header { padding-left: 16px; } .module-navlinks ul { display: flex; align-items: flex-end; } .module-navlinks li { text-transform: lowercase; line-height: 22px; width: 22px; height: 22px; line-height: 22px; padding: 5px; overflow: hidden; border-radius: 50%; margin: 0 6px 6px 0; position: relative; background: var(--entry-background-color); box-shadow: 0 1px 2px var(--entry-title-shadow-color); } .module-navlinks li a:before { float: left; font-family: Material Icons; font-size: 22px; vertical-align: middle; height: 22px; width: 22px; line-height: 22px; margin-right: 0.25em; color: var(--entry-icon-color); transition: color 0.4s ease; } .module-navlinks li a:hover:before { color: var(--entry-icon-hover-color); } .page-recent .list-item-recent, .page-entry .list-item-recent, .page-archive .list-item-archive, .page-read .list-item-read, .page-network .list-item-network, .page-tags .list-item-tags, .page-reply .list-item-recent, .page-icons .list-item-recent, .page-month .list-item-archive, .page-year .list-item-archive, .page-day .list-item-archive { border-radius: 8px 8px 0 0; margin-right: 10px; padding: 9px 10px; line-height: 22px; position: relative; margin: 0 6px 0 0; box-shadow: none; overflow: visible; font-size: 0; } @media (min-width: 600px) { .page-recent .list-item-recent, .page-entry .list-item-recent, .page-archive .list-item-archive, .page-read .list-item-read, .page-network .list-item-network, .page-tags .list-item-tags, .page-reply .list-item-recent, .page-icons .list-item-recent, .page-month .list-item-archive, .page-year .list-item-archive, .page-day .list-item-archive { width: auto; font-size: 1em; box-shadow: none; } } .page-recent .list-item-recent:before, .page-archive .list-item-archive:before, .page-read .list-item-read:before, .page-network .list-item-network:before, .page-tags .list-item-tags:before, .page-entry .list-item-recent:before, .page-reply .list-item-recent:before, .page-icons .list-item-recent:before, .page-month .list-item-archive:before, .page-year .list-item-archive:before, .page-day .list-item-archive:before { content: ""; position: absolute; bottom: 0; left: -10px; width: 10px; height: 20px; background: transparent; border-radius: 0 0 8px 0; box-shadow: 5px 5px 0 5px var(--entry-background-color); } .page-recent .list-item-recent:after, .page-archive .list-item-archive:after, .page-read .list-item-read:after, .page-network .list-item-network:after, .page-tags .list-item-tags:after, .page-entry .list-item-recent:after, .page-reply .list-item-recent:after, .page-icons .list-item-recent:after, .page-month .list-item-archive:after, .page-year .list-item-archive:after, .page-day .list-item-archive:after { content: ""; position: absolute; bottom: 0; right: -10px; width: 10px; height: 20px; background: transparent; border-radius: 0 0 0 8px; box-shadow: -5px 5px 0 5px var(--entry-background-color); } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "date_range"; } .list-item-read a:before { content: "local_library"; } .list-item-tags a:before { content: "style"; } .list-item-network a:before { content: "map"; } .list-item-memories a:before { content: "star"; } .list-item-userinfo a:before { content: "person"; } .module-navlinks li a { color: var(--sidebar-link-color); } /*--------------- entries ---------------*/ .entry, .comment { margin: 20px 0; background: var(--entry-title-background-color); padding: 4px; box-shadow: 0 2px 0 var(--entry-shadow-color), 0 -2px 0 var(--entry-shadow-color), -2px 0 0 var(--entry-shadow-color), 2px 0 0 var(--entry-shadow-color); position: relative; clear: both; } @media (min-width: 600px) { .entry, .comment { margin: 50px 0; } } @media (min-width: 1024px) { .entry { margin: 100px 0; } } .header { overflow: hidden; } .entry .header .inner, .comment .header .inner { display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; } @media (min-width: 800px) { .entry .header .inner { flex-wrap: nowrap; } } .entry .entry-title { font-family: var(--title-font); font-size: 1.5em; font-weight: normal; padding: 0.5em; line-height: 1; flex-grow: 2; text-shadow: 0 1px 1px var(--entry-title-shadow-color); } .entry .entry-title, .entry .entry-title a { color: var(--entry-title-color); } .entry .entry-title a:hover { text-shadow: 0 1px 1px var(--entry-title-shadow-color), 0 0 5px var(--entry-title-color); } .no-subject .entry .entry-title { background: none; border: none; } .admin-post-icon, .sticky-entry-icon { display: none; } .header .datetime { background: var(--entry-background-color); white-space: nowrap; border-radius: 8px 8px 0 0; margin-top: 6px; margin-right: 16px; padding: 9px 10px; line-height: 22px; position: relative; } .header .datetime:before { content: ""; position: absolute; bottom: 0; left: -10px; width: 10px; height: 20px; background: transparent; border-radius: 0 0 8px 0; box-shadow: 5px 5px 0 5px var(--entry-background-color); } .header .datetime:after { content: ""; position: absolute; bottom: 0; right: -10px; width: 10px; height: 20px; background: transparent; border-radius: 0 0 0 8px; box-shadow: -5px 5px 0 5px var(--entry-background-color); } .header .date:before, .header .comment .datetime span:before { content: "today"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; line-height: 22px; } .entry .datetime, .entry .datetime a, .comment .header .datetime { text-transform: lowercase; color: var(--text-color); } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; display: inline-block; font-family: Material Icons; font-size: 22px; line-height: 22px; width: 22px; height: 22px; color: var(--entry-icon-color); padding: 5px; background: var(--entry-background-color); border-radius: 50%; margin: 0 6px 6px 0; box-shadow: 0 1px 2px var(--entry-title-shadow-color); } .security-private .access-filter:before { content: "visibility_off"; display: block; font-family: Material Icons; font-size: 22px; line-height: 22px; width: 22px; height: 22px; color: var(--entry-icon-color); padding: 5px; background: var(--entry-background-color); border-radius: 50%; margin: 0 6px 6px 0; box-shadow: 0 1px 2px var(--entry-title-shadow-color); } .restrictions-NSFW .restrictions:before { content: "warning"; display: block; font-family: Material Icons; font-size: 22px; line-height: 22px; width: 22px; height: 22px; color: var(--entry-icon-color); padding: 5px; background: var(--entry-background-color); border-radius: 50%; margin: 0 6px 6px 0; box-shadow: 0 1px 2px var(--entry-title-shadow-color); } .restrictions-18 .restrictions:before { content: "18+"; display: block; font-family: arial, sans-serif; font-size: 14px; line-height: 22px; width: 32px; height: 22px; color: var(--entry-icon-color); padding: 5px 0; text-align:center; font-weight:bold; background: var(--entry-background-color); border-radius: 50%; margin: 0 6px 6px 0; box-shadow: 0 1px 2px var(--entry-title-shadow-color); } .has-userpic .userpic { float: right; margin: 1em; } .has-userpic .userpic img { max-width: 50px; max-height: 50px; width: auto; height: auto; background: var(--entry-background-color); border: 1px solid var(--entry-border-color); padding: 5px; border-radius: 50%; } @media (min-width: 1024px) { .has-userpic .userpic { position: absolute; width: 114px; top: 0; left: -134px; text-align: right; margin: 0; } .has-userpic .userpic img { max-width: 100px; max-height: 100px; padding: 2px; border: 5px solid var(--entry-title-background-color); box-shadow: 0 0 0 2px var(--entry-shadow-color); background-clip: padding-box; } } .entry .poster:not(.empty), .full .poster { display: block; border-bottom: 1px solid var(--entry-border-color); line-height: 1; padding: 0.5em; } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster a { color: var(--text-color); } .poster .ljuser:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; } .entry .poster .ljuser:nth-child(1):before { content: "account_circle"; } .entry .poster .ljuser:nth-child(2):before { content: "public"; } .entry .contents, .comment .contents { border-radius: 4px 4px 0 0; background: var(--entry-background-color); } .entry-content, .comment-content { padding: 2em; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action { display: flex; align-items: center; line-height: 1; } .cuttag-action img { display: none; } .cuttag-action:before { content: "content_cut"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 5px; } .cuttag-action:after { content: ""; height: 0; width: 100%; border-bottom: 1px dashed var(--entry-border-color); } .cut-open, .cut-close { display:none; } .cut-text{ font-weight: normal; margin-left: 27px; display: block; } .metadata { padding: 0 2em 2em; } .metadata ul { list-style: none; margin: 0; padding: 0; } .metadata li { display: inline; margin-right: 0.5em; } .metadata-label { display: none; } #metadata-music:before { content: "speaker"; font-family: Material Icons; font-size: 22px; vertical-align: middle; line-height: 0; color: var(--entry-icon-color); } #metadata-mood:before { content: "face"; font-family: Material Icons; font-size: 22px; vertical-align: middle; line-height: 0; color: var(--entry-icon-color); } #metadata-location:before { content: "location_on"; font-family: Material Icons; font-size: 22px; vertical-align: middle; line-height: 0; color: var(--entry-icon-color); } #metadata-xpost:before { content: "add_location"; font-family: Material Icons; font-size: 22px; vertical-align: middle; line-height: 0; color: var(--entry-icon-color); } .metadata img { vertical-align: middle; } .entry div.tag { border-top: 1px solid var(--entry-border-color); padding: 1.5em 2em; line-height: 1; position: relative; text-align: center; } .entry div.tag:before { content: "loyalty"; display: block; font-family: Material Icons; font-size: 22px; line-height: 22px; padding: 5px; background: var(--entry-background-color); border-radius: 50%; border: 1px solid var(--entry-border-color); color: var(--entry-icon-color); position: absolute; top: -17px; left: 50%; margin-left: -17px; } .entry .tag-text { display: none; } .tag-nav-trigger { vertical-align: middle; } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; color: transparent; } .tag ul li:after { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background: var(--entry-border-color); margin: 0 0.5em; } .tag ul li:last-child:after { display: none; } .tag li a { color: var(--text-color); } .tag li a:hover { color: var(--link-color); } ul.entry-management-links.icon-links { margin: 0; padding: 0 0 1em; list-style: none; display: flex; justify-content: center; position: relative; z-index: 1; } ul.entry-management-links.icon-links:before { content: ""; width: 100%; border-top: 1px solid var(--entry-border-color); top: 16px; position: absolute; z-index: -1; } ul.entry-management-links li a img { display: none; } ul.entry-management-links.icon-links li a { display: block; width: 32px; height: 32px; color: var(--entry-icon-color); background: var(--entry-background-color); border-radius: 50%; border: 1px solid var(--entry-border-color); margin: 0 5px; } ul.entry-management-links.icon-links li a:before { display: block; font-family: Material Icons; padding: 5px; font-size: 22px; line-height: 22px; } .icon-links .link_prev a:before { content: "skip_previous"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "add_alert"; } .icon-links .link_next a:before { content: "skip_next"; } ul.entry-management-links.icon-links li a:hover { color: var(--entry-icon-hover-color); } ul.entry-management-links.text-links, ul.entry-interaction-links { margin: 0; padding: 0 2em 1.5em; list-style: none; text-align: center; line-height: 1; } ul.entry-management-links.text-links li, ul.entry-interaction-links li { display: inline; } ul.entry-management-links.text-links li:after, ul.entry-interaction-links li:after { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background: var(--entry-border-color); margin: 0 0.5em 0 0.75em; } ul.entry-management-links.text-links li:last-child:after, ul.entry-interaction-links li:last-child:after { display: none; } ul.entry-management-links.text-links li a, ul.entry-interaction-links li a { color: var(--text-color); } ul.entry-management-links.text-links li a:hover, ul.entry-interaction-links li a:hover { color: var(--link-color); } .footer { background: var(--entry-background-color); border-radius: 0 0 4px 4px; text-transform: lowercase; padding-bottom: 4px; } /*--------------- comments ---------------*/ .comment-posted { font-weight: bold; } .comment-pages { text-align: center; background: var(--entry-background-color); padding: 0.5em 1em; border-radius: 4px; position: relative; margin: 16px 4px; } .comment-pages:before { content: ""; position: absolute; width: 100%; height: 100%; padding: 4px; background: var(--entry-title-background-color); top: -4px; left: -4px; z-index: -1; box-shadow: 0 2px 0 var(--entry-shadow-color), 0 -2px 0 var(--entry-shadow-color), -2px 0 0 var(--entry-shadow-color), 2px 0 0 var(--entry-shadow-color); } .comment-wrapper { min-width: 15em; } .full .thread-depth { line-height: 22px; padding: 5px; background: var(--entry-background-color); border-radius: 8px; margin: 0 4px 4px 0; } .comment .comment-title { margin: 0; } .full .comment .comment-title { font-family: var(--title-font); font-weight: normal; font-size: 1em; line-height: 1; order: -1; flex: 2; text-shadow: 0 0 10px var(--entry-title-color); padding: 1em; } .full .comment .comment-title, .full .comment .comment-title a { color: var(--entry-title-color); } .full .comment .comment-title a:hover { color: var(--entry-title-hover-color); } .no-subject .comment .comment-title { background: none; border: none; margin: 0; padding: 0; } .comment .poster .ljuser:before { content: "account_circle"; } .poster-ip { padding: 0 2em; } .comment-from-text, .comment-date-text, .comment-ip-text { display: none; } .comment-pages.bottompages { display: none; } .multiform-checkbox { display: inline; margin: 0 2em; } ul.comment-management-links.icon-links { margin: 0; padding: 0 0 1em; list-style: none; display: flex; justify-content: center; position: relative; z-index: 1; } ul.comment-management-links.icon-links:before { content: ""; width: 100%; border-top: 1px solid var(--entry-border-color); top: 16px; position: absolute; z-index: -1; } ul.comment-management-links.text-links { margin: 0; padding: 0 2em 1em; text-align: center; line-height: 1; } ul.comment-management-links.text-links li { padding: 0.5em; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--entry-border-color); margin: 0 5px; overflow: hidden; } ul.comment-management-links.icon-links li a { display: block; width: 32px; height: 32px; color: var(--entry-icon-color); background: var(--entry-background-color); } ul.comment-management-links.icon-links li a:hover { color: var(--entry-icon-hover-color); } ul.comment-management-links.icon-links li a:before { display: block; font-family: Material Icons; padding: 5px; font-size: 22px; line-height: 22px; } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } ul.comment-interaction-links { margin: 0; padding: 0 2em 1.5em; list-style: none; text-align: center; line-height: 1; } ul.comment-management-links.text-links li, ul.comment-interaction-links li { display: inline; } ul.comment-management-links.text-links li:before, ul.comment-interaction-links li:before { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background: var(--entry-border-color); margin: 0 0.75em 0 0.5em; } ul.comment-management-links.text-links li:first-child:before, ul.comment-interaction-links li:first-child:before { display: none; } ul.comment-management-links.text-links li a, ul.comment-interaction-links li a { color: var(--text-color); } ul.comment-management-links.text-links li a:hover, ul.comment-interaction-links li a:hover { color: var(--link-color); } .partial .comment { margin-top: 20px; padding: 4px; background: var(--entry-title-background-color); } .partial .comment .inner { padding: 1em; background: var(--entry-background-color); border-radius: 4px; } #comments ul.entry-interaction-links, #comments ul.entry-management-links { display: none; } .bottomcomment { background: var(--entry-title-background-color); color: var(--entry-title-color); padding: 0 1em; text-align: center; box-shadow: 0 2px 0 var(--entry-shadow-color), 0 -2px 0 var(--entry-shadow-color), -2px 0 0 var(--entry-shadow-color), 2px 0 0 var(--entry-shadow-color); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { padding: 0 2em 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--entry-border-color); background: var(--entry-background-color); color: var(--text-color); font-family: var(--main-font); font-size: var(--text-size); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: var(--text-size); padding: 0.5em; color: var(--link-color); text-transform: uppercase; line-height: 1; } .page-reply #qrformdiv { background: var(--entry-title-background-color); padding: 4px; } #postform { padding: 2em; background: var(--entry-background-color); border-radius: 4px; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { margin: 20px 0; background: var(--entry-title-background-color); padding: 4px; box-shadow: 0 2px 0 var(--entry-shadow-color), 0 -2px 0 var(--entry-shadow-color), -2px 0 0 var(--entry-shadow-color), 2px 0 0 var(--entry-shadow-color); } @media (min-width: 600px) { .month-wrapper, #archive-month, .tags-container, .icons-container { margin: 50px 0; } } @media (min-width: 1024px) { .month-wrapper, #archive-month, .tags-container, .icons-container { margin: 100px 0; } } .month .header, .tags-container .header, .icons-container .header { text-align: right; } .month .header .inner, .tags-container .header .inner, .icons-container .header .inner { background: var(--entry-background-color); display: inline-block; border-radius: 8px 8px 0 0; margin-top: 6px; margin-right: 16px; padding: 9px 10px; line-height: 22px; position: relative; } .month .header .inner:before, .tags-container .header .inner:before, .icons-container .header .inner:before { content: ""; position: absolute; bottom: 0; left: -10px; width: 10px; height: 20px; background: transparent; border-radius: 0 0 8px 0; box-shadow: 5px 5px 0 5px var(--entry-background-color); } .month .header .inner:after, .tags-container .header .inner:after, .icons-container .header .inner:after { content: ""; position: absolute; bottom: 0; right: -10px; width: 10px; height: 20px; background: transparent; border-radius: 0 0 0 8px; box-shadow: -5px 5px 0 5px var(--entry-background-color); } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1em; font-weight: normal; line-height: 1; text-transform: lowercase; margin: 0; padding: 0; } .month-wrapper h3:before, .tags-container h2:before, .icons-container h2:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; line-height: 22px; } .month-wrapper h3:before { content: "date_range"; } .tags-container h2:before { content: "style"; } .icons-container h2:before { content: "image"; } .month .contents, #archive-month > .inner:first-child, .tags-container .contents, .icons-container .contents { border-radius: 4px 4px 0 0; background: var(--entry-background-color); } .month .footer, #primary .manage-link { padding: 1em; text-transform: lowercase; text-align: center; border-top: 1px solid var(--entry-border-color); } /*------------ archive ------------*/ .month caption { display: none; } .month table { width: 100%; text-align: center; } table.month { margin: 0 auto; border-collapse: collapse; text-align: center; } table.month td, table.month th { max-width: 1em; height: 1em; padding: 1em 0.25em; } table.month td { max-width: 1em; height: 1em; padding: 1em 0.25em; border-top: 1px solid var(--entry-border-color); } table.month td p { margin: 0; display: inline; } table.month td p:before { content: "( "; } table.month td p:after { content: " )"; } #archive-month > .inner:first-child { border-radius: 4px; background: var(--entry-background-color); } .month dl { margin: 0; } .month dt { line-height: 1; padding: 1em; border-bottom: 1px solid var(--entry-border-color); } .month dl dt a { color: var(--text-color); } .month dl dt a:before { content: "today"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; line-height: 22px; } .month dl .time { padding-right: 0.5em; } .month dl h3 { display: inline; font-size: 1em; } .page-month .month .entry-poster { margin-right: 0.5em; } .month dd { margin: 0; padding: 2em; border-bottom: 1px solid var(--entry-border-color); } .month dd br { display: block; } #archive-year .navigation ul, #archive-month .navigation ul { margin-bottom: 20px; } @media (min-width: 1024px) { #archive-year .navigation { margin: 100px 0; } } #archive-year .navigation li { display: inline-block; width: 45px; height: 45px; line-height: 45px; background: var(--entry-title-background-color); color: var(--entry-title-color); border-radius: 50%; box-shadow: 0 0 0 1px var(--entry-shadow-color); margin: 0 5px; } #archive-year .navigation li a { color: var(--entry-title-color); text-shadow: 0 1px 2px var(--entry-title-shadow-color); } #archive-year .navigation li a:hover { text-shadow: 0 1px 2px var(--entry-title-shadow-color), 0 0 5px var(--entry-title-color); } #archive-year .navigation li.active { text-shadow: 0 1px 2px var(--entry-title-shadow-color), 0 0 5px var(--entry-title-color); } #archive-month .navigation ul { margin: 0; padding: 1em; } #archive-month .navigation li { display: inline; } .day-date { display: none; } /*------------ tags ------------*/ .tags-container .contents { padding: 2em; } ul.ljtaglist { padding: 0; margin-left: 1em; } ul.ljtaglist:first-child, .tags_cloud ul { list-style-position: inside; padding: 0; margin: 0; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .page-icons .bottompages { text-align: center; padding: 1.5em; border-top: 1px solid var(--entry-border-color); } .icon { border-top: 1px solid var(--entry-border-color); display: flex; } .icon-image { border-right: 1px solid var(--entry-border-color); padding: 0.5em; } .icon-image img { display: block; } .icon-info { text-transform: lowercase; padding: 1.5em; } .icon-info div span { font-style: normal; } .default.label { font-size: 0; } .default.label:before { content: "star"; font-family: Material Icons; font-size: 22px; font-style: normal; vertical-align: top; line-height: 22px; color: var(--entry-icon-color); } .sorting-options ul { margin: 0; padding: 1em; text-align: center; } .sorting-options ul li { display: inline; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*------------ modules ------------*/ .module-section-one { background: var(--entry-title-background-color); padding: 4px; box-shadow: 0 2px 0 var(--entry-shadow-color), 0 -2px 0 var(--entry-shadow-color), -2px 0 0 var(--entry-shadow-color), 2px 0 0 var(--entry-shadow-color); } .module-section-one .inner { background: var(--entry-background-color); border-radius: 0 0 4px 4px; clear: left; padding-top: 2em; } .module-section-one .module { padding: 0 2em 2em; } .module-content ul { list-style: none; margin: 0; padding: 0; } .module-typelist { line-height: 1; text-transform: lowercase; border-top: 1px solid var(--entry-border-color); padding-top: 2em !important; position: relative; text-align: center; } .module-typelist:before { content: "near_me"; display: block; font-family: Material Icons; font-size: 22px; padding: 5px; background: var(--entry-background-color); border-radius: 50%; border: 1px solid var(--entry-border-color); color: var(--entry-icon-color); position: absolute; top: -17px; left: 50%; margin-left: -17px; } .module-typelist li { display: inline; } .module-typelist li:after { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; background: var(--entry-border-color); border-radius: 5px; margin: 0 0.5em 0 0.75em; } .module-typelist li:last-child:after { display: none; } .module-typelist li a { color: var(--text-color); } .module-typelist li a:hover { color: var(--link-color); } .module-customtext .module-content { max-height: var(--customtext-height); overflow: auto; } @media (min-width: 800px) { .module-customtext .module-content { text-align: justify; } } .module-customtext .module-content::-webkit-scrollbar { width: 10px; height: 10px; } .module-customtext .module-content::-webkit-scrollbar-track { background: var(--entry-background-color); } .module-customtext .module-content::-webkit-scrollbar-thumb { background: var(--entry-border-color); border-left: 5px solid var(--entry-background-color); } .module-customtext .module-content::-webkit-scrollbar-corner { background: var(--entry-border-color); } .module h2, .module-userprofile, .module-calendar, .module-tags_list, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered, .module .manage-link { display: none; } /*--------------- navigation ---------------*/ .topnav { display: none; } .navigation { text-transform: lowercase; text-align: center; } .navigation ul { margin: 0; padding: 0; } #entries .navigation li { display: inline-block; margin: 0 10px; } #entries .navigation li a { display: block; width: 40px; height: 40px; overflow: hidden; background: var(--entry-title-background-color); color: var(--entry-title-color); border-radius: 50%; box-shadow: 0 0 0 1px var(--entry-shadow-color); text-shadow: 0 1px 2px var(--entry-title-shadow-color); } #entries .navigation li a:hover { text-shadow: 0 1px 2px var(--entry-title-shadow-color), 0 0 5px var(--entry-title-color); } #entries .navigation li a:before { display: block; font-family: Material Icons; font-size: 22px; vertical-align: middle; height: 40px; width: 40px; line-height: 40px; text-align: center; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } li.page-separator { display: none !important; } .noentries { display: none; } /*--------------- footer ---------------*/ #footer { width: 40px; height: 40px; margin: 20px auto; } @media (min-width: 1024px) { #footer { position: fixed; bottom: 0; right: 20px; } } .page-top a { display: block; width: 40px; height: 40px; background: var(--entry-title-background-color); color: var(--entry-title-color); border-radius: 50%; box-shadow: 0 0 0 1px var(--entry-shadow-color); text-shadow: 0 1px 2px var(--entry-title-shadow-color); overflow: hidden; } .page-top a:hover { text-shadow: 0 1px 2px var(--entry-title-shadow-color), 0 0 5px var(--entry-title-color); } .page-top a:before { content: "arrow_upward"; display: block; font-family: Material Icons; font-size: 22px; vertical-align: middle; height: 40px; width: 40px; line-height: 40px; text-align: center; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-title-background-color); border: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); padding: 4px; width: 200px; border-radius: 0; text-align: center; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; margin: 0; padding-bottom: 1em; background: var(--entry-background-color); } div.ContextualPopup .Userpic { border: 0; float: none; background: var(--entry-background-color); margin: 0; padding: 1em 0; border-radius: 4px 4px 0 0; } div.ContextualPopup .Userpic img { border: 1px solid var(--entry-border-color); padding: 5px; border-radius: 50%; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 1em; background: var(--entry-background-color); border-radius: 0 0 4px 4px; border-top: 1px solid var(--entry-border-color); } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--entry-background-color); color: var(--text-color); border-bottom: 4px solid var(--entry-title-background-color); justify-content: center; padding: 0.75em 0; z-index: 9; box-shadow: 0 2px 0 var(--entry-shadow-color); } @media (min-width: 1024px) { #lj_controlstrip { transform: translateY(-100%); position: fixed; transition: transform 0.7s; z-index: 9; } #lj_controlstrip:before { content: ""; position: absolute; bottom: -60px; height: 60px; width: 60px; right: 20px; } #lj_controlstrip:after { font-family: "Material Icons"; content: "more_horiz"; font-size: 24px; position: absolute; bottom: -60px; height: 40px; width: 40px; right: 20px; cursor: pointer; line-height: 40px; text-align: center; background: var(--entry-title-background-color); color: var(--entry-title-color); border-radius: 50%; background-clip: padding-box; box-shadow: 0 0 0 1px var(--entry-shadow-color); text-shadow: 0 1px 2px var(--entry-title-shadow-color), 0 0 5px var(--entry-title-color); } #lj_controlstrip:hover { transform: translateY(0); } } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: 1.5; padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--entry-border-color); background: var(--entry-background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { border: 0; background: transparent; text-transform: uppercase; font-size: var(--text-size); color: var(--text-color); font-family: var(--main-font); padding: 0.25em; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a img { border: 1px solid var(--entry-border-color); padding: 5px; border-radius: 50%; } Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Barlow&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout".

RESOURCES

icon font by Google
background image from unsplash.com

comments

Wired

Sun, 21 Mar 2021 18:58:42 GMT

Posted by: rosecarmine

LIVE PREVIEW

FEATURES

sidebar image (400x400px)
navigation links, links list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Basic Boxes" and apply any theme.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "icons" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
In the same section, select "Responsive" for "Indentation for nested comment threads" (optional).
Click on the "Modules" tab. Set "Custom text" to number 1, "Navigation" to number 2 and "Links list" to number 4. Uncheck the other modules.
Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". /*------------------------------------- - layout - wired (basic boxes) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://material.io -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #525372; --line-height: 1.5; --background-color: #f9f9ff; --border-color: #d9d9ff; --link-color: #7369e9; --link-hover-color: #58597a; --icon-color: #aaaaff; --icon-hover-color: #f9f9ff; --icon-background-hover-color: #d9d9ff; --entry-width: 1000px; --main-font: Archivo Narrow, sans-serif; --title-font: Archivo Narrow, sans-serif; --sidebar-width: 35vw; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/88274.jpg"); --sidebar-image-width: 400px; --sidebar-image-height: 400px; } /*--------------- fonts ---------------*/ @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2"); } /*--------------- general ---------------*/ @media (min-width: 800px) { html, body { height: 100%; } } H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { background: var(--background-color); border: 0; color: var(--text-color); line-height: var(--line-height); font-family: var(--main-font); font-size: var(--text-size); margin: 0; } html body { margin: 0; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited, a:active { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { position: relative; padding: 1.5em 1em 1em; margin: 2em 0 1em; font-style: italic; border: 1px solid var(--border-color); border-radius: 4px; } blockquote:before { content: "format_quote"; top: -21px; left: 50%; margin-left: -21px; position: absolute; width: 40px; height: 40px; display: block; font-family: Material Icons; font-size: 30px; line-height: 40px; text-align: center; color: var(--icon-color); font-style: normal; border: 1px solid var(--border-color); background: var(--background-color); border-radius: 4px; } textarea { border: 1px solid var(--border-color); border-radius: 4px; } /*------------ content layout ------------*/ #canvas { max-width: var(--entry-width); background: var(--background-color); } @media (min-width: 800px) { #canvas { margin-left: 50px; border-left: 1px solid var(--border-color); min-height: 100%; } } @media (min-width: 1024px) { #canvas { padding-left: var(--sidebar-width); border-right: 1px solid var(--border-color); } } @media (min-width: 800px) { #content { padding-bottom: 10px; } #content > .inner:first-child { border-bottom: 1px solid var(--border-color); } } #primary > .inner:first-child, #secondary > .inner:first-child { padding: 0; } /*--------------- header ---------------*/ #journaltitles-container { padding: 2em; } h1#title { font-family: var(--title-font), serif; font-size: 2em; text-transform: uppercase; margin: 0; padding: 0; line-height: 1; } h1#title a, h1#title a:hover { color: inherit; } h2#subtitle { font-size: 1em; margin: 0; font-weight: normal; padding: 0; } h2#pagetitle { display: none; } @media (min-width: 1024px) { #header .module-wrapper { position: fixed; left: 0; top: 0; height: 100%; width: 51px; } } .module-navlinks { border-bottom: 1px solid var(--border-color); } .module-navlinks ul { display: flex; flex-wrap: wrap; } .module-navlinks li { list-style: none; border-right: 1px solid var(--border-color); } .module-navlinks li a { width: 50px; height: 50px; display: block; padding: 0; overflow: hidden; color: var(--icon-color); } .module-navlinks li a:hover { color: var(--icon-hover-color); background: var(--icon-background-hover-color); } .module-navlinks li a:before { width: 50px; height: 50px; display: block; font-family: Material Icons; font-size: 22px; line-height: 50px; text-align: center; vertical-align: middle; } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "today"; } .list-item-read a:before { content: "library_books"; } .list-item-network a:before { content: "public"; } .list-item-tags a:before { content: "style"; } .list-item-memories a:before { content: "collections_bookmark"; } .list-item-userinfo a:before { content: "account_box"; } @media (min-width: 1024px) { .module-navlinks { padding-top: 50px; } .module-navlinks li { border-top: 1px solid var(--border-color); } } /*------------ entries ------------*/ .entry { border-top: 1px solid var(--border-color); } @media (min-width: 800px) { .entry, .full .comment { padding-right: 150px; } .entry > .inner:first-child, .full .comment > .inner:first-child { border-right: 1px solid var(--border-color); } } .entry .header { border-bottom: 1px solid var(--border-color); } .sticky-entry-icon, .admin-post-icon { display: none; } .has-subject .entry .entry-title { font-size: 1.5em; font-family: var(--title-font); padding: calc(var(--text-size) * 2); box-sizing: border-box; text-transform: uppercase; line-height: 1; margin: 0; border-bottom: 1px solid var(--border-color); font-weight: normal; } .no-subject .entry-title { padding: 0; margin: 0; border-bottom: 1px solid transparent; } @media (min-width: 800px) { .entry .header { border-bottom: 0; } .has-subject .entry .entry-title { float: left; width: 100%; border-bottom: 0; } } .entry .datetime a { color: var(--text-color); } .entry .datetime a:hover { color: var(--link-color); } .entry .restrictions, .entry .access-filter, .entry .date, .entry .time { border-right: 1px solid var(--border-color); padding: 0.5em; line-height: 1; display: inline-block; } .restrictions, .access-filter { text-transform: uppercase; } .entry .restrictions img, .entry .access-filter img { display: none; } .security-protected .access-filter:before { content: "LOCKED"; } .security-private .access-filter:before { content: "PRIVATE"; } .restrictions-NSFW .restrictions:before { content: "NSFW"; } .restrictions-18 .restrictions:before { content: "18+"; } @media (min-width: 800px) { .entry .restrictions, .entry .access-filter, .entry .date, .entry .time { float: right; width: 150px; margin-right: -151px; clear: right; border-right: 0; border-bottom: 1px solid var(--border-color); text-align: center; padding: 0.5em 0; } } .has-userpic .userpic { float: right; clear: right; padding: 5px; border-left: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: var(--background-color); } .userpic img { display: block; border-radius: 5px; margin: 0 auto; max-width: 50px; max-height: 50px; width: auto; height: auto; } @media (min-width: 600px) { .userpic img { max-width: 100px; max-height: 100px; width: auto; height: auto; } } .entry .poster { font-size: 0; display: block; border-bottom: 1px solid var(--border-color); text-align: right; } .entry .poster .ljuser { font-size: var(--text-size); padding: 0.5em; line-height: 1; border-left: 1px solid var(--border-color); display: inline-block; } @media (min-width: 800px) { .has-userpic .userpic { width: 100px; padding: 25px; margin-right: -151px; border-left: 0; text-align: center; } .entry .poster { float: right; clear: right; margin-right: -151px; width: 150px; text-align: center; border-bottom: 0; } .entry .poster .ljuser { display: block; padding: 0.5em 0.25em; border-left: 0; border-bottom: 1px solid var(--border-color); } } .entry .poster a, .full .poster a { color: var(--text-color); } .entry .poster a:hover, .full .poster a:hover { color: var(--link-color); } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster .ljuser { white-space: normal !important; } .poster { word-wrap: break-word; } .poster.empty { border: 1px solid transparent; } .entry-content { margin: 2em; clear: left; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action img { display: none; } .cut-wrapper{ display: inline-flex; align-items: center; border: 1px solid var(--border-color); border-radius: 4px; padding: 5px; } .cuttag-action:before { content: "content_cut"; display: block; font-family: Material Icons; font-size: 22px; line-height: 22px; margin-right: 5px; color: var(--icon-color); } .cuttag-action-after:before { display: inline-block; border: 1px solid var(--border-color); border-radius: 4px; padding: 5px; } .cut-open, .cut-close { display:none; } .cut-text { font-size: var(--text-size); text-transform: lowercase; font-weight: normal; } .metadata ul { list-style: none; margin: 0; padding: 0; line-height: 1.2; } .metadata li { display: flex; border-top: 1px solid var(--border-color); } #metadata-music .metadata-label:before { content: "library_music"; } #metadata-mood .metadata-label:before { content: "sentiment_satisfied_alt"; } #metadata-location .metadata-label:before { content: "location_on"; } #metadata-xpost .metadata-label:before { content: "add_location"; } .metadata-label { min-width: 40px; border-right: 1px solid var(--border-color); overflow: hidden; font-size: 0; text-align: center; } .metadata-label:before { font-family: Material Icons; font-size: 22px; line-height: 40px; display: block; width: 40px; height: 40px; color: var(--icon-color); } .metadata li img { margin-left: 0.5em; align-self: center; } .metadata-item { align-self: center; padding: 0.25em 0.5em; } .entry .tag { border-top: 1px solid var(--border-color); display: flex; line-height: 1.2; } .entry .tag-text { min-width: 40px; border-right: 1px solid var(--border-color); overflow: hidden; font-size: 0; } .entry .tag-text:before { content: "local_offer"; font-family: Material Icons; font-size: 22px; line-height: 40px; display: block; width: 40px; height: 40px; color: var(--icon-color); text-align: center; } .entry .tag ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0.25em 0.5em; align-items: center; } .tag ul li { display: inline; margin-right: 0.25em; } .entry .tag a, .metadata a { color: var(--text-color); } .entry .tag a:hover, .metadata a:hover { color: var(--link-color); } .tag-nav-trigger, .tag-nav-actions input { align-self: center; } ul.entry-management-links, ul.entry-interaction-links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; border-top: 1px solid var(--border-color); } ul.entry-management-links li { border-right: 1px solid var(--border-color); } ul.entry-management-links.text-links li { line-height: 1; padding: 0.5em; } ul.entry-management-links li a img { display: none; } ul.entry-management-links.icon-links li a { display: block; width: 40px; height: 40px; color: var(--icon-color); } ul.entry-management-links.icon-links li a:hover { color: var(--icon-hover-color); background: var(--icon-background-hover-color); } ul.entry-management-links li a:before { display: block; font-family: Material Icons; width: 40px; height: 40px; font-size: 22px; line-height: 40px; text-align: center; } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "more"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "add_alert"; } .icon-links .link_next a:before { content: "arrow_forward"; } ul.entry-interaction-links { margin: 0; padding: 0; list-style: none; justify-content: flex-end; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-bottom: -1px; line-height: 1; } .entry-interaction-links li { border-left: 1px solid var(--border-color); padding: 0.5em; } .entry-interaction-links a, .entry-management-links a { color: var(--title-color); } .entry-interaction-links a:hover, .entry-management-links a:hover { color: var(--link-color); } .entry > .inner:first-child:after { content: ""; display: block; clear: both; } /*------------ comments ------------*/ .comment-pages { padding: 1.5em 2em; border-top: 1px solid var(--border-color); } .comment-thread { border-top: 1px solid var(--border-color); } .page-reply .comment { border-top: 1px solid var(--border-color); } .comment-thread:not(.comment-depth-1) .full { border-left: 1px solid var(--border-color); margin-left: -1px; } .comment { min-width: 15em; } .dwexpcomment { margin-top: 0 !important; } .full .thread-depth { border-right: 1px solid var(--border-color); padding: 0.5em; } .comment .comment-title { margin: 0; } .no-subject .comment .comment-title { background: none; padding: 0; margin: 0; border: 0; } .full .comment-title { font-family: var(--title-font); font-size: 1em; font-weight: normal; line-height: 1; padding: 1em; order: -1; flex: 0 0 100%; margin: 0; border-bottom: 1px solid var(--border-color); box-sizing: border-box; } .comment-date-text, .comment-from-text, .comment-ip-text { display: none; } .comment .header { float: left; width: 100%; box-sizing: border-box; line-height: 1; border-bottom: 1px solid var(--border-color); } .comment .header .inner { display: flex; flex-wrap: wrap; align-items: center; } .comment .header .datetime { border-right: 1px solid var(--border-color); padding: 0.5em; } .full .poster { display: block; border-bottom: 1px solid var(--border-color); text-align: right; } .full .poster .ljuser, .poster .anonymous { padding: 0.5em; line-height: 1; border-left: 1px solid var(--border-color); display: inline-block; } .comment .poster-ip { display: block; border-bottom: 1px solid var(--border-color); line-height: 1; padding: 0.5em; } @media (min-width: 800px) { .full .poster { float: right; clear: right; margin-right: -151px; width: 150px; text-align: center; border-bottom: 0; } .full .poster .ljuser, .poster .anonymous { display: block; padding: 0.5em 0.25em; border-left: 0; border-bottom: 1px solid var(--border-color); } .comment .poster-ip { float: right; clear: right; margin-right: -151px; width: 150px; display: block; text-align: center; padding: 0.5em 0.25em; box-sizing: border-box; } } .comment-content { padding: 2em; clear: left; } .partial { padding: 2em; clear: both; } .partial .comment-title { display: inline-block; margin-right: 0.25em; } .partial .thread-depth { margin-right: 0.5em; } .comment .multiform-checkbox { display: block; border-top: 1px solid var(--border-color); line-height: 1; padding: 0.5em; } ul.comment-management-links { display: flex; margin: 0; padding: 0; border-top: 1px solid var(--border-color); list-style: none; flex-wrap: wrap; } ul.comment-management-links li { border-right: 1px solid var(--border-color); } ul.comment-management-links.text-links li { line-height: 1; padding: 0.5em; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a { display: block; width: 40px; height: 40px; color: var(--icon-color); } ul.comment-management-links.icon-links li a:hover { color: var(--icon-hover-color); background: var(--icon-background-hover-color); } ul.comment-management-links.icon-links li a:before { width: 40px; height: 40px; display: block; font-family: Material Icons; font-size: 22px; line-height: 40px; text-align: center; } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } ul.comment-interaction-links { display: flex; margin: 0; padding: 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-bottom: -1px; list-style: none; line-height: 1; justify-content: flex-end; flex-wrap: wrap; } ul.comment-interaction-links li { padding: 0.5em; border-left: 1px solid var(--border-color); } .comment-interaction-links a, .comment-management-links a { color: var(--title-color); } .comment-interaction-links a:hover, .comment-management-links a:hover { color: var(--link-color); } .comment > .inner:first-child:after { content: ""; display: block; clear: both; } .bottomcomment ul.entry-management-links, .bottomcomment ul.entry-interaction-links, .comment-pages.bottompages { display: none; } .bottomcomment { border-top: 1px solid var(--border-color); padding: 0 2em; margin-bottom: -1px; } #postform { width: auto; padding: 2em; border-top: 1px solid var(--border-color); margin-top: -1px; } #qrformdiv { padding: 0; max-width: 100%; } #qrform { border-top: 1px solid var(--border-color); padding: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--border-color); border-radius: 4px; } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: 1em; padding: 0.5em; color: var(--link-color); line-height: 1; font-family: var(--main-font); border: 1px solid var(--border-color); border-radius: 4px; } #qrdiv .ljuser img, #talkform-from img { display: none; } #qrformdiv .qr-meta .ljuser { font-size: inherit; } #qrformdiv .qr-meta .ljuser b { font-weight: normal; color: var(--text-color); } #talkform-from label { font-weight: normal; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .page-month .month, .tags-container, .icons-container { border-top: 1px solid var(--border-color); } @media (min-width: 800px) { .month-wrapper, .page-month .month, .tags-container, .icons-container { padding-right: 150px; } .month-wrapper div.month, .page-month .month .inner, .tags-container > .inner:first-child, .icons-container > .inner:first-child { border-right: 1px solid var(--border-color); } .month-wrapper .header, .tags-container .header, .icons-container .header { float: right; margin-right: -151px; width: 150px; } } .month-wrapper .header, .tags-container .header, .icons-container .header { text-align: center; text-transform: uppercase; border-bottom: 1px solid var(--border-color); } .month-wrapper .contents, .tags-container .contents, .icons-container .contents { padding: 2em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1em; line-height: 1; font-weight: normal; padding: 0.5em 0.25em; margin: 0; } #archive-year .month .footer .inner a, #primary .manage-link a { text-transform: uppercase; line-height: 1; text-align: center; border-top: 1px solid var(--border-color); padding: 0.5em 0.25em; display: block; color: var(--text-color); } #archive-year .month .footer .inner a:hover, #primary .manage-link a:hover { color: var(--link-color); } @media (min-width: 800px) { #archive-year .month .footer .inner, #primary .manage-link { float: right; clear: right; margin-right: -151px; width: 150px; display: block; margin-top: -2em; } } /*------------ archive ------------*/ .month caption { display: none; } .day-date { display: none; } .month table { border: none; text-align: center; border-spacing: 2px; width: 100%; line-height: 1; } table.month { margin: 0 auto; } table.month td, table.month th { width: 3.25em; height: 2em; padding: 0.25em; border: 1px solid var(--border-color); border-radius: 4px; } table.month td p { margin: 0; display: inline; } table.month td p:before { content: "[ "; } table.month td p:after { content: " ]"; } table.month td.day-has-entries .label { font-weight: bold; } .month dl { margin: 0; } .month dt { display: block; text-align: center; line-height: 1; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 0.5em 0; } @media (min-width: 800px) { .month dt { float: right; margin-right: -151px; width: 150px; } } .month dt:first-child { border-top: 0; } .month dl h3 { font-size: 1em; } .month dd { margin: 0; padding: 2em; } .month dl h3 { font-size: 1em; padding: 0; margin: 0; display: inline; } .month dl .time { padding-right: 0.5em; } .page-month .month .entry-poster { margin-right: 0.5em; } .page-month .month .entry-poster.empty { margin-right: 0; } .month .tag ul { display: inline; margin: 0; padding: 0; } .month dl br { display: block; } #archive-year .navigation ul, #archive-month .navigation ul form { margin: 0; padding: 2em; display: flex; flex-wrap: wrap; list-style: none; } #archive-year .navigation li, #archive-month .navigation li { list-style: none; border: 1px solid var(--border-color); margin: 2px; border-radius: 4px; padding: 0.5em; line-height: 1; } /*------------ tags ------------*/ ul.ljtaglist { padding: 0; margin-left: 1em; list-style: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0 0 1.5em; padding: 0; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { margin-top: 1.5em; } .icon { border: 1px solid var(--border-color); margin-top: 1em; display: flex; border-radius: 4px; } .icon-image { border-right: 1px solid var(--border-color); padding: 1em; } .icon-image img { display: block; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } .icon-info { padding: 2em; display: flex; flex-wrap: wrap; align-items: center; } .default.label { width: 40px; height: 40px; border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; } .default.label:before { content: "star"; font-family: Material Icons; font-size: 22px; line-height: 22px; color: var(--entry-icon-color); padding: 9px; display: block; color: var(--icon-color); } .icon-info div { margin-right: 1em; } /*------------ modules ------------*/ #secondary::-webkit-scrollbar { width: 10px; height: 10px; } #secondary::-webkit-scrollbar-track { background: var(--background-color); } #secondary::-webkit-scrollbar-thumb { background: var(--border-color); border-left: 5px solid var(--background-color); } #secondary::-webkit-scrollbar-corner { background: var(--border-color); } #secondary { border-top: 1px solid var(--border-color); background: var(--background-color); } #secondary .module-wrapper { padding: 0.5em 2em; } @media (min-width: 1024px) { #secondary { position: fixed; bottom: 0; left: 51px; width: var(--sidebar-width); height: 100%; border-right: 1px solid var(--border-color); border-top: 0; overflow: auto; z-index: 3; margin: 0; } #secondary > .inner:first-child { height: 100%; box-sizing: border-box; position: relative; display: flex; } .module-section-one:before { content: ""; display: block; width: 100%; height: var(--sidebar-image-height); margin: 1.5em 0; background-image: var(--sidebar-image); background-repeat: no-repeat; background-position: center center; border-radius: 7px; } #secondary .module-wrapper { margin: auto; max-width: var(--sidebar-image-width); width: 100%; } } .module-section-one .module { text-align: center; margin: 1.5em 0; } .module-content ul { list-style: none; margin: 0; padding: 0; } .module-section-one .module-content ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; } .module-section-one .module-content li { flex-grow: 1; text-align: center; line-height: 1; } @media (min-width: 1024px) { .module-section-one .module-content li { min-width: 50%; } } .module-section-one .module-content li a { display: block; margin: 1px; border: 1px solid var(--border-color); padding: 0.5em; border-radius: 4px; } .module-section-one .module-content li a:hover { color: var(--link-hover-color); } .module-section-one .module-customtext .module-content { font-style: italic; text-align: left; } @media (min-width: 800px) { .module-customtext .module-content { text-align: justify; } } .module h2, .module-userprofile, .module-calendar, .module-tags_list, .module-tags_multilevel, .module-tags_cloud, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered, .module .manage-link { display: none; } /*------------ navigation ------------*/ .topnav, #primary .page-separator { display: none; } .navigation ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--border-color); } #entries .navigation li { list-style: none; padding: 0; } #entries .navigation li a { width: 50px; height: 50px; display: block; overflow: hidden; border-right: 1px solid var(--border-color); color: var(--icon-color); } #entries .navigation li a:hover { color: var(--icon-hover-color); background: var(--icon-background-hover-color); } #entries .navigation li a:before { width: 50px; height: 50px; display: block; font-family: Material Icons; font-size: 22px; line-height: 50px; text-align: center; vertical-align: middle; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } .navigation.empty, .noentries { display: none; } @media (min-width: 800px) { #entries .navigation ul { position: fixed; left: 0; bottom: 51px; width: 50px; border-top: 0; } #entries .navigation li a { border-top: 1px solid var(--border-color); } } /*------------ footer ------------*/ #footer { border-top: 1px solid var(--border-color); } @media (min-width: 800px) { #footer { position: fixed; width: 50px; height: 50px; bottom: 0px; left: 0px; } } .page-top a { display: block; width: 50px; height: 50px; overflow: hidden; border-right: 1px solid var(--border-color); color: var(--icon-color); } .page-top a:hover { color: var(--icon-hover-color); background: var(--icon-background-hover-color); } .page-top a:before { display: block; font-family: Material Icons; font-size: 22px; width: 50px; height: 50px; line-height: 50px; text-align: center; content: "arrow_upward"; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--background-color); border: 1px solid var(--border-color); padding: 0; border-radius: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); width: 200px; text-align: center; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; padding: 0.5em; border-top: 1px solid var(--border-color); margin: 0; } div.ContextualPopup .Userpic { border: 0; float: none; padding: 25px; } div.ContextualPopup .Userpic img { max-width: 100px; max-height: 100px; width: auto; height: auto; border-radius: 5px; display: block; margin: 0 auto; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; } div.ContextualPopup li { padding: 0.5em; border-top: 1px solid var(--border-color); line-height: 1; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--background-color); color: var(--text-color); justify-content: center; padding: 0.75em 0; border-bottom: 1px solid var(--border-color); width: 100%; } @media (min-width: 800px) { #lj_controlstrip { transform: translateY(-100%); position: fixed; transition: transform 0.7s; z-index: 9; } #lj_controlstrip:after { font-family: "Material Icons"; content: "more_horiz"; font-size: 22px; position: absolute; bottom: -52px; height: 50px; width: 50px; left: 0; cursor: pointer; line-height: 50px; text-align: center; color: var(--icon-color); background: var(--background-color); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); transition: all 0.4s ease; } #lj_controlstrip:hover:after { color: var(--icon-hover-color); background: var(--icon-background-hover-color); } #lj_controlstrip:hover { transform: translateY(0); } } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { text-decoration: none; color: var(--link-hover-color); } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { font-weight: normal; font-size: var(--text-size); color: var(--text-color); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--border-color); border-radius: 4px; } #lj_controlstrip input[type="submit"] { background: transparent; border: 0; font-size: 1em; padding: 0.5em; color: var(--link-color); line-height: 1; font-family: var(--main-font); border: 1px solid var(--border-color); border-radius: 4px; } #lj_controlstrip_userpic a img { border-radius: 4px; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Archivo+Narrow&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout".

RESOURCES

icon font by Google
image from unsplash.com

comments

Red ribbon

Sun, 07 Mar 2021 13:26:01 GMT

Posted by: rosecarmine

Live preview
Features:

navigation links, links list, tags list, custom text
comment pages
icon pages

Code:

/*-------------------------------------

- layout - red ribbon (basic boxes) - https://myrtillenne.dreamwidth.org 
- icon font - material icons - https://material.io

-------------------------------------*/

/*--------------- options ---------------*/

:root {
  --text-size: 16px;
  --text-color: #6b4634;
  --line-height: 1.5;
  --body-background-color: #f2e8d0;
  --link-color: #da1b50;
  --link-hover-color: #6b4634;
  --content-width: 800px;
  --main-font: Lora, serif;
  --title-font: Rochester, serif;
  --ribbon-background-color: #e83c6b;
  --navlinks-color: #f2e8d0;
  --navlinks-hover-color: #f9f3e8;
  --content-background-color: #e3d1a3;
  --content-border-color: #e3d1a3;
  --content-background-image: url("https://rosecarmine.dreamwidth.org/file/86275.jpg");
  --entry-background-color: #f9f3e8;
  --entry-border-color: #986349;
  --title-color: #986349;
  --icon-size: 100px;
}

/*--------------- fonts ---------------*/

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2)
    format("woff2");
}

/*--------------- general ---------------*/

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

img {
  border: none;
}

hr {
  display: none;
}

body {
  background: var(--body-background-color);
  border: 0;
  color: var(--text-color);
  line-height: var(--line-height);
  font-family: var(--main-font);
  font-size: var(--text-size);
  margin: 0;
}

html body {
  margin: 0;
}

a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover-color);
}

a,
a:link,
a:visited,
a:active {
  text-decoration: none;
  transition: all 0.4s ease;
}

q {
  font-style: italic;
}

blockquote {
  position: relative;
  padding: 1em;
  margin: 1.5em 0 1em;
  font-style: italic;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image: linear-gradient(
      to right,
      transparent,
      var(--entry-border-color),
      transparent
    )
    1;
}

blockquote:after {
  content: "format_quote";
  font-size: 40px;
  font-family: Material Icons;
  color: var(--title-color);
  position: absolute;
  font-style: normal;
  top: -20px;
  left: 0;
  right: 0;
  line-height: 40px;
  width: 40px;
  height: 40px;
  background: var(--entry-background-color);
  margin: 0 auto;
}

textarea {
  border: 1px dashed var(--content-border-color);
}

/*------------ content layout ------------*/

#canvas {
  margin: 20px 0;
}

@media (min-width: 600px) {
  #canvas {
    margin: 50px;
  }

#canvas > .inner:first-child {
    margin: 0 auto;
    max-width: var(--content-width);
    background-image: var(--content-background-image);
    background-color: var(--content-background-color);
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    border-radius: 3px;
  }
}

#content {
  background: var(--entry-background-color);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  padding: 10px;
}

#content > .inner:first-child {
  border: 1px dashed var(--content-border-color);
  padding: 0 2em 1em;
}

#primary,
#secondary {
  clear:both;
}

#primary > .inner:first-child,
#secondary > .inner:first-child {
  padding: 0;
}

/*--------------- header ---------------*/

#header {
  text-align: center;
  padding-top: 2em;
  float: left;
  width: 100%;
  margin: 0;
}

#journaltitles-container {
  padding: 1.5em 2em;
}

h1#title {
  font-family: var(--title-font), serif;
  font-size: 2em;
  font-weight: normal;
  color: var(--title-color);
  margin: 0;
  line-height: 1;
}

h1#title a,
h1#title a:hover {
  color: inherit;
}

h2#subtitle {
  font-size: 1em;
  margin: 0;
  font-style: italic;
  font-weight: normal;
  padding-top: 0;
}

h2#pagetitle {
  display: none;
}

#header .module-wrapper {
  background-color: var(--ribbon-background-color);
  border-top: 1px solid var(--ribbon-background-color);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0px 8px 4px -5px rgba(0, 0, 0, 0.3);
}

@media (min-width: 600px) {
  #header .module-wrapper {
    position: relative;
    margin: 0 -30px;
    border-left: 3px solid rgba(0, 0, 0, 0.1);
    border-right: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px 3px 0 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

#header .separator-before,
  #header .separator-after {
    content: "";
    position: absolute;
    display: block;
    bottom: -30px;
    border: 20px solid var(--ribbon-background-color);
    z-index: -2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  }

#header .separator-before {
    left: -25px;
    border-right-width: 20px;
    border-left-color: transparent;
  }

#header .separator-after {
    right: -25px;
    border-left-width: 20px;
    border-right-color: transparent;
  }

#header .separator-before .inner {
    content: "";
    display: block;
    width: 15px;
    height: 40px;
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent);
    z-index: -1;
  }

#header .separator-after .inner {
    content: "";
    display: block;
    width: 15px;
    height: 40px;
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
    z-index: -1;
  }

#header .module-wrapper:before,
  #header .module-wrapper:after {
    border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
    position: absolute;
    display: block;
    border-style: solid;
    bottom: -16px;
    content: "";
  }

#header .module-wrapper:before {
    left: -3px;
    border-width: 15px 0 0 15px;
  }

#header .module-wrapper:after {
    right: -3px;
    border-width: 15px 15px 0 0;
  }
}

.module-section-header {
  padding: 0.5em;
  width: 100%;
  box-sizing: border-box;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3),
    transparent
  );
}

.module-navlinks li {
  text-transform: uppercase;
}

.module-navlinks a {
  color: var(--navlinks-color);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  font-size: 1em;
}

.module-navlinks a:hover {
  color: var(--navlinks-hover-color);
}

/*------------ entries ------------*/

.entry,
.comment {
  margin: 1.5em 0;
}

.entry .header .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.entry .datetime {
  display: flex;
  font-style: italic;
  padding: 0 1em;
  order: -1;
  flex: 0 0 100%;
  align-items: center;
}

.entry .datetime:before {
  content: "";
  height: 1px;
  background: linear-gradient(to right, transparent, var(--entry-border-color));
  flex: 1;
  margin-right: 0.5em;
}

.entry .datetime:after {
  content: "";
  height: 1px;
  background: linear-gradient(to left, transparent, var(--entry-border-color));
  flex: 1;
  margin-left: 0.5em;
}

.entry .datetime span {
  margin: 0 0.25em;
}

.entry .datetime,
.entry .datetime a,
.comment .header .datetime {
  color: var(--text-color);
}

.entry .entry-title {
  font-family: var(--title-font), serif;
  font-size: 2em;
  font-weight: normal;
  line-height: 1;
  color: var(--title-color);
  flex: 0 0 100%;
}

.entry .entry-title a {
  color: var(--title-color);
}

.entry .entry-title a:hover {
  color: var(--link-color);
}

.no-subject .entry .entry-title {
  padding: 0;
}

.admin-post-icon,
.sticky-entry-icon {
  display: none;
}

.restrictions img,
.access-filter img {
  display: none;
}

.security-protected .access-filter:before {
  content: "LOCKED";
  margin: 0 0.25em;
}

.security-private .access-filter:before {
  content: "PRIVATE";
  margin: 0 0.25em;
}

.restrictions-NSFW .restrictions:before {
  content: "NSFW";
  margin: 0 0.25em;
}

.restrictions-18 .restrictions:before {
  content: "18+";
  margin: 0 0.25em;
}

.entry .contents {
  margin-top: 1.5em;
}

.has-userpic .userpic {
  float: right;
  margin-left: 1em;
  shape-outside: circle(50%);
  position: relative;
  z-index: 1;
}

.userpic img {
  display: block;
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
  border: 2px solid var(--content-border-color);
  border-radius: 50%;
}

@media (min-width: 800px) {
  .userpic img {
    max-width: var(--icon-size);
    max-height: var(--icon-size);
  }
}

.entry .poster {
  display: block;
  padding-top: 1.5em;
}

.entry .poster {
  font-size: 0;
}

.entry .poster .ljuser {
  font-size: var(--text-size);
  padding-right: 0.25em;
}

.entry .poster .ljuser:nth-child(1):before {
  content: "Written by ";
}

.entry .poster .ljuser:nth-child(2):before {
  content: "in ";
}

.poster.empty,
.poster .ljuser img {
  display: none;
}

.poster .ljuser b {
  font-weight: normal;
}

.entry-content,
.comment-content {
  margin: 1.5em 0;
}

@media (min-width: 800px) {
  .entry-content {
    text-align: justify;
  }
}

.entry-content ol,
.comment-content ol,
.entry-content ul,
.comment-content ul {
  padding-left: 1em;
}

.entry-content li,
.comment-content li {
  list-style-position: inside;
}

.entry-content img,
.comment-content img {
  max-width: 100%;
  height: auto;
}

.cuttag-action {
  display: flex;
  align-items: center;
  line-height: 1;
}

.cuttag-action img {
  display: none;
}

.cuttag-action:before {
  content: "content_cut";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--title-color);
  margin-right: 5px;
}

.cuttag-action:after {
  content: "";
  height: 0;
  width: 100%;
  border-bottom: 1px dashed var(--entry-border-color);
}

.cut-open, .cut-close {
  display:none;
}

.cut-text{
  font-weight: normal;
  margin-left: 27px;
  display: block;
}

.metadata ul {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

.metadata li,
.entry .tag {
  margin-top: 0.25em;
}

.tag {
  text-align: left;
}

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

.tag ul li {
  display: inline;
}

ul.entry-management-links:before {
  content: "";
  display: block;
  margin-top: 1.5em;
}

ul.entry-management-links,
ul.entry-interaction-links {
  display: inline;
  margin: 0;
  padding: 0;
  font-style: italic;
}

ul.entry-management-links li,
ul.entry-interaction-links li {
  display: inline;
  padding: 0 0.25em;
}

.footer {
  text-align: center;
}

.entry-interaction-links a,
.entry-management-links a {
  color: var(--title-color);
}

.entry-interaction-links a:hover,
.entry-management-links a:hover {
  color: var(--link-color);
}

/*------------ comments ------------*/

.comment-pages {
  text-align: center;
  font-style: italic;
}

.comment-pages:first-child {
  border-top: 1px solid;
  border-image: linear-gradient(
      to right,
      transparent,
      var(--entry-border-color),
      transparent
    )
    1;
  padding-top: 1.5em;
}

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

.comment {
  border-top: 1px solid;
  border-image: linear-gradient(
      to right,
      transparent,
      var(--entry-border-color),
      transparent
    )
    1;
  padding-top: 1.5em;
}

.comment-thread:not(.comment-depth-1) .thread-depth:before {
  content: "subdirectory_arrow_right";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--title-color);
  margin-right: 5px;
}

.full .comment-title {
  text-align: center;
  font-family: var(--title-font);
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1;
  padding: 0.25em 0;
}

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

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

.comment .header .datetime {
  float: left;
}

.comment .userpic {
  float: right;
  margin-left: 1em;
}

.full .poster {
  display: block;
  clear: left;
}

ul.comment-management-links,
ul.comment-interaction-links,
.multiform-checkbox {
  margin: 0;
  padding: 0;
  display: inline;
  font-style: italic;
}

ul.comment-management-links li,
ul.comment-interaction-links li {
  display: inline;
  padding: 0 0.25em;
}

.comment-interaction-links a,
.comment-management-links a {
  color: var(--title-color);
}

.comment-interaction-links a:hover,
.comment-management-links a:hover {
  color: var(--link-color);
}

.bottomcomment ul.entry-management-links,
.bottomcomment ul.entry-interaction-links,
.comment-pages.bottompages {
  display: none;
}

#postform {
  width: auto;
  margin-bottom: 1.5em;
}

#qrformdiv {
  padding: 0;
  max-width: 100%;
}

#qrform {
  margin-top: 1.5em;
}

#qrdiv input,
#qrdiv select,
#qrdiv textarea {
  border: 1px dashed var(--content-border-color);
}

#qrdiv input[type="button"],
#qrdiv input[type="submit"] {
  background: transparent;
  border: 0;
  font-size: 1em;
  padding: 0.5em;
  color: var(--link-color);
  line-height: 1;
  font-family: var(--main-font);
  font-style: italic;
}

#qrdiv .ljuser img,
#talkform-from img {
  display: none;
}

#qrformdiv .qr-meta .ljuser {
  font-size: inherit;
}

#qrformdiv .qr-meta .ljuser b {
  font-weight: normal;
  color: var(--text-color);
}

#talkform-from label {
  font-weight: normal;
}

/*------------ archive, tags, icons containers ------------*/

.month-wrapper,
.tags-container,
.icons-container {
  margin: 1.5em 0;
}

.month .header,
.tags-container .header,
.icons-container .header {
  position: relative;
  text-align: center;
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-weight: normal;
  background: var(--entry-background-color);
  display: inline-block;
  font-style: italic;
  font-size: 1em;
  position: relative;
  z-index: 1;
  padding: 0 0.75em;
}

.month .header:before,
.tags-container .header:before,
.icons-container .header:before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--entry-border-color),
    transparent
  );
  position: absolute;
  top: 50%;
  left: 0;
}

.month .contents,
.tags-container .contents,
.icons-container .contents {
  margin: 1.5em 0;
}

.month .footer,
.tags-container .footer,
.icons-container .footer {
  font-style: italic;
}

#primary .manage-link {
  border-top: 1px solid;
  border-image: linear-gradient(
      to right,
      transparent,
      var(--entry-border-color),
      transparent
    )
    1;
  padding-top: 1.5em;
}

.month .footer a,
#primary .manage-link a {
  color: var(--title-color);
}

.month .footer a:hover,
#primary .manage-link a:hover {
  color: var(--link-color);
}

/*------------ archive ------------*/

.month caption {
  display: none;
}

.day-date {
  display: none;
}

.month table {
  border: none;
  text-align: center;
  border-collapse: collapse;
  width: 80%;
}

table.month {
  margin: 0 auto;
}

table.month td {
  width: 3.25em;
  height: 3.25em;
  padding: 0.25em;
  border-bottom: 1px solid var(--entry-border-color);
}

table.month th {
  padding: 0.25em;
  font-style: italic;
  border-bottom: 1px solid var(--entry-border-color);
}

table.month td p {
  margin: 0;
  display: inline;
}

table.month td p:before {
  content: "( ";
}

table.month td p:after {
  content: " )";
}

table.month td.day-has-entries .label {
  font-weight: bold;
}

.month dl {
  margin: 1.5em 0;
}

.month dl dt {
  font-style: italic;
  position: relative;
  z-index: 1;
  text-align: center;
}

.month dl dt:before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--entry-border-color),
    transparent
  );
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
}

.month dl dt a {
  display: inline-block;
  background: var(--entry-background-color);
  color: var(--text-color);
  padding: 0 0.75em;
}

.month dd {
  margin: 1em 1em 0 0;
}

.month dl .time {
  padding-right: 0.5em;
}

.month dl h3 {
  display: inline;
  font-size: 1em;
  font-weight: normal;
}

.page-month .month .entry-poster {
  margin-right: 0.5em;
}

.month dl .tag ul {
  margin-top: 0;
}

/*------------ tags ------------*/

ul.ljtaglist {
  padding: 0;
  margin-left: 1em;
  list-style: inside;
}

ul.ljtaglist:first-child,
.tags_cloud ul {
  padding: 0;
  margin: 0;
}

/*------------ icons page ------------*/

.sorting-options ul {
  margin: 0 0 1.5em;
  padding: 0;
  text-align: center;
}

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

.page-icons .toppages {
  display: none;
}

.page-icons .bottompages {
  text-align: center;
  margin-top: 1.5em;
}

.icon {
  border-top: 1px solid var(--entry-border-color);
  padding: 1em 1em 0;
  margin: 1em auto 0;
  overflow: hidden;
  width: 80%;
  box-sizing: border-box;
}

.icon-image {
  float: left;
  margin-right: 1em;
}

.icon-image img {
  display: block;
}

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

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

.icon-pages p {
  margin: 0;
}

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

/*------------ modules ------------*/

.module-section-one .module {
  text-align: center;
  margin: 1.5em 0;
}

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

.module-content li {
  display: inline-block;
  padding: 0 0.5em;
}

.module-tags_cloud li,
.module-tags_cloud li a {
  font-size: 1em !important;
  padding: 0 0.25em;
  color: var(--title-color);
}

.module-tags_cloud li a:hover {
  color: var(--link-color);
}

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

.module-customtext .module-content {
  font-style: italic;
  text-align: left;
}

@media (min-width: 800px) {
  .module-customtext .module-content {
    text-align: justify;
  }
}

.module h2,
.module-userprofile,
.module-calendar,
.module-tags_list,
.module-tags_multilevel,
.module-cuttagcontrols,
.module-pagesummary,
.module-active,
.module-credit,
.module-syndicate,
.module-subscriptionfilters,
.module-search,
.module-time,
.module-powered,
.module .manage-link {
  display: none;
}

/*------------ navigation ------------*/

.topnav,
#primary .page-separator {
  display: none;
}

.navigation ul {
  text-align: center;
  font-style: italic;
  border-top: 1px solid;
  border-image: linear-gradient(
      to right,
      transparent,
      var(--entry-border-color),
      transparent
    )
    1;
  padding: 1.5em 0 0;
  margin: 0 0 1.5em;
}

.navigation li {
  display: inline;
  padding: 0 0.5em;
}

.navigation a {
  color: var(--title-color);
}

.navigation a:hover {
  color: var(--link-color);
}

.navigation.empty,
.noentries {
  display: none;
}

/*------------ footer ------------*/

#footer {
  text-align: center;
  margin-top: 20px;
}

@media (min-width: 600px) {
  #footer {
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 10px;
    right: 10px;
  }
}

.page-top {
  width: 30px;
  height: 30px;
  overflow: hidden;
  transition: all ease 0.5s;
  margin: 0 auto;
  border-radius: 30px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.page-top a:before {
  display: block;
  font-family: Material Icons;
  font-size: 24px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  content: "expand_less";
  color: var(--text-color);
  background: var(--entry-background-color);
}

/*------------ contextual pop-up ------------*/

div.ContextualPopup {
  background: var(--entry-background-color);
  border: 0;
  font-family: var(--main-font);
  font-size: 1em;
  color: var(--text-color);
  padding: 1.5em;
  width: 200px;
}

div.ContextualPopup .Relation {
  font-weight: normal;
  border-bottom: 1px solid;
  border-image: linear-gradient(
      to right,
      transparent,
      var(--entry-border-color),
      transparent
    )
    1;
  font-style: italic;
  font-size: 1em;
  text-align: center;
  padding: 1em 0;
}

div.ContextualPopup .Userpic {
  border: 0;
  float: none;
  text-align: center;
}

div.ContextualPopup .Userpic img {
  border: 2px solid var(--content-border-color);
  border-radius: 50%;
}

.ContextualPopup .Actions ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ContextualPopup a {
  color: var(--link-color);
}

.ContextualPopup a:hover {
  color: var(--link-hover-color);
}

/*------------ control strip ------------*/

#lj_controlstrip {
  background: var(--entry-background-color);
  color: var(--text-color);
  justify-content: center;
  padding: 0.75em 0;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  width: 100%;
}

@media (min-width: 600px) {
  #lj_controlstrip {
    transform: translateY(-100%);
    position: fixed;
    transition: transform 0.7s;
    z-index: 9;
  }

#lj_controlstrip:before {
    content: "";
    position: absolute;
    bottom: -40px;
    height: 40px;
    width: 30px;
    right: 10px;
  }

#lj_controlstrip:after {
    font-family: "Material Icons";
    content: "more_horiz";
    font-size: 22px;
    position: absolute;
    bottom: -40px;
    height: 30px;
    width: 30px;
    right: 10px;
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    color: var(--text-color);
    background: var(--entry-background-color);
    border-radius: 30px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

#lj_controlstrip:hover {
    transform: translateY(0);
  }
}

#lj_controlstrip > div {
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  padding: 0.25em 0.5em;
  flex-grow: 0;
}

#lj_controlstrip a {
  font-family: var(--main-font);
  color: var(--link-color);
}

#lj_controlstrip a:hover {
  text-decoration: none;
}

#lj_controlstrip_actionlinks {
  text-align: center;
}

#lj_controlstrip_statustext {
  font-weight: normal;
  font-size: var(--text-size);
  color: var(--text-color);
}

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 1px dashed var(--content-border-color);
}

#lj_controlstrip input[type="submit"] {
  border: 0;
  background: transparent;
  font-size: 1em;
  font-style: italic;
  color: var(--text-color);
  font-family: var(--main-font);
  padding: 0.25em;
}

#lj_controlstrip_userpic a img {
  border-radius: 50%;
  border: 2px solid var(--content-border-color);
}

#lj_controlstrip .ljuser b {
  font-weight: normal;
}

#lj_controlstrip .ljuser img {
  display: none;
}

#lj_controlstrip_user,
#lj_controlstrip_login,
#lj_controlstrip_actionlinks {
  border: 0;
}

How to install:

Go to the "Select style" page, search for "Basic Boxes" and apply any theme.
Choose the "1 Column (modules at top and bottom; no sidebar)" page setup.
Go to the "Customize your theme" page, click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". Paste the following https://fonts.googleapis.com/css2?family=Lora&family=Lora:ital@1&family=Rochester&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab. For the "Tags" module, select "Cloud" from the "Type of tags display" drop-down. Set "Navigation" to number 2, "Links list" to number 4, "Custom text" to number 5 and "Tags" to number 6. Uncheck the other modules.
Click on the "Presentation" tab. In the "Additional options" section select "text-only" for "Select whether entry management links are printed as text or using the available icons" and " Select whether comment management links are printed as text or using the available icons". For "Indentation for nested comment threads" select "Responsive".

Resources:

icon font by Google
background image from subtlepatterns.com

comments

Explorer

Sun, 14 Feb 2021 18:33:27 GMT

Posted by: rosecarmine

Live preview
Features:

header image (800x300px)
default icon, navigation links, links list, custom text
comment pages
icon pages

Code:

/*-------------------------------------
 
- layout - explorer (tabula rasa) - https://myrtillenne.dreamwidth.org
- icon font - material icons - https://material.io
 
-------------------------------------*/

/*--------------- options ---------------*/

:root{
  --text-size:16px;
  --text-color:#BC9EB6;
  --line-height:1.5;
  --body-background-color:#BE6CF4;
  --background-image:url("https://rosecarmine.dreamwidth.org/file/84445.jpg");
  --link-color:#F260C7;
  --link-hover-color:#BE6CF4;
  --main-font:Space Grotesk, sans-serif;
  --title-font:Electrolize, sans-serif;
  --title-shadow-color:#000;
  --header-image:url("https://rosecarmine.dreamwidth.org/file/83799.jpg");
  --header-image-width:800px;
  --header-image-height:300px;
  --entry-background-color:#281B38;
  --entry-border-color:#BE6CF4;
  --sidebar-background-color:rgba(0,0,0,0.6);
  --sidebar-text-color:#BC9EB6;
  --sidebar-link-color:#BE6CF4;
  --sidebar-link-hover-color:#F260C7;
  --sidebar-link-background-color:#000;
}

/*--------------- fonts ---------------*/

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
    
/*--------------- general ---------------*/

html, body{
  height:100%;
}

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

img{
  border: none;
}

hr{
  display: none;
}

body{
  font-family:var(--main-font);
  font-size:var(--text-size);
  padding:0;
  margin:0;
  line-height:var(--line-height);
  background-color:var(--body-background-color);
  color:var(--text-color);
}

@media (min-width:800px){
  body{
    background-image:var(--background-image);
    background-size:cover;
    background-attachment:fixed;
    background-position:center center;
  }
}

html body{
  margin-left:0;
  margin-right:0;
}

a { color:var(--link-color); }
a:hover { color:var(--link-hover-color); }

a, a:link, a:visited, a:active{
  text-decoration:none;
  transition:all 0.4s ease;
}

q { font-style: italic; }

blockquote{
  border-top:1px dashed var(--entry-border-color);
  border-bottom:1px dashed var(--entry-border-color);
  margin:1.5em 0 1.5em 35px;
  padding:1em 0;
  font-style:italic;
  position:relative;
}

blockquote:before{
  content:"format_quote";
  font-family:Material Icons;
  font-size:30px;
  vertical-align:middle;
  color:var(--entry-icon-color);
  position:absolute;
  top:-11px;
  left:-35px;
  line-height:22px;
  color:var(--link-color);
  font-style:normal;
}

blockquote:after{
  content:"format_quote";
  font-family:Material Icons;
  font-size:30px;
  vertical-align:middle;
  color:var(--entry-icon-color);
  position:absolute;
  bottom:-11px;
  left:-35px;
  line-height:22px;
  color:var(--link-color);
  font-style:normal;
}
    
/*--------------- content ---------------*/

#canvas{
  min-height:100%;
  position:relative;
}

@media (min-width:800px){
  #canvas{
    border-left:190px solid var(--sidebar-background-color);
    max-width:calc(var(--header-image-width) + 100px + 4em);
    margin:0 auto;
  }
}

@media (min-width:1024px){
  #canvas{
    border-right:190px solid var(--sidebar-background-color);
  }
}

#canvas:after{
  content:"";
  display:block;
  clear:both;
}

#primary{
  position:relative;
}

#primary:after{
  content:"";
  display:block;
  clear:both;
}

#tertiary{
  background:var(--sidebar-background-color);
}

@media (min-width:800px){
  #primary{
    float:left;
    width:100%;
    margin-right:-100%;
    margin-left:0;
  }
  
  #tertiary{
    float:left;
    width:190px;
    margin-left:-190px;
    background:transparent;
  }
}

/*--------------- header ---------------*/

#header{
  padding-top:20px;
  clear:both;
}

@media (min-width:800px){
  #header{
    padding-top:100px;
    margin:0 50px;
  }
  
  #header:after{
    content:"";
    display:block;
    height:var(--header-image-height);
    background-color:var(--entry-background-color);
    background-image:var(--header-image);
    background-repeat:no-repeat;
    background-position:center center;
    border-left:2em solid var(--entry-background-color);
    border-right:2em solid var(--entry-background-color);
    border-bottom:1.5em solid var(--entry-background-color);
  }
}

#header > .inner{
  background:var(--entry-background-color);
  border-radius:3px 3px 0 0;
  padding:2em 2em 1.5em;
  text-align:center;
}

h1#title {
  font-family:var(--title-font);
  font-size:1.5em;
  text-shadow:0 .75em 0 var(--title-shadow-color);
  line-height:1.2;
}

h2#subtitle{
  font-size:1em;
  line-height:1.5;
  font-family:var(--title-font);
  letter-spacing:2px;
  padding:0;
  margin:0;
  text-transform:uppercase;
  font-weight:normal;
}

h2#pagetitle {
    display:none;
}

/*--------------- entries ---------------*/

.entry{
  margin-bottom:20px;
  background:var(--entry-background-color);
  border-radius:3px;
  padding:0 2em 2em;
}

@media (min-width:800px){
  .entry{
    margin:0 50px 100px;
    border-radius:3px;
    position:relative;
    clear:both;
  }
}

.entry .header, .comment .header{
  float:left;
  width:100%;
}

.entry .header .inner, .comment .header .inner{
  margin-bottom:2em;
  padding:2em 0 1.5em;
  border-bottom:1px dashed var(--entry-border-color);
  text-align:center;
}

.entry .entry-title {
  font-family:var(--title-font);
  font-size:1.5em;
  line-height:1.2;
  text-shadow:0 .75em 0 var(--title-shadow-color);
}

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

.admin-post-icon, .sticky-entry-icon{
  display:none;
}

.entry .datetime, .entry .datetime a, .comment .header .datetime{
  font-family:var(--title-font);
  text-transform:uppercase;
  color:var(--text-color);
}

.restrictions, .access-filter{
  font-family:var(--title-font);
}

.restrictions img, .access-filter img{
  display:none;
}

.security-protected .access-filter:before{
  content:"[LOCKED]";
}

.security-private .access-filter:before{
  content:"[PRIVATE]";
}

.restrictions-NSFW .restrictions:before{
  content:"[NSFW]";
}

.restrictions-18 .restrictions:before{
  content:"[18+]";
}

.entry .userpic, .comment .userpic{
  float:right;
  margin-left:1em;
}

.entry .userpic img, .comment .userpic img{
  max-width:50px;
  max-height:50px;
  width:auto;
  height:auto;
  border-radius:2px;
  box-shadow:0 4px 0 -2px var(--title-shadow-color);
}

@media (min-width:1024px){
  .entry .userpic, .comment .userpic{
    width:190px;
    margin-right:calc(-240px - 2em);
    margin-left:0;
  }
  
  .entry .userpic img, .comment .userpic img{
    max-width:100px;
    max-height:100px;
    display:block;
    padding:25px;
    background:var(--sidebar-link-background-color);
    margin:0 auto;
    box-shadow:none;
  }
}

.entry .poster{
  font-size:0;
  font-family:var(--title-font);
}

.full .comment .poster, .poster-ip{
  font-family:var(--title-font);
  margin-right:.5em;
}

.entry .poster .ljuser{
  font-size:var(--text-size);
  margin-right:.5em;
}

.entry .poster .ljuser:nth-child(2):before{
  content:"[ ";
}

.entry .poster .ljuser:nth-child(2):after{
  content:" ]";
}

.poster .ljuser img{
  display:none;
}

.poster .ljuser{
  white-space:normal!important;
}

.poster{
  word-wrap:break-word;
}

@media (min-width:1024px){
  .entry .poster, .full .comment .poster, .poster-ip{
    float:right;
    display:block;
    width:190px;
    margin-right:calc(-240px - 2 * var(--text-size));
    text-align:center;
    clear:right;
    padding-top:5px;
    line-height:1.5;
    color:var(--sidebar-text-color);
  }
  
  .entry .poster .ljuser{
    display:block;
    margin:0;
  }
  
  .poster a{ color:var(--sidebar-text-color); }
}

.entry-content, .comment-content{
  margin:2em 0;
  clear:left;
}

@media (min-width:1024px){
  .entry-content, .comment-content{
    text-align:justify;
  }
}

.entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul{
  padding-left:1em;
}

.entry-content li, .comment-content li {
  list-style-position:inside;
}

.entry-content img, .comment-content img {
  max-width:100%;
  height:auto;
}

.cuttag-action{
  display:flex;
  align-items:center;
  line-height:1;
}

.cuttag-action img{
  display:none;
}

.cuttag-action:before{
  content:"content_cut";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--entry-icon-color);
  margin-right:5px;
}

.cuttag-action:after{
  content:"";
  height:0;
  width:100%;
  border-bottom:1px dashed var(--entry-border-color);
}

.cut-open, .cut-close {
  display:none;
}

.cut-text{
  font-weight: normal;
  text-transform: lowercase;
  margin-left: 27px;
  display: block;
}

.metadata ul {
  display:inline;
  list-style:none;
  margin:0;
  padding:0;
}

.metadata li, .entry .tag{
  margin-top:.5em;
}

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

.tag ul li{
  display:inline;
}

.entry .contents:after{
  content:"";
  display:block;
  clear:right;
}

ul.entry-management-links {
  border-top:1px dashed var(--entry-border-color);
  margin:2em 0 0;
  padding:1.5em 0 0;
  font-family:var(--title-font);
  line-height:1.2;
  clear:right;
}

ul.entry-interaction-links {
  margin:0;
  padding:0;
  line-height:1.2;
  font-family:var(--title-font);
}

ul.entry-management-links li, ul.entry-interaction-links li{
  display:inline;
  padding:0;
  margin-right:0.5em;
}

@media (min-width:1024px){
  ul.entry-interaction-links{
    position:absolute;
    width:190px;
    list-style:none;
    text-align:center;
    right:-240px;
    bottom:0;
  }

ul.entry-interaction-links li{
    display:block;
    list-style:none;
    margin:.25em 20px 0;
  }
  
  ul.entry-interaction-links li a{
    display:block;
    padding:0.25em;
    border-radius:2px;
    background:var(--sidebar-link-background-color);
    text-transform:uppercase;
    font-family:var(--title-font);
  }

.entry-interaction-links a{ color:var(--sidebar-link-color); }
  .entry-interaction-links a:hover { color:var(--sidebar-link-hover-color); }
}

.footer:after{
  content:"";
  display:block;
  clear:both;
}

/*--------------- comments ---------------*/

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

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

.full .comment {
  margin-top:20px;
  background:var(--entry-background-color);
  border-radius:3px;
  padding:0 2em 2em;
  clear:both;
}

.page-reply .full .comment {
  margin-top:0;
}

@media (min-width:800px){
  .full .comment{
    margin:50px 50px 0;
  }
}

.comment .header .inner{
  padding-top:2em;
}

.comment .comment-title {
  margin:.25em 0;
  padding:.25em 0;
}

.full .comment .comment-title{
  font-family:var(--title-font);
  font-size:1em;
  line-height:1.2;
  text-shadow:0 .75em 0 var(--title-shadow-color);
}

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

.comment-from-text, .comment-date-text, .comment-ip-text{
  display:none;
}

.comment-pages{
  margin:.25em 0;
  padding:1em 2em;
  background:var(--entry-background-color);
  border-radius:3px;
  font-family:var(--title-font);
  text-align:center;
}

@media (min-width:800px){
  .comment-pages{
    margin:.25em 50px;
  }
}

.comment-pages.bottompages {
  display:none;
}

.comment .footer{
  border-top:1px dashed var(--entry-border-color);
  padding-top:1.5em;
}

.multiform-checkbox{
  display:inline;
  margin-right:.5em;
  font-family:var(--title-font);
}

ul.comment-management-links, ul.comment-interaction-links{
  display:inline;
  margin:0;
  padding:0;
  font-family:var(--title-font);
}

ul.comment-management-links li, ul.comment-interaction-links li {
  display:inline;
  padding:0;
  margin-right:.5em;
}

.partial .comment{
  margin-top:20px;
  padding:1em 2em;
  background:var(--entry-background-color);
  border-radius:3px;
}

@media (min-width:800px){
  .partial .comment{
    margin:50px 50px 0;
  }
}

.bottomcomment{
  margin-top:20px;
  padding:0 2em;
  background:var(--entry-background-color);
  border-radius:3px;
}
  
@media (min-width:800px){
  .bottomcomment{
    margin:50px 50px 100px;
  }
}

#comments ul.entry-interaction-links, #comments ul.entry-management-links {
    display:none;
}

#qrformdiv{
  right:0!important;
  min-width:100%!important;
  padding:0;
}

#qrform{
  margin-top:1.5em;
}

#qrdiv input, #qrdiv select, #qrdiv textarea{
  border:1px dashed var(--entry-border-color);
  background:var(--entry-background-color);
  color:var(--text-color);
  font-family:var(--main-font);
  font-size:var(--text-size);
}

#qrdiv input[type="button"], #qrdiv input[type="submit"]{
  background:transparent;
  border:0;
  font-size:var(--text-size);
  padding:0.5em;
  color:var(--link-color);
  text-transform:uppercase;
  line-height:1;
  font-family:var(--title-font);
}

#postform{
  padding:2em;
  margin:20px 0;
  background:var(--entry-background-color);
  border-radius:3px;
}

@media (min-width:800px){
  #postform{
    margin:50px 50px 100px;
  }
}

/*------------ archive, tags, icons containers ------------*/

.month-wrapper, .page-month .month, .tags-container, .icons-container{
  margin-bottom:20px;
  padding:2em 2em 0;
  background:var(--entry-background-color);
  border-radius:3px;
}

@media (min-width:800px){
  .month-wrapper, .page-month .month, .tags-container, .icons-container{
    margin:0 50px 100px;
  }
}

.month .header, .tags-container .header, .icons-container .header{
  border-bottom:1px dashed var(--entry-border-color);
  text-align:center;
  padding-bottom:1.5em;
}

.month-wrapper h3, .tags-container h2, .icons-container h2{
  font-family:var(--title-font);
  font-size:1.5em;
  line-height:1.2;
  text-shadow:0 .75em 0 #000;
}

.month .contents, .tags-container .contents, .icons-container .contents{
  padding:2em 0;
}

#primary .manage-link, .month-wrapper .footer{
  border-top:1px dashed var(--entry-border-color);
  text-align:center;
  padding:1.5em 0 2em;
  font-family:var(--title-font);
}

/*------------ archive ------------*/

.month caption {
    display: none;
}

.month table {
  width:100%; 
  font-family:var(--title-font);
  text-align:center;
}

table.month {
  margin:0 auto;
  border-collapse:collapse;
  text-align:center;
}

table.month td {
  height:3.25em;
}

table.month td, table.month th{
  max-width:1em;
  padding:.25em;
}

table.month td.day{
  border:1px solid var(--title-shadow-color);
}

table.month td p {
  margin:0;
  display:inline;
}

table.month td p:before {
    content:"[ "
}

table.month td p:after {
  content:" ]"
}

.page-month .month{
  padding:2em;
}

.month dl{
  margin:0;
}

.month dl dt {
  font-weight:bold;
  border-bottom:1px dashed var(--entry-border-color);
  text-align:center;
  padding-bottom:1em;
  font-family:var(--title-font);
  font-size:1em;
}

.month dl .time {
  padding-right:.5em;
}

.month dl h3 {
  display:inline;
  font-size:1em;
}
.page-month .month .entry-poster {
  margin-right:.5em;
}

.month dd{
  margin:0;
  padding-top:1em;
}

#archive-year .navigation ul, #archive-month .navigation ul{
    margin-bottom:20px;
}

@media (min-width:800px){
  #archive-year .navigation ul, #archive-month .navigation ul{
      margin:0 50px 100px;
  }
}

#archive-year .navigation li{
  font-family:var(--title-font);
  display:inline-block;
  background:var(--entry-background-color);
  padding:.5em;
  margin:.25em 0;
  line-height:1.2;
  border-radius:2px;
}

#archive-month .navigation ul{
  font-family:var(--title-font);
  background:var(--entry-background-color);
  padding:.5em;
  line-height:1.2;
  border-radius:3px;
}

#archive-month .navigation li{
   display:inline;
}

.day-date{
    display:none;
}

/*------------ tags ------------*/

ul.ljtaglist{
  list-style:square inside;
  padding:0;
  margin-left:1em;
}

ul.ljtaglist:first-child, .tags_cloud ul{
  list-style-position:inside;
  padding:0;
  margin:0;
}

/*------------ icons ------------*/

.page-icons .toppages{
  display:none;
}

.page-icons .bottompages{
  text-align:center;
  margin-top:1.5em;
}

.icon img{
  border-radius:2px;
}

.icon{
  border-bottom:1px dashed var(--entry-border-color);
  padding:1.5em 0;
  overflow:hidden;
}

.icon:last-child{
  border:0;
  padding-bottom:0;
}

.icon-image {
  float:left;
  margin-right:1em;
}

.icon-image img{
  display:block;
}

.sorting-options ul {
  margin: 0;
  padding:0;
  text-align:center;
}

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

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

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

.icon-pages p{
  margin:0;
}

.default.label, .keywords-label, .comment-text, .description-text{
  font-weight:bold;
}

/*------------ modules ------------*/

.module-section-one{
  margin-bottom:20px;
  background:var(--entry-background-color);
  border-radius:0 0 3px 3px;
  padding:0 2em 2em;
}

.module-customtext .module-content{
  max-height:6em;
  overflow:auto;
}

@media (min-width:800px){
  .module-section-one{
    margin:0 50px 100px;
  }

.module-customtext .module-content{
    text-align:justify;
  }
}

.module-customtext .module-content::-webkit-scrollbar{
  width:10px;
  height:10px;
}

.module-customtext .module-content::-webkit-scrollbar-track{
  background:var(--entry-background-color);
}

.module-customtext .module-content::-webkit-scrollbar-thumb{
  background:var(--entry-border-color);
  border-left:5px solid var(--entry-background-color);
}

.module-customtext .module-content::-webkit-scrollbar-corner{
  background:var(--entry-border-color);
}

.module-section-two{
  padding:20px 20px 0;
  text-align:center;
  color:var(--sidebar-text-color);
}

.module-section-two .module{
  padding-bottom:20px;
}

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

.module-section-two a{
  color:var(--sidebar-text-color);
}

.module-section-two li a{
  color:var(--sidebar-link-color);
}

.module-section-two li a:hover{
  color:var(--sidebar-link-hover-color);
}

.module h2 {
  font-size:1em;
  line-height:1.5;
  text-transform:uppercase;
  padding:0 0 1.5em;
  font-family:var(--title-font);
  text-shadow:0 .75em var(--sidebar-link-background-color);
}

.module .userpic img{
  padding:25px;
  border-radius:2px;
  background:var(--sidebar-link-background-color);
}

.module-content li a{
  display:block;
  padding:.25em;
  margin-top:.25em;
  border-radius:2px;
  background:var(--sidebar-link-background-color);
  text-transform:uppercase;
  font-family:var(--title-font);
  line-height:1.2;
}

.journal-name, .journal-website-name{
  padding-bottom:5px;
  font-family:var(--title-font);
  line-height:1.5;
  font-weight:bold;
}

@media (min-width:800px){
  .module-section-two{
    padding-top:0;
    margin-bottom:50px;
    background:transparent;
  }
}

.module h2, ul.userlite-interaction-links, .module-calendar, .module-tags_list, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered, .module .manage-link{
    display:none;
}

.module-typelist h2{
  display:block;
}

/*--------------- navigation ---------------*/

.topnav{
  display:none;
}

.navigation{
  text-align:center;
}

.navigation ul {
  margin: 0;
  padding: 0;
}

#entries .navigation ul{
  background:var(--sidebar-background-color);
  padding:20px 0;
  margin:0;
}

#entries .navigation li{
  display:inline-block;
  width:150px;
  margin:0 20px;
}

#entries .navigation li a{
  display:block;
  padding:.25em 0;
  border-radius:2px;
  background:var(--sidebar-link-background-color);
  text-transform:uppercase;
  font-family:var(--title-font);
  line-height:1.2;
}

@media (min-width:1024px){
  #entries .navigation ul{
    position:absolute;
    width:190px;
    right:-190px;
    bottom:0;
    background:transparent;
  }
  
  #entries .navigation li {
    display:block;
    margin-top:0.25em;
    list-style:none;
  }
}

#entries .navigation li a{
  color:var(--sidebar-link-color);
}

#entries .navigation li a:hover{
  color:var(--sidebar-link-hover-color);
}

li.page-separator{
  display:none!important;
}

.noentries{
  display:none;
}

/*--------------- footer ---------------*/

#footer{
  background:var(--sidebar-background-color);
  padding:20px;
  text-align:center;
}

@media (min-width:800px){
  #footer{
    position:absolute;
    width:150px;
    left:-190px;
    bottom:0;
    background:transparent;
  }
}

#footer a{
  color:var(--sidebar-link-color);
}

#footer a:hover{
  color:var(--sidebar-link-hover-color);
}

.page-top a{
  display:block;
  padding:.25em;
  border-radius:2px;
  background:var(--sidebar-link-background-color);
  text-transform:uppercase;
  font-family:var(--title-font);
  line-height:1.2;
}

/*------------ contextual pop-up ------------*/

div.ContextualPopup{
  color:var(--sidebar-text-color);
  background:transparent;
  border:0;
  padding:0;
  font-family:inherit;
  box-shadow:none;
  border-radius:0;
  width:150px;
}

.ContextualPopup a { color:var(--sidebar-link-color); }
.ContextualPopup a:hover { color:var(--sidebar-link-hover-color); }

div.ContextualPopup .Relation{
  font-size:1em;
  font-weight:normal;
  margin:.25em 0 0;
  padding:0.25em;
  text-align:center;
  background:var(--sidebar-link-background-color);
  border-radius:2px;
}

div.ContextualPopup .Userpic{
  border:none;
  float:none;
  margin:0;
  text-align:center;
  background:var(--sidebar-link-background-color);
  border-radius:2px;
}

div.ContextualPopup .Userpic img{
  max-width:100px;
  max-height:100px;
  width:auto;
  height:auto;
  padding:25px 0;
}

.ContextualPopup .Actions ul{
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}

div.ContextualPopup li{
  padding:0.25em;
  margin-top:.25em;
  background:var(--sidebar-link-background-color);
  border-radius:2px;
}

/*------------ control strip ------------*/

#lj_controlstrip{
  background:var(--entry-background-color);
  color:var(--text-color);
  justify-content:center;
  padding:.75em 0;
  float:left;
  z-index:9;
}

#lj_controlstrip > div{
  font-family:var(--main-font);
  font-size:var(--text-size);
  line-height:1.5;
  padding:.25em .5em;
  flex-grow:0;
}

#lj_controlstrip a{
  font-family:var(--main-font);
  color:var(--link-color);
}

#lj_controlstrip a:hover{
  color:var(--link-hover-color);
  text-decoration:none;
}

#lj_controlstrip_actionlinks{
  text-align:center;
}

#lj_controlstrip_statustext{
  color:var(--text-color);
  font-weight:normal;
  font-size:var(--text-size);
}

#lj_controlstrip_search{
  text-align:right;
}

#lj_controlstrip input, #lj_controlstrip select{
  border:1px dashed var(--entry-border-color);
  background:var(--entry-background-color)!important;
  font-size:var(--text-size)!important;
  color:var(--text-color)!important;
  font-family:var(--main-font)!important;
}

#lj_controlstrip input[type="submit"]{
  border:0;
  background:transparent;
  text-transform:uppercase;
  font-size:var(--text-size);
  color:var(--text-color);
  font-family:var(--main-font);
  padding:0.25em;
}

#lj_controlstrip .ljuser b{
  font-weight:normal;
}

#lj_controlstrip .ljuser img{
  display:none;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks {
  border:0;
}

#lj_controlstrip_userpic a img{
  border-radius:2px;
}

How to install:

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "1 Column (modules at top and bottom; no sidebar)" page setup.
Go to the "Customize your theme" page, click the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". Paste the following https://fonts.googleapis.com/css2?family=Space+Grotesk&family=Electrolize&display=swap into the "Custom stylesheet URL" field.
Click on the "Presentation" tab. In the "Additional options" section select "text-only" for "Select whether entry management links are printed as text or using the available icons" and "Select whether comment management links are printed as text or using the available icons". For "Indentation for nested comment threads" select "Responsive".
Click on the "Modules" tab and enable "Custom text". Place the following modules in the "Secondary Module Section": Profile, Navigation and Link List. Uncheck the other modules.

Resources:

icon font by Google
images from unsplash.com

comments

Butterfly

Tue, 19 Jan 2021 20:34:36 GMT

Posted by: rosecarmine

Live preview
Features:

header image (250x250px)
navigation links, default icon, links list, tags list, custom text
comment pages
icon pages

Code:

/*-------------------------------------

- layout - butterfly (basic boxes) - https://myrtillenne.dreamwidth.org
- icon font - material icons - https://material.io
- image - unsplash.com

-------------------------------------*/

/*--------------- options ---------------*/

:root {
  --text-size: 16px;
  --text-color: #2e3841;
  --line-height: 1.5;
  --body-background-color: #dcebed;
  --link-color: #1394b9;
  --link-hover-color: #2e3841;
  --content-width: 1000px;
  --main-font: Nunito, sans-serif;
  --title-font: Sofia, sans-serif;
  --header-text-color: #f1f7f8;
  --header-background-color: #96c6d3;
  --header-image: url("https://rosecarmine.dreamwidth.org/file/82699.png");
  --header-image-width: 250px;
  --header-image-height: 250px;
  --header-icon-color: #f1f7f8;
  --header-icon-background-color: #4896ac;
  --userpic-border-color: #69adc0;
  --entry-background-color: #f1f7f8;
  --entry-border-color: #c1dce6;
  --entry-icon-color: #96c6d3;
  --sidebar-text-color: #2e3841;
  --sidebar-link-color: #18678d;
  --sidebar-link-hover-color: #2e3841;
}

/*--------------- fonts ---------------*/

/*--------------- general ---------------*/

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

img {
  border: none;
}

hr {
  display: none;
}

a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
}

a,
a:link,
a:visited,
a:active {
  text-decoration: none;
  transition: all 0.4s ease;
}

q {
  font-style: italic;
}

blockquote {
  margin: 1em 35px;
  font-style: italic;
}

blockquote:before {
  content: "format_quote";
  font-family: Material Icons;
  font-size: 30px;
  line-height: 30px;
  float: left;
  margin-left: -35px;
  font-style: normal;
  color: var(--entry-icon-color);
  transform: scaleX(-1);
}

blockquote:after {
  content: "format_quote";
  font-family: Material Icons;
  font-size: 30px;
  line-height: 30px;
  float: right;
  margin-right: -35px;
  font-style: normal;
  color: var(--entry-icon-color);
}

textarea {
  border: 1px solid var(--entry-border-color);
}

/*--------------- content layout ---------------*/

#canvas {
  margin: 40px auto;
}

@media (min-width: 600px) {
  #canvas {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
  }
}

@media (min-width: 800px) {
  #canvas {
    margin: 80px auto;
    position: relative;
  }

#content {
    padding: 0 114px 40px 0;
  }
}

@media (min-width: 1024px) {
  #canvas {
    max-width: calc(var(--header-image-width) + 20px + var(--content-width));
  }

#content {
    border-left: calc(var(--header-image-width) + 20px) solid transparent;
  }
}

#content > .inner:first-child {
  background: var(--entry-background-color);
  border-radius: 0 0 0 10px;
  border: 1px solid var(--entry-border-color);
  border-top: 0;
}

#content-footer {
  height: 0;
  font-size: 0;
  clear: both;
}

#header,
#footer {
  margin: 0;
  clear: both;
  padding: 0;
}

@media (min-width: 1024px) {
  #primary {
    width: 100%;
    margin-right: -100%;
    margin-left: 0;
    float: left;
  }
}

#primary > .inner:first-child {
  padding: 0;
}

#tertiary {
  display: none;
}

/*--------------- header ---------------*/

#header {
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
  border-bottom: 0;
  padding: 2em;
  text-align: center;
}

@media (min-width: 800px) {
  #header {
    padding: 0 0 0 calc(var(--header-image-width) + 20px);
    margin-right: 114px;
    color: var(--header-text-color);
    background: transparent;
    border: 0;
    position: relative;
  }
}

@media (min-width: 800px) {
  #header > .inner:first-child {
    display: flex;
    width: calc(var(--header-image-width) + 20px);
  }

#header .module-wrapper {
    width: var(--header-image-width);
    margin-left: calc(-1 * var(--header-image-width) - 20px);
    height: var(--header-image-height);
    border: 10px solid var(--header-background-color);
    border-radius: 0 50% 0 50%;
    background: var(--header-image);
  }
}

.module-navlinks {
  margin-bottom: 1em;
}

.module-navlinks li {
  display: inline-block;
  margin-right: 0.25em;
}

li.list-item-network {
  display: none;
}

.module-navlinks li a:before {
  font-family: Material Icons;
  font-size: 22px;
  line-height: 0;
  margin-right: 0.25em;
  vertical-align: middle;
  color: var(--entry-icon-color);
}

.list-item-recent a:before {
  content: "home";
}

.list-item-archive a:before {
  content: "today";
}

.list-item-read a:before {
  content: "library_books";
}

.list-item-tags a:before {
  content: "style";
}

.list-item-memories a:before {
  content: "collections_bookmark";
}

.list-item-userinfo a:before {
  content: "account_box";
}

@media (min-width: 800px) {
  .module-navlinks {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
  }

.module-navlinks li {
    float: left;
    list-style: none;
    margin: 0;
  }

.module-navlinks li a {
    width: 40px;
    height: 40px;
    display: block;
    background-color: var(--header-icon-background-color);
    padding: 0;
    overflow: hidden;
  }

.module-navlinks li a:before {
    width: 40px;
    height: 40px;
    display: block;
    font-family: Material Icons;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    margin-right: 0.25em;
    vertical-align: middle;
    color: var(--header-icon-color);
  }

.list-item-recent a,
  .list-item-read a,
  .list-item-memories a {
    border-radius: 0 20px 0 20px;
    margin-left: 5px;
  }

.list-item-archive a,
  .list-item-tags a,
  .list-item-userinfo a {
    border-radius: 20px 0 20px 0;
  }
}

h1#title {
  font-size: 1.5em;
  font-family: var(--title-font);
  font-weight: normal;
  margin: 0;
  padding: 0 1em;
  text-shadow: 3px 3px 0 var(--entry-border-color);
}

#header a {
  color: inherit;
}

h2#subtitle {
  font-size: var(--text-size);
  font-weight: normal;
  margin: 0;
  padding: 0.5em 1em 0;
}

h2#pagetitle {
  display: none;
}

@media (min-width: 800px) {
  #journaltitles-container {
    width: var(--header-image-width);
    background: var(--header-background-color);
    border-radius: 50% 0 50% 0;
    border: 10px solid var(--header-background-color);
    text-align: center;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

h1#title {
    text-shadow: 3px 3px 0 var(--header-icon-background-color);
  }
}

/*--------------- entries ---------------*/

.entry {
  border-top: 1px solid var(--entry-border-color);
}

.entry,
.full .comment {
  padding: 2em;
  position: relative;
}

.header .inner {
  text-align: center;
}

.entry .entry-title {
  font-size: 1.5em;
  line-height: 1;
  font-family: var(--title-font);
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 0.25em;
  padding-top: 0;
}

.sticky-entry-icon img,
.admin-post-icon img {
  display: none;
}

.admin-post-icon:before {
  content: "new_releases";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

.sticky-entry-icon:before {
  content: "star";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

.header {
  line-height: 1.5;
}

.restrictions img,
.access-filter img {
  display: none;
}

.month .restrictions,
.month .access-filter,
.month .admin-post-icon,
.month .sticky-entry-icon {
  display: none;
}

.security-protected .access-filter:before {
  content: "lock";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

.security-private .access-filter:before {
  content: "visibility_off";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

.restrictions-NSFW .restrictions:before {
  content: "warning";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

.restrictions-18 .restrictions:before {
  content: "18+";
  font-family: arial;
  font-size: 18px;
  color: var(--entry-icon-color);
  vertical-align: middle;
  line-height: 0;
}

.entry .datetime a {
  color: var(--text-color);
}
.entry .datetime a:hover {
  color: var(--link-color);
}

.has-userpic .userpic {
  float: right;
  margin-left: 0.5em;
}

.has-userpic .userpic img {
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
  border-radius: 25px 0 25px 0;
  border: 4px solid var(--entry-border-color);
  background: var(--entry-border-color);
  display: block;
}

@media (min-width: 800px) {
  .has-userpic .userpic img {
    max-width: 100px;
    max-height: 100px;
    width: auto;
    height: auto;
    border: 7px solid var(--userpic-border-color);
    background: var(--userpic-border-color);
    border-radius: 50px 0 50px 0;
  }

.has-userpic .userpic {
    position: absolute;
    right: -114px;
    top: 0;
    padding-bottom: 50px;
    width: 114px;
    text-align: left;
    margin: 0;
  }

.has-userpic .userpic:after {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 0 25px 0 25px;
    position: absolute;
    bottom: 0;
    background: var(--header-icon-background-color);
  }
}

.entry .poster,
.full .comment .poster {
  display: block;
  text-align: center;
}

.poster a {
  color: var(--text-color);
}

.entry .poster {
  font-size: 0;
  line-height: 1;
}

.entry .poster .ljuser {
  font-size: var(--text-size);
}

.entry .poster .ljuser:nth-child(1):before {
  content: "account_circle";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  margin-right: 0.25em;
  line-height: 0;
}

.entry .poster .ljuser:nth-child(2):before {
  content: "public";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  margin-right: 0.25em;
  margin-left: 0.5em;
  line-height: 0;
}

.poster .ljuser img {
  display: none;
}

.poster .ljuser b {
  font-weight: normal;
}

.poster.empty {
  display: none;
}

.entry .contents,
.comment .contents {
  margin-top: 1.5em;
}

.entry-content {
  margin: 1em 0 1.5em;
}

@media (min-width: 600px) {
  .entry-content {
    text-align: justify;
  }
}

.entry-content ol,
.comment-content ol,
.entry-content ul,
.comment-content ul {
  padding-left: 1em;
}

.entry-content li,
.comment-content li {
  list-style-position: inside;
}

.entry-content img,
.comment-content img {
  max-width: 100%;
  height: auto;
}

.cuttag-action {
  display: flex;
  align-items: center;
  line-height: 1;
}

.cuttag-action img {
  display: none;
}

.cuttag-action:before {
  content: "content_cut";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  margin-right: 5px;
}

.cuttag-action:after {
  content: "";
  height: 0;
  width: 100%;
  border-bottom: 1px dashed var(--entry-border-color);
}

.cut-open, .cut-close {
  display:none;
}

.cut-text{
  font-weight: normal;
  text-transform: lowercase;
  margin-left: 27px;
  display: block;
}

.metadata {
  margin-top: 0.5em;
  line-height: 1.5;
}

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

.metadata li {
  display: inline;
  margin-right: 0.5em;
}

.metadata-label {
  display: none;
}

#metadata-music:before {
  content: "library_music";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

#metadata-mood:before {
  content: "sentiment_satisfied_alt";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

#metadata-location:before {
  content: "location_on";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

#metadata-xpost:before {
  content: "add_location";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}
.tag {
  margin-top: 0.5em;
  line-height: 1.5;
}

.tag-text {
  display: none;
}

.tag-nav-trigger {
  vertical-align: middle;
}

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

.tag ul li {
  display: inline;
}

.tag:before {
  content: "#";
  color: var(--entry-icon-color);
  display: inline-block;
  width: 22px;
  text-align: center;
  font-size: 22px;
  vertical-align: middle;
  font-family: arial;
  line-height: 0;
}

.tag li a {
  color: var(--text-color);
}
.tag li a:hover {
  color: var(--link-color);
}

ul.entry-management-links {
  float: right;
  margin: 0.5em 0 0;
  padding: 0;
  display: flex;
  line-height: 1.5;
}

ul.entry-management-links li {
  margin-left: 0.5em;
  position: relative;
  list-style: none;
}

ul.entry-management-links li a {
  width: 22px;
  height: 22px;
  display: block;
  vertical-align: top;
}

ul.entry-management-links li a img {
  opacity: 0;
  width: 22px;
  height: 22px;
}

ul.entry-management-links li a:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  font-family: Material Icons;
  font-size: 22px;
  line-height: 22px;
  text-align: center;
  vertical-align: top;
  color: var(--entry-icon-color);
}

.link_prev a:before {
  content: "arrow_back";
}

.edit_entry a:before {
  content: "edit";
}

.edit_tags a:before {
  content: "local_offer";
}

.mem_add a:before {
  content: "favorite";
}

.tell_friend a:before {
  content: "share";
}

.watch_comments a:before {
  content: "add_alert";
}

.link_next a:before {
  content: "arrow_forward";
}

ul.entry-interaction-links {
  float: left;
  margin: 0.5em 0 0;
  padding: 0;
  text-transform: lowercase;
  line-height: 1.5;
}

ul.entry-interaction-links li {
  display: inline;
  margin-right: 0.5em;
}

ul.entry-interaction-links li a {
  color: var(--text-color);
}

ul.entry-interaction-links li a:hover {
  color: var(--link-color);
}

ul.entry-interaction-links li a:before {
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  margin-right: 0.25em;
  line-height: 0;
}

li.entry-permalink a:before {
  content: "launch";
}

li.entry-readlink a:before {
  content: "question_answer";
}

li.entry-replylink a:before {
  content: "add_comment";
}

.footer:after {
  content: "";
  display: block;
  clear: both;
}

/*------------ comments ------------*/

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

.comment-pages {
  padding: 1em;
  border-top: 1px solid var(--entry-border-color);
}

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

.dwexpcomment {
  margin-top: 0 !important;
}

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

.comment-thread {
  border-top: 1px solid var(--entry-border-color);
}

.partial {
  padding: 1em 2em;
}

.page-reply .comment {
  border-top: 1px solid var(--entry-border-color);
}

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

.full .comment-title {
  font-family: var(--title-font);
  font-size: 1.2em;
  font-weight: normal;
  margin-bottom: 0.25em;
}

.no-subject .entry-title,
.no-subject .comment .comment-title {
  background: none;
  padding: 0;
  margin: 0;
}

.page-reply .no-subject .comment .comment-title {
  border: 0;
}

.comment-date-text,
.comment-from-text,
.comment-ip-text {
  display: none;
}

.full .poster {
  line-height: 1;
}

.poster-ip {
  display: block;
  text-align: center;
}

.poster-ip:before {
  content: "my_location";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
}

.comment .poster .ljuser:before {
  content: "account_circle";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  margin-right: 0.25em;
}

.comment-content {
  margin: 1em 0 1.5em;
}

ul.comment-management-links {
  float: right;
  margin: 0;
  padding: 0;
  display: flex;
  line-height: 1.5;
}

ul.comment-management-links li {
  margin-left: 0.5em;
  position: relative;
  list-style: none;
}

ul.comment-management-links li a {
  width: 22px;
  height: 22px;
  display: block;
  vertical-align: top;
}

ul.comment-management-links li a img {
  opacity: 0;
  width: 22px;
  height: 22px;
}

ul.comment-management-links li a:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  font-family: Material Icons;
  font-size: 22px;
  line-height: 22px;
  text-align: center;
  vertical-align: top;
  color: var(--entry-icon-color);
}

.edit_comment a:before {
  content: "edit";
}

.delete_comment a:before {
  content: "delete_forever";
}

.screen_comment a:before {
  content: "visibility_off";
}

.unscreen_comment a:before {
  content: "visibility";
}

.freeze_thread a:before {
  content: "ac_unit";
}

.unfreeze_thread a:before {
  content: "wb_sunny";
}

ul.comment-interaction-links,
.multiform-checkbox {
  float: left;
  margin: 0;
  padding: 0;
  text-transform: lowercase;
  line-height: 1.5;
}

ul.comment-interaction-links li,
.multiform-checkbox {
  display: inline;
  margin-right: 0.5em;
}

textarea#commenttext {
  width: 100%;
}

.bottomcomment ul.entry-management-links,
.bottomcomment ul.entry-interaction-links,
.comment-pages.bottompages {
  display: none;
}

.bottomcomment {
  text-align: center;
  clear: both;
}

#qrdiv:before {
  content: "";
  display: block;
  clear: both;
}

#qrformdiv {
  padding: 0;
  max-width: 100%;
}

#qrform {
  padding-top: 2em;
}

#qrdiv input,
#qrdiv select,
#qrdiv textarea {
  border: 1px solid var(--entry-border-color);
  font-size: var(--text-size);
  font-family: var(--main-font);
}

#qrdiv input[type="button"],
#qrdiv input[type="submit"] {
  background: transparent;
  border: 0;
  padding: 0.5em;
  color: var(--link-color);
  text-transform: lowercase;
  line-height: 1;
}

#talkform-from img {
  display: none;
}

#talkform-from label {
  font-weight: normal;
}

#postform {
  border-top: 1px solid var(--entry-border-color);
  padding: 2em;
}

/*------------ archive, tags, icons containers ------------*/

.month-wrapper,
.tags-container,
.icons-container {
  border-top: 1px solid var(--entry-border-color);
  padding: 2em 0;
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-weight: normal;
  font-size: 1.5em;
  font-family: var(--title-font);
  line-height: 1;
  margin: 0;
  padding: 0;
}

.month .footer,
#primary .manage-link {
  padding: 1.5em 2em 0;
}

/*------------ archive------------*/

.month-wrapper .contents {
  padding-top: 2em;
}

.month caption {
  display: none;
}

.day-date {
  display: none;
}

.month table {
  border: none;
  text-align: center;
  border-collapse: collapse;
  width: 100%;
}

table.month {
  margin: 0 auto;
}

table.month td {
  width: 1em;
  height: 3em;
  border-bottom: 1px solid var(--entry-border-color);
}

table.month th {
  height: 3em;
  border-top: 1px solid var(--entry-border-color);
  border-bottom: 1px solid var(--entry-border-color);
}

table.month td p {
  margin: 0;
  display: inline;
}

table.month td p:before {
  content: "( ";
}

table.month td p:after {
  content: " )";
}

table.month td.day-has-entries .label {
  font-weight: bold;
}

#archive-month {
  border-top: 1px solid var(--entry-border-color);
}

.month dl {
  margin: 0;
}

.month dl dt {
  border-bottom: 1px solid var(--entry-border-color);
  font-style: italic;
  padding-top: 1em;
  padding-bottom: 0.25em;
  text-align: center;
}

.month dd {
  margin: 1.5em 2em 0;
}

.month dd br {
  display: block;
}

.month dl .time {
  padding-right: 0.5em;
}

.month dl h3 {
  display: inline;
  font-size: 1em;
}

.page-month .month .entry-poster {
  margin-right: 0.5em;
}

.month dl .tag ul {
  margin: 0;
}

#archive-month .navigation {
  margin-top: 1.5em;
}

/*------------ tags ------------*/

.tags-container .contents {
  padding: 2em 2em 0;
}

ul.ljtaglist {
  padding: 0;
  margin-left: 1em;
  list-style: none;
}

ul.ljtaglist:first-child,
.tags_cloud ul {
  padding: 0;
  margin: 0;
}

/*------------ icons page ------------*/

.icons-container h2 {
  margin-bottom: 0.5em;
}

.sorting-options ul {
  margin: 0 0 0.5em;
  padding: 0;
  text-align: center;
}

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

.page-icons .toppages {
  display: none;
}

.page-icons .bottompages {
  padding: 1.5em 2em 0;
}

.icon {
  border-bottom: 1px solid var(--entry-border-color);
  padding: 1.5em 2em;
  overflow: hidden;
}

.icon:last-child {
  border: 0;
  padding-bottom: 0;
}

.icon-image {
  float: left;
  margin-right: 1em;
}

.icon-image img {
  display: block;
}

.icon-info {
  text-transform: lowercase;
}

.icon-info div {
  display: inline;
  margin-right: 1em;
  font-style: italic;
}

.icon-info div span {
  font-style: normal;
}

.default.label {
  font-size: 0;
}

.default.label:before {
  content: "star";
  font-family: Material Icons;
  font-size: 22px;
  font-style: normal;
  vertical-align: top;
  line-height: 22px;
  color: var(--entry-icon-color);
}

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

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

.icon-pages p {
  margin: 0;
}

/*------------ sidebar ------------*/

#secondary {
  padding: 2em;
  border-top: 1px solid var(--entry-border-color);
}

.module-section-one .module {
  padding-top: 1.5em;
}

@media (min-width: 1024px) {
  #secondary {
    float: left;
    width: calc(var(--header-image-width) + 20px);
    margin-left: calc(-1 * var(--header-image-width) - 20px);
    padding: 0;
    border: 0;
    text-align: right;
  }

.module-section-one .module {
    padding: 1.5em 2em 0;
    color: var(--sidebar-text-color);
  }

.module a {
    color: var(--sidebar-link-color);
  }
  .module a:hover {
    color: var(--sidebar-link-hover-color);
  }
}

.module h2 {
  font-size: 1em;
  font-weight: normal;
  margin: 0 0 1em;
  padding: 0;
  text-shadow: -3px 3px 0 var(--entry-border-color);
}

.module h2,
.module h2 a,
.module h2 a:hover {
  color: inherit;
}

.module-userprofile {
  padding: 0 !important;
  margin-top: -1px;
}

.module .userpic img {
  border: 7px solid var(--entry-border-color);
  background: var(--entry-border-color);
  border-radius: 50px 0 50px 0;
}

@media (min-width: 1024px) {
  .module h2 {
    text-shadow: -3px 3px 0 var(--userpic-border-color);
  }

.module .userpic img {
    border: 7px solid var(--userpic-border-color);
    background: var(--userpic-border-color);
  }
}

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

.module-content ul:first-child {
  margin: 0;
}

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

.module-userprofile h2,
.journal-website-name,
.journal-name,
ul.userlite-interaction-links,
.module-calendar,
.module-cuttagcontrols,
.module-pagesummary,
.module-active,
.module-credit,
.module-syndicate,
.module-subscriptionfilters,
.module-search,
.module-time,
.module-powered,
.module .manage-link {
  display: none;
}

/*------------ top custom text ------------*/

.module-customtext h2 {
  display: none;
}

@media (min-width: 1024px) {
  .module-customtext {
    position: absolute;
    top: 0px;
    right: 120px;
    height: calc(var(--header-image-height) - 50px);
    line-height: calc(var(--header-image-height) - 50px);
    overflow: auto;
    margin-left: calc(var(--header-image-width) * 2 + 70px);
    padding: 0 !important;
  }

.module-customtext .module-content {
    display: inline-block;
    vertical-align: bottom;
    line-height: var(--line-height);
  }
}

.module-customtext::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.module-customtext::-webkit-scrollbar-track {
  background: var(--body-background-color);
}

.module-customtext::-webkit-scrollbar-thumb {
  background: var(--header-background-color);
  border: 3px solid var(--body-background-color);
}

.module-customtext::-webkit-scrollbar-corner {
  background: var(--header-background-color);
}

/*--------------- navigation ---------------*/

.navigation .page-separator,
.topnav {
  display: none;
}

.navigation {
  border-top: 1px solid var(--entry-border-color);
  padding: 1.5em 2em;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-transform: lowercase;
}

.navigation li {
  display: inline-block;
  padding-right: 0.5em;
}

#entries .navigation li a:before {
  font-family: Material Icons;
  font-size: 22px;
  line-height: 0;
  vertical-align: middle;
  color: var(--entry-icon-color);
  margin-right: 0.25em;
  display: inline-block;
}

@media (min-width: 800px) {
  #entries .navigation {
    border-top: 0;
    padding: 0;
  }

#entries .navigation ul {
    position: absolute;
    right: 76px;
    bottom: 0;
    width: 80px;
    height: 40px;
    text-align: right;
  }

#entries .navigation li {
    list-style: none;
    padding: 0;
  }

li.page-back {
    float: left;
  }

li.page-forward {
    float: right;
  }

#entries .navigation li a {
    width: 40px;
    height: 40px;
    display: block;
    overflow: hidden;
  }

#entries .navigation li a:before {
    width: 40px;
    height: 40px;
    display: block;
    font-family: Material Icons;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    color: var(--header-icon-color);
    margin: 0;
  }

.noentries {
    border-top: 1px solid var(--entry-border-color);
    padding: 2em;
    margin: 0;
  }
}

li.page-back a:before {
  content: "keyboard_return";
}

li.page-forward a:before {
  content: "keyboard_return";
  transform: scaleX(-1);
}

/*------------ footer ------------*/

#footer {
  overflow: hidden;
}

.page-top {
  display: block;
  width: 40px;
  height: 40px;
  background: var(--header-icon-background-color);
  border-radius: 20px 0 20px 0;
  float: right;
}

@media (min-width: 800px) {
  .page-top {
    position: absolute;
    right: 74px;
    bottom: 40px;
  }

.page-top:before {
    content: "";
    position: absolute;
    bottom: -40px;
    right: 0;
    width: 40px;
    height: 40px;
    display: block;
    background: var(--header-icon-background-color);
    z-index: -1;
    border-radius: 0 20px 0 20px;
  }

.page-top:after {
    content: "";
    position: absolute;
    bottom: -40px;
    right: 40px;
    width: 40px;
    height: 40px;
    display: block;
    background: var(--header-icon-background-color);
    z-index: -1;
    border-radius: 20px 0 20px 0;
  }
}

.page-top a {
  width: 40px;
  height: 40px;
  display: block;
  overflow: hidden;
}

.page-top a:before {
  content: "keyboard_return";
  width: 40px;
  height: 40px;
  display: block;
  font-family: Material Icons;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
  color: var(--header-icon-color);
  transform: rotate(90deg) scaleY(-1);
}

/*------------ contextual pop-up ------------*/

div.ContextualPopup {
  background: var(--entry-background-color);
  font-family: var(--main-font);
  font-size: var(--text-size);
  border: 1px solid var(--entry-border-color);
  border-radius: 0 50px 0 50px;
  box-shadow: none;
  padding: 0;
}

.ContextualPopup a {
  color: var(--link-color);
}
.ContextualPopup a:hover {
  color: var(--link-hover-color);
}

div.ContextualPopup .Relation {
  font-size: var(--text-size);
  padding: 1.5em 1.5em 1em;
  font-weight: normal;
  margin: 0;
}

.ContextualPopup .Actions ul {
  list-style: none;
  margin: 0;
  padding: 0 1.5em 1.5em;
}

div.ContextualPopup .Userpic {
  border: 0;
  padding: 0;
}

div.ContextualPopup .Userpic img {
  border: 7px solid var(--entry-border-color);
  border-radius: 0 50px 0 50px;
  background: var(--entry-border-color);
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
}

/*------------ control strip ------------*/

#lj_controlstrip {
  background: var(--entry-background-color);
  color: var(--text-color);
  justify-content: center;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--entry-border-color);
}

#lj_controlstrip > div {
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: 1.5;
  padding: 0.25em 0.5em;
  flex-grow: 0;
}

#lj_controlstrip_user > a,
#lj_controlstrip_actionlinks > a {
  text-transform: lowercase;
}

#lj_controlstrip a {
  font-family: var(--main-font);
  color: var(--link-color);
}

#lj_controlstrip a:hover {
  color: var(--link-hover-color);
  text-decoration: none;
}

#lj_controlstrip_actionlinks {
  text-align: center;
}

#lj_controlstrip_statustext {
  color: var(--text-color);
  font-weight: normal;
  font-size: var(--text-size);
}

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 1px solid var(--entry-border-color);
  background: transparent !important;
}

#lj_controlstrip input[type="submit"] {
  border: 0;
  background: transparent;
  text-transform: lowercase;
  font-size: 16px;
  color: var(--text-color);
  font-family: var(--main-font);
  padding: 0.25em;
}

#lj_controlstrip_userpic img {
  border: 3px solid var(--entry-border-color) !important;
  padding: 1px !important;
  background: var(--entry-border-color);
  border-radius: 0 22px 0 22px;
}

#lj_controlstrip .ljuser b {
  font-weight: normal;
}

#lj_controlstrip .ljuser img {
  display: none;
}

#lj_controlstrip_user,
#lj_controlstrip_login,
#lj_controlstrip_actionlinks {
  border: 0;
}

How to install:

Go to the "Select style" page, search for "Basic boxes" and apply any theme.
Go to the "Customize your theme" page, click the on "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". After that, paste the following https://fonts.googleapis.com/css2?family=Nunito&family=Sofia&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab and enable "Custom text". The layout supports "Profile", "Navigation", "Links list", "Tags" and "Custom text". The other modules must be unchecked.
Click on the "Presentation" tab. In the "Additional options" section select "Responsive" for "Indentation for nested comment threads" (optional).

Resources:

icon font by Google
image from unsplash.com

comments

Shiver

Fri, 01 Jan 2021 19:19:17 GMT

Posted by: rosecarmine

Live preview
Features:

sliding sidebar
header image (1000x400px)
sidebar image (300x400px)
navigation links, links list, custom text
comment pages
icon pages

Code:

/*-------------------------------------
 
- layout - shiver (tabula rasa) - https://myrtillenne.dreamwidth.org
- icon font - material icons - https://material.io

-------------------------------------*/

/*--------------- options ---------------*/

:root{
  --text-size:16px;
  --text-color:#527385;
  --line-height:1.5;
  --body-background-color:#EFF5F5;
  --link-color:#32AACD;
  --link-hover-color:#527385;
  --icon-color:#CCECF7;
  --main-font:Oxygen, sans-serif;
  --title-font:Allerta Stencil, sans-serif;
  --header-image:url("https://rosecarmine.dreamwidth.org/file/80516.jpg");
  --header-image-width:1000px;
  --header-image-height:400px;
  --entry-background-color:#fff;
  --entry-border-color:#99D6E8;
  --sidebar-width:400px;
  --sidebar-background-color:#fff;
  --sidebar-image:url("https://rosecarmine.dreamwidth.org/file/80343.jpg");
  --sidebar-image-width:300px;
  --sidebar-image-height:400px;
  --sidebar-border-color:#99D6E8;
  --sidebar-text-color:#527385;
  --sidebar-link-color:#32AACD;
  --sidebar-link-hover-color:#527385;
  --sidebar-icon-color:#CCECF7;
}

/*--------------- fonts ---------------*/

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

/*--------------- general ---------------*/

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

body{
  background:var(--body-background-color);
  border:0;
  color:var(--text-color);
  line-height:var(--line-height);
  font-family:var(--main-font);
  font-size:var(--text-size);
  margin:0;
}

a { color:var(--link-color); }
a:hover { color:var(--link-hover-color); }

a, a:link, a:visited, a:active{
  text-decoration:none;
  transition:all 0.4s ease;
}

img {
  border: none;
}

hr {
  display: none;
}

blockquote{
  margin:1em 0;
  margin-left:45px;
  font-style:italic;
}

blockquote:before{
  content:"format_quote";
  font-family:Material Icons;
  font-size:40px;
  line-height:30px;
  float:left;
  margin-left:-45px;
  font-style:normal;
  color:var(--icon-color);
}

/*--------------- content layout ---------------*/

@media (min-width:800px){
  #canvas{
    border:44px solid transparent;
    padding:0 70px;
  }

#canvas:before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:40px;
    background:var(--sidebar-border-color);
    z-index:1;
    border-bottom:2px solid var(--sidebar-border-color);
  }

#canvas:after{
    content:"";
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:40px;
    background:var(--sidebar-border-color);
    border-top:2px solid var(--sidebar-border-color);
    z-index:1;
  }
}

@media (min-width:1024px){
  #canvas{
    padding:0 120px;
  }
}

#canvas > .inner:first-child{
  margin:0 auto;
}

@media (min-width:800px){
  #canvas >.inner:first-child{
    max-width:var(--header-image-width);
    margin:70px auto;
  }
}

#primary > .inner:first-child, #secondary > .inner:first-child, #tertiary > .inner:first-child {
  padding: 0;
}

/*--------------- header ---------------*/

#header{
  border:1px solid var(--entry-border-color);
  margin:10px 0;
}

@media (min-width:800px){
  #header {
    padding-top:var(--header-image-height);
    background-image:var(--header-image);
    background-repeat:no-repeat;
    background-position:top center;
    margin:80px 0;
  }
}

#header > .inner:first-child {
  background:var(--entry-background-color);
  padding:2em;
  text-align:center;
  line-height:1;
}

h1#title{
  font-size:2em;
  font-weight:normal;
  margin:0;
  padding:0;
  font-family:var(--title-font);
}

h2#subtitle{
  font-size:1em;
  text-transform:lowercase;
  font-weight:normal;
  margin:.5em 0 0;
  padding:.5em 0 0;
  border-top:1px solid var(--entry-border-color);
}

h2#pagetitle{
  display:none;
}

/*--------------- sidebar ---------------*/

#secondary{
  background:var(--sidebar-background-color);
  color:var(--sidebar-text-color);
  border:1px solid var(--sidebar-border-color);
  margin:10px 0;
}

.module a{
  color:var(--sidebar-link-color);
}

.module a:hover{
  color:var(--sidebar-link-hover-color);
}

@media (min-width:800px){
  #secondary{
    position:fixed;
    top:0;
    left:calc(-1 * var(--sidebar-width));
    border:0;
    border-right:42px solid var(--sidebar-border-color);
    width:var(--sidebar-width);
    height:100%;
    z-index:3;
    transition:left 0.5s linear 0.5s;
    margin:0;
  }

#secondary:hover{
    left:0;
  }

#secondary:before{
    content:"menu";
    position:absolute;
    top:50%;
    right:-40px;
    margin-top:-20px;
    font-family:Material Icons;
    font-size:24px;
    width:40px;
    line-height:40px;
    text-align:center;
    cursor:pointer;
    color:var(--sidebar-border-color);
    transition:color 0.5s ease;
    background:var(--sidebar-background-color);
  }

#secondary > .inner:first-child{
    height:100%;
    box-sizing:border-box;
    position:relative;
    display:flex;
    overflow:auto;
  }
  
  .module-section-one:before {
    content:"";
    display:block;
    width:100%;
    max-width:var(--sidebar-image-width);
    height:var(--sidebar-image-height);
    margin:0 auto 1.5em;
    background-image:var(--sidebar-image);
    background-repeat:no-repeat;
    background-position:center center;
    border:10px solid var(--sidebar-border-color);
  }

#secondary .module-wrapper{
    margin:auto;
  }
}

#secondary > .inner:first-child::-webkit-scrollbar{
  width:10px;
  height:10px;
}

#secondary > .inner:first-child::-webkit-scrollbar-track{
  background:var(--sidebar-background-color);
}

#secondary > .inner:first-child::-webkit-scrollbar-thumb{
  background:var(--sidebar-border-color);
  border:3px solid var(--sidebar-background-color);
}

#secondary > .inner:first-child::-webkit-scrollbar-corner{
  background:var(--sidebar-border-color);
}

.module-section-one{
  padding:2em;
}

.module-content ul{
  margin:0;
  padding:0;
  list-style:none;
  display:inline;
  line-height:2;
}

.module-content li {
  display:inline;
}

.module-content li a{
  color:var(--sidebar-text-color);
}

.module-content li a:hover{
  color:var(--sidebar-link-color);
}

.module-navlinks li a{
  margin-right:0.5em;
  text-transform:lowercase;
}

.module-navlinks li a:before {
  font-family:Material Icons;
  font-size:22px;
  margin-right:0.25em;
  vertical-align:middle;
  color:var(--sidebar-icon-color);
  line-height:0;
}

.list-item-recent a:before {
  content:"home";
}

.list-item-archive a:before {
  content:"archive";
}

.list-item-read a:before {
  content:"library_books";
}

.list-item-tags a:before {
  content:"style";
}

.list-item-network a:before {
  content:"people_alt";
}

.list-item-memories a:before {
  content:"bookmarks";
}

.list-item-userinfo a:before {
  content:"account_box";
}

.module h2, .module .manage-link, .module-userprofile, .module-calendar, .module-tags_list, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered{
    display:none;
}

.module-typelist h2, .module-typelist .module-content{
  display:inline;
  font-size:1em;
  font-weight:normal;
  color:var(--sidebar-text-color);
  text-transform:lowercase;
  margin-right:0.25em;
}

.module-typelist h2:before {
  content:"near_me";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  line-height:0;
  margin-right:0.25em;
  color:var(--sidebar-icon-color);
}

.module-typelist h2:after {
  content:": ";
}

.module-typelist li{
  font-style:italic;
  margin-right:0.25em;
}

.module-typelist li:after{
  content:", ";
}

.module-typelist li:last-child:after{
  display:none;
}

.module-customtext{
  margin-top:1em;
}

@media (min-width:600px){
  .module-customtext{
    text-align:justify;
  }
}

/*--------------- entries ---------------*/

.entry, .comment{
  border:1px solid var(--entry-border-color);
  padding:2em;
  background:var(--entry-background-color);
  position:relative;
  margin:10px 0;
}

@media (min-width:800px){
  .entry{
    margin:80px 0;
  }
}

.header{
  text-align:center;
  line-height:1;
}

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

.entry .entry-title, .full .comment-title{
  font-size:1.5em;
  line-height:1.2;
  padding:0 0 0.25em;
  border-bottom:1px solid var(--entry-border-color);
  margin-bottom:0.5em;
  font-weight:normal;
  font-family:var(--title-font);
}

.no-subject .entry .entry-title, .no-subject .comment-title{
  background:none;
  border:none;
  padding:0;
  margin:0;
}

.sticky-entry-icon img, .admin-post-icon img{
  display:none;
}

.admin-post-icon:before{
  content:"new_releases";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  line-height:0;
}

.sticky-entry-icon:before{
  content:"star";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  line-height:0;
}

.restrictions img, .access-filter img{
  display:none;
}

.month .restrictions, .month .access-filter, .month .admin-post-icon, .month .sticky-entry-icon{
  display:none;
}

.security-protected .access-filter:before{
  content:"lock";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  line-height:0;
}

.security-private .access-filter:before{
  content:"visibility_off";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  line-height:0;
}

.restrictions-NSFW .restrictions:before{
  content:"warning";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  line-height:0;
}

.restrictions-18 .restrictions:before{
  content:"18+";
  font-family:arial;
  font-size:18px;
  color:var(--icon-color);
  vertical-align:middle;
  line-height:0;
}

.entry .datetime, .comment .datetime{
  text-transform:lowercase;
}

.entry .datetime a{
  color:var(--text-color);
}

.has-userpic .userpic{
  float:right;
  margin-left:0.5em;
}

.userpic img{
  padding:1px;
  border:5px solid var(--entry-border-color);
  background:var(--entry-background-color);
  display:block;
  max-width:50px;
  max-height:50px;
  width:auto;
  height:auto;
}

@media (min-width:800px){
  .has-userpic .userpic{
    position:absolute;
    top:-1px;
    right:-67px;
    width:62px;
  }
}

@media (min-width:1024px){
  .userpic img{
    max-width:100px;
    max-height:100px;
    width:auto;
    height:auto;
  }
  
  .has-userpic .userpic{
    position:absolute;
    top:-1px;
    right:-117px;
    width:112px;
  }
}

.entry .poster, .full .comment .poster{
  display:block;
  text-align:center;
}

.poster a{
  color:var(--text-color);
}

.entry .poster{
  font-size:0;
  line-height:1;
}

.entry .poster .ljuser{
  font-size:var(--text-size);
}

.entry .poster .ljuser:nth-child(1):before{
  content:"account_circle";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  margin-right:0.25em;
  line-height:0;
}

.entry .poster .ljuser:nth-child(2):before{
  content:"public";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  margin-right:0.25em;
  margin-left:0.5em;
  line-height:0;
}

.poster .ljuser img{
  display:none;
}

.poster .ljuser b{
  font-weight:normal;
}

.poster.empty{
  display:none;
}

.entry .contents, .comment .contents{
  margin-top:2em;
}

.entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul{
  padding-left:1em;
  list-style-position:inside;
}

.entry-content, .comment-content{
  margin:1em 0 1.5em;
}

@media (min-width:600px){
  .entry-content{
    text-align:justify;
  }
}

.entry-content img, .comment-content img {
  max-width:100%;
  height:auto;
}

.cuttag-action{
  display:flex;
  align-items:center;
  line-height:1;
}

.cuttag-action img{
  display:none;
}

.cuttag-action:before{
  content:"content_cut";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  margin-right:5px;
}

.cuttag-action:after{
  content:"";
  height:0;
  width:100%;
  border-bottom:1px dashed var(--entry-border-color);
}

.cut-open, .cut-close {
  display:none;
}

.cut-text{
  font-weight: normal;
  text-transform: lowercase;
  margin-left: 27px;
  display: block;
}

.metadata ul {
  list-style:none;
  margin:0;
  padding:0;
  line-height:2;
}

.metadata li{
  display:inline;
  margin-right:0.5em;
}

.metadata-label{
  display:none;
}

#metadata-music:before {
  content:"library_music";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  line-height:0;
}

#metadata-mood:before{
  content:"sentiment_satisfied_alt";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  line-height:0;
}

#metadata-location:before{
  content:"location_on";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color); 
  line-height:0;
}

#metadata-xpost:before {
  content:"add_location";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  line-height:0;
}

.tag{
  text-transform:lowercase;
  line-height:2;
}

.tag-nav-trigger{
  vertical-align:middle;
}

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

.tag ul li{
  display:inline;
  font-style:italic;
  margin-right:0.25em;
}

.tag:before{
  content:"#";
  color:var(--icon-color);
  font-size:22px;
  vertical-align:middle;
  font-family:arial;
  margin-right:0.25em;
  line-height:0;
}

.tag ul li a{
  color:var(--text-color);
}

.tag ul li a:hover{
  color:var(--link-color);
}

ul.entry-management-links, ul.entry-interaction-links{
  margin:0;
  padding:0;
  display:inline;
  text-transform:lowercase;
  line-height:2;
}

ul.entry-management-links a, ul.entry-interaction-links a{
  color:var(--text-color);
}

ul.entry-management-links a:hover, ul.entry-interaction-links a:hover{
  color:var(--link-color);
}

ul.entry-management-links li{
  display:inline;
  margin-right:0.5em;
}

ul.entry-management-links li a:before{
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  margin-right:0.25em;
  line-height:0;
}

.link_prev a:before{
  content:"arrow_back";
}

.edit_entry a:before{
  content:"edit";
}

.edit_tags a:before{
  content:"local_offer";
}

.mem_add a:before{
  content:"favorite";
}

.tell_friend a:before{
  content:"share";
}

.watch_comments a:before{
  content:"notification_important";
}

.link_next a:before{
  content:"arrow_forward";
}

ul.entry-interaction-links li{
  display:inline;
  margin-right:0.5em;
}

ul.entry-interaction-links li a:before{
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  margin-right:0.25em;
  line-height:0;
}

li.entry-permalink a:before{
  content:"launch";
}

li.entry-readlink a:before{
  content:"question_answer";
}

li.entry-replylink a:before{
  content:"add_comment";
}

/*--------------- comments ---------------*/

.comment-pages{
  text-align:center;
  background:var(--entry-background-color);
  border:1px solid var(--entry-border-color);
  padding:1em;
  text-transform:lowercase;
  color:transparent;
}

.comment-pages b{
  font-weight:normal;
}

.comment-pages > b{
  color:var(--text-color);
  display:block;
}

.comment-pages span{
  color:var(--text-color);
}

.comment-pages.toppages{
  margin-top:5px;
}

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

.comment-date-text, .comment-from-text, .comment-ip-text{
  display:none;
}

.full .poster{
  line-height:1;
}

.poster-ip{
  display:block;
  text-align:center;
}

.poster-ip:before{
  content:"my_location";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
}

.comment .poster .ljuser:before{
  content:"account_circle";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  margin-right:0.25em;
}

.partial .comment{
  padding:1em;
  text-align:center;
}

ul.comment-management-links, ul.comment-interaction-links, .multiform-checkbox {
  display:inline;
  margin:0;
  padding:0;
  text-transform:lowercase;
  line-height:1;
}

ul.comment-management-links li, ul.comment-interaction-links li, .multiform-checkbox{
  display:inline;
  margin-right:0.5em;
}

.bottomcomment{
  text-align:center;
  clear:both;
}

#postform{
  border:1px solid var(--entry-border-color);
  padding:2em;
  background:var(--entry-background-color);
  width:auto;
  margin-top:10px;
}

#qrformdiv{
  padding:0;
  max-width:100%;
}

#qrform{
  margin-top:1em;
}

#qrdiv input, #qrdiv select, #qrdiv textarea{
  border:1px solid var(--entry-border-color);
}

#qrdiv input[type="button"], #qrdiv input[type="submit"]{
  background:transparent;
  border:0;
  font-size:var(--text-size);
  padding:0.5em;
  color:var(--link-color);
  text-transform:lowercase;
  line-height:1;
  font-family:var(--main-font);
}

#qrdiv .ljuser img, #talkform-from img{
  display:none;
}

#qrformdiv .qr-meta .ljuser{
  font-size:inherit;
}

#qrformdiv .qr-meta .ljuser:before{
  content:"account_circle";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--icon-color);
  margin-right:0.25em;
}

#qrformdiv .qr-meta .ljuser b{
  font-weight:normal;
  color:var(--text-color);
}

#talkform-from label{
  font-weight:normal;
}

#comments ul.entry-management-links, #comments ul.entry-interaction-links, .comment-pages.bottompages{
    display:none;
}

/*------------ archive, tags, icons containers ------------*/

.month-wrapper, .page-month .month, .tags-container, .icons-container{
  border:1px solid var(--entry-border-color);
  padding:2em;
  background:var(--entry-background-color);
  margin:10px 0;
}

@media (min-width:800px){
  .month-wrapper, .page-month .month, .tags-container, .icons-container{
    margin:80px 0;
  }
}

.month-wrapper h3, .tags-container h2, .icons-container h2{
  font-size:1.5em;
  line-height:1.2;
  padding:0 0 0.25em;
  border-bottom:1px solid var(--entry-border-color);
  font-weight:normal;
  font-family:var(--title-font);
}

.month .footer, #primary .manage-link{
  margin-top:1.5em;
  text-transform:lowercase;
}

/*------------ archive------------*/

.day-date{
  display:none;
}

.month caption {
  display: none;
}

table.month{
  width:100%;
  text-align:center;
  border-collapse:collapse;
}

table.month td, table.month th {
  border-bottom:1px solid var(--entry-border-color);
  width:1em;
  padding:0.5em;
}

table.month th{
  text-transform:lowercase;
  font-weight:normal;
}

td.day-has-entries .label{
  font-weight:bold;
}

td.day-has-entries .label, table p{
  display:inline;
}

table.month td p:before{
  content:"[ ";
}

table.month td p:after{
  content:" ]";
}

.month dl{
  margin:0;
}

.month dl dt{
  text-align:center;
  border-bottom:1px solid var(--entry-border-color);
  line-height:1.2;
  padding:0 0 0.25em;
  margin-bottom:1em;
}

.month dd{
  margin:0;
}

.month dl h3{
  font-size:1em;
  padding:0;
  margin:0;
  display:inline;
}

.month dl .time{
  padding-right:.5em;
}

.page-month .month .entry-poster{
  margin-right:.5em;
}

.month dl br{
  display:block;
}

#archive-year .navigation li, #archive-month .navigation li{
  display:inline-block;
}

#archive-year .navigation li{
  margin:0 0.5em;
  padding:0.5em 1em;
  background:var(--entry-background-color);
  border:1px solid var(--entry-border-color);
}

#archive-month .navigation ul{
  padding:0.5em 1em;
  background:var(--entry-background-color);
  border:1px solid var(--entry-border-color);
  display:inline-block;
}

/*------------ tags ------------*/

.tags-container .contents{
  margin-top:1.5em;
}

ul.ljtaglist{
  padding:0;
  margin-left:1em;
  list-style-position:inside;
}

ul.ljtaglist:first-child, .tags_cloud ul{
  padding:0;
  margin:0;
}

/*------------ icons ------------*/

.page-icons .toppages{
  display:none;
}

.page-icons .bottompages{
  text-align:center;
  padding-top:1.5em;
}

.sorting-options ul{
  margin:0.5em 0 0;
  padding:0;
  text-transform:lowercase;
  text-align:center;
  line-height:1;
}

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

.icon{
  overflow:hidden;
  border-bottom:1px solid var(--entry-border-color);
  padding:1em 0;
}

.icon-image{
  float:left;
  margin-right:1em;
}

.icon-image img{
  display:block;
}

.icon-info{
  text-transform:lowercase;
}

.icon-info div{
  display:inline;
  margin-right:1em;
  font-style:italic;
}

.icon-info div span{
  font-style:normal;
}

.default.label{
  font-size:0;
}

.default.label:before{
  content:"star";
  font-family: Material Icons;
  font-size:22px;
  font-style:normal;
  vertical-align:top;
  line-height:22px;
}

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

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

.icon-pages p{
  margin:0;
}

/*--------------- navigation ---------------*/

.topnav{
  display:none;
}

.navigation{
  text-align:center;
  margin:10px 0;
}

.navigation ul{
  margin:0 auto;
  padding:0;
}

#entries .navigation{
  background:var(--sidebar-border-color);
  border-top:2px solid var(--sidebar-border-color);
  margin:0;
}

@media (min-width:800px){
  #entries .navigation{
    position:fixed;
    width:100%;
    left:0;
    bottom:0;
    z-index:2;
    margin:0;
    padding:0;
    height:40px;
  }
}

#entries .navigation ul{
  list-style:none;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}

li.page-back a, li.page-forward a{
  display:block;
  width:40px;
  height:40px;
  padding:0;
  overflow:hidden;
}

li.page-back a:before, li.page-forward a:before{
  display:block;
  font-family: Material Icons;
  font-size:24px;
  width: 40px;
  height:40px;
  line-height:40px;
  text-align:center;
  color:var(--sidebar-border-color);
}

li.page-back a:before{
  content:"arrow_back";
  background:var(--sidebar-background-color);
}

li.page-forward a:before{
  content:"arrow_forward";
  background:var(--sidebar-background-color);
}

li.page-separator{
  color:transparent;
  width:2px;
}

.noentries{
  display:none;
}

/*--------------- footer ---------------*/

#footer{
  background:var(--sidebar-border-color);
  text-align:center;
  line-height:1;
  border-top:2px solid var(--sidebar-border-color);
}

@media (min-width:800px){
  #footer{
    position:fixed;
    width:40px;
    height:100%;
    top:0;
    right:0;
    padding:0;
    border-top:0;
    border-left:2px solid var(--sidebar-border-color);
    z-index:2;
  }

#footer .inner{
    position:absolute;
    top:50%;
    right:0;
    margin-top:-20px;
  }
}

.page-top{
  width:40px;
  height:40px;
  overflow:hidden;
  margin:0 auto;
}

.page-top a:before{
  display:block;
  font-family:Material Icons;
  font-size:24px;
  width: 40px;
  height:40px;
  line-height:40px;
  text-align:center;
  content: "arrow_upward";
  background:var(--sidebar-background-color);
}

#footer a{ color:var(--sidebar-border-color); }

/*------------ contextual pop-up ------------*/

div.ContextualPopup{
  color:var(--text-color);
  background:var(--entry-background-color);
  border:1px solid var(--entry-border-color);
  padding:0;
  font-family:inherit;
  border-radius:0;
  width:140px;
}

.ContextualPopup a { color:var(--text-color); }
.ContextualPopup a:hover { color:var(--link-color); }

div.ContextualPopup .Relation{
  font-size:1em;
  font-weight:normal;
  text-transform:lowercase;
  margin:0;
  padding:0.5em 0.25em;
  border-top:1px solid var(--entry-border-color);
  text-align:center;
}

div.ContextualPopup .Userpic{
  float:none;
  margin:0;
  border:9px solid var(--entry-border-color);
  text-align:center;
  padding:0;
}

div.ContextualPopup .Userpic img{
  max-width:100px;
  max-height:100px;
  width:auto;
  height:auto;
  padding:10px;
}

.ContextualPopup .Actions ul{
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}

div.ContextualPopup li{
  border-top:1px solid var(--entry-border-color);
  padding:0.25em;
  text-transform:lowercase;
}

/*------------ control strip ------------*/

#lj_controlstrip{
  background:var(--sidebar-background-color);
  color:var(--sidebar-text-color);
  justify-content:center;
  padding:.75em 0;
  border-bottom:1px solid var(--sidebar-border-color);
}

@media (min-width:800px){
  #lj_controlstrip{
    background:var(--sidebar-background-color);
    position:fixed;
    z-index:3;
    padding:.75em 40px;
    border-bottom:0;
    width:100%;
    box-sizing:border-box;
    transform:translateY(-100%);
    transition:transform 0.5s, z-index 0.5s step-end;
  }
  
  #lj_controlstrip:before{
    content:"";
    display:block;
    position:absolute;
    bottom:-42px;
    height:42px;
    width:100%;
    left:0;
    background:var(--sidebar-border-color);
  }

#lj_controlstrip:after{
    content:"settings";
    position:absolute;
    bottom:-40px;
    height:40px;
    width:40px;
    line-height:40px;
    margin-left:-20px;
    left:50%;
    cursor:pointer;
    font-family:Material Icons;
    font-size:24px;
    background:var(--sidebar-background-color);
    color:var(--sidebar-border-color);
    text-align:center;
  }

#lj_controlstrip:hover{
    transform:translateY(0);
    z-index:9;
    transition: transform 0.5s, z-index 0.5s step-start;
  }
}

#lj_controlstrip > div{
  font-family:var(--main-font);
  font-size:var(--text-size);
  line-height:var(--line-height);
  padding:.25em .5em;
  flex-grow:0;
}

#lj_controlstrip_user > a, #lj_controlstrip_actionlinks > a{
  text-transform:lowercase;
}

#lj_controlstrip a{
  font-family:var(--main-font);
  color:var(--sidebar-link-color);
}

#lj_controlstrip a:hover{
  color:var(--sidebar-link-hover-color);
  text-decoration:none;
}

#lj_controlstrip_actionlinks{
  text-align:center;
}

#lj_controlstrip_statustext{
  color:var(--sidebar-text-color);
  font-weight:normal;
  font-size:var(--text-size);
}

#lj_controlstrip_search{
  text-align: right;
}

#lj_controlstrip input, #lj_controlstrip select{
  border:1px solid var(--sidebar-border-color);
  background:transparent!important;
}

#lj_controlstrip input[type="submit"]{
  border:0;
  background:transparent;
  text-transform:lowercase;
  font-size:16px;
  color:var(--sidebar-text-color);
  font-family:var(--main-font);
  padding:0.25em;
}

#lj_controlstrip_userpic img{
  border:4px solid var(--sidebar-border-color)!important;
  padding:1px!important;
  background:var(--sidebar-background-color);
}

#lj_controlstrip .ljuser b{
  font-weight:normal;
}

#lj_controlstrip .ljuser img{
  display:none;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks {
  border:0;
}

How to install:

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose one of the 1 Column page setups.
Go to the "Customize your theme" page, click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)".
On the same page, paste the following https://fonts.googleapis.com/css2?family=Oxygen&family=Allerta+Stencil&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab. Set "Navigation" to number 2, "Links list" to number 4 and "Custom text" to number 13. Uncheck the other modules.
Click on the "Presentation" tab; in the "Additional options" section look for "Select whether entry management links are printed as text or using the available icons" and "Select whether comment management links are printed as text or using the available icons". Select "text-only" for both.

Resources:

icon font by Google
images from unsplash.com

comments

Opposite

Thu, 31 Dec 2020 17:15:04 GMT

Posted by: rosecarmine

Live preview
Features:

sidebar image (300x600px)
navigation links, links list, custom text
comment pages
icon pages

Code:

/*-------------------------------------

- layout - opposite (tabula rasa) - https://myrtillenne.dreamwidth.org
- icon font - material icons - https://material.io

-------------------------------------*/

/*--------------- options ---------------*/

:root {
  --text-size: 16px;
  --text-color: #ac86a7;
  --line-height: 1.5;
  --body-background-color: #af61b8;
  --link-color: #cc66ff;
  --link-hover-color: #edcc81;
  --title-color: #edcc81;
  --subtitle-color: #cc66ff;
  --main-font: Fira Sans, sans-serif;
  --title-font: Playfair Display, serif;
  --entry-width: 700px;
  --entry-background-color: #291f28;
  --entry-border-color: #382337;
  --entry-title-color: #edcc81;
  --icon-size: 80px;
  --sidebar-width: 50vw;
  --sidebar-height: 600px;
  --sidebar-image-width: 300px;
  --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/76200.jpg");
  --sidebar-background-color: #291f28;
  --sidebar-inner-background-color: #382337;
  --sidebar-text-color: #ac86a7;
  --sidebar-link-color: #cc66ff;
  --sidebar-link-hover-color: #edcc81;
}

/*--------------- general ---------------*/

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v70/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2)
    format("woff2");
}

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

img {
  border: none;
}

hr {
  display: none;
}

body {
  padding: 0;
  background: var(--body-background-color);
  font-family: var(--main-font);
  line-height: var(--line-height);
  font-size: var(--text-size);
  color: var(--text-color);
}

a,
a:link,
a:visited {
  text-decoration: none;
  transition: color 0.4s, background-color 0.4s, border-color 0.4s;
}

a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
}

q {
  font-style: italic;
}

blockquote {
  background: var(--entry-border-color);
  margin: 1em 0;
  padding: 2em;
}

blockquote:first-letter {
  font-size: 2em;
  font-family: var(--title-font);
  font-style: italic;
  color: var(--entry-title-color);
  line-height: 1em;
}

@media (min-width: 1024px) {
  #canvas {
    margin: 0 0 0 calc(var(--sidebar-image-width) + 100px);
  }
}

@media (min-width: 1280px) {
  #canvas {
    margin: 0 0 0 var(--sidebar-width);
  }
}

@media (min-width: 800px) {
  #canvas > .inner:first-child {
    margin: 50px;
  }
}

#content-footer {
  height: 0;
  font-size: 0;
  clear: both;
}

#primary {
  margin: 0 auto;
}

@media (min-width: 1024px) {
  #content {
    max-width: var(--entry-width);
    margin: 0 auto;
  }
}

#header {
  background: var(--sidebar-background-color);
  text-align: center;
  padding: 1em;
}

@media (min-width: 1024px) {
  #header {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(var(--sidebar-image-width) + 100px);
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
  }

#header > .inner {
    height: var(--sidebar-height);
    width: var(--sidebar-image-width);
    background-image: var(--sidebar-image);
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    margin: auto;
  }

#header > .inner:before {
    content: "";
    flex-grow: 2;
    border: 4px solid var(--sidebar-inner-background-color);
    border-bottom: none;
  }
}

@media (min-width: 1280px) {
  #header {
    left: calc(var(--sidebar-width) / 2);
    width: calc(var(--sidebar-width) / 2);
  }

#header > .inner {
    margin: 0;
  }
}

h1#title {
  font-size: 1.5em;
  margin: 0;
  padding: var(--text-size);
  line-height: 1em;
  font-weight: normal;
  background: var(--sidebar-inner-background-color);
  color: var(--title-color);
  font-family: var(--title-font);
  font-style: italic;
}

h1#title a {
  color: var(--title-color);
}

h2#subtitle {
  font-size: 1em;
  background: var(--sidebar-inner-background-color);
  margin: -0.75em 0 0;
  padding: 0 1em 1em;
  line-height: 1em;
  text-transform: uppercase;
  font-weight: normal;
  color: var(--subtitle-color);
  letter-spacing: -1px;
}

h2#pagetitle {
  display: none;
}

/*------------ sidebar ------------*/

#secondary {
  position: relative;
  background: var(--sidebar-background-color);
  color: var(--sidebar-text-color);
}

#secondary > .inner:first-child {
  text-align: right;
  background: var(--sidebar-inner-background-color);
}

@media (min-width: 1280px) {
  #secondary {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(var(--sidebar-width) / 2);
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

#secondary > .inner:first-child {
    height: var(--sidebar-height);
    width: var(--sidebar-image-width);
    margin: 0;
  }
}

.module-section-one .inner {
  column-count: 2;
  column-width: 150px;
  padding: 2em;
}

@media (min-width: 1280px) {
  .module-section-one .inner {
    column-count: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: var(--sidebar-height);
    box-sizing: border-box;
    justify-content: center;
  }
}

.module a {
  color: var(--sidebar-link-color);
}

.module a:hover {
  color: var(--sidebar-link-hover-color);
}

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

.module-content li {
  break-inside: avoid;
  padding-right: 1em;
  margin-right: 10px;
  position: relative;
}

.module-content li a:after {
  content: "";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border: 2px solid var(--title-color);
  vertical-align: middle;
  margin-left: 1em;
  margin-top: -5px;
  top: 50%;
  right: -10px;
}

.module-content li a {
  color: var(--sidebar-text-color);
  text-transform: uppercase;
  letter-spacing: -1px;
}

.module-content li a:hover {
  color: var(--sidebar-link-color);
}

.module-customtext {
  margin-bottom: 1em;
  column-span: all;
  overflow: auto;
}

.module-customtext .module-content:first-letter {
  font-size: 2em;
  font-family: var(--title-font);
  font-style: italic;
  color: var(--title-color);
  line-height: 1em;
}

.module-customtext .module-content {
  padding-right: 2px;
}

.module-customtext::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.module-customtext::-webkit-scrollbar-track {
  background: transparent;
}

.module-customtext::-webkit-scrollbar-thumb {
  background: var(--sidebar-link-color);
  border-left: 5px solid var(--sidebar-inner-background-color);
}

.module-customtext::-webkit-scrollbar-corner {
  background: var(--sidebar-link-color);
}

.module h2,
.module .manage-link,
.module-userprofile,
.module-calendar,
.module-tags_list,
.module-tags_cloud,
.module-tags_multilevel,
.module-cuttagcontrols,
.module-pagesummary,
.module-active,
.module-credit,
.module-syndicate,
.module-subscriptionfilters,
.module-search,
.module-time,
.module-powered {
  display: none;
}

/*--------------- entries ---------------*/

.entry {
  margin: 10px 0;
  padding: 10px;
  color: var(--text-color);
  position: relative;
  background: var(--entry-background-color);
}

@media (min-width: 800px) {
  .entry {
    margin: 50px 0;
  }
}

.entry > .inner:first-child {
  border: 4px solid var(--entry-border-color);
  position: relative;
}

.entry .header {
  background: var(--entry-border-color);
  border-bottom: 4px solid var(--entry-border-color);
}

.has-userpic .entry .header {
  min-height: var(--icon-size);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 800px) {
  .has-userpic .entry .header .inner {
    width: calc(100% - var(--icon-size));
    box-sizing: border-box;
  }
}

.entry .header .inner {
  padding: 0.75em;
  line-height: 1;
}

.sticky-entry-icon,
.admin-post-icon {
  display: none;
}

.entry .entry-title,
.full .comment-title {
  font-size: 1.5em;
  font-family: var(--title-font);
  font-weight: normal;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.entry .entry-title,
.entry .entry-title a,
.full .comment-title a {
  color: var(--entry-title-color);
}

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

.restrictions img,
.access-filter img {
  display: none;
}

.security-protected .access-filter:before {
  content: "LOCKED";
}

.security-private .access-filter:before {
  content: "PRIVATE";
}

.restrictions-NSFW .restrictions:before {
  content: "NSFW";
}

.restrictions-18 .restrictions:before {
  content: "18+";
}

.datetime,
.datetime a {
  color: var(--link-color);
}

.header .datetime,
.restrictions,
.access-filter {
  text-transform: uppercase;
  letter-spacing: -1px;
  display: inline-block;
  margin-top: 0.25em;
  margin-right: 0.25em;
}

.has-userpic .userpic {
  float: right;
}

.has-userpic .entry .userpic {
  margin-top: -2em;
  margin-left: 1em;
  border-left: 4px solid var(--entry-border-color);
  border-bottom: 4px solid var(--entry-border-color);
}

.userpic img {
  display: block;
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
}

@media (min-width: 800px) {
  .has-userpic .entry .userpic {
    position: absolute;
    right: 0;
    top: 0;
    border-bottom: 4px solid var(--entry-border-color);
    margin: 0;
  }

.userpic img {
    max-width: var(--icon-size);
    max-height: var(--icon-size);
  }
}

.entry .poster,
.full .poster {
  display: block;
}

.entry .poster {
  font-size: 0;
  margin: 0 calc(var(--text-size) * 2) var(--text-size);
}

.entry .poster .ljuser:nth-child(1)::before {
  content: "Written by ";
}

.entry .poster .ljuser:nth-child(2)::before {
  content: "in ";
  padding-left: 0.25em;
}

.entry .poster .ljuser,
.full .poster .ljuser,
.poster .anonymous {
  display: inline-block;
}

.entry .poster .ljuser {
  font-size: var(--text-size);
}

.poster .ljuser img {
  display: none;
}

.poster.empty {
  border: none;
}

.poster .ljuser b {
  font-weight: normal;
}

.entry-content li,
.comment-content li {
  list-style-position: inside;
}

.entry-content img,
.comment-content img {
  max-width: 100%;
  height: auto;
}

.entry .contents {
  margin-top: 2em;
}

.entry-content {
  margin-bottom: 1.5em;
  padding: 0 2em 1.5em;
  border-bottom: 1px solid var(--entry-border-color);
}

@media (min-width: 800px) {
  .entry-content {
    text-align: justify;
  }
}

.entry-content ol,
.comment-content ol {
  padding-left: 1em;
}

.entry-content ul,
.comment-content ul {
  padding-left: 1em;
}

.cuttag_container img {
  vertical-align: bottom;
}

.metadata {
  margin: 0 2em;
}

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

.tag-text,
.metadata-label {
  text-transform: uppercase;
  letter-spacing: -1px;
}

.tag ul,
.metadata-item {
  margin: 0;
  padding: 0;
}

.tag-nav-trigger {
  vertical-align: middle;
}

.tag ul {
  display: inline;
}

.tag ul li {
  display: inline;
}

ul.entry-management-links,
ul.entry-interaction-links {
  margin: 0;
  padding: 0;
  display: inline;
  text-transform: uppercase;
  letter-spacing: -1px;
}

ul.entry-management-links li {
  display: inline;
  margin-right: 0.5em;
}

ul.entry-interaction-links li {
  display: inline;
  margin-right: 0.5em;
}

.entry .footer {
  padding: 0 2em 2em;
}

/*--------------- comments ---------------*/

.comment-pages {
  text-transform: uppercase;
  background: var(--entry-background-color);
  padding: 1.5em 2em;
  letter-spacing: -1px;
}

.comment {
  background: var(--entry-background-color);
  padding: 2em;
  margin: 10px 0;
}

.comment .header {
  float: left;
}

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

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

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

.comment-date-text {
  display: none;
}

.comment .poster {
  clear: left;
}

.comment-content {
  margin: 1.5em 0;
}

.multiform-checkbox input {
  vertical-align: top;
}

ul.comment-management-links,
ul.comment-interaction-links,
.comment .multiform-checkbox {
  margin: 0;
  padding: 0;
  display: inline;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -1px;
}

ul.comment-management-links li {
  padding-right: 0.5em;
  display: inline;
}

ul.comment-interaction-links li {
  padding-right: 0.5em;
  display: inline;
}

#comments ul.entry-management-links,
#comments ul.entry-interaction-links,
.comment-pages.bottompages {
  display: none;
}

.bottomcomment {
  padding: 0;
  color: var(--entry-background-color);
}

textarea#commenttext {
  width: 100%;
}

.partial .comment {
  padding: 1.5em 2em;
}

.partial .comment-title {
  margin: 0;
}

#qrformdiv {
  padding: 0;
  margin-top: 1em;
  max-width: 100%;
}

#postform {
  background: var(--entry-background-color);
  padding: 2em;
}

#qrdiv input[type="button"],
#qrdiv input[type="submit"] {
  background: var(--entry-border-color);
  border: 0;
  font-size: var(--text-size);
  padding: 0.5em;
  color: var(--link-color);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -1px;
  font-family: var(--main-font);
}

#qrformdiv .qr-meta .ljuser {
  font-size: inherit;
}

#qrdiv .ljuser img,
#talkform-from img {
  display: none;
}

#talkform-from label {
  font-weight: normal;
}

/*------------ archive, tags, icons containers ------------*/

.month-wrapper,
.page-month .month,
.tags-container,
.icons-container {
  margin: 10px 0;
  padding: 10px;
  background: var(--entry-background-color);
}

@media (min-width: 800px) {
  .month-wrapper,
  .page-month .month,
  .tags-container,
  .icons-container {
    margin: 50px 0;
  }
}

.month-wrapper > .month,
.page-month .month .inner,
.tags-container > .inner:first-child,
.icons-container > .inner:first-child {
  border: 4px solid var(--entry-border-color);
}

.month-wrapper .header,
.tags-container .header,
.icons-container .header {
  background: var(--entry-border-color);
  padding: 0.75em;
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-size: 1.5em;
  font-family: var(--title-font);
  color: var(--entry-title-color);
  font-weight: normal;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.tags-container .contents {
  padding: 2em;
}

#archive-year .month .footer,
#primary .manage-link {
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -1px;
}

#primary .manage-link {
  border-top: 1px solid var(--entry-border-color);
  padding: 1.5em 2em 2em;
}

/*------------ archive ------------*/

.day-date {
  display: none;
}

.month caption {
  display: none;
}

table.month {
  border-collapse: collapse;
  width: 100%;
  border: 0;
  text-align: center;
}

table.month td,
table.month th {
  max-width: 1em;
  height: 3.25em;
  border-bottom: 1px solid var(--entry-border-color);
  border-right: 1px solid var(--entry-border-color);
}

table.month td:last-child,
table.month th:last-child {
  border-right: 0;
}

table.month th {
  text-transform: uppercase;
  font-weight: normal;
}

.day-has-entries {
  background: var(--entry-border-color);
}

table.month td p {
  margin: 0;
}

.month dl {
  margin: 0;
}

.month dl dt {
  font-family: var(--title-font);
  color: var(--entry-title-color);
  background: var(--entry-border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 0.75em;
}

.month dl dt a {
  color: var(--entry-title-color);
}

.month dl br {
  display: block;
}

.month dl h3 {
  display: inline;
  font-size: 1em;
}

.month dd {
  margin: 2em;
}

.month dd > span {
  padding-right: 0.5em;
}

#archive-year .month .footer {
  padding: 1.5em 2em 2em;
}

#archive-year .navigation,
#archive-month .navigation {
  padding: 1em;
}

#archive-year .navigation li,
#archive-month .navigation li {
  display: inline;
  margin-right: 0.5em;
}

/*------------ tags ------------*/

ul.ljtaglist {
  margin: 0 0 0 1em;
  padding: 0;
  list-style: inside;
}

ul.ljtaglist:first-child,
.tags_cloud ul {
  padding: 0;
  margin: 0;
}

/*------------ icons page ------------*/

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

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

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

.sorting-options ul {
  margin: 0;
  padding: 1.5em 2em;
  text-transform: uppercase;
  letter-spacing: -1px;
  line-height: 1;
}

.page-icons .toppages {
  display: none;
}

.icons-container .icon {
  border-top: 1px solid var(--entry-border-color);
  display: flex;
  flex-wrap: wrap;
}

.icon-image {
  order: 2;
  min-width: auto;
  margin: 0;
  border: 3px solid var(--entry-border-color);
  border-right: 0;
}

.icon-image img {
  display: block;
}

.icon-info {
  padding: 1.5em 2em;
  flex: 1;
}

.default.label,
.keywords-label,
.comment-text,
.description-text {
  text-transform: uppercase;
  letter-spacing: -1px;
}

.page-icons .bottompages {
  padding: 1em 2em;
  text-transform: uppercase;
  border-top: 1px solid var(--entry-border-color);
  letter-spacing: -1px;
}

.page-icons .bottompages b {
  font-weight: normal;
}

.icon-pages p {
  margin: 0;
}

/*------------ navigation ------------*/

.navigation {
  background: var(--entry-background-color);
  overflow: hidden;
  margin: 10px 0;
}

@media (min-width: 800px) {
  .navigation {
    margin: 50px 0;
  }
}

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

#entries .navigation ul {
  border: 1px solid var(--entry-border-color);
  overflow: hidden;
  margin: 2px;
}

li.page-back {
  float: left;
}

li.page-forward {
  float: right;
}

li.page-back a,
li.page-forward a {
  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  overflow: hidden;
  color: var(--entry-title-color);
}

li.page-back a:before,
li.page-forward a:before {
  display: block;
  font-family: Material Icons;
  font-size: 24px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

li.page-back a:before {
  content: "arrow_back";
  background: var(--entry-border-color);
}

li.page-forward a:before {
  content: "arrow_forward";
  background: var(--entry-border-color);
}

.topnav,
.navigation .page-separator,
.navigation.empty,
.noentries {
  display: none;
}

/*------------ footer ------------*/

#footer {
  text-align: center;
  padding: 10px;
}

@media (min-width: 1024px) {
  #footer {
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 0;
    right: 0;
  }
}

.page-top {
  width: 30px;
  height: 30px;
  overflow: hidden;
  transition: all ease 0.5s;
  margin: 0 auto;
}

.page-top a:before {
  display: block;
  font-family: Material Icons;
  font-size: 26px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  content: "arrow_upward";
  color: var(--sidebar-background-color);
}

@media (min-width: 1024px) {
  .page-top:hover {
    margin-top: -5px;
  }
}

/*------------ contextual pop-up ------------*/

div.ContextualPopup {
  color: var(--text-color);
  background: var(--entry-background-color);
  border: 3px solid var(--entry-border-color);
  padding: 0;
  font-family: inherit;
  box-shadow: none;
  border-radius: 0;
  width: 140px;
}

.ContextualPopup a {
  color: var(--text-color);
}

div.ContextualPopup .Relation {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
  padding: 0.25em;
  border-top: 3px solid var(--entry-border-color);
  text-align: center;
}

div.ContextualPopup .Userpic {
  border: none;
  float: none;
  margin: 0;
  padding: 10px;
  text-align: center;
}

div.ContextualPopup .Userpic img {
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
  border: 10px solid var(--entry-border-color);
}

.ContextualPopup .Actions ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

div.ContextualPopup li {
  border-top: 1px solid var(--entry-border-color);
  padding: 0.25em;
}

/*------------ control strip ------------*/

#lj_controlstrip {
  background: var(--sidebar-background-color);
  color: var(--sidebar-text-color);
  justify-content: center;
  padding: 0.75em 0;
}

@media (min-width: 1024px) {
  #lj_controlstrip {
    transform: translateY(-100%);
    position: fixed;
    transition: transform 0.7s;
    z-index: 9;
  }

#lj_controlstrip:after {
    font-family: "Material Icons";
    content: "settings";
    font-size: 26px;
    position: absolute;
    bottom: -40px;
    height: 30px;
    width: 30px;
    right: 10px;
    padding-top: 10px;
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    color: var(--sidebar-background-color);
  }

#lj_controlstrip:hover {
    transform: translateY(0);
  }
}

#lj_controlstrip > div {
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  padding: 0.25em 0.5em;
  flex-grow: 0;
}

#lj_controlstrip a {
  font-family: var(--main-font);
  color: var(--sidebar-link-color);
}

#lj_controlstrip_user > a,
#lj_controlstrip_actionlinks > a {
  letter-spacing: -1px;
  text-transform: uppercase;
}

#lj_controlstrip a:hover {
  color: var(--sidebar-link-hover-color);
  text-decoration: none;
}

#lj_controlstrip_user,
#lj_controlstrip_login,
#lj_controlstrip_actionlinks {
  border-right: none;
}

#lj_controlstrip_userpic img {
  border: 4px solid var(--sidebar-inner-background-color) !important;
}

#lj_controlstrip_actionlinks {
  text-align: center;
}

#lj_controlstrip_statustext {
  color: var(--sidebar-text-color);
  font-weight: normal;
  font-size: var(--text-size);
}

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 0;
}

#lj_controlstrip input[type="submit"] {
  font-family: var(--title-font);
  font-style: italic;
  padding: 5px;
  color: var(--title-color);
  background: transparent;
  font-size: 1.2em;
}

#lj_controlstrip .ljuser img {
  display: none;
}

How to install:

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose one of the 1 Column page setups.
Go to the "Customize your theme" page, click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)".
On the same page, paste the following https://fonts.googleapis.com/css2?family=Fira+Sans&family=Playfair+Display:ital@1&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab. Set "Custom text" to number 1, "Navigation" to number 2 and "Links list" to number 4. Uncheck the other modules.
Click on the "Presentation" tab; in the "Additional options" section look for "Select whether entry management links are printed as text or using the available icons" and "Select whether comment management links are printed as text or using the available icons". Select "text-only" for both.

Resources:

icon font by Google
image from unsplash.com

comments

Emphasis

Sun, 09 Jun 2019 11:59:27 GMT

Posted by: rosecarmine

Live preview
Features:

header image (700x300px)
sidebar image (300x200px)
navigation links, links list, custom text
comment pages
icon pages

Code:

/*-------------------------------------

- layout - emphasis (tabula rasa) - https://myrtillenne.dreamwidth.org
- images - https://unsplash.com

/*--------------- options ---------------*/

:root {
  --text-size: 16px;
  --text-color: #ddd;
  --line-height: 1.5;
  --background-color: #222;
  --link-color: #fb6a0b;
  --link-hover-color: #ed9f54;
  --main-font: Roboto, sans-serif;
  --title-font: Roboto Condensed, sans-serif;
  --title-color: #ed9f54;
  --content-width: 700px;
  --border-color: #444;
  --entry-background-color: #2c2c2c;
  --header-image: url("https://rosecarmine.dreamwidth.org/file/72985.jpg");
  --header-image-height: 300px;
  --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/69222.jpg");
  --sidebar-image-width: 300px;
  --sidebar-image-height: 200px;
  --sidebar-link-color: #fb6a0b;
  --sidebar-link-hover-color: #222;
  --sidebar-link-background-color: #272727;
  --sidebar-link-background-hover-color: #ed9f54;
}

/*--------------- general ---------------*/

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

img {
  border: none;
}

hr {
  display: none;
}

body {
  color: var(--text-color);
  background: var(--background-color);
  border: 0;
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  margin: 0;
}

/*--------------- links ---------------*/

a,
a:visited {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover-color);
}

a,
a:link,
a:visited {
  text-decoration: none;
  transition: all 0.4s ease;
}

q {
  font-style: italic;
}

blockquote {
  border: 1px solid var(--border-color);
  margin: 1em 0;
  padding: 1em;
}

/*--------------- content ---------------*/

#canvas {
  margin-top: 40px;
}

@media (min-width: 1024px) {
  #canvas {
    margin: 40px 0 40px calc(var(--sidebar-image-width) + 81px);
    padding: 0 40px;
  }
}

#content-footer {
  height: 0;
  font-size: 0;
  clear: both;
}

#header,
#primary {
  max-width: var(--content-width);
  margin: 30px auto;
}

@media (min-width: 1024px) {
  #header,
  #primary {
    margin: 30px 0;
  }
}

/*--------------- header ---------------*/

@media (min-width: 800px) {
  #header:after {
    content: "";
    display: block;
    width: 100%;
    height: var(--header-image-height);
    margin-top: 10px;
    background-image: var(--header-image);
    background-repeat: no-repeat;
    background-position: center center;
  }
}

#header > .inner {
  text-align: center;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  position: relative;
  padding: 20px 5px;
  line-height: 1;
  text-transform: uppercase;
  font-family: var(--title-font);
}

h1#title {
  font-size: 2em;
  margin: 0;
  padding: 0;
  font-weight: normal;
}

h1#title a {
  color: var(--title-color);
}

h2#subtitle {
  font-size: 1em;
  font-weight: normal;
  background: var(--sidebar-link-background-hover-color);
  color: var(--sidebar-link-hover-color);
  margin: 0;
  padding: 0;
}

@media (min-width: 800px) {
  h1#title {
    font-size: 4em;
  }
}

h2#pagetitle {
  display: none;
}

/*--------------- entries ---------------*/

.entry {
  margin: 30px 0;
  border: 1px solid var(--border-color);
  background: var(--entry-background-color);
}

.entry .header,
.comment .header {
  float: left;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--title-font);
  text-transform: uppercase;
  line-height: 1;
}

.entry .entry-title {
  font-size: 1.5em;
  color: var(--title-color);
  font-weight: normal;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  margin: 0;
  padding: 0.5em;
}

.entry .entry-title a {
  color: var(--title-color);
}

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

.sticky-entry-icon,
.admin-post-icon {
  display: none;
}

.restrictions img,
.access-filter img {
  display: none;
}

.entry .date,
.entry .time,
.entry .restrictions,
.entry .access-filter {
  padding: 0.5em;
  border-right: 1px solid var(--border-color);
  display: block;
  float: left;
}

.security-protected .access-filter:before {
  content: "LOCKED";
}

.security-private .access-filter:before {
  content: "PRIVATE";
}

.restrictions-NSFW .restrictions:before {
  content: "NSFW";
}

.restrictions-18 .restrictions:before {
  content: "18+";
}

.has-userpic .userpic {
  float: right;
  margin-top: -1px;
  margin-left: 1em;
}

@media (min-width: 1280px) {
  .has-userpic .userpic {
    width: 110px;
    margin-right: -115px;
    margin-left: 0;
  }
}

.userpic img {
  border: 1px solid var(--border-color);
  background: var(--entry-background-color);
  padding: 5px;
  display: block;
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
}

@media (min-width: 800px) {
  .userpic img {
    max-width: 100px;
    max-height: 100px;
  }
}

.entry .poster,
.full .poster {
  clear: left;
  display: block;
  border-bottom: 1px solid var(--border-color);
  text-align: right;
  line-height: 1;
}

.entry .poster {
  font-size: 0;
}

.entry .poster .ljuser,
.full .poster .ljuser,
.poster .anonymous {
  display: inline-block;
  font-family: var(--title-font);
  text-transform: uppercase;
  padding: 0.5em;
  border-left: 1px solid var(--border-color);
}

.entry .poster .ljuser {
  font-size: var(--text-size);
}

.has-userpic .entry .poster .ljuser:last-child,
.full.has-userpic .poster .ljuser {
  margin-right: -1em;
}

@media (min-width: 1280px) {
  .has-userpic .entry .poster .ljuser:last-child,
  .full.has-userpic .poster .ljuser {
    margin-right: 0;
  }
}

.poster .ljuser img {
  display: none;
}

.poster.empty {
  border: none;
}

.poster .ljuser b {
  font-weight: normal;
}

.entry-content li,
.comment-content li {
  list-style-position: inside;
}

.entry-content img,
.comment-content img {
  max-width: 100%;
  height: auto;
}

.entry-content {
  margin: 2em;
  clear: left;
}

@media (min-width: 800px) {
  .entry-content {
    text-align: justify;
  }
}

.entry-content ol,
.comment-content ol {
  padding-left: 1em;
}

.entry-content ul,
.comment-content ul {
  padding-left: 1em;
}

.metadata {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: -1px;
  clear: both;
}

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

.entry div.tag,
.metadata li {
  border-top: 1px solid var(--border-color);
  display: flex;
  line-height: 1;
}

.entry .tag-text,
.metadata-label {
  font-family: var(--title-font);
  text-transform: uppercase;
  padding: 0.5em;
  border-right: 1px solid var(--border-color);
}

.entry .tag ul,
.metadata-item {
  margin: 0;
  padding: 0.5em;
}

.entry div.tag {
  border-bottom: 1px solid var(--border-color);
}

.tag ul li {
  display: inline;
}

.tag-nav-trigger {
  align-self: center;
}

ul.entry-management-links,
ul.entry-interaction-links {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
  text-transform: uppercase;
  font-family: Roboto Condensed, sans-serif;
  line-height: 1;
}

ul.entry-management-links {
  margin-top: 10px;
}

ul.entry-management-links li {
  padding: 0.5em;
  border-right: 1px solid var(--border-color);
}

ul.entry-interaction-links {
  justify-content: flex-end;
}

ul.entry-interaction-links li {
  padding: 0.5em;
  border-left: 1px solid var(--border-color);
}

.footer {
  clear: both;
}

/*--------------- comments ---------------*/

.comment-pages {
  text-transform: uppercase;
  font-family: var(--title-font);
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  padding: 0.5em;
  text-align: center;
}

.comment-pages:first-of-type {
  margin-top: 30px;
  margin-bottom: 5px;
}

.full .comment {
  margin: 30px 0;
  border: 1px solid var(--border-color);
  background: var(--entry-background-color);
}

.comment .header .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.full .comment-title {
  font-size: 1em;
  font-family: var(--title-font);
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  margin: 0;
  padding: 0.5em;
  line-height: 1;
  order: -1;
  flex: 0 0 100%;
}

.full .comment-title a {
  color: var(--title-color);
}

.full .thread-depth,
.full .header .datetime {
  padding: 0.5em;
  border-right: 1px solid var(--border-color);
  font-family: var(--title-font);
  text-transform: uppercase;
  line-height: 1;
}

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

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

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

.comment-date-text,
.comment-from-text {
  display: none;
}

.comment .poster-ip {
  font-size: 1em;
  display: block;
  font-family: var(--title-font);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
  line-height: 1;
  padding: 0.5em;
}

.comment-content {
  padding: 2em;
}

.comment .multiform-checkbox {
  float: left;
  border-top: 1px solid var(--border-color);
  padding: 0.25em 0.5em 0;
  display: block;
  font-family: var(--title-font);
  text-transform: uppercase;
}

.multiform-checkbox input {
  vertical-align: top;
}

ul.comment-management-links,
ul.comment-interaction-links {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
  text-transform: uppercase;
  font-family: var(--title-font);
  line-height: 1;
}

ul.comment-management-links li {
  padding: 0.5em;
  border-right: 1px solid var(--border-color);
}

ul.comment-management-links li:first-child {
  border-left: 1px solid var(--border-color);
  margin-left: -1px;
}

ul.comment-interaction-links {
  justify-content: flex-end;
}

ul.comment-interaction-links li {
  padding: 0.5em;
  border-left: 1px solid var(--border-color);
}

#comments ul.entry-management-links,
#comments ul.entry-interaction-links,
.comment-pages.bottompages {
  display: none;
}

.bottomcomment {
  padding: 0;
  text-align: center;
}

textarea#commenttext {
  width: 100%;
}

.partial .comment {
  background: var(--entry-background-color);
  margin-top: 10px;
  padding: 0.5em 1em;
  border: 1px solid var(--border-color);
}

.partial .comment-title {
  margin: 0;
}

#qrformdiv {
  right: 0 !important;
  min-width: 100% !important;
  padding: 0;
}

#qrform {
  padding: 2em;
  border-top: 1px solid var(--border-color);
}

#qrdiv input,
#qrdiv select,
#qrdiv textarea {
  border: 1px solid var(--border-color);
  background: var(--entry-background-color);
  color: var(--text-color);
  font-family: var(--main-font);
  font-size: var(--text-size);
}

#qrdiv input[type="button"],
#qrdiv input[type="submit"] {
  background: var(--sidebar-link-background-color);
  font-family: var(--title-font);
  font-size: var(--text-size);
  padding: 0.5em;
  color: var(--sidebar-link-color);
  text-transform: uppercase;
  line-height: 1;
}

#postform {
  padding: 2em;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  margin-top: 5px;
}

/*------------ archive, tags, icons containers ------------*/

.month-wrapper,
.page-month .month,
.tags-container,
.icons-container {
  margin: 30px 0;
  border: 1px solid var(--border-color);
  background: var(--entry-background-color);
}

.month-wrapper .header,
.tags-container .header,
.icons-container .header {
  border-bottom: 1px solid var(--border-color);
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-size: 1.5em;
  font-family: var(--title-font);
  color: var(--title-color);
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
  margin: 0;
  padding: 0.5em;
  line-height: 1;
}

.tags-container .contents {
  padding: 2em;
}

#archive-year .month .footer .inner,
#primary .manage-link {
  font-family: var(--title-font);
  text-transform: uppercase;
  line-height: 1;
  border-top: 1px solid var(--border-color);
}

#archive-year .month .footer .inner a,
#primary .manage-link a {
  display: inline-block;
  padding: 0.5em;
  border-right: 1px solid var(--border-color);
}

/*------------ archive ------------*/

.day-date {
  display: none;
}

.month caption {
  display: none;
}

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

table.month td,
table.month th {
  border-right: 1px solid var(--border-color);
  max-width: 1em;
  height: 3.25em;
}

table.month th {
  font-family: var(--title-font);
  text-transform: uppercase;
  font-weight: normal;
}

table.month td:last-child,
table.month th:last-child {
  border-right: none;
}

table.month tr,
table.month th {
  border-bottom: 1px solid var(--border-color);
}

table.month tr:last-child {
  border-bottom: none;
}

table.month td p {
  margin: 0;
}

.month dl {
  margin: 0;
}

.month dl dt {
  font-family: var(--title-font);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.25em;
  padding: 0.25em;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.month dl dt:first-child {
  border-top: 0;
}

.month dl br {
  display: block;
}

.month dl h3 {
  display: inline;
  font-size: 1em;
}

.month dd {
  margin: 0;
  padding: 2em;
}

.month dd > span {
  padding-right: 0.25em;
}

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

#archive-year .navigation ul,
#archive-month .navigation ul form {
  display: flex;
  flex-wrap: wrap;
}

#archive-year .navigation li,
#archive-month .navigation li {
  border-right: 1px solid var(--border-color);
}

/*------------ tags ------------*/

ul.ljtaglist {
  margin: 0 0 0 1em;
  padding: 0;
  list-style: inside;
}

ul.ljtaglist:first-child,
.tags_cloud ul {
  padding: 0;
  margin: 0;
}

/*------------ icons page ------------*/

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

/*------------ icons page ------------*/

.sorting-options ul {
  margin: 0;
  padding: 0.5em;
  text-transform: uppercase;
  font-family: var(--title-font);
  line-height: 1;
  border-bottom: 1px solid var(--border-color);
}

.page-icons .toppages {
  display: none;
}

.page-icons .bottompages {
  padding: 0.25em;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--title-font);
}

.icons-container .icon {
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
}

.icons-container .icon:last-child {
  border-bottom: 0;
}

.icon-image {
  order: 2;
  min-width: auto;
  margin: 0;
  border-left: 1px solid var(--border-color);
}

.icon-image img {
  display: block;
  padding: 5px;
}

.icon-info {
  padding: 1.5em;
  flex: 1;
}

.default.label,
.keywords-label,
.comment-text,
.description-text {
  text-transform: uppercase;
  font-family: var(--title-font);
  text-decoration: none;
}

.icon-pages p {
  margin: 0;
  text-transform: uppercase;
  font-family: var(--title-font);
}

/*------------ sidebar ------------*/

#secondary {
  background: var(--entry-background-color);
  margin-top: 30px;
  border-top: 1px solid var(--border-color);
}

.one-column-split #secondary {
  border-bottom: 1px solid var(--border-color);
}

.module-section-one {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1.5em 1.5em;
}

.module{
  margin-top: 1.5em;
}

@media (min-width: 1024px) {
  #secondary {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-image-width);
    height: 100%;
    overflow: auto;
    display: flex;
    border: none;
    border-right: 1px solid var(--border-color);
    margin: 0;
    padding: 0 40px;
  }
  .module-section-one {
    margin: 40px 0;
    padding: 0;
  }
}

#secondary > .inner:first-child {
  margin: auto;
}

@media (min-width: 1024px) {
  .module-section-one:before {
    content: "";
    display: block;
    width: 100%;
    height: var(--sidebar-image-height);
    margin-bottom: 10px;
    background-image: var(--sidebar-image);
    background-repeat: no-repeat;
    background-position: center center;
  }
}

.module-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -2px;
}

.module-content li {
  flex-grow: 1;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--title-font);
  line-height: 1;
}

@media (min-width: 1024px) {
  .module-content li {
    min-width: 50%;
  }
}

.module-content li a {
  display: block;
  margin: 2px;
  background: var(--sidebar-link-background-color);
  border: 1px solid var(--border-color);
  padding: 0.5em;
  color: var(--sidebar-link-color);
}

.module-content li a:hover {
  border: 1px solid var(--sidebar-link-background-hover-color);
  background: var(--sidebar-link-background-hover-color);
  color: var(--sidebar-link-hover-color);
}

#secondary::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

#secondary::-webkit-scrollbar-track {
  background: transparent;
}

#secondary::-webkit-scrollbar-thumb {
  background: var(--border-color);
}

#secondary::-webkit-scrollbar-corner {
  background: var(--border-color);
}

/*------------ navigation ------------*/

.navigation ul {
  margin: 30px 0;
  padding: 0;
  text-transform: uppercase;
  overflow: hidden;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
}

.navigation li {
  padding: 0.5em;
  text-align: center;
  line-height: 1;
  font-family: var(--title-font);
  list-style: none;
}

li.page-back {
  float: left;
  border-right: 1px solid var(--border-color);
}

li.page-forward {
  border-left: 1px solid var(--border-color);
  float: right;
}

.topnav,
.navigation .page-separator,
.navigation.empty,
.noentries {
  display: none;
}

/*------------ footer ------------*/

.page-top {
  border-top: 1px solid var(--border-color);
  background: var(--entry-background-color);
  font-family: var(--title-font);
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.5em;
}

@media (min-width: 1024px) {
  #footer {
    max-width: var(--content-width);
  }

.page-top {
    border: 1px solid var(--border-color);
  }
}

#footer a {
  color: var(--title-color);
}

/*------------ contextual pop-up ------------*/

div.ContextualPopup {
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  padding: 1.5em;
  font-family: inherit;
  box-shadow: none;
  border-radius: 0;
}

.ContextualPopup a {
  color: var(--link-color);
}
.ContextualPopup a:hover {
  color: var(--link-hover-color);
}

div.ContextualPopup .Relation {
  font-size: 1em;
  font-family: var(--title-font);
  font-weight: normal;
  text-transform: uppercase;
  color: var(--text-color);
  margin: 0;
}

div.ContextualPopup .Userpic {
  border: none;
}

div.ContextualPopup ul {
  padding: 0.5em 0 0 !important;
}

/*------------ control strip ------------*/

#lj_controlstrip {
  background: var(--entry-background-color);
  color: var(--text-color);
  padding: 0.75em 0;
  border-bottom: 1px solid var(--border-color);
  width: auto;
}

@media (min-width: 1024px) {
  #lj_controlstrip {
    padding-left: calc(var(--sidebar-image-width) + 81px);
  }
}

#lj_controlstrip > div {
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  padding: 0.25em 0.5em !important;
  flex-grow: 0;
}

#lj_controlstrip a {
  font-family: var(--main-font);
  color: var(--link-color);
}

#lj_controlstrip a:hover {
  color: var(--link-hover-color);
  text-decoration: none;
}

#lj_controlstrip_statustext {
  color: var(--text-color);
  font-weight: normal;
  font-size: var(--text-size);
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 1px solid var(--border-color);
  background: var(--entry-background-color) !important;
  font-size: var(--text-size) !important;
  color: var(--text-color) !important;
  font-family: var(--main-font);
}

#lj_controlstrip input[type="submit"] {
  background: var(--sidebar-link-background-color) !important;
  font-family: var(--title-font);
  font-size: var(--text-size);
  padding: 0.5em;
  color: var(--sidebar-link-color) !important;
  text-transform: uppercase;
  line-height: 1;
}

#lj_controlstrip .ljuser b {
  font-weight: normal;
}

#lj_controlstrip .ljuser img {
  display: none;
}

#lj_controlstrip_user,
#lj_controlstrip_login,
#lj_controlstrip_actionlinks {
  border: 0;
}

How to install:

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Go to the "Customize your theme" page, click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)".
On the same page, copy and paste the following https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Condensed&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab. Set "Navigation" to number 2, "Custom text" to number 3, "Links list" to number 4. Uncheck the other modules.
Click on the "Presentation" tab; in the "Additional options" section look for "Entry date/time format" and "Comment date/time format". Select "30/04/2010" and "21:00" for both.
In the same section look for "Select whether entry management links are printed as text or using the available icons" and "Select whether comment management links are printed as text or using the available icons". Select "text-only" for both.

Live preview
Features:

header image (800x300px)
navigation links, links list, custom text
comment pages
icon pages

Code:

/*-------------------------------------

- layout - emphasis (tabula rasa) - https://myrtillenne.dreamwidth.org
- images - https://unsplash.com

/*--------------- options ---------------*/

:root {
  --text-size: 16px;
  --text-color: #ddd;
  --line-height: 1.5;
  --background-color: #222;
  --link-color: #fb6a0b;
  --link-hover-color: #ed9f54;
  --main-font: Roboto, sans-serif;
  --title-font: Roboto Condensed, sans-serif;
  --title-color: #ed9f54;
  --content-width: 800px;
  --border-color: #444;
  --entry-background-color: #2c2c2c;
  --header-image: url("https://rosecarmine.dreamwidth.org/file/69379.jpg");
  --header-image-height: 300px;
  --sidebar-link-color: #fb6a0b;
  --sidebar-link-hover-color: #222;
  --sidebar-link-background-color: #272727;
  --sidebar-link-background-hover-color: #ed9f54;
  --customtext-height: 12em;
}

/*--------------- general ---------------*/

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

img {
  border: none;
}

hr {
  display: none;
}

/*--------------- links ---------------*/

a,
a:visited {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
}

a,
a:link,
a:visited {
  text-decoration: none;
  transition: all 0.4s ease;
}

q {
  font-style: italic;
}

blockquote {
  border: 1px solid var(--border-color);
  margin: 1em 0;
  padding: 1em;
}

/*--------------- content ---------------*/

#canvas {
  margin: 30px auto;
  max-width: var(--content-width);
}

@media (min-width: 800px) {
  #canvas {
    margin: 50px auto;
  }
}

@media (min-width: 1024px) {
  #canvas {
    padding: 0 120px;
  }
}

#content-footer {
  height: 0;
  font-size: 0;
  clear: both;
}

/*--------------- header ---------------*/

h1#title {
  font-size: 2em;
  margin: 0;
  padding: 0;
  font-weight: normal;
}

h1#title a {
  color: var(--title-color);
}

h2#subtitle {
  font-size: 1em;
  font-weight: normal;
  background: var(--sidebar-link-background-hover-color);
  color: var(--sidebar-link-hover-color);
  margin: 0;
  padding: 0;
}

@media (min-width: 800px) {
  h1#title {
    font-size: 4em;
  }
}

h2#pagetitle {
  display: none;
}

/*--------------- entries ---------------*/

.entry {
  margin: 30px 0;
  border: 1px solid var(--border-color);
  background: var(--entry-background-color);
}

.entry .header,
.comment .header {
  float: left;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--title-font);
  text-transform: uppercase;
  line-height: 1;
}

.entry .entry-title {
  font-size: 1.5em;
  color: var(--title-color);
  font-weight: normal;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  margin: 0;
  padding: 0.5em;
}

.entry .entry-title a {
  color: var(--title-color);
}

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

.sticky-entry-icon,
.admin-post-icon {
  display: none;
}

.restrictions img,
.access-filter img {
  display: none;
}

.entry .date,
.entry .time,
.entry .restrictions,
.entry .access-filter {
  padding: 0.5em;
  border-right: 1px solid var(--border-color);
  display: block;
  float: left;
}

.security-protected .access-filter:before {
  content: "LOCKED";
}

.security-private .access-filter:before {
  content: "PRIVATE";
}

.restrictions-NSFW .restrictions:before {
  content: "NSFW";
}

.restrictions-18 .restrictions:before {
  content: "18+";
}

.has-userpic .userpic {
  float: right;
  margin-top: -1px;
  margin-left: 1em;
}

@media (min-width: 1024px) {
  .has-userpic .userpic {
    width: 110px;
    margin-right: -115px;
    margin-left: 0;
  }
}

@media (min-width: 800px) {
  .userpic img {
    max-width: 100px;
    max-height: 100px;
  }
}

.entry .poster,
.full .poster {
  clear: left;
  display: block;
  border-bottom: 1px solid var(--border-color);
  text-align: right;
  line-height: 1;
}

.entry .poster {
  font-size: 0;
}

.entry .poster .ljuser {
  font-size: var(--text-size);
}

.has-userpic .entry .poster .ljuser:last-child,
.full.has-userpic .poster .ljuser {
  margin-right: -1em;
}

@media (min-width: 1024px) {
  .has-userpic .entry .poster .ljuser:last-child,
  .full.has-userpic .poster .ljuser {
    margin-right: 0;
  }
}