dreamwidthlayouts | Tabula Rasa: Venus As A Boy

Image preview

Title: Venus as a boy
Credit to: This post.

baud and

vigils.
Base style: Tabula Rasa
Type: CSS
Best resolution: Any
Tested in: Firefox

Select Plain (Tabula Rasa);

Select 2 Column (sidebar on the right);

Modules: In Main Module Section select Custom Text (position 1) and Navigation (position 2). You can also select "Links". All the rest must be unchecked.

Custom Stylesheet CSS: Paste the following in the field: https://fonts.googleapis.com/css?family=Literata:400,400i,500,700|Roboto+Condensed:300,400,700&display=swap

Custom CSS: Make sure Use layout's stylesheet(s) is checked.

Paste this code in the "Custom CSS" field:

/* VENUS AS A BOY
by baud
inspired by vigils/terra */

.module-customtext.module > h2.module-header, #header { display: none; }

.access-filter, .time, .userpic { display: none; }
.navigation.topnav { display: none; }

.navigation.bottomnav {     background: transparent;
text-transform: uppercase; font: 12pt 'Roboto Condensed', sans-serif; padding: 10px;}

blockquote { font-size: 16pt; font-family: 'Literata', sans-serif; font-weight: 300; }

img {
    border: none;
}

.entry-content hr,
.comment-content hr {
    display: block;
    margin: 1em 10%;
}

body {
    font-size: 14pt;
font-family: 'Literata', sans-serif;
    padding: 0;
color: #333;
background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); 
    
}

a, a:link, a:visited, a:active { color: #94bbe9; text-decoration: none; }
a:hover { background:  background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); text-decoration: none; -webkit-text-fill-color: transparent; -webkit-background-clip: text; }

q { font-style: italic; }

#canvas { margin: 1.5em;  display: table; border-spacing: 0; background: #fff;}

#content { width: 90%; max-width: 1200px; margin: auto; padding-top: 25px; }

#primary { padding: 0 !important; box-sizing: border-box; display: table-row;}

@media only screen and (min-width: 900px) { #canvas { display: block; margin: 2.5em; } #primary { width: 70%; box-sizing: border-box; float: left; display: block; margin-top: 1em !important; } #entries { margin-right: 3em; } }

@media only screen and (min-width: 1400px) { #canvas {margin: 2.5em 8% !important; } }

#secondary { box-sizing: border-box;  display: table-header-group; margin-bottom: 3em; }

@media only screen and (min-width: 900px) { #secondary {width: 27%; max-width: 300px; box-sizing: content-box; padding: 1em 0 1em 1em; float: right; display: block; margin-top: 0;}}

#container { display: table; }

@media only screen and (min-width: 900px) { #container {display: block;}}

@media only screen and (min-width: 40em) {

.entry h1,h2,h3,h4,h5,h6 {text-transform: uppercase;
display: block;
font: 600 .9em Roboto Condensed, sans-serif;
letter-spacing: 0.5px;}

.two-columns-right #content
  {
        border-right:  solid transparent;
    .column-right #content {
        min-width: ; /* prevents sidebar overlap of entry, when entry becomes narrower than sidebar */
    }
}

#content-footer {
    height: 0;
    font-size: 0; /*to make IE happy*/
    clear: both;
}
h1#title { display: none; }

h1#title a, h1#title a:visited {  display: none;}

#subtitle { display: none;}

@media only screen and (min-width: 900px) { h1#title { display: none; }
h2#pagetitle { display: none !important; font-size: 0px; color: transparent;
}

#footer {
display: none;
}

#primary {
    width:100%;
    margin-right:-100%;
    margin-left: 0;
line-height: 1.6em;
float: left;
}

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

/* modules layout */
h1#title { display: none;
}

#title a {display: none; }

h2#subtitle { display: none;}

h2#pagetitle { display: none;
}

#primary { float: left; line-height: 1.6em;   }
#secondary, #tertiary { line-height: 1.6em; }

@media only screen and (min-width: 40em) {
    .multiple-columns #primary {
float: left; 
width: 70%;
    }
    .two-columns-right #secondary {
        float: right;
        width: 28%;
}
}

.navigation ul {
    margin-left: 0;
    padding-left: 0;
}
.navigation li {
    display: inline;
    padding: 0 .5em;
}
.noentries {
    padding: 0 .5em;
}

/* entries */

div.header { margin-bottom: 15px; }

.entry {
    background: transparent;
    line-height: 1.6em;
}

.entry .entry-title { font: 0px; margin-bottom: -15px; }
    
}

.datetime { text-transform: uppercase; font: 14pt 'Roboto Condensed', sans-serif; color: #333; padding-top: 5px; padding-bottom: 5px; }

.datetime a { color: #333 !important; }

.entry .entry-title, .entry .entry-title a { font: 30px/2 'Roboto Condensed', Georgia, serif; text-transform: none; color: #bfb5da; }

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

.entry a {  }
.entry a:visited {  }
.entry a:hover {  }
.entry a:active {  }

/* ensure comment content stretches out horizontally so it's readable */
.comment-content:before {
    content: "";
    display: block;
    overflow: hidden;
    width: 10em;
}
.comment-content { border-top: 1px transparent solid; } /* for firefox */

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li,
.comment-content li {
    list-style-position: inside;
    }

/* To constrain the width and prevent layout breaking */
.entry-content img, .comment-content img {
    max-width: 100%;
    height: auto;
}

@media only screen and (min-width: 64em) {
    .entry-content img, .comment-content img { max-width: none; }
}

.metadata ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}
.metadata li {
    margin-bottom: .5em;
}
.metadata.top-metadata ul {
    margin: 0;
}
.metadata.top-metadata {
    margin-bottom: 1em;
}

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

.tag { display: none; }

.tag ul li {
    display: inline;
} /* same for month view */

ul.entry-management-links {
    margin-left: 0;
    text-align: right;
text-transform: uppercase;
 font-size: 10pt;
font-family: Roboto Condensed;

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

ul.entry-interaction-links {
    margin-left: 0;
    padding-left: 0;
text-transform: uppercase;
    text-align: right;
}

.entry-interaction-links a, .entry-management-links a { color: #eeaeca; }
.entry-interaction-links a:visited, .entry-management-links a:visited { #eeaeca;  }
.entry-interaction-links a:hover, .entry-management-links a:hover { color: ;  }
.entry-interaction-links a:active, .entry-management-links a:active { color: #eeaeca;  }

ul.entry-interaction-links li {
    display: inline;
    padding: 0 .25em; font-size: 15pt; font-family: Roboto Condensed; font-weight: 400;
}

.entry-interaction-links { padding-bottom: 30px;  border-bottom: 3px solid: #bfb5da; } 
}

/* comments */

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

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

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

.comment .comment-title, .comment .comment-title a {
    
}

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

ul.comment-management-links {
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}
ul.comment-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.comment-interaction-links {
    margin-left: 0;
    padding-left: 0;
}
ul.comment-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

textarea#commenttext {
    width: 100%; /* fix for FF form width glitch */
}

/* archive */

table.month {
    margin: 0 auto;
    border-collapse: collapse;
}
table.month td {
    height: 3.25em;
}
table.month td,
table.month th {
    border: 1px solid; /* ? */
    padding: 3px;
}
table.month td p {
    margin: 0;
    padding: 3px;
}

.month dl dt {
    font-weight: bold;
}
.month dl .time {
    padding-right: .5em;
}
.month dl h3 {
    display: inline;
    font-size: medium;
}
.page-month .month .entry-poster {
    margin-right: .5em;
}
.month dl .tag ul {
    margin-top: 0;
}

/* icons */

.sorting-options ul {
    margin-left: 0;
}

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

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

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

/* modules */

.module {
    background: transparent;
    
}

.module-content a { text-transform: uppercase; font: 13pt 'Roboto Condensed', sans-serif;  }
.module a:visited {  }
.module a:hover { color: #333;  }
.module a:active {  }

.module h2 { font: 25px/2 'Roboto Condensed', Georgia, serif !important;  color: #bfb5da !important; margin-bottom: -15px; }

.module-header a { font: 30px/2 'Roboto Condensed', Georgia, serif !important; color: #bfb5da !important; margin-bottom: -15px; text-transform: none !important; }

.module-content {
font-size: 16pt; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; padding: 10px; padding-top: 0px; }
}

}

.module-content ul {
    list-style: outside;

padding-left: 0;
}

ul.module-list {}
.module-content li {
text-transform: uppercase;
display: block;
font: 300 .9em Literata, sans-serif;
letter-spacing: 0.5px;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: 1px solid #bfb5da;
}

ul.userlite-interaction-links.icon-links {
    margin-left: 0;
    padding-left: 0;
}

ul.userlite-interaction-links.icon-links li {
    display: inline;
    padding: 0 .20em;
}

ul.userlite-interaction-links.text-links {
    text-align: left;
}

.any-column .module-calendar table { margin: 0; }
.module-calendar .module-content { text-align: left; }
@media only screen and (min-width: 40em) {
    .multiple-columns .module-calendar .module-content {
        text-align: center;
    }

.multiple-columns .module-calendar table {
        margin: 0 auto;
    }

.multiple-columns .module-syndicate .module-content {
        text-align: center;
    }
}

.module-calendar td {
    padding: 1px;
}
.module-calendar td a {
    display: block;
    padding: 2px;
}

.search-box {
    margin: .2em auto;
    max-width: 100%;
}

.search-form .search-box-item, 
.search-form .search-button-item {
    display: block
}

.search-form .comment_search_checkbox_item {
    display: inline
}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
    white-space: normal !important;
}
.module-pagesummary .module-content {
    word-wrap: break-word;
}

.module-credit .category-title {
    font-weight: bold;
}

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

/* Controlstrip */

#lj_controlstrip {background: #fff;  padding: 1em 0; top: 0; left: 0; width: 100%; position: relative;}

#lj_controlstrip td {font: 13px/2 'Roboto Condensed', sans-serif; color: #111; display: table-cell;}

#lj_controlstrip_statustext { font-size: 1.2em;  color: #111; font-weight: 700; margin-bottom: .5em; }

#lj_controlstrip a { color: background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); font-weight: normal;  text-decoration: none;   -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

#lj_controlstrip a:hover { text-decoration: underline;}

#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, .cuttag img { border: 0; }

#lj_controlstrip_user .ljuser {  padding: .25em; font-size: 1.2em;}

#lj_controlstrip_user img, #lj_controlstrip_actionlinks img { display: none; }

#lj_controlstrip_userpic { width: 60px; padding-left: 2em !important; }

#lj_controlstrip_userpic img  { border: 0 !important; padding: 6px !important; }

#lj_controlstrip_userpic a  { padding: 0; margin: 0; }

#lj_controlstrip input {     font: italic .88em/2 'Roboto Condensed', Georgia, serif; background: #eee; color: #111; padding: .25em .5em 0 .5em; margin: 0; width: auto;text-transform: lowercase; letter-spacing: .05em; border: none;}

#lj_controlstrip input #search { padding: .125em .25em; margin: 0; border: none;}

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember  { background-color: #eee; color: #111; border: none;}

#lj_controlstrip_login td,  {border-bottom: 0;}

#lj_controlstrip #lj_controlstrip_search { display: none; }

@media only screen and (min-width: 1000px) {
	
#lj_controlstrip td {font-size: 14px;}
	
#lj_controlstrip #lj_controlstrip_search { display: block; } }

Notes: This layout is heavily based on

vigils's layout, that's why I ask you to credit

vigils as well. It's shared with their consent.

Tabula Rasa: Venus As A Boy

no subject