myrtillenne | Explorer

header image (800x300px)
default icon, navigation links, links list, custom text
comment pages
icon pages

Code:

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

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

:root{
  --text-size:16px;
  --text-color:#BC9EB6;
  --line-height:1.5;
  --body-background-color:#BE6CF4;
  --background-image:url("https://rosecarmine.dreamwidth.org/file/84445.jpg");
  --link-color:#F260C7;
  --link-hover-color:#BE6CF4;
  --main-font:Space Grotesk, sans-serif;
  --title-font:Electrolize, sans-serif;
  --title-shadow-color:#000;
  --header-image:url("https://rosecarmine.dreamwidth.org/file/83799.jpg");
  --header-image-width:800px;
  --header-image-height:300px;
  --entry-background-color:#281B38;
  --entry-border-color:#BE6CF4;
  --sidebar-background-color:rgba(0,0,0,0.6);
  --sidebar-text-color:#BC9EB6;
  --sidebar-link-color:#BE6CF4;
  --sidebar-link-hover-color:#F260C7;
  --sidebar-link-background-color:#000;
}

/*--------------- 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 ---------------*/

html, body{
  height:100%;
}

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

img{
  border: none;
}

hr{
  display: none;
}

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

@media (min-width:800px){
  body{
    background-image:var(--background-image);
    background-size:cover;
    background-attachment:fixed;
    background-position:center center;
  }
}

html body{
  margin-left:0;
  margin-right: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{
  border-top:1px dashed var(--entry-border-color);
  border-bottom:1px dashed var(--entry-border-color);
  margin:1.5em 0 1.5em 35px;
  padding:1em 0;
  font-style:italic;
  position:relative;
}

blockquote:before{
  content:"format_quote";
  font-family:Material Icons;
  font-size:30px;
  vertical-align:middle;
  color:var(--entry-icon-color);
  position:absolute;
  top:-11px;
  left:-35px;
  line-height:22px;
  color:var(--link-color);
  font-style:normal;
}

blockquote:after{
  content:"format_quote";
  font-family:Material Icons;
  font-size:30px;
  vertical-align:middle;
  color:var(--entry-icon-color);
  position:absolute;
  bottom:-11px;
  left:-35px;
  line-height:22px;
  color:var(--link-color);
  font-style:normal;
}
    
/*--------------- content ---------------*/

#canvas{
  min-height:100%;
  position:relative;
}

@media (min-width:800px){
  #canvas{
    border-left:190px solid var(--sidebar-background-color);
    max-width:calc(var(--header-image-width) + 100px + 4em);
    margin:0 auto;
  }
}

@media (min-width:1024px){
  #canvas{
    border-right:190px solid var(--sidebar-background-color);
  }
}

#canvas:after{
  content:"";
  display:block;
  clear:both;
}

#primary{
  position:relative;
}

#primary:after{
  content:"";
  display:block;
  clear:both;
}

#tertiary{
  background:var(--sidebar-background-color);
}

@media (min-width:800px){
  #primary{
    float:left;
    width:100%;
    margin-right:-100%;
    margin-left:0;
  }
  
  #tertiary{
    float:left;
    width:190px;
    margin-left:-190px;
    background:transparent;
  }
}

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

#header{
  padding-top:20px;
  clear:both;
}

@media (min-width:800px){
  #header{
    padding-top:100px;
    margin:0 50px;
  }
  
  #header:after{
    content:"";
    display:block;
    height:var(--header-image-height);
    background-color:var(--entry-background-color);
    background-image:var(--header-image);
    background-repeat:no-repeat;
    background-position:center center;
    border-left:2em solid var(--entry-background-color);
    border-right:2em solid var(--entry-background-color);
    border-bottom:1.5em solid var(--entry-background-color);
  }
}

#header > .inner{
  background:var(--entry-background-color);
  border-radius:3px 3px 0 0;
  padding:2em 2em 1.5em;
  text-align:center;
}

h1#title {
  font-family:var(--title-font);
  font-size:1.5em;
  text-shadow:0 .75em 0 var(--title-shadow-color);
  line-height:1.2;
}

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

h2#pagetitle {
    display:none;
}

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

.entry{
  margin-bottom:20px;
  background:var(--entry-background-color);
  border-radius:3px;
  padding:0 2em 2em;
}

@media (min-width:800px){
  .entry{
    margin:0 50px 100px;
    border-radius:3px;
    position:relative;
    clear:both;
  }
}

.entry .header, .comment .header{
  float:left;
  width:100%;
}

.entry .header .inner, .comment .header .inner{
  margin-bottom:2em;
  padding:2em 0 1.5em;
  border-bottom:1px dashed var(--entry-border-color);
  text-align:center;
}

.entry .entry-title {
  font-family:var(--title-font);
  font-size:1.5em;
  line-height:1.2;
  text-shadow:0 .75em 0 var(--title-shadow-color);
}

.no-subject .entry .entry-title {
  background:none;
  border:none;
}

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

.entry .datetime, .entry .datetime a, .comment .header .datetime{
  font-family:var(--title-font);
  text-transform:uppercase;
  color:var(--text-color);
}

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

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

.security-protected .access-filter:before{
  content:"[LOCKED]";
}

.security-private .access-filter:before{
  content:"[PRIVATE]";
}

.restrictions-NSFW .restrictions:before{
  content:"[NSFW]";
}

.restrictions-18 .restrictions:before{
  content:"[18+]";
}

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

.entry .userpic img, .comment .userpic img{
  max-width:50px;
  max-height:50px;
  width:auto;
  height:auto;
  border-radius:2px;
  box-shadow:0 4px 0 -2px var(--title-shadow-color);
}

@media (min-width:1024px){
  .entry .userpic, .comment .userpic{
    width:190px;
    margin-right:calc(-240px - 2em);
    margin-left:0;
  }
  
  .entry .userpic img, .comment .userpic img{
    max-width:100px;
    max-height:100px;
    display:block;
    padding:25px;
    background:var(--sidebar-link-background-color);
    margin:0 auto;
    box-shadow:none;
  }
}

.entry .poster{
  font-size:0;
  font-family:var(--title-font);
}

.full .comment .poster, .poster-ip{
  font-family:var(--title-font);
  margin-right:.5em;
}

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

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

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

.poster .ljuser img{
  display:none;
}

.poster .ljuser{
  white-space:normal!important;
}

.poster{
  word-wrap:break-word;
}

@media (min-width:1024px){
  .entry .poster, .full .comment .poster, .poster-ip{
    float:right;
    display:block;
    width:190px;
    margin-right:calc(-240px - 2 * var(--text-size));
    text-align:center;
    clear:right;
    padding-top:5px;
    line-height:1.5;
    color:var(--sidebar-text-color);
  }
  
  .entry .poster .ljuser{
    display:block;
    margin:0;
  }
  
  .poster a{ color:var(--sidebar-text-color); }
}

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

@media (min-width:1024px){
  .entry-content, .comment-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 ul {
  display:inline;
  list-style:none;
  margin:0;
  padding:0;
}

.metadata li, .entry .tag{
  margin-top:.5em;
}

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

.tag ul li{
  display:inline;
}

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

ul.entry-management-links {
  border-top:1px dashed var(--entry-border-color);
  margin:2em 0 0;
  padding:1.5em 0 0;
  font-family:var(--title-font);
  line-height:1.2;
  clear:right;
}

ul.entry-interaction-links {
  margin:0;
  padding:0;
  line-height:1.2;
  font-family:var(--title-font);
}

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

@media (min-width:1024px){
  ul.entry-interaction-links{
    position:absolute;
    width:190px;
    list-style:none;
    text-align:center;
    right:-240px;
    bottom:0;
  }

ul.entry-interaction-links li{
    display:block;
    list-style:none;
    margin:.25em 20px 0;
  }
  
  ul.entry-interaction-links li a{
    display:block;
    padding:0.25em;
    border-radius:2px;
    background:var(--sidebar-link-background-color);
    text-transform:uppercase;
    font-family:var(--title-font);
  }

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

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

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

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

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

.full .comment {
  margin-top:20px;
  background:var(--entry-background-color);
  border-radius:3px;
  padding:0 2em 2em;
  clear:both;
}

.page-reply .full .comment {
  margin-top:0;
}

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

.comment .header .inner{
  padding-top:2em;
}

.comment .comment-title {
  margin:.25em 0;
  padding:.25em 0;
}

.full .comment .comment-title{
  font-family:var(--title-font);
  font-size:1em;
  line-height:1.2;
  text-shadow:0 .75em 0 var(--title-shadow-color);
}

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

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

.comment-pages{
  margin:.25em 0;
  padding:1em 2em;
  background:var(--entry-background-color);
  border-radius:3px;
  font-family:var(--title-font);
  text-align:center;
}

@media (min-width:800px){
  .comment-pages{
    margin:.25em 50px;
  }
}

.comment-pages.bottompages {
  display:none;
}

.comment .footer{
  border-top:1px dashed var(--entry-border-color);
  padding-top:1.5em;
}

.multiform-checkbox{
  display:inline;
  margin-right:.5em;
  font-family:var(--title-font);
}

ul.comment-management-links, ul.comment-interaction-links{
  display:inline;
  margin:0;
  padding:0;
  font-family:var(--title-font);
}

ul.comment-management-links li, ul.comment-interaction-links li {
  display:inline;
  padding:0;
  margin-right:.5em;
}

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

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

.bottomcomment{
  margin-top:20px;
  padding:0 2em;
  background:var(--entry-background-color);
  border-radius:3px;
}
  
@media (min-width:800px){
  .bottomcomment{
    margin:50px 50px 100px;
  }
}

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

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

#qrform{
  margin-top:1.5em;
}

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

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

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

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

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

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

.month .header, .tags-container .header, .icons-container .header{
  border-bottom:1px dashed var(--entry-border-color);
  text-align:center;
  padding-bottom:1.5em;
}

.month-wrapper h3, .tags-container h2, .icons-container h2{
  font-family:var(--title-font);
  font-size:1.5em;
  line-height:1.2;
  text-shadow:0 .75em 0 #000;
}

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

#primary .manage-link, .month-wrapper .footer{
  border-top:1px dashed var(--entry-border-color);
  text-align:center;
  padding:1.5em 0 2em;
  font-family:var(--title-font);
}

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

.month caption {
    display: none;
}

.month table {
  width:100%; 
  font-family:var(--title-font);
  text-align:center;
}

table.month {
  margin:0 auto;
  border-collapse:collapse;
  text-align:center;
}

table.month td {
  height:3.25em;
}

table.month td, table.month th{
  max-width:1em;
  padding:.25em;
}

table.month td.day{
  border:1px solid var(--title-shadow-color);
}

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

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

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

.page-month .month{
  padding:2em;
}

.month dl{
  margin:0;
}

.month dl dt {
  font-weight:bold;
  border-bottom:1px dashed var(--entry-border-color);
  text-align:center;
  padding-bottom:1em;
  font-family:var(--title-font);
  font-size:1em;
}

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

.month dl h3 {
  display:inline;
  font-size:1em;
}
.page-month .month .entry-poster {
  margin-right:.5em;
}

.month dd{
  margin:0;
  padding-top:1em;
}

#archive-year .navigation ul, #archive-month .navigation ul{
    margin-bottom:20px;
}

@media (min-width:800px){
  #archive-year .navigation ul, #archive-month .navigation ul{
      margin:0 50px 100px;
  }
}

#archive-year .navigation li{
  font-family:var(--title-font);
  display:inline-block;
  background:var(--entry-background-color);
  padding:.5em;
  margin:.25em 0;
  line-height:1.2;
  border-radius:2px;
}

#archive-month .navigation ul{
  font-family:var(--title-font);
  background:var(--entry-background-color);
  padding:.5em;
  line-height:1.2;
  border-radius:3px;
}

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

.day-date{
    display:none;
}

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

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

ul.ljtaglist:first-child, .tags_cloud ul{
  list-style-position:inside;
  padding:0;
  margin:0;
}

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

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

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

.icon img{
  border-radius:2px;
}

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

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

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

.icon-image img{
  display:block;
}

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

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

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

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

.icon-pages p{
  margin:0;
}

.default.label, .keywords-label, .comment-text, .description-text{
  font-weight:bold;
}

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

.module-section-one{
  margin-bottom:20px;
  background:var(--entry-background-color);
  border-radius:0 0 3px 3px;
  padding:0 2em 2em;
}

.module-customtext .module-content{
  max-height:6em;
  overflow:auto;
}

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

.module-customtext .module-content{
    text-align:justify;
  }
}

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

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

.module-customtext .module-content::-webkit-scrollbar-thumb{
  background:var(--entry-border-color);
  border-left:5px solid var(--entry-background-color);
}

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

.module-section-two{
  padding:20px 20px 0;
  text-align:center;
  color:var(--sidebar-text-color);
}

.module-section-two .module{
  padding-bottom:20px;
}

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

.module-section-two a{
  color:var(--sidebar-text-color);
}

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

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

.module h2 {
  font-size:1em;
  line-height:1.5;
  text-transform:uppercase;
  padding:0 0 1.5em;
  font-family:var(--title-font);
  text-shadow:0 .75em var(--sidebar-link-background-color);
}

.module .userpic img{
  padding:25px;
  border-radius:2px;
  background:var(--sidebar-link-background-color);
}

.module-content li a{
  display:block;
  padding:.25em;
  margin-top:.25em;
  border-radius:2px;
  background:var(--sidebar-link-background-color);
  text-transform:uppercase;
  font-family:var(--title-font);
  line-height:1.2;
}

.journal-name, .journal-website-name{
  padding-bottom:5px;
  font-family:var(--title-font);
  line-height:1.5;
  font-weight:bold;
}

@media (min-width:800px){
  .module-section-two{
    padding-top:0;
    margin-bottom:50px;
    background:transparent;
  }
}

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

.module-typelist h2{
  display:block;
}

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

.topnav{
  display:none;
}

.navigation{
  text-align:center;
}

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

#entries .navigation ul{
  background:var(--sidebar-background-color);
  padding:20px 0;
  margin:0;
}

#entries .navigation li{
  display:inline-block;
  width:150px;
  margin:0 20px;
}

#entries .navigation li a{
  display:block;
  padding:.25em 0;
  border-radius:2px;
  background:var(--sidebar-link-background-color);
  text-transform:uppercase;
  font-family:var(--title-font);
  line-height:1.2;
}

@media (min-width:1024px){
  #entries .navigation ul{
    position:absolute;
    width:190px;
    right:-190px;
    bottom:0;
    background:transparent;
  }
  
  #entries .navigation li {
    display:block;
    margin-top:0.25em;
    list-style:none;
  }
}

#entries .navigation li a{
  color:var(--sidebar-link-color);
}

#entries .navigation li a:hover{
  color:var(--sidebar-link-hover-color);
}

li.page-separator{
  display:none!important;
}

.noentries{
  display:none;
}

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

#footer{
  background:var(--sidebar-background-color);
  padding:20px;
  text-align:center;
}

@media (min-width:800px){
  #footer{
    position:absolute;
    width:150px;
    left:-190px;
    bottom:0;
    background:transparent;
  }
}

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

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

.page-top a{
  display:block;
  padding:.25em;
  border-radius:2px;
  background:var(--sidebar-link-background-color);
  text-transform:uppercase;
  font-family:var(--title-font);
  line-height:1.2;
}

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

div.ContextualPopup{
  color:var(--sidebar-text-color);
  background:transparent;
  border:0;
  padding:0;
  font-family:inherit;
  box-shadow:none;
  border-radius:0;
  width:150px;
}

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

div.ContextualPopup .Relation{
  font-size:1em;
  font-weight:normal;
  margin:.25em 0 0;
  padding:0.25em;
  text-align:center;
  background:var(--sidebar-link-background-color);
  border-radius:2px;
}

div.ContextualPopup .Userpic{
  border:none;
  float:none;
  margin:0;
  text-align:center;
  background:var(--sidebar-link-background-color);
  border-radius:2px;
}

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

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

div.ContextualPopup li{
  padding:0.25em;
  margin-top:.25em;
  background:var(--sidebar-link-background-color);
  border-radius:2px;
}

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

#lj_controlstrip{
  background:var(--entry-background-color);
  color:var(--text-color);
  justify-content:center;
  padding:.75em 0;
  float:left;
  z-index:9;
}

#lj_controlstrip > div{
  font-family:var(--main-font);
  font-size:var(--text-size);
  line-height:1.5;
  padding:.25em .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:1px dashed var(--entry-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"]{
  border:0;
  background:transparent;
  text-transform:uppercase;
  font-size:var(--text-size);
  color:var(--text-color);
  font-family:var(--main-font);
  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:2px;
}

How to install:

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "1 Column (modules at top and bottom; no sidebar)" page setup.
Go to the "Customize your theme" page, click the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". Paste the following https://fonts.googleapis.com/css2?family=Space+Grotesk&family=Electrolize&display=swap into the "Custom stylesheet URL" field.
Click on the "Presentation" tab. In the "Additional options" section select "text-only" for "Select whether entry management links are printed as text or using the available icons" and "Select whether comment management links are printed as text or using the available icons". For "Indentation for nested comment threads" select "Responsive".
Click on the "Modules" tab and enable "Custom text". Place the following modules in the "Secondary Module Section": Profile, Navigation and Link List. Uncheck the other modules.

Resources:

icon font by Google
images from unsplash.com

Explorer

no subject