myrtillenne

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

Code:

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

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

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

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

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

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

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

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

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

img {
  border: none;
}

hr {
  display: none;
}

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

html body {
  margin: 0;
}

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

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

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

q {
  font-style: italic;
}

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

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

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

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

#canvas {
  margin: 20px 0;
}

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

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

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

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

#primary,
#secondary {
  clear:both;
}

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

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

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

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

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

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

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

h2#pagetitle {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cuttag-action img {
  display: none;
}

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

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

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

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

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

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

.tag {
  text-align: left;
}

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

.tag ul li {
  display: inline;
}

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

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

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

.footer {
  text-align: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#qrform {
  margin-top: 1.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.month caption {
  display: none;
}

.day-date {
  display: none;
}

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

table.month {
  margin: 0 auto;
}

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

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

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

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

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

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

.month dl {
  margin: 1.5em 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-image img {
  display: block;
}

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

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

.icon-pages p {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#lj_controlstrip_actionlinks {
  text-align: center;
}

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

#lj_controlstrip_search {
  text-align: right;
}

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

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

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

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

#lj_controlstrip .ljuser img {
  display: none;
}

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

How to install:

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

Resources:

icon font by Google
background image from subtlepatterns.com

Journal layouts

Red ribbon (Reply)

Profile

Custom text

Links

Red ribbon