myrtillenne | Pendant

header image (set to "cover")
header icon (240x240px)
navigation links, links list, custom text
comment pages
icon pages

Code:

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

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

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

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

:root {
  --text-size: 16px;
  --text-color: #171b33;
  --line-height: 1.5;
  --background-color: #363a61;
  --background-image: url(https://rosecarmine.dreamwidth.org/file/104750.png);
  --link-color: #3458a2;
  --link-hover-color: #171b33;
  --main-font: Roboto, sans-serif;
  --title-font: Condiment, sans-serif;
  --subtitle-font: Fjalla One, sans-serif;
  --content-width: 700px;
  --border-color: #171b33;
  --header-background-color: #171b33;
  --header-image: url("https://rosecarmine.dreamwidth.org/file/104025.jpg");
  --header-image-height: 350px;
  --header-icon: url("https://rosecarmine.dreamwidth.org/file/103875.jpg");
  --header-text-color: #7578a2;
  --header-link-color: #9bbcf9;
  --header-link-hover-color: #7578a2;
  --entry-background-color: #d8defc;
  --entry-border-color: #363a61;
  --customtext-height: 6em;
}

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

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

img {
  border: none;
}

hr {
  display: none;
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
  background-image: var(--background-image);
  background-attachment: fixed;
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  margin: 0;
}

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

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

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

q {
  font-style: italic;
}

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

blockquote:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  bottom: -1em;
  margin-left: -1em;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-top: 1em solid var(--entry-border-color);
}

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

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

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

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

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

#canvas {
  position: relative;
}

#tertiary {
  display: none;
}

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

#header {
  text-align: center;
  color: var(--header-text-color);
}

#journaltitles-container {
  max-width: var(--content-width);
  border: 4px solid transparent;
  border-bottom: 0;
  line-height: 1;
  margin: 100px auto 0;
  padding: 2em 0 0;
  background-color: var(--header-background-color);
  background-clip: padding-box;
  position: relative;
}

#journaltitles-container:before {
  content: "";
  width: 100%;
  height: 100%;
  padding: 2px 2px 0;
  border: 2px solid var(--border-color);
  border-bottom: 0;
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: -1;
}

h1#title {
  font-size: 2em;
  font-weight: normal;
  font-family: var(--title-font);
  padding: 0.25em 2em 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

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

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

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

h2#pagetitle {
  display: none;
}

.module-section-header {
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 2px;
  position: relative;
}

.module-section-header:after {
  content: "";
  width: 2px;
  height: 100px;
  background: var(--border-color);
  position: absolute;
  left: 50%;
  bottom: -102px;
  margin: 0 auto;
  margin-left: -1px;
}

.module-section-header .inner {
  background: var(--header-background-color);
}

@media (min-width: 800px) {
  #header .separator-before {
    min-height: var(--header-image-height);
    background-image: var(--header-image);
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: flex-end;
  }

#header .separator-before .inner {
    width: 240px;
    height: 240px;
    padding: 8px;
    position: relative;
    margin: 33px auto;
  }

#header .separator-before .inner:before {
    content: "";
    width: 170px;
    height: 170px;
    transform: rotate(45deg);
    border: 8px double var(--border-color);
    background: var(--border-color);
    background-clip: padding-box;
    position: absolute;
    top: 35px;
    left: 35px;
  }

#header .separator-before .inner:after {
    content: "";
    display: block;
    width: 240px;
    height: 240px;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background-image: var(--header-icon);
  }
}

.module-navlinks {
  text-align: center;
  text-transform: uppercase;
  font-family: var(--subtitle-font);
  letter-spacing: 2px;
  line-height: 1.5;
  padding: 0.5em;
}

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

.module-section-one {
  max-width: var(--content-width);
  margin: 0 auto 100px;
  border: 2px solid var(--border-color);
  border-top: 0;
  padding: 0 2px 2px;
  position: relative;
  color: var(--header-text-color);
}

.module-section-one:after {
  content: "";
  width: 2px;
  height: 100px;
  background: var(--border-color);
  position: absolute;
  bottom: -102px;
  left: 50%;
  margin: 0 auto;
  margin-left: -1px;
}

.module-section-one .inner {
  background: var(--header-background-color);
  position: relative;
  padding: 0 2em 2em;
}

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

.module-section-one .module {
  padding-top: 1.5em;
}

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

.module-content li {
  display: inline;
  padding: 0 0.5em;
  text-transform: uppercase;
  font-family: var(--subtitle-font);
  letter-spacing: 2px;
}

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

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

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

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

.entry-wrapper {
  max-width: var(--content-width);
  margin: 100px auto;
  padding: 2px;
  position: relative;
  border: 2px solid var(--border-color);
}

.entry-wrapper .separator-after,
.page-reply .comment-wrapper .separator-after {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: rotate(45deg);
  margin-left: -14px;
  width: 20px;
  height: 20px;
  background: var(--background-color);
  border: 2px solid var(--border-color);
  padding: 2px;
}

.entry-wrapper .separator-after .inner,
.page-reply .comment-wrapper .separator-after .inner {
  width: 100%;
  height: 100%;
  background: var(--border-color);
}

.entry,
.comment {
  background: var(--entry-background-color);
  padding: 2em;
}

.entry:after,
.page-reply .comment:after {
  content: "";
  height: 100px;
  width: 2px;
  margin: 0 auto;
  background: var(--border-color);
  position: absolute;
  bottom: -104px;
  left: 50%;
  margin-left: -1px;
}

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

.entry .header {
  text-align: center;
  line-height: 1;
}

.has-userpic .entry .header {
  padding-top: 40px;
}

.entry .entry-title {
  font-size: 1.75em;
  font-family: var(--title-font);
  font-weight: normal;
  margin: 0;
  color: var(--link-color);
}

.entry .restrictions,
.entry .access-filter {
  padding-right: 0.25em;
  text-transform: uppercase;
  font-family: var(--subtitle-font);
  letter-spacing: 2px;
}

.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;
  font-family: var(--subtitle-font);
  letter-spacing: 2px;
}

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

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

.entry .time:before {
  content: "[";
}

.entry .time:after {
  content: "]";
}

.has-userpic .entry .userpic {
  position: absolute;
  left: 50%;
  margin-left: -56px;
  top: -57px;
  width: 100px;
  height: 100px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.has-userpic .entry .userpic:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: 70px;
  height: 70px;
  background: var(--background-color);
  border: 6px double var(--border-color);
  transform: rotate(45deg);
}

.entry .userpic img {
  display: block;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  margin: 0 auto;
}

.entry .poster {
  font-size: 0;
  padding-right: 0.25em;
}

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

.entry .poster .ljuser:nth-child(1) {
  margin-right: 0.25em;
}

.entry .poster .ljuser:nth-child(1):before {
  content: "Written by ";
}

.entry .poster .ljuser:nth-child(2):before {
  content: "in ";
}

.poster .ljuser img {
  display: none;
}

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

.poster.empty {
  display: none;
}

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

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

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

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

.entry-content ul,
.comment-content ul {
  padding-left: 1em;
  list-style: none;
}

.entry-content li,
.comment-content li {
  list-style-position: inside;
}

.entry-content ul li:before,
.comment-content ul li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
  transform: rotate(45deg);
  width: 4px;
  height: 4px;
  background: var(--entry-border-color);
}

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

.cuttag_container img {
  vertical-align: bottom;
}

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

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

.footer {
  text-align: center;
}

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

.metadata-label,
.entry .tag-text {
  font-style: italic;
}

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

.tag li {
  display: inline;
}

ul.entry-management-links,
ul.entry-interaction-links {
  margin: 0;
  padding: 0;
  display: inline;
  text-transform: uppercase;
  font-family: var(--subtitle-font);
  letter-spacing: 2px;
}

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

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

.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;
  font-family: var(--subtitle-font);
  letter-spacing: 2px;
  text-align: center;
}

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

#comments {
  max-width: var(--content-width);
  margin: 100px auto;
  padding: 2px;
  position: relative;
  border: 2px solid var(--border-color);
}

#comments:before {
  content: "";
  height: 100px;
  width: 2px;
  margin: 0 auto;
  background: var(--border-color);
  position: absolute;
  bottom: -104px;
  left: 50%;
  margin-left: -1px;
}

#comments > .inner:first-child:before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: rotate(45deg);
  margin-left: -14px;
  width: 20px;
  height: 20px;
  background: var(--background-color);
  border: 2px solid var(--border-color);
  padding: 2px;
}

#comments > .inner:first-child:after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: rotate(45deg);
  margin-left: -10px;
  width: 20px;
  height: 20px;
  background: var(--border-color);
}

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

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

.page-entry .comment:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  bottom: -1em;
  margin-left: -1em;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-top: 1em solid var(--entry-border-color);
}

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

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

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

.comment-title {
  font-weight: normal;
  padding: 0;
  margin: 0;
}

.full.has-subject .comment-title {
  font-size: 1.5em;
  font-family: var(--title-font);
  line-height: 1;
}

.comment .header .datetime {
  text-transform: uppercase;
  font-family: var(--subtitle-font);
  letter-spacing: 2px;
}

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

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

.comment .userpic img {
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

@media (min-width: 800px) {
  .comment .userpic img {
    max-width: 100px;
    max-height: 100px;
  }
}

.comment .poster-ip {
  display: block;
}

.partial .comment {
  padding: 1em;
  margin: 2em 0;
}

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

ul.comment-management-links,
ul.comment-interaction-links,
.comment .multiform-checkbox {
  display: inline;
  text-transform: uppercase;
  font-family: var(--subtitle-font);
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
}

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

.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-management-links,
#comments ul.entry-interaction-links,
.comment-pages.bottompages {
  display: none;
}

.bottomcomment {
  padding: 0;
  text-align: center;
}

.page-reply .comment-wrapper {
  max-width: var(--content-width);
  margin: 100px auto 0;
  padding: 2px;
  position: relative;
  border: 2px solid var(--border-color);
}

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

.page-reply #qrdiv {
  margin: 100px auto 0;
  padding: 2px;
  position: relative;
  border: 2px solid var(--border-color);
}

#qrform {
  margin-top: 1em;
}

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

.page-reply #qrdiv {
  max-width: var(--content-width);
}

#postform:after {
  content: "";
  height: 100px;
  width: 2px;
  margin: 0 auto;
  background: var(--border-color);
  position: absolute;
  bottom: -102px;
  left: 50%;
  margin-left: -1px;
}

#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;
  padding: 0.5em;
  color: var(--link-color);
  text-transform: uppercase;
  line-height: 1;
  font-family: var(--subtitle-font);
}

.comment .footer {
  clear: both;
}

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

.month-wrapper,
.tags-container,
.icons-container {
  max-width: var(--content-width);
  margin: 100px auto 0;
  padding: 2px;
  position: relative;
  border: 2px solid var(--border-color);
}

.month-wrapper:before,
.page-month .month:before,
.tags-container:before,
.icons-container:before {
  content: "";
  height: 100px;
  width: 2px;
  margin: 0 auto;
  background: var(--border-color);
  position: absolute;
  bottom: -104px;
  left: 50%;
  margin-left: -1px;
}

.month-wrapper div.month:before,
.page-month .month .inner:before,
.tags-container > .inner:first-child:before,
.icons-container > .inner:first-child:before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: rotate(45deg);
  margin-left: -14px;
  width: 20px;
  height: 20px;
  background: var(--background-color);
  border: 2px solid var(--border-color);
  padding: 2px;
}

.month-wrapper div.month:after,
.page-month .month .inner:after,
.tags-container > .inner:first-child:after,
.icons-container > .inner:first-child:after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: rotate(45deg);
  margin-left: -10px;
  width: 20px;
  height: 20px;
  background: var(--border-color);
}

.month-wrapper div.month,
.tags-container > .inner:first-child,
.icons-container > .inner:first-child {
  background: var(--entry-background-color);
}

.month-wrapper div.month,
.icons-container > .inner:first-child {
  padding: 2em 0.5em;
}

.month-wrapper .header,
.tags-container .header,
.icons-container .header {
  margin-bottom: 1.5em;
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  text-align: center;
  font-size: 1.75em;
  font-family: var(--title-font);
  line-height: 1;
  font-weight: normal;
  margin: 0;
}

#archive-year .month .footer,
#primary .manage-link {
  padding: 2em 0 0;
  text-transform: uppercase;
  font-family: var(--subtitle-font);
  line-height: 1;
}

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

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

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

.day-date {
  display: none;
}

.month caption {
  display: none;
}

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

table.month td,
table.month th {
  max-width: 0;
  border: 1px solid var(--entry-border-color);
  padding: 1em 0.5em;
  font-weight: normal;
}

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

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

.page-month .month {
  max-width: var(--content-width);
  margin: 100px auto 0;
  padding: 2px;
  position: relative;
  border: 2px solid var(--border-color);
}

.page-month .month .inner {
  background: var(--entry-background-color);
  padding: 0 0.5em 2em;
}

.month dl {
  margin: 0;
}

.month dt {
  text-transform: uppercase;
  text-align: center;
  font-family: var(--subtitle-font);
  padding: 2em 0 1em;
}

.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 {
  margin: 0;
  padding: 1.5em;
  border: 1px solid var(--entry-border-color);
}

.month dd br {
  display: block;
}

#archive-month select {
  border: 1px solid transparent;
  font-size: var(--text-size);
  font-family: var(--main-font);
}

#archive-month input[type="submit"] {
  padding: 0 0.5em;
  background: transparent;
  border: 0;
  font-size: var(--text-size);
  font-family: var(--subtitle-font);
  text-transform: uppercase;
  color: var(--header-link-color);
}

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

.tags-container > .inner:first-child {
  padding: 2em;
}

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

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

ul.ljtaglist li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
  transform: rotate(45deg);
  width: 4px;
  height: 4px;
  background: var(--border-color);
}

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

.sorting-options ul {
  margin: 0 0 2em;
  padding: 0;
  text-transform: uppercase;
  text-align: center;
  font-family: var(--subtitle-font);
  line-height: 1;
}

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

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

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

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

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

.icon-image img {
  display: block;
}

.icon-info {
  padding: 1.5em;
}

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

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

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

.icon-info .default {
  text-transform: uppercase;
  font-family: var(--subtitle-font);
}

.icon-pages p {
  margin: 0;
}

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

.topnav {
  display: none;
}

.navigation {
  color: var(--header-text-color);
  border-top: 2px solid var(--border-color);
  margin: 100px 0 0;
  padding-top: 2px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.navigation .inner {
  background: var(--header-background-color);
  text-align: center;
  min-height: 1.5em;
  padding: 0.5em 3.5em;
  line-height: 1.5;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-family: var(--subtitle-font);
  letter-spacing: 2px;
}

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

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

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

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

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

#footer {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}

#footer .inner {
  background: var(--header-background-color);
  text-align: center;
  padding: 0.75em;
  overflow: hidden;
}

.page-top a {
  width: 0;
  height: 0;
  overflow: hidden;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-bottom: 1em solid var(--header-link-color);
  display: block;
  position: relative;
  z-index: 3;
  float: right;
  transition: border-color 0.4s;
}

.page-top a:hover {
  border-bottom-color: var(--header-link-hover-color);
}

.page-entry #footer,
.page-reply #footer,
.page-tags #footer,
.page-icons #footer {
  position: static;
  border-top: 2px solid var(--border-color);
  padding-top: 2px;
  margin-top: 100px;
}

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

div.ContextualPopup {
  background: var(--header-background-color);
  border: 0;
  padding: 1.5em;
  font-family: inherit;
  overflow: visible;
}

div.ContextualPopup:before {
  content: "";
  width: 100%;
  height: 100%;
  padding: 2px;
  border: 2px solid var(--border-color);
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: -1;
}

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

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

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

div.ContextualPopup .Userpic {
  border: none;
}
div.ContextualPopup .Userpic img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

div.ContextualPopup ul {
  padding: 0.5em 0 0 !important;
}

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

#lj_controlstrip {
  background: var(--header-background-color);
  color: var(--header-text-color);
  justify-content: center;
  padding: 0.75em 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(--header-link-color);
}

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

#lj_controlstrip_actionlinks {
  text-align: center;
}

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

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 1px solid transparent;
  font-size: var(--text-size) !important;
  font-family: var(--main-font) !important;
}

#lj_controlstrip input[type="submit"] {
  padding: 0.5em;
  color: var(--header-link-color) !important;
  font-family: var(--subtitle-font) !important;
  background: transparent;
  text-transform: uppercase;
}

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

#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 "Basic boxes" 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)".
On the same page, copy and paste the following https://fonts.googleapis.com/css2?family=Roboto&family=Condiment&family=Fjalla+One&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab. Set "Custom text" to number 1, "Navigation" to number 2 and "Links list" to number 4. Uncheck the other modules.
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, subtlepatterns

Flat | Top-Level Comments Only

Oh no, this is absolutely perfect. I'll be using it for this guy. ~~and i have no happy icons, why does he never smile orz~~

Hi! I've attempted to apply this to this journal, but the top name banner is splitting down the middle. Any suggestions on how to fix it?

Hi! Please go to https://www.dreamwidth.org/customize/options and select the "1 Column (modules at top and bottom; no sidebar)" page setup.

Aha, wrong "1 Column" option, I see. Thank you so much!

You're welcome.

Pendant

no subject

no subject

no subject

no subject

no subject