tofuhouse | layout (Tectonic) - シノギ (dead pools)

[ click to see full size of default. live preview @

tofuhouse ]

So a few things happened here. One, I made this layout simply to clean up a Tectonic base CSS code for my use later. Two, my internet died for over a week so I grew seriously lazy that since my train of thought broke, I may have slipped up somewhere. So let's hope I...didn't.

Anyway, I also made this layout Material Icons ready, which I will do for all layouts from now on, and will go back and add them into the older layouts...slowly.

シノギ (Dead Pools) is named after "シノギ (Dead Pools)" as performed by Mad Trigger Crew for the Hypnosis Mic multimedia project. It's a thug lyfe song that doesn't suit this layout at all, but it was literally the last song that was playing when I barely finished this. And then when I was looking for English translations, I took too long, but by then, I was committed to the title because I made changes everywhere so NO REGRETS. PS: Listen to Stella too.

ABOUT THE LAYOUT
It's a practical layout, basically for those who want to use as much of the functions Dreamwidth (circa 2019) can offer. SO:
- Mostly Minimalist(?)
- Fluid Width: It works on any sized screen. Because it's--
- Responsive: Including on the phone. I made sure of it. Tablets I'm not sure because I don't own one.
- Custom: Navigation Bar, Comments, Icons, Hover Pop-up thing.
- Custom Header: Of all kinds, baby.
- Material Icons Ready, get crazy.
- Optimal on: Firefox and Chrome (and consequently their forks and Opera). Works on Internet Explorer and Safari too (at least I think so when I clicked around).

WHAT CAN YOU USE THIS FOR?
- Journals (Personal, Fanstuff, Challenges, Roleplay, etc)
- Communities (of any kind)
- Anything that you wouldn't mind using the modules and stuff for.

HOW TO INSTALL
1. Select Tectonic: Fission. (by

momijizukamori)
2. Customise
2.1 Scroll down and choose a Page Set Up: Choose any side bar position.
--- NOTE: The default was made on "2 Columns (sidebar on the right)"
--- NOTE 2: It works on one column too, but I personally like the sidebars more.
2.2 Custom CSS: Make sure "Use layout's stylesheet(s)" is unchecked.
2.3 Copy and paste the following code into "Use embedded CSS"

/*----DEAD POOLS----*/
/* Base: Tectonic (Fission) by momijizukamori */
/* Edited by saga @ tofuhouse | 1st July 2019 */
/* Default header image located https://wallpaperbro.com */
/* feel free to edit as you like */
/* my fellow ch?cks and d?cks from yokohama */

/*----HEADER BACKGROUND FOR EASY EDITING----*/
/* Put your pattern in between '' below in the header code */
/* A default is already there as an example! */

#header {
background-color: #eeeeee; /*Change Colour Here*/
background-image:     
linear-gradient(
      rgba(17, 17, 17, 0.4), 
      rgba(17, 17, 17, 0.4)), 
      /*The first three numbers make the colour overlay*/
      /*The decimal adjusts opacity of the colour overlay*/
url('https://i.imgur.com/xGN7F9C.jpg'); /*Change Image Here*/
background-repeat: no repeat; /*Change this to repeat if you have repeating image*/
background-size: cover; /*This will stretch to cover the header space no matter screensize. Remove this if you have repeating image.*/
}

/*----CUSTOM FONTS DECLARATION----*/

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Thin';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v19/KFOkCnqEu92Fr1MmgVxFIzIFKw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Thin';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v19/KFOkCnqEu92Fr1MmgVxMIzIFKw.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto Thin';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v19/KFOkCnqEu92Fr1MmgVxEIzIFKw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto Thin';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v19/KFOkCnqEu92Fr1MmgVxLIzIFKw.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Thin';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v19/KFOkCnqEu92Fr1MmgVxHIzIFKw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Thin';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v19/KFOkCnqEu92Fr1MmgVxGIzIFKw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Thin';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v19/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Light';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Light';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto Light';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto Light';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Light';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Light';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Light';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*----MATERIAL ICONS----*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/*----MAIN----*/

html {font-size: 100%;}

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

img {
border: none;
}

body {
font-family: Arial, sans-serif; 
font-size: 1em;
padding: 0;
background: #dddddd;
color: #444444;
}

html body {
margin-left: 0em;
margin-right: 0em;
}

a { color: #897689; text-decoration: none; }
a:visited { color: #897689; text-decoration: none; }
a:hover { color: #4c516d; text-decoration: none; }
a:active { color: #897689; text-decoration: none; }

q { font-style: italic; }

p { margin: 1em 0; }

blockquote {
background-color: #ffffff;
border: solid 1px #eeeeee;
margin: 2rem;
padding: 1rem;
}

ul {
list-style: square inside;
margin: .5em 1em;
}

ol {
list-style: decimal inside;
margin: .5em 1.5em;
}

/*----LAYOUTS----*/

/*----LAYOUTS: CONTENT----*/

#canvas {
width: 100%;
margin: 0 auto;
}

@media only screen and (min-width: 51em) {
#content { float: none; 
margin-left:10%;
margin-right:10%;}
}

@media only screen and (min-width: 51em) {
.two-columns-left #content,
.three-columns-sides #content {
border-left: 15em solid transparent;
}
.two-columns-right #content,
.three-columns-sides #content {
border-right: 15em solid transparent;
}
.three-columns-left #content {
border-left: 30em solid transparent;
}
.three-columns-right #content {
border-right: 30em solid transparent;
}
.column-right #content {
min-width: 15em; /* prevents sidebar overlap of entry, when entry becomes narrower than sidebar */
}
}

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

#header, #footer {
margin: 0;
clear: both;
}

/*----LAYOUTS: MODULES----*/

#primary { float: none; }
#secondary, #tertiary { width: 100%; }

#primary {
width:100%;
margin-right:-100%;
margin-left: 0;
}

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

#primary > .inner:first-child {
padding: 0;
margin: 0 .25em 0;
}

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

@media only screen and (min-width: 51em) {
.column-left #primary > .inner:first-child {
padding-left: 1em;
}

.column-right #primary > .inner:first-child {
padding-right: 1em;
}

.three-columns-left #secondary > .inner:first-child,
.three-columns-right #secondary > .inner:first-child {
padding-right: .5em;
}

.three-columns-left #tertiary > .inner:first-child,
.three-columns-right #tertiary > .inner:first-child {
padding-left: .5em;
}
}

@media only screen and (min-width: 51em) {
.multiple-columns #primary {
float: left;
}

.two-columns-left #secondary,
.three-columns-sides #secondary {
float: left;
width: 15em;
margin-left: -15em;
}
.two-columns-right #secondary {
float: right;
width: 15em;
margin-right: -15em;
}
.three-columns-left #secondary {
float: left;
width: 15em;
margin-left: -30em;
}
.three-columns-right #secondary {
float: right;
width: 15em;
margin-right: -15em;
}

.two-columns #tertiary {
clear: both;
width: auto;
}
.two-columns-left #tertiary { margin-left: -15em; }
.two-columns-right #tertiary { margin-right: -15em; }
.two-columns #tertiary .module {
float: left;
width: 15em;
}
.three-columns-left #tertiary {
float: left;
width: 15em;
margin-left: -15em;
}
.three-columns-right #tertiary {
float: right;
width: 15em;
margin-right: -30em;
margin-left: 15em; /* so that #tertiary won't overlay #secondary in IE7 */
}
.three-columns-sides #tertiary {
float: right;
width: 15em;
margin-right: -15em;
}
}

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

/*----LAYOUTS: USERPIC----*/

.has-userpic .entry .userpic {
float: left;
margin: 0 1em 1em 0;
}
.has-userpic .comment .userpic {
float: left;
margin: 1.5em 1em 1em 0;
}

/*----HEADER + FOOTER----*/

#header {
margin: 0 0 1rem 0;
padding: 5rem 0 0 0;
}

#header > .inner {
flex-grow: 1;
display: flex;
flex-direction: column;
bottom: 0;
}

h1#title,
h2#pagetitle,
h2#subtitle {
text-align: center;
}

h1#title {
font-family: 'Roboto Thin', Arial, sans-serif; font-size: 2.75rem;
padding:1em;
color: #ffffff;
border: 1px solid #ffffff;
width: 50%;
margin: 0em auto;
font-weight:normal;
text-shadow: 1px 1px 1px #000000;
}

h1#title a {
color: #ffffff;
}

h2#subtitle {
font-family: 'Roboto Thin', Arial, sans-serif; 
font-size: 1.75rem;
color: #ffffff;
font-weight:normal;
text-shadow: 1px 1px 1px #000000;
}

h2#pagetitle {display :none;}

#footer {
border-top: 1px #ffffff solid;
padding-top: 0.5em;
}

#footer> .inner:first-child {
background: #ffffff;
text-align: center;
padding: 0.5em;
font-family: 'Roboto Light', Arial, sans-serif;
text-transform: lowercase;
}

/*----NAVIGATION----*/

.navigation {
padding: .25em;
margin: 0 0 1em 0;
}

div.navigation.topnav {display: none;}

div.navigation.bottomnav {
border: 1px solid #ffffff;
padding:0.5rem;
}

div.navigation.bottomnav>.inner {
background-color: #ffffff;
text-align: center;
padding: 0.25rem;
font-family: Roboto Light, Arial, san-serif;
}

.navigation.empty {
display: none;
}

.page-read .noentries {
font-weight: normal;
}

li.page-separator {
display: none;
}

.module-navlinks{
margin: 3rem 0 0 0 !important;
}

.module-navlinks ul.module-list {
text-transform: uppercase;
font-family: 'Roboto Thin', Arial, san-serif;
font-size:1.3rem;
}

.module-navlinks.module {
background: none;
border: none;
margin: 0;
width: 100%;
margin: 0;
text-align: center;
}

@media only screen and (min-width: 51em) {
.two-columns-left .module-navlinks,
.three-columns-left .module-navlinks { text-align:center; margin:0 0 0 0;}
.three-columns-sides .module-navlinks {text-align:center;}
}

.module-navlinks ul {
margin: 0;
padding: 0;
display: inline;
}

.module-navlinks.module li {
padding: 1em ;
display: inline;
margin: 3rem 0 0 0;
}

.module-navlinks .module-header {display:none;}

.module-navlinks a {color: #ffffff!important; opacity:0.7;}
.module-navlinks a:visited {color: #ffffff!important; opacity:0.7;}
.module-navlinks a:hover {color: ; text-decoration:none; opacity: 1;}
.module-navlinks a:active {color: #ffffff!important; opacity:0.7;}

/*----MODULES----*/

#secondary, #tertiary { text-align: center; 
}

#secondary .module { margin: 0em 0em 1em 0em;
padding: 0.5em;
background: transparent;
border: 1px #ffffff solid;
}

#tertiary .module { margin: 0em 0em 1em 0em;
padding: 0.5em;
background: transparent;
border: 1px #ffffff solid;
}

.module {
text-align:left;
}

@media only screen and (min-width: 51em) {
.one-column #secondary .module, .one-column #tertiary .module {
display: inline-block;
vertical-align: top;
width: 24%;
}
}

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

.module h2 {
color: #777777;
background-color: #ffffff;
font-family: 'Roboto Light', Arial, sans-serif; font-size: 1.1em;
font-weight: normal;
text-align: center;
text-shadow: 1px 1px 1px #cccccc;
}

h2.module-header {
margin: 0;
padding: .5em;
}

h2.module-header a {
color: #777777;
}

#secondary .module-content, #tertiary .module-content {
font-family: Arial, sans-serif;
background: #ffffff; 
padding: 0.5em;
}

.module-content ul {
list-style: outside;
margin: 0;
padding-left: 0;
}
.module-content li {
margin: .5em 0;
}

.module-content .userpic {
text-align: center;
}

.module-content .userpic img {
padding:0.5em;
background: #fafafa;
border: 1px #eeeeee solid;
}

.journal-name {
margin: .5em 0 0;
text-align: center;
}

.journal-website-name {
text-align: center;
}

ul.userlite-interaction-links.icon-links {
margin-top: 0.5em;
text-align: center;
}

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

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

ul.module-list {
list-style: none;
}

ul.module-list li {
margin:0;
}
.module-tags_multilevel li li {border:0; padding-bottom: 0px; padding-left: .5em;}

.manage-link {
margin: .5em 0 0;
text-align: right;
text-transform: uppercase;
}

.any-column .module-calendar table { margin: 0; }
.module-calendar .module-content { text-align: center; }

@media only screen and (min-width: 51em) {
.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 { 
text-align: center !important; 
}

.module-calendar table {margin:0 auto;
text-align: center;
width:100%;}

.module-calendar th,
.module-calendar td {
border: 1px solid #eeeeee;
height: 2em;
line-height: 2em;
}

.module-calendar td {
padding: 1px;
}

.module-calendar td a {
display: block;
padding: 2px;
background: #eeeeee;
display: block;
text-align: center;
}

.module-calendar td a:hover {
background: #ffffff;
}

.module-calendar .empty-day {border: 1px solid #aaaaaa;}
.module-calendar .entry-day {border: 1px solid #aaaaaa; 
background-color: #eeeeee;}

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

.module-tags_cloud li,
.tags_cloud li {
display:block;
font-size:1em!important;
}

/*----ENTRY----*/

.entry {
padding: 0.5rem;
border: solid 1px #ffffff;
}

.entry>.inner {
background-color: #ffffff;
padding: 1em;
}

.entry, #postform{
margin: 0 0 1em 0;
}

.entry-content, .comment-content {
margin: 1em;
min-height: 130px; /*prevents metadata shifting on short entries*/
}

.entry .header {
color: #777777;
margin: 0 0 .5em;
padding: .5em;
text-align:center;
border-top: 1px #eeeeee solid;
border-bottom: 1px #eeeeee solid;
background: #fafafa;
font-family: 'Roboto Light', Arial, sans-serif; 
}

.entry .entry-title {
font-size: 1.5rem;
font-weight:normal;
text-shadow: 1px 1px 1px #cccccc;
}

.entry .entry-title, .entry .entry-title a {
color: #777777;
}

.entry h3.entry-title {
padding:.5em ;
margin:0;
background: transparent;
display:inline-block;
}

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

.datetime {
display: block;
font-size: 0.9rem;
margin: 0;
text-transform: uppercase;
}

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

.poster {
display: inline-block;
margin: 1em 0 0;
}

.entry .userpic img, .comment .userpic img {
padding:0.5em;
background: #fafafa;
border: 1px #eeeeee solid;
}

.entry .footer, .comment .footer {
clear: both;
margin-top: 1em;
color: #777777;
padding: .5em;
text-align:center;
border-top: 1px #eeeeee solid;
border-bottom: 1px #eeeeee solid;
background: #fafafa;
font-family: 'Roboto Light', Arial, sans-serif;
font-size: 0.9rem; 
text-transform: lowercase;
}

/* 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: 60em) {
.entry-content img, .comment-content img { max-width: none; }
}

@media only screen and (min-width: 51em) {
.entry .contents { overflow:auto;
}
}

.metadata, .tag {
font-size: smaller;
padding-left: 1.5em;
}

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

.metadata-item-location, .metadata-item-music, .metadata-item-mood, .tag ul {
text-align: right;
}

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

.tag ul li {
display: inline;
font-weight: normal;
margin: .5em .2em 0 0;
text-align: right;
} /* same for month view */

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

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

ul.entry-interaction-links, ul.entry-management-links,
ul.comment-interaction-links, ul.comment-management-links {
margin:0;
padding: 0;
display:inline;
}

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

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

ul.text-links li {padding: 0.25em;}

.text-links li:hover a, #comments .text-links li:hover a {color: #333333; text-decoration: none;}

ul.text-links li:active {background: ; padding: 0.25em;}
.text-links li:active a, #comments .text-links li:active a {color: ; text-decoration: none;}

ul.text-links li:visited {background: ; padding: 0.25em;}
.text-links li:visited a, #comments .text-links li:visited a {color: #333333; text-decoration: none;}

/*----COMMENTS----*/

.comment-pages {
background:#ffffff;
font-family: Roboto Light, Arial, san-serif;
text-align:center; 
padding: .5em; 
margin-bottom: .5em;}

#qrform {margin-top: 0.5rem;}

hr.above-entry-interaction-links, hr.below-reply-container {
display:none;
}

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

.comment {
min-width: 15em;
border: 1px #ffffff solid;
margin-bottom: 0.5rem;
}

.comment>.inner {
background-color: #ffffff;
padding: 1rem;
margin:0.5rem;
}

.comment .header {
color: #777777;
text-align:center;
margin: 0 0 .5em;
padding: .5em;
border-top: 1px #eeeeee solid;
border-bottom: 1px #eeeeee solid;
background: #fafafa;
font-family: 'Roboto Light', Arial, sans-serif; 
}

.comment .comment-title {
font-size: 1.2rem;
font-weight:normal;
text-shadow: 1px 1px 1px #cccccc;
padding: 0!important;
margin: 0.25rem!important;
}

.comment .comment-title, .comment .comment-title a {
color: #777777;
}

#comments h4.comment-title, #comments h4.comment-title a {
color: #777777;
}

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

textarea.textbox {
border: 1px solid;
width: 80% !important;
}

#qrform table {
border: 0 !important;
}

.comment-wrapper {
margin: 0;
padding: 0;
}

.no-userpic .comment-poster { padding-left: 1em; }

table.talkform {
margin: 0 0 .5em 0;
padding: .5em;
}

.bottomcomment {
margin: .5em 0;
padding: .25em 0;
text-align:center;
background:#ffffff;
font-family: Roboto Light, Arial, san-serif;
}

.bottomcomment label {display:block; padding-top: .5em;}

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

/*---ARCHIVES + TAGS + ICONS LAYOUT---*/
#archive-year .header h3, .tags-container .header h2, .icons-container .header h2 {
margin: 0 0 .5em;
padding: .5em;
border-top: 1px #eeeeee solid;
border-bottom: 1px #eeeeee solid;
background: #fafafa;
color: #777777;
font-family: 'Roboto Light', Arial, sans-serif; 
font-size: 1.1em;
font-weight: normal;
text-align: center;
text-shadow: 1px 1px 1px #cccccc;
}

.tags-container a, .icons-container a, #archive-year a, #comments a, #archive-month a, .navigation a { color:; }

.tags-container a:active, .icons-container a:active, #archive-year a:active, #comments a:active, #archive-month a:active, .navigation:active { color:; }

.tags-container a:hover, .icons-container a:hover, #archive-year a:hover, #comments a:hover, #archive-month a:hover, .navigation a:hover { color:; }

.tags-container a:visited, .icons-container a:visited, #archive-year a:visited, #comments a:visited, #archive-month a:visited, .navigation a:visited { color:; }

.month .footer, .page-tags .tags-container .footer, .icons-container .footer {
margin: 1rem 0 0 0;
color: #777777;
font-family:Roboto Light;
text-transform:lowercase!important;
text-align:center!important;}

.manage-link.manage-tags-link, .manage-link.manage-icons-link {
border-top: 1px #eeeeee solid;
border-bottom: 1px #eeeeee solid;
background: #fafafa;
text-align: center;
text-transform: lowercase;
margin: 0;
padding:0.5rem;
}

/*----ARCHIVES----*/

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

.month {
border: 1px solid #ffffff;
margin: 0 0 1em 0;
padding: 0.5em;
}

.month>.inner {
background:#ffffff;
padding:1em;
}

.month table {
margin: auto;
border:0;
width:100%;
border-spacing: 1px;
border-collapse: separate;
background:transparent!important;
}

.month caption {
display: none;
}

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

table.month th, table.month td, table.month td.day-empty {}

table.month td {
height: 3.25em;
}
table.month td,
table.month th {
border: 1px solid #eeeeee;
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;
}

.month td.day {
border: 1px solid #cccccc;
color: ;
font-weight: normal;
padding: .5em;
text-align: left;
vertical-align:top;
width: 4em;
}

.month td.day-empty {border: 1px solid #eeeeee;}
.month td.day-has-entries {border: 1px solid #cccccc; background-color: #eeeeee;}
.month-wrapper th {text-shadow: 1px 1px 1px #cccccc;}

.month td.day-has-entries p {
padding: 0 0 0 .5em;
font-weight:bold;
}

.month td.day-has-entries a {color:;}
.month td.day-has-entries a:hover {color:;}
.month td.day-has-entries a:active {color:;}
.month td.day-has-entries a:visited {color:;}

.month dl, .month dt, .month dd {
margin: 0;
padding: 0;
}

h3.day-date {
text-align: center;
padding:0.5rem;
font-weight: normal;
font-family: Roboto Light, Arial, san-serif;
color: #ffffff;
text-shadow: 1px 1px 2px #000000;
}

/*----TAGS PAGE----*/

.page-tags .tags-container {
border: 1px solid #ffffff;
margin: 0 0 .5em 0;
padding: 0.5em;
}

.page-tags .tags-container>.inner {
background:#ffffff;
padding:1em;
}

.page-tags .tags-container ul {
margin-left: .5em;
padding-left: .5em;
}

/*----ICONS----*/

.icons-container {
border: 1px solid #ffffff;
margin: 0 0 .5em;
padding: 0.5em;
}

.icons-container>.inner {
background:#ffffff;
padding:1em;
}

div.icons-container div.icon:nth-of-type(2n) {
clear: none;
}

.sorting-options ul {
margin-left: 0;
text-align: center;
clear: both;
}

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

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

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

.icons-container .icon {
float: left;
margin-bottom: 15px;
min-width: 350px;
vertical-align: bottom;
width: 50%;
display:table;
}

.icon-image {
display: inline;
float: left;
margin-right: 1em;
min-width: 100px;
margin-top: 0;
}

.icon-info {
overflow: auto;
vertical-align: bottom;
word-wrap: break-word;
display:table-cell;
width:100%;
}

.icon-info .label {
font-weight: bold;
}

.icon-info span  {
font-weight: normal;
}

.icons-container .inner .footer, .icon-pages {
clear: both;
text-align: center;
}

/*----CONTROL STRIP----*/

#lj_controlstrip {
background: #000000;
background-repeat: no-repeat;
background-position: 0 0;
z-index: 100 !important;
border-bottom: 0px;
}

#lj_controlstrip > div {
font-family: Roboto, Arial, san-serif!important;
font-size: 0.75rem!important;
}

#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_login {
text-align: left;
border: none;
}

#lj_controlstrip td {
color: #888888 !important;
}

#lj_controlstrip a {
color: #888888 !important;
text-decoration: none;
}

#lj_controlstrip a:hover {
text-decoration: none; color: #aaaaaa !important;
}

#lj_controlstrip_statustext {
font-weight: normal;
color: #888888 !important;
}

#lj_controlstrip input {
color:#888888 !important;
background-color: #000000; 
border: 1px solid #444444;
padding:0.1em 0.25em; }

/*----CONTEXTUAL POPUP----*/

.ContextualPopup {
background: #ffffff!important;
font-family: Arial, san-serif;
color: #444444;
font-size: 1rem;
font-weight; normal !important;
border:0px !important;
border-radius: 0px!important;
box-shadow:1px 1px 2px #111111!important;
}

.ContextualPopup .Relation{
font-size:1.2rem;
font-family:Roboto Light, Arial, san-serif;
font-weight:normal;
margin:0;
color: #777777;
text-shadow: 1px 1px 1px #cccccc;
}

.ContextualPopup .Userpic {
padding: 0px!important;
margin: 0px!important;
border: 0px!important;
}

.ContextualPopup .Userpic img {
padding:0.5em;
background: #fafafa;
border: 1px #eeeeee solid;
}

.ContextualPopup a { color: #897689; }
.ContextualPopup a:visited { color: #897689; }
.ContextualPopup a:hover { color: #4c516d; }
.ContextualPopup a:active { color: #897689; }

/*----ADD MORE EDITS BELOW THIS IF YOU LIKE----*/

3. Modules for your sidebar(s): Choose as you see fit.
4. And just so people can find and use this layout too, credit

tofuhouse somewhere on your journal or profile page!
--- Helpful code to copy and paste: <a href="https://tofuhouse.dreamwidth.org/5898.html">layout</a> @ <user name="tofuhouse">

OPTIONAL STUFF: As you can see, there's just one image in there. It's the background pattern for the header! You can replace it if you want. Just remember:
- If it's a full image, you need to make sure it "covers" the entire space.
- If it's a pattern, then just make sure repeats.

To replace it, look to the code again, and see near the top how I put in a #header code with a background. Just replace that url with the image you want. I currently am using something that covers. I left instructions, which hopefully make sense.

There is a colour overlay on top of it that should prevent image and font colours clashing, and you can change the opacity on it. It goes in decimals between 0 and 1.

Meanwhile, the header's background in case you wanna upload it elsewhere and replace the url with your own is here
It's better you do in case it disappears somewhere.

CUSTOM ICON PAGE: Check it out, it's pretty cool. How do you get this thing working? Go to Settings: Display, and make sure you check the box "Show my journal's icons pages in my chosen style instead of the site layout".

While you're there...

CUSTOM COMMENT PAGE: I coded it to work, so it's completely mobile responsive...as far as dreamwidth allows, anyway. It might be better to use it on the phone using the custom comments, and I even changed the min-width for nested comments.

However, if you want to turn it off and use dreamwidth's default look? The comment system and nesting is much more cleaner on the default site skin, that's why. So go to Settings: Display, and make sure you uncheck the box "Show my journal's entry pages in my chosen style instead of the site skin".

And that's pretty much it! (Though I might edit this page to tidy it up.) I'm really tired (⊙◞౪◟⊙)

Threaded | Flat

This is fabulous, thank you! I'm using it :D

I've been meaning to update my layout, and this is very clean and pretty! The instructions were very helpful, too. I'm using this now, thank you.

Thank you for sharing this, it is so gorgeous! Using for this journal and will credit in the profile.

LOVE this! Thanks so much - using it now. :)

Lovely! I'm using it on my journal, thank you for sharing!

Hi, I came across your journal via Google search lol :)

I love this style very much and would love to use it for my journal. However, I would like to ask about the header part. Hoping you can help me...

I would like to use this header (900x400) to go with this style: https://i.imgur.com/E9cEawJ.jpg but the header currently shows just the head of the giraffe:

https://i.imgur.com/bCV6Ev8.png

Hoping you can help me? Thanks in advance

Thank you.

💕💕

layout (Tectonic) - シノギ (dead pools)

no subject

(no subject)

no subject

(no subject)

no subject

no subject

no subject

no subject

no subject

no subject