myrtillenne | Circle

sidebar image (260x260px)
default icon, navigation links, links list, tags list, custom text
comment pages
icon pages

Code:

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

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

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

:root {
  --text-size: 16px;
  --line-height: 1.5;
  --main-font: Lora, serif;
  --title-font: Lora, serif;
  --background-color: #cfddeb;
  --text-color: #454750;
  --link-color: #305fc0;
  --link-hover-color: #6f99c4;
  --title-color: #1e3a77;
  --title-background-color: rgba(255, 255, 255, 0.6);
  --entry-width: 1000px;
  --entry-background-color: #fff;
  --entry-title-color: #305fc0;
  --entry-title-hover-color: #6f99c4;
  --blockquote-background-color: #6f99c4;
  --blockquote-text-color: #eaf0f7;
  --blockquote-link-color: #fff;
  --blockquote-link-hover-color: #eaf0f7;
  --textarea-background-color: #eaf0f7;
  --textarea-text-color: #1e3a77;
  --userpic-border-color: #1e3a77;
  --icon-color: #5096e2;
  --icon-hover-color: #305fc0;
  --commentcount-color: #fff;
  --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/124564.jpg");
}

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

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

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

q {
  font-style: italic;
}

blockquote {
  background: var(--blockquote-background-color);
  color: var(--blockquote-text-color);
  padding: 1em;
  margin: 1em 0 50px;
  position: relative;
  border-radius: 10px;
}

blockquote:before {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 25px;
  padding: 10px;
  border-radius: 50%;
  background: var(--blockquote-background-color);
}

blockquote:after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 45px;
  padding: 5px;
  border-radius: 50%;
  background: var(--blockquote-background-color);
}

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

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

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

#canvas {
  margin: 50px auto;
  padding: 0 5px;
}

@media (min-width: 1024px) {
  #canvas {
    max-width: calc(var(--entry-width) + 390px);
    padding: 0 50px;
    position: relative;
  }
}

@media (min-width: 1280px) {
  #canvas {
    max-width: calc(var(--entry-width) + 510px);
  }
}

@media (min-width: 1024px) {
  #content {
    border-left: 340px solid transparent;
  }

#primary {
    width: 100%;
    margin-right: -100%;
    margin-left: 0;
    margin-top: -335px;
    float: left;
  }

#primary > .inner:first-child {
    padding-left: 50px;
  }

#secondary {
    float: left;
    width: 340px;
    margin-left: -340px;
    margin-bottom: 30px;
    clear: none;
  }
}

#content-footer {
  clear: both;
}

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

#header {
  padding-bottom: 55px;
  position: relative;
  text-align: center;
  width: 340px;
  margin: 20px auto;
}

@media (min-width: 1024px) {
  #header {
    margin: 0;
  }
}

#header > .inner:first-child {
  width: 260px;
  height: 260px;
  display: flex;
  background: var(--sidebar-image);
  background-size: cover;
  background-position: center center;
  border: 10px solid var(--entry-background-color);
  border-radius: 50%;
  margin-left: 60px;
}

#journaltitles-container {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s;
  background: var(--title-background-color);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#journaltitles-container:hover {
  opacity: 1;
}

h1#title {
  font-size: 1.2em;
  font-family: var(--title-font);
  font-style: italic;
  padding: 0 2em;
  margin: 0;
  line-height: 1.2;
}

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

h2#subtitle {
  font-size: 1em;
  font-family: var(--main-font);
  padding: 0;
  margin: 0.5em 2em 0;
  font-weight: normal;
  color: var(--title-color);
  line-height: 1.2;
}

h2#pagetitle {
  display: none;
}

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

.module-section-header {
  position: absolute;
  left: 0;
  bottom: 0;
}

.module-navlinks li {
  list-style: none;
  float: left;
  width: 40px;
  height: 40px;
  border: 3px double var(--entry-background-color);
  padding: 2px;
  line-height: 1;
  border-radius: 50%;
  transition: border-color 0.6s;
}

.module-navlinks li.list-item-recent {
  margin-top: -236px;
  margin-left: 12px;
}

.module-navlinks li.list-item-archive {
  margin-top: -177px;
  margin-left: 0;
}

.module-navlinks li.list-item-read {
  margin-top: -118px;
  margin-left: 6px;
}

.module-navlinks li.list-item-tags {
  margin-top: -65px;
  margin-left: 33px;
}

.module-navlinks li.list-item-memories {
  margin-top: -24px;
  margin-left: 76px;
}

.module-navlinks li.list-item-userinfo {
  margin-top: 0;
  margin-left: 5px;
}

.module-navlinks li:hover {
  border-color: var(--userpic-border-color);
}

.module-navlinks li a {
  display: block;
  font-size: 0;
  height: 24px;
  width: 24px;
  padding: 8px;
  background: var(--entry-background-color);
  border-radius: 50%;
  color: var(--icon-color);
}

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

.module-navlinks li a:before {
  font-family: Material Icons;
  font-size: 24px;
}

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

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

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

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

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

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

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

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

@media (min-width: 1024px) {
  #entries {
    margin-top: -5px;
  }
}

#entries .entry-wrapper .separator-before,
#comments .comment-wrapper .separator-before {
  margin-top: 5px;
}

@media (min-width: 1280px) {
  .entry,
  .full .comment {
    padding-right: 120px;
    position: relative;
  }
}

.entry > .inner:first-child,
.comment > .inner:first-child {
  background: var(--entry-background-color);
  border-radius: 10px;
}

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

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

.entry .entry-title,
.full .comment-title {
  padding: 0;
  margin: 0 0 0.5em;
  font-family: var(--title-font);
  font-style: italic;
  font-size: 1.2em;
  line-height: 1.2;
  color: var(--entry-title-color);
}

.entry .entry-title a,
.full .comment-title a {
  color: var(--entry-title-color);
}

.entry .entry-title a:hover,
.full .comment-title a:hover {
  color: var(--entry-title-hover-color);
}

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

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

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

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

.header .datetime {
  text-transform: lowercase;
}

.header .datetime:before {
  content: "schedule";
  padding-right: 4px;
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--icon-color);
}

.access-filter,
.restrictions {
  float: right;
  color: var(--icon-color);
}

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

.security-protected .access-filter:before {
  content: "lock";
  font-family: Material Icons;
  font-size: 22px;
  line-height: 22px;
  vertical-align: middle;
}

.security-private .access-filter:before {
  content: "do_not_disturb_alt";
  font-family: Material Icons;
  font-size: 22px;
  line-height: 22px;
  vertical-align: middle;
}

.restrictions-NSFW .restrictions:before {
  content: "warning";
  font-family: Material Icons;
  font-size: 22px;
  line-height: 22px;
  vertical-align: middle;
}

.restrictions-18 .restrictions:before {
  content: "18mp";
  font-family: Material Icons;
  font-size: 22px;
  line-height: 22px;
  vertical-align: middle;
}

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

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

.has-userpic .userpic {
  float: right;
  shape-outside: circle(50%) padding-box;
  padding-left: 1em;
}

.has-userpic .userpic img {
  border-radius: 50%;
  border: 5px solid var(--blockquote-background-color);
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
  display: block;
}

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

@media (min-width: 1280px) {
  .entry .userpic,
  .comment .userpic {
    position: absolute;
    width: 110px;
    top: 0;
    right: 0;
    padding: 0;
  }

.has-userpic .userpic:before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 15px;
    padding: 15px;
    border-radius: 50%;
    background: var(--userpic-border-color);
  }

.has-userpic .userpic:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--userpic-border-color);
  }

.has-userpic .userpic img {
    border: 5px solid var(--userpic-border-color);
  }
}

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

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

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

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

.poster.empty {
  display: none;
}

.poster b {
  font-weight: normal;
}

.poster .ljuser img {
  display: none;
}

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

@media (min-width: 800px) {
  .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;
  margin-right: 5px;
  color: var(--icon-color);
}

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

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

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

.metadata {
  padding-bottom: 2em;
}

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

.metadata-label {
  display: none;
}

#metadata-music:before {
  content: "speaker";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  margin-right: 5px;
  color: var(--icon-color);
}

#metadata-mood:before {
  content: "sentiment_satisfied_alt";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  margin-right: 5px;
  color: var(--icon-color);
}

#metadata-location:before {
  content: "location_on";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  margin-right: 5px;
  color: var(--icon-color);
}

#metadata-xpost:before {
  content: "add_location";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  margin-right: 5px;
  color: var(--icon-color);
}

.tag ul li {
  list-style: inside;
  margin-right: 1em;
}

.entry div.tag {
  padding: 0 2em 2em;
}

.tag-text {
  display: none;
}

.tag ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.tag-nav-trigger {
  float: right;
}

ul.entry-management-links {
  padding: 0;
  margin: 0;
}

ul.entry-management-links.icon-links {
  float: left;
  line-height: 1;
}

ul.entry-management-links.icon-links li {
  float: left;
  list-style: none;
  margin-top: 5px;
  margin-right: 5px;
}

ul.entry-management-links li a img {
  display: none;
}

ul.entry-management-links.icon-links li a {
  display: block;
  color: var(--icon-color);
  border-radius: 50%;
  padding: 6px;
  width: 22px;
  height: 22px;
  background: var(--entry-background-color);
}

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

ul.entry-management-links.icon-links li a:before {
  font-family: Material Icons;
  font-size: 22px;
}

.icon-links .link_prev a:before {
  content: "arrow_back";
}

.icon-links .edit_entry a:before {
  content: "edit";
}

.icon-links .edit_tags a:before {
  content: "local_offer";
}

.icon-links .mem_add a:before {
  content: "favorite";
}

.icon-links .tell_friend a:before {
  content: "email";
}

.icon-links .watch_comments a:before {
  content: "add_alert";
}

.icon-links .link_next a:before {
  content: "arrow_forward";
}

ul.entry-management-links.text-links {
  padding: 0 2em 2em;
}

ul.entry-management-links.text-links li {
  padding: 0 0.25em;
  display: inline;
}

ul.entry-interaction-links {
  margin: 0;
  padding: 0;
  float: left;
  line-height: 1;
}

ul.entry-interaction-links li {
  float: left;
  list-style: none;
  margin-top: 5px;
  margin-right: 5px;
}

li.entry-permalink a {
  font-size: 0;
  width: 22px;
  height: 22px;
  padding: 6px;
  display: block;
  background: var(--entry-background-color);
  border-radius: 50%;
  color: var(--icon-color);
}

li.entry-replylink a {
  font-size: 0;
  width: 22px;
  height: 22px;
  padding: 6px;
  display: block;
  background: var(--entry-background-color);
  border-radius: 50%;
  color: var(--icon-color);
}

li.entry-permalink a:hover {
  color: var(--icon-hover-color);
}

li.entry-replylink a:hover {
  color: var(--icon-hover-color);
}

li.entry-permalink a:before,
li.entry-replylink a:before {
  font-family: Material Icons;
  font-size: 22px;
}

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

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

li.entry-readlink a {
  font-size: 24px;
  font-family: var(--title-font);
  font-weight: bold;
  font-style: italic;
  padding: 5px;
  height: 24px;
  color: var(--commentcount-color);
  display: block;
}

.entry-wrapper .separator-after {
  clear: both;
}

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

.comment > .inner:first-child {
  min-width: 15em;
  padding: 2em;
}

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

.comment-pages {
  text-align: center;
  margin: 5px 0;
  background: var(--entry-background-color);
  border-radius: 10px;
  padding: 0.5em;
}

@media (min-width: 1280px) {
  .comment-pages,
  .partial {
    margin-right: 120px;
  }
}

.comment .header {
  float: left;
}

.comment-thread:not(.comment-depth-1) .thread-depth::before {
  content: "subdirectory_arrow_right";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--icon-color);
  margin-right: 5px;
}

.no-subject .comment .comment-title,
.partial .comment .comment-title {
  margin: 0;
}

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

.full .comment .poster {
  clear: left;
  display: block;
  padding-top: 2em;
}

.poster-ip:before {
  content: "[ ";
}

.poster-ip:after {
  content: " ]";
}

.comment .contents {
  padding-bottom: 2em;
}

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

ul.comment-management-links {
  margin: 0;
  padding: 0;
}

ul.comment-management-links li {
  display: inline-block;
}

ul.comment-management-links.icon-links li {
  width: 22px;
  overflow: hidden;
}

ul.comment-management-links li a img {
  display: none;
}

ul.comment-management-links.icon-links li a {
  color: var(--icon-color);
}

ul.comment-management-links.icon-links li a:hover {
  color: var(--icon-hover-color);
}

ul.comment-management-links.icon-links li a:before {
  font-family: Material Icons;
  font-size: 22px;
  line-height: 22px;
}

.icon-links .edit_comment a:before {
  content: "edit";
}

.icon-links .delete_comment a:before {
  content: "delete_forever";
}

.icon-links .screen_comment a:before {
  content: "visibility_off";
}

.icon-links .unscreen_comment a:before {
  content: "visibility";
}

.icon-links .freeze_thread a:before {
  content: "ac_unit";
}

.icon-links .unfreeze_thread a:before {
  content: "wb_sunny";
}

ul.comment-interaction-links {
  margin: 0;
  padding: 0;
}

ul.comment-interaction-links li {
  display: inline;
  padding-right: 0.25em;
}

.multiform-checkbox {
  float: right;
}

.partial .comment .inner {
  padding: 1em;
}

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

.entry #qrformdiv {
  float: left;
}

#qrform {
  padding-top: 2em;
}

.entry #qrform {
  margin-top: 5px;
  background: var(--entry-background-color);
  padding: 2em;
  border-radius: 10px;
}

#qrdiv input,
#qrdiv select,
#qrdiv textarea {
  background: var(--textarea-background-color);
  border: 0;
  color: var(--textarea-text-color);
  font-size: var(--text-size);
  font-family: var(--main-font);
  border-radius: 10px;
}

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

#postform {
  padding: 2em;
  margin-top: 5px;
  background: var(--entry-background-color);
  box-shadow: 0 0 2px var(--shadow-color);
  border-radius: 10px;
}

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

.bottomcomment label,
.bottomcomment select,
.bottomcomment input {
  background: var(--entry-background-color);
  border: 0;
  font-size: var(--text-size);
  color: var(--text-color);
  font-family: var(--main-font);
  padding: 0.5em;
  margin: 5px 5px 0 0;
  border-radius: 10px;
  display: inline-block;
}

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

.month-wrapper,
#archive-month,
.tags-container,
.icons-container {
  padding: 2em;
  background: var(--entry-background-color);
  border-radius: 10px;
}

@media (min-width: 1280px) {
  .month-wrapper,
  #archive-month,
  .tags-container,
  .icons-container {
    margin-right: 120px;
  }
}

.month-wrapper {
  margin-bottom: 30px;
}

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

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-family: var(--title-font);
  font-size: 1.2em;
  font-style: italic;
  padding: 0;
  margin: 0;
  color: var(--entry-title-color);
}

.manage-link,
.month .footer {
  margin-top: 2em;
  text-align: center;
}

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

.month caption {
  display: none;
}

.month table {
  border: none;
  text-align: center;
  border-spacing: 1px;
}

table.month {
  margin: 15px auto 0;
}

table.month td {
  width: 3.25em;
  line-height: 3.25em;
  height: 3.25em;
  position: relative;
}

table.month th {
  font-family: var(--title-font);
  font-weight: normal;
  font-style: italic;
}

table.month td.day-has-entries {
  position: relative;
}

.day .label {
  display: block;
  background: var(--textarea-background-color);
  color: var(--textarea-text-color);
  border-radius: 50%;
  width: 3.25em;
  height: 3.25em;
}

.day.day-has-entries .label {
  background: var(--blockquote-background-color);
  color: var(--blockquote-text-color);
}

table.month .day-has-entries p {
  left: 0;
  top: 0;
  position: absolute;
  z-index: 9;
  height: 100%;
  width: 100%;
  display: block;
  margin: 0;
}

table.month .day-has-entries p a {
  color: transparent;
  height: 100%;
  width: 100%;
  display: block;
}

.month dl {
  margin: 0;
}

.month dl dt {
  font-weight: bold;
  width: 3em;
  line-height: 3em;
  background: var(--textarea-background-color);
  border-radius: 50px;
  text-align: center;
  float: left;
  font-family: var(--title-font);
  font-style: italic;
  font-size: 1.2em;
}

.month dl dt a {
  color: var(--textarea-text-color);
}

.month dd {
  margin-left: 5em;
  padding-bottom: 2em;
  overflow: hidden;
}

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

.day-date {
  display: none;
}

#archive-year .navigation li {
  display: inline-block;
  height: 3em;
  width: 3em;
  background: var(--entry-background-color);
  line-height: 3em;
  border-radius: 50%;
}

#archive-month .navigation input,
#archive-month .navigation select {
  border: 0;
  background: var(--textarea-background-color);
  color: var(--textarea-text-color);
  font-size: var(--text-size);
  font-family: var(--main-font);
  padding: 0.5em;
  border-radius: 10px;
}

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

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

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

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

.icon {
  margin-top: 1em;
  display: flex;
  flex-wrap: wrap;
}

.icon-info {
  border-radius: 10px;
  padding: 1em;
  flex: 1;
  margin-right: 40px;
  background: var(--textarea-background-color);
  color: var(--textarea-text-color);
  position: relative;
}

.icon-info:before {
  content: "";
  position: absolute;
  right: -20px;
  top: 30px;
  padding: 7px;
  background: var(--textarea-background-color);
  border-radius: 50%;
}

.icon-info:after {
  content: "";
  position: absolute;
  right: -30px;
  top: 20px;
  padding: 5px;
  background: var(--textarea-background-color);
  border-radius: 50%;
}

.icon-image {
  order: 2;
}

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

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

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

.icon-pages p {
  margin: 0;
}

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

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

.module {
  position: relative;
  clear: right;
}

.module-typelist,
.module-customtext,
.module-tags_list,
.module-tags_cloud,
.module-tags_multilevel {
  background: var(--entry-background-color);
  border-radius: 10px;
  margin-bottom: 65px;
  padding: 2em;
}

.module-typelist:before,
.module-tags_list:before,
.module-tags_cloud:before,
.module-tags_multilevel:before {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 20px;
  padding: 15px;
  border-radius: 50%;
  background: var(--entry-background-color);
}

.module-typelist:after,
.module-tags_list:after,
.module-tags_cloud:after,
.module-tags_multilevel:after {
  content: "";
  position: absolute;
  bottom: -55px;
  left: 45px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--entry-background-color);
}

.module-customtext:before {
  content: "";
  position: absolute;
  bottom: -40px;
  right: 20px;
  padding: 15px;
  border-radius: 50%;
  background: var(--entry-background-color);
}

.module-customtext:after {
  content: "";
  position: absolute;
  bottom: -55px;
  right: 45px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--entry-background-color);
}

.module h2 {
  padding: 0;
  margin: 0 0 1em;
  font-family: var(--title-font);
  font-style: italic;
  font-size: 1.2em;
  color: var(--entry-title-color);
}

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

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

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

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

.module-content li {
  margin-top: 0.25em;
}

.module-userprofile {
  text-align: center;
  margin-bottom: 20px;
}

.module .userpic {
  display: inline-block;
  position: relative;
}

@media (min-width: 1024px) {
  .module-userprofile {
    float: right;
    margin: -73px 40px 20px 0;
  }
}

.module .userpic img {
  border-radius: 50%;
  background: var(--userpic-border-color);
  border: 5px solid var(--userpic-border-color);
}

.module .userpic:before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 15px;
  border-radius: 50px;
  background: var(--userpic-border-color);
}

.module .userpic:after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: -15px;
  width: 15px;
  height: 15px;
  border-radius: 50px;
  background: var(--userpic-border-color);
}

.module-userprofile .module-header,
.journal-name,
.journal-website-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;
}

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

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

@media (min-width: 1280px) {
  .navigation {
    margin-right: 120px;
  }
}

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

.navigation li {
  display: inline-block;
}

#entries .navigation {
  margin-top: 30px;
  line-height: 1;
}

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

@media (min-width: 1024px) {
  #entries .navigation {
    position: absolute;
    width: 340px;
    left: 0;
    bottom: 0;
    margin: 0 50px;
  }

#entries .navigation ul {
    width: 112px;
    margin: 0 auto;
    position: relative;
  }

#entries .navigation ul:before {
    content: "";
    position: absolute;
    left: 0;
    background: var(--entry-background-color);
    padding: 17px;
    z-index: -2;
    border-radius: 50%;
  }

#entries .navigation ul:after {
    content: "";
    position: absolute;
    right: 0;
    background: var(--entry-background-color);
    padding: 17px;
    z-index: -2;
    border-radius: 50%;
  }

li.page-back {
    float: left;
  }

li.page-forward {
    float: right;
  }
}

li.page-back a,
li.page-forward a {
  font-size: 0;
  display: block;
  background: var(--entry-background-color);
  width: 22px;
  height: 22px;
  padding: 6px;
  border-radius: 50%;
  color: var(--icon-color);
}

li.page-back a:hover,
li.page-forward a:hover {
  color: var(--icon-hover-color);
}

li.page-back a:before {
  content: "arrow_back";
  font-family: Material Icons;
  font-size: 22px;
}

li.page-forward a:before {
  content: "arrow_forward";
  font-family: Material Icons;
  font-size: 22px;
}

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

#footer {
  margin-top: 30px;
  line-height: 1;
}

@media (min-width: 1024px) {
  #footer {
    position: absolute;
    width: 34px;
    height: 34px;
    bottom: 0;
    left: 153px;
    margin: 0 50px;
  }
}

.page-top a {
  font-size: 0;
  color: var(--icon-color);
  display: block;
  width: 22px;
  height: 22px;
  padding: 6px;
  background: var(--entry-background-color);
  border-radius: 50%;
  margin: 0 auto;
}

.page-top a:hover {
  color: var(--icon-hover-color);
}

.page-top a:before {
  content: "arrow_upward";
  font-family: Material Icons;
  font-size: 22px;
}

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

div.ContextualPopup {
  color: var(--text-color);
  background: var(--entry-background-color);
  border: 0;
  padding: 0;
  font-family: inherit;
  border-radius: 10px;
  padding: 1.5em;
}

div.ContextualPopup .Relation {
  font-size: 1.2em;
  font-family: var(--title-font);
}

div.ContextualPopup .Userpic {
  border: 0;
  position: relative;
}

div.ContextualPopup .Userpic img {
  border: 5px solid var(--blockquote-background-color);
  border-radius: 50%;
}

div.ContextualPopup .Userpic:before {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 10px;
  padding: 10px;
  border-radius: 50px;
  background: var(--blockquote-background-color);
}

div.ContextualPopup .Userpic:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;
  border-radius: 50px;
  background: var(--blockquote-background-color);
}

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

div.ContextualPopup .Relation {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
}

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

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

#lj_controlstrip {
  background: var(--entry-background-color);
  color: var(--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(--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: 0;
  background: var(--textarea-background-color) !important;
  font-size: var(--text-size) !important;
  color: var(--textarea-text-color) !important;
  font-family: var(--main-font) !important;
  border-radius: 10px;
}

#lj_controlstrip input[type="submit"] {
  border: 0;
  background: transparent !important;
  color: var(--text-color) !important;
  font-family: var(--title-font);
  font-style: italic;
  padding: 0.25em;
}

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

#lj_controlstrip .ljuser img {
  display: none;
}

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

#lj_controlstrip_userpic a img {
  border-radius: 50%;
  border: 3px solid var(--blockquote-background-color);
}

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 the 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 "Text" tab; in the "Entry" section change the text for "Text to read comments" and "Text to read comments from Your Reading page" to 1//#.
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout".

Credits:

icon font by Google
image from unsplash.com

Flat | Top-Level Comments Only

This looks great! Will credit when I use.

This is pretty. I'm now using it and have credited you in my bio/about page.

*update*
I used this for the bellarke dw site. :) Kudos.

Edited 2015-06-14 06:51 (UTC)

A beautiful layout.

A question for you: does the network page only not show on the preview here because this is a community? Is there a way to cut it off on an individual user's layout as well?

Thank you!

Network pages are available to paid accounts.

To remove the link you have to change a part of the code.

Replace this

with

Thank you so much for your assistance! That worked like an absolute dream and looks so much cleaner.

Thanks!

You're welcome!

I love this! I'll credit you in my profile (I truly wish there were more good layout creators out there, yours are gorgeous! Thank you for sharing with us.)

Circle

no subject

no subject

no subject

no subject

no subject

no subject

no subject