Candy

[rosecarmine]

LIVE PREVIEW

FEATURES

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

INSTRUCTIONS

1. Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
2. Choose the "1 Column (modules at top and bottom; no sidebar)" page setup.
3. 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.
4. 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.
5. 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
6. 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