tesscodes | Layout: Murmurs

Information

Hey guys! Here's a layout to match this month's advertising and navigation codes. This layout comes with two optional splash pages, one with a hidden nav and one with a static links list, so be sure to check them out; enjoy! 💖

Coding: Layout

/*-- MURMURS - TESSISAMESS - 2022 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*--

Find more fun stuff at:
	tessisamess.insanejournal.com
	tesscodes.dreamwidth.org
	patreon.com/tessisamess

--*/

/* REPLACEMENTS */

:root{
/* COLORS */
	--heading-text: #fff;
	--main-text: #fff;
	--medium: rgba(255,255,255,0.5); /* entry date & tags */
	--lightest: #fff;

--page-bg: #0F1314;
	--content-bg: #172325;
	--accent: #5A6E63;
	--accent2: #71887B; /* entry links */
	--borders: rgba(255,255,255,0.2);

/* FONTS */
	--main-font: Source Sans Pro,calibri,sans-serif;
	--headings: Playfair Display,times;
	--title-font: Playfair Display,times;
	--home2-title: Playfair Display Italic,times;

--body-text: 11px;

--header-text: 7px;

--side-text: 7px;
	--side-titles: 7px;

--entry-titles: 7px;
	--entry-info: 7px;

--tags-header: 'Categories';

/* DIMENSIONS */
	--content-width: 740px;

--header-height: 30px;

--side-width: 240px;
	--side-padding: 20px;
	--side-margin: 20px;

--margin: 30px;
	--padding: 30px;
	--entry-icon: 70px;

--home-padding: 20px;
	--home-content: 280px;
	--home-nav: 150px;
	--home2-content: 500px;

/* IMAGES */
	--bg-img: url(https://cdn.discordapp.com/attachments/851970510397112340/958452604281696276/photo-1510248703225-7f7838dfd579.jpg)center fixed;

--private: url(https://i.imgur.com/dJgLxi8.png)center left no-repeat!important;
	--locked: url(https://i.imgur.com/tIooCJT.png)center left no-repeat!important;
	--customs: url(https://i.imgur.com/LcxM0s0.png)center left no-repeat!important;
}

/* FONTS */

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v19/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.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;
}

@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/bitter/v25/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8fbfOLjOXQ.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;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v28/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtM.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;
}

@font-face {
  font-family: 'Playfair Display Italic';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v28/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_qiTXtHA-Q.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;
}

/* GENERAL */

::selection{background:var(--accent);color:var(--lightest);}
::-moz-selection{background:var(--accent);color:var(--lightest);}

::-webkit-scrollbar-track{background:var(--content-bg);}
::-webkit-scrollbar{width:5px;background:transparent;}
::-webkit-scrollbar-thumb{background:var(--borders);}

*, *:before, *:after{box-sizing:border-box;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
body{margin:0;padding:var(--header-height) 0 0 0;background:var(--page-bg) var(--bg-img);background-size:cover;font-family:var(--headings);font-size:var(--body-text);color:var(--main-text);}
body:after{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:1;background:var(--page-bg);opacity:0.7;}

blockquote{margin:0 20px;border:1px solid var(--borders);padding:8px;font-style:normal;}
h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;text-transform:uppercase;letter-spacing:3px;font-weight:normal;}
img{max-width:100%;}
ul{list-style:circle;}
ol{list-style:upper-roman;}
hr{border-bottom:1px solid var(--borders);}
summary{cursor:pointer;}
summary:focus{outline:none;}

a, a:visited, a:active{color:var(--main-text);text-decoration:none;}
a:hover{color:var(--accent);text-decoration:none;}

.ljuser{font-weight:bold;}
.ljuser a[href*="profile"] img{display:none;}
.ljuser a[href*="profile"]:before{content:'@';}
.ljuser a[href*="asylum"][href*="profile"]:before{content:'#';}

/* WHOLE PAGE CONTAINERS */

#container{position:relative;z-index:3;background:transparent;padding:calc(var(--margin) + 2px + var(--entry-titles)) var(--margin) var(--margin) var(--margin);}
#container-inner{max-width:var(--content-width);margin:0 auto;}

.layout-two-column-left #alpha{margin:0 0 0 calc(var(--side-width) + var(--margin));}
.layout-two-column-left #beta{float:left;width:var(--side-width);}

.layout-two-column-right #alpha{margin:0 calc(var(--side-width) + var(--margin)) 0 0;}
.layout-two-column-right #beta{float:right;width:var(--side-width);}

/* HEADER */

#header{position:fixed;top:0;left:0;right:0;z-index:2;background:var(--content-bg);border-bottom:1px solid var(--borders);padding:0 calc(var(--header-height) / 2);color:var(--heading-text);font-family:var(--headings);text-transform:uppercase;letter-spacing:1px;line-height:1;}

#banner-text{height:var(--header-height);display:flex;align-items:center;flex-direction:row-reverse;justify-content:space-between;}

#nav-above{list-style:none;margin:0;padding:0;font-size:var(--header-text);}
#nav-below{display:none;}
.banner-viewlinks{display:inline;padding:0;border:none;}
.banner-viewlinks:last-of-type{display:none;}

#nav-above a{margin-left:10px;}
.current a{color:var(--main-text);}

#header-text{background:transparent;border:none;margin:0;padding:0;display:flex;align-items:center;}
#banner-header{font-family:var(--title-font);text-align:left;font-size:var(--header-text);line-height:var(--header-height);height:var(--header-height);display:flex;align-items:center;}
#banner-header:after{content:'';display:block;float:right;width:1px;height:calc(var(--header-height) / 1.7);background:var(--borders);margin:0 10px 0 8px;}
#banner-description{font-family:var(--headings);text-align:left;font-size:var(--header-text);padding:0;}

/* MAIN COLUMN */

#alpha{background:transparent;border:none;padding:0;}
#alpha a, #alpha a:visited{color:var(--accent2);}
#alpha a:hover{color:var(--medium);}

.content-nav{margin:calc((var(--margin) / 2) * -1) 0 0 0;font-size:0;display:flex;justify-content:space-between;}
.content-nav a{width:calc(50% - 2px);padding:5px 10px;background:var(--content-bg);border:1px solid var(--borders);font-size:var(--entry-info);text-transform:uppercase;letter-spacing:2px;color:var(--main-text)!important;}
.nav-top{display:none;}
.nav-bottom, .entrypage{text-align:center;}

#tagpage-header{text-align:center;}
#tagpage-header h2{margin:calc((var(--margin) / 2) * -1) var(--margin) var(--margin) var(--margin);font-size:var(--entry-info);}

.date-header{display:none;}

#column-footer{clear:both;}

/* STICKY NOTE */

#sticky-note .entry-inner{border:none;}
#sticky-note .entry-header{text-align:center;color:var(--heading-text);}
#sticky-note .entry-header h2{margin:0;padding:0;font-size:var(--entry-titles);}
#sticky-note .entry-text{padding:0;}
#sticky-note .entry-footer{display:none;}

/* ENTRIES */

.entry{margin:0 0 calc(var(--margin) + 2px + var(--entry-titles)) 0;padding:var(--padding);background:var(--content-bg);border:1px solid var(--borders);position:relative;}

.entry-header{background:var(--accent);border:1px solid var(--borders);padding:0;margin:calc((var(--padding) + 2px + var(--entry-titles)) * -1) 0 0 0;text-align:center;line-height:3;}
.entry-header h3{margin:0;padding:0;font-size:var(--entry-titles);}
#alpha .entry-header a, #alpha .entry-header a:visited{color:var(--heading-text);}

.lj-view-day .entry-datetime{display:none;}
.entry-datetime{position:absolute;bottom:var(--padding);left:var(--padding);text-align:center;font-size:var(--entry-info);color:var(--medium);text-transform:uppercase;letter-spacing:1px;}

.inner-entry-userpic{position:absolute;top:0;right:calc((var(--entry-icon) + 15px) * -1);float:right;text-align:center;padding:0;}
.layout-two-column-right .inner-entry-userpic{left:calc((var(--entry-icon) + 15px) * -1);right:auto;}
.inner-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);background:var(--content-bg);border:1px solid var(--borders);padding:5px;}
.outer-entry-userpic, .mid-entry-userpic{display:none;}

.pic-poster{text-align:center;font-size:8px;letter-spacing:1px;text-transform:uppercase;display:block;}
.pic-poster img{display:none;}
.pic-poster a[href*="profile"]{display:none;}

.entry-content{margin-top:calc(var(--padding) / 1.5);}
.entry-text{min-height:0;overflow:hidden;font-family:var(--main-font);line-height:1.6;text-align:justify;}

.ljtags{margin:10px 0 0 0;font-family:var(--headings);font-size:var(--entry-info);text-transform:uppercase;letter-spacing:1px;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:var(--medium);}

.entry-metadata{display:none;}

.entry-linkbar{border-top:1px solid var(--borders);margin:10px 0 0 0;font-size:var(--entry-info);text-align:right;text-transform:uppercase;letter-spacing:1px;}
.entry-linkbar ul{list-style:none;padding:0;margin:0;}
.entry-linkbar li{display:inline;border:none;padding:0;margin:0;}
.entry-linkbar li a{display:inline-block;margin:10px 0 0 5px;}
.entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions], .entry-linkbar li a[href$=html]{display:none;}

/* ARCHIVE VIEW */

.yearlinks{text-align:center;margin-bottom:10px;}
.year{list-style:none;margin:0;padding:0;}
.year li{display:inline;padding:0;}

.lj-view-archive .entry-content{margin:0;}
.yeartable{border-collapse:separate;border:none;width:100%;font-size:var(--entry-info);}
td.monthlable, td.viewmonth{letter-spacing:2px;text-transform:uppercase;background:transparent!important;}
td.monthlable{text-align:left;}
td.viewmonth{text-align:right;}
.dayname{letter-spacing:2px;text-transform:uppercase;text-align:center;background:var(--accent)!important;color:var(--lightest);}
.yeartable td{border:none!important;background:rgba(0,0,0,0.2);padding:5px;}

/* TAGS & MONTH VIEW */

.lj-view-tags #alpha, .lj-view-month #alpha{padding:var(--padding);background:var(--content-bg);border:1px solid var(--borders);}

/* SIDEBAR */

#beta{padding:var(--side-padding);background:var(--content-bg);border:1px solid var(--borders);}
#beta-inner{font-family:var(--headings);font-size:var(--side-text);color:var(--main-text);text-transform:uppercase;letter-spacing:1px;text-align:center;}

.module{padding:0;background:transparent;margin:0;border:none;}

.module-header{display:none;background:transparent;border:none;text-align:center;}
.module-header h3{margin:0;padding:0;font-size:var(--side-titles);color:var(--heading-text);}
.module-header h3:after{content:'';display:block;height:2px;width:50%;margin:8px auto 10px auto;background:var(--accent);}
.module-header a, .module-header a:visited{color:var(--heading-text);}

.module-customtext img{border:1px solid var(--borders);padding:8px;margin:0 0 var(--side-margin) 0;}
.module-customtext .module-content{padding:0;}

.module-customtext2{margin:0 0 var(--side-margin) 0;}
.module-customtext2 .module-header{display:block;}

.module-viewlinks ul, .module-typelist ul{list-style:none;margin:0;padding:0;}
.module-list{display:flex;flex-wrap:wrap;line-height:3;letter-spacing:1.5px;}
.module-list-item{width:50%;}
.module-list-item a{display:block;background:var(--borders);border:1px solid var(--borders);margin:2px;}
.module-list-item a:hover{background:var(--accent);color:var(--main-text);}

.module-categories .module-header{display:block;}
.module-categories .module-header h3{font-size:0;}
.module-categories .module-header h3:before{content:var(--tags-header);font-size:var(--side-titles);display:block;}
.module-categories{text-align:left;margin:var(--side-margin) 0 0 0;}
#tag-hierarchy::-webkit-scrollbar-track{background:var(--page-bg);}
#tag-hierarchy::-webkit-scrollbar{width:2px;}
#tag-hierarchy{max-height:200px;overflow:auto;line-height:2.5;}
#tag-hierarchy ul{padding-left:0;margin-left:20px;}
.tag-count{font-size:x-small;}

.all-link{text-align:center;margin:15px 0 0 0;line-height:2.5;}
.all-link a{display:inline-block;background:var(--borders);border:1px solid var(--borders);padding:0 10px;}
.all-link a:hover{background:var(--accent);color:var(--main-text);}

.module-layoutcredit{margin:0;position:fixed;bottom:15px;left:10px;line-height:1;}
.module-layoutcredit p{padding:0;margin:0;}
.module-layoutcredit a{background:var(--content-bg);border:1px solid var(--borders);padding:5px 10px;font-size:7px;letter-spacing:2px;}

.module-pagesummary, .module-calendar, .module-about, .module-syndicate, .module-powered, .module-ads{display:none;}

/* CONTENT FOOTER */

#content-footer{clear:both;height:0;}

/* ICON REPLACEMENTS */

img[src*="img/icon_private.gif"], img[src*="img/icon_protected.gif"], img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;padding:16px 0 0 18px!important;}

img[src*="img/icon_private.gif"]{background:transparent var(--private);}
img[src*="img/icon_protected.gif"]{background:transparent var(--locked);}
img[src*="img/icon_groups.gif"]{background:transparent var(--customs);}

/* HOME PAGE - HIDDEN NAV */

.lj-view-recent .home{position:fixed;top:0;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;justify-content:center;background:var(--page-bg) var(--bg-img);background-size:cover;}

.home, .home *{font-family:var(--headings);font-size:var(--side-text);text-transform:uppercase;letter-spacing:1px;text-align:center;}

.lj-view-recent .home:before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:var(--page-bg);opacity:0.7;}
.lj-view-recent .home:after{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:7;outline:1px solid var(--lightest);outline-offset:-2vw;}

.home .home-inner{position:relative;z-index:8;display:flex;flex-wrap:wrap;}

.home .home-inner h1{left:0;right:0;top:calc(40px * -0.5);position:absolute;z-index:9;font-family:var(--home2-title);text-align:left;text-transform:lowercase;font-style:italic;font-size:40px;line-height:0.5;text-shadow:0 0 3px var(--page-bg),1px 1px 1px var(--page-bg);}

.home .home-inner section{padding:var(--home-padding);background:var(--content-bg);border:1px solid var(--borders);margin:0 5px;}
.home .home-inner img{border:1px solid var(--borders);padding:8px;margin:0 0 15px 0;}

.home .content{width:var(--home-content);}

.content h3{font-size:var(--side-titles);color:var(--heading-text);}
.content h3:after{content:'';display:block;height:2px;width:50%;margin:8px auto 10px auto;background:var(--accent);}

.nav-dummy{padding:0 20px;margin:20px auto 0 auto;opacity:0;}
.nav-dummy, .nav-button:after{display:block;width:50%;background:var(--accent);color:var(--main-text)!important;letter-spacing:2px;line-height:3;}

.nav-button{position:absolute;bottom:calc(var(--home-padding) - 2px);left:calc(var(--home-padding) + 2px);width:calc(var(--home-content) - (var(--home-padding) * 2) - 2px);-moz-appearance:none;appearance:none;cursor:pointer;}
.nav-button:after{content:'Navigation';margin:0 auto;}
.nav-button:hover:after{letter-spacing:3px;}
.nav-button:checked:after{background:var(--accent2);}

.home .nav{height:100%;width:var(--home-nav);line-height:3;letter-spacing:1.5px;}
.home .nav a{display:block;margin:0 0 3px 0;background:var(--borders);border:1px solid var(--borders);color:var(--main-text)!important;}
.home .nav a:hover{background:var(--accent);}

.nav-slide{display:block;width:0;overflow:hidden;}

.nav-button:checked ~ .nav-slide{width:calc(var(--home-nav) + 5px);}

/* HOME PAGE - SINGLE AREA */

.lj-view-recent .home2{position:fixed;top:0;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--page-bg) var(--bg-img);background-size:cover;}

.lj-view-recent .home2:before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:var(--page-bg);opacity:0.7;}
.lj-view-recent .home2:after{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:7;outline:1px solid var(--lightest);outline-offset:-2vw;}

.home2, .home2 *{font-family:var(--headings);font-size:var(--side-text);text-transform:uppercase;letter-spacing:1px;text-align:center;}

.home2 h1{position:relative;z-index:9;width:var(--home2-content);font-family:var(--home2-title);text-align:left;text-transform:lowercase;font-style:italic;font-size:40px;line-height:0.5;text-shadow:0 0 3px var(--page-bg),1px 1px 1px var(--page-bg);}

.home2 .home-inner{width:var(--home2-content);padding:var(--home-padding);background:var(--content-bg);border:1px solid var(--borders);}

.home2 .home-inner{position:relative;z-index:8;}
.home2 .content{display:flex;align-items:center;margin:0 0 15px 0;}
.home2 .home-inner img{width:45%;border:1px solid var(--borders);padding:8px;margin:0 15px 0 0;}

.home2 .nav{display:flex;flex-wrap:wrap;line-height:3;letter-spacing:1.5px;}
.home2 .nav a{width:calc(33.3% - 4px);margin:2px;background:var(--borders);border:1px solid var(--borders);color:var(--main-text)!important;}
.home2 .nav a:hover{background:var(--accent);}

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title and subtitle, then save.
♡ Fill in your Links List if desired, then save.
♡ Go to Look and Feel, choose Complete Style, then save.
♡ Go to Custom Options and choose the following options:

♡ Layout Type:
Two Column (Sidebar on Left)
Two Column (Sidebar on Right)
♡ Disable customized comment pages for your journal: Yes
♡ Show Posting Time on Entries: No
♡ Show Userpics on Entries: Yes or No

♡ Navigation link names: Recent/Archive/Friends/Profile
♡ Fill in sticky note if desired.
♡ Fill in First Custom Text with your image.
♡ Fill in Second Custom Text with your blurb if desired.
♡ Person to credit if you have an individually created layout: Layout by Tessisamess
♡ URL to link the credit to: https://tessisamess.insanejournal.com/142909.html

♡ Display of tags in sidebar: List
♡ Sidebar ordering: If seeing unwanted modules or incorrect ordering, use this for reference!

♡ Custom stylesheet: Input the CSS provided and save!

Splash Page: Hidden Nav

Splash Page: Single Block

Installation: Splash Pages

♡ Post new entry.
♡ Use the following settings:

♡ Add your splash page code and save!

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!