myrtillenne | Blossom

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

Code:

/*-------------------------------------
 
- layout - blossom (tabula rasa) - https://myrtillenne.dreamwidth.org
- icon font - material icons - https://material.io
- image - picjumbo.com

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

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

:root {
  --text-size: 14px;
  --text-color: #674b2e;
  --line-height: 1.5;
  --background-color: #f8eee4;
  --link-color: #c0434d;
  --link-hover-color: #e7705a;
  --icon-color: #eed0b7;
  --icon-hover-color: #e7705a;
  --main-font: Open Sans, sans-serif;
  --title-font: Courgette, sans-serif;
  --title-color: #8d663f;
  --entry-width: 1000px;
  --entry-background-color: #fffdf9;
  --sidebar-background-color: #eed0b7;
  --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/110868.jpg");
  --sidebar-image-width: 320px;
  --sidebar-text-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 {
  margin: 1em 0;
  font-style: italic;
}

blockquote:before {
  content: "format_quote";
  font-family: Material Icons;
  font-size: 26px;
  line-height: var(--text-size);
  font-style: normal;
  color: var(--icon-color);
  vertical-align: middle;
}

blockquote:after {
  content: "format_quote";
  font-family: Material Icons;
  font-size: 26px;
  line-height: var(--text-size);
  font-style: normal;
  color: var(--icon-color);
  vertical-align: middle;
}

#canvas {
  margin: 20px 0;
}

#content > .inner:first-child {
  max-width: var(--entry-width);
}

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

@media (min-width: 1024px) {
  #content {
    margin-left: calc(var(--sidebar-image-width) + 90px);
  }
}

@media (min-width: 1280px) {
  #content {
    margin-right: 110px;
  }
}

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

#header {
  padding: 2em;
  text-align: center;
  background: var(--sidebar-background-color);
  color: var(--sidebar-text-color);
}

@media (min-width: 1024px) {
  #header {
    position: fixed;
    left: 44px;
    top: 0;
    background-image: var(--sidebar-image);
    background-size: cover;
    background-position: center center;
    background-color: transparent;
    width: var(--sidebar-image-width);
    height: 100%;
    display: table;
    border-right: 44px solid var(--sidebar-background-color);
    padding: 0;
    color: var(--title-color);
  }

#header > .inner {
    display: table-cell;
    vertical-align: middle;
    padding: 2em;
  }
}

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

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

h2#subtitle {
  text-transform: uppercase;
  font-size: 1em;
  font-weight: normal;
  letter-spacing: 2px;
  padding: 0;
  margin: 0;
}

h2#pagetitle {
  display: none;
}

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

.entry,
.full .comment {
  border: 0;
  margin: 5px 0;
  background: var(--entry-background-color);
  clear: both;
  position: relative;
}

.header .inner {
  padding: 2em 2em 0;
  text-align: center;
}

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

.entry .entry-title a {
  color: inherit;
}

.header .datetime {
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
}

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

.has-userpic .userpic {
  float: right;
}

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

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

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

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

.restrictions-18 .restrictions:before {
  content: "18+";
  font-size: 18px;
  font-family: arial, sans-serif;
  font-weight: bold;
  vertical-align: middle;
  color: var(--icon-color);
}

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

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

@media (min-width: 1280px) {
  .has-userpic .userpic {
    position: absolute;
    width: 110px;
    top: 0;
    right: -115px;
  }

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

.entry-content {
    text-align: justify;
  }
}

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

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

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

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

.poster .ljuser img {
  display: none;
}

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

.poster.empty {
  display: none;
}

.entry .contents,
.comment .contents {
  margin: 2em 2em 0;
}

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

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

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

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

.metadata li {
  line-height: 1.2;
  padding-bottom: 0.5em;
}

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

.metadata-label {
  display: none;
}

.metadata img {
  vertical-align: middle;
}

#metadata-music:before {
  content: "speaker";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  margin-right: 5px;
  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);
}

.footer {
  background: var(--sidebar-background-color);
}

.entry .footer ul {
  margin: 0;
  padding: 0;
}

.entry .tag {
  background: var(--entry-background-color);
  padding: 0 2em 0.5em;
  line-height: 1.2;
}

.tag-text {
  display: none;
}

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

.tag ul li {
  display: inline;
}

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

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

.entry-management-links,
.entry-interaction-links {
  clear: right;
}

ul.entry-management-links.icon-links li {
  float: left;
  list-style: none;
  margin: 5px 0 0 5px;
  padding: 0;
  background: var(--entry-background-color);
}

ul.entry-management-links.icon-links li a {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--icon-color);
}

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

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

ul.entry-management-links li a:before {
  display: block;
  font-family: Material Icons;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 32px;
  text-align: center;
}

.icon-links .link_prev a:before {
  content: "arrow_back";
}

.icon-links .edit_entry a:before {
  content: "edit";
}

.icon-links .edit_tags a:before {
  content: "local_offer";
}

.icon-links .mem_add a:before {
  content: "favorite";
}

.icon-links .tell_friend a:before {
  content: "share";
}

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

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

ul.entry-interaction-links li {
  float: left;
  list-style: none;
  margin: 5px 0 5px 5px;
  height: 32px;
  background: var(--entry-background-color);
  padding: 0;
  text-align: center;
}

li.entry-permalink,
li.entry-replylink {
  width: 32px;
}

li.entry-readlink {
  min-width: 32px;
  box-sizing: border-box;
  padding: 0 7px !important;
  line-height: 32px;
  font-family: var(--title-font);
  font-size: 18px;
  font-weight: bold;
}

li.entry-permalink a {
  font-size: 0;
  width: 32px;
  height: 32px;
  display: block;
}

li.entry-replylink a {
  font-size: 0;
  width: 32px;
  height: 32px;
  display: block;
}

li.entry-permalink a:before,
li.entry-replylink a:before {
  display: block;
  font-family: Material Icons;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 32px;
  text-align: center;
}

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

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

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

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

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

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

.comment-pages {
  margin: 5px 0;
  text-align: center;
  color: var(--sidebar-text-color);
  background: var(--sidebar-background-color);
  padding: 0.75em;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
}

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

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

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

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

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

.comment-title a {
  color: inherit;
}

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

.poster-ip {
  display: block;
}

.comment .footer {
  text-align: center;
  padding: 0.75em;
  line-height: 1;
  clear: both;
}

.multiform-checkbox,
ul.comment-management-links,
ul.comment-interaction-links {
  margin: 0;
  padding: 0;
  display: inline;
  display: inline;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--sidebar-text-color);
}

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(--sidebar-text-color);
}
.comment-interaction-links a:hover,
.comment-management-links a:hover {
  color: var(--sidebar-text-color);
}

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

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

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

.bottomcomment {
  background: var(--entry-background-color);
  text-align: center;
}

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

#qrform {
  margin-top: 0.75em;
  background: var(--entry-background-color);
  padding: 1em;
}

#qrdiv input[type="button"],
#qrdiv input[type="submit"] {
  background: var(--sidebar-background-color);
  border: 0;
  font-size: var(--text-size);
  font-family: var(--main-font);
  padding: 0.5em;
  color: var(--sidebar-text-color);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 2px;
}

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

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

.page-month .month,
.tags-container,
.icons-container {
  background: var(--entry-background-color);
}

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

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

#primary .manage-link {
  background: var(--sidebar-background-color);
  padding: 0.75em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

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

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

.month .header {
  background: var(--entry-background-color);
  margin: 5px 0;
  padding-bottom: 2em;
}

.day-date {
  display: none;
}

.month caption {
  display: none;
}

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

table.month th {
  color: var(--sidebar-text-color);
  text-transform: uppercase;
  font-weight: normal;
  background: var(--sidebar-background-color);
  padding: 3px;
  border: none;
}

table.month td {
  padding: 3px;
  background: var(--entry-background-color);
  height: 3em;
}

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

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.day-has-entries {
  background: var(--sidebar-background-color);
  color: var(--sidebar-text-color);
}

.month .footer {
  margin: 5px 0;
  padding: 10px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.page-archive .navigation ul {
  background: var(--sidebar-background-color);
  margin: 5px 0;
  overflow: hidden;
  padding: 5px 0 0 5px;
}

.page-archive .navigation li {
  float: left;
  background: var(--entry-background-color);
  margin: 0 5px 5px 0;
  padding: 0 5px;
  line-height: 30px;
}

.page-month .navigation {
  background: var(--sidebar-background-color);
  padding: 0.75em;
  color: var(--sidebar-text-color);
}

.page-month .navigation a {
  color: var(--sidebar-text-color);
}

table.month td p {
  margin: 0;
}

.month dl {
  margin: 0;
}

.month dl dt {
  font-family: var(--title-font);
  font-weight: normal;
  text-align: center;
}

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

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

/*------------ 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 0 2em;
  padding: 0;
  text-align: center;
}

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

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

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

.icon {
  margin-top: 1em;
  overflow: hidden;
}

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

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

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

.icon-pages p {
  margin: 0;
}

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

@media (min-width: 1024px) {
  .module-section-one {
    width: 44px;
    height: 100%;
    background: var(--sidebar-background-color);
    position: fixed;
    top: 0;
    left: 0;
  }

.module-section-one .inner {
    padding-top: 10px;
  }
}

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

.module-content li {
  margin: 0;
}

.module-navlinks li {
  display: block;
  padding: 0.75em;
  margin: 5px 0;
  background: var(--sidebar-background-color);
  text-align: center;
  line-height: 1;
}

.module-navlinks li a {
  text-transform: uppercase;
  color: var(--sidebar-text-color);
  letter-spacing: 2px;
}

.module-typelist h2,
.module-customtext h2 {
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: normal;
  line-height: 1;
  color: var(--sidebar-text-color);
  background: var(--sidebar-background-color);
  padding: 0.75em;
  text-align: center;
}

.module-typelist h2 a,
.module-customtext h2 a {
  color: var(--sidebar-text-color);
}

.module-typelist .module-content,
.module-customtext .module-content {
  background: var(--entry-background-color);
  padding: 1em;
  box-sizing: border-box;
  margin-top: 5px;
}

@media (min-width: 1024px) {
  .module-navlinks li {
    padding: 0;
    margin: 0;
  }

.module-navlinks li a {
    width: 34px;
    height: 34px;
    display: block;
    overflow: hidden;
    margin: 5px;
    text-transform: none;
    letter-spacing: 0;
  }

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

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

.module-navlinks li a:before {
    width: 34px;
    height: 34px;
    display: block;
    font-family: Material Icons;
    font-size: 22px;
    line-height: 34px;
    text-align: center;
    vertical-align: middle;
    background: var(--entry-background-color);
    transition: color 0.4s linear;
  }

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

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

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

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

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

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

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

.module-typelist,
  .module-customtext {
    position: relative;
    height: 34px;
    width: 0;
    padding-left: 44px;
    padding-bottom: 5px;
    transition: width 0.4s step-end;
  }

.module-typelist:hover,
  .module-customtext:hover {
    width: var(--sidebar-image-width);
    transition: width 0.4s step-start;
  }

.module-typelist:before,
  .module-customtext:before {
    width: 34px;
    height: 34px;
    display: block;
    font-family: Material Icons;
    font-size: 22px;
    line-height: 34px;
    text-align: center;
    vertical-align: middle;
    color: var(--icon-color);
    background: var(--entry-background-color);
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 5px;
    transition: color 0.4s linear;
  }

.module-typelist:hover:before,
  .module-customtext:hover:before {
    color: var(--icon-hover-color);
  }

.module-typelist:before {
    content: "near_me";
  }

.module-customtext:before {
    content: "chat";
  }

.module-typelist h2,
  .module-customtext h2 {
    margin: 0 10px;
    box-sizing: border-box;
    height: 34px;
    line-height: 34px;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.4s step-end, opacity 0.4s linear;
  }

.module-typelist .module-content,
  .module-customtext .module-content {
    margin: 5px 10px 0;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.4s step-end, opacity 0.4s linear;
  }

.module-typelist:hover h2,
  .module-typelist:hover .module-content,
  .module-customtext:hover h2,
  .module-customtext:hover .module-content {
    visibility: visible;
    opacity: 1;
    transition: visibility 0.4s step-start, opacity 0.4s linear;
    width: auto;
  }
}

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

/*------------ navigation & footer ------------*/

.navigation li {
  display: inline;
}

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

.navigation {
  text-align: center;
}

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

li.page-back,
li.page-forward {
  display: block;
  padding: 0.75em;
  margin: 5px 0;
  background: var(--sidebar-background-color);
  text-align: center;
  line-height: 1;
}

li.page-back a,
li.page-forward a {
  text-transform: uppercase;
  color: var(--sidebar-text-color);
  letter-spacing: 2px;
}

@media (min-width: 1024px) {
  #entries .navigation ul {
    position: fixed;
    list-style: none;
    left: calc(var(--sidebar-image-width) + 44px);
    bottom: 49px;
    width: 44px;
  }

li.page-back,
  li.page-forward {
    padding: 0;
    margin: 0;
  }

li.page-back a,
  li.page-forward a {
    width: 34px;
    height: 34px;
    display: block;
    overflow: hidden;
    margin: 5px;
    text-transform: none;
    letter-spacing: 0;
  }

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

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

li.page-back a:before,
  li.page-forward a:before {
    width: 34px;
    height: 34px;
    display: block;
    font-family: Material Icons;
    font-size: 22px;
    line-height: 34px;
    text-align: center;
    vertical-align: middle;
    background: var(--entry-background-color);
  }

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

li.page-forward a:before {
    content: "arrow_forward";
  }
}

#footer {
  padding: 0.75em;
  margin: 5px 0;
  background: var(--sidebar-background-color);
  text-align: center;
  line-height: 1;
}

.page-top a {
  text-transform: uppercase;
  color: var(--sidebar-text-color);
  letter-spacing: 2px;
}

@media (min-width: 1024px) {
  #footer {
    position: fixed;
    margin: 0;
    padding: 0;
    left: calc(var(--sidebar-image-width) + 44px);
    bottom: 10px;
    width: 44px;
    height: 44px;
    background: transparent;
  }

.page-top a {
    width: 34px;
    height: 34px;
    display: block;
    overflow: hidden;
    margin: 5px;
    text-transform: none;
    letter-spacing: 0;
  }

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

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

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

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

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

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

div.ContextualPopup .Relation {
  font-size: 1em;
  margin: 0.5em;
}

div.ContextualPopup .Userpic {
  border: 0;
}

div.ContextualPopup .Userpic img {
  border: 5px solid var(--sidebar-background-color);
}

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

#lj_controlstrip {
  background: var(--entry-background-color);
  color: var(--text-color);
  width: auto;
}

@media (min-width: 1024px) {
  #lj_controlstrip {
    padding-left: calc(var(--sidebar-image-width) + 88px);
  }
}

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

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

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

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

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

#lj_controlstrip input[type="submit"] {
  border: 0;
  background: var(--sidebar-background-color) !important;
  text-transform: uppercase;
  color: var(--sidebar-text-color) !important;
  padding: 0.5em;
  letter-spacing: 2px;
}

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

#lj_controlstrip .ljuser img {
  display: none;
}

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

How to install:

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Go to the "Customize your theme" page, click the on "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=Open+Sans&display&family=Courgette&display=swap into the "Custom stylesheet URL" field.
Click on the "Presentation" tab; in the "Additional options" select "text-only" for "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 for "Text to read comments" and "Text to read comments from Your Reading page" to 1//#.

Resources:

icon font by Google
sample image from Picjumbo.com

Flat | Top-Level Comments Only

oh my gosh you're on a roll!

this is beautiful! will use this soon. keep it up!

Thank you! ^_^

I'll be using the layout for this RP account! Thank you!

Thank you for using it :)

Using it on my personal journal :3

Thank you :)

Amazing, amazing - thank you so much! Using it for this journal, credit on my profile directs right to this entry.

Great work :)

LOVE your code work! Your layouts always look amazing! \o

Using this one, modified, over here at this RP journal! Thank you for sharing both the coding and your image sources!

Edited 2018-07-13 20:37 (UTC)

Hey there! New to DW, and found your layouts after googling for DW layouts! This one is lovely, using it for a personal journal, but my coding skills are nil, so can't work out how to change the "custom text" to something else, nor where to add the text in the box...but I'll keep trying. It's up and working, so I'm off to add credit to my profile, thanks for such a beautiful layout. :)

Hi! Thank you! You can change the texts on this page: https://www.dreamwidth.org/customize/options?group=text

This is amazing and I am using it for an RP journal. I am using a custom sidebar image for it. Thanks for the lovely design and your easy to follow instructions :)

I linked to your journal on my profile. Thank you once again :)

Oh! It's so beutiful! I madly fell in love with this layout at first sight)) And using it in my dw_diary. Thank you! I'll add credit to my profile.
But I'm new to dreamwidth and I'm nub in CSS, so I can't work out how translate the "tags" or another screen tips near the icons to another language. Is it possible?

Hi! Thank you so much!

Go to the custom css page and you can use the search function in your browser, find the text you want to change and replace it.

Just wanted to say that I used this layout! It's super cute and I had a lot of fun customizing it!

Blossom

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject