myrtillenne

header image (800x300px)
navigation links, links list, custom text
comment pages
icon pages

Code:

/*-------------------------------------
 
- layout - parallel (tabula rasa) - https://myrtillenne.dreamwidth.org
- images - https://unsplash.com
 
-------------------------------------*/

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

:root {
  --text-size: 16px;
  --text-color: #222;
  --line-height: 1.5;
  --background-color: #eee;
  --background-image: url(https://rosecarmine.dreamwidth.org/file/108026.jpg);
  --link-color: #b84398;
  --link-hover-color: #733888;
  --main-font: Space Grotesk, sans-serif;
  --title-font: Nova Cut, sans-serif;
  --content-width: 800px;
  --header-background-color: #c58bb7;
  --header-image: url(https://rosecarmine.dreamwidth.org/file/107548.jpg);
  --header-image-height: 300px;
  --header-text-color: #222;
  --header-link-color: #eee;
  --header-link-hover-color: #222;
  --header-border-color: #222;
  --entry-background-color: #f9f9f9;
  --entry-border-color: #dab6d1;
  --sidebar-border-color: #222;
  --sidebar-link-color: #dab6d1;
  --sidebar-link-background-color: #222;
  --sidebar-link-border-color: #c58bb7;
  --sidebar-heading-color: #222;
  --sidebar-heading-background-color: #c58bb7;
  --sidebar-heading-border-color: #222;
  --customtext-height: 6em;
  --blockquote-background-color: #eee;
  --blockquote-text-color: #222;
  --blockquote-link-color: #b84398;
  --blockquote-link-hover-color: #733888;
  --popup-text-color: #eee;
  --popup-link-color: #dab6d1;
  --popup-link-hover-color: #eee;
  --popup-background-color: #222;
  --popup-border-color: #c58bb7;
}

/*--------------- 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);
  color: var(--text-color);
  line-height: var(--line-height);
  background-color: var(--background-color);
  background-image: var(--background-image);
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}

html,
body {
  height: 100%;
}

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 {
  color: var(--blockquote-text-color);
  background: var(--blockquote-background-color);
  margin: 1em 0;
  padding: 1em;
  border-top: 2px solid var(--entry-border-color);
}

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

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

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

#canvas {
  padding: 20px 0;
  background: var(--background-color);
}

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

@media (min-width: 1024px) {
  #canvas {
    min-height: 100%;
    margin: 0 15%;
    border-left: 5px solid var(--sidebar-border-color);
    border-right: 5px solid var(--sidebar-border-color);
    box-sizing: border-box;
  }

#canvas > .inner:first-child {
    padding: 0 50px;
  }

#content > .inner:first-child {
    display: flex;
    flex-direction: column;
  }

#secondary {
    order: -1;
  }
}

#primary > .inner:first-child {
  margin: 50px 0;
}

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

#header {
  color: var(--header-text-color);
  margin-top: 50px;
}

#header > .inner {
  background: var(--header-background-color);
  text-align: center;
  padding: 2em;
  border-top: 3px solid var(--header-border-color);
}

@media (min-width: 1024px) {
  #header {
    padding-top: var(--header-image-height);
    background-image: var(--header-image);
    background-repeat: no-repeat;
    background-position: top center;
  }

#header > .inner {
    padding-bottom: 0;
  }
}

h1#title {
  font-family: var(--title-font);
  font-size: 2em;
  font-weight: normal;
  line-height: 1;
  padding: 0;
  margin: 0;
}

h1#title a {
  color: inherit;
}

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

h2#pagetitle {
  display: none;
}

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

.entry,
.full .comment {
  margin: 50px 0;
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
  border-top: 0;
}

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

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

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

.entry .entry-title {
  text-align: center;
  font-family: var(--title-font);
  font-size: 1.5em;
  line-height: 1;
  font-weight: normal;
}

.entry .datetime {
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .has-userpic .entry .header {
    padding-bottom: 0;
  }

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

.has-userpic .entry .header .datetime {
    float: left;
    display: flex;
    width: calc(50% - 43px);
    min-height: 42px;
    align-items: center;
    flex-wrap: wrap;
    text-transform: uppercase;
  }

.entry .date {
    margin-right: 0.25em;
  }

.has-userpic .restrictions,
  .has-userpic .access-filter {
    float: right;
    display: flex;
    min-height: 42px;
    align-items: center;
    padding-left: 0.25em;
    flex-wrap: wrap;
  }
}

.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 .contents,
.comment .contents {
  padding: 0 2em;
  position: relative;
}

.has-userpic .userpic {
  float: right;
  margin-left: 1em;
}

.has-userpic .entry .userpic {
  margin-top: 2em;
}

.userpic img {
  border: 3px solid var(--header-border-color);
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
}

@media (min-width: 1024px) {
  .has-userpic .entry .userpic {
    width: 86px;
    height: 86px;
    position: absolute;
    top: -45px;
    left: 50%;
    margin-left: -43px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.userpic img {
    max-width: 80px;
    max-height: 80px;
    width: auto;
    height: auto;
    display: block;
  }
}

.entry .poster {
  display: block;
  margin-top: 2em;
  float: left;
}

.poster.empty {
  display: none;
}

.poster .ljuser img {
  display: none;
}

@media (min-width: 1024px) {
  .entry .poster {
    font-size: 0;
    float: none;
  }

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

.entry .poster .ljuser:nth-child(1) {
    float: left;
  }

.has-userpic .entry .poster .ljuser {
    display: flex;
    width: calc(50% - 43px);
    min-height: 41px;
    align-items: center;
  }

.entry .poster .ljuser:nth-child(2) {
    float: right;
  }

.has-userpic .entry .poster .ljuser:nth-child(2) {
    justify-content: flex-end;
  }

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

.has-userpic .poster.empty {
    height: 41px;
    display: block;
  }
}

.entry-content {
  padding-top: 2em;
  margin-bottom: 2em;
  clear: left;
}

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

@media (min-width: 1024px) {
  .entry-content {
    clear: both;
  }
}

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

.entry-content ul,
.comment-content ul {
  list-style-type: square;
}

.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;
  list-style: none;
}

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

.entry .footer,
.comment .footer {
  padding: 0 2em 2em;
  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 {
  margin: 0;
  padding: 0;
  display: inline;
  text-transform: uppercase;
}

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

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

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

.comment-pages {
  text-align: center;
  margin: 20px 0;
  background: var(--header-background-color);
  border-top: 2px solid var(--header-border-color);
  padding: 1em 2em;
  font-family: var(--title-font);
  line-height: 1;
}

.comment-pages a {
  color: var(--header-link-color);
}

.comment-pages a:hover {
  color: var(--header-link-hover-color);
}

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

.partial .comment {
  margin-top: 20px;
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
  padding: 2em;
}

.comment .header .inner {
  display: flex;
  flex-direction: column;
}

.thread-depth {
  display: block;
}

.full .thread-depth {
  padding-left: 2em;
}

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

.full .comment-title {
  text-align: center;
  border-bottom: 2px solid var(--header-border-color);
  padding: 1em 20px;
  background: var(--header-background-color);
  margin: 0 -1px 2em;
  font-family: var(--title-font);
  font-size: 1.25em;
  line-height: 1;
  font-weight: normal;
  order: -1;
}

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

.no-subject .comment .comment-title {
  border-bottom: 2px solid var(--header-border-color);
  background: var(--header-background-color);
  margin: 0 -1px 2em;
  padding: 5px;
}

.comment .header .datetime {
  display: block;
  padding-left: 2em;
}

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

.comment-content {
  padding: 2em 0;
}

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

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

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

.bottomcomment {
  padding: 0 2em;
  background: var(--header-background-color);
  color: var(--header-text-color);
}

.bottomcomment select,
.bottomcomment input {
  margin: 1em 0;
}

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

#qrform {
  margin-top: 1.5em;
}

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

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

#postform {
  padding: 2em;
  margin: 20px 0;
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
}

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

.month-wrapper,
.tags-container,
.icons-container {
  background: var(--entry-background-color);
  margin: 50px 0;
  border: 1px solid var(--entry-border-color);
}

.month-wrapper .header,
.tags-container .header,
.icons-container .header {
  text-align: center;
  border-bottom: 2px solid var(--header-border-color);
  padding: 1em 2em;
  background: var(--header-background-color);
  margin: 0 -1px;
  color: var(--header-text-color);
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-family: var(--title-font);
  font-size: 1.25em;
  line-height: 1;
  font-weight: normal;
}

.month .footer,
#primary .manage-link {
  padding: 1em 2em;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}

#primary .manage-link {
  border-top: 1px solid var(--entry-border-color);
}

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

.day-date {
  display: none;
}

.month caption {
  display: none;
}

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

table.month {
  width: 100%;
}

table.month tr {
  border: 1px solid var(--entry-border-color);
  border-right: none;
  border-left: none;
}

table.month tr:first-child,
table.month tr:last-child {
  border-top: 0;
}

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

table.month td,
table.month th {
  padding: 1em 0.5em;
  border: 0;
  height: auto;
}

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

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

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

dl {
  margin: 30px 0;
}

.month dl dt {
  text-align: center;
  border-bottom: 2px solid var(--header-border-color);
  padding: 1em;
  font-weight: normal;
  background: var(--header-background-color);
  font-family: var(--title-font);
  font-size: 1.25em;
  line-height: 1;
}

dt a,
dt a:hover {
  color: var(--header-text-color);
}

dd {
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
  border-top: 0;
  margin: 0;
  padding: 2em;
  margin-bottom: 30px;
}

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

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

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

dd br {
  display: block;
}

.navigation ul {
  margin: 30px 0;
  text-align: center;
}

.page-archive .navigation li {
  display: inline-block;
  margin: 0.25em;
  padding: 0;
}

.page-archive .navigation li.active {
  color: var(--sidebar-heading-color);
  background: var(--sidebar-heading-background-color);
  border-top: 2px solid var(--sidebar-heading-border-color);
  padding: 0.25em 1em;
}

.page-archive .navigation li a {
  display: block;
  color: var(--sidebar-link-color);
  background: var(--sidebar-link-background-color);
  border-top: 2px solid var(--sidebar-link-border-color);
  padding: 0.25em 1em;
}

.page-archive .navigation li a:hover {
  color: var(--sidebar-heading-color);
  background: var(--sidebar-heading-background-color);
  border-top: 2px solid var(--sidebar-heading-border-color);
}

.page-month .navigation ul {
  background: var(--header-background-color);
  border-top: 2px solid var(--header-border-color);
  padding: 1em 2em;
}

.page-month .navigation li a {
  color: var(--header-link-color);
}

#archive-month .navigation li {
  display: inline;
}

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

.tags-container .contents {
  padding: 2em;
}

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;
  padding: 1em 20px;
  text-transform: uppercase;
  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;
}

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

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

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

.icon-image {
  float: right;
}

.icon img {
  display: block;
  border-left: 1px solid var(--entry-border-color);
  padding: 0.5em;
}

.icon-info {
  padding: 2em;
}

.default.label {
  font-weight: bold;
}

.icon-pages p {
  margin: 0;
}

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

.module {
  margin-top: 10px;
}

@media (min-width: 1024px) {
  .module-section-one {
    background: var(--header-background-color);
    padding: 1px 2em 2em;
  }

.module {
    margin: 0;
  }
}

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

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

.module h2 {
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
  color: var(--sidebar-heading-color);
  background: var(--sidebar-heading-background-color);
  padding: 0.25em 0.5em;
  text-align: center;
  border-bottom: 1px solid var(--sidebar-heading-border-color);
  font-family: var(--title-font);
}

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

.module-content li {
  margin: 0;
}

.module li a {
  color: var(--sidebar-link-color);
}

.module li a:hover {
  color: var(--sidebar-heading-color);
}

.module-content li a {
  display: block;
  margin: 3px 0;
  padding: 0.25em 0.5em;
  background: var(--sidebar-link-background-color);
  border-bottom: 1px solid var(--sidebar-link-border-color);
}

.module-content li a:hover {
  background: var(--sidebar-heading-background-color);
  border-bottom: 1px solid var(--sidebar-heading-border-color);
  color: var(--sidebar-heading-color);
}

@media (min-width: 1024px) {
  .module-navlinks {
    position: fixed;
    top: 70px;
    left: 0;
    width: 15%;
  }

.module-navlinks .module-content {
    padding: 0 20px;
  }

.module-navlinks .module-list {
    max-width: 200px;
    margin: 0 auto;
  }

.module-navlinks .module-list:before {
    content: "Navigation";
    display: block;
    font-size: 1em;
    font-weight: normal;
    text-transform: uppercase;
    color: var(--sidebar-heading-color);
    background: var(--sidebar-heading-background-color);
    padding: 0.25em 0.5em;
    text-align: center;
    border-bottom: 1px solid var(--sidebar-heading-border-color);
    font-family: var(--title-font);
  }
}

.module-section-two {
  margin: 10px 0;
}

@media (min-width: 1024px) {
  .module-section-two {
    position: fixed;
    top: 70px;
    right: 0;
    width: 15%;
    margin: 0;
  }

.module-section-two .inner {
    padding: 0 20px;
    text-align: center;
  }

.module-typelist {
    max-width: 200px;
    margin: 0 auto;
  }
}

.module-customtext {
  color: var(--header-text-color);
  background: var(--header-background-color);
  padding: 2em;
  max-height: var(--customtext-height);
  overflow: auto;
}

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

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

@media (min-width: 1024px) {
  .module-customtext {
    margin-top: 1em;
    padding: 0;
  }
}

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

.module-customtext::-webkit-scrollbar-track {
  background: var(--header-background-color);
}

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

.module-customtext::-webkit-scrollbar-corner {
  background: var(--header-background-color);
}

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

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

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

#entries .navigation li {
  margin: 0;
  padding: 0;
  display: block;
}

#entries .navigation li a {
  display: block;
  padding: 0.25em 0.5em;
  background: var(--sidebar-heading-background-color);
  text-align: center;
  text-transform: uppercase;
  border-top: 1px solid var(--sidebar-heading-border-color);
  color: var(--sidebar-heading-color);
  font-family: var(--title-font);
}

#entries .navigation li a:hover {
  background: var(--sidebar-link-background-color);
  border-top: 1px solid var(--sidebar-link-border-color);
  color: var(--sidebar-link-color);
}

#entries .navigation li:last-child {
  margin-top: 3px;
}

@media (min-width: 1024px) {
  #entries .navigation ul {
    position: fixed;
    width: 15%;
    bottom: 20px;
    left: 0;
    margin: 0;
    padding: 0;
  }

#entries .navigation li {
    padding: 0 20px;
  }

#entries .navigation li a {
    max-width: 200px;
    margin: 0 auto;
  }
}

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

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

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

.page-top a {
  display: block;
  padding: 0.25em 0.5em;
  background: var(--sidebar-heading-background-color);
  text-align: center;
  text-transform: uppercase;
  border-top: 1px solid var(--sidebar-heading-border-color);
  font-family: var(--title-font);
  color: var(--sidebar-heading-color);
}

.page-top a:hover {
  background: var(--sidebar-link-background-color);
  border-top: 1px solid var(--sidebar-link-border-color);
  color: var(--sidebar-link-color);
}

@media (min-width: 1024px) {
  #footer {
    position: fixed;
    width: 15%;
    bottom: 20px;
    right: 0;
    margin: 0;
  }

.page-top {
    max-width: 200px;
    margin: 0 auto;
  }

.page-top a {
    margin: 0 20px;
  }
}

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

div.ContextualPopup {
  background: var(--popup-background-color);
  border: 0;
  border-top: 3px solid var(--popup-border-color);
  border-radius: 0;
  padding: 2em;
  font-family: inherit;
  color: var(--popup-text-color);
}

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

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

div.ContextualPopup .Userpic {
  border: none;
}

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

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

#lj_controlstrip {
  color: var(--popup-text-color);
  background: var(--popup-background-color);
  justify-content: center;
  padding: 0.75em 0;
  border-bottom: 3px solid var(--popup-border-color);
}

@media (min-width: 1024px) {
  #lj_controlstrip {
    transform: translateY(-100%);
    position: absolute;
    transition: transform 0.5s;
    z-index: 9;
  }

#lj_controlstrip:before {
    content: "";
    position: absolute;
    bottom: -27px;
    height: 15px;
    width: 3px;
    background: var(--sidebar-border-color);
    transform: rotate(-45deg);
    left: 50%;
    margin-left: -6px;
  }

#lj_controlstrip:after {
    content: "";
    position: absolute;
    bottom: -27px;
    height: 15px;
    width: 3px;
    background: var(--sidebar-border-color);
    transform: rotate(45deg);
    right: 50%;
    margin-right: -6px;
  }

#lj_controlstrip_statustext:after {
    content: "";
    position: absolute;
    bottom: -37px;
    height: 35px;
    width: 40px;
    margin-left: -20px;
    left: 50%;
    cursor: pointer;
  }

#lj_controlstrip:hover {
    transform: translateY(0);
  }
}

#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(--popup-link-color);
}

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

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

#lj_controlstrip_actionlinks {
  text-align: center;
}

#lj_controlstrip_statustext {
  color: var(--popup-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(--sidebar-heading-background-color);
  text-transform: uppercase;
  color: var(--sidebar-heading-color);
  font-family: var(--title-font) !important;
  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.
Choose the "1 Column (modules at 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)".
On the same page, copy and paste the following "https://fonts.googleapis.com/css2?family=Space+Grotesk&display&family=Nova+Cut&display=swap" into the "Custom stylesheet URL" field.
Click on the "Modules" tab and place the "Link list" module in the "Secondary Module Section". Enable "Custom text" if you want to display it.
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).

Resources: images from unsplash.com

Journal layouts

Parallel

Parallel

no subject

no subject

Welcome!

Terms of use

Layouts

Links

Resources