myrtillenne

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

Threaded | Flat

From:

saga

oh my gosh you're on a roll!

yanyan

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

priestessoflove

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

tropicsbear

Using it on my personal journal :3

gwendys

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

Great work :)

purrrrfection

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 Date: 13/07/2018 08:37 pm (UTC)

goldenscribbler

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 :)

ahe7363

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?

moonsweet

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

Journal layouts

Blossom

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

Welcome!

Terms of use

Layouts

Links

Resources