tesscodes | Layout: Quoteworthy

Information

Hey guys! I meant to get a tutorial on how to use flexbox up today, but I'm still writing it up and I'm VERY TIRED & HAVE STUFF I GOTTA DO LOL so we'll get that up tomorrow instead!

Instead, today we've got a layout focused on big, bold text and geometric accents. The sidebar could very easily be used for a list of links rather than a quote with linked words, so be sure to play around in the custom text box and see what appeals to you the most! Enjoy! ♥

Layout Coding

/*-- QUOTEWORTHY - TESSISAMESS - 2018 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*-- Find more fun stuff at:tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--darkest: #000; /* entry headings & poster info background */
	--darker: #222; /* page text */
	--medium: #999; /* link hover, entry date & tags */
	--light: #ddd;  /* entry tags top triangle */
	--lightest: #fff; /* header text & links, sidebar text, entry background, poster info links */
	--accent: #6A8962; /* links & triangle accents */

--bg-img: url(https://i.imgur.com/9H1MxKE.png)center fixed;

--main-font: Montserrat,helvetica,arial,sans-serif;
	--headings: Oswald,arial black,gadget,sans-serif;
	--title-font: Oswald,arial black,gadget,sans-serif;

--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:'Montserrat';font-style:normal;font-weight:400;src:local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459Wlhyw.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:'Oswald';font-style:normal;font-weight:200;src:local('Oswald ExtraLight'), local('Oswald-ExtraLight'), url(https://fonts.gstatic.com/s/oswald/v16/TK3hWkUHHAIjg75-1h4Tus9C.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:'Oswald';font-style:normal;font-weight:700;src:local('Oswald Bold'), local('Oswald-Bold'), url(https://fonts.gstatic.com/s/oswald/v16/TK3hWkUHHAIjg75-ohoTus9C.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 */

body{margin:0;padding:0;background:var(--darker) var(--bg-img);font-family:var(--main-font);font-size:15px;color:var(--darker);}

blockquote{font-style:normal;padding:20px;margin:25px 5% 0 5%;border:1px solid rgba(0,0,0,0.3);position:relative;border-radius:3px;}
blockquote:before, blockquote:after{content:'';display:block;position:absolute;width:28px;height:18px;}
blockquote:before{background:url(https://i.imgur.com/H948GAB.png)center left no-repeat;left:-8px;top:-8px;}
blockquote:after{background:url(https://i.imgur.com/i3eaQjS.png)center right no-repeat;right:-8px;bottom:-8px;}

hr{margin:10px auto;width:70%;height:1px;background:rgba(0,0,0,0.2);border:none;position:relative;overflow: visible;}
hr:before{content:'';position:absolute;background:var(--accent);width:15px;height:15px;-webkit-clip-path:polygon(100% 0, 0 0, 50% 100%);clip-path:polygon(100% 0, 0 0, 50% 100%);left:50%;margin-left:-7.5px;top:-5px;}

h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;text-transform:uppercase;font-weight:200;}
img{max-width:100%;}
ul{list-style:circle;}
ol{list-style:upper-roman;}

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

.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{background:transparent;padding:3vw;}

.layout-two-column-left #alpha{margin:0 0 0 38vw;}
.layout-two-column-left #beta{float:left;width:35vw;}

/* HEADER */

#header{padding:0 0 3vw 30px;font-family:var(--headings);color:var(--lightest);text-transform:uppercase;letter-spacing:3px;position:relative;}
#header:before, #header:after{position:absolute;left:0;content:'';display:block;-webkit-clip-path:polygon(100% 0, 0 0, 50% 100%);clip-path:polygon(100% 0, 0 0, 50% 100%);z-index:2;}
#header:before{top:0;background:var(--lightest);width:15px;height:15px;}
#header:after{top:7px;background:var(--accent);width:15px;height:15px;z-index:1;}
#banner-text{display:flex;justify-content:space-between;align-items:center;}

#nav-below{display:block;list-style:none;margin:0;padding:0;font-size:10px;}
#nav-above{display:none;}
.banner-viewlinks{display:inline;padding:0;border:none;}
.banner-viewlinks:last-of-type{display:none;}

#nav-below a{margin-left:10px;color:var(--lightest);}
.current a{color:var(--lightest);}

#header-text{background:transparent;border:none;margin:0;padding:0;display:flex;}
#header-text a{color:var(--lightest);}
#banner-header{font-family:var(--title-font);text-align:center;font-size:10px;margin-right:10px;font-weight:700;}
#banner-description{font-family:var(--headings);text-align:center;font-size:10px;margin:0;}

/* BODY OF PAGE */

#pagebody{padding:0 4vw;}

/* MAIN COLUMN */

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

.content-nav{margin:3vw 0 0 0;}
.nav-top{display:none;}
.nav-bottom, .entrypage{text-align:center;}

#tagpage-header{text-align:center;}
#tagpage-header h2{margin-bottom:3vw;color:var(--lightest);}

.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(--darkest);}
#sticky-note .entry-header h2{margin:0;padding:0;font-size:30px;}
#sticky-note .entry-text{padding:0;}
#sticky-note .entry-footer{display:none;}

/* ENTRIES */

.entry{margin:0 0 3vw 0;position:relative;padding:3vw;background:var(--lightest);}

.entry-header{background:transparent;border:none;padding:0;}
.entry-header h3{margin:0;padding:0;font-size:30px;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:var(--darkest);}

.entry-datetime{font-family:var(--headings);font-size:small;color:var(--medium);text-transform:uppercase;letter-spacing:2px;}

.mid-entry-userpic{display:block;float:left;text-align:center;padding:0 15px 0 0;position:relative;}
.mid-entry-userpic img{width:65px;height:65px;}
.outer-entry-userpic, .inner-entry-userpic{display:none;}

.pic-poster:before{content:'';display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid var(--darkest);margin:-10px auto 5px auto;}
.pic-poster{z-index:3;left:-20px;position:absolute;background:var(--darkest);margin-top:-30px;padding:5px;text-align:center;font-size:8px;letter-spacing:1px;text-transform:uppercase;display:block;width:95px;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.2);opacity:0;-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;}
.mid-entry-userpic:hover .pic-poster{opacity:1;margin-top:9px;}
.pic-poster img{display:none;}
.pic-poster a{color:var(--lightest)!important;}
.pic-poster a[href*="profile"]{display:none;}

.entry-content{margin-top:1.5vw;}
.entry-text{min-height:0;overflow:hidden;text-align:justify;line-height:1.6;}
.entry-text a{font-weight:bold;}

.ljtags:before, .ljtags:after{position:absolute;left:0;content:'';display:block;-webkit-clip-path:polygon(100% 0, 0 0, 50% 100%);clip-path:polygon(100% 0, 0 0, 50% 100%);z-index:2;}
.ljtags:before{top:5px;background:var(--light);width:13px;height:13px;}
.ljtags:after{top:10px;background:var(--accent);width:13px;height:13px;z-index:1;}
.ljtags{margin:1.5vw 0 0 0;padding:0 0 0 20px;position:relative;font-family:var(--headings);text-transform:uppercase;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:var(--medium);font-weight:normal;}

.entry-metadata{display:none;}

.entry-linkbar{margin:1.5vw 0 0 0;font-family:var(--headings);font-size:small;text-align:right;text-transform:uppercase;font-weight:700;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{margin-left:10px;}
.entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions]{display:none;}

/* ARCHIVE VIEW */

.yearlinks{text-align:center;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;font-size:30px;color:rgba(255,255,255,0.5);}
.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%;}
td.monthlable, td.viewmonth{letter-spacing:2px;text-transform:uppercase;background:transparent!important;font-size:20px;}
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);font-size:14px;}
.yeartable td{border:none!important;background:rgba(0,0,0,0.05);padding:5px;}

/* TAGS & MONTH VIEW */

.lj-view-tags #alpha, .lj-view-month #alpha{padding:3vw;background:var(--lightest);}

/* SIDEBAR */

#beta-inner{font-size:10px;color:var(--lightest);font-family:var(--headings);font-weight:200;text-transform:uppercase;letter-spacing:3px;text-align:right;}

.module{display:none;padding:0;background:transparent;margin:0 0 10px 0;border:none;}
.module-header{display:none;}

.module-customtext{display:block;}
.module-customtext .module-content{padding:0;font-size:55px;text-shadow:2px 2px 1px rgba(0,0,0,0.4);}

.module-layoutcredit{display:block;}
.module-layoutcredit p{padding:0;margin:0;display:flex;align-items:center;justify-content:flex-end;}
.module-layoutcredit p:before{content:'';height:1px;width:40%;background:rgba(255,255,255,0.2);margin:0 10px 0 20%;}

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

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title and subtitle, 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)
♡ Disable customized comment pages for your journal: Yes
♡ Link text to leave a comment: Comment
♡ Navigation link names: Recent/Archive/Friends/Profile
♡ Fill in sticky note if desired.
♡ Fill in custom sidebar module if desired. This is your quote navigation. The demo uses plain text with standard links for some words.
♡ Person to credit if you have an individually created layout: Layout by Tessisamess
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ Custom stylesheet: Input the CSS provided 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!