myrtillenne | Shiver

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

Code:

/*-------------------------------------
 
- layout - shiver (tabula rasa) - https://myrtillenne.dreamwidth.org
- icon font - material icons - https://material.io

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

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

:root{
  --text-size:16px;
  --text-color:#527385;
  --line-height:1.5;
  --body-background-color:#EFF5F5;
  --link-color:#32AACD;
  --link-hover-color:#527385;
  --icon-color:#CCECF7;
  --main-font:Oxygen, sans-serif;
  --title-font:Allerta Stencil, sans-serif;
  --header-image:url("https://rosecarmine.dreamwidth.org/file/80516.jpg");
  --header-image-width:1000px;
  --header-image-height:400px;
  --entry-background-color:#fff;
  --entry-border-color:#99D6E8;
  --sidebar-width:400px;
  --sidebar-background-color:#fff;
  --sidebar-image:url("https://rosecarmine.dreamwidth.org/file/80343.jpg");
  --sidebar-image-width:300px;
  --sidebar-image-height:400px;
  --sidebar-border-color:#99D6E8;
  --sidebar-text-color:#527385;
  --sidebar-link-color:#32AACD;
  --sidebar-link-hover-color:#527385;
  --sidebar-icon-color:#CCECF7;
}

/*--------------- 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:.25em 0;
  padding:.25em 0;
}

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

img {
  border: none;
}

hr {
  display: none;
}

blockquote{
  margin:1em 0;
  margin-left:45px;
  font-style:italic;
}

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

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

@media (min-width:800px){
  #canvas{
    border:44px solid transparent;
    padding:0 70px;
  }

#canvas:before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:40px;
    background:var(--sidebar-border-color);
    z-index:1;
    border-bottom:2px solid var(--sidebar-border-color);
  }

#canvas:after{
    content:"";
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:40px;
    background:var(--sidebar-border-color);
    border-top:2px solid var(--sidebar-border-color);
    z-index:1;
  }
}

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

#canvas > .inner:first-child{
  margin:0 auto;
}

@media (min-width:800px){
  #canvas >.inner:first-child{
    max-width:var(--header-image-width);
    margin:70px auto;
  }
}

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

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

#header{
  border:1px solid var(--entry-border-color);
  margin:10px 0;
}

@media (min-width:800px){
  #header {
    padding-top:var(--header-image-height);
    background-image:var(--header-image);
    background-repeat:no-repeat;
    background-position:top center;
    margin:80px 0;
  }
}

#header > .inner:first-child {
  background:var(--entry-background-color);
  padding:2em;
  text-align:center;
  line-height:1;
}

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

h2#subtitle{
  font-size:1em;
  text-transform:lowercase;
  font-weight:normal;
  margin:.5em 0 0;
  padding:.5em 0 0;
  border-top:1px solid var(--entry-border-color);
}

h2#pagetitle{
  display:none;
}

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

#secondary{
  background:var(--sidebar-background-color);
  color:var(--sidebar-text-color);
  border:1px solid var(--sidebar-border-color);
  margin:10px 0;
}

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

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

@media (min-width:800px){
  #secondary{
    position:fixed;
    top:0;
    left:calc(-1 * var(--sidebar-width));
    border:0;
    border-right:42px solid var(--sidebar-border-color);
    width:var(--sidebar-width);
    height:100%;
    z-index:3;
    transition:left 0.5s linear 0.5s;
    margin:0;
  }

#secondary:hover{
    left:0;
  }

#secondary:before{
    content:"menu";
    position:absolute;
    top:50%;
    right:-40px;
    margin-top:-20px;
    font-family:Material Icons;
    font-size:24px;
    width:40px;
    line-height:40px;
    text-align:center;
    cursor:pointer;
    color:var(--sidebar-border-color);
    transition:color 0.5s ease;
    background:var(--sidebar-background-color);
  }

#secondary > .inner:first-child{
    height:100%;
    box-sizing:border-box;
    position:relative;
    display:flex;
    overflow:auto;
  }
  
  .module-section-one:before {
    content:"";
    display:block;
    width:100%;
    max-width:var(--sidebar-image-width);
    height:var(--sidebar-image-height);
    margin:0 auto 1.5em;
    background-image:var(--sidebar-image);
    background-repeat:no-repeat;
    background-position:center center;
    border:10px solid var(--sidebar-border-color);
  }

#secondary .module-wrapper{
    margin:auto;
  }
}

#secondary > .inner:first-child::-webkit-scrollbar{
  width:10px;
  height:10px;
}

#secondary > .inner:first-child::-webkit-scrollbar-track{
  background:var(--sidebar-background-color);
}

#secondary > .inner:first-child::-webkit-scrollbar-thumb{
  background:var(--sidebar-border-color);
  border:3px solid var(--sidebar-background-color);
}

#secondary > .inner:first-child::-webkit-scrollbar-corner{
  background:var(--sidebar-border-color);
}

.module-section-one{
  padding:2em;
}

.module-content ul{
  margin:0;
  padding:0;
  list-style:none;
  display:inline;
  line-height:2;
}

.module-content li {
  display:inline;
}

.module-content li a{
  color:var(--sidebar-text-color);
}

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

.module-navlinks li a{
  margin-right:0.5em;
  text-transform:lowercase;
}

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

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

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

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

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

.list-item-network a:before {
  content:"people_alt";
}

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

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

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

.module-typelist h2, .module-typelist .module-content{
  display:inline;
  font-size:1em;
  font-weight:normal;
  color:var(--sidebar-text-color);
  text-transform:lowercase;
  margin-right:0.25em;
}

.module-typelist h2:before {
  content:"near_me";
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  line-height:0;
  margin-right:0.25em;
  color:var(--sidebar-icon-color);
}

.module-typelist h2:after {
  content:": ";
}

.module-typelist li{
  font-style:italic;
  margin-right:0.25em;
}

.module-typelist li:after{
  content:", ";
}

.module-typelist li:last-child:after{
  display:none;
}

.module-customtext{
  margin-top:1em;
}

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

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

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

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

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

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

.entry .entry-title, .full .comment-title{
  font-size:1.5em;
  line-height:1.2;
  padding:0 0 0.25em;
  border-bottom:1px solid var(--entry-border-color);
  margin-bottom:0.5em;
  font-weight:normal;
  font-family:var(--title-font);
}

.no-subject .entry .entry-title, .no-subject .comment-title{
  background:none;
  border:none;
  padding:0;
  margin: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(--icon-color);
  line-height:0;
}

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

.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(--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(--icon-color);
  line-height:0;
}

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

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

.entry .datetime, .comment .datetime{
  text-transform:lowercase;
}

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

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

.userpic img{
  padding:1px;
  border:5px solid var(--entry-border-color);
  background:var(--entry-background-color);
  display:block;
  max-width:50px;
  max-height:50px;
  width:auto;
  height:auto;
}

@media (min-width:800px){
  .has-userpic .userpic{
    position:absolute;
    top:-1px;
    right:-67px;
    width:62px;
  }
}

@media (min-width:1024px){
  .userpic img{
    max-width:100px;
    max-height:100px;
    width:auto;
    height:auto;
  }
  
  .has-userpic .userpic{
    position:absolute;
    top:-1px;
    right:-117px;
    width:112px;
  }
}

.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(--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(--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:2em;
}

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

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

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

.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(--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 ul {
  list-style:none;
  margin:0;
  padding:0;
  line-height:2;
}

.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(--icon-color);
  line-height:0;
}

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

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

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

.tag{
  text-transform:lowercase;
  line-height:2;
}

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

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

.tag ul li{
  display:inline;
  font-style:italic;
  margin-right:0.25em;
}

.tag:before{
  content:"#";
  color:var(--icon-color);
  font-size:22px;
  vertical-align:middle;
  font-family:arial;
  margin-right:0.25em;
  line-height:0;
}

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

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

ul.entry-management-links, ul.entry-interaction-links{
  margin:0;
  padding:0;
  display:inline;
  text-transform:lowercase;
  line-height:2;
}

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

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

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

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

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

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

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

ul.entry-interaction-links li a:before{
  font-family:Material Icons;
  font-size:22px;
  vertical-align:middle;
  color:var(--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";
}

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

.comment-pages{
  text-align:center;
  background:var(--entry-background-color);
  border:1px solid var(--entry-border-color);
  padding:1em;
  text-transform:lowercase;
  color:transparent;
}

.comment-pages b{
  font-weight:normal;
}

.comment-pages > b{
  color:var(--text-color);
  display:block;
}

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

.comment-pages.toppages{
  margin-top:5px;
}

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

.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(--icon-color);
}

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

.partial .comment{
  padding:1em;
  text-align:center;
}

ul.comment-management-links, ul.comment-interaction-links, .multiform-checkbox {
  display:inline;
  margin:0;
  padding:0;
  text-transform:lowercase;
  line-height:1;
}

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

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

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

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

#qrform{
  margin-top:1em;
}

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

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

#qrdiv .ljuser img, #talkform-from img{
  display:none;
}

#qrformdiv .qr-meta .ljuser{
  font-size:inherit;
}

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

#qrformdiv .qr-meta .ljuser b{
  font-weight:normal;
  color:var(--text-color);
}

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

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

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

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

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

.month-wrapper h3, .tags-container h2, .icons-container h2{
  font-size:1.5em;
  line-height:1.2;
  padding:0 0 0.25em;
  border-bottom:1px solid var(--entry-border-color);
  font-weight:normal;
  font-family:var(--title-font);
}

.month .footer, #primary .manage-link{
  margin-top:1.5em;
  text-transform:lowercase;
}

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

.day-date{
  display:none;
}

.month caption {
  display: none;
}

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

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

table.month th{
  text-transform:lowercase;
  font-weight:normal;
}

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

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

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

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

.month dl{
  margin:0;
}

.month dl dt{
  text-align:center;
  border-bottom:1px solid var(--entry-border-color);
  line-height:1.2;
  padding:0 0 0.25em;
  margin-bottom:1em;
}

.month dd{
  margin:0;
}

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

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

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

.month dl br{
  display:block;
}

#archive-year .navigation li, #archive-month .navigation li{
  display:inline-block;
}

#archive-year .navigation li{
  margin:0 0.5em;
  padding:0.5em 1em;
  background:var(--entry-background-color);
  border:1px solid var(--entry-border-color);
}

#archive-month .navigation ul{
  padding:0.5em 1em;
  background:var(--entry-background-color);
  border:1px solid var(--entry-border-color);
  display:inline-block;
}

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

.tags-container .contents{
  margin-top:1.5em;
}

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

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

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

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

.page-icons .bottompages{
  text-align:center;
  padding-top:1.5em;
}

.sorting-options ul{
  margin:0.5em 0 0;
  padding:0;
  text-transform:lowercase;
  text-align:center;
  line-height:1;
}

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

.icon{
  overflow:hidden;
  border-bottom:1px solid var(--entry-border-color);
  padding:1em 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;
}

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

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

.icon-pages p{
  margin:0;
}

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

.topnav{
  display:none;
}

.navigation{
  text-align:center;
  margin:10px 0;
}

.navigation ul{
  margin:0 auto;
  padding:0;
}

#entries .navigation{
  background:var(--sidebar-border-color);
  border-top:2px solid var(--sidebar-border-color);
  margin:0;
}

@media (min-width:800px){
  #entries .navigation{
    position:fixed;
    width:100%;
    left:0;
    bottom:0;
    z-index:2;
    margin:0;
    padding:0;
    height:40px;
  }
}

#entries .navigation ul{
  list-style:none;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}

li.page-back a, li.page-forward a{
  display:block;
  width:40px;
  height:40px;
  padding:0;
  overflow:hidden;
}

li.page-back a:before, li.page-forward a:before{
  display:block;
  font-family: Material Icons;
  font-size:24px;
  width: 40px;
  height:40px;
  line-height:40px;
  text-align:center;
  color:var(--sidebar-border-color);
}

li.page-back a:before{
  content:"arrow_back";
  background:var(--sidebar-background-color);
}

li.page-forward a:before{
  content:"arrow_forward";
  background:var(--sidebar-background-color);
}

li.page-separator{
  color:transparent;
  width:2px;
}

.noentries{
  display:none;
}

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

#footer{
  background:var(--sidebar-border-color);
  text-align:center;
  line-height:1;
  border-top:2px solid var(--sidebar-border-color);
}

@media (min-width:800px){
  #footer{
    position:fixed;
    width:40px;
    height:100%;
    top:0;
    right:0;
    padding:0;
    border-top:0;
    border-left:2px solid var(--sidebar-border-color);
    z-index:2;
  }

#footer .inner{
    position:absolute;
    top:50%;
    right:0;
    margin-top:-20px;
  }
}

.page-top{
  width:40px;
  height:40px;
  overflow:hidden;
  margin:0 auto;
}

.page-top a:before{
  display:block;
  font-family:Material Icons;
  font-size:24px;
  width: 40px;
  height:40px;
  line-height:40px;
  text-align:center;
  content: "arrow_upward";
  background:var(--sidebar-background-color);
}

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

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

div.ContextualPopup{
  color:var(--text-color);
  background:var(--entry-background-color);
  border:1px solid var(--entry-border-color);
  padding:0;
  font-family:inherit;
  border-radius:0;
  width:140px;
}

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

div.ContextualPopup .Relation{
  font-size:1em;
  font-weight:normal;
  text-transform:lowercase;
  margin:0;
  padding:0.5em 0.25em;
  border-top:1px solid var(--entry-border-color);
  text-align:center;
}

div.ContextualPopup .Userpic{
  float:none;
  margin:0;
  border:9px solid var(--entry-border-color);
  text-align:center;
  padding:0;
}

div.ContextualPopup .Userpic img{
  max-width:100px;
  max-height:100px;
  width:auto;
  height:auto;
  padding:10px;
}

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

div.ContextualPopup li{
  border-top:1px solid var(--entry-border-color);
  padding:0.25em;
  text-transform:lowercase;
}

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

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

@media (min-width:800px){
  #lj_controlstrip{
    background:var(--sidebar-background-color);
    position:fixed;
    z-index:3;
    padding:.75em 40px;
    border-bottom:0;
    width:100%;
    box-sizing:border-box;
    transform:translateY(-100%);
    transition:transform 0.5s, z-index 0.5s step-end;
  }
  
  #lj_controlstrip:before{
    content:"";
    display:block;
    position:absolute;
    bottom:-42px;
    height:42px;
    width:100%;
    left:0;
    background:var(--sidebar-border-color);
  }

#lj_controlstrip:after{
    content:"settings";
    position:absolute;
    bottom:-40px;
    height:40px;
    width:40px;
    line-height:40px;
    margin-left:-20px;
    left:50%;
    cursor:pointer;
    font-family:Material Icons;
    font-size:24px;
    background:var(--sidebar-background-color);
    color:var(--sidebar-border-color);
    text-align:center;
  }

#lj_controlstrip:hover{
    transform:translateY(0);
    z-index:9;
    transition: transform 0.5s, z-index 0.5s step-start;
  }
}

#lj_controlstrip > div{
  font-family:var(--main-font);
  font-size:var(--text-size);
  line-height:var(--line-height);
  padding:.25em .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(--sidebar-link-color);
}

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

#lj_controlstrip_actionlinks{
  text-align:center;
}

#lj_controlstrip_statustext{
  color:var(--sidebar-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(--sidebar-border-color);
  background:transparent!important;
}

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

#lj_controlstrip_userpic img{
  border:4px solid var(--sidebar-border-color)!important;
  padding:1px!important;
  background:var(--sidebar-background-color);
}

#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 "Tabula Rasa" and apply any theme.
Choose one of the 1 Column page setups.
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, paste the following https://fonts.googleapis.com/css2?family=Oxygen&family=Allerta+Stencil&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab. Set "Navigation" to number 2, "Links list" to number 4 and "Custom text" to number 13. Uncheck the other modules.
Click on the "Presentation" tab; in the "Additional options" section look 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". Select "text-only" for both.

Resources:

icon font by Google
images from unsplash.com

Flat | Top-Level Comments Only

This is absolutely gorgeous! Am using it for my main journal - thank you so much

So pretty :D

Gorgeous layout.

Love this, where would we put a background image in it?

Hi, in the css you can add a new line to body and type background-image:url( link to your image );
If you want it to fill the entire page, also add background-size:cover; and background-attachment:fixed;
It should look like this:
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;
background-image:url( link to your image );
background-size:cover;
background-attachment:fixed;
}

Shiver

no subject

no subject

no subject

no subject

no subject