myrtillenne | Marbles

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

Code:

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

- layout - marbles (tabula rasa) - https://myrtillenne.dreamwidth.org
- icon font - material icons - https://material.io
- background image - https://unsplash.com

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

:root {
  --text-size: 16px;
  --text-color: #27465a;
  --line-height: 1.5;
  --background-color: #f7f9fb;
  --link-color: #039fc0;
  --link-hover-color: #3772b3;
  --main-font: Roboto, sans-serif;
  --title-font: Shadows Into Light Two, sans-serif;
  --subtitle-font: Montserrat Subrayada, sans-serif;
  --title-color: #27465a;
  --title-shadow-color: #f7f9fb;
  --content-width: 1000px;
  --entry-border-color: #4b8c9c;
  --entry-icon-color: #f7f9fb;
  --entry-icon-background-color: #4b8c9c;
  --entry-icon-background-hover-color: #27465a;
  --customtext-height: 10.5em;
  --sidebar-background-image: url("https://rosecarmine.dreamwidth.org/file/105485.jpg");
  --sidebar-icon: url("https://rosecarmine.dreamwidth.org/file/105313.jpg");
  --sidebar-border-color: #27465a;
  --sidebar-icon-color: #f7f9fb;
  --sidebar-icon-background-color: #27465a;
  --sidebar-icon-background-hover-color: #4b8c9c;
}

/*--------------- 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 {
  color: var(--text-color);
  background: var(--background-color);
  border: 0;
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  margin: 0;
}

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

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

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

blockquote {
  margin: 2em 0 1em;
  border: 1px solid var(--entry-border-color);
  padding: 1em;
  position: relative;
}

blockquote:before {
  content: "format_quote";
  font-family: Material Icons;
  position: absolute;
  font-size: 22px;
  top: -20px;
  left: 50%;
  margin-left: -20px;
  border-radius: 50%;
  color: var(--entry-icon-color);
  background: var(--entry-icon-background-color);
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 5px solid var(--background-color);
  text-align: center;
}

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

#canvas {
  margin: 30px 0;
}

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

@media (min-width: 800px) {
  #canvas {
    margin-left: 36vw;
  }

#content {
    margin: 0 auto;
    max-width: var(--content-width);
  }
}

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

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

@media (min-width: 800px) {
  #header {
    position: fixed;
    left: 0;
    top: 0;
    background-image: var(--sidebar-background-image);
    background-size: cover;
    background-position: center center;
    width: 36vw;
    height: 100%;
    display: table;
    padding: 0;
    color: var(--title-color);
    text-shadow: 1px 1px 0 var(--title-shadow-color),
      -1px -1px 0 var(--title-shadow-color);
  }

#header > .inner {
    display: table-cell;
    vertical-align: middle;
    padding: 20px 5% 50px;
    border-right: 7px solid var(--sidebar-border-color);
  }

h1#title:before {
    content: "";
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 200px;
    border: 7px solid var(--sidebar-border-color);
    margin: 0 auto 20px;
    background: var(--sidebar-icon);
  }

h1#title span:before {
    content: "";
    display: block;
    width: calc(50% - 120px);
    height: 1px;
    background: var(--sidebar-border-color);
    position: absolute;
    top: 107px;
    left: 0;
  }

h1#title span:after {
    content: "";
    display: block;
    width: calc(50% - 120px);
    height: 1px;
    background: var(--sidebar-border-color);
    position: absolute;
    top: 107px;
    right: 0;
  }
}

h1#title {
  font-family: var(--title-font);
  font-weight: normal;
  padding: 0;
  position: relative;
}

h1#title a {
  color: inherit;
}

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

h2#pagetitle {
  display: none;
}

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

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

.module {
  margin: 1.5em 2em;
}

@media (min-width: 600px) {
  .module {
    margin: 1.5em 0;
  }
}

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

.module-content li {
  margin: 0;
  display: inline-block;
}

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

.module-navlinks:before {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--sidebar-border-color);
  z-index: -1;
}

.module-navlinks li {
  margin: 0 5px;
  vertical-align: top;
}

.module-navlinks li a {
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: var(--sidebar-icon-background-color);
  border: 5px solid var(--background-color);
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
}

.module-navlinks li a:before {
  display: block;
  font-family: Material Icons;
  font-size: 22px;
  height: 40px;
  width: 40px;
  line-height: 40px;
  color: var(--entry-icon-color);
}

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

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

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

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

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

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

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

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

.module-navlinks li a:after {
  margin: 35px 0 0 15px;
}

.module-typelist {
  text-transform: uppercase;
}

.module-typelist li {
  font-family: var(--subtitle-font);
  padding: 0 0.25em;
}

.module-customtext .module-content {
  max-height: var(--customtext-height);
  overflow: auto;
}

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

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

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

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

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

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

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

.entry-wrapper,
.comment-wrapper {
  margin: 30px 0;
}

.separator {
  clear: both;
}

.has-userpic.entry-wrapper .separator-before {
  height: 43px;
}

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

.has-userpic .entry > .inner:first-child,
.has-userpic.full .comment > .inner:first-child {
  padding-top: 30px;
}

.header {
  text-align: center;
}

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

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

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

.restrictions,
.access-filter {
  font-family: var(--subtitle-font);
}

.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 {
  text-transform: uppercase;
  font-family: var(--subtitle-font);
}

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

.has-userpic .userpic {
  width: 85px;
  height: 85px;
  padding: 0 15px;
  position: absolute;
  top: -43px;
  left: 50%;
  margin-left: -58px;
  background: var(--background-color);
  justify-content: center;
  display: flex;
  align-items: center;
}

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

.entry .poster {
  font-size: 0;
  display: block;
  text-align: center;
  line-height: 1;
}

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

.entry .poster .ljuser:last-child:after {
  content: " -";
}

.poster .ljuser img {
  display: none;
}

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

.poster.empty {
  display: none;
}

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

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

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

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

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

.metadata-label,
.entry .tag-text {
  font-weight: bold;
}

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

.metadata li {
  margin-bottom: 0.5em;
}

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

.tag ul li {
  display: inline;
}

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

ul.entry-management-links {
  text-align: center;
  margin: 1.5em 0;
  padding: 0;
  line-height: 1;
}

ul.entry-management-links.text-links {
  font-family: var(--subtitle-font);
  text-transform: uppercase;
}

ul.entry-management-links.icon-links {
  margin-bottom: -17px;
}

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

ul.entry-management-links.icon-links li {
  display: inline-block;
  margin: 0 3px;
  padding: 0 5px;
  background: var(--background-color);
}

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

ul.entry-management-links.icon-links li a:before {
  display: block;
  font-family: Material Icons;
  font-size: 22px;
}

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

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

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

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

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

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

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

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

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

ul.entry-interaction-links {
  float: left;
  width: 100%;
  margin: 30px 0 0;
  padding: 0;
  font-family: var(--subtitle-font);
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
}

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

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

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

.comment-pages {
  text-align: center;
  margin: 30px 0;
  border-top: 1px solid var(--entry-border-color);
  border-bottom: 1px solid var(--entry-border-color);
  padding: 1em;
  font-family: var(--subtitle-font);
}

.has-userpic.comment-wrapper .separator-before {
  height: 43px;
}

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

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

.thread-depth {
  display: block;
  margin-bottom: 1em;
}

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

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

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

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

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

.full .comment .poster {
  display: block;
  text-align: center;
  line-height: 1;
}

.full .comment .poster:before {
  content: "- ";
}

.full .comment .poster:after {
  content: " -";
}

.poster-ip {
  display: block;
  text-align: center;
}

.multiform-checkbox {
  display: block;
}

ul.comment-management-links {
  text-align: center;
  margin: 1.5em 0;
  padding: 0;
  line-height: 1;
}

ul.comment-management-links.text-links {
  font-family: var(--subtitle-font);
  text-transform: uppercase;
}

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

ul.comment-management-links.icon-links {
  margin-bottom: -17px;
}

ul.comment-management-links.icon-links li {
  display: inline-block;
  margin: 0 3px;
  padding: 0 5px;
  background: var(--background-color);
}

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

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

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

ul.comment-management-links.icon-links li a:before {
  display: block;
  font-family: Material Icons;
  font-size: 22px;
}

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

.icon-links .delete_comment a:before {
  content: "delete_forever";
}

.icon-links .screen_comment a:before {
  content: "visibility_off";
}

.icon-links .unscreen_comment a:before {
  content: "visibility";
}

.icon-links .freeze_thread a:before {
  content: "ac_unit";
}

.icon-links .unfreeze_thread a:before {
  content: "wb_sunny";
}

ul.comment-interaction-links {
  float: left;
  width: 100%;
  margin: 30px 0 0;
  padding: 0;
  font-family: var(--subtitle-font);
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
}

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

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

#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;
  float: left;
  margin: 30px -2em 0;
  border: 1px solid var(--entry-border-color);
  clear: both;
}

.page-reply #qrformdiv {
  margin: 0;
}

#qrform {
  padding: 2em;
}

#qrdiv input,
#qrdiv select,
#qrdiv textarea {
  border: 1px solid var(--entry-border-color);
  background: var(--background-color);
  color: var(--text-color);
  font-family: var(--main-font);
  font-size: var(--text-size);
}

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

#postform {
  padding: 2em;
  clear: both;
}

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

.page-archive div.month,
.tags-container,
.icons-container {
  border: 1px solid var(--entry-border-color);
  padding: 2em 2em 0;
  margin-top: 40px;
  position: relative;
}

.page-archive div.month:before,
.tags-container:before,
.icons-container:before {
  font-family: Material Icons;
  position: absolute;
  font-size: 22px;
  top: -21px;
  left: 50%;
  margin-left: -21px;
  border-radius: 50%;
  color: var(--entry-icon-color);
  background: var(--entry-icon-background-color);
  width: 32px;
  height: 32px;
  line-height: 32px;
  border: 5px solid var(--background-color);
  text-align: center;
}

.page-archive div.month:before {
  content: "date_range";
}

.tags-container:before {
  content: "style";
}

.icons-container:before {
  content: "image";
}

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

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

.month-wrapper .footer,
#primary .manage-link {
  float: left;
  width: 100%;
  font-family: var(--subtitle-font);
  text-align: center;
  text-transform: uppercase;
  margin-top: 30px;
}

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

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

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

.day-date {
  display: none;
}

.month caption {
  display: none;
}

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

table.month th {
  font-family: var(--subtitle-font);
  text-transform: uppercase;
  height: 3em;
}

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

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

table.month td .label,
table.month td p {
  display: inline-block;
  margin: 0;
}

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

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

.month dl dt {
  line-height: 1;
  text-align: center;
  margin-bottom: -35px;
}

.month dl dt a {
  color: var(--entry-icon-color);
  display: inline-block;
  height: 50px;
  width: 50px;
  background: var(--entry-icon-background-color);
  line-height: 50px;
  border-radius: 50%;
  border: 10px solid var(--background-color);
}

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

.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 dd br {
  display: block;
}

.page-archive .navigation ul:before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--sidebar-border-color);
  z-index: -1;
}

.page-archive .navigation li {
  color: var(--sidebar-icon-color);
  display: inline-block;
  height: 50px;
  width: 50px;
  background: var(--sidebar-icon-background-color);
  line-height: 50px;
  border-radius: 50%;
  border: 5px solid var(--background-color);
  margin: 0 3px;
  transition: background-color 0.4s;
}

.page-archive .navigation li:hover {
  background: var(--sidebar-icon-background-hover-color);
}

.page-archive .navigation li.active {
  background: var(--sidebar-icon-background-hover-color);
}

.page-archive .navigation a {
  color: var(--sidebar-icon-color);
}

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

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

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

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

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

.page-icons .bottompages {
  text-align: center;
  padding-top: 1.5em;
  border-top: 1px solid var(--entry-border-color);
}

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

.icon-image {
  border-right: 1px solid var(--entry-border-color);
  padding: 0.5em;
}

.icon-image img {
  display: block;
}

.icon-info {
  text-transform: lowercase;
  padding: 1.5em;
}

.icon-info div span {
  font-style: normal;
}

.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;
  color: var(--text-color);
}

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

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

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

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

.icon-pages p {
  margin: 0;
}

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

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

.navigation {
  text-align: center;
}

.navigation ul {
  margin: 2em;
  padding: 0;
  position: relative;
  line-height: 1;
}

@media (min-width: 600px) {
  .navigation ul {
    margin: 30px 0;
  }
}

#entries .navigation ul:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--sidebar-border-color);
  z-index: -1;
}

.navigation li {
  display: inline-block;
  margin: 0 2px;
  padding: 0;
  vertical-align: top;
}

li.page-back,
li.page-forward {
  padding: 0 5px;
  background: var(--background-color);
}

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

#entries .navigation li a:before {
  display: block;
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
}

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

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

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

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

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

#footer {
  text-align: center;
  margin: 2em;
  position: relative;
}

@media (min-width: 600px) {
  #footer {
    margin: 30px 0;
  }
}

@media (min-width: 800px) {
  #footer {
    width: 36vw;
    position: fixed;
    left: 0;
    bottom: 50px;
    margin: 0;
  }

#footer .inner {
    border-right: 7px solid transparent;
    margin: 0 5%;
  }
}

.page-top {
  display: flex;
  align-items: center;
}

.page-top:before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sidebar-border-color);
}

.page-top:after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sidebar-border-color);
}

.page-top a {
  display: block;
  width: 32px;
  height: 32px;
  background: var(--sidebar-icon-background-color);
  color: var(--sidebar-icon-color);
  border-radius: 50%;
  margin: 0 10px;
  overflow: hidden;
}

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

.page-top a:before {
  content: "arrow_upward";
  display: block;
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
}

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

div.ContextualPopup {
  background: var(--background-color);
  color: var(--text-color);
  font-family: arial, sans-serif;
  border: 0;
  width: 200px;
  text-align: center;
  padding: 1em;
}

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

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

div.ContextualPopup .Relation {
  font-family: var(--subtitle-font);
  text-transform: uppercase;
  font-size: 1em;
  margin: 1em 0;
  font-weight: normal;
}

div.ContextualPopup .Userpic {
  border: 0;
  float: none;
}

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

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

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

#lj_controlstrip {
  background: var(--background-color);
  color: var(--text-color);
  justify-content: center;
  padding-top: 0.75em;
  width: auto;
}

@media (min-width: 800px) {
  #lj_controlstrip {
    padding-left: 36vw;
  }
}

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

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

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

#lj_controlstrip_actionlinks {
  text-align: center;
}

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

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 1px solid var(--entry-border-color);
  background: var(--background-color) !important;
  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: transparent;
  text-transform: uppercase;
  font-family: var(--subtitle-font) !important;
  padding: 0.25em;
}

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

#lj_controlstrip .ljuser img {
  display: none;
}

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

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

How to install:

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "1 Column (modules at top and bottom; no sidebar)" page setup.
Go to the "Customize your theme" page, click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". Copy and paste the following https://fonts.googleapis.com/css2?family=Roboto&family=Shadows+Into+Light+Two&family=Montserrat+Subrayada&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab. Set "Navigation" to number 2, "Custom text" to number 3, "Links list" to number 4. Uncheck the other modules.

Resources:

icon font by Google
image from unsplash.com

Flat | Top-Level Comments Only

so in love with this!!!

This is so pretty! ~~Actually all your layouts are so pretty~~ If I use this layout, do I credit

myrtillene or

rosecarmine?

Thank you!
You can credit myrtillenne.

I've put a credit in my profile page. Thank you so much for your hard work!

Thank you! I'm using and crediting you ^^

Is this layout still available? I'm having problems getting the code and I LOVE it!

Thank you for the help!

Yes, it is available https://pastebin.com/357H6fnv

Thanks. I'll have to try it on a different computer later. The computer I am currently on can't seem to connect. :(

If you still can't access it, I could email it to you.

I did it through my phone then emailed it. Little round about way, but I did get it. I appreciate the offer, though. It's a great layout, thank you so much!

That's great, thank you!

Thank you so much for creating so many beautiful layouts and sharing them! It was so difficult to select just one! I'll be sure to credit once everything in this journal is up and running. Thanks again!

Thank you!

Marbles

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