myrtillenne | Velvet journal (Reply)

header image (800x250px)
default icon, navigation links, links list, tags list, custom text
comment pages
icon pages

Code:

/*-------------------------------------
 
- layout - velvet journal (basic boxes) - https://myrtillenne.dreamwidth.org
- images - subtlepatterns.com, unsplash.com
 
-------------------------------------*/

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

:root {
  --text-size: 16px;
  --text-color: #5a1f31;
  --line-height: 1.5;
  --header-image: url("https://rosecarmine.dreamwidth.org/file/118455.jpg");
  --header-image-width: 800px;
  --header-image-height: 250px;
  --background-color: #be657b;
  --background-image: url("https://rosecarmine.dreamwidth.org/file/119493.jpg");
  --link-color: #c81e59;
  --link-hover-color: #7b2741;
  --main-font: Lora, serif;
  --title-font: Lora, serif;
  --title-color: #5a1f31;
  --title-shadow: #fff;
  --entry-background-color: #7b2741;
  --entry-background-image: url("https://rosecarmine.dreamwidth.org/file/119791.jpg");
  --entry-content-background-color: #fbeadd;
  --entry-content-border-color: #be4166;
  --username-color: #e970a9;
  --navigation-color: #e078ae;
  --navigation-background-color: #842b47;
  --navigation-border-color: #be4166;
}

/*--------------- 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);
  padding: 0;
  margin: 0;
  line-height: var(--line-height);
  color: var(--text-color);
  background-image: var(--background-image);
  background-color: var(--background-color);
}

html body {
  margin-left: 0;
  margin-right: 0;
}

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 {
  border: 1px dashed var(--entry-content-border-color);
  padding: 1em;
  font-style: italic;
  margin: 1em 0;
  border-radius: 4px;
  font-style: italic;
}

#canvas {
  margin: 0 auto;
}

@media (min-width: 800px) {
  #canvas {
    margin: 0 auto;
    max-width: calc(var(--header-image-width) + 182px);
  }
}

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

#header {
  background-image: var(--entry-background-image);
  background-color: var(--entry-background-color);
  background-position: center center;
  margin: 30px 0;
  padding: 10px;
  border-left: 2px solid rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  box-shadow: 0 0 2px #000;
}

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

@media (min-width: 800px) {
  #header > .inner:first-child {
    display: flex;
    align-items: center;
  }

.module-section-header {
    width: 160px;
  }

.module-navlinks {
    width: 150px;
  }

.module-navlinks ul {
    display: flex;
    flex-direction: column;
  }
}

.module-navlinks li {
  margin: 3px 0;
  text-transform: uppercase;
  border: 1px dashed var(--navigation-border-color);
  background: var(--navigation-background-color);
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 2px #000;
  line-height: 1;
  padding: 0.25em;
}

.module-navlinks li a {
  color: var(--navigation-color);
}

#journaltitles-container {
  background-color: var(--entry-content-background-color);
  box-shadow: 0 0 2px #000;
  padding: 1em;
  margin-top: 10px;
  font-style: italic;
}

h1#title {
  font-size: 1.5em;
  font-family: var(--title-font);
  padding: 0;
  margin: 0;
}

h1#title a {
  color: inherit;
}

h2#subtitle {
  font-size: 1.2em;
  padding: 0;
  margin: 0;
  font-style: italic;
  font-weight: normal;
  font-family: var(--title-font);
}

@media (min-width: 800px) {
  #journaltitles-container {
    background-image: var(--header-image);
    height: var(--header-image-height);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    margin: 0;
  }

h1#title {
    color: var(--title-color);
    text-shadow: -1px 1px 5px var(--title-shadow);
  }

h1#title a {
    color: inherit;
  }

h2#subtitle {
    text-shadow: -3px 1px 3px var(--title-shadow);
    color: var(--title-color);
  }
}

h2#pagetitle {
  display: none;
}

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

.entry,
.full .comment {
  background-color: var(--entry-background-color);
  background-image: var(--entry-background-image);
  padding: 10px;
  border-left: 2px solid rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  margin: 30px 0;
  box-shadow: 0 0 2px #000;
}

.entry > .inner:first-child,
.full .comment > .inner:first-child {
  background: var(--entry-content-background-color);
  box-shadow: 0 0 2px #000;
}

.entry .header {
  text-align: right;
}

@media (min-width: 800px) {
  .entry,
  .full .comment {
    padding-left: 170px;
  }

.entry .header,
  .comment .header {
    float: right;
    width: 100%;
  }
}

.entry .header .inner {
  padding: 2em 2em 0;
}

.entry .entry-title {
  font-family: var(--title-font);
  font-size: 1.2em;
  line-height: 1.2;
  text-align: center;
  border-bottom: 1px dashed var(--entry-content-border-color);
  margin: 0 0 0.5em;
  padding: 0 0 0.5em;
  font-style: italic;
  color: var(--link-color);
}

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

.no-subject .entry .entry-title {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

.entry .entry-title .ljuser img {
  display: none;
}

.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 {
  margin: 2em 2em 0;
}

@media (min-width: 800px) {
  .entry .contents,
  .comment .contents {
    margin: 0;
  }
}

.entry .userpic,
.comment .userpic {
  float: left;
  margin-right: 1em;
}

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

.entry .userpic img,
.comment .userpic img {
  padding: 5px;
  border: 1px dashed var(--navigation-border-color);
  background: var(--navigation-background-color);
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

@media (min-width: 800px) {
  .entry .userpic,
  .comment .userpic {
    clear: left;
    width: 150px;
    margin: 20px 0 0 -160px;
    text-align: center;
  }

.entry .userpic img,
  .comment .userpic img {
    max-width: 100px;
    max-height: 100px;
    padding: 10px;
  }
}

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

.entry .poster:before {
  content: "";
  font-size: var(--text-size);
  display: block;
  margin-top: 0.5em;
}

.entry .poster .ljuser {
  font-size: var(--text-size);
  margin-right: 0.25em;
}

.poster .ljuser img {
  display: none;
}

.poster .ljuser {
  white-space: normal !important;
}

.poster {
  word-wrap: break-word;
}

@media (min-width: 800px) {
  .entry .poster,
  .full .comment .poster {
    float: left;
    clear: left;
    width: 150px;
    margin-left: -160px;
    text-align: center;
  }

.entry .poster .ljuser {
    display: block;
    margin-right: 0;
  }

.entry .poster a,
  .full .comment .poster a,
  .poster .anonymous {
    color: var(--username-color);
  }
}

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

@media (min-width: 800px) {
  .entry-content {
    padding: 2em;
    margin: 0;
    clear: right;
    text-align: justify;
  }
}

.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 {
  font-style: italic;
}

@media (min-width: 800px) {
  .metadata {
    margin: 0 2em;
  }
}

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

.entry .footer,
.comment .footer {
  padding-bottom: 20px;
}

@media (min-width: 800px) {
  .entry .footer,
  .comment .footer {
    margin-left: -170px;
    padding-left: 170px;
    clear: both;
    width: 100%;
  }
}

.entry .tag {
  margin: 0 2em;
}

.entry div.tag {
  font-style: italic;
}

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

.tag ul li {
  display: inline;
}

ul.entry-management-links,
ul.entry-interaction-links,
ul.comment-management-links,
ul.comment-interaction-links {
  margin: 5px 20px 0 20px;
  padding: 0;
  clear: both;
}

ul.entry-management-links {
  margin-top: 2em;
}

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

ul.entry-management-links li,
ul.entry-interaction-links li,
ul.comment-management-links li,
ul.comment-interaction-links li {
  display: inline-block;
  padding: 0.25em 0.5em;
  text-align: center;
  border: 1px dashed var(--entry-content-border-color);
  text-transform: uppercase;
  border-radius: 3px;
  line-height: 1;
}

@media (min-width: 800px) {
  ul.entry-management-links li:first-child,
  ul.entry-interaction-links li:first-child,
  ul.comment-management-links li:first-child,
  ul.comment-interaction-links li:first-child {
    border: 1px dashed var(--navigation-border-color);
    background: var(--navigation-background-color);
    width: 150px;
    margin: 0 25px 0 -180px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 2px #000;
    box-sizing: border-box;
  }

ul.entry-management-links li:first-child a,
  ul.entry-interaction-links li:first-child a,
  ul.comment-management-links li:first-child a,
  ul.comment-interaction-links li:first-child a {
    color: var(--navigation-color);
  }
}

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

.comment-pages {
  display: inline-block;
  background: var(--entry-content-background-color);
  border-top: 2px dotted var(--background-color);
  border-bottom: 2px dotted var(--background-color);
  padding: 1em;
  margin-left: 50px;
  text-align: center;
}

.comment-posted {
  font-weight: bold;
}

.comment {
  min-width: 15em;
  clear: both;
}

.comment .comment-title {
  margin: 0;
  font-style: italic;
}

.no-subject .comment .comment-title {
  background: none;
  border: none;
}

.comment .header .inner {
  border-bottom: 1px dashed var(--entry-content-border-color);
  margin: 0 2em;
  padding: 2em 0 0.5em;
  text-align: right;
}

.thread-depth {
  display: inline-block;
  padding: 0.25em 0.5em;
  border: 1px dashed var(--entry-content-border-color);
  text-transform: uppercase;
  border-radius: 3px;
  line-height: 1;
}

.full .thread-depth {
  float: left;
}

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

.full .poster {
  margin: 0.5em 0;
  font-style: italic;
  font-weight: bold;
}

.poster-ip {
  display: block;
}

@media (min-width: 800px) {
  .comment-content {
    padding: 2em;
    margin: 0;
    clear: right;
  }

.poster-ip {
    padding: 0.5em 2em 0;
    text-align: right;
    clear: right;
  }
}

.comment-date-text,
.comment-from-text,
.comment-ip-text {
  display: none;
}

.multiform-checkbox {
  padding: 0 2em;
}

.comment-pages.bottompages {
  display: none;
}

.partial .comment {
  background: var(--entry-content-background-color);
  border-top: 2px dotted var(--background-color);
  border-bottom: 2px dotted var(--background-color);
  padding: 1em;
  margin: 10px 0;
}

.bottomcomment {
  text-align: center;
}

.bottomcomment label,
.bottomcomment select,
.bottomcomment input {
  background: var(--entry-content-background-color);
  border: 0;
  border-top: 2px dotted var(--background-color);
  border-bottom: 2px dotted var(--background-color);
  font-size: var(--text-size);
  color: var(--text-color);
  font-family: var(--main-font);
  padding: 0.25em 0.5em;
  margin-right: 5px;
}

#comments ul.entry-interaction-links {
  display: none;
}

#comments ul.entry-management-links {
  display: none;
}

#qrformdiv {
  padding: 0;
  max-width: 100%;
}

#qrform {
  padding: 2em;
}

#qrdiv input,
#qrdiv select,
#qrdiv textarea {
  background: transparent;
  border: 1px dashed var(--entry-content-border-color);
  border-radius: 3px;
  color: var(--text-color);
  font-size: var(--text-size);
}

#qrdiv input[type="button"],
#qrdiv input[type="submit"] {
  background: transparent;
  border: 1px dashed var(--entry-content-border-color);
  font-size: 1em;
  padding: 0.25em 0.5em;
  color: var(--text-color);
  line-height: 1;
  font-family: var(--main-font);
  text-transform: uppercase;
}

#postform {
  background: var(--entry-content-background-color);
  border-top: 2px dotted var(--background-color);
  border-bottom: 2px dotted var(--background-color);
  padding: 1em;
}

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

.month-wrapper,
.page-month .month,
.tags-container,
.icons-container {
  background-color: var(--entry-background-color);
  background-image: var(--entry-background-image);
  padding: 10px;
  border-left: 2px solid rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  margin: 30px 0;
  box-shadow: 0 0 2px #000;
}

.month > .inner:first-child,
.tags-container > .inner:first-child,
.icons-container > .inner:first-child {
  background: var(--entry-content-background-color);
  box-shadow: 0 0 2px #000;
}

.month .header,
.tags-container .header,
.icons-container .header {
  text-align: center;
  padding: 2em 2em 0;
}

@media (min-width: 800px) {
  .month-wrapper,
  .page-month .month,
  .tags-container,
  .icons-container {
    padding-left: 170px;
  }

.month .header,
  .tags-container .header,
  .icons-container .header {
    float: left;
    margin-left: -160px;
    width: 150px;
    color: var(--username-color);
    padding: 20px 0 0;
  }
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-size: 1.2em;
  margin: 0;
  padding: 0;
  font-style: italic;
}

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

#primary .manage-link,
.month-wrapper .footer {
  padding: 0 20px 20px;
  line-height: 1;
}

#primary .manage-link a,
.month-wrapper .footer a {
  padding: 0.25em 0.5em;
  border: 1px dashed var(--entry-content-border-color);
  text-transform: uppercase;
  border-radius: 3px;
  display: inline-block;
  color: var(--text-color);
}

@media (min-width: 800px) {
  #primary .manage-link,
  .month-wrapper .footer {
    width: 150px;
    margin-left: -160px;
    margin-top: -2em;
    padding: 0 0 20px;
  }

#primary .manage-link a,
  .month-wrapper .footer a {
    display: block;
    border: 1px dashed var(--navigation-border-color);
    background: var(--navigation-background-color);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 2px #000;
    text-align: center;
    text-transform: uppercase;
    border-radius: 3px;
    color: var(--navigation-color);
  }
}

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

.month caption {
  display: none;
}

.month table {
  width: 100%;
}

table.month {
  margin: 0 auto;
  border-spacing: 3px;
  text-align: center;
}

table.month td {
  width: 3.25em;
  height: 3.25em;
}

table.month td.day {
  height: 3.25em;
  border: 1px dashed var(--entry-content-border-color);
  border-radius: 3px;
}

table.month td p {
  margin: 0;
}

.month dl dt {
  font-weight: bold;
  text-align: center;
  padding-top: 2em;
  font-style: italic;
  font-size: 1.2em;
}

@media (min-width: 800px) {
  .month dl dt {
    float: left;
    margin-left: -160px;
    width: 150px;
    padding-top: 20px;
  }

.month dt,
  .month dt a {
    color: var(--username-color);
  }
}

.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 dl .tag ul {
  margin-top: 0;
}

.month dl {
  margin: 0;
}

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

.month dd:last-child {
  border: 0;
}

.month dl br {
  display: block;
}

.day-date {
  display: none;
}

#archive-month select,
#archive-month input {
  background: var(--entry-content-background-color);
  border: 1px dashed var(--entry-content-border-color);
  font-size: 1em;
  padding: 0.25em 0.5em;
  color: var(--text-color);
  line-height: 1;
  font-family: var(--main-font);
  text-transform: uppercase;
  border-radius: 3px;
}

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

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

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

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

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

.page-icons .bottompages {
  text-align: center;
  margin-top: 2em;
}

.icon {
  border: 1px dashed var(--entry-content-border-color);
  padding: 1em;
  margin-top: 1em;
  border-radius: 3px;
  display: flex;
}

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

.icon-image img {
  display: block;
}

.sorting-options ul {
  margin: 0;
  padding: 0;
}

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

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

.module-section-one {
  background-color: var(--entry-background-color);
  background-image: var(--entry-background-image);
  padding: 10px;
  border-left: 2px solid rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  margin: 30px 0;
  box-shadow: 0 0 2px #000;
  clear: both;
}

.module-section-one > .inner:first-child {
  background-color: var(--entry-content-background-color);
  box-shadow: 0 0 2px #000;
  padding: 10px 8px;
}

.module-section-one .module {
  margin-top: 0.5em;
}

@media (min-width: 800px) {
  .module-section-one {
    padding-left: 170px;
  }

.module-section-one > .inner:first-child {
    display: flex;
    flex-wrap: wrap;
  }

.module-section-one .module {
    margin: 0 2px;
    flex: 1;
  }
}

.module h2 {
  margin: 0 0 0.5em;
  padding: 0;
  font-size: 1em;
  text-align: center;
  font-style: italic;
  color: var(--link-color);
}

.module-section-one .module-content {
  padding: 1em;
  border: 1px dashed var(--entry-content-border-color);
  border-radius: 3px;
}

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

.module-content ul:first-child {
  margin: 0;
}

.module-section-one .module-userprofile {
  text-align: center;
  font-weight: bold;
  margin: 0;
  font-style: italic;
}

.module-userprofile .module-content {
  margin: 0;
  height: auto;
  overflow: visible;
  border: none;
  padding: 0;
}

.module .userpic img {
  padding: 10px;
  border: 1px dashed var(--navigation-border-color);
  background: var(--navigation-background-color);
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.journal-name {
  padding-top: 0.5em;
}

@media (min-width: 800px) {
  .module-section-one .module-content {
    height: 180px;
    overflow: auto;
  }

.module-section-one .module-userprofile {
    margin-left: -170px;
    margin-right: 20px;
    margin-top: 10px;
    min-width: 150px;
    flex: 0;
  }

.module-userprofile .module-content {
    margin: 0;
    height: auto;
    overflow: visible;
    border: none;
    padding: 0;
  }

.journal-name {
    color: var(--username-color);
  }

.journal-website-name a {
    color: var(--username-color);
  }
}

ul.userlite-interaction-links {
  display: none;
}

.tags_cloud li,
.module-tags_cloud li {
  display: inline;
}

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

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

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

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

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

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

.navigation {
  text-align: center;
  overflow: hidden;
  margin-top: -30px;
}

.navigation ul {
  float: left;
  background: var(--entry-content-background-color);
  border-bottom: 2px dotted var(--background-color);
  padding: 0.5em 2em;
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 0 0 50px 0;
  margin: 0 50px;
}

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

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

#footer {
  display: inline-block;
  background: var(--entry-content-background-color);
  border-top: 2px dotted var(--background-color);
  border-bottom: 2px dotted var(--background-color);
  padding: 0.5em 2em;
  margin: 0 0 30px 50px;
}

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

div.ContextualPopup {
  background: var(--entry-content-background-color);
  border: 0;
  font-family: var(--main-font);
  font-size: 1em;
  color: var(--text-color);
  padding: 1em;
  width: 200px;
}

div.ContextualPopup .Relation {
  font-weight: normal;
  font-size: 1em;
  text-align: center;
  margin-top: 1em;
  border-bottom: 1px dashed var(--entry-content-border-color);
  padding-bottom: 1em;
  font-style: italic;
}

div.ContextualPopup .Userpic {
  border: 0;
  float: none;
  text-align: center;
}

div.ContextualPopup .Userpic img {
  padding: 5px;
  border: 1px dashed var(--navigation-border-color);
  background: var(--navigation-background-color);
  border-radius: 3px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

.ContextualPopup .Actions ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--entry-border-color);
}

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

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

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

#lj_controlstrip {
  background-color: var(--entry-background-color);
  background-image: var(--entry-background-image);
  background-repeat: repeat;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 2px #000;
  justify-content: center;
  padding: 0.75em 0;
  color: var(--username-color);
}

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

#lj_controlstrip_actionlinks {
  text-align: center;
}

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

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 0;
  background: var(--entry-content-background-color) !important;
  font-size: var(--text-size) !important;
  color: var(--text-color) !important;
  font-family: var(--main-font) !important;
  box-shadow: 0 0 2px #000;
}

#lj_controlstrip input[type="submit"] {
  font-size: 1em;
  border: 1px dashed var(--navigation-border-color);
  background: var(--navigation-background-color) !important;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 2px #000;
  text-transform: uppercase;
  color: var(--navigation-color) !important;
  padding: 0.25em;
}

#lj_controlstrip .ljuser b {
  font-style: italic;
}

#lj_controlstrip .ljuser img {
  display: none;
}

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

#lj_controlstrip_userpic a img {
  border: 1px dashed var(--navigation-border-color);
  background: var(--navigation-background-color);
  padding: 4px;
  border-radius: 3px;
}

How to install:

Go to the "Select style" page, search for "Basic Boxes" 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)". Copy and paste the following https://fonts.googleapis.com/css2?family=Lora&family=Lora:ital@1&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".
Click on the "Text" tab; in the "Entry" section change the "Text to link to the previous entry" to "Previous" and the "Text to link to the next entry" to "Next".

Resources: images from subtlepatterns.com, unsplash.com

Velvet journal

Post a comment in response: