myrtillenne | Marbles (Reply)

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

Marbles

Post a comment in response: