myrtillenne | Clear

header image (1000x250px)
sidebar image (300x300px)
navigation links, links list, custom text
comment pages
icon pages

Code:

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

- layout - clear (basic boxes) - https://myrtillenne.dreamwidth.org
- images - https://picjumbo.com/

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

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

:root {
  --text-size: 16px;
  --text-color: #555;
  --line-height: 1.5;
  --background-color: #f2f2f2;
  --link-color: #e93a8d;
  --link-hover-color: #67d7e7;
  --main-font: Roboto, sans-serif;
  --title-font: Roboto Condensed, sans-serif;
  --date-font: Keania One, sans-serif;
  --title-color: #67d7e7;
  --title-hover-color: #e93a8d;
  --content-width: 1000px;
  --border-color: #ddd;
  --entry-background-color: #fff;
  --header-image: url("https://rosecarmine.dreamwidth.org/file/102254.jpg");
  --header-image-height: 250px;
  --sidebar-width: 300px;
  --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/102834.jpg");
  --sidebar-image-height: 300px;
}

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

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

img {
  border: none;
}

hr {
  display: none;
}

body {
  color: var(--text-color);
  background: var(--background-color);
  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;
  padding: 1em;
  border: 1px solid var(--border-color);
}

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

#canvas {
  max-width: calc(var(--content-width) + 2px);
  margin: 20px 0;
}

@media (min-width: 800px) {
  #canvas {
    margin: 50px;
  }
}

@media (min-width: 1024px) {
  #canvas {
    margin: 50px auto;
    padding: 0 50px;
  }

#content {
    border-left: calc(var(--sidebar-width) + 2px) solid transparent;
    clear: both;
  }
}

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

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

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

@media (min-width: 800px) {
  #header:before {
    content: "";
    display: block;
    width: 100%;
    height: var(--header-image-height);
    background-image: var(--header-image);
    background-repeat: no-repeat;
    background-position: top center;
    background-clip: padding-box;
    border-radius: 3px 3px 0 0;
    border: 1px solid var(--border-color);
    border-bottom: 0;
    box-sizing: border-box;
  }
}

#header > .inner:first-child {
  border-radius: 3px;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
}

@media (min-width: 800px) {
  #header > .inner:first-child {
    border-radius: 0 0 3px 3px;
    display: flex;
  }

#header .module-wrapper {
    order: 2;
    border-left: 1px solid var(--border-color);
  }
}

#header #journaltitles-container {
  font-size: 1.17em;
  margin: 0;
  padding: 0.75em 1em;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  line-height: 1;
}

h1#title {
  font-size: 1em;
  padding: 0 0.5em 0 0;
  text-transform: uppercase;
  font-family: var(--title-font);
  margin: 0;
}

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

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

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

h2#pagetitle {
  display: none;
}

.module-navlinks {
  position: relative;
  line-height: 1;
}

.module-navlinks .module-content {
  border-bottom: 1px solid var(--border-color);
}

@media (min-width: 800px) {
  .module-navlinks {
    width: 140px;
  }

.module-navlinks .module-content {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.4s step-end, opacity 0.4s linear;
    width: 14em;
    right: -1px;
    background: var(--entry-background-color);
    border: 1px solid var(--border-color);
    z-index: 9;
    border-radius: 3px;
  }

.module-navlinks:hover .module-content {
    visibility: visible;
    opacity: 1;
    transition: visibility 0.4s step-start, opacity 0.4s linear;
  }

.module-navlinks:before {
    content: "NAVIGATION";
    padding: 0.75em 0;
    display: block;
    font-family: var(--title-font);
    font-size: 1.17em;
    cursor: pointer;
    text-align: center;
  }
}

.module-navlinks .module-content li:first-child:before {
  display: none;
}

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

@media (min-width: 1024px) {
  #secondary {
    float: left;
    width: calc(var(--sidebar-width) + 2px);
    margin-left: calc(-1 * (var(--sidebar-width) + 2px));
  }
}

.module-section-one {
  margin: 20px 0;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}

@media (min-width: 800px) {
  .module-section-one {
    margin: 50px 0;
  }
}

.module-section-one .module {
  margin-top: -1px;
}

@media (min-width: 1024px) {
  .module-section-one:before {
    content: "";
    display: block;
    width: 100%;
    height: var(--sidebar-image-height);
    background: var(--sidebar-image);
  }

.module-section-one .module {
    margin: 0;
  }
}

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

.module-content li {
  list-style: decimal-leading-zero;
  margin: 0 0 0 2.2em;
  padding: 0;
  text-transform: uppercase;
  font-family: var(--date-font);
  border-top: 1px solid transparent;
  line-height: 1;
  position: relative;
  transition: color 0.4s;
  color: var(--title-color);
}

.module-content li:hover {
  color: var(--title-hover-color);
}

.module-content li:before {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--border-color);
  padding-left: 2.2em;
  position: absolute;
  top: -1px;
  left: -2.2em;
}

.module-content li a {
  display: block;
  padding: 0.75em;
  border-left: 1px solid var(--border-color);
  font-family: var(--title-font);
  color: var(--text-color);
  margin-left: 0.25em;
}

.module-content li a:hover {
  letter-spacing: 2px;
}

.module-customtext {
  border-top: 1px solid var(--border-color);
  padding: 1.5em;
}

.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,
.full .comment {
  background: var(--entry-background-color);
  margin: 20px 0;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 2em;
}

@media (min-width: 800px) {
  .entry,
  .full .comment {
    padding: 0 140px 0 0;
    margin: 50px 0;
  }

.entry > .inner:first-child,
  .full .comment > .inner:first-child {
    border-right: 1px solid var(--border-color);
  }
}

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

.has-subject .entry .entry-title {
  font-size: 1.5em;
  font-family: var(--title-font);
  padding: 0;
  text-transform: uppercase;
  line-height: 1;
  font-weight: normal;
  margin: 0;
  color: var(--text-color);
}

@media (min-width: 800px) {
  .has-subject .entry .entry-title {
    float: left;
    padding: calc(2 * var(--text-size));
  }
}

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

.entry .entry-title a:hover {
  letter-spacing: 2px;
}

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

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

.restrictions,
.access-filter {
  text-transform: uppercase;
  font-family: var(--title-font);
}

@media (min-width: 800px) {
  .entry .restrictions,
  .entry .access-filter {
    width: 140px;
    margin-right: -141px;
    float: right;
    clear: right;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    padding: 0.5em 0;
    line-height: 1;
  }
}

.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 {
  display: block;
  font-size: 1em;
}

.entry .datetime {
  font-size: 1.17em;
  text-transform: uppercase;
  font-family: var(--date-font);
  color: var(--title-color);
}

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

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

@media (min-width: 800px) {
  .entry .date {
    float: right;
    width: 140px;
    margin-right: -141px;
    clear: right;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    padding: 0.5em 0;
    line-height: 1;
  }

.entry .time {
    float: right;
    width: 140px;
    margin-right: -141px;
    clear: right;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    padding: 0.5em 0;
    line-height: 1;
  }
}

.has-userpic .userpic {
  float: right;
  clear: right;
}

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

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

.entry .poster .ljuser,
.full .poster .ljuser,
.full .anonymous {
  font-family: var(--title-font);
  text-transform: uppercase;
  font-size: var(--text-size);
  margin-right: 0.5em;
}

@media (min-width: 800px) {
  .has-userpic .userpic {
    float: right;
    clear: right;
    width: 140px;
    margin: 0 -141px 0 0;
    border-bottom: 1px solid var(--border-color);
  }

.has-userpic .userpic img {
    max-width: 100px;
    max-height: 100px;
    padding: 20px;
    display: block;
    margin: 0 auto;
  }

.entry .poster,
  .full .poster {
    float: right;
    clear: right;
    margin-right: -141px;
    width: 140px;
    display: block;
    text-align: center;
  }

.entry .poster .ljuser,
  .full .poster .ljuser,
  .full .anonymous {
    padding: 0.5em;
    margin: 0;
    display: block;
    border-bottom: 1px solid var(--border-color);
    line-height: 1;
    font-family: var(--title-font);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

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

.poster .ljuser img {
  display: none;
}

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

.poster.empty {
  display: none;
}

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

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

.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 ul,
.comment-content ul {
  padding-left: 1em;
  list-style: none;
}

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

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

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

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

.entry .footer {
  clear: left;
}

@media (min-width: 800px) {
  .entry div.tag {
    padding: 0 2em;
  }
}

.metadata-label,
.tag-text {
  font-family: var(--title-font);
  text-transform: uppercase;
}

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

.tag li {
  display: inline;
}

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

ul.entry-management-links,
ul.entry-interaction-links,
ul.comment-management-links,
ul.comment-interaction-links {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  text-align: right;
  font-family: var(--title-font);
  clear: both;
}

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

ul.entry-management-links li,
ul.entry-interaction-links li,
ul.comment-management-links li,
ul.comment-interaction-links li {
  display: inline-block;
  line-height: 1;
  margin-right: 0.5em;
}

@media (min-width: 800px) {
  ul.entry-management-links li:last-child,
  ul.entry-interaction-links li:last-child,
  ul.comment-management-links li:last-child,
  ul.comment-interaction-links li:last-child {
    width: 140px;
    margin: 0 -141px 0 0;
    float: right;
    border-top: 1px solid var(--border-color);
    text-align: center;
    box-sizing: border-box;
  }

ul.entry-management-links li,
  ul.entry-interaction-links li,
  ul.comment-management-links li,
  ul.comment-interaction-links li {
    padding: 0.5em 0;
  }
}

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

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

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

.comment-pages {
  text-transform: uppercase;
  font-family: var(--title-font);
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 0.5em 2em;
  margin-bottom: 5px;
}

.comment-pages:first-of-type {
  margin-top: 20px;
}

@media (min-width: 800px) {
  .comment-pages:first-of-type {
    margin-top: 50px;
  }
}

.comment {
  min-width: 15em;
}

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

.comment .header {
  float: left;
  width: 100%;
  font-family: var(--title-font);
  text-transform: uppercase;
}

@media (min-width: 800px) {
  .comment .header .inner {
    padding: 2em 2em 0;
  }
}

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

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

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

.comment .poster-ip {
  font-size: 1em;
  display: block;
  font-family: var(--title-font);
}

@media (min-width: 800px) {
  .comment .poster-ip {
    padding: 0 2em;
  }
}

.partial .comment {
  background: var(--entry-background-color);
  margin: 20px 0;
  padding: 0.5em 1em;
  border: 1px solid var(--border-color);
  border-radius: 3px;
}

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

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

@media (min-width: 800px) {
  .comment .multiform-checkbox {
    padding-left: 2em;
    display: block;
  }
}

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

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

.bottomcomment {
  text-align: center;
}

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

@media (min-width: 800px) {
  #qrform {
    padding: 2em;
  }
}

#qrdiv input,
#qrdiv select,
#qrdiv textarea {
  border: 1px solid var(--border-color);
  background: var(--entry-background-color);
  color: var(--text-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: 1em;
  padding: 0.5em;
  color: var(--text-color);
  line-height: 1;
  font-family: var(--title-font);
  border: 1px solid var(--border-color);
  text-transform: uppercase;
}

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

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

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

.month-wrapper .header,
.tags-container .header,
.icons-container .header {
  text-align: center;
  font-family: var(--title-font);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
}

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

@media (min-width: 800px) {
  .month-wrapper,
  .page-month .month,
  .tags-container,
  .icons-container {
    padding: 0 140px 0 0;
    margin: 50px 0;
  }

.month-wrapper div.month,
  .page-month .month .inner,
  .tags-container > .inner:first-child,
  .icons-container > .inner:first-child {
    border-right: 1px solid var(--border-color);
  }

.month-wrapper .header,
  .tags-container .header,
  .icons-container .header {
    float: right;
    margin: 0 -141px 0 0;
    width: 140px;
  }
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-size: 1em;
  line-height: 1;
  font-weight: normal;
  padding: 0.5em 0;
}

#archive-year .month .footer .inner,
.manage-link {
  font-family: var(--title-font);
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  border-top: 1px solid var(--border-color);
  padding: 0.5em 0;
}

@media (min-width: 800px) {
  #archive-year .month .footer .inner,
  .manage-link {
    float: right;
    clear: right;
    margin: 0 -141px 0 0;
    width: 140px;
    display: block;
    margin-top: -1.5em;
  }
}

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

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

.month caption {
  display: none;
}

.day-date {
  display: none;
}

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

table.month td {
  padding: 0.5em;
  width: 2em;
  height: 2em;
  font-weight: normal;
  font-family: var(--date-font);
  color: var(--title-color);
  border: 1px solid var(--border-color);
}

table.month th {
  text-transform: uppercase;
  font-family: var(--title-font);
  padding: 0.5em;
  font-weight: normal;
  border: 1px solid var(--border-color);
}

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

table.month td p:before {
  content: "[ ";
  color: var(--text-color);
}

table.month td p:after {
  content: " ]";
  color: var(--text-color);
}

.month dl {
  margin: 0;
}

.month dt {
  display: block;
  text-align: center;
  font-family: var(--title-font);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 1em;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 0.5em 0;
}

@media (min-width: 800px) {
  .month dt {
    float: right;
    margin: 0 -141px 0 0;
    width: 140px;
  }
}

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

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

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

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

.page-month .month .entry-poster.empty {
  margin-right: 0;
}

#primary .month dt a {
  color: var(--title-color);
}

#primary .month dt a:hover {
  color: var(--title-hover-color);
}

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

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

.month dl br {
  display: none;
}

.month dl .tag-text {
  font-style: normal;
}

#archive-year .navigation ul {
  display: flex;
  flex-wrap: wrap;
}

#archive-year .navigation li {
  border-right: 1px solid var(--border-color);
  font-family: var(--date-font);
  padding: 0.5em;
}

#archive-year .navigation li a {
  color: var(--title-color);
}

#archive-year .navigation li a:hover {
  color: var(--title-hover-color);
}

#archive-month .navigation ul form {
  display: flex;
  justify-content: space-between;
}

#archive-month .navigation li {
  padding: 0.5em;
}

li.month-back {
  border-right: 1px solid var(--border-color);
}

li.month-forward {
  border-left: 1px solid var(--border-color);
}

@media (min-width: 800px) {
  li.month-back,
  li.month-forward {
    width: 140px;
    box-sizing: border-box;
  }
}

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

ul.ljtaglist {
  font-family: var(--date-font);
  margin: 0 0 0 1em;
  padding: 0;
  list-style: decimal-leading-zero inside;
}

ul.ljtaglist li {
  font-family: var(--date-font);
  color: var(--title-color);
  transition: color 0.4s;
}

ul.ljtaglist li:hover {
  color: var(--title-hover-color);
}

ul.ljtaglist li a,
ul.ljtaglist li span {
  font-family: var(--main-font);
  color: var(--text-color);
}

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

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

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

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

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

.page-icons .bottompages {
  text-align: center;
  margin-top: 1em;
  text-transform: uppercase;
  font-family: var(--title-font);
}

.icons-container .icon {
  border: 1px solid var(--border-color);
  margin: 1em 0 0;
  display: flex;
  flex-wrap: wrap;
}

.icon-image {
  order: 2;
  padding: 1em;
  border-left: 1px solid var(--border-color);
}

.icon-image img {
  display: block;
}

.icon-info {
  padding: 1.5em;
  flex: 1;
}

.default.label,
.keywords-label,
.comment-text,
.description-text {
  text-transform: uppercase;
  font-family: var(--title-font);
}

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

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

.icon-pages p {
  margin: 0;
  text-transform: uppercase;
  font-family: var(--title-font);
}

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

.navigation {
  margin: 20px 0 0;
}

@media (min-width: 800px) {
  .navigation {
    margin: 50px 0;
  }
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  overflow: hidden;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  border-radius: 3px;
}

.navigation li {
  list-style: none;
  padding: 0.5em 0;
  text-align: center;
  line-height: 1;
  font-family: var(--title-font);
}

li.page-back,
li.page-forward {
  width: 140px;
}

li.page-back {
  float: left;
  border-right: 1px solid var(--border-color);
}

li.page-forward {
  border-left: 1px solid var(--border-color);
  float: right;
}

.noentries {
  display: none;
}

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

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

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

#footer {
  margin-top: 20px;
  clear: both;
  background: var(--entry-background-color);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 0.5em 0;
  text-align: center;
  line-height: 1;
  font-family: var(--title-font);
  text-transform: uppercase;
}

#footer a {
  color: var(--text-color);
}

@media (min-width: 1024px) {
  #footer {
    display: none;
  }
}

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

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

div.ContextualPopup .Relation {
  font-weight: normal;
  font-size: 1em;
  padding: 0.5em;
  border-top: 1px solid var(--border-color);
  margin: 0;
  font-family: var(--title-font);
  text-transform: uppercase;
}

div.ContextualPopup .Userpic {
  border: 0;
  float: none;
  padding: 25px;
}

div.ContextualPopup .Userpic img {
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

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

div.ContextualPopup li {
  padding: 0.5em;
  border-top: 1px solid var(--border-color);
  line-height: 1;
}

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

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

/*------------ 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(--border-color);
  width: 100%;
}

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

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

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

#lj_controlstrip_actionlinks {
  text-align: center;
}

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

#lj_controlstrip_search {
  text-align: right;
}

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

#lj_controlstrip input[type="submit"] {
  font-size: 1em;
  padding: 0.5em;
  color: var(--link-color);
  line-height: 1;
  font-family: var(--title-font) !important;
  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.
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=Roboto+Condensed&family=Keania+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 "2010-04-30" and "21:00" for "Entry date/time format" and "Comment date/time format".
In the same 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".

Resources: images from picjumbo

Flat | Top-Level Comments Only

This is absolutely gorgeous! Really, thank you for the wonderful work.

Thank you! ^_^

This is such a beautiful layout! Pretty much all of the journals I have use your layouts alone. They are all amazing in design and functionality. Keep up the amazing work!

Thank you so much dear! ^_^ <3

This is amazing and beautiful beyond words!

Thank you so much sweetie :3 <3

this is stunning and i am absolutely gonna keep this forever, but I have an issue. i'm using the layout here

https://voreaciously.dreamwidth.org/

and if you look at the bottom, the options for link/reply/thread are hecked up, at least for me. They look like this

https://i.gyazo.com/9e5ec5d746989521e028b5bafb2655cf.png

I was wondering how to fix this any advice would be appreciated.

Thank you for making this and all the layouts you've done and shared, I've used a ton and you always do such varied, fabulous work.

Hi! Thank you very much! ^_^ <3

The default stylesheet is missing. Go to https://www.dreamwidth.org/customize/options?group=customcss and check the "Use layout's stylesheet(s)" checkbox.

Edited 2018-07-10 15:48 (UTC)

Hi there,

thank you for your fast reply. I did, in fact, forget to check the box and that was my mistake and I must apologise for that but upon correcting it the issue is still there and the exact same. :c

nevermind I PASTED THE LINK AGAIN just to see if that would help and it did

thanks so much again, haha

You're welcome!

I was looking something like this. Is beautiful.
Can I use an image for background? I was thinking in modify the part of
body{
color:#555;
background image ('url');
font-family:Roboto, sans-serif;
font-size:14px;
line-height:1.5;
margin:0;
is like a pattern image, like this one https://st.depositphotos.com/2927209/3764/v/950/depositphotos_37643107-stock-illustration-seamless-geometric-pattern-diagonal-hearts.jpg
Can you help me?
Thanks!

Hi!

Sure, just add to body:
background-image:url(https://st.depositphotos.com/2927209/3764/v/950/depositphotos_37643107-stock-illustration-seamless-geometric-pattern-diagonal-hearts.jpg);

Love this layout, I'm using it on my new community I am working on

hhr

Thank you for this!

Thank you, i am using this theme. Not sure how to credit I am new to dreamwidth but as soon as I get the hang of it, Ill post your name anywhere i can, I added this to memorable entries for now. Thank you for your work.

thank you so much! beauty!

Thank you so much for this, I just applied it to my journal. I need something light and positive this year...

Using for my journal, graphics community and tvmovie20in20 community. I was wondering, how do you add a tags section even if it's checked it's not showing?

The tags list is hidden. Delete .module-tags_list,
.module-tags_cloud or .module-tags_multilevel from the css. It is not styled though.

Hi I did the background-image:url in the body section but now it's doing repeat images? Also can the header be bigger or is it at that set size?

Edited 2022-03-24 01:50 (UTC)

Love this layout, it's exactly the sort of thing I was looking for! Beautiful work.

Edited 2022-04-25 08:16 (UTC)

Hi, I'm not seeing header width only the height? And when I go to put my header url in, it looks cut off. Also what do we do if we want a background image instead of colors? I can't seem to find a background image url section?

Hi, this theme is so cute! I was wondering if there's a way I could change the icons to be on top of the date and time in the entries? I've been failing at trying to figure it out.

Clear

N

Re: N

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject