Layout: Android Dream by Xy @ shipping

I saw the CSS3 Stereoscope effect and I couldn't help myself, so here's a new layout.

IMAGE PREVIEW // LIVE PREVIEW

instructions

Go to customize journal and select Flexible Squares. If you don't have flexible squares, you need to install it first.
Then go to sidebar and select "show" and make sure it's on the right.
Go to custom css and uncheck everything, replacing the block of "custom stylesheet" with whatever you like below!
If you have a blurb, you must have a default userpic set or the sidebar will overflow.
If you remove credit from the code comments, make sure to credit shipping somewhere on your journal.

code

LOGIC GATE // IMAGE PREVIEW

/*LAYOUT: ANDROID DREAM BY SHIPPING @ DREAMWIDTH*/

:root {
  --main-color: #000;
  --link-color: #222;
  --link-hover: #444;
  --navbartext: #fff;
  --titletextcolor: rgba(0,0,0,0.7);
  --bodybg: #fff;
  --entrybg: #fff;
  --bordercolor: #ddd;
  --navbordercolor: #000;
  --iconbordercolor: #ddd;
  --commentheaderbg: #000;
  --commentlinkcolor: #fff;
  --commentheadertextcolor: #fff;
  --sbarbg: #000;
  --sbartext: #fff;
  --navbg: #000;
  --navhoverbg: #333;
  --navlinkcolor: #ddd;
  --navlinkcolorhover: #fff;
  --color1: cyan;
  --color2: red;
  --bodyfont: quicksand;
  --titlefont: orbitron;
  --headerbg: url(HEADERURL);
  --bodywidth: 900px;
  --headerheight: 400px;
  --subtitlesize: 20px;
  --titlesize: 40px;
  --headerlinkwidth: 135px; /*should be (bodywidth/6)-15*/
}

/* latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  src: local('Orbitron Regular'), local('Orbitron-Regular'), url(https://fonts.gstatic.com/s/orbitron/v10/yMJRMIlzdpvBhQQL_Qq7dy1biN15.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;
}

/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  src: local('Quicksand Light'), local('Quicksand-Light'), url(https://fonts.gstatic.com/s/quicksand/v9/6xKodSZaM9iE8KbpRA_pgHYYT8L_FYzokA.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;
}

/*BODY*/

body{
    color: var(--main-color);
    font-family: var(--bodyfont);
    font-size: 12px;
    background: var(--bodybg);
}

a, a:link, a:visited {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
    text-decoration: none;
    font-weight: bold;
}

.title, .subtitle {
    z-index: 4; /*bring to front of header*/
    font-family: var(--titlefont);
    display: block;
    text-align: center; 
    color: var(--titletextcolor);
    text-align: center;
}

.title {
    position: absolute;
    bottom: var(--subtitlesize);
    right: 0;
    font-size: var(--titlesize);
    transition: all .5s ease-out;
}

.title:hover {
    text-shadow: -0.06em 0 var(--color2),  0.06em 0 var(--color1);
    transition: all .5s ease-out;
}

.subtitle{
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: var(--subtitlesize);
}

img {
    max-width: 700px;
}

/*CONTENT*/
#content{
    width: var(--bodywidth);
    margin-left: auto;
    margin-right: auto;
}

#maincontent {
    margin-top: 20px;
    width: var(--bodywidth);
    margin-left: auto;
    margin-right: auto;
    position: relative;

}
.subcontent{
    padding: 0px;
    border: 1px solid var(--bordercolor);
    background: var(--entrybg);
}

/*NAV*/
#header{
    padding-top: 25px; /*for nav*/
    overflow: hidden;
    position: relative;
    float: center;
    display: block;
    width: var(--bodywidth);
    height: var(--headerheight);
    background: var(--headerbg) no-repeat center bottom;
    background-size: cover;
}
#header:hover{
    background-blend-mode: lighten;
}

#header:hover:before {
    z-index: 0 !important; /*bring this to back of the title text*/
    content: '';
    position: absolute;
    display: block;
    width: inherit;
    height: inherit;
    margin-top: 0px;
    background: var(--headerbg) no-repeat center bottom, var(--color1);
    background-blend-mode: lighten;
    background-size: cover;
    mix-blend-mode: darken;
    animation: headerslide2 0.5s forwards;
}

#header:hover:after {
    content: '';
    padding-left: 30px; /*move this for the stereoscope effect*/
    position: absolute;
    display: block;
    width: inherit;
    height: inherit;
    background: var(--headerbg) no-repeat center bottom, var(--color2);
    background-blend-mode: lighten;
    background-size: cover;
    mix-blend-mode: darken;
    animation: headerslide1 0.5s forwards;
}

ul.navheader {
    margin-top: -25px;
    z-index: 4 !important;
    position: absolute bottom center;
    right: 0px;
    width: var(--bodywidth);
    padding-inline-start: 0px;
}

ul.navheader li{
    display: inline-block;
    width: var(--headerlinkwidth);
}
ul.navheader li a, ul.sbarlist.sbarcontent li a {
    color: var(--navlinkcolor);
}

ul.navheader li, ul.sbarlist.sbarcontent li {
    color: var(--navlinkcolor);
    font-family: var(--bodyfont);
    text-transform: uppercase;
    padding-left: 10px;
    padding-top: 4px;
    list-style-type: none;
    height: 18px;
    margin-bottom: 2px;
    border: 1px solid var(--navbordercolor);
    background: linear-gradient(to right, var(--navhoverbg) 50%, var(--navbg) 50%);
   background-size: 200% 100%;
   background-position: right bottom;
   transition: all .5s ease-out;
}

ul.navheader li:hover,  ul.navheader li:hover a, ul.navheader li:hover::before, ul.sbarlist.sbarcontent li:hover, ul.sbarlist.sbarcontent li:hover a, ul.sbarlist.sbarcontent li:hover::before {
    font-weight: bold;
    background-position: left bottom;
    color: var(--navlinkcolorhover);
    text-shadow: -0.06em 0 var(--color2),  0.06em 0 var(--color1);
}
ul.navheader li:hover::before{
    content: "> ";
}

/*ENTRY*/
.subject {
   margin-top: -90px;
   font-size: 30px;
   font-family: var(--titlefont);
   transition: all .5s ease-out;
}
.subject a:hover{
    font-weight: 400 !important;
    text-shadow: -0.06em 0 var(--color2),  0.06em 0 var(--color1);
   transition: all .5s ease-out;
}
.entry_text {
     padding: 30px;
     margin-left: 10px;
     padding-top: 0px !important;
     min-height: 200px;
}
.skiplinks {
    width: var(--bodywidth);
    text-align: center;
}

.skiplinks a {
   text-transform: uppercase;
   padding: 3px;
   padding-left: 20px;
   padding-right: 20px;
}

/*CURRENT*/

.currents {
    width: 200px;
    padding: 20px;
    text-align: right;
}

/*USERPIC*/
.userpic, .userpicfriends {
    margin-top: 25px;
    margin-left: 25px;
    position: relative;
    box-shadow: none !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background: transparent !important;
}

.userpicfriends {
    height: 100px;
    width: 100px;
}
.userpicfriends a{
     color: var(--main-color);
    padding-left: 0px;
    margin-top: -20px;
    transform-origin: right bottom;
    transform: rotate(-90deg)
}
.userpicfriends font{
    padding-top: -20px;
}
.userpic *, .userpic:before, .userpic:after, 
.userpicfriends *, .userpicfriends:before, .userpicfriends:after {
    box-sizing: border-box;
    transition: all 0.3s linear;
}

.userpic:before,
.userpic:after,  
.userpicfriends:before, 
.userpicfriends:after {
    box-sizing: border-box;
    border-radius: 50%;
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: -1;
    border: 2px solid var(--iconbordercolor);
    border-color: transparent var(--iconbordercolor);
}

.userpic img, .userpicfriends img {
    max-width: 100%;
    backface-visibility: hidden;
    vertical-align: top;
    border-radius: 50%;
    padding: 10px;
}

.userpic:hover:before,
.userpic.hover:before, 
.userpicfriends:hover:before,
.userpicfriends.hover:before {
    transform: rotate(-90deg);
}

.userpic:hover:after,
.userpic.hover:after, 
.userpicfriends:hover:after,
.userpicfriends.hover:after {
    transform: rotate(90deg);
}

.date {
    float: left;
    padding: 10px;
    padding-top: 0px;
    width: 200px;
    margin-left: -200px;
    margin-top: 110px;
    text-transform: uppercase;
    font-size: 30px;
    text-align: right;
    transform-origin: right top;
    transform: rotate(-90deg)
}
.subject, .entry_text {
    padding: 25px;
    padding-left: 140px;
}
.userpic {
    width: 100px;
}
/*COMMENTS*/

.comments a,.comments a:hover,.comments a:visited, .datesubjectcomment a, .datesubjectcomment a:hover, .datesubjectcomment a:visited {
    color: var(--commentlinkcolor) !important;
}

.comments {
    color: var(--commentheadertextcolor);
    padding: 20px;
    background: var(--commentheaderbg);
    text-align: center;
    text-transform: uppercase;
}

.datesubjectcomment {
    color: var(--commentheadertextcolor);
    background: var(--commentheaderbg);
    min-height: 110px;
    padding: 20px;
}

.datesubjectcomment img {
    float: left;
    border-radius: 50%;
    padding: 5px;
    border: 2px solid var(--bordercolor);
    margin-right: 20px;
}

.commentreply{
     padding: 20px;
}

/*SIDEBAR*/
.defaultuserpic {
    padding: 25px;
}

#sidebar {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    height: 156px;
    background: var(--sbarbg);
    color: var(--sbartext);
}
.sbarlist {
    width: 300px;
    height: 135px;
    padding-inline-start: 0px;
}

ul.sbarlist.sbarcontent {
    margin-top: -156px; /*moving up since dw expects this to be vertical*/
    padding: 5px;
    list-style-type: none;
    overflow: auto;
}

ul.sbarlist.sbarcontent li {
    width: 270px;
    padding: 3px;
}

.sbartitle{
    display: none;
}

.sbarbody2 {
     padding: 10px;
     margin-left: -320px; /*must be whatever .sbarlist's width is + 20*/
     padding-top: 25px;
     height: 100px;
     overflow: auto;
     text-align: justify;
     text-justify: inter-word;
}

#sidebar_calendar {
    display: none;
}

/*COMMENTS*/

span.ljuser {
    margin-top: 40px;
    font-weight: 900;
    text-transform: uppercase;
}
.commentreply {
    margin-left: 150px;
}

.comments a[href*="?mode=reply"] {
    color: rgba(0,0,0,0) !important;
    width: 0px !important;
    height: 0px !important;
    background: url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-99-circle-plus@2x.png) no-repeat bottom left !important;
     background-size: 20px 20px !important;
     padding: 20px 20px 3px 25px !important; 
     overflow: hidden;
}
.comments a[href*="?mode=reply"]:hover {
    color: var(--commentlinkcolor) !important;
    display: inline;
    transition: all .5s ease-out;
    background: url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-101-circle-remove@2x.png) no-repeat bottom left !important;
     background-size: 20px 20px !important;
     padding: 20px 20px 3px 25px !important; 
}

@keyframes slidein {
    0% { margin-left:-50px; }
    20% { margin-left:-30px; }
    35% { margin-left:-10px; }
    100% { margin-left:0px; }
}

@keyframes headerslide1 {
    0% { padding-right:0px; }
    20% { padding-right:5px; }
    35% { padding-right:10px; }
    100% { padding-right:20px; }
}

@keyframes headerslide2 {
    0% { margin-left:-50px; }
    20% { margin-left:-40px; }
    35% { margin-left:-30px; }
    100% { margin-left:-20px; }
}

/*NAV FOOTER*/
ul.navfooter {
    text-align: center;
    display: inline;
}
ul.navfooter li{
    list-style-type: none;
}

ul.navfooter li:nth-child(1) a{
    color: rgba(0,0,0,0);
    width: 0px !important;
    height: 0px !important;
    background: url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-115-circle-left@2x.png) no-repeat bottom left !important;
     background-size: 20px 20px !important;
     padding: 20px 20px 3px 18px !important; 
     overflow: hidden;
     background-blend-mode: exclusion;
}

ul.navfooter .viewing + li a{
    color: rgba(0,0,0,0);
    width: 0px !important;
    height: 0px !important;
    background: url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-116-circle-right@2x.png) no-repeat bottom left !important;
     background-size: 20px 20px !important;
     padding: 20px 20px 3px 18px !important; 
     overflow: hidden;
     background-blend-mode: exclusion;
}

.ljtaglist li {
    list-style-type: none;
}
.ljtaglist li:hover::before {
content: "> ";
}

/*TINY ICONS*/

img[src*="user.png"],img[src*="community.png"], img[src*="edit.png"],img[src*="delete.png"],img[src*="screen.png"],img[src*="freeze.png"], img[src*="unscreen.png"],img[src*="unfreeze.png"], img[src*="community.png"], img[src*="private.png"], img[src*="locked.png"], img[src*="sticky.png"]{
    width: 0 !important;
    height: 0 !important;
    padding: 15px 15px 0 0 !important; 
    background-color: transparent !important;
    background-repeat: no-repeat !important;}

img[src*="user.png"] { 
    background: url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-1-user@2x.png) !important; 
    background-size: contain !important; 
     background-blend-mode: exclusion;
}

img[src*="edit.png"] {
     background: url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-13-pencil@2x.png) !important; 
     background-size: contain !important;
     background-blend-mode: exclusion;
}

img[src*="delete.png"] {
     background: url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-100-circle-minus@2x.png) !important; 
    background-size: contain !important;
     background-blend-mode: exclusion;
}

img[src*="screen.png"] {
    background: url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-26-eye-off@2x.png) !important; 
    background-size: contain !important;
     background-blend-mode: exclusion;
}

img[src*="unscreen.png"] {
     background: url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-25-eye@2x.png) !important; 
     background-size: contain !important;
     background-blend-mode: exclusion;
}

img[src*="freeze.png"] {
     background: url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-84-pause@2x.png) !important; 
     background-size: contain !important;
     background-blend-mode: exclusion;
}

img[src*="unfreeze.png"] {
     background: url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-85-play@2x.png) !important; 
     background-size: contain !important;
     background-blend-mode: exclusion;
}

img[src*="community.png"] {
    background: url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-19-user-group@2x.png
) no-repeat !important; background-size: contain !important;
     padding: 15px 15px 0 4px !important;
     background-blend-mode: exclusion;
}

img[src*="private.png"] {
     background: url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-125-lock@2x.png
) !important; 
     background-size: contain !important;
     background-blend-mode: exclusion;
}

img[src*="locked.png"] {
     background: url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-125-lock@2x.png
) !important; 
     background-size: contain !important;
     background-blend-mode: exclusion;
}

img[src*="img/sticky.png"] {
    width: 0 !important; 
    height: 0 !important;
    background: transparent url(https://www.glyphicons.com/img/glyphicons/halflings/2x/glyphicons-halflings-139-direction@2x.png) no-repeat 1px 1px !important; 
     padding: 18px 0 0 16px !important;
     background-blend-mode: exclusion;
}

SIMULATION THEORY // IMAGE PREVIEW

/*LAYOUT: ANDROID DREAM BY SHIPPING @ DREAMWIDTH*/

:root {
  --main-color: #3d2352;
  --link-color: #3d1e6d;
  --link-hover: #2e003e;
  --navbartext: #fff;
  --titletextcolor: rgba(0,0,0,0.7);
  --bodybg: #f9f4f4;
  --entrybg: #f0e4e4;
  --bordercolor: #dec3c3;
  --navbordercolor: #dec3c3;
  --iconbordercolor: #dec3c3;
  --commentheaderbg: #ead5dc;
  --commentlinkcolor: #3d1e6d;
  --commentheadertextcolor: #3d2352;
  --sbarbg: #ead5dc;
  --sbartext: #3d2352;
  --navbg: #f0e4e4;
  --navhoverbg: #eedbdb;
  --navlinkcolor: #3d1e6d;
  --navlinkcolorhover: #2e003e;
  --color1: magenta;
  --color2: yellow;
  --bodyfont: quicksand;
  --titlefont: orbitron;
  --headerbg: url(HEADERURL);
  --bodywidth: 900px;
  --headerheight: 400px;
  --subtitlesize: 20px;
  --titlesize: 40px;
  --headerlinkwidth: 135px; /*should be (bodywidth/6)-15*/
}