myrtillenne | Light

header image (600x250px)
sliding sidebar
navigation links, links list, custom text
comment pages
icon pages

Code:

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

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

:root {
  --text-size: 14px;
  --text-color: #777;
  --line-height: 1.5;
  --background-color: #f1f2f8;
  --link-color: #c2872e;
  --link-hover-color: #d7a457;
  --main-font: Open Sans, sans-serif;
  --title-font: Playfair Display, sans-serif;
  --title-color: #fff;
  --title-hover-color: #444;
  --content-width: 600px;
  --header-height: 250px;
  --sidebar-width: 400px;
  --header-image: url(https://rosecarmine.dreamwidth.org/file/109450.jpg);
  --entry-background-color: #fff;
  --entry-border-color: #ccc;
  --entry-content-text-color: #444;
  --entry-content-link-color: #c2872e;
  --entry-content-link-hover-color: #d7a457;
  --entry-content-background-color: #fafafa;
  --entry-content-border-color: #f2f2f2;
  --entry-title-color: #777;
  --entry-title-hover-color: #d7a457;
}

/*--------------- general ---------------*/

H1,
H2,
H3 {
  margin: 0.25em 0;
  padding: 0.25em 0;
}

img {
  border: none;
}

hr {
  display: none;
}

body {
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  background-color: var(--background-color);
  color: var(--text-color);
}

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

a,
a:link,
a:visited,
a:active {
  text-decoration: none;
  transition: all 0.4s ease;
}

q {
  font-style: italic;
}

blockquote {
  margin: 1em 0;
  padding: 1em 1.5em;
  position: relative;
}

blockquote:before {
  content: "";
  width: 40px;
  height: 40px;
  top: 0;
  left: 0;
  border-top: 1px solid var(--entry-content-border-color);
  border-left: 1px solid var(--entry-content-border-color);
  position: absolute;
}

blockquote:after {
  content: "";
  width: 40px;
  height: 40px;
  bottom: 0;
  right: 0;
  border-right: 1px solid var(--entry-content-border-color);
  border-bottom: 1px solid var(--entry-content-border-color);
  position: absolute;
}

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

#canvas > .inner:first-child {
  max-width: var(--content-width);
  margin: 0 auto;
}

@media (min-width: 800px) {
  #canvas > .inner:first-child {
    padding: 50px;
  }
}

@media (min-width: 1024px) {
  #canvas {
    padding: 3em;
  }

.has-navstrip #canvas {
    padding-top: 0;
  }

#canvas > .inner:first-child {
    padding: 80px 140px;
  }

#canvas:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3em;
    background: var(--entry-background-color);
    z-index: 2;
  }

#canvas:after {
    content: "";
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3em;
    background: var(--entry-background-color);
  }
}

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

#header {
  text-align: center;
  background: var(--entry-background-color);
  margin: 20px 0;
}

#header > .inner {
  padding: 2em;
}

h1#title {
  font-family: var(--title-font);
  padding: 0;
  margin: 0;
  transition: color 0.5s ease;
}

h1#title a {
  color: var(--entry-title-color);
}

h1#title a:hover {
  color: var(--entry-title-hover-color);
}

h2#subtitle {
  font-size: 1em;
  text-transform: uppercase;
  font-weight: normal;
  padding: 0;
  margin: 0;
  transition: color 0.5s ease;
}

h2#pagetitle {
  display: none;
}

@media (min-width: 1024px) {
  #header {
    width: 100%;
    height: var(--header-height);
    background: var(--header-image);
    background-size: cover;
    padding: 0;
    margin: 39px 0;
    position: relative;
    display: table;
  }

#header:before,
  .entry:before,
  #comments:before {
    content: "";
    display: block;
    position: absolute;
    top: -20px;
    left: -40px;
    height: 1px;
    width: 10px;
    padding: 0 40px;
    background: var(--entry-border-color);
    transition: width 0.5s linear;
    z-index: -1;
  }

#header:after,
  .entry:after,
  #comments:after {
    content: "";
    display: block;
    position: absolute;
    left: -20px;
    top: -40px;
    width: 1px;
    height: 10px;
    padding: 40px 0;
    background: var(--entry-border-color);
    transition: height 0.5s linear;
    z-index: -1;
  }

#header .inner {
    display: table-cell;
    vertical-align: bottom;
  }

#header .inner:before,
  .entry > .inner:first-child:before,
  #comments > .inner:first-child:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -20px;
    right: -40px;
    height: 1px;
    width: 10px;
    padding: 0 40px;
    background: var(--entry-border-color);
    transition: width 0.5s linear;
    z-index: -1;
  }

#header .inner:after,
  .entry > .inner:first-child:after,
  #comments > .inner:first-child:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -40px;
    right: -20px;
    width: 1px;
    height: 10px;
    padding: 40px 0;
    background: var(--entry-border-color);
    transition: height 0.5s linear;
    z-index: -1;
  }

#header:hover:before,
  .entry:hover:before,
  #comments:hover:before {
    width: 100%;
  }

#header:hover:after,
  .entry:hover:after,
  #comments:hover:after {
    height: 100%;
  }

#header:hover .inner:before,
  .entry:hover .inner:before,
  #comments:hover .inner:before {
    width: 100%;
  }

#header:hover .inner:after,
  .entry:hover .inner:after,
  #comments:hover .inner:after {
    height: 100%;
  }

h1#title a,
  h2#subtitle {
    color: var(--title-color);
  }

#header:hover h1 a,
  #header:hover h2 {
    color: var(--title-hover-color);
  }
}

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

.entry,
#comments {
  position: relative;
  margin: 20px 0;
  color: var(--text-color);
}

@media (min-width: 1024px) {
  .entry,
  #comments {
    margin: 39px 0;
  }
}

.entry > .inner:first-child,
#comments > .inner:first-child {
  background: var(--entry-background-color);
  padding: 1.5em 1em;
}

.entry .header {
  text-align: center;
  margin-bottom: 2em;
}

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

.entry .entry-title {
  font-family: var(--title-font);
  font-size: 1.5em;
  font-style: italic;
  line-height: 1.2;
  padding: 0;
  color: var(--entry-title-color);
}

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

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

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

.entry .datetime {
  text-transform: uppercase;
  color: var(--link-color);
}

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

.entry .userpic {
  text-align: center;
}

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

.entry .poster {
  display: block;
  text-align: center;
  color: var(--text-color);
}

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

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

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

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

@media (min-width: 1024px) {
  .has-userpic .entry .userpic {
    position: absolute;
    width: 101px;
    padding: 0;
    top: -20px;
    right: -120px;
    text-align: left;
  }

.entry .userpic img {
    max-width: 100px;
    max-height: 100px;
    border-top: 1px solid var(--entry-border-color);
    border-left: 1px solid var(--entry-border-color);
  }

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

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

.poster .ljuser img {
  display: none;
}

.poster.empty {
  display: none;
}

.entry-content {
  padding: 1em;
  margin: 1em 0;
  background: var(--entry-content-background-color);
  border: 1px solid var(--entry-content-border-color);
  color: var(--entry-content-text-color);
}

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

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

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

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

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

.entry .footer {
  padding: 0 1em;
  text-align: center;
}

.entry .tag {
  text-align: left;
}

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

.tag ul li {
  display: inline;
}

ul.entry-management-links,
ul.entry-interaction-links,
ul.comment-management-links,
ul.comment-interaction-links {
  margin: 0;
  padding: 0;
  display: inline;
}

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

ul.entry-management-links:before {
  content: "";
  display: block;
  margin-top: 2em;
}

ul.entry-management-links li:before,
ul.entry-interaction-links li:before {
  content: "|";
  padding-right: 0.75em;
  color: var(--entry-content-border-color);
}

ul.entry-management-links li:first-child:before {
  content: "";
  padding: 0;
}

.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-transform: uppercase;
  text-align: center;
}

.comment-pages b {
  font-weight: normal;
}

.comment-pages.toppages {
  margin-bottom: 1em;
}

.page-entry .comment {
  background: var(--entry-content-background-color);
  border: 1px solid var(--entry-content-border-color);
  padding: 1em 1em 0;
  margin: 1em 0;
  clear: both;
  color: var(--entry-content-text-color);
}

.page-entry .comment a {
  color: var(--entry-content-link-color);
}

.page-entry .comment a:hover {
  color: var(--entry-content-link-hover-color);
}

.comment .header {
  float: left;
}

.comment-title {
  margin: 0;
}

.full .comment-title {
  text-transform: uppercase;
  margin: 0 0 1em;
  font-weight: normal;
}

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

.comment .userpic {
  float: right;
}

.full .comment .poster {
  display: block;
  clear: left;
}

.comment .contents {
  padding-bottom: 1em;
}

.comment-content {
  padding-top: 1em;
}

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

.comment .footer {
  float: left;
  text-align: center;
  width: 100%;
  color: var(--text-color);
}

.comment .footer .inner {
  padding: 1em 0;
}

.page-reply .footer {
  float: none;
}

.multiform-checkbox {
  display: inline;
  padding-right: 0.5em;
}

.multiform-checkbox:after,
ul.comment-management-links li:after,
ul.comment-interaction-links li:after {
  content: "|";
  padding-left: 0.75em;
  color: var(--entry-content-border-color);
}

ul.comment-interaction-links li:last-child:after,
ul.comment-interaction-links li.cmt_hide:after {
  content: "";
  padding: 0;
}

.partial .comment {
  padding: 1em;
}

.page-reply .comment,
#postform {
  margin: 20px 0;
  background: var(--entry-background-color);
  padding: 2em;
}

@media (min-width: 600px) {
  .page-reply .comment,
  #postform {
    margin: 39px 0;
  }
}

.page-reply .footer .inner {
  padding: 0;
}

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

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

.bottomcomment {
  text-align: center;
  clear: both;
}

#comments ul.entry-management-links,
#comments ul.entry-interaction-links,
.comment-pages.bottompages {
  display: none;
}

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

#qrform {
  padding-top: 2em;
}

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

#qrdiv input[type="button"],
#qrdiv input[type="submit"] {
  text-transform: uppercase;
  padding: 0.25em;
}

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

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

.month-wrapper,
.page-month .month,
.tags-container,
.icons-container {
  position: relative;
  margin: 20px 0;
}

.month > .inner:first-child,
.tags-container > .inner:first-child,
.icons-container > .inner:first-child {
  background: var(--entry-background-color);
  padding: 1.5em 1em;
}

@media (min-width: 1024px) {
  .month-wrapper,
  .page-month .month,
  .tags-container,
  .icons-container {
    margin: 39px 0;
  }

div.month:before,
  .tags-container:before,
  .icons-container:before {
    content: "";
    display: block;
    position: absolute;
    top: -20px;
    left: -40px;
    height: 1px;
    width: 10px;
    padding: 0 40px;
    background: var(--entry-border-color);
    z-index: -1;
    transition: width 0.5s linear;
  }

div.month:after,
  .tags-container:after,
  .icons-container:after {
    content: "";
    display: block;
    position: absolute;
    left: -20px;
    top: -40px;
    width: 1px;
    height: 10px;
    padding: 40px 0;
    background: var(--entry-border-color);
    z-index: -1;
    transition: height 0.5s linear;
  }

.month > .inner:first-child:before,
  .tags-container > .inner:first-child:before,
  .icons-container > .inner:first-child:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -20px;
    right: -40px;
    height: 1px;
    width: 10px;
    padding: 0 40px;
    background: var(--entry-border-color);
    z-index: -1;
    transition: width 0.5s linear;
  }

.month > .inner:first-child:after,
  .tags-container > .inner:first-child:after,
  .icons-container > .inner:first-child:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -40px;
    right: -20px;
    width: 1px;
    height: 10px;
    padding: 40px 0;
    background: var(--entry-border-color);
    z-index: -1;
    transition: height 0.5s linear;
  }

.month:hover:before,
  .tags-container:hover:before,
  .icons-container:hover:before {
    width: 100%;
  }

.month:hover:after,
  .tags-container:hover:after,
  .icons-container:hover:after {
    height: 100%;
  }

.month:hover .inner:before,
  .tags-container:hover .inner:before,
  .icons-container:hover .inner:before {
    width: 100%;
  }

.month:hover .inner:after,
  .tags-container:hover .inner:after,
  .icons-container:hover .inner:after {
    height: 100%;
  }
}

.month .header,
.tags-container .header,
.icons-container .header {
  text-align: center;
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-family: var(--title-font);
  font-style: italic;
  font-size: 1.5em;
  line-height: 1.2;
  padding: 0;
}

.month .contents,
.tags-container .contents {
  margin-top: 2em;
  background: var(--entry-content-background-color);
  color: var(--entry-content-text-color);
}

.month .contents a,
.tags-container .contents a,
.month dd a {
  color: var(--entry-content-link-color);
}

.month .contents a:hover,
.tags-container .contents a:hover,
.month dd a:hover {
  color: var(--entry-content-link-hover-color);
}

.month .footer,
#primary .manage-link {
  padding-top: 1em;
  text-align: center;
}

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

.month .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;
  border-collapse: collapse;
}

table.month td,
table.month th {
  border: 1px solid var(--entry-content-border-color);
  padding: 1em 0;
}

table.month th {
  text-transform: uppercase;
  font-weight: normal;
}

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

td.day-has-entries .label,
table p {
  display: inline;
}

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

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

.month dl {
  margin: 0;
}

.month dl dt {
  text-align: center;
  padding: 0.5em 0;
  text-transform: uppercase;
}

.month dl dt:first-child {
  padding-top: 0;
}

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

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

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

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

.month dd br {
  display: block;
}

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

.tags-container .contents {
  padding: 1em;
  border: 1px solid var(--entry-content-border-color);
}

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

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

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

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

.page-icons .bottompages {
  text-align: center;
  padding-top: 1em;
}

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

.icon {
  margin-top: 1em;
  overflow: hidden;
  background: var(--entry-content-background-color);
  border: 1px solid var(--entry-content-border-color);
  color: var(--entry-content-text-color);
  padding: 1em;
}

.icon a {
  color: var(--entry-content-link-color);
}

.icon a:hover {
  color: var(--entry-content-link-hover-color);
}

.icon-image {
  float: left;
  margin-right: 1em;
}

.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 {
  background: var(--entry-background-color);
  text-align: center;
  margin: 20px 0;
}

@media (min-width: 1024px) {
  .navigation {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 2;
    margin: 0;
  }
}

.navigation .inner {
  padding: 1em;
  line-height: 1;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

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

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

.noentries {
  display: none;
}

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

#secondary {
  background: var(--entry-background-color);
  margin: 20px 0;
}

@media (min-width: 1024px) {
  #secondary {
    position: fixed;
    top: 0;
    left: calc(-1 * var(--sidebar-width));
    padding-right: 3em;
    width: var(--sidebar-width);
    height: 100%;
    z-index: 9;
    transition: left 0.5s linear 0.5s;
    margin: 0;
  }

#secondary:hover {
    left: 0;
  }

#secondary:before {
    content: "MENU";
    position: absolute;
    top: 50%;
    right: 1em;
    transform: rotate(-90deg) translate(50%, -100%);
    transform-origin: 100% 0;
    line-height: 1;
    cursor: pointer;
    color: var(--link-color);
    transition: color 0.5s ease;
  }

#secondary:hover:before {
    color: var(--link-hover-color);
  }

#secondary > .inner:first-child {
    padding: 30px;
    height: 100%;
    box-sizing: border-box;
    position: relative;
  }

#secondary .module-wrapper {
    height: 100%;
    overflow: auto;
  }

.module-section-one:before {
    content: "";
    display: block;
    position: absolute;
    top: 30px;
    left: 10px;
    height: 1px;
    width: 90px;
    background: var(--entry-border-color);
    transition: width 0.5s linear;
  }

.module-section-one:after {
    content: "";
    display: block;
    position: absolute;
    left: 30px;
    top: 10px;
    width: 1px;
    height: 90px;
    background: var(--entry-border-color);
    transition: height 0.5s linear;
  }

.module-section-one .inner:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 30px;
    right: 10px;
    height: 1px;
    width: 90px;
    background: var(--entry-border-color);
    transition: width 0.5s linear;
  }

.module-section-one .inner:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 10px;
    right: 30px;
    width: 1px;
    height: 90px;
    background: var(--entry-border-color);
    transition: height 0.5s linear;
  }
}

.module-section-one {
  padding: 0.5em 1em;
}

.module {
  padding: 0.5em 0;
}

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

.module-content li {
  margin: 0;
  line-height: 1;
}

.module-content li a {
  display: block;
  padding: 0.5em 0.75em;
  border-bottom: 1px solid var(--entry-content-border-color);
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  text-transform: uppercase;
}

.module-content li a:hover {
  color: var(--entry-content-link-color);
  background: var(--entry-content-background-color);
  border-left: 1px solid var(--entry-content-border-color);
  border-right: 1px solid var(--entry-content-border-color);
}

.module h2,
.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;
}

.module-navlinks ul,
.module-typelist ul {
  border-top: 1px solid var(--entry-content-border-color);
}

.module-typelist h2 {
  display: block;
  font-size: 1em;
  margin: 0;
  padding: 0 0 1em;
  line-height: 1;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center;
}

.module-customtext .module-content {
  background: var(--entry-content-background-color);
  border: 1px solid var(--entry-content-border-color);
  padding: 1em;
  color: var(--entry-content-text-color);
}

.module-customtext .module-content a {
  color: var(--entry-content-link-color);
}

.module-customtext .module-content a:hover {
  color: var(--entry-content-link-hover-color);
}

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

#footer {
  background: var(--entry-background-color);
  padding: 1em;
  text-align: center;
  line-height: 1;
}

@media (min-width: 1024px) {
  #footer {
    position: fixed;
    width: 1em;
    height: 100%;
    top: 0;
    right: 0;
    padding: 0 1em;
  }

#footer .inner {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%) rotate(90deg);
    white-space: nowrap;
  }
}

.page-top {
  text-transform: uppercase;
}

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

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

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

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

div.ContextualPopup .Relation {
  font-family: var(--title-font);
  text-transform: uppercase;
  margin-bottom: 1em;
  font-size: 1em;
}

div.ContextualPopup .Actions ul {
  padding: 0;
  margin: 0;
}

div.ContextualPopup .Userpic {
  border: 0;
}

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

#lj_controlstrip {
  color: var(--text-color);
  background: var(--entry-background-color);
  justify-content: center;
  padding: 0.75em 0;
  width: auto;
  z-index: 9;
}

@media (min-width: 1024px) {
  #lj_controlstrip {
    padding: 0.75em 3em;
  }
}

#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 .ljuser b {
  font-weight: normal;
}

#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: 0;
  font-size: var(--text-size) !important;
  font-family: var(--main-font) !important;
}

#lj_controlstrip input[type="submit"] {
  background: var(--entry-content-background-color);
  border: 1px solid var(--entry-content-border-color);
  text-transform: uppercase;
  color: var(--entry-content-text-color);
  padding: 0.25em;
}

#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)". Paste the following https://fonts.googleapis.com/css2?family=Open+Sans&family=Playfair+Display:ital,wght@1,700&display=swap into the "Custom stylesheet URL" field.
Click on the "Presentation" tab. In the "Additional options" section select "text-only" for "Select whether entry management links are printed as text or using the available icons" and "Select whether comment management links are printed as text or using the available icons". For "Indentation for nested comment threads" select "Responsive" (optional).

Resource: sample image from Picjumbo.com

Flat | Top-Level Comments Only

THIS IS SO LOVELY...GOSH.

Thank you sweetie ^_^

every time I remember you make layouts, it's like a gift. they're so beautiful.

Thank you very much :)

Gods your layout is so gorgeous! I'm nabbing this for a few journals

Thank you!! ^_^

This is absolutely gorgeous. I am prettying up my journal with it, with credit of course. :)

Thank you very much! :)

I love this layout and was hoping to use it for this journal for rp purposes. I'm using it! And I love it but I did have a question — I'm not sure why but can you tell me what happened that it's doing this with the bottom of the entries? Here. Sorry to bother! I imagine you're busy. Thanks though, if you can shed some light. :)

Hi! I'm glad you like it :)

It appears that the default stylesheet is missing. Please go to the Customize your theme page - Custom CSS tab and check the "Use layout's stylesheet(s)" checkbox.

good grief, i feel so dumb. thank you for the help :)

I love this theme! It's so gorgeous!!!

Thank you!

Gotta say this is still one of my fave layouts ever. Question, though! Since DW implemented a navigation bar hotfix, the journal userpic tends to hang way off to the left- it's almost completely behind the sidebar. Is there any way this can be fixed?

I'm so glad I found your community, you have such pretty layouts! ♥. I'm using this one right now!

I was wondering if you could guide me through a little change I want to perform? The comments section isn't scaling the replies and it's all aligned, I don't know if I'm explaining myself correctly :P like this: https://i.imgur.com/h9HDHeQ.png

Do you know which part of the code I should touch to move replies a little bit? Thank you! ♥

Thank you!

Go to https://www.dreamwidth.org/customize/options?group=presentation and select "Static" for "Indentation for nested comment threads".

Thank you so much! ♥

You're welcome!

Hi! Beautiful layout! I think how I can remove the title text in header?

Thank you!
Add this somewhere in the code:

This is wonderful, thank you for sharing!

Light

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

no subject

no subject

no subject

no subject

no subject

no subject

no subject