myrtillenne | Arrow

full screen header image (set to "cover")
navigation links, default icon, links list, custom text
sliding control strip (from left)
comment pages
icon pages

Code:

/*-------------------------------------
 
- layout - arrow (tabula rasa) - https://myrtillenne.dreamwidth.org
- header image - picjumbo.com

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

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

:root {
  --text-size: 16px;
  --text-color: #223148;
  --line-height: 1.5;
  --background-color: #f0f5fb;
  --link-color: #2c5ba3;
  --link-hover-color: #ab9377;
  --main-font: Cambria, serif;
  --title-font: Macondo, sans-serif;
  --title-color: #49423c;
  --entry-width: 1000px;
  --border-color: #fff;
  --blockquote-background-color: #fff;
  --blockquote-text-color: #49423c;
  --blockquote-link-color: #2c5ba3;
  --blockquote-link-hover-color: #ab9377;
  --navigation-background-color: #fff;
  --navigation-link-color: #49423c;
  --navigation-link-hover-color: #49423c;
  --header-image: url("https://rosecarmine.dreamwidth.org/file/111958.jpg");
  --title-shadow-color: #fff;
  --entry-title-shadow-color: #fff;
}

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

img {
  border: none;
}

hr {
  display: none;
}

blockquote {
  color: var(--blockquote-text-color);
  background: var(--blockquote-background-color);
  font-style: italic;
  margin: 1em 0;
  padding: 1em;
  position: relative;
}

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

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

blockquote:before {
  content: "";
  border-style: solid;
  border-width: 0 15px 15px 15px;
  border-color: var(--background-color) transparent;
  position: absolute;
  right: 20px;
  bottom: 0;
  width: 0;
}

.page-entry #primary > .inner:first-child,
.page-tags #primary > .inner:first-child,
.page-reply #primary > .inner:first-child,
.page-icons #primary > .inner:first-child {
  border-bottom: 20px solid var(--navigation-background-color);
}

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

#header {
  text-align: center;
  margin: 30px 2em;
  text-shadow: 2px 2px 0 var(--entry-title-shadow-color);
}

h1#title {
  font-family: var(--title-font);
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  display: inline-block;
  font-size: 1.5em;
}

h2#subtitle {
  padding: 0;
  margin: 0;
  font-weight: normal;
  font-size: 1.2em;
}

@media (min-width: 1024px) {
  .page-recent #header {
    margin: 0;
    width: 100%;
    height: 100vh;
    background-clip: content-box;
    box-sizing: border-box;
    background-image: var(--header-image);
    background-position: center center;
    background-size: cover;
    display: table;
    position: relative;
    z-index: 2;
    color: var(--title-color);
  }

.page-recent #header .inner {
    display: table-cell;
    vertical-align: middle;
  }

.page-recent #header:before {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 5px;
    width: 0;
    border-width: 0 20px 15px 0;
    border-style: solid;
    border-color: var(--border-color) transparent;
  }

.page-recent #header:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 0;
    border-width: 15px 20px 0 0;
    border-style: solid;
    border-color: transparent var(--border-color);
  }

.page-recent #header .inner:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(50% - 20px);
    height: 20px;
    background: var(--border-color);
  }

.page-recent #header .inner:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(50% - 20px);
    height: 20px;
    background: var(--border-color);
  }

#header {
    margin: 50px 2em;
    padding-top: 4em;
  }

.page-recent #header {
    text-shadow: 2px 2px 0 var(--title-shadow-color);
  }

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

.page-recent h1#title:before {
    content: "";
    border-style: solid;
    border-width: 25px 35px 0 35px;
    border-color: var(--border-color) transparent;
    position: absolute;
    margin-left: -35px;
    left: 50%;
    bottom: -20px;
    width: 0;
  }

.page-recent h1#title:after {
    content: "Scroll";
    bottom: 30px;
    left: 50%;
    width: 70px;
    padding: 5px 0;
    margin-left: -35px;
    font-weight: normal;
    background: var(--navigation-background-color);
    font-size: 14px;
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease;
    color: var(--navigation-link-color);
    font-family: var(--main-font);
    text-shadow: none;
  }

.page-recent h1#title span:after {
    content: "";
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: var(--navigation-background-color) transparent;
    position: absolute;
    left: 50%;
    bottom: 20px;
    margin-left: -10px;
    width: 0;
    opacity: 0;
    transition: opacity 1s ease;
  }

.page-recent h1#title:hover:after,
  .page-recent h1#title:hover span:after {
    opacity: 1;
  }

h1#title {
    font-size: 2.2em;
  }

h2#subtitle {
    font-size: 1.35em;
  }
}

#pagetitle {
  display: none;
}

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

.entry-wrapper,
#comments {
  padding: 0 2em;
}

.entry,
.full .comment {
  margin: 30px 0;
  position: relative;
}

@media (min-width: 1024px) {
  .entry-wrapper,
  #comments {
    max-width: var(--entry-width);
    margin: 50px auto;
    padding: 0 165px;
  }

.entry,
  .full .comment {
    margin: 50px 0;
    border-right: 5px solid var(--border-color);
  }
}

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

@media (min-width: 1024px) {
  .header .inner {
    padding-right: 2em;
  }
}

.entry .entry-title,
.full .comment-title {
  text-shadow: 2px 2px 0 var(--entry-title-shadow-color);
  text-transform: uppercase;
  font-weight: normal;
  font-family: var(--title-font);
}

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

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

.restrictions,
.access-filter {
  float: right;
  padding: 0.5em;
  color: var(--blockquote-text-color);
  background: var(--blockquote-background-color);
  margin-left: 0.5em;
  line-height: 1;
}

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

.header .datetime {
  display: inline-block;
  border-bottom: 5px solid var(--border-color);
  padding: 0.5em 0;
}

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

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

.poster .ljuser img {
  display: none;
}

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

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

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

.contents .poster {
  padding-top: 0.5em;
  display: block;
  clear: left;
}

@media (min-width: 1024px) {
  .has-userpic .userpic {
    width: 110px;
    margin-right: -150px;
    text-align: center;
  }

.userpic img {
    max-width: 100px;
    max-height: 100px;
  }

.has-userpic .userpic:before {
    content: "";
    border-style: solid;
    border-width: 25px 0 25px 25px;
    border-color: transparent var(--border-color);
    position: absolute;
    top: 32px;
    right: -25px;
    width: 0;
  }

.has-userpic .userpic:after {
    content: "";
    border-style: solid;
    border-width: 18px 0 18px 18px;
    border-color: transparent var(--background-color);
    position: absolute;
    top: 39px;
    right: -18px;
    width: 0;
  }

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

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

.entry .poster,
  .full .poster {
    display: block;
    float: right;
    clear: right;
    width: 110px;
    line-height: 1;
    background: var(--blockquote-background-color);
    box-sizing: border-box;
    padding: 7px;
    margin-right: -150px;
    margin-top: 20px;
    text-align: center;
    position: relative;
  }

.entry .poster:before,
  .full .poster:before {
    content: "";
    position: absolute;
    left: 50%;
    top: -10px;
    margin-left: -10px;
    width: 0;
    border-width: 0 10px 10px 10px;
    border-style: solid;
    border-color: var(--blockquote-background-color) transparent;
  }

.entry .poster a,
  .full .poster a {
    color: var(--blockquote-text-color);
  }

.entry-content,
  .comment-content {
    text-align: justify;
    padding-right: 2em;
  }
}

.poster.empty {
  display: none;
}

.entry-content,
.comment-content {
  margin-bottom: 2em;
  padding-top: 2em;
  clear: left;
}

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

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

.cuttag_container img {
  vertical-align: bottom;
}

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

.metadata-label,
.tag-text {
  border-left: 5px solid var(--border-color);
  padding-left: 1em;
}

@media (min-width: 1024px) {
  .footer {
    margin-right: 2em;
  }
}

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

.tag ul li {
  display: inline;
}

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

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

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

ul.entry-interaction-links {
  margin: 0;
  padding: 0.5em 0 0;
  border-top: 5px solid var(--border-color);
  display: inline-block;
}

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

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

.comment-pages {
  text-align: center;
  color: var(--blockquote-text-color);
  background: var(--blockquote-background-color);
  padding: 0.75em;
}

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

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

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

.thread-depth {
  display: block;
}

.full .thread-depth {
  display: inline-block;
  padding: 0.5em;
  color: var(--blockquote-text-color);
  background: var(--blockquote-background-color);
  line-height: 1;
  text-transform: uppercase;
}

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

.partial .comment {
  color: var(--blockquote-text-color);
  background: var(--blockquote-background-color);
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: 0;
  position: relative;
}

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

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

.partial .comment:before {
  content: "";
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: var(--background-color) transparent;
  position: absolute;
  right: 20px;
  bottom: 0;
  width: 0;
}

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

.multiform-checkbox {
  float: right;
}

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

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

ul.comment-interaction-links {
  margin: 0;
  padding: 0.5em 0 0;
  display: inline-block;
  border-top: 5px solid var(--border-color);
}

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

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

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

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

.bottomcomment {
  text-align: center;
}

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

.page-reply .comment-wrapper,
#postform {
  margin: 30px 2em;
}

@media (min-width: 1024px) {
  .page-reply .comment-wrapper,
  .page-reply #qrformdiv {
    max-width: var(--entry-width);
    margin: 50px auto;
    padding: 0 165px;
  }

#postform {
    margin: 50px 0;
  }
}

#qrform,
#postform {
  box-sizing: border-box;
  padding: 2em;
  background: var(--blockquote-background-color);
  position: relative;
  margin-top: 2em;
  color: var(--blockquote-text-color);
}

#qrform:after,
#postform:after {
  content: "";
  border-style: solid;
  border-width: 15px 15px 0 15px;
  border-color: var(--background-color) transparent;
  position: absolute;
  right: 20px;
  top: 0;
  width: 0;
}

#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(--blockquote-link-color);
  line-height: 1;
  text-transform: uppercase;
}

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

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

.month > .inner:first-child,
.tags-container > .inner:first-child,
.icons-container > .inner:first-child {
  margin: 30px 0;
}

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

.month > .inner:first-child,
  .tags-container > .inner:first-child,
  .icons-container > .inner:first-child {
    margin: 50px 0;
    border-right: 5px solid var(--border-color);
    padding-right: 2em;
  }
}

.month-wrapper h3,
.header h2 {
  font-weight: normal;
  display: inline-block;
  font-size: 1.2em;
  border-bottom: 5px solid var(--border-color);
}

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

.month .footer,
#primary .manage-link {
  display: inline-block;
  border-top: 5px solid var(--border-color);
  padding-top: 0.5em;
}

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

.day-date {
  display: none;
}

.month caption {
  display: none;
}

table.month {
  color: var(--blockquote-text-color);
  width: 100%;
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
}

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

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

table.month td {
  height: 3em;
  border: none;
}

table.month td.day {
  background: var(--blockquote-background-color);
}

table.month th {
  text-transform: uppercase;
  font-family: var(--title-font);
  font-weight: normal;
  background: var(--blockquote-background-color);
  border: none;
}

table.month td,
table.month th {
  border-right: 5px solid var(--background-color);
  padding: 0.5em;
}

table.month td:last-child,
table.month th:last-child {
  border-right: none;
}

table.month tr,
table.month th {
  border-bottom: 5px solid var(--background-color);
}

table.month tr:last-child {
  border-bottom: none;
}

table.month td p {
  margin: 0;
}

.month dl {
  margin: 0;
}

.month dl dt {
  display: inline-block;
  font-weight: normal;
  padding-bottom: 0.5em;
  border-bottom: 5px solid var(--border-color);
}

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

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

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

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

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

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

/*------------ 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 ------------*/

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

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

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

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

.icon {
  color: var(--blockquote-text-color);
  background: var(--blockquote-background-color);
  padding: 1em;
  margin: 10px 0;
  overflow: hidden;
  position: relative;
}

.icon:before {
  content: "";
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: var(--background-color) transparent;
  position: absolute;
  right: 20px;
  bottom: 0;
  width: 0;
}

.icon-image {
  float: left;
  min-width: 100px;
  margin-right: 1em;
}

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

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

.icon-pages p {
  margin: 0;
}

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

.module {
  margin-bottom: 1em;
}

#secondary .module-wrapper {
  margin: 30px 0;
  padding: 0 2em;
}

.module-section-one .inner:after {
  content: "";
  display: block;
  clear: both;
}

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

@media (min-width: 1024px) {
  .module-section-one {
    border-right: 5px solid var(--border-color);
    position: relative;
  }

.module {
    padding-right: 2em;
  }

.module-userprofile {
    padding: 0;
    margin: 0;
  }

#secondary .module-wrapper {
    max-width: var(--entry-width);
    margin: 50px auto;
    padding: 0 165px;
  }

.module .userpic {
    width: 110px;
    margin-right: -150px;
    text-align: center;
    position: relative;
  }

.module .userpic:before {
    content: "";
    border-style: solid;
    border-width: 25px 0 25px 25px;
    border-color: transparent var(--border-color);
    position: absolute;
    top: 32px;
    left: -40px;
    width: 0;
  }

.module .userpic:after {
    content: "";
    border-style: solid;
    border-width: 18px 0 18px 18px;
    border-color: transparent var(--background-color);
    position: absolute;
    top: 39px;
    left: -40px;
    width: 0;
  }

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

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

.module-navlinks {
  font-family: var(--title-font);
}

.module-content li {
  text-transform: uppercase;
  display: inline;
}

.module-navlinks li a {
  padding: 0 0.5em;
}

@media (min-width: 1024px) {
  .module-navlinks {
    width: 100%;
    background: var(--navigation-background-color);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
  }

.module-navlinks .module-content {
    padding: 1.5em;
    line-height: 1;
  }

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

.module-typelist li {
  text-transform: uppercase;
  display: inline;
  padding: 0 0.25em;
}

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

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

.navigation {
  background: var(--navigation-background-color);
  text-align: center;
  color: var(--navigation-link-color);
}

.navigation .inner {
  padding: 0.75em;
}

.navigation ul {
  font-family: var(--title-font);
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  line-height: 1;
}

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

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

#footer {
  font-family: var(--title-font);
  background: var(--navigation-background-color);
  text-align: center;
  text-transform: uppercase;
  padding: 0.75em;
  line-height: 1;
}

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

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

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

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

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

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

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

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

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

.ContextualPopup .Userpic {
  border: 0;
}

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

#lj_controlstrip {
  justify-content: center;
  text-align: center;
  color: var(--blockquote-text-color);
  background: var(--blockquote-background-color);
  padding: 0.75em 0;
}

@media (min-width: 1024px) {
  #lj_controlstrip {
    position: fixed;
    flex-direction: column;
    top: 0;
    left: -300px;
    height: 100%;
    width: 300px;
    z-index: 1;
    transition: left 1s ease;
  }

#lj_controlstrip > div {
    flex-grow: 0;
  }

#lj_controlstrip:hover {
    left: 0;
  }

#lj_controlstrip_statustext:before {
    content: "";
    position: absolute;
    right: -35px;
    width: 30px;
    height: 10px;
    background: var(--border-color);
    margin-top: -12px;
    transform: rotate(45deg);
    top: 50%;
  }

#lj_controlstrip_statustext:after {
    content: "";
    position: absolute;
    right: -35px;
    width: 30px;
    height: 10px;
    background: var(--border-color);
    margin-bottom: -12px;
    transform: rotate(-45deg);
    bottom: 50%;
  }

#lj_controlstrip:after {
    content: "";
    position: absolute;
    right: -35px;
    width: 35px;
    height: 40px;
    margin-top: -20px;
    top: 50%;
    cursor: pointer;
  }
}
#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(--blockquote-link-color);
}

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

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

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

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

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

#lj_controlstrip .ljuser img {
  display: none;
}

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

How to install:

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "1 Column (modules at bottom; no sidebar)" page setup.
Go to the "Customize your theme" page, click the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". Copy and paste the following https://fonts.googleapis.com/css2?family=Macondo&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".

Resource: sample image from Picjumbo.com

Flat | Top-Level Comments Only

WHOA THIS IS BEAUTIFUL!!

Thank you! ^_^

You have the most beautiful layouts I have ever seen on DW. Super creative, thanks so much :) great work! I'll be using these a lot, and with proper credit of course

Thank you so much! ^_^

Using on my personal journal, will add credit to my bio.

Arrow

no subject

no subject

no subject

no subject

Beautiful!