myrtillenne

Custom text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus porttitor malesuada. Sed sit amet velit sed sem rhoncus placerat. Aenean faucibus a lorem vel pretium. Duis ligula est, efficitur et tortor a, varius varius quam. Morbi luctus libero a cursus facilisis. Nulla congue posuere ligula, et consectetur elit consectetur ac. Quisque pulvinar dui eu mi feugiat, quis porttitor magna rutrum. Etiam vehicula ipsum et lorem interdum, eu bibendum ligula accumsan. In scelerisque tincidunt libero eget scelerisque.

June 2023

S	M	T	W	T	F	S
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Syndicate

Page Summary

Style Credit

Base style: Basic Boxes by branchandroot
Theme: Delicate by nornoriel

Expand Cut Tags

No cut tags

rosecarmine

Live preview
Features:

header image (pattern)
navigation links, links list (as dropdown menu), custom text
sliding management links
comment pages
icon pages

Code:

/*-------------------------------------
 
- layout - slide (tabula rasa) - https://myrtillenne.dreamwidth.org
- icon font - material icons - https://material.io
- header image - https://www.freepik.com/tartila

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

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

:root {
  --text-size: 16px;
  --text-color: #182e4e;
  --line-height: 1.5;
  --background-color: #eee;
  --link-color: #3667b1;
  --link-hover-color: #182e4e;
  --main-font: Fira Sans, serif;
  --title-font: Atomic Age, sans-serif;
  --header-text-color: #a3acb1;
  --header-link-color: #5786cc;
  --header-link-hover-color: #a3acb1;
  --header-background-color: rgba(0, 0, 0, 0.5);
  --header-image: url("https://rosecarmine.dreamwidth.org/file/120893.jpg");
  --navigation-background-color: #222;
  --navigation-text-color: #a3acb1;
  --navigation-link-color: #c9cdcf;
  --navigation-link-hover-color: #fafafa;
  --navigation-link-background-hover-color: #000;
  --navigation-link-shadow-color: #000;
  --link-list-background-color: #182e4e;
  --link-list-background-hover-color: #000;
  --link-list-color: #c9cdcf;
  --link-list-hover-color: #fafafa;
  --customtext-height: 10.5em;
  --entry-width: 800px;
  --entry-background-color: #fafafa;
  --entry-border-color: #222;
  --entry-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;
}

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

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

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

a,
a:link,
a:visited,
a:active {
  text-decoration: none;
  transition: color 0.4s linear, background 0.4s linear;
}

img {
  border: none;
}

hr {
  display: none;
}

blockquote {
  border-left: 5px solid var(--entry-border-color);
  margin: 1em 0;
  padding-left: 1em;
}

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

#header {
  position: relative;
  z-index: 3;
  float: left;
  width: 100%;
}

#header > .inner {
  padding: 1.5em;
  text-align: center;
  background: var(--header-background-color);
  box-sizing: border-box;
}

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

h1#title a {
  color: var(--header-link-color);
}

h1#title a:hover {
  color: var(--header-link-hover-color);
}

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

h2#pagetitle {
  display: none;
}

@media (min-width: 800px) {
  #header {
    padding: 30px 30px 0;
    box-sizing: border-box;
  }

#header > .inner {
    max-width: var(--entry-width);
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  #header {
    padding: 30px 160px 0;
  }
}

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

#secondary {
  position: relative;
  z-index: 2;
}

.module-section-one {
  text-align: center;
  box-shadow: 0 2px 2px var(--entry-shadow-color);
  background: var(--navigation-background-color);
}

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

.module-content li {
  margin: 0.5em;
  line-height: 1;
}

.module-navlinks li {
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 0 var(--navigation-link-shadow-color);
  display: inline-block;
}

.module-typelist h2 {
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
  text-shadow: 0 2px 0 var(--navigation-link-shadow-color);
  text-align: center;
  color: var(--navigation-link-color);
  padding: 0;
  margin: 0.5em;
}

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

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

.module-typelist h2 a {
  color: var(--navigation-link-color);
}

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

.module-typelist .module-content {
  background: var(--link-list-background-color);
  padding: 0.5em;
}

.module-typelist .module-content li {
  display: inline;
}

.module-typelist .module-content li a {
  color: var(--link-list-color);
}

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

.module-customtext {
  background: var(--header-image);
}

.module-customtext .module-content {
  clear: both;
  color: var(--header-text-color);
  max-height: var(--customtext-height);
  overflow: auto;
  background: var(--header-background-color);
  border: 1.5em solid transparent;
  border-top: 0;
  box-sizing: border-box;
}

.module-customtext .module-content a {
  color: var(--header-link-color);
}

.module-customtext .module-content a:hover {
  color: var(--header-link-hover-color);
}

@media (min-width: 800px) {
  .module-content li {
    margin: 0;
  }

.module-navlinks,
  .module-typelist {
    display: inline-block;
    vertical-align: top;
  }

.module-navlinks {
    position: relative;
    z-index: 1;
  }

.module-navlinks li {
    position: relative;
  }

.module-navlinks li:before,
  .module-typelist h2:before {
    content: "";
    display: block;
    position: absolute;
    background: var(--navigation-link-background-hover-color);
    margin: auto;
    width: 0;
    height: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: all 0.6s ease;
    z-index: -1;
  }

.module-navlinks li:hover:before,
  .module-typelist:hover h2:before {
    width: 100%;
    height: 100%;
  }

.module-navlinks li a {
    display: block;
    height: 100%;
    padding: 1em;
  }

.module-typelist {
    position: relative;
  }

.module-typelist h2 {
    display: inline-block;
    line-height: 1;
    padding: 1em;
    margin: 0;
    position: relative;
    cursor: pointer;
    z-index: 1;
  }

.module-typelist h2:after {
    display: inline-block;
    content: "";
    width: 0;
    border: 4px solid transparent;
    border-top-color: var(--navigation-link-color);
    margin-left: 0.5em;
  }

.module-typelist .module-content {
    position: absolute;
    text-align: center;
    width: 14em;
    max-height: 0;
    overflow: hidden;
    transition: all 1s ease;
    left: 50%;
    margin-left: -7em;
    box-shadow: 0 2px 5px var(--entry-shadow-color);
    padding: 0;
  }

.module-typelist:hover .module-content {
    max-height: 30em;
    z-index: 99999;
  }

.module-typelist .module-content li {
    display: block;
  }

.module-typelist .module-content li a {
    padding: 1em;
    display: block;
  }

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

.module-customtext {
    padding: 0 30px 30px;
  }

.module-customtext .module-content {
    max-width: var(--entry-width);
    max-height: var(--customtext-height);
    overflow: auto;
    margin: 0 auto;
    padding: 0;
  }
}

@media (min-width: 1024px) {
  .module-customtext {
    padding: 0 160px 30px;
  }
}

.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(--header-link-color);
}

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

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

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

.entry-wrapper {
  margin: 30px auto;
}

.entry {
  padding: 2em;
  background: var(--entry-background-color);
  box-shadow: 0 0px 2px var(--entry-shadow-color);
  position: relative;
}

@media (min-width: 800px) {
  .entry-wrapper {
    max-width: var(--entry-width);
    margin: 30px auto;
    padding: 0 30px;
  }
}

@media (min-width: 1024px) {
  .entry-wrapper {
    padding: 0 160px;
  }
}

.entry .header,
.comment .header {
  text-align: center;
}

.entry .entry-title {
  font-size: 1.2em;
  font-family: var(--title-font);
  font-weight: normal;
  padding: 0;
  margin: 0 0 0.5em;
}

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

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

.header .datetime {
  text-transform: uppercase;
}

.restrictions img,
.access-filter img {
  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 .contents {
  margin-top: 2em;
}

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

.userpic img {
  display: block;
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
}

@media (min-width: 1024px) {
  .userpic {
    position: absolute;
    width: 120px;
    height: 120px;
    text-align: right;
    top: 0;
    left: -140px;
  }

.userpic img {
    border: 10px solid var(--navigation-background-color);
    box-shadow: 0 1px 4px var(--entry-shadow-color);
    max-width: 100px;
    max-height: 100px;
  }
}

.entry .poster,
.full .poster {
  display: block;
  clear: right;
}

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

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

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

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

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

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

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

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

@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(--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 {
  margin-bottom: 0.5em;
}

.metadata-label,
.entry .tag-text {
  text-transform: uppercase;
}

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

.tag ul li {
  display: inline;
}

ul.entry-management-links {
  margin: 2em 0 0;
  padding: 0;
  clear: both;
  text-align: center;
}

ul.entry-management-links.text-links {
  text-transform: uppercase;
}

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

ul.entry-management-links li a img {
  display: none;
}

ul.entry-management-links li a:before {
  font-family: Material Icons;
  font-size: 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 {
  padding: 0;
  margin: 0;
  text-align: center;
  clear: both;
  text-transform: uppercase;
  text-align: center;
}

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

@media (min-width: 1024px) {
  ul.entry-management-links.icon-links {
    height: 280px;
    width: 100px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: -100px;
    margin: 0;
    padding: 0;
  }

ul.entry-management-links.icon-links li {
    position: absolute;
    left: -34px;
    transition: all 1s ease;
    padding: 0;
  }

ul.entry-management-links.icon-links li a {
    display: block;
    color: var(--navigation-link-color);
    background: var(--navigation-background-color);
    box-shadow: 0 0 2px var(--entry-shadow-color);
  }

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

ul.entry-management-links li a:before {
    display: block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
  }

.entry:hover ul.entry-management-links.icon-links li {
    left: 10px;
  }

ul.entry-management-links.icon-links li:last-child {
    bottom: 10px;
    transition: all 0.5s ease;
  }

ul.entry-management-links.icon-links li:nth-last-child(2) {
    bottom: 50px;
    transition: all 0.7s ease;
  }

ul.entry-management-links.icon-links li:nth-last-child(3) {
    bottom: 90px;
    transition: all 0.9s ease;
  }

ul.entry-management-links.icon-links li:nth-last-child(4) {
    bottom: 130px;
    transition: all 1.1s ease;
  }

ul.entry-management-links.icon-links li:nth-last-child(5) {
    bottom: 170px;
    transition: all 1.3s ease;
  }

ul.entry-management-links.icon-links li:nth-last-child(6) {
    bottom: 210px;
    transition: all 1.5s ease;
  }

ul.entry-management-links.icon-links li:nth-last-child(7) {
    bottom: 250px;
    transition: all 1.7s ease;
  }

ul.entry-management-links.text-links {
    margin-bottom: -2em;
  }

ul.entry-interaction-links {
    margin: 2em 0 0;
  }
}

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

.comment-pages {
  background: var(--navigation-background-color);
  text-align: center;
  padding: 1em;
  text-transform: uppercase;
  color: var(--navigation-text-color);
  box-shadow: 0 0 2px var(--entry-shadow-color);
}

.comment-pages a {
  color: var(--navigation-link-color);
  text-shadow: 0 2px 0 var(--navigation-link-shadow-color);
}

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

@media (min-width: 800px) {
  #comments {
    padding: 0 30px;
    margin: 0 auto;
    max-width: var(--entry-width);
  }
}

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

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

.comment {
  padding: 2em;
  margin: 30px 0;
  background: var(--entry-background-color);
  position: relative;
  box-shadow: 0 0 2px var(--entry-shadow-color);
}

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

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

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

.comment-date-text {
  display: none;
}

.comment .contents {
  margin-top: 2em;
}

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

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

ul.comment-management-links,
ul.comment-interaction-links {
  margin: 0;
  padding: 0;
  text-align: center;
}

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

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

.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 {
  text-transform: uppercase;
}

ul.comment-interaction-links li {
  text-transform: uppercase;
  display: inline;
  padding: 0 0.5em;
}

@media (min-width: 1024px) {
  ul.comment-management-links.icon-links {
    height: 170px;
    width: 100px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: -100px;
  }

ul.comment-management-links.icon-links li {
    position: absolute;
    left: -34px;
    transition: all 1s ease;
    padding: 0;
  }

ul.comment-management-links.icon-links li a {
    display: block;
    color: var(--navigation-link-color);
    box-shadow: 0 0 2px var(--entry-shadow-color);
    background: var(--navigation-background-color);
  }

ul.comment-management-links.icon-links li a:hover {
    color: var(--navigation-link-hover-color);
  }

ul.comment-management-links.icon-links li a:before {
    width: 32px;
    height: 32px;
    display: block;
    line-height: 32px;
    text-align: center;
  }

.comment:hover ul.comment-management-links.icon-links li {
    left: 10px;
  }

ul.comment-management-links.icon-links li:last-child {
    bottom: 10px;
    transition: all 0.5s ease;
  }

ul.comment-management-links.icon-links li:nth-last-child(2) {
    bottom: 50px;
    transition: all 0.7s ease;
  }

ul.comment-management-links.icon-links li:nth-last-child(3) {
    bottom: 90px;
    transition: all 0.9s ease;
  }

ul.comment-management-links.icon-links li:nth-last-child(4) {
    bottom: 130px;
    transition: all 1.1s ease;
  }
}

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

.bottomcomment {
  background: var(--navigation-background-color);
  text-align: center;
  padding: 0.5em;
  color: var(--navigation-text-color);
  box-shadow: 0 0 2px var(--entry-shadow-color);
}

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

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

.page-reply .comment-wrapper,
.page-reply #qrdiv {
  margin: 30px auto;
}

#postform {
  padding: 2em;
  background: var(--entry-background-color);
  box-shadow: 0 0 2px var(--entry-shadow-color);
}

@media (min-width: 800px) {
  .page-reply .comment-wrapper,
  .page-reply #qrdiv {
    max-width: var(--entry-width);
    padding: 0 30px;
  }
}

@media (min-width: 1024px) {
  .page-reply .comment-wrapper,
  .page-reply #qrdiv {
    max-width: var(--entry-width);
    padding: 0 160px;
  }
}

#qrform {
  margin-top: 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);
  font-family: var(--title-font);
  padding: 0.5em;
  color: var(--link-color);
  line-height: 1;
}

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

.month-wrapper,
.page-month .month,
.tags-container,
.icons-container {
  margin: 30px auto;
}

.month-wrapper div.month,
.page-month .month .inner,
.tags-container > .inner:first-child,
.icons-container > .inner:first-child {
  padding: 2em;
  background: var(--entry-background-color);
  box-shadow: 0 0 2px var(--entry-shadow-color);
}

@media (min-width: 800px) {
  .month-wrapper,
  .page-month .month,
  .tags-container,
  .icons-container {
    max-width: var(--entry-width);
    padding: 0 30px;
  }
}

@media (min-width: 1024px) {
  .month-wrapper,
  .page-month .month,
  .tags-container,
  .icons-container {
    padding: 0 160px;
  }
}

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

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

.month .contents,
.tags-container .contents,
.icons-container .contents {
  margin-top: 2em;
}

.month .footer,
#primary .manage-link {
  margin-top: 2em;
  text-align: center;
  text-transform: uppercase;
}

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

.day-date {
  display: none;
}

.month caption {
  display: none;
}

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

table.month th {
  text-transform: uppercase;
  font-weight: normal;
}

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

table.month td p {
  margin: 0;
}

.month dl {
  margin: 0;
}

.month dl dt {
  text-align: center;
  font-family: var(--title-font);
  font-weight: normal;
  border-left: 5px solid var(--entry-border-color);
  padding-left: 1em;
}

.month dd {
  margin: 1em 0 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;
}

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

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

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

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

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

.page-icons .bottompages {
  text-align: center;
  margin: 0;
  padding-top: 2em;
}

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

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

.icon {
  margin-top: 1em;
  padding-left: 1em;
  overflow: hidden;
  border-left: 5px solid var(--entry-border-color);
}

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

.default.label,
.keywords-label,
.comment-text,
.description-text {
  text-transform: uppercase;
}

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

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

.icon-pages p {
  margin: 0;
}

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

.navigation {
  text-align: center;
  margin: 30px 0 0;
  background: var(--navigation-background-color);
  padding: 1em;
  line-height: 1;
  color: var(--navigation-text-color);
  text-transform: uppercase;
  box-shadow: 0 2px 2px var(--entry-shadow-color);
  text-shadow: 0 2px 0 var(--navigation-link-shadow-color);
}

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

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

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

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

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

#footer {
  display: none;
}

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

div.ContextualPopup {
  background: var(--navigation-background-color);
  font-family: var(--main-font);
  border: 0;
  padding: 1em;
}

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

div.ContextualPopup .Relation {
  text-transform: uppercase;
  font-size: 1em;
  margin: 0.5em;
  color: var(--navigation-text-color);
  font-weight: normal;
}

div.ContextualPopup .Userpic {
  border: 0;
}

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

#lj_controlstrip {
  background: var(--navigation-background-color);
  color: var(--navigation-text-color);
  justify-content: center;
  padding: 0.75em 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(--navigation-link-color);
}

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

#lj_controlstrip_actionlinks {
  text-align: center;
}

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

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  font-size: var(--text-size) !important;
  font-family: var(--main-font) !important;
}

#lj_controlstrip input[type="submit"] {
  text-transform: uppercase;
  background: transparent;
  color: var(--navigation-link-color);
  font-size: var(--text-size);
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 0;
}

#lj_controlstrip .ljuser img {
  display: none;
}

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

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

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 on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". Copy and paste the following https://fonts.googleapis.com/css2?family=Fira+Sans&family=Atomic+Age&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab and enable "Custom text". Set "Custom text" to number 1, "Navigation" to number 2 and "Links list" to number 4. Uncheck the other modules.

Resources:

icon font by Google
sample image from Freepik

rosecarmine

Live preview | Install

Features:

comment pages
icon pages
fluid width

Credits:

mini icons by Yusuke Kamiyamane
background image from subtlepatterns.com

rosecarmine

Live preview
Features:

sidebar image (260x260px)
default icon, navigation links, links list, tags list, custom text
comment pages
icon pages

Code:

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

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

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

:root {
  --text-size: 16px;
  --line-height: 1.5;
  --main-font: Lora, serif;
  --title-font: Lora, serif;
  --background-color: #cfddeb;
  --text-color: #454750;
  --link-color: #305fc0;
  --link-hover-color: #6f99c4;
  --title-color: #1e3a77;
  --title-background-color: rgba(255, 255, 255, 0.6);
  --entry-width: 1000px;
  --entry-background-color: #fff;
  --entry-title-color: #305fc0;
  --entry-title-hover-color: #6f99c4;
  --blockquote-background-color: #6f99c4;
  --blockquote-text-color: #eaf0f7;
  --blockquote-link-color: #fff;
  --blockquote-link-hover-color: #eaf0f7;
  --textarea-background-color: #eaf0f7;
  --textarea-text-color: #1e3a77;
  --userpic-border-color: #1e3a77;
  --icon-color: #5096e2;
  --icon-hover-color: #305fc0;
  --commentcount-color: #fff;
  --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/124564.jpg");
}

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

/*--------------- 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 {
  background: var(--blockquote-background-color);
  color: var(--blockquote-text-color);
  padding: 1em;
  margin: 1em 0 50px;
  position: relative;
  border-radius: 10px;
}

blockquote:before {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 25px;
  padding: 10px;
  border-radius: 50%;
  background: var(--blockquote-background-color);
}

blockquote:after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 45px;
  padding: 5px;
  border-radius: 50%;
  background: var(--blockquote-background-color);
}

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

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

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

#canvas {
  margin: 50px auto;
  padding: 0 5px;
}

@media (min-width: 1024px) {
  #canvas {
    max-width: calc(var(--entry-width) + 390px);
    padding: 0 50px;
    position: relative;
  }
}

@media (min-width: 1280px) {
  #canvas {
    max-width: calc(var(--entry-width) + 510px);
  }
}

@media (min-width: 1024px) {
  #content {
    border-left: 340px solid transparent;
  }

#primary {
    width: 100%;
    margin-right: -100%;
    margin-left: 0;
    margin-top: -335px;
    float: left;
  }

#primary > .inner:first-child {
    padding-left: 50px;
  }

#secondary {
    float: left;
    width: 340px;
    margin-left: -340px;
    margin-bottom: 30px;
    clear: none;
  }
}

#content-footer {
  clear: both;
}

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

#header {
  padding-bottom: 55px;
  position: relative;
  text-align: center;
  width: 340px;
  margin: 20px auto;
}

@media (min-width: 1024px) {
  #header {
    margin: 0;
  }
}

#header > .inner:first-child {
  width: 260px;
  height: 260px;
  display: flex;
  background: var(--sidebar-image);
  background-size: cover;
  background-position: center center;
  border: 10px solid var(--entry-background-color);
  border-radius: 50%;
  margin-left: 60px;
}

#journaltitles-container {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s;
  background: var(--title-background-color);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#journaltitles-container:hover {
  opacity: 1;
}

h1#title {
  font-size: 1.2em;
  font-family: var(--title-font);
  font-style: italic;
  padding: 0 2em;
  margin: 0;
  line-height: 1.2;
}

h1#title a {
  color: var(--title-color);
}

h2#subtitle {
  font-size: 1em;
  font-family: var(--main-font);
  padding: 0;
  margin: 0.5em 2em 0;
  font-weight: normal;
  color: var(--title-color);
  line-height: 1.2;
}

h2#pagetitle {
  display: none;
}

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

.module-section-header {
  position: absolute;
  left: 0;
  bottom: 0;
}

.module-navlinks li {
  list-style: none;
  float: left;
  width: 40px;
  height: 40px;
  border: 3px double var(--entry-background-color);
  padding: 2px;
  line-height: 1;
  border-radius: 50%;
  transition: border-color 0.6s;
}

.module-navlinks li.list-item-recent {
  margin-top: -236px;
  margin-left: 12px;
}

.module-navlinks li.list-item-archive {
  margin-top: -177px;
  margin-left: 0;
}

.module-navlinks li.list-item-read {
  margin-top: -118px;
  margin-left: 6px;
}

.module-navlinks li.list-item-tags {
  margin-top: -65px;
  margin-left: 33px;
}

.module-navlinks li.list-item-memories {
  margin-top: -24px;
  margin-left: 76px;
}

.module-navlinks li.list-item-userinfo {
  margin-top: 0;
  margin-left: 5px;
}

.module-navlinks li:hover {
  border-color: var(--userpic-border-color);
}

.module-navlinks li a {
  display: block;
  font-size: 0;
  height: 24px;
  width: 24px;
  padding: 8px;
  background: var(--entry-background-color);
  border-radius: 50%;
  color: var(--icon-color);
}

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

.module-navlinks li a:before {
  font-family: Material Icons;
  font-size: 24px;
}

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

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

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

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

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

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

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

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

@media (min-width: 1024px) {
  #entries {
    margin-top: -5px;
  }
}

#entries .entry-wrapper .separator-before,
#comments .comment-wrapper .separator-before {
  margin-top: 5px;
}

@media (min-width: 1280px) {
  .entry,
  .full .comment {
    padding-right: 120px;
    position: relative;
  }
}

.entry > .inner:first-child,
.comment > .inner:first-child {
  background: var(--entry-background-color);
  border-radius: 10px;
}

.entry .header .inner {
  padding: 2em 2em 0;
}

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

.entry .entry-title,
.full .comment-title {
  padding: 0;
  margin: 0 0 0.5em;
  font-family: var(--title-font);
  font-style: italic;
  font-size: 1.2em;
  line-height: 1.2;
  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 a:hover {
  color: var(--entry-title-hover-color);
}

.entry .entry-title .ljuser img {
  display: none;
}

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

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

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

.header .datetime {
  text-transform: lowercase;
}

.header .datetime:before {
  content: "schedule";
  padding-right: 4px;
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--icon-color);
}

.access-filter,
.restrictions {
  float: right;
  color: var(--icon-color);
}

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

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

.security-private .access-filter:before {
  content: "do_not_disturb_alt";
  font-family: Material Icons;
  font-size: 22px;
  line-height: 22px;
  vertical-align: middle;
}

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

.restrictions-18 .restrictions:before {
  content: "18mp";
  font-family: Material Icons;
  font-size: 22px;
  line-height: 22px;
  vertical-align: middle;
}

.entry .contents {
  margin-top: 2em;
  padding: 0 2em;
}

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

.has-userpic .userpic {
  float: right;
  shape-outside: circle(50%) padding-box;
  padding-left: 1em;
}

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

@media (min-width: 800px) {
  .has-userpic .userpic img {
    max-width: 100px;
    max-height: 100px;
  }
}

@media (min-width: 1280px) {
  .entry .userpic,
  .comment .userpic {
    position: absolute;
    width: 110px;
    top: 0;
    right: 0;
    padding: 0;
  }

.has-userpic .userpic:before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 15px;
    padding: 15px;
    border-radius: 50%;
    background: var(--userpic-border-color);
  }

.has-userpic .userpic:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--userpic-border-color);
  }

.has-userpic .userpic img {
    border: 5px solid var(--userpic-border-color);
  }
}

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

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

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

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

.poster.empty {
  display: none;
}

.poster b {
  font-weight: normal;
}

.poster .ljuser img {
  display: none;
}

.entry-content {
  margin-top: 2em;
  padding-bottom: 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;
  margin-right: 5px;
  color: var(--icon-color);
}

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

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

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

.metadata {
  padding-bottom: 2em;
}

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

.metadata-label {
  display: none;
}

#metadata-music:before {
  content: "speaker";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  margin-right: 5px;
  color: var(--icon-color);
}

#metadata-mood:before {
  content: "sentiment_satisfied_alt";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  margin-right: 5px;
  color: var(--icon-color);
}

#metadata-location:before {
  content: "location_on";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  margin-right: 5px;
  color: var(--icon-color);
}

#metadata-xpost:before {
  content: "add_location";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  margin-right: 5px;
  color: var(--icon-color);
}

.tag ul li {
  list-style: inside;
  margin-right: 1em;
}

.entry div.tag {
  padding: 0 2em 2em;
}

.tag-text {
  display: none;
}

.tag ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.tag-nav-trigger {
  float: right;
}

ul.entry-management-links {
  padding: 0;
  margin: 0;
}

ul.entry-management-links.icon-links {
  float: left;
  line-height: 1;
}

ul.entry-management-links.icon-links li {
  float: left;
  list-style: none;
  margin-top: 5px;
  margin-right: 5px;
}

ul.entry-management-links li a img {
  display: none;
}

ul.entry-management-links.icon-links li a {
  display: block;
  color: var(--icon-color);
  border-radius: 50%;
  padding: 6px;
  width: 22px;
  height: 22px;
  background: var(--entry-background-color);
}

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

ul.entry-management-links.icon-links li a:before {
  font-family: Material Icons;
  font-size: 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: "email";
}

.icon-links .watch_comments a:before {
  content: "add_alert";
}

.icon-links .link_next a:before {
  content: "arrow_forward";
}

ul.entry-management-links.text-links {
  padding: 0 2em 2em;
}

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

ul.entry-interaction-links {
  margin: 0;
  padding: 0;
  float: left;
  line-height: 1;
}

ul.entry-interaction-links li {
  float: left;
  list-style: none;
  margin-top: 5px;
  margin-right: 5px;
}

li.entry-permalink a {
  font-size: 0;
  width: 22px;
  height: 22px;
  padding: 6px;
  display: block;
  background: var(--entry-background-color);
  border-radius: 50%;
  color: var(--icon-color);
}

li.entry-replylink a {
  font-size: 0;
  width: 22px;
  height: 22px;
  padding: 6px;
  display: block;
  background: var(--entry-background-color);
  border-radius: 50%;
  color: var(--icon-color);
}

li.entry-permalink a:hover {
  color: var(--icon-hover-color);
}

li.entry-replylink a:hover {
  color: var(--icon-hover-color);
}

li.entry-permalink a:before,
li.entry-replylink a:before {
  font-family: Material Icons;
  font-size: 22px;
}

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

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

li.entry-readlink a {
  font-size: 24px;
  font-family: var(--title-font);
  font-weight: bold;
  font-style: italic;
  padding: 5px;
  height: 24px;
  color: var(--commentcount-color);
  display: block;
}

.entry-wrapper .separator-after {
  clear: both;
}

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

.comment > .inner:first-child {
  min-width: 15em;
  padding: 2em;
}

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

.comment-pages {
  text-align: center;
  margin: 5px 0;
  background: var(--entry-background-color);
  border-radius: 10px;
  padding: 0.5em;
}

@media (min-width: 1280px) {
  .comment-pages,
  .partial {
    margin-right: 120px;
  }
}

.comment .header {
  float: left;
}

.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(--icon-color);
  margin-right: 5px;
}

.no-subject .comment .comment-title,
.partial .comment .comment-title {
  margin: 0;
}

.comment-date-text {
  display: none;
}

.full .comment .poster {
  clear: left;
  display: block;
  padding-top: 2em;
}

.poster-ip:before {
  content: "[ ";
}

.poster-ip:after {
  content: " ]";
}

.comment .contents {
  padding-bottom: 2em;
}

.comment-content {
  padding-top: 2em;
}

ul.comment-management-links {
  margin: 0;
  padding: 0;
}

ul.comment-management-links li {
  display: inline-block;
}

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 {
  color: var(--icon-color);
}

ul.comment-management-links.icon-links li a:hover {
  color: var(--icon-hover-color);
}

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 {
  margin: 0;
  padding: 0;
}

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

.multiform-checkbox {
  float: right;
}

.partial .comment .inner {
  padding: 1em;
}

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

.entry #qrformdiv {
  float: left;
}

#qrform {
  padding-top: 2em;
}

.entry #qrform {
  margin-top: 5px;
  background: var(--entry-background-color);
  padding: 2em;
  border-radius: 10px;
}

#qrdiv input,
#qrdiv select,
#qrdiv textarea {
  background: var(--textarea-background-color);
  border: 0;
  color: var(--textarea-text-color);
  font-size: var(--text-size);
  font-family: var(--main-font);
  border-radius: 10px;
}

#postform {
  padding: 2em;
  margin-top: 5px;
  background: var(--entry-background-color);
  box-shadow: 0 0 2px var(--shadow-color);
  border-radius: 10px;
}

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

.bottomcomment label,
.bottomcomment select,
.bottomcomment input {
  background: var(--entry-background-color);
  border: 0;
  font-size: var(--text-size);
  color: var(--text-color);
  font-family: var(--main-font);
  padding: 0.5em;
  margin: 5px 5px 0 0;
  border-radius: 10px;
  display: inline-block;
}

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

.month-wrapper,
#archive-month,
.tags-container,
.icons-container {
  padding: 2em;
  background: var(--entry-background-color);
  border-radius: 10px;
}

@media (min-width: 1280px) {
  .month-wrapper,
  #archive-month,
  .tags-container,
  .icons-container {
    margin-right: 120px;
  }
}

.month-wrapper {
  margin-bottom: 30px;
}

.month .contents,
.tags-container .contents,
.icons-container .contents {
  margin-top: 2em;
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-family: var(--title-font);
  font-size: 1.2em;
  font-style: italic;
  padding: 0;
  margin: 0;
  color: var(--entry-title-color);
}

.manage-link,
.month .footer {
  margin-top: 2em;
  text-align: center;
}

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

.month caption {
  display: none;
}

.month table {
  border: none;
  text-align: center;
  border-spacing: 1px;
}

table.month {
  margin: 15px auto 0;
}

table.month td {
  width: 3.25em;
  line-height: 3.25em;
  height: 3.25em;
  position: relative;
}

table.month th {
  font-family: var(--title-font);
  font-weight: normal;
  font-style: italic;
}

table.month td.day-has-entries {
  position: relative;
}

.day .label {
  display: block;
  background: var(--textarea-background-color);
  color: var(--textarea-text-color);
  border-radius: 50%;
  width: 3.25em;
  height: 3.25em;
}

.day.day-has-entries .label {
  background: var(--blockquote-background-color);
  color: var(--blockquote-text-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 dt {
  font-weight: bold;
  width: 3em;
  line-height: 3em;
  background: var(--textarea-background-color);
  border-radius: 50px;
  text-align: center;
  float: left;
  font-family: var(--title-font);
  font-style: italic;
  font-size: 1.2em;
}

.month dl dt a {
  color: var(--textarea-text-color);
}

.month dd {
  margin-left: 5em;
  padding-bottom: 2em;
  overflow: hidden;
}

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

.day-date {
  display: none;
}

#archive-year .navigation li {
  display: inline-block;
  height: 3em;
  width: 3em;
  background: var(--entry-background-color);
  line-height: 3em;
  border-radius: 50%;
}

#archive-month .navigation input,
#archive-month .navigation select {
  border: 0;
  background: var(--textarea-background-color);
  color: var(--textarea-text-color);
  font-size: var(--text-size);
  font-family: var(--main-font);
  padding: 0.5em;
  border-radius: 10px;
}

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

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

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

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

.icon {
  margin-top: 1em;
  display: flex;
  flex-wrap: wrap;
}

.icon-info {
  border-radius: 10px;
  padding: 1em;
  flex: 1;
  margin-right: 40px;
  background: var(--textarea-background-color);
  color: var(--textarea-text-color);
  position: relative;
}

.icon-info:before {
  content: "";
  position: absolute;
  right: -20px;
  top: 30px;
  padding: 7px;
  background: var(--textarea-background-color);
  border-radius: 50%;
}

.icon-info:after {
  content: "";
  position: absolute;
  right: -30px;
  top: 20px;
  padding: 5px;
  background: var(--textarea-background-color);
  border-radius: 50%;
}

.icon-image {
  order: 2;
}

.sorting-options ul {
  margin: 2em 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;
}

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

.icon-pages p {
  margin: 0;
}

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

.module-section-one {
  margin-top: 30px;
}

.module {
  position: relative;
  clear: right;
}

.module-typelist,
.module-customtext,
.module-tags_list,
.module-tags_cloud,
.module-tags_multilevel {
  background: var(--entry-background-color);
  border-radius: 10px;
  margin-bottom: 65px;
  padding: 2em;
}

.module-typelist:before,
.module-tags_list:before,
.module-tags_cloud:before,
.module-tags_multilevel:before {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 20px;
  padding: 15px;
  border-radius: 50%;
  background: var(--entry-background-color);
}

.module-typelist:after,
.module-tags_list:after,
.module-tags_cloud:after,
.module-tags_multilevel:after {
  content: "";
  position: absolute;
  bottom: -55px;
  left: 45px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--entry-background-color);
}

.module-customtext:before {
  content: "";
  position: absolute;
  bottom: -40px;
  right: 20px;
  padding: 15px;
  border-radius: 50%;
  background: var(--entry-background-color);
}

.module-customtext:after {
  content: "";
  position: absolute;
  bottom: -55px;
  right: 45px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--entry-background-color);
}

.module h2 {
  padding: 0;
  margin: 0 0 1em;
  font-family: var(--title-font);
  font-style: italic;
  font-size: 1.2em;
  color: var(--entry-title-color);
}

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

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

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

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

.module-content li {
  margin-top: 0.25em;
}

.module-userprofile {
  text-align: center;
  margin-bottom: 20px;
}

.module .userpic {
  display: inline-block;
  position: relative;
}

@media (min-width: 1024px) {
  .module-userprofile {
    float: right;
    margin: -73px 40px 20px 0;
  }
}

.module .userpic img {
  border-radius: 50%;
  background: var(--userpic-border-color);
  border: 5px solid var(--userpic-border-color);
}

.module .userpic:before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 15px;
  border-radius: 50px;
  background: var(--userpic-border-color);
}

.module .userpic:after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: -15px;
  width: 15px;
  height: 15px;
  border-radius: 50px;
  background: var(--userpic-border-color);
}

.module-userprofile .module-header,
.journal-name,
.journal-website-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;
}

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

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

@media (min-width: 1280px) {
  .navigation {
    margin-right: 120px;
  }
}

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

.navigation li {
  display: inline-block;
}

#entries .navigation {
  margin-top: 30px;
  line-height: 1;
}

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

@media (min-width: 1024px) {
  #entries .navigation {
    position: absolute;
    width: 340px;
    left: 0;
    bottom: 0;
    margin: 0 50px;
  }

#entries .navigation ul {
    width: 112px;
    margin: 0 auto;
    position: relative;
  }

#entries .navigation ul:before {
    content: "";
    position: absolute;
    left: 0;
    background: var(--entry-background-color);
    padding: 17px;
    z-index: -2;
    border-radius: 50%;
  }

#entries .navigation ul:after {
    content: "";
    position: absolute;
    right: 0;
    background: var(--entry-background-color);
    padding: 17px;
    z-index: -2;
    border-radius: 50%;
  }

li.page-back {
    float: left;
  }

li.page-forward {
    float: right;
  }
}

li.page-back a,
li.page-forward a {
  font-size: 0;
  display: block;
  background: var(--entry-background-color);
  width: 22px;
  height: 22px;
  padding: 6px;
  border-radius: 50%;
  color: var(--icon-color);
}

li.page-back a:hover,
li.page-forward a:hover {
  color: var(--icon-hover-color);
}

li.page-back a:before {
  content: "arrow_back";
  font-family: Material Icons;
  font-size: 22px;
}

li.page-forward a:before {
  content: "arrow_forward";
  font-family: Material Icons;
  font-size: 22px;
}

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

#footer {
  margin-top: 30px;
  line-height: 1;
}

@media (min-width: 1024px) {
  #footer {
    position: absolute;
    width: 34px;
    height: 34px;
    bottom: 0;
    left: 153px;
    margin: 0 50px;
  }
}

.page-top a {
  font-size: 0;
  color: var(--icon-color);
  display: block;
  width: 22px;
  height: 22px;
  padding: 6px;
  background: var(--entry-background-color);
  border-radius: 50%;
  margin: 0 auto;
}

.page-top a:hover {
  color: var(--icon-hover-color);
}

.page-top a:before {
  content: "arrow_upward";
  font-family: Material Icons;
  font-size: 22px;
}

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

div.ContextualPopup {
  color: var(--text-color);
  background: var(--entry-background-color);
  border: 0;
  padding: 0;
  font-family: inherit;
  border-radius: 10px;
  padding: 1.5em;
}

div.ContextualPopup .Relation {
  font-size: 1.2em;
  font-family: var(--title-font);
}

div.ContextualPopup .Userpic {
  border: 0;
  position: relative;
}

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

div.ContextualPopup .Userpic:before {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 10px;
  padding: 10px;
  border-radius: 50px;
  background: var(--blockquote-background-color);
}

div.ContextualPopup .Userpic:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;
  border-radius: 50px;
  background: var(--blockquote-background-color);
}

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

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

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

#lj_controlstrip {
  background: var(--entry-background-color);
  color: var(--text-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(--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: 0;
  background: var(--textarea-background-color) !important;
  font-size: var(--text-size) !important;
  color: var(--textarea-text-color) !important;
  font-family: var(--main-font) !important;
  border-radius: 10px;
}

#lj_controlstrip input[type="submit"] {
  border: 0;
  background: transparent !important;
  color: var(--text-color) !important;
  font-family: var(--title-font);
  font-style: italic;
  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: 3px solid var(--blockquote-background-color);
}

How to install:

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, click the on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". Copy and paste the following https://fonts.googleapis.com/css2?family=Lora&family=Lora:ital@1&display=swap into the "Custom stylesheet URL" field.
Click on the "Text" tab; in the "Entry" section change the text for "Text to read comments" and "Text to read comments from Your Reading page" to 1//#.
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout".

Credits:

icon font by Google
image from unsplash.com

rosecarmine

Live preview
Features:

comment pages
icon pages

Code:

/*-------------------------------------
 
- layout - present (strata) - https://myrtillenne.dreamwidth.org
- images - subtlepatterns.com
 
-------------------------------------*/

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

:root {
  --text-size: 16px;
  --text-color: #503d30;
  --line-height: 1.5;
  --background-color: #f9edd7;
  --background-image: url("https://rosecarmine.dreamwidth.org/file/117295.jpg");
  --ribbon-color: #d13167;
  --ribbon-image: url("https://rosecarmine.dreamwidth.org/file/117032.png");
  --ribbon-border-color: #e37099;
  --icon-frame: url("https://rosecarmine.dreamwidth.org/file/116763.png");
  --link-color: #d13167;
  --link-hover-color: #bb8359;
  --main-font: Lora, serif;
  --title-font: Eagle Lake, serif;
  --title-color: #503d30;
  --entry-background-color: #fcf5eb;
  --entry-border-color: #e7d9be;
  --entry-title-color: #bb8359;
  --entry-title-hover-color: #d13167;
  --navigation-color: #f9edd7;
  --navigation-hover-color: #fcf5eb;
}

/*--------------- 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-image: var(--background-image);
  background-color: var(--background-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 {
  border-top: 1px solid var(--entry-border-color);
  border-bottom: 1px solid var(--entry-border-color);
  padding: 1em;
  font-style: italic;
  margin: 1em 0;
}

blockquote:first-letter {
  font-size: 3.6em;
  float: left;
  padding: 0 0.1em 0 0;
  line-height: 0.5;
  font-family: var(--title-font);
}

#content {
  margin: 0 auto;
  max-width: 1000px;
}

@media (min-width: 1024px) {
  #content {
    border-left: 400px solid transparent;
    position: relative;
  }

#content:before {
    content: "";
    position: fixed;
    top: 0;
    height: 100%;
    width: 42px;
    background-image: var(--ribbon-image);
    background-color: var(--ribbon-color);
    border-left: 2px solid var(--ribbon-border-color);
    border-right: 2px solid var(--ribbon-border-color);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
  }

#primary {
    float: right;
    width: 100%;
    margin-bottom: -1em;
  }

#primary > .inner:first-child {
    padding-left: 45px;
  }
}

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

#header > .inner:first-child {
  margin: 0 auto;
  max-width: 1000px;
  padding: 40px 0;
  text-align: center;
}

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

h1#title a {
  color: inherit;
}

h2#subtitle {
  font-family: var(--title-font);
  padding: 0;
  margin: 0.5em 0 0;
  font-size: 1.2em;
  font-weight: normal;
  font-style: italic;
  color: var(--title-color);
}

h2#pagetitle {
  display: none;
}

@media (min-width: 1024px) {
  #header > .inner:first-child {
    border-left: 400px solid transparent;
    text-align: left;
  }

h1#title {
    padding: 0 40px 0 95px;
  }

h2#subtitle {
    padding: 0 40px 0 95px;
  }
}

.module-section-header {
  background-image: var(--ribbon-image);
  background-color: var(--ribbon-color);
  border-top: 2px solid var(--ribbon-border-color);
  border-bottom: 2px solid var(--ribbon-border-color);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
  min-height: 42px;
  text-align: center;
}

.module-navlinks ul {
  display: flex;
  align-items: center;
  min-height: 42px;
  flex-wrap: wrap;
  justify-content: center;
}

.module-navlinks li {
  font-family: var(--title-font);
  padding: 0.25em 0.5em;
  display: inline-block;
}

.module-navlinks li a {
  color: var(--navigation-color);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

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

@media (min-width: 1024px) {
  .module-section-header .inner {
    border-left: 400px solid transparent;
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .module-navlinks{
    padding-left: 104px;
  }

.module-navlinks ul {
    justify-content: flex-start;
  }

.module-navlinks li:first-child {
    min-width: 400px;
    text-align: right;
    margin-left: -460px;
    margin-right: 60px;
    padding-right: 104px;
    box-sizing: border-box;
  }

.module-navlinks li {
    padding: 0.25em 1em 0.25em 0;
    text-align: center;
  }
}

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

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

@media (min-width: 640px) {
  .entry,
  .full .comment {
    margin: 40px 40px 0;
  }
}

.entry .entry-title {
  font-family: var(--title-font);
  font-size: 1.2em;
  border-bottom: 1px solid var(--entry-border-color);
  font-weight: normal;
  font-style: italic;
  color: var(--entry-title-color);
  margin: 0 0 1em;
  padding: 0 0 0.5em;
}

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

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

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

.entry .entry-title .ljuser img {
  display: none;
}

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

.entry .datetime {
  float: left;
}

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

.restrictions,
.access-filter {
  float: left;
  margin-right: 0.25em;
}

.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+)";
}

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

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

@media (min-width: 800px) {
  .has-userpic .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:nth-child(1):before {
  content: "Written by ";
}

.entry .poster .ljuser:nth-child(1):after {
  content:"";
  padding-right: 0.25em;
}

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

.entry .poster span b,
.full .comment .poster span b {
  font-weight: normal;
}

.poster .ljuser img {
  display: none;
}

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

.metadata {
  font-style: italic;
}

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

.entry div.tag {
  font-style: italic;
}

.metadata li:first-letter,
.entry div.tag:first-letter {
  font-family: var(--title-font);
}

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

.tag ul li {
  display: inline;
}

ul.entry-management-links {
  margin: 2em 0 0 0;
  padding: 0;
  font-family: var(--title-font);
}

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

ul.entry-interaction-links {
  border-top: 1px solid var(--entry-border-color);
  margin: 0.5em 0 0 0;
  padding: 0.5em 0 0 0;
  text-align: right;
  font-family: var(--title-font);
}

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

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

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

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

.comment-pages {
  font-family: var(--title-font);
  margin: 0 20px;
  color: var(--title-color);
}

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

.comment-pages b {
  font-weight: normal;
}

.comment-pages:first-child {
  margin-top: 20px;
}

@media (min-width: 640px) {
  .comment-pages {
    margin: 0 40px;
  }

.comment-pages:first-child {
    margin-top: 40px;
  }
}

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

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

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

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

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

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

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

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

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

.comment-content {
  margin: 2em 0;
}

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

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

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

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

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

ul.comment-interaction-links {
  margin: 0.5em 0 0;
  padding: 0.5em 0 0;
  border-top: 1px solid var(--entry-border-color);
  font-family: var(--title-font);
  text-align: right;
}

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

.multiform-checkbox {
  display: inline;
  font-family: var(--title-font);
  color: var(--entry-title-color);
  padding-right: 0.25em;
}

.partial .comment {
  margin: 20px 0;
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
  padding: 1em;
}

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

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

#qrform {
  padding-top: 2em;
}

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

@media (min-width: 640px) {
  #postform {
    margin: 40px 40px 0;
  }
}

#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;
  font-size: var(--text-size);
  padding: 0.5em;
  color: var(--entry-title-color);
  font-family: var(--title-font);
  line-height: 1;
}

.bottomcomment {
  margin: 0 20px;
  color: var(--title-color);
}

.bottomcomment select,
.bottomcomment input {
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
  padding: 0.25em;
  font-family: var(--title-font);
  font-size: 1em;
  color: var(--entry-title-color);
}

.bottomcomment label:before {
  content: "";
  display: block;
  margin-top: 20px;
}

@media (min-width: 640px) {
  .bottomcomment {
    margin: 0 40px;
    color: var(--title-color);
  }

.bottomcomment label:before {
    margin-top: 40px;
  }
}

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

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

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

.month .header,
.tags-container .header,
.icons-container .header {
  border-bottom: 1px solid var(--entry-border-color);
  margin-bottom: 2em;
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-family: var(--title-font);
  font-size: 1.2em;
  font-weight: normal;
  color: var(--entry-title-color);
  margin: 0;
  padding: 0 0 0.5em;
  font-style: italic;
}

.month .footer,
#primary .manage-link {
  border-top: 1px solid var(--entry-border-color);
  padding-top: 0.5em;
  font-family: var(--title-font);
  text-align: right;
}

.month .footer a,
.tags-container .footer a,
.icons-container .footer a {
  color: var(--entry-title-color);
}

.month .footer a:hover,
.tags-container .footer a:hover,
.icons-container .footer a:hover {
  color: var(--entry-title-hover-color);
}

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

.month caption {
  display: none;
}

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

table.month {
  margin: 0 auto;
}

table.month td {
  font-family: var(--title-font);
  border-top: 1px solid var(--entry-border-color);
  width: 3.25em;
  height: 3.25em;
}

table.month th {
  padding: 0.5em;
  font-family: var(--title-font);
}

table.month td p {
  margin: 0;
  float: right;
}

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

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

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

.month dl dt {
  font-family: var(--title-font);
  border-bottom: 1px solid var(--entry-border-color);
  padding-bottom: 0.5em;
  color: var(--entry-title-color);
  margin-top: 2em;
  font-style: italic;
}

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

.month dl dt:first-child {
  margin-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 {
  margin: 0;
}

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

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

.month dd br {
  display: block;
}

.day-date {
  display: none;
}

#archive-month select,
#archive-month input {
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
  padding: 0.25em;
  font-family: var(--title-font);
  font-size: 1em;
  color: var(--entry-title-color);
}

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

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

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

.tags-container .manage-link {
  margin-top: 2em;
}

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

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

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

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

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

.icon-info {
  margin: 1em 0;
}

.icon-image img {
  display: block;
}

.sorting-options ul {
  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;
}

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

.icons-container .manage-link {
  margin-top: 1em;
}

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

@media (min-width: 1024px) {
  #secondary {
    float: left;
    width: 400px;
    margin-left: -400px;
  }
}

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

@media (min-width: 640px) {
  .module-section-one .module {
    margin: 40px;
  }
}

.module .module-header {
  font-family: var(--title-font);
  font-size: 1em;
  border-bottom: 1px solid var(--entry-border-color);
  text-align: right;
  color: var(--entry-title-color);
  font-weight: normal;
  padding: 0 0 0.5em;
  margin: 0;
  font-style: italic;
}

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

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

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

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

.module-section-one .module-content li {
  margin: 0.25em 0;
}

.module-section-one .module-userprofile {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: center;
}

.module-section-one .module-userprofile .module-content {
  padding: 0;
}

.module .userpic {
  width: 100px;
  height: 100px;
  padding: 17px;
  background: var(--icon-frame) no-repeat;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.module .userpic img {
  border-radius: 50%;
  display: block;
}

@media (min-width: 1024px) {
  .module-section-one .module-userprofile {
    margin: 0;
  }

.module .userpic {
    position: absolute;
    top: -90px;
    left: -44px;
  }
}

.module-calendar .module-content {
  text-align: center;
  font-family: var(--title-font);
  font-weight: normal;
}

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

.module-calendar td,
.module-calendar th {
  width: 2em;
  height: 2em;
  line-height: 1;
}

.entry-day {
  border-radius: 50%;
  border: 1px solid var(--entry-border-color);
  text-align: center;
}

.module-syndicate .module-content,
.module-search .module-content,
.module-cuttagcontrols .module-content {
  text-align: center;
}

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

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

.search-form .comment_search_checkbox_item {
  display: inline;
}

.search-box-item input {
  border: 1px solid var(--entry-border-color);
  font-size: var(--text-size);
  font-family: var(--main-font);
}

.search-button-item input {
  background: transparent;
  border: 0;
  font-size: var(--text-size);
  color: var(--entry-title-color);
  font-family: var(--title-font);
  line-height: 1;
}

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

.module-pagesummary .ljuser img {
  display: none;
}

.module-pagesummary .module-content {
  word-wrap: break-word;
}

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

.module-customtext .module-content:first-letter {
  font-family: var(--title-font);
  font-style:italic;
}

.module-userprofile .module-header,
.journal-name,
.journal-website-name,
ul.userlite-interaction-links,
.module-navlinks h2,
.module-credit,
.module-time,
.module-powered,
.module .manage-link {
  display: none !important;
}

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

.navigation {
  font-family: var(--title-font);
  line-height: 1;
  color: var(--title-color);
}

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

@media (min-width: 640px) {
  .navigation ul {
    margin: 40px 40px 0;
    padding: 0;
  }
}

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

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

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

#footer {
  max-width: 1000px;
  margin: 20px;
  line-height: 1;
}

@media (min-width: 640px) {
  #footer {
    margin: 40px;
  }
}

#footer .inner {
  font-family: var(--title-font);
}

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

@media (min-width: 1024px) {
  #footer {
    clear: left;
    padding-left: 400px;
    margin: 0 auto 40px;
  }

#footer .inner {
    width: 400px;
    margin-left: -400px;
    text-align: right;
  }

.page-top {
    padding-right: 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: 1.5em;
  width: 200px;
  border: 1px solid var(--entry-border-color);
}

div.ContextualPopup .Relation {
  font-family: var(--title-font);
  border-bottom: 1px solid var(--entry-border-color);
  padding: 1em 0;
  font-size: 1em;
  font-weight: normal;
  text-align: center;
}

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

div.ContextualPopup .Userpic img {
  border-radius: 50%;
  margin-bottom: 0.25em;
  border: 3px solid var(--entry-border-color);
}

.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-image: var(--ribbon-image);
  background-color: var(--ribbon-color);
  background-repeat: repeat;
  justify-content: center;
  color: var(--navigation-color);
  padding: 0.25em 0;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
  width: auto;
  border-top: 2px solid var(--ribbon-border-color);
  border-bottom: 2px solid var(--ribbon-border-color);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  z-index: 9;
}

#lj_controlstrip > div {
  font-family: var(--main-font);
  font-size: 14px;
  flex-grow: 0;
}

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

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

#lj_controlstrip_actionlinks {
  text-align: center;
}

#lj_controlstrip_statustext {
  font-weight: normal;
  font-size: 14px;
  color: var(--navigation-color);
}

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 0;
  font-size: 1em !important;
  font-family: var(--main-font) !important;
}

#lj_controlstrip input[type="submit"] {
  border: 0;
  background: transparent;
  font-size: 1em;
  font-style: italic;
  color: var(--navigation-color);
  font-family: var(--title-font) !important;
  padding: 0.25em;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

#lj_controlstrip_userpic a img {
  border-radius: 50%;
  border: 2px solid var(--ribbon-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 "Strata" and apply any theme.
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)". Copy and paste the following https://fonts.googleapis.com/css2?family=Lora&family=Eagle+Lake&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".

Resources: images from subtlepatterns.com

rosecarmine

Live preview
Features:

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

Code:

/*-------------------------------------
 
- layout - velvet journal (basic boxes) - https://myrtillenne.dreamwidth.org
- images - subtlepatterns.com, unsplash.com
 
-------------------------------------*/

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

:root {
  --text-size: 16px;
  --text-color: #5a1f31;
  --line-height: 1.5;
  --header-image: url("https://rosecarmine.dreamwidth.org/file/118455.jpg");
  --header-image-width: 800px;
  --header-image-height: 250px;
  --background-color: #be657b;
  --background-image: url("https://rosecarmine.dreamwidth.org/file/119493.jpg");
  --link-color: #c81e59;
  --link-hover-color: #7b2741;
  --main-font: Lora, serif;
  --title-font: Lora, serif;
  --title-color: #5a1f31;
  --title-shadow: #fff;
  --entry-background-color: #7b2741;
  --entry-background-image: url("https://rosecarmine.dreamwidth.org/file/119791.jpg");
  --entry-content-background-color: #fbeadd;
  --entry-content-border-color: #be4166;
  --username-color: #e970a9;
  --navigation-color: #e078ae;
  --navigation-background-color: #842b47;
  --navigation-border-color: #be4166;
}

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

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

img {
  border: none;
}

hr {
  display: none;
}

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: 1px dashed var(--entry-content-border-color);
  padding: 1em;
  font-style: italic;
  margin: 1em 0;
  border-radius: 4px;
  font-style: italic;
}

#canvas {
  margin: 0 auto;
}

@media (min-width: 800px) {
  #canvas {
    margin: 0 auto;
    max-width: calc(var(--header-image-width) + 182px);
  }
}

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

#header {
  background-image: var(--entry-background-image);
  background-color: var(--entry-background-color);
  background-position: center center;
  margin: 30px 0;
  padding: 10px;
  border-left: 2px solid rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  box-shadow: 0 0 2px #000;
}

.module-navlinks {
  text-align: center;
}

@media (min-width: 800px) {
  #header > .inner:first-child {
    display: flex;
    align-items: center;
  }

.module-section-header {
    width: 160px;
  }

.module-navlinks {
    width: 150px;
  }

.module-navlinks ul {
    display: flex;
    flex-direction: column;
  }
}

.module-navlinks li {
  margin: 3px 0;
  text-transform: uppercase;
  border: 1px dashed var(--navigation-border-color);
  background: var(--navigation-background-color);
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 2px #000;
  line-height: 1;
  padding: 0.25em;
}

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

#journaltitles-container {
  background-color: var(--entry-content-background-color);
  box-shadow: 0 0 2px #000;
  padding: 1em;
  margin-top: 10px;
  font-style: italic;
}

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

h1#title a {
  color: inherit;
}

h2#subtitle {
  font-size: 1.2em;
  padding: 0;
  margin: 0;
  font-style: italic;
  font-weight: normal;
  font-family: var(--title-font);
}

@media (min-width: 800px) {
  #journaltitles-container {
    background-image: var(--header-image);
    height: var(--header-image-height);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    margin: 0;
  }

h1#title {
    color: var(--title-color);
    text-shadow: -1px 1px 5px var(--title-shadow);
  }

h1#title a {
    color: inherit;
  }

h2#subtitle {
    text-shadow: -3px 1px 3px var(--title-shadow);
    color: var(--title-color);
  }
}

h2#pagetitle {
  display: none;
}

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

.entry,
.full .comment {
  background-color: var(--entry-background-color);
  background-image: var(--entry-background-image);
  padding: 10px;
  border-left: 2px solid rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  margin: 30px 0;
  box-shadow: 0 0 2px #000;
}

.entry > .inner:first-child,
.full .comment > .inner:first-child {
  background: var(--entry-content-background-color);
  box-shadow: 0 0 2px #000;
}

.entry .header {
  text-align: right;
}

@media (min-width: 800px) {
  .entry,
  .full .comment {
    padding-left: 170px;
  }

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

.entry .header .inner {
  padding: 2em 2em 0;
}

.entry .entry-title {
  font-family: var(--title-font);
  font-size: 1.2em;
  line-height: 1.2;
  text-align: center;
  border-bottom: 1px dashed var(--entry-content-border-color);
  margin: 0 0 0.5em;
  padding: 0 0 0.5em;
  font-style: italic;
  color: var(--link-color);
}

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

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

.entry .entry-title .ljuser img {
  display: none;
}

.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 .contents,
.comment .contents {
  margin: 2em 2em 0;
}

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

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

.entry .userpic img,
.comment .userpic img {
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
}

.entry .userpic img,
.comment .userpic img {
  padding: 5px;
  border: 1px dashed var(--navigation-border-color);
  background: var(--navigation-background-color);
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

@media (min-width: 800px) {
  .entry .userpic,
  .comment .userpic {
    clear: left;
    width: 150px;
    margin: 20px 0 0 -160px;
    text-align: center;
  }

.entry .userpic img,
  .comment .userpic img {
    max-width: 100px;
    max-height: 100px;
    padding: 10px;
  }
}

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

.entry .poster:before {
  content: "";
  font-size: var(--text-size);
  display: block;
  margin-top: 0.5em;
}

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

.poster .ljuser img {
  display: none;
}

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

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

@media (min-width: 800px) {
  .entry .poster,
  .full .comment .poster {
    float: left;
    clear: left;
    width: 150px;
    margin-left: -160px;
    text-align: center;
  }

.entry .poster .ljuser {
    display: block;
    margin-right: 0;
  }

.entry .poster a,
  .full .comment .poster a,
  .poster .anonymous {
    color: var(--username-color);
  }
}

.entry-content {
  margin: 2em 0;
}

@media (min-width: 800px) {
  .entry-content {
    padding: 2em;
    margin: 0;
    clear: right;
    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;
}

.metadata {
  font-style: italic;
}

@media (min-width: 800px) {
  .metadata {
    margin: 0 2em;
  }
}

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

.entry .footer,
.comment .footer {
  padding-bottom: 20px;
}

@media (min-width: 800px) {
  .entry .footer,
  .comment .footer {
    margin-left: -170px;
    padding-left: 170px;
    clear: both;
    width: 100%;
  }
}

.entry .tag {
  margin: 0 2em;
}

.entry div.tag {
  font-style: italic;
}

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

.tag ul li {
  display: inline;
}

ul.entry-management-links,
ul.entry-interaction-links,
ul.comment-management-links,
ul.comment-interaction-links {
  margin: 5px 20px 0 20px;
  padding: 0;
  clear: both;
}

ul.entry-management-links {
  margin-top: 2em;
}

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

ul.entry-management-links li,
ul.entry-interaction-links li,
ul.comment-management-links li,
ul.comment-interaction-links li {
  display: inline-block;
  padding: 0.25em 0.5em;
  text-align: center;
  border: 1px dashed var(--entry-content-border-color);
  text-transform: uppercase;
  border-radius: 3px;
  line-height: 1;
}

@media (min-width: 800px) {
  ul.entry-management-links li:first-child,
  ul.entry-interaction-links li:first-child,
  ul.comment-management-links li:first-child,
  ul.comment-interaction-links li:first-child {
    border: 1px dashed var(--navigation-border-color);
    background: var(--navigation-background-color);
    width: 150px;
    margin: 0 25px 0 -180px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 2px #000;
    box-sizing: border-box;
  }

ul.entry-management-links li:first-child a,
  ul.entry-interaction-links li:first-child a,
  ul.comment-management-links li:first-child a,
  ul.comment-interaction-links li:first-child a {
    color: var(--navigation-color);
  }
}

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

.comment-pages {
  display: inline-block;
  background: var(--entry-content-background-color);
  border-top: 2px dotted var(--background-color);
  border-bottom: 2px dotted var(--background-color);
  padding: 1em;
  margin-left: 50px;
  text-align: center;
}

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

.comment {
  min-width: 15em;
  clear: both;
}

.comment .comment-title {
  margin: 0;
  font-style: italic;
}

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

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

.thread-depth {
  display: inline-block;
  padding: 0.25em 0.5em;
  border: 1px dashed var(--entry-content-border-color);
  text-transform: uppercase;
  border-radius: 3px;
  line-height: 1;
}

.full .thread-depth {
  float: left;
}

.comment-content {
  margin: 2em 0;
}

.full .poster {
  margin: 0.5em 0;
  font-style: italic;
  font-weight: bold;
}

.poster-ip {
  display: block;
}

@media (min-width: 800px) {
  .comment-content {
    padding: 2em;
    margin: 0;
    clear: right;
  }

.poster-ip {
    padding: 0.5em 2em 0;
    text-align: right;
    clear: right;
  }
}

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

.multiform-checkbox {
  padding: 0 2em;
}

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

.partial .comment {
  background: var(--entry-content-background-color);
  border-top: 2px dotted var(--background-color);
  border-bottom: 2px dotted var(--background-color);
  padding: 1em;
  margin: 10px 0;
}

.bottomcomment {
  text-align: center;
}

.bottomcomment label,
.bottomcomment select,
.bottomcomment input {
  background: var(--entry-content-background-color);
  border: 0;
  border-top: 2px dotted var(--background-color);
  border-bottom: 2px dotted var(--background-color);
  font-size: var(--text-size);
  color: var(--text-color);
  font-family: var(--main-font);
  padding: 0.25em 0.5em;
  margin-right: 5px;
}

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

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

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

#qrform {
  padding: 2em;
}

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

#qrdiv input[type="button"],
#qrdiv input[type="submit"] {
  background: transparent;
  border: 1px dashed var(--entry-content-border-color);
  font-size: 1em;
  padding: 0.25em 0.5em;
  color: var(--text-color);
  line-height: 1;
  font-family: var(--main-font);
  text-transform: uppercase;
}

#postform {
  background: var(--entry-content-background-color);
  border-top: 2px dotted var(--background-color);
  border-bottom: 2px dotted var(--background-color);
  padding: 1em;
}

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

.month-wrapper,
.page-month .month,
.tags-container,
.icons-container {
  background-color: var(--entry-background-color);
  background-image: var(--entry-background-image);
  padding: 10px;
  border-left: 2px solid rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  margin: 30px 0;
  box-shadow: 0 0 2px #000;
}

.month > .inner:first-child,
.tags-container > .inner:first-child,
.icons-container > .inner:first-child {
  background: var(--entry-content-background-color);
  box-shadow: 0 0 2px #000;
}

.month .header,
.tags-container .header,
.icons-container .header {
  text-align: center;
  padding: 2em 2em 0;
}

@media (min-width: 800px) {
  .month-wrapper,
  .page-month .month,
  .tags-container,
  .icons-container {
    padding-left: 170px;
  }

.month .header,
  .tags-container .header,
  .icons-container .header {
    float: left;
    margin-left: -160px;
    width: 150px;
    color: var(--username-color);
    padding: 20px 0 0;
  }
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-size: 1.2em;
  margin: 0;
  padding: 0;
  font-style: italic;
}

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

#primary .manage-link,
.month-wrapper .footer {
  padding: 0 20px 20px;
  line-height: 1;
}

#primary .manage-link a,
.month-wrapper .footer a {
  padding: 0.25em 0.5em;
  border: 1px dashed var(--entry-content-border-color);
  text-transform: uppercase;
  border-radius: 3px;
  display: inline-block;
  color: var(--text-color);
}

@media (min-width: 800px) {
  #primary .manage-link,
  .month-wrapper .footer {
    width: 150px;
    margin-left: -160px;
    margin-top: -2em;
    padding: 0 0 20px;
  }

#primary .manage-link a,
  .month-wrapper .footer a {
    display: block;
    border: 1px dashed var(--navigation-border-color);
    background: var(--navigation-background-color);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 2px #000;
    text-align: center;
    text-transform: uppercase;
    border-radius: 3px;
    color: var(--navigation-color);
  }
}

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

.month caption {
  display: none;
}

.month table {
  width: 100%;
}

table.month {
  margin: 0 auto;
  border-spacing: 3px;
  text-align: center;
}

table.month td {
  width: 3.25em;
  height: 3.25em;
}

table.month td.day {
  height: 3.25em;
  border: 1px dashed var(--entry-content-border-color);
  border-radius: 3px;
}

table.month td p {
  margin: 0;
}

.month dl dt {
  font-weight: bold;
  text-align: center;
  padding-top: 2em;
  font-style: italic;
  font-size: 1.2em;
}

@media (min-width: 800px) {
  .month dl dt {
    float: left;
    margin-left: -160px;
    width: 150px;
    padding-top: 20px;
  }

.month dt,
  .month dt a {
    color: var(--username-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 dl {
  margin: 0;
}

.month dd {
  margin: 0 2em;
  padding: 2em 0;
  border-bottom: 1px dashed var(--entry-content-border-color);
}

.month dd:last-child {
  border: 0;
}

.month dl br {
  display: block;
}

.day-date {
  display: none;
}

#archive-month select,
#archive-month input {
  background: var(--entry-content-background-color);
  border: 1px dashed var(--entry-content-border-color);
  font-size: 1em;
  padding: 0.25em 0.5em;
  color: var(--text-color);
  line-height: 1;
  font-family: var(--main-font);
  text-transform: uppercase;
  border-radius: 3px;
}

/*------------ 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-icons .toppages {
  display: none;
}

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

.icon {
  border: 1px dashed var(--entry-content-border-color);
  padding: 1em;
  margin-top: 1em;
  border-radius: 3px;
  display: flex;
}

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

.icon-image img {
  display: block;
}

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

.icon-pages p {
  margin: 0;
}

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

.module-section-one {
  background-color: var(--entry-background-color);
  background-image: var(--entry-background-image);
  padding: 10px;
  border-left: 2px solid rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  margin: 30px 0;
  box-shadow: 0 0 2px #000;
  clear: both;
}

.module-section-one > .inner:first-child {
  background-color: var(--entry-content-background-color);
  box-shadow: 0 0 2px #000;
  padding: 10px 8px;
}

.module-section-one .module {
  margin-top: 0.5em;
}

@media (min-width: 800px) {
  .module-section-one {
    padding-left: 170px;
  }

.module-section-one > .inner:first-child {
    display: flex;
    flex-wrap: wrap;
  }

.module-section-one .module {
    margin: 0 2px;
    flex: 1;
  }
}

.module h2 {
  margin: 0 0 0.5em;
  padding: 0;
  font-size: 1em;
  text-align: center;
  font-style: italic;
  color: var(--link-color);
}

.module-section-one .module-content {
  padding: 1em;
  border: 1px dashed var(--entry-content-border-color);
  border-radius: 3px;
}

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

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

.module-section-one .module-userprofile {
  text-align: center;
  font-weight: bold;
  margin: 0;
  font-style: italic;
}

.module-userprofile .module-content {
  margin: 0;
  height: auto;
  overflow: visible;
  border: none;
  padding: 0;
}

.module .userpic img {
  padding: 10px;
  border: 1px dashed var(--navigation-border-color);
  background: var(--navigation-background-color);
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.journal-name {
  padding-top: 0.5em;
}

@media (min-width: 800px) {
  .module-section-one .module-content {
    height: 180px;
    overflow: auto;
  }

.module-section-one .module-userprofile {
    margin-left: -170px;
    margin-right: 20px;
    margin-top: 10px;
    min-width: 150px;
    flex: 0;
  }

.module-userprofile .module-content {
    margin: 0;
    height: auto;
    overflow: visible;
    border: none;
    padding: 0;
  }

.journal-name {
    color: var(--username-color);
  }

.journal-website-name a {
    color: var(--username-color);
  }
}

ul.userlite-interaction-links {
  display: none;
}

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

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

.module-content::-webkit-scrollbar-track {
  background: transparent;
}

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

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

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

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

.navigation {
  text-align: center;
  overflow: hidden;
  margin-top: -30px;
}

.navigation ul {
  float: left;
  background: var(--entry-content-background-color);
  border-bottom: 2px dotted var(--background-color);
  padding: 0.5em 2em;
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 0 0 50px 0;
  margin: 0 50px;
}

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

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

#footer {
  display: inline-block;
  background: var(--entry-content-background-color);
  border-top: 2px dotted var(--background-color);
  border-bottom: 2px dotted var(--background-color);
  padding: 0.5em 2em;
  margin: 0 0 30px 50px;
}

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

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

div.ContextualPopup .Relation {
  font-weight: normal;
  font-size: 1em;
  text-align: center;
  margin-top: 1em;
  border-bottom: 1px dashed var(--entry-content-border-color);
  padding-bottom: 1em;
  font-style: italic;
}

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

div.ContextualPopup .Userpic img {
  padding: 5px;
  border: 1px dashed var(--navigation-border-color);
  background: var(--navigation-background-color);
  border-radius: 3px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

.ContextualPopup .Actions ul {
  list-style: none;
  margin: 0;
  padding: 0;
  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-color: var(--entry-background-color);
  background-image: var(--entry-background-image);
  background-repeat: repeat;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 2px #000;
  justify-content: center;
  padding: 0.75em 0;
  color: var(--username-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(--username-color);
}

#lj_controlstrip_actionlinks {
  text-align: center;
}

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

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 0;
  background: var(--entry-content-background-color) !important;
  font-size: var(--text-size) !important;
  color: var(--text-color) !important;
  font-family: var(--main-font) !important;
  box-shadow: 0 0 2px #000;
}

#lj_controlstrip input[type="submit"] {
  font-size: 1em;
  border: 1px dashed var(--navigation-border-color);
  background: var(--navigation-background-color) !important;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 2px #000;
  text-transform: uppercase;
  color: var(--navigation-color) !important;
  padding: 0.25em;
}

#lj_controlstrip .ljuser b {
  font-style: italic;
}

#lj_controlstrip .ljuser img {
  display: none;
}

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

#lj_controlstrip_userpic a img {
  border: 1px dashed var(--navigation-border-color);
  background: var(--navigation-background-color);
  padding: 4px;
  border-radius: 3px;
}

How to install:

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, click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". Copy and paste the following https://fonts.googleapis.com/css2?family=Lora&family=Lora:ital@1&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".
Click on the "Text" tab; in the "Entry" section change the "Text to link to the previous entry" to "Previous" and the "Text to link to the next entry" to "Next".

Resources: images from subtlepatterns.com, unsplash.com

Page generated 21 June 2025 06:47 pm

Journal layouts

Recent Entries

Custom text

June 2023

Links

Syndicate

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags

Slide

Gold leaf

Circle

Present

Velvet journal