myrtillenne

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

Code:

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

- layout - butterfly (basic boxes) - https://myrtillenne.dreamwidth.org
- icon font - material icons - https://material.io
- image - unsplash.com

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

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

:root {
  --text-size: 16px;
  --text-color: #2e3841;
  --line-height: 1.5;
  --body-background-color: #dcebed;
  --link-color: #1394b9;
  --link-hover-color: #2e3841;
  --content-width: 1000px;
  --main-font: Nunito, sans-serif;
  --title-font: Sofia, sans-serif;
  --header-text-color: #f1f7f8;
  --header-background-color: #96c6d3;
  --header-image: url("https://rosecarmine.dreamwidth.org/file/82699.png");
  --header-image-width: 250px;
  --header-image-height: 250px;
  --header-icon-color: #f1f7f8;
  --header-icon-background-color: #4896ac;
  --userpic-border-color: #69adc0;
  --entry-background-color: #f1f7f8;
  --entry-border-color: #c1dce6;
  --entry-icon-color: #96c6d3;
  --sidebar-text-color: #2e3841;
  --sidebar-link-color: #18678d;
  --sidebar-link-hover-color: #2e3841;
}

/*--------------- fonts ---------------*/

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2)
    format("woff2");
}

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

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

img {
  border: none;
}

hr {
  display: none;
}

body {
  background: var(--body-background-color);
  border: 0;
  color: var(--text-color);
  line-height: var(--line-height);
  font-family: var(--main-font);
  font-size: var(--text-size);
  margin: 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 {
  margin: 1em 35px;
  font-style: italic;
}

blockquote:before {
  content: "format_quote";
  font-family: Material Icons;
  font-size: 30px;
  line-height: 30px;
  float: left;
  margin-left: -35px;
  font-style: normal;
  color: var(--entry-icon-color);
  transform: scaleX(-1);
}

blockquote:after {
  content: "format_quote";
  font-family: Material Icons;
  font-size: 30px;
  line-height: 30px;
  float: right;
  margin-right: -35px;
  font-style: normal;
  color: var(--entry-icon-color);
}

textarea {
  border: 1px solid var(--entry-border-color);
}

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

#canvas {
  margin: 40px auto;
}

@media (min-width: 600px) {
  #canvas {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
  }
}

@media (min-width: 800px) {
  #canvas {
    margin: 80px auto;
    position: relative;
  }

#content {
    padding: 0 114px 40px 0;
  }
}

@media (min-width: 1024px) {
  #canvas {
    max-width: calc(var(--header-image-width) + 20px + var(--content-width));
  }

#content {
    border-left: calc(var(--header-image-width) + 20px) solid transparent;
  }
}

#content > .inner:first-child {
  background: var(--entry-background-color);
  border-radius: 0 0 0 10px;
  border: 1px solid var(--entry-border-color);
  border-top: 0;
}

#content-footer {
  height: 0;
  font-size: 0;
  clear: both;
}

#header,
#footer {
  margin: 0;
  clear: both;
  padding: 0;
}

@media (min-width: 1024px) {
  #primary {
    width: 100%;
    margin-right: -100%;
    margin-left: 0;
    float: left;
  }
}

#primary > .inner:first-child {
  padding: 0;
}

#tertiary {
  display: none;
}

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

#header {
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
  border-bottom: 0;
  padding: 2em;
  text-align: center;
}

@media (min-width: 800px) {
  #header {
    padding: 0 0 0 calc(var(--header-image-width) + 20px);
    margin-right: 114px;
    color: var(--header-text-color);
    background: transparent;
    border: 0;
    position: relative;
  }
}

@media (min-width: 800px) {
  #header > .inner:first-child {
    display: flex;
    width: calc(var(--header-image-width) + 20px);
  }

#header .module-wrapper {
    width: var(--header-image-width);
    margin-left: calc(-1 * var(--header-image-width) - 20px);
    height: var(--header-image-height);
    border: 10px solid var(--header-background-color);
    border-radius: 0 50% 0 50%;
    background: var(--header-image);
  }
}

.module-navlinks {
  margin-bottom: 1em;
}

.module-navlinks li {
  display: inline-block;
  margin-right: 0.25em;
}

li.list-item-network {
  display: none;
}

.module-navlinks li a:before {
  font-family: Material Icons;
  font-size: 22px;
  line-height: 0;
  margin-right: 0.25em;
  vertical-align: middle;
  color: var(--entry-icon-color);
}

.list-item-recent a:before {
  content: "home";
}

.list-item-archive a:before {
  content: "today";
}

.list-item-read a:before {
  content: "library_books";
}

.list-item-tags a:before {
  content: "style";
}

.list-item-memories a:before {
  content: "collections_bookmark";
}

.list-item-userinfo a:before {
  content: "account_box";
}

@media (min-width: 800px) {
  .module-navlinks {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
  }

.module-navlinks li {
    float: left;
    list-style: none;
    margin: 0;
  }

.module-navlinks li a {
    width: 40px;
    height: 40px;
    display: block;
    background-color: var(--header-icon-background-color);
    padding: 0;
    overflow: hidden;
  }

.module-navlinks li a:before {
    width: 40px;
    height: 40px;
    display: block;
    font-family: Material Icons;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    margin-right: 0.25em;
    vertical-align: middle;
    color: var(--header-icon-color);
  }

.list-item-recent a,
  .list-item-read a,
  .list-item-memories a {
    border-radius: 0 20px 0 20px;
    margin-left: 5px;
  }

.list-item-archive a,
  .list-item-tags a,
  .list-item-userinfo a {
    border-radius: 20px 0 20px 0;
  }
}

h1#title {
  font-size: 1.5em;
  font-family: var(--title-font);
  font-weight: normal;
  margin: 0;
  padding: 0 1em;
  text-shadow: 3px 3px 0 var(--entry-border-color);
}

#header a {
  color: inherit;
}

h2#subtitle {
  font-size: var(--text-size);
  font-weight: normal;
  margin: 0;
  padding: 0.5em 1em 0;
}

h2#pagetitle {
  display: none;
}

@media (min-width: 800px) {
  #journaltitles-container {
    width: var(--header-image-width);
    background: var(--header-background-color);
    border-radius: 50% 0 50% 0;
    border: 10px solid var(--header-background-color);
    text-align: center;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

h1#title {
    text-shadow: 3px 3px 0 var(--header-icon-background-color);
  }
}

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

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

.entry,
.full .comment {
  padding: 2em;
  position: relative;
}

.header .inner {
  text-align: center;
}

.entry .entry-title {
  font-size: 1.5em;
  line-height: 1;
  font-family: var(--title-font);
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 0.25em;
  padding-top: 0;
}

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

.admin-post-icon:before {
  content: "new_releases";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

.sticky-entry-icon:before {
  content: "star";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

.header {
  line-height: 1.5;
}

.restrictions img,
.access-filter img {
  display: none;
}

.month .restrictions,
.month .access-filter,
.month .admin-post-icon,
.month .sticky-entry-icon {
  display: none;
}

.security-protected .access-filter:before {
  content: "lock";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

.security-private .access-filter:before {
  content: "visibility_off";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

.restrictions-NSFW .restrictions:before {
  content: "warning";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

.restrictions-18 .restrictions:before {
  content: "18+";
  font-family: arial;
  font-size: 18px;
  color: var(--entry-icon-color);
  vertical-align: middle;
  line-height: 0;
}

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

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

.has-userpic .userpic img {
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
  border-radius: 25px 0 25px 0;
  border: 4px solid var(--entry-border-color);
  background: var(--entry-border-color);
  display: block;
}

@media (min-width: 800px) {
  .has-userpic .userpic img {
    max-width: 100px;
    max-height: 100px;
    width: auto;
    height: auto;
    border: 7px solid var(--userpic-border-color);
    background: var(--userpic-border-color);
    border-radius: 50px 0 50px 0;
  }

.has-userpic .userpic {
    position: absolute;
    right: -114px;
    top: 0;
    padding-bottom: 50px;
    width: 114px;
    text-align: left;
    margin: 0;
  }

.has-userpic .userpic:after {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 0 25px 0 25px;
    position: absolute;
    bottom: 0;
    background: var(--header-icon-background-color);
  }
}

.entry .poster,
.full .comment .poster {
  display: block;
  text-align: center;
}

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

.entry .poster {
  font-size: 0;
  line-height: 1;
}

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

.entry .poster .ljuser:nth-child(1):before {
  content: "account_circle";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  margin-right: 0.25em;
  line-height: 0;
}

.entry .poster .ljuser:nth-child(2):before {
  content: "public";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  margin-right: 0.25em;
  margin-left: 0.5em;
  line-height: 0;
}

.poster .ljuser img {
  display: none;
}

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

.poster.empty {
  display: none;
}

.entry .contents,
.comment .contents {
  margin-top: 1.5em;
}

.entry-content {
  margin: 1em 0 1.5em;
}

@media (min-width: 600px) {
  .entry-content {
    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;
}

.cuttag-action {
  display: flex;
  align-items: center;
  line-height: 1;
}

.cuttag-action img {
  display: none;
}

.cuttag-action:before {
  content: "content_cut";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  margin-right: 5px;
}

.cuttag-action:after {
  content: "";
  height: 0;
  width: 100%;
  border-bottom: 1px dashed var(--entry-border-color);
}

.cut-open, .cut-close {
  display:none;
}

.cut-text{
  font-weight: normal;
  text-transform: lowercase;
  margin-left: 27px;
  display: block;
}

.metadata {
  margin-top: 0.5em;
  line-height: 1.5;
}

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

.metadata li {
  display: inline;
  margin-right: 0.5em;
}

.metadata-label {
  display: none;
}

#metadata-music:before {
  content: "library_music";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

#metadata-mood:before {
  content: "sentiment_satisfied_alt";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

#metadata-location:before {
  content: "location_on";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}

#metadata-xpost:before {
  content: "add_location";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  line-height: 0;
}
.tag {
  margin-top: 0.5em;
  line-height: 1.5;
}

.tag-text {
  display: none;
}

.tag-nav-trigger {
  vertical-align: middle;
}

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

.tag ul li {
  display: inline;
}

.tag:before {
  content: "#";
  color: var(--entry-icon-color);
  display: inline-block;
  width: 22px;
  text-align: center;
  font-size: 22px;
  vertical-align: middle;
  font-family: arial;
  line-height: 0;
}

.tag li a {
  color: var(--text-color);
}
.tag li a:hover {
  color: var(--link-color);
}

ul.entry-management-links {
  float: right;
  margin: 0.5em 0 0;
  padding: 0;
  display: flex;
  line-height: 1.5;
}

ul.entry-management-links li {
  margin-left: 0.5em;
  position: relative;
  list-style: none;
}

ul.entry-management-links li a {
  width: 22px;
  height: 22px;
  display: block;
  vertical-align: top;
}

ul.entry-management-links li a img {
  opacity: 0;
  width: 22px;
  height: 22px;
}

ul.entry-management-links li a:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  font-family: Material Icons;
  font-size: 22px;
  line-height: 22px;
  text-align: center;
  vertical-align: top;
  color: var(--entry-icon-color);
}

.link_prev a:before {
  content: "arrow_back";
}

.edit_entry a:before {
  content: "edit";
}

.edit_tags a:before {
  content: "local_offer";
}

.mem_add a:before {
  content: "favorite";
}

.tell_friend a:before {
  content: "share";
}

.watch_comments a:before {
  content: "add_alert";
}

.link_next a:before {
  content: "arrow_forward";
}

ul.entry-interaction-links {
  float: left;
  margin: 0.5em 0 0;
  padding: 0;
  text-transform: lowercase;
  line-height: 1.5;
}

ul.entry-interaction-links li {
  display: inline;
  margin-right: 0.5em;
}

ul.entry-interaction-links li a {
  color: var(--text-color);
}

ul.entry-interaction-links li a:hover {
  color: var(--link-color);
}

ul.entry-interaction-links li a:before {
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  margin-right: 0.25em;
  line-height: 0;
}

li.entry-permalink a:before {
  content: "launch";
}

li.entry-readlink a:before {
  content: "question_answer";
}

li.entry-replylink a:before {
  content: "add_comment";
}

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

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

.comment-pages {
  text-align: center;
}

.comment-pages {
  padding: 1em;
  border-top: 1px solid var(--entry-border-color);
}

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

.dwexpcomment {
  margin-top: 0 !important;
}

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

.comment-thread {
  border-top: 1px solid var(--entry-border-color);
}

.partial {
  padding: 1em 2em;
}

.page-reply .comment {
  border-top: 1px solid var(--entry-border-color);
}

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

.full .comment-title {
  font-family: var(--title-font);
  font-size: 1.2em;
  font-weight: normal;
  margin-bottom: 0.25em;
}

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

.page-reply .no-subject .comment .comment-title {
  border: 0;
}

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

.full .poster {
  line-height: 1;
}

.poster-ip {
  display: block;
  text-align: center;
}

.poster-ip:before {
  content: "my_location";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
}

.comment .poster .ljuser:before {
  content: "account_circle";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--entry-icon-color);
  margin-right: 0.25em;
}

.comment-content {
  margin: 1em 0 1.5em;
}

ul.comment-management-links {
  float: right;
  margin: 0;
  padding: 0;
  display: flex;
  line-height: 1.5;
}

ul.comment-management-links li {
  margin-left: 0.5em;
  position: relative;
  list-style: none;
}

ul.comment-management-links li a {
  width: 22px;
  height: 22px;
  display: block;
  vertical-align: top;
}

ul.comment-management-links li a img {
  opacity: 0;
  width: 22px;
  height: 22px;
}

ul.comment-management-links li a:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  font-family: Material Icons;
  font-size: 22px;
  line-height: 22px;
  text-align: center;
  vertical-align: top;
  color: var(--entry-icon-color);
}

.edit_comment a:before {
  content: "edit";
}

.delete_comment a:before {
  content: "delete_forever";
}

.screen_comment a:before {
  content: "visibility_off";
}

.unscreen_comment a:before {
  content: "visibility";
}

.freeze_thread a:before {
  content: "ac_unit";
}

.unfreeze_thread a:before {
  content: "wb_sunny";
}

ul.comment-interaction-links,
.multiform-checkbox {
  float: left;
  margin: 0;
  padding: 0;
  text-transform: lowercase;
  line-height: 1.5;
}

ul.comment-interaction-links li,
.multiform-checkbox {
  display: inline;
  margin-right: 0.5em;
}

textarea#commenttext {
  width: 100%;
}

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

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

#qrdiv:before {
  content: "";
  display: block;
  clear: both;
}

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

#qrform {
  padding-top: 2em;
}

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

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

#talkform-from img {
  display: none;
}

#talkform-from label {
  font-weight: normal;
}

#postform {
  border-top: 1px solid var(--entry-border-color);
  padding: 2em;
}

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

.month-wrapper,
.tags-container,
.icons-container {
  border-top: 1px solid var(--entry-border-color);
  padding: 2em 0;
}

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

.month .footer,
#primary .manage-link {
  padding: 1.5em 2em 0;
}

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

.month-wrapper .contents {
  padding-top: 2em;
}

.month caption {
  display: none;
}

.day-date {
  display: none;
}

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

table.month {
  margin: 0 auto;
}

table.month td {
  width: 1em;
  height: 3em;
  border-bottom: 1px solid var(--entry-border-color);
}

table.month th {
  height: 3em;
  border-top: 1px solid var(--entry-border-color);
  border-bottom: 1px solid var(--entry-border-color);
}

table.month td p {
  margin: 0;
  display: inline;
}

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

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

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

#archive-month {
  border-top: 1px solid var(--entry-border-color);
}

.month dl {
  margin: 0;
}

.month dl dt {
  border-bottom: 1px solid var(--entry-border-color);
  font-style: italic;
  padding-top: 1em;
  padding-bottom: 0.25em;
  text-align: center;
}

.month dd {
  margin: 1.5em 2em 0;
}

.month dd br {
  display: block;
}

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

#archive-month .navigation {
  margin-top: 1.5em;
}

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

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

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

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

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

.icons-container h2 {
  margin-bottom: 0.5em;
}

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

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

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

.page-icons .bottompages {
  padding: 1.5em 2em 0;
}

.icon {
  border-bottom: 1px solid var(--entry-border-color);
  padding: 1.5em 2em;
  overflow: hidden;
}

.icon:last-child {
  border: 0;
  padding-bottom: 0;
}

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

.icon-image img {
  display: block;
}

.icon-info {
  text-transform: lowercase;
}

.icon-info div {
  display: inline;
  margin-right: 1em;
  font-style: italic;
}

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

.default.label {
  font-size: 0;
}

.default.label:before {
  content: "star";
  font-family: Material Icons;
  font-size: 22px;
  font-style: normal;
  vertical-align: top;
  line-height: 22px;
  color: var(--entry-icon-color);
}

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

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

.icon-pages p {
  margin: 0;
}

/*------------ sidebar ------------*/

#secondary {
  padding: 2em;
  border-top: 1px solid var(--entry-border-color);
}

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

@media (min-width: 1024px) {
  #secondary {
    float: left;
    width: calc(var(--header-image-width) + 20px);
    margin-left: calc(-1 * var(--header-image-width) - 20px);
    padding: 0;
    border: 0;
    text-align: right;
  }

.module-section-one .module {
    padding: 1.5em 2em 0;
    color: var(--sidebar-text-color);
  }

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

.module h2 {
  font-size: 1em;
  font-weight: normal;
  margin: 0 0 1em;
  padding: 0;
  text-shadow: -3px 3px 0 var(--entry-border-color);
}

.module h2,
.module h2 a,
.module h2 a:hover {
  color: inherit;
}

.module-userprofile {
  padding: 0 !important;
  margin-top: -1px;
}

.module .userpic img {
  border: 7px solid var(--entry-border-color);
  background: var(--entry-border-color);
  border-radius: 50px 0 50px 0;
}

@media (min-width: 1024px) {
  .module h2 {
    text-shadow: -3px 3px 0 var(--userpic-border-color);
  }

.module .userpic img {
    border: 7px solid var(--userpic-border-color);
    background: var(--userpic-border-color);
  }
}

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

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

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

.module-userprofile h2,
.journal-website-name,
.journal-name,
ul.userlite-interaction-links,
.module-calendar,
.module-cuttagcontrols,
.module-pagesummary,
.module-active,
.module-credit,
.module-syndicate,
.module-subscriptionfilters,
.module-search,
.module-time,
.module-powered,
.module .manage-link {
  display: none;
}

/*------------ top custom text ------------*/

.module-customtext h2 {
  display: none;
}

@media (min-width: 1024px) {
  .module-customtext {
    position: absolute;
    top: 0px;
    right: 120px;
    height: calc(var(--header-image-height) - 50px);
    line-height: calc(var(--header-image-height) - 50px);
    overflow: auto;
    margin-left: calc(var(--header-image-width) * 2 + 70px);
    padding: 0 !important;
  }

.module-customtext .module-content {
    display: inline-block;
    vertical-align: bottom;
    line-height: var(--line-height);
  }
}

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

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

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

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

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

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

.navigation {
  border-top: 1px solid var(--entry-border-color);
  padding: 1.5em 2em;
}

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

.navigation li {
  display: inline-block;
  padding-right: 0.5em;
}

#entries .navigation li a:before {
  font-family: Material Icons;
  font-size: 22px;
  line-height: 0;
  vertical-align: middle;
  color: var(--entry-icon-color);
  margin-right: 0.25em;
  display: inline-block;
}

@media (min-width: 800px) {
  #entries .navigation {
    border-top: 0;
    padding: 0;
  }

#entries .navigation ul {
    position: absolute;
    right: 76px;
    bottom: 0;
    width: 80px;
    height: 40px;
    text-align: right;
  }

#entries .navigation li {
    list-style: none;
    padding: 0;
  }

li.page-back {
    float: left;
  }

li.page-forward {
    float: right;
  }

#entries .navigation li a {
    width: 40px;
    height: 40px;
    display: block;
    overflow: hidden;
  }

#entries .navigation li a:before {
    width: 40px;
    height: 40px;
    display: block;
    font-family: Material Icons;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    color: var(--header-icon-color);
    margin: 0;
  }

.noentries {
    border-top: 1px solid var(--entry-border-color);
    padding: 2em;
    margin: 0;
  }
}

li.page-back a:before {
  content: "keyboard_return";
}

li.page-forward a:before {
  content: "keyboard_return";
  transform: scaleX(-1);
}

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

#footer {
  overflow: hidden;
}

.page-top {
  display: block;
  width: 40px;
  height: 40px;
  background: var(--header-icon-background-color);
  border-radius: 20px 0 20px 0;
  float: right;
}

@media (min-width: 800px) {
  .page-top {
    position: absolute;
    right: 74px;
    bottom: 40px;
  }

.page-top:before {
    content: "";
    position: absolute;
    bottom: -40px;
    right: 0;
    width: 40px;
    height: 40px;
    display: block;
    background: var(--header-icon-background-color);
    z-index: -1;
    border-radius: 0 20px 0 20px;
  }

.page-top:after {
    content: "";
    position: absolute;
    bottom: -40px;
    right: 40px;
    width: 40px;
    height: 40px;
    display: block;
    background: var(--header-icon-background-color);
    z-index: -1;
    border-radius: 20px 0 20px 0;
  }
}

.page-top a {
  width: 40px;
  height: 40px;
  display: block;
  overflow: hidden;
}

.page-top a:before {
  content: "keyboard_return";
  width: 40px;
  height: 40px;
  display: block;
  font-family: Material Icons;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
  color: var(--header-icon-color);
  transform: rotate(90deg) scaleY(-1);
}

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

div.ContextualPopup {
  background: var(--entry-background-color);
  font-family: var(--main-font);
  font-size: var(--text-size);
  border: 1px solid var(--entry-border-color);
  border-radius: 0 50px 0 50px;
  box-shadow: none;
  padding: 0;
}

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

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

.ContextualPopup .Actions ul {
  list-style: none;
  margin: 0;
  padding: 0 1.5em 1.5em;
}

div.ContextualPopup .Userpic {
  border: 0;
  padding: 0;
}

div.ContextualPopup .Userpic img {
  border: 7px solid var(--entry-border-color);
  border-radius: 0 50px 0 50px;
  background: var(--entry-border-color);
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
}

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

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

#lj_controlstrip > div {
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: 1.5;
  padding: 0.25em 0.5em;
  flex-grow: 0;
}

#lj_controlstrip_user > a,
#lj_controlstrip_actionlinks > a {
  text-transform: lowercase;
}

#lj_controlstrip a {
  font-family: var(--main-font);
  color: var(--link-color);
}

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

#lj_controlstrip_actionlinks {
  text-align: center;
}

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

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 1px solid var(--entry-border-color);
  background: transparent !important;
}

#lj_controlstrip input[type="submit"] {
  border: 0;
  background: transparent;
  text-transform: lowercase;
  font-size: 16px;
  color: var(--text-color);
  font-family: var(--main-font);
  padding: 0.25em;
}

#lj_controlstrip_userpic img {
  border: 3px solid var(--entry-border-color) !important;
  padding: 1px !important;
  background: var(--entry-border-color);
  border-radius: 0 22px 0 22px;
}

#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.
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)". After that, paste the following https://fonts.googleapis.com/css2?family=Nunito&family=Sofia&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab and enable "Custom text". The layout supports "Profile", "Navigation", "Links list", "Tags" and "Custom text". The other modules must be unchecked.
Click on the "Presentation" tab. In the "Additional options" section select "Responsive" for "Indentation for nested comment threads" (optional).

Resources:

icon font by Google
image from unsplash.com

Journal layouts

Butterfly

Butterfly

no subject

no subject

Welcome!

Terms of use

Layouts

Links

Resources