layout | assemble!

[shipping]

Layout: Assemble! by Xy @ shipping

To celebrate Endgame, I've decided to make Avengers-themed layouts! Phase 2 recolors are coming, but I thought 6 colors was a good start. This layout features a sidebar you can fill with images that shows information when you hover over the panels. The cutout shapes are unique to each recolor. The layout will resize for different resolutions. Should work on mobile, though the hover behavior will be wonky.

instructions

1. Go to customize journal and select Flexible Squares. If you don't have flexible squares, you need to install it first.
   
2. Then go to sidebar and select "show". The sidebar will be on the left no matter which orientation you choose.
   
3. Go to custom css and uncheck everything, replacing the block of "custom stylesheet" with whatever you like below!
   
4. You must supply your own pictures for the sidebar! They're under /*SIDEBAR BACKGROUNDS*/. Just replace all the IMAGEURLs.
   
5. Custom comment pages are not recommended or supported with this layout. Additionally, some features are missing in Safari and older versions of Firefox.
   
6. If you remove credit from the code comments, make sure to credit shipping somewhere on your journal.

code

CLINT // IMAGE PREVIEW // LIVE PREVIEW /*LAYOUT: ASSEMBLE! BY SHIPPING @ DREAMWIDTH*/ :root { /*MAIN*/ --main-color: #000; --link-color: #222; --link-hover: #444; --bodybg: #000; --bodyfont: quicksand; /*TITLE*/ --titlefont: permanent marker; --titlebg: #4B0082 repeating-linear-gradient( 45deg, #330066, #330066 1%, #4B0082 1%, #4B0082 2%); --subtitlebg: #4B0082 repeating-linear-gradient(-45deg, #4B0082, #4B0082 1%, #330066 1%, #330066 2%); --titleborder: #000; --titlecolor: #fff; --titlesize: 50px; --subtitlesize: 20px; --header-height-offset: 150px; --titleshadow: #BA55D3; /*ENTRY*/ --entry-padding: 0px; --entrytext-padding: 20px; --subcontent-background: #fff; --entry-background: #fff; --subject-padding: 5px; --subject-padding-offset: -5px; --subjectshadow: #fff; --comment-padding: 10px; --userpic-border: repeating-linear-gradient(-45deg, #4B0082, #4B0082 10px, #330066 10px, #330066 20px); --subjectcolor: #BA55D3; --datecolor: #000; /*COMMENTS & TAGS */ --comment-background: #000; --comment-border: #ddd; --comment-color: #fff; --comment-font: permanent marker; --commentbox-background: #fff; --floatinglinkscolor: #BA55D3; --floatinglinkshover: #fff; /*SIDEBAR*/ --sbarcolor: #BA55D3; --sbarlink: #BA55D3; --sbarhover: #fff; --sbarbg: rgba(0,0,0,0.7); /*PANEL CUT-OUTS*/ --clip-path-1: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%); --clip-path-2: polygon(100% 0%, 100% 85%, 50% 100%, 0 85%, 0 0, 50% 15%); --clip-path-3: polygon(100% 0%, 100% 85%, 50% 100%, 0 85%, 0 0, 50% 15%); --clip-path-4: polygon(100% 0%, 100% 85%, 50% 100%, 0 85%, 0 0, 50% 15%); --clip-path-5: polygon(100% 0%, 100% 85%, 50% 100%, 0 85%, 0 0, 50% 15%); /*SIDEBAR BACKGROUNDS*/ --sbarbg1: url(IMAGEURL); --sbarbg2: url(IMAGEURL); --sbarbg3: url(IMAGEURL); --sbarbg4: url(IMAGEURL); --sbarbg5: url(IMAGEURL); } /* latin */ @font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; src: local('Permanent Marker Regular'), local('PermanentMarker-Regular'), url("https://fonts.gstatic.com/s/permanentmarker/v8/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cf5b6jlg.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; } /*CONTROL*/ #ljcontrolstrip{ background: #000; } /*BODY*/ body{ color: var(--main-color); font-family: var(--bodyfont); font-size: 12px; background: var(--bodybg); } img{ max-width: 50vw; } a, a:link, a:visited { color: var(--link-color); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: none; font-weight: bold; } ul{ padding-inline-start: 0px !important; } ul li{ list-style-type: none; } /*TITLE*/ #header{ position: relative; } .title{ background: var(--titlebg); color: transparent; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(1px 1px var(--titleshadow)); } .title, .subtitle{ height: 58px; } .subtitle{ background: var(--subtitlebg); color: var(--titlecolor); } .title{ margin-left: auto; margin-right: auto; font-size: var(--titlesize); width: 80%; text-align: center; font-family: var(--titlefont); transition: 0.25s; transition-timing-function: ease-in-out; } .title:hover { text-shadow: 1px 1px var(--titleshadow); transition: 0.25s; transition-timing-function: ease-in-out; } .subtitle { margin-left: auto; margin-right: auto; font-size: var(--subtitlesize); width: 80%; text-align: center; padding-bottom: 5px; border-bottom: 2px solid var(--titleborder); text-transform: uppercase; letter-spacing: 5px; } /*SIDEBAR & NAVHEADER*/ .navheader{ padding-top: 20px; height: 20px; text-align: center; } .navheader li{ display: inline; } #sidebar { padding-left: 0px !important; margin: 0; margin-left: 10%; width: 20%; color: transparent; z-index: 300; } #sidebar{ float: left; position: relative; } #sidebar div:nth-child(2) { display: none; } #sidebar div{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; height: 200px; transition: 0.25s; transition-timing-function: ease-out; } #sidebar div .sbartitle { text-transform: uppercase; letter-spacing: 5px; text-align: center; border-bottom: 1px solid transparent; } .sbarlist{ padding: 0px; margin: 0px; } .sbarbody2{ overflow: auto; padding: 10px; } #sbar_linklist{ overflow: auto; } .sbaritem { transition: 0.25s; transition-timing-function: ease-out; } .sbaritem:hover a{ letter-spacing: 5px; transition: 0.25s; transition-timing-function: ease-out; } #sidebar .clear { display: none; } #sidebar div:nth-child(1){ clip-path: var(--clip-path-1); -webkit-clip-path: var(--clip-path-1); background: var(--sbarbg1) center center; background-size: cover; } #sidebar div:nth-child(3){ clip-path: var(--clip-path-2); -webkit-clip-path: var(--clip-path-2); background: var(--sbarbg2) center center; background-size: cover; } #sidebar div:nth-child(4){ clip-path: var(--clip-path-3); -webkit-clip-path: var(--clip-path-3); background: var(--sbarbg3) center center; background-size: cover; } #sidebar div:nth-child(5){ clip-path: var(--clip-path-4); -webkit-clip-path: var(--clip-path-4); background: var(--sbarbg4) center center; background-size: cover; } #sidebar a { color: transparent; } .defaultuserpic img { display: none; } #sidebar .defaultuserpic:hover img { border-radius: 50%; padding: 5px; background: rgba(255,255,255,0.5); box-shadow: 0 0 5px #000; display: block; } #sidebar div:hover{ color: var(--sbarcolor); box-shadow: inset 0 0 0 100vmax var(--sbarbg); height: 250px; width: calc(100% + 50px); transition: 0.25s; transition-timing-function: ease-out; } #sidebar div:hover{ margin-left: -25px; } #sidebar div:hover .sbartitle { border-bottom: 1px solid var(--sbarcolor); } #sidebar div:hover a { color: var(--sbarlink); } #sidebar div:hover a:hover{ color: var(--sbarhover); } /*NAV ICONS*/ .navheader li { list-style-type: none !important; transition: all .1s linear; filter: brightness(1000%); } .navheader li a{ color: rgba(0,0,0,0); } /*tinyicons by https://glyph.smarticons.co/*/ .navheader li:nth-child(1) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/BuM.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(2) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/Bv6.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(3) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgshare.com/i/BvS.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(4) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgshare.com/i/BsF.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(5) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/CCh.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(6) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/CDY.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:hover{ background-size: 40px 40px !important; } /*ENTRY*/ #maincontent{ width: calc(60% - 20px); padding-left: calc(30% + 20px); } .entry { padding: var(--entry-padding); } .subcontent { background: var(--subcontent-background); } .entry_text, .currentmusic, .currentlocation { padding: var(--entrytext-padding); background: var(--entry-background); } .userpic { transform: translate(var(--subject-padding-offset),var(--subject-padding)); } .userpic img{ float: right; height: 50px; width: 50px; padding: 5px; background: var(--userpic-border); } .datesubject{ padding: var(--subject-padding); height: 60px; text-align: right; } .date, .date a { color: var(--datecolor); } .subject, .subject a{ color: var(--subjectcolor); transition: 0.25s; transition-timing-function: ease-in-out; } .subject:hover, .subject a:hover { text-shadow: 1px 1px var(--subjectshadow); transition: 0.25s; transition-timing-function: ease-in-out; } .date { transform: translate(-5px, 0); text-transform: uppercase; letter-spacing: 5px; } .subject{ font-size: 30px; line-height: 40px; } .comments { padding: var(--comment-padding); width: 250px; margin-right: auto; margin-left: auto; position: relative; text-align: center; color: var(--subcontent-background); } .comments a{ background: var(--comment-background); font-family: var(--comment-font); padding: 5px; padding-left: 10px; padding-right: 10px; color: var(--comment-color); text-transform: uppercase; transition: 0.25s; transition-timing-function: ease-in-out; } .comments a:hover{ box-shadow: 1px 1px var(--comment-border); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtags { padding-top: 10px; font-weight: bold; } .subcontent .clear{ display: none } .entry .clear { padding: 10px; } .year{ text-align: center; } .year .active{ width: 100px; } .yeartable { background: var(--entry-background); } h2 { letter-spacing: 5px; text-transform: uppercase; color: var(--h2-color); } .ljtags a, .ljtaglist li a, .year .active { padding-left: 5px; padding-right: 5px; background: var(--comment-background); text-transform: uppercase; color: var(--comment-color); font-family: var(--comment-font); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtags a:hover, .ljtaglist li a:hover, .year .active:hover { box-shadow: 1px 1px var(--comment-border); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtaglist li { padding-top: 4px; } /*FOOTER*/ .viewing{ text-align: center; } /*COMMENTS*/ .userpicfriends{ background: transparent !important; width: 50px; float: left; } .userpicfriends img{ width: 50px; height: 50px; } .datesubjectcomment{ padding: 5px; width: 100%; height: 80px; background: var(--titlebg); color: var(--titlecolor); } .datesubjectcomment strong{ font-family: var(--titlefont); font-size: 20px; color: var(--titlecolor); } .datesubjectcomment a{ color: var(--titlecolor); } .commentbox { background: var(--commentbox-background); } .userpiccomment { float: right; height: 50px; width: 50px; padding-top: 15px; padding-right: 15px; } .skiplinks { text-align: center; } .skiplinks, .skiplinks a, #navfooter, #navfooter a, .ljtaglist, .ljtaglist a, li.viewing, li.viewing a{ color: var(--floatinglinkscolor); } .box a:hover, .skiplinks a:hover, #navfooter a:hover, li.veiwing a:hover { color: var(--floatinglinkshover); } .box, .box a { color: var(--maincolor); }	NATASHA // IMAGE PREVIEW // LIVE PREVIEW /*LAYOUT: ASSEMBLE! BY SHIPPING @ DREAMWIDTH*/ :root { /*MAIN*/ --main-color: #000; --link-color: #222; --link-hover: #444; --bodybg: #fff; --bodyfont: quicksand; /*TITLE*/ --titlefont: caveat; --subtitlefont: montserrat; --titlebg: #000; --titleborder: #000; --titlecolor: #fff; --titlesize: 50px; --subtitlesize: 20px; --header-height-offset: 150px; --titleshadow: #d32711; /*ENTRY*/ --entry-padding: 0px; --entrytext-padding: 20px; --subcontent-background: #d32711; --entry-background: #fff; --subject-padding: 5px; --subject-padding-offset: -5px; --subjectshadow: #fff; --comment-padding: 10px; --userpic-border: #000; --subjectcolor: #000; --datecolor: #000; /*COMMENTS & TAGS */ --comment-background: #000; --comment-border: #ddd; --comment-color: #fff; --comment-font: permanent marker; --commentbox-background: #fff; --floatinglinkscolor: #000; --floatinglinkshover: #d32711; /*SIDEBAR*/ --sbarcolor: #fff; --sbarlink: #fff; --sbarhover: #fff; --sbarbg: rgba(0,0,0,0.7); /*PANEL CUT-OUTS*/ --clip-path-1: polygon(0 0, 100% 0%, 95.75% 85%, 5% 100%); --clip-path-2: polygon(6% 15%, 95% 0, 90% 85%, 10% 100%); --clip-path-3: polygon(10% 15%, 90% 0, 95% 100%, 5% 90%); --clip-path-4: polygon(5% 0, 95% 15%, 100% 85%, 0 100%); --clip-path-5: polygon(0 15%, 100% 0, 100% 100%, 0 100%); /*SIDEBAR BACKGROUNDS*/ --sbarbg1: url(IMAGEURL); --sbarbg2: url(IMAGEURL); --sbarbg3: url(IMAGEURL); --sbarbg4: url(IMAGEURL); --sbarbg5: url(IMAGEURL); } /* cyrillic */ @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/v13/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2") format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin */ @font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; src: local('Permanent Marker Regular'), local('PermanentMarker-Regular'), url("https://fonts.gstatic.com/s/permanentmarker/v8/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cf5b6jlg.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 */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; src: local('Caveat Regular'), local('Caveat-Regular'), url("https://fonts.gstatic.com/s/caveat/v5/Wnz6HAc5bAfYB2Q7YjYYiAzcPDKo.woff2") format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* 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; } /*CONTROL*/ #ljcontrolstrip{ background: #000; } /*BODY*/ body{ color: var(--main-color); font-family: var(--bodyfont); font-size: 12px; background: var(--bodybg); } img{ max-width: 50vw; } a, a:link, a:visited { color: var(--link-color); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: none; font-weight: bold; } ul{ padding-inline-start: 0px !important; } ul li{ list-style-type: none; } /*TITLE*/ #header{ position: relative; } .title, .subtitle{ background: var(--titlebg); color: var(--titlecolor); } .title{ margin-left: auto; margin-right: auto; font-size: var(--titlesize); width: 80%; text-align: center; font-family: var(--titlefont); transition: 0.25s; transition-timing-function: ease-in-out; } .title:hover { text-shadow: 1px 1px var(--titleshadow); transition: 0.25s; transition-timing-function: ease-in-out; } .subtitle { margin-left: auto; margin-right: auto; font-size: var(--subtitlesize); font-family: var(--subtitlefont); width: 80%; text-align: center; padding-bottom: 5px; border-bottom: 2px solid var(--titleborder); text-transform: uppercase; letter-spacing: 5px; } /*SIDEBAR & NAVHEADER*/ .navheader{ padding-top: 20px; height: 20px; text-align: center; } .navheader li{ display: inline; } #sidebar { padding-left: 0px !important; margin: 0; margin-left: 10%; width: 20%; color: transparent; z-index: 300; } #sidebar{ float: left; position: relative; } #sidebar div:nth-child(2) { display: none; } #sidebar div{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; height: 200px; transition: 0.25s; transition-timing-function: ease-out; } #sidebar div .sbartitle { text-transform: uppercase; letter-spacing: 5px; text-align: center; border-bottom: 1px solid transparent; } .sbarlist{ padding: 0px; margin: 0px; } .sbarbody2{ overflow: auto; padding: 10px; } #sbar_linklist{ overflow: auto; } .sbaritem { transition: 0.25s; transition-timing-function: ease-out; } .sbaritem:hover a{ letter-spacing: 5px; transition: 0.25s; transition-timing-function: ease-out; } #sidebar .clear { display: none; } #sidebar div:nth-child(1){ clip-path: var(--clip-path-1); -webkit-clip-path: var(--clip-path-1); background: var(--sbarbg1) center center; background-size: cover; } #sidebar div:nth-child(3){ clip-path: var(--clip-path-2); -webkit-clip-path: var(--clip-path-2); background: var(--sbarbg2) center center; background-size: cover; } #sidebar div:nth-child(4){ clip-path: var(--clip-path-3); -webkit-clip-path: var(--clip-path-3); background: var(--sbarbg3) center center; background-size: cover; } #sidebar div:nth-child(5){ clip-path: var(--clip-path-4); -webkit-clip-path: var(--clip-path-4); background: var(--sbarbg4) center center; background-size: cover; } #sidebar a { color: transparent; } .defaultuserpic img { display: none; } #sidebar .defaultuserpic:hover img { border-radius: 50%; padding: 5px; background: rgba(255,255,255,0.5); box-shadow: 0 0 5px #000; display: block; } #sidebar div:hover{ color: var(--sbarcolor); box-shadow: inset 0 0 0 100vmax var(--sbarbg); height: 250px; width: calc(100% + 50px); transition: 0.25s; transition-timing-function: ease-out; } #sidebar div:hover{ margin-left: -25px; } #sidebar div:hover .sbartitle { border-bottom: 1px solid var(--sbarcolor); } #sidebar div:hover a { color: var(--sbarlink); } #sidebar div:hover a:hover{ color: var(--sbarhover); } /*NAV ICONS*/ .navheader li { list-style-type: none !important; transition: all .1s linear; filter: brightness(0%); } .navheader li a{ color: rgba(0,0,0,0); } /*tinyicons by https://glyph.smarticons.co/*/ .navheader li:nth-child(1) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/BuM.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(2) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/Bv6.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(3) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgshare.com/i/BvS.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(4) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgshare.com/i/BsF.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(5) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/CCh.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(6) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/CDY.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:hover{ background-size: 40px 40px !important; } /*ENTRY*/ #maincontent{ width: calc(60% - 20px); padding-left: calc(30% + 20px); } .entry { padding: var(--entry-padding); } .subcontent { background: var(--subcontent-background); } .entry_text, .currentmusic, .currentlocation { padding: var(--entrytext-padding); background: var(--entry-background); } .userpic { transform: translate(var(--subject-padding-offset),var(--subject-padding)); } .userpic img{ float: right; height: 50px; width: 50px; padding: 5px; background: var(--userpic-border); } .datesubject{ padding: var(--subject-padding); height: 60px; text-align: right; } .date, .date a { color: var(--datecolor); } .subject, .subject a{ color: var(--subjectcolor); transition: 0.25s; transition-timing-function: ease-in-out; } .subject:hover, .subject a:hover { text-shadow: 1px 1px var(--subjectshadow); transition: 0.25s; transition-timing-function: ease-in-out; } .date { transform: translate(-5px, 0); text-transform: uppercase; letter-spacing: 5px; } .subject{ font-size: 30px; line-height: 40px; } .comments { padding: var(--comment-padding); width: 250px; margin-right: auto; margin-left: auto; position: relative; text-align: center; color: var(--subcontent-background); } .comments a{ background: var(--comment-background); font-family: var(--comment-font); padding: 5px; padding-left: 10px; padding-right: 10px; color: var(--comment-color); text-transform: uppercase; transition: 0.25s; transition-timing-function: ease-in-out; } .comments a:hover{ box-shadow: 1px 1px var(--comment-border); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtags { padding-top: 10px; font-weight: bold; } .subcontent .clear{ display: none } .entry .clear { padding: 10px; } .year{ text-align: center; } .year .active{ width: 100px; } .yeartable { background: var(--entry-background); } h2 { letter-spacing: 5px; text-transform: uppercase; color: var(--h2-color); } .ljtags a, .ljtaglist li a, .year .active { padding-left: 5px; padding-right: 5px; background: var(--comment-background); text-transform: uppercase; color: var(--comment-color); font-family: var(--comment-font); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtags a:hover, .ljtaglist li a:hover, .year .active:hover { box-shadow: 1px 1px var(--comment-border); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtaglist li { padding-top: 4px; } /*FOOTER*/ .viewing{ text-align: center; } /*COMMENTS*/ .userpicfriends{ background: transparent !important; width: 50px; float: left; } .userpicfriends img{ width: 50px; height: 50px; } .datesubjectcomment{ padding: 5px; width: 100%; height: 80px; background: var(--titlebg); color: var(--titlecolor); } .datesubjectcomment strong{ font-family: var(--titlefont); font-size: 20px; color: var(--titlecolor); } .datesubjectcomment a{ color: var(--titlecolor); } .commentbox { background: var(--commentbox-background); } .userpiccomment { float: right; height: 50px; width: 50px; padding-top: 15px; padding-right: 15px; } .skiplinks { text-align: center; } .skiplinks, .skiplinks a, #navfooter, #navfooter a, .ljtaglist, .ljtaglist a, li.viewing, li.viewing a{ color: var(--floatinglinkscolor); } .box a:hover, .skiplinks a:hover, #navfooter a:hover, li.veiwing a:hover { color: var(--floatinglinkshover); } .box, .box a { color: var(--maincolor); }
STEVE // IMAGE PREVIEW // LIVE PREVIEW /*LAYOUT: ASSEMBLE! BY SHIPPING @ DREAMWIDTH*/ :root { /*MAIN*/ --main-color: #000; --link-color: #222; --link-hover: #444; --bodybg: linear-gradient(rgba(255,255,255,0.6), rgba(251,201,61, 0.3)) fixed, repeating-linear-gradient(90deg,#edeff2,#edeff2 7%,#fb4f4f 7%,#fb4f4f 14%); --bodyfont: quicksand; /*TITLE*/ --titlefont: permanent marker; --titlebg: #3aa8d8; --titleborder: #3aa8d8; --titlecolor: #fff; --titlesize: 50px; --subtitlesize: 20px; --header-height-offset: 150px; --titleshadow: #c6442d; /*ENTRY*/ --entry-padding: 0px; --entrytext-padding: 20px; --subcontent-background: #000; --entry-background: #fff; --subject-padding: 5px; --subject-padding-offset: -5px; --subjectshadow: #c6442d; --comment-padding: 10px; --userpic-border: #fff; --subjectcolor: #fff; --datecolor: #fff; /*COMMENTS & TAGS */ --comment-background: #3aa8d8; --comment-border: #19364C; --comment-color: #fff; --comment-font: permanent marker; --commentbox-background: #fff; --floatinglinkscolor: #19364C; --floatinglinkshover: #c6442d; /*SIDEBAR*/ --sbarcolor: #fff; --sbarlink: #fff; --sbarhover: #fff; --sbarbg: rgba(251,79,79,0.7); /*PANEL CUT-OUTS*/ --clip-path-1: polygon(0 0, 100% 0, 100% 80%, 95% 85%, 5% 100%, 0 95%); --clip-path-2: polygon(5% 12%, 95% 0, 100% 5%, 100% 77%, 95% 83%, 5% 100%, 0 95%, 0 17%); --clip-path-3: polygon(5% 14%, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 92%, 0 84%, 0 19%); --clip-path-4: polygon(5% 0, 95% 13%, 100% 18%, 100% 82%, 95% 87%, 5% 100%, 0 95%, 0 5%); --clip-path-5: polygon(5% 13%, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 18%); /*SIDEBAR BACKGROUNDS*/ --sbarbg1: url(IMAGEURL); --sbarbg2: url(IMAGEURL); --sbarbg3: url(IMAGEURL); --sbarbg4: url(IMAGEURL); --sbarbg5: url(IMAGEURL); } /* latin */ @font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; src: local('Permanent Marker Regular'), local('PermanentMarker-Regular'), url("https://fonts.gstatic.com/s/permanentmarker/v8/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cf5b6jlg.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; } /*CONTROL*/ #ljcontrolstrip{ background: #000; } /*BODY*/ body{ color: var(--main-color); font-family: var(--bodyfont); font-size: 12px; background: var(--bodybg); } img{ max-width: 50vw; } a, a:link, a:visited { color: var(--link-color); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: none; font-weight: bold; } ul{ padding-inline-start: 0px !important; } ul li{ list-style-type: none; } /*TITLE*/ #header{ position: relative; } .title, .subtitle{ background: var(--titlebg); color: var(--titlecolor); } .title{ margin-left: auto; margin-right: auto; font-size: var(--titlesize); width: 80%; text-align: center; font-family: var(--titlefont); transition: 0.25s; transition-timing-function: ease-in-out; } .title:hover { text-shadow: 1px 1px var(--titleshadow); transition: 0.25s; transition-timing-function: ease-in-out; } .subtitle { margin-left: auto; margin-right: auto; font-size: var(--subtitlesize); width: 80%; text-align: center; padding-bottom: 5px; border-bottom: 2px solid var(--titleborder); text-transform: uppercase; letter-spacing: 5px; } /*SIDEBAR & NAVHEADER*/ .navheader{ padding-top: 20px; height: 20px; text-align: center; } .navheader li{ display: inline; } #sidebar { padding-left: 0px !important; margin: 0; margin-left: 10%; width: 20%; color: transparent; z-index: 300; } #sidebar{ float: left; position: relative; } #sidebar div:nth-child(2) { display: none; } #sidebar div{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; height: 200px; transition: 0.25s; transition-timing-function: ease-out; } #sidebar div .sbartitle { text-transform: uppercase; letter-spacing: 5px; text-align: center; border-bottom: 1px solid transparent; } .sbarlist{ padding: 0px; margin: 0px; } .sbarbody2{ overflow: auto; padding: 10px; } #sbar_linklist{ overflow: auto; } .sbaritem { transition: 0.25s; transition-timing-function: ease-out; } .sbaritem:hover a{ letter-spacing: 5px; transition: 0.25s; transition-timing-function: ease-out; } #sidebar .clear { display: none; } #sidebar div:nth-child(1){ clip-path: var(--clip-path-1); -webkit-clip-path: var(--clip-path-1); background: var(--sbarbg1) center center; background-size: cover; } #sidebar div:nth-child(3){ clip-path: var(--clip-path-2); -webkit-clip-path: var(--clip-path-2); background: var(--sbarbg2) center center; background-size: cover; } #sidebar div:nth-child(4){ clip-path: var(--clip-path-3); -webkit-clip-path: var(--clip-path-3); background: var(--sbarbg3) center center; background-size: cover; } #sidebar div:nth-child(5){ clip-path: var(--clip-path-4); -webkit-clip-path: var(--clip-path-4); background: var(--sbarbg4) center center; background-size: cover; } #sidebar a { color: transparent; } .defaultuserpic img { display: none; } #sidebar .defaultuserpic:hover img { border-radius: 50%; padding: 5px; background: rgba(255,255,255,0.5); box-shadow: 0 0 5px #000; display: block; } #sidebar div:hover{ color: var(--sbarcolor); box-shadow: inset 0 0 0 100vmax var(--sbarbg); height: 250px; width: calc(100% + 50px); transition: 0.25s; transition-timing-function: ease-out; } #sidebar div:hover{ margin-left: -25px; } #sidebar div:hover .sbartitle { border-bottom: 1px solid var(--sbarcolor); } #sidebar div:hover a { color: var(--sbarlink); } #sidebar div:hover a:hover{ color: var(--sbarhover); } /*NAV ICONS*/ .navheader li { list-style-type: none !important; transition: all .1s linear; filter: brightness(0%); } .navheader li a{ color: rgba(0,0,0,0); } /*tinyicons by https://glyph.smarticons.co/*/ .navheader li:nth-child(1) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/BuM.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; border-radius: 100%; } .navheader li:nth-child(2) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/Bv6.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(3) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgshare.com/i/BvS.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(4) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgshare.com/i/BsF.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(5) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/CCh.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(6) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/CDY.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:hover{ background-size: 40px 40px !important; } /*ENTRY*/ #maincontent{ width: calc(60% - 20px); padding-left: calc(30% + 20px); } .entry { padding: var(--entry-padding); } .subcontent { background: var(--subcontent-background); } .entry_text, .currentmusic, .currentlocation { padding: var(--entrytext-padding); background: var(--entry-background); } .userpic { transform: translate(var(--subject-padding-offset),var(--subject-padding)); } .userpic img{ float: right; height: 50px; width: 50px; padding: 5px; background: var(--userpic-border); } .datesubject{ padding: var(--subject-padding); height: 60px; text-align: right; } .date, .date a { color: var(--datecolor); } .subject, .subject a{ color: var(--subjectcolor); transition: 0.25s; transition-timing-function: ease-in-out; } .subject:hover, .subject a:hover { text-shadow: 1px 1px var(--subjectshadow); transition: 0.25s; transition-timing-function: ease-in-out; } .date { transform: translate(-5px, 0); text-transform: uppercase; letter-spacing: 5px; } .subject{ font-size: 30px; line-height: 40px; } .comments { padding: var(--comment-padding); width: 250px; margin-right: auto; margin-left: auto; position: relative; text-align: center; color: var(--subcontent-background); } .comments a{ background: var(--comment-background); font-family: var(--comment-font); padding: 5px; padding-left: 10px; padding-right: 10px; color: var(--comment-color); text-transform: uppercase; transition: 0.25s; transition-timing-function: ease-in-out; } .comments a:hover{ box-shadow: 1px 1px var(--comment-border); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtags { padding-top: 10px; font-weight: bold; } .subcontent .clear{ display: none } .entry .clear { padding: 10px; } .year{ text-align: center; } .year .active{ width: 100px; } .yeartable { background: var(--entry-background); } h2 { letter-spacing: 5px; text-transform: uppercase; color: var(--h2-color); } .ljtags a, .ljtaglist li a, .year .active { padding-left: 5px; padding-right: 5px; background: var(--comment-background); text-transform: uppercase; color: var(--comment-color); font-family: var(--comment-font); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtags a:hover, .ljtaglist li a:hover, .year .active:hover { box-shadow: 1px 1px var(--comment-border); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtaglist li { padding-top: 4px; } /*FOOTER*/ .viewing{ text-align: center; } /*COMMENTS*/ .userpicfriends{ background: transparent !important; width: 50px; float: left; } .userpicfriends img{ width: 50px; height: 50px; } .datesubjectcomment{ padding: 5px; width: 100%; height: 80px; background: var(--titlebg); color: var(--titlecolor); } .datesubjectcomment strong{ font-family: var(--titlefont); font-size: 20px; color: var(--titlecolor); } .datesubjectcomment a{ color: var(--titlecolor); } .commentbox { background: var(--commentbox-background); } .userpiccomment { float: right; height: 50px; width: 50px; padding-top: 15px; padding-right: 15px; } .skiplinks { text-align: center; } .skiplinks, .skiplinks a, #navfooter, #navfooter a, .ljtaglist, .ljtaglist a, li.viewing, li.viewing a{ color: var(--floatinglinkscolor); } .box a:hover, .skiplinks a:hover, #navfooter a:hover, li.viewing a:hover { color: var(--floatinglinkshover); } .box, .box a { color: var(--maincolor); }	THOR // IMAGE PREVIEW // LIVE PREVIEW /*LAYOUT: ASSEMBLE! BY SHIPPING @ DREAMWIDTH*/ :root { /*MAIN*/ --main-color: #000; --link-color: #222; --link-hover: #444; --bodybg: #ffec84 linear-gradient(#ffec84, #FFD700) fixed; --bodyfont: quicksand; /*TITLE*/ --titlefont: permanent marker; --titlebg: #d32711; --titleborder: #d32711; --titlecolor: #fff; --titlesize: 50px; --subtitlesize: 20px; --header-height-offset: 150px; --titleshadow: #FFD700; /*ENTRY*/ --entry-padding: 5px; --entrytext-padding: 20px; --subcontent-background: #000; --entry-background: #fff; --subject-padding: 15px; --subject-padding-offset: -5px; --subjectshadow: #fff; --comment-padding: -5px; --userpic-border: #FFD700; --subjectcolor: #FFD700; --datecolor: #fff; /*COMMENTS & TAGS */ --comment-background: #d32711; --comment-border: #d32711; --comment-color: #fff; --comment-font: permanent marker; --commentbox-background: #fff; --floatinglinkscolor: #000; --floatinglinkshover: #d32711; /*SIDEBAR*/ --sbarcolor: #fff; --sbarlink: #fff; --sbarhover: #fff; --sbarbg: rgba(0,0,0,0.7); /*PANEL CUT-OUTS*/ --clip-path-1:polygon(35% 0, 55% 0, 100% 0, 100% 100%, 45% 95%, 45% 90%, 0 85%, 0 0); --clip-path-2: polygon(44% 3%, 44% 7%, 100% 9%, 100% 85%, 50% 90%, 50% 94%, 0 100%, 0 0); --clip-path-3: polygon(50% 10%, 50% 5%, 100% 0, 100% 85%, 50% 90%, 50% 95%, 0 100%, 0 15%); --clip-path-4: polygon(45% 9%, 45% 5%, 100% 0, 100% 100%, 49% 95%, 49% 90%, 0 85%, 0 15%); --clip-path-5: polygon(49% 5%, 49% 9%, 100% 15%, 100% 100%, 49% 96%, 50% 92%, 0 84%, 0 0); /*SIDEBAR BACKGROUNDS*/ --sbarbg1: url(IMAGEURL); --sbarbg2: url(IMAGEURL); --sbarbg3: url(IMAGEURL); --sbarbg4: url(IMAGEURL); --sbarbg5: url(IMAGEURL); } /* latin */ @font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; src: local('Permanent Marker Regular'), local('PermanentMarker-Regular'), url("https://fonts.gstatic.com/s/permanentmarker/v8/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cf5b6jlg.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; } /*CONTROL*/ #ljcontrolstrip{ background: #000; } /*BODY*/ body{ color: var(--main-color); font-family: var(--bodyfont); font-size: 12px; background: var(--bodybg); } img{ max-width: 50vw; } a, a:link, a:visited { color: var(--link-color); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: none; font-weight: bold; } ul{ padding-inline-start: 0px !important; } ul li{ list-style-type: none; } /*TITLE*/ #header{ position: relative; } .title, .subtitle{ background: var(--titlebg); color: var(--titlecolor); } .title{ margin-left: auto; margin-right: auto; font-size: var(--titlesize); width: 80%; text-align: center; font-family: var(--titlefont); transition: 0.25s; transition-timing-function: ease-in-out; } .title:hover { text-shadow: 1px 1px var(--titleshadow); transition: 0.25s; transition-timing-function: ease-in-out; } .subtitle { margin-left: auto; margin-right: auto; font-size: var(--subtitlesize); width: 80%; text-align: center; padding-bottom: 5px; border-bottom: 2px solid var(--titleborder); text-transform: uppercase; letter-spacing: 5px; } /*SIDEBAR & NAVHEADER*/ .navheader{ padding-top: 20px; height: 20px; text-align: center; } .navheader li{ display: inline; } #sidebar { padding-left: 0px !important; margin: 0; margin-left: 10%; width: 20%; color: transparent; z-index: 300; } #sidebar{ float: left; position: relative; } #sidebar div:nth-child(2) { display: none; } #sidebar div{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; height: 200px; transition: 0.25s; transition-timing-function: ease-out; } #sidebar div .sbartitle { text-transform: uppercase; letter-spacing: 5px; text-align: center; border-bottom: 1px solid transparent; } .sbarlist{ padding: 0px; margin: 0px; } .sbarbody2{ overflow: auto; padding: 10px; } #sbar_linklist{ overflow: auto; } .sbaritem { transition: 0.25s; transition-timing-function: ease-out; } .sbaritem:hover a{ letter-spacing: 5px; transition: 0.25s; transition-timing-function: ease-out; } #sidebar .clear { display: none; } #sidebar div:nth-child(1){ clip-path: var(--clip-path-1); -webkit-clip-path: var(--clip-path-1); background: var(--sbarbg1) center center; background-size: cover; } #sidebar div:nth-child(3){ clip-path: var(--clip-path-2); -webkit-clip-path: var(--clip-path-2); background: var(--sbarbg2) center center; background-size: cover; } #sidebar div:nth-child(4){ clip-path: var(--clip-path-3); -webkit-clip-path: var(--clip-path-3); background: var(--sbarbg3) center center; background-size: cover; } #sidebar div:nth-child(5){ clip-path: var(--clip-path-4); -webkit-clip-path: var(--clip-path-4); background: var(--sbarbg4) center center; background-size: cover; } #sidebar a { color: transparent; } .defaultuserpic img { display: none; } #sidebar .defaultuserpic:hover img { border-radius: 50%; padding: 5px; background: rgba(255,255,255,0.5); box-shadow: 0 0 5px #000; display: block; } #sidebar div:hover{ color: var(--sbarcolor); box-shadow: inset 0 0 0 100vmax var(--sbarbg); height: 250px; width: calc(100% + 50px); transition: 0.25s; transition-timing-function: ease-out; } #sidebar div:hover{ margin-left: -25px; } #sidebar div:hover .sbartitle { border-bottom: 1px solid var(--sbarcolor); } #sidebar div:hover a { color: var(--sbarlink); } #sidebar div:hover a:hover{ color: var(--sbarhover); } /*NAV ICONS*/ .navheader li { list-style-type: none !important; transition: all .1s linear; filter: brightness(0%); } .navheader li a{ color: rgba(0,0,0,0); } /*tinyicons by https://glyph.smarticons.co/*/ .navheader li:nth-child(1) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/BuM.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(2) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/Bv6.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(3) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgshare.com/i/BvS.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(4) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgshare.com/i/BsF.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(5) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/CCh.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(6) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/CDY.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:hover{ background-size: 40px 40px !important; } /*ENTRY*/ #maincontent{ width: calc(60% - 20px); padding-left: calc(30% + 20px); } .entry { padding: var(--entry-padding); } .subcontent { background: var(--subcontent-background); } .entry_text, .currentmusic, .currentlocation { padding: var(--entrytext-padding); background: var(--entry-background); } .userpic { transform: translate(var(--subject-padding-offset),var(--subject-padding)); } .userpic img{ float: right; height: 50px; width: 50px; padding: 5px; background: var(--userpic-border); } .datesubject{ padding: var(--subject-padding); height: 60px; text-align: right; } .date, .date a { color: var(--datecolor); } .subject, .subject a{ color: var(--subjectcolor); transition: 0.25s; transition-timing-function: ease-in-out; } .subject:hover, .subject a:hover { text-shadow: 1px 1px var(--subjectshadow); transition: 0.25s; transition-timing-function: ease-in-out; } .date { transform: translate(-5px, 0); text-transform: uppercase; letter-spacing: 5px; } .subject{ font-size: 30px; line-height: 40px; } .comments { padding: var(--comment-padding); width: 250px; margin-right: auto; margin-left: auto; position: relative; text-align: center; color: var(--subcontent-background); } .comments a{ background: var(--comment-background); font-family: var(--comment-font); padding: 5px; padding-left: 10px; padding-right: 10px; color: var(--comment-color); text-transform: uppercase; transition: 0.25s; transition-timing-function: ease-in-out; } .comments a:hover{ box-shadow: 1px 1px var(--comment-border); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtags { padding-top: 10px; font-weight: bold; } .subcontent .clear{ display: none } .entry .clear { padding: 10px; } .year{ text-align: center; } .year .active{ width: 100px; } .yeartable { background: var(--entry-background); } h2 { letter-spacing: 5px; text-transform: uppercase; color: var(--h2-color); } .ljtags a, .ljtaglist li a, .year .active { padding-left: 5px; padding-right: 5px; background: var(--comment-background); text-transform: uppercase; color: var(--comment-color); font-family: var(--comment-font); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtags a:hover, .ljtaglist li a:hover, .year .active:hover { box-shadow: 1px 1px var(--comment-border); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtaglist li { padding-top: 4px; } /*FOOTER*/ .viewing{ text-align: center; } /*COMMENTS*/ .userpicfriends{ background: transparent !important; width: 50px; float: left; } .userpicfriends img{ width: 50px; height: 50px; } .datesubjectcomment{ padding: 5px; width: 100%; height: 80px; background: var(--titlebg); color: var(--titlecolor); } .datesubjectcomment strong{ font-family: var(--titlefont); font-size: 20px; color: var(--titlecolor); } .datesubjectcomment a{ color: var(--titlecolor); } .commentbox { background: var(--commentbox-background); } .userpiccomment { float: right; height: 50px; width: 50px; padding-top: 15px; padding-right: 15px; } .skiplinks { text-align: center; } .skiplinks, .skiplinks a, #navfooter, #navfooter a, .ljtaglist, .ljtaglist a, li.viewing, li.viewing a{ color: var(--floatinglinkscolor); } .box a:hover, .skiplinks a:hover, #navfooter a:hover, li.veiwing a:hover { color: var(--floatinglinkshover); } .box, .box a { color: var(--maincolor); }
BRUCE // IMAGE PREVIEW // LIVE PREVIEW /*LAYOUT: ASSEMBLE! BY SHIPPING @ DREAMWIDTH*/ :root { /*MAIN*/ --main-color: #000; --link-color: #222; --link-hover: #9923eb; --bodybg: #2d543e linear-gradient(transparent, #8465B8) fixed; --bodyfont: quicksand; /*TITLE*/ --titlefont: permanent marker; --titlebg: #000; --titleborder: #000; --titlecolor: #fff; --titlesize: 50px; --subtitlesize: 20px; --header-height-offset: 150px; --titleshadow: #8465B8; /*ENTRY*/ --entry-padding: 0px; --entrytext-padding: 20px; --subcontent-background: #fff; --entry-background: #fff; --subject-padding: 5px; --subject-padding-offset: -5px; --subjectshadow: #8465B8; --comment-padding: 10px; --userpic-border: #000; --subjectcolor: #4C9972; --datecolor: #000; /*COMMENTS & TAGS */ --comment-background: #4C9972; --comment-border: #ddd; --comment-color: #fff; --comment-font: permanent marker; --commentbox-background: #fff; --floatinglinkscolor: #fff; --floatinglinkshover: #fff; /*SIDEBAR*/ --sbarcolor: #fff; --sbarlink: #fff; --sbarhover: #fff; --sbarbg: rgba(62, 41, 96,0.7); /*PANEL CUT-OUTS*/ --clip-path-1: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); --clip-path-2: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%); --clip-path-3: polygon(0 15%, 100% 0%, 100% 100%, 0 85%); --clip-path-4: polygon(0 0, 100% 15%, 100% 85%, 0 100%); --clip-path-5: polygon(0 15%, 100% 0, 100% 100%, 0 100%); /*SIDEBAR BACKGROUNDS*/ --sbarbg1: url(IMAGEURL); --sbarbg2: url(IMAGEURL); --sbarbg3: url(IMAGEURL); --sbarbg4: url(IMAGEURL); --sbarbg5: url(IMAGEURL); } /* latin */ @font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; src: local('Permanent Marker Regular'), local('PermanentMarker-Regular'), url("https://fonts.gstatic.com/s/permanentmarker/v8/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cf5b6jlg.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; } /*CONTROL*/ #ljcontrolstrip{ background: #000; } /*BODY*/ body{ color: var(--main-color); font-family: var(--bodyfont); font-size: 12px; background: var(--bodybg); background-blend-mode: multiply; } img{ max-width: 50vw; } a, a:link, a:visited { color: var(--link-color); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: none; font-weight: bold; } ul{ padding-inline-start: 0px !important; } ul li{ list-style-type: none; } /*TITLE*/ #header{ position: relative; } .title, .subtitle{ background: var(--titlebg); color: var(--titlecolor); } .title{ margin-left: auto; margin-right: auto; font-size: var(--titlesize); width: 80%; text-align: center; font-family: var(--titlefont); transition: 0.25s; transition-timing-function: ease-in-out; } .title:hover { text-shadow: 1px 1px var(--titleshadow); transition: 0.25s; transition-timing-function: ease-in-out; } .subtitle { margin-left: auto; margin-right: auto; font-size: var(--subtitlesize); width: 80%; text-align: center; padding-bottom: 5px; border-bottom: 2px solid var(--titleborder); text-transform: uppercase; letter-spacing: 5px; } /*SIDEBAR & NAVHEADER*/ .navheader{ padding-top: 20px; height: 20px; text-align: center; } .navheader li{ display: inline; } #sidebar { padding-left: 0px !important; margin: 0; margin-left: 10%; width: 20%; color: transparent; z-index: 300; } #sidebar{ float: left; position: relative; } #sidebar div:nth-child(2) { display: none; } #sidebar div{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; height: 200px; transition: 0.25s; transition-timing-function: ease-out; } #sidebar div:nth-child(1){ width: 80%; transform: translate(10%,0); } #sidebar div:nth-child(1):hover{ transform: translate(1%,0); } #sidebar div:nth-child(4){ width: 80%; transform: translate(10%,0); } #sidebar div:nth-child(4):hover{ transform: translate(1%,0); } #sidebar div .sbartitle { text-transform: uppercase; letter-spacing: 5px; text-align: center; border-bottom: 1px solid transparent; } .sbarlist{ padding: 0px; margin: 0px; } .sbarbody2{ overflow: auto; padding: 10px; } #sbar_linklist{ overflow: auto; } .sbaritem { transition: 0.25s; transition-timing-function: ease-out; } .sbaritem:hover a{ letter-spacing: 5px; transition: 0.25s; transition-timing-function: ease-out; } #sidebar .clear { display: none; } #sidebar div:nth-child(1){ clip-path: var(--clip-path-1); -webkit-clip-path: var(--clip-path-1); background: var(--sbarbg1) center center; background-size: cover; } #sidebar div:nth-child(3){ clip-path: var(--clip-path-2); -webkit-clip-path: var(--clip-path-2); background: var(--sbarbg2) center center; background-size: cover; } #sidebar div:nth-child(4){ clip-path: var(--clip-path-3); -webkit-clip-path: var(--clip-path-3); background: var(--sbarbg3) center center; background-size: cover; } #sidebar div:nth-child(5){ clip-path: var(--clip-path-4); -webkit-clip-path: var(--clip-path-4); background: var(--sbarbg4) center center; background-size: cover; } #sidebar a { color: transparent; } .defaultuserpic img { display: none; } #sidebar .defaultuserpic:hover img { border-radius: 50%; padding: 5px; background: rgba(255,255,255,0.5); box-shadow: 0 0 5px #000; display: block; } #sidebar div:hover{ color: var(--sbarcolor); box-shadow: inset 0 0 0 100vmax var(--sbarbg); height: 250px; width: calc(100% + 50px); transition: 0.25s; transition-timing-function: ease-out; } #sidebar div:hover{ margin-left: -25px; } #sidebar div:hover .sbartitle { border-bottom: 1px solid var(--sbarcolor); } #sidebar div:hover a { color: var(--sbarlink); } #sidebar div:hover a:hover{ color: var(--sbarhover); } /*NAV ICONS*/ .navheader li { list-style-type: none !important; transition: all .1s linear; filter: brightness(0%); } .navheader li a{ color: rgba(0,0,0,0); } /*tinyicons by https://glyph.smarticons.co/*/ .navheader li:nth-child(1) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/BuM.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(2) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/Bv6.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(3) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgshare.com/i/BvS.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(4) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgshare.com/i/BsF.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(5) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/CCh.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(6) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/CDY.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:hover{ background-size: 40px 40px !important; } /*ENTRY*/ #maincontent{ width: calc(60% - 20px); padding-left: calc(30% + 20px); } .entry { padding: var(--entry-padding); } .subcontent { background: var(--subcontent-background); } .entry_text, .currentmusic, .currentlocation { padding: var(--entrytext-padding); background: var(--entry-background); } .userpic { transform: translate(var(--subject-padding-offset),var(--subject-padding)); } .userpic img{ float: right; height: 50px; width: 50px; padding: 5px; background: var(--userpic-border); } .datesubject{ padding: var(--subject-padding); height: 60px; text-align: right; } .date, .date a { color: var(--datecolor); } .subject, .subject a{ color: var(--subjectcolor); transition: 0.25s; transition-timing-function: ease-in-out; } .subject:hover, .subject a:hover { text-shadow: 1px 1px var(--subjectshadow); transition: 0.25s; transition-timing-function: ease-in-out; } .date { transform: translate(-5px, 0); text-transform: uppercase; letter-spacing: 5px; } .subject{ font-size: 30px; line-height: 40px; } .comments { padding: var(--comment-padding); width: 250px; margin-right: auto; margin-left: auto; position: relative; text-align: center; color: var(--subcontent-background); } .comments a{ background: var(--comment-background); font-family: var(--comment-font); padding: 5px; padding-left: 10px; padding-right: 10px; color: var(--comment-color); text-transform: uppercase; transition: 0.25s; transition-timing-function: ease-in-out; } .comments a:hover{ box-shadow: 1px 1px var(--comment-border); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtags { padding-top: 10px; font-weight: bold; } .subcontent .clear{ display: none } .entry .clear { padding: 10px; } .year{ text-align: center; } .year .active{ width: 100px; } .yeartable { background: var(--entry-background); } h2 { letter-spacing: 5px; text-transform: uppercase; color: var(--h2-color); } .ljtags a, .ljtaglist li a, .year .active { padding-left: 5px; padding-right: 5px; background: var(--comment-background); text-transform: uppercase; color: var(--comment-color); font-family: var(--comment-font); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtags a:hover, .ljtaglist li a:hover, .year .active:hover { box-shadow: 1px 1px var(--comment-border); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtaglist li { padding-top: 4px; } /*FOOTER*/ .viewing{ text-align: center; } /*COMMENTS*/ .userpicfriends{ background: transparent !important; width: 50px; float: left; } .userpicfriends img{ width: 50px; height: 50px; } .datesubjectcomment{ padding: 5px; width: 100%; height: 80px; background: var(--titlebg); color: var(--titlecolor); } .datesubjectcomment strong{ font-family: var(--titlefont); font-size: 20px; color: var(--titlecolor); } .datesubjectcomment a{ color: var(--titlecolor); } .commentbox { background: var(--commentbox-background); } .userpiccomment { float: right; height: 50px; width: 50px; padding-top: 15px; padding-right: 15px; } .skiplinks { text-align: center; } .skiplinks, .skiplinks a, #navfooter, #navfooter a, .ljtaglist, .ljtaglist a, li.viewing, li.viewing a{ color: var(--floatinglinkscolor); } .box a:hover, .skiplinks a:hover, #navfooter a:hover, li.viewing a:hover { color: var(--floatinglinkshover); } .box, .box a { color: var(--maincolor); }	TONY // IMAGE PREVIEW // LIVE PREVIEW /*LAYOUT: ASSEMBLE! BY SHIPPING @ DREAMWIDTH*/ :root { /*MAIN*/ --main-color: #000; --link-color: #222; --link-hover: #444; --bodybg: linear-gradient(to bottom, #d32c2c 0%,#f6290c 30%,#ef260b 30%,#ef260b 30%,#c42300 71%,#d10a0a 100%) fixed; --bodyfont: quicksand; /*TITLE*/ --titlefont: permanent marker; --titlebg: #000; --titleborder: #000; --titlecolor: #fff; --titlesize: 50px; --subtitlesize: 20px; --header-height-offset: 150px; --titleshadow: #00ffff; /*ENTRY*/ --entry-padding: 0px; --entrytext-padding: 20px; --subcontent-background: #000; --entry-background: #fff; --subject-padding: 5px; --subject-padding-offset: -5px; --subjectshadow: #00ffff; --comment-padding: 10px; --userpic-border: #000; --subjectcolor: #fff; --datecolor: #ffda6b; /*COMMENTS & TAGS */ --comment-background: #daa520; --comment-border: #00ffff; --comment-color: #fff; --comment-font: permanent marker; --commentbox-background: #fff; --floatinglinkscolor: #daa520; --floatinglinkshover: #d32711; /*SIDEBAR*/ --sbarcolor: #fff; --sbarlink: #fff; --sbarhover: #fff; --sbarbg: rgba(100,200,255,0.7); /*PANEL CUT-OUTS*/ --clip-path-1: polygon(75% 0, 100% 15%, 100% 100%, 25% 100%, 0 85%, 0 0); --clip-path-2: polygon(25% 15%, 100% 15%, 100% 100%, 75% 85%, 0 85%, 0 0); --clip-path-3: polygon(75% 0, 100% 15%, 100% 100%, 25% 100%, 0 85%, 0 0); --clip-path-4: polygon(25% 15%, 100% 15%, 100% 100%, 25% 100%, 0 85%, 0 0); --clip-path-5: polygon(25% 15%, 100% 15%, 100% 100%, 25% 100%, 0 100%, 0 0); /*SIDEBAR BACKGROUNDS*/ --sbarbg1: url(IMAGEURL); --sbarbg2: url(IMAGEURL); --sbarbg3: url(IMAGEURL); --sbarbg4: url(IMAGEURL); --sbarbg5: url(IMAGEURL); } /* latin */ @font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; src: local('Permanent Marker Regular'), local('PermanentMarker-Regular'), url("https://fonts.gstatic.com/s/permanentmarker/v8/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cf5b6jlg.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; } /*CONTROL*/ #ljcontrolstrip{ background: #000; } /*BODY*/ body{ color: var(--main-color); font-family: var(--bodyfont); font-size: 12px; background: var(--bodybg); background-blend-mode: screen; } img{ max-width: 50vw; } a, a:link, a:visited { color: var(--link-color); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: none; font-weight: bold; } ul{ padding-inline-start: 0px !important; } ul li{ list-style-type: none; } /*TITLE*/ #header{ position: relative; } .title, .subtitle{ background: var(--titlebg); color: var(--titlecolor); box-shadow: 0px 0px 2px #000; } .title{ border-radius: 10px 10px 0px 0px; margin-left: auto; margin-right: auto; font-size: var(--titlesize); width: 80%; text-align: center; font-family: var(--titlefont); transition: 0.25s; transition-timing-function: ease-in-out; } .title:hover { text-shadow: 1px 1px var(--titleshadow); transition: 0.25s; transition-timing-function: ease-in-out; } .subtitle { margin-left: auto; margin-right: auto; font-size: var(--subtitlesize); width: 80%; text-align: center; padding-bottom: 5px; border-bottom: 2px solid var(--titleborder); text-transform: uppercase; letter-spacing: 5px; } /*SIDEBAR & NAVHEADER*/ .navheader{ padding-top: 20px; height: 20px; text-align: center; } .navheader li{ display: inline; } #sidebar { padding-left: 0px !important; margin: 0; margin-left: 10%; width: 20%; color: transparent; z-index: 300; } #sidebar{ float: left; position: relative; } #sidebar div:nth-child(2) { display: none; } #sidebar div{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; height: 200px; transition: 0.25s; transition-timing-function: ease-out; } #sidebar div .sbartitle { text-transform: uppercase; letter-spacing: 5px; text-align: center; border-bottom: 1px solid transparent; } .sbarlist{ padding: 0px; margin: 0px; } .sbarbody2{ overflow: auto; padding: 10px; } #sbar_linklist{ overflow: auto; } .sbaritem { transition: 0.25s; transition-timing-function: ease-out; } .sbaritem:hover a{ letter-spacing: 5px; transition: 0.25s; transition-timing-function: ease-out; } #sidebar .clear { display: none; } #sidebar div:nth-child(1){ clip-path: var(--clip-path-1); -webkit-clip-path: var(--clip-path-1); background: var(--sbarbg1) center center; background-size: cover; } #sidebar div:nth-child(3){ clip-path: var(--clip-path-2); -webkit-clip-path: var(--clip-path-2); background: var(--sbarbg2) center center; background-size: cover; } #sidebar div:nth-child(4){ clip-path: var(--clip-path-3); -webkit-clip-path: var(--clip-path-3); background: var(--sbarbg3) center center; background-size: cover; } #sidebar div:nth-child(5){ clip-path: var(--clip-path-4); -webkit-clip-path: var(--clip-path-4); background: var(--sbarbg4) center center; background-size: cover; } #sidebar a { color: transparent; } .defaultuserpic img { display: none; } #sidebar .defaultuserpic:hover img { border-radius: 50%; padding: 5px; background: rgba(255,255,255,0.5); box-shadow: 0 0 5px #000; display: block; } #sidebar div:hover{ color: var(--sbarcolor); box-shadow: inset 0 0 0 100vmax var(--sbarbg); height: 250px; width: calc(100% + 50px); transition: 0.25s; transition-timing-function: ease-out; } #sidebar div:hover{ margin-left: -25px; } #sidebar div:hover .sbartitle { border-bottom: 1px solid var(--sbarcolor); } #sidebar div:hover a { color: var(--sbarlink); } #sidebar div:hover a:hover{ color: var(--sbarhover); } /*NAV ICONS*/ .navheader li { list-style-type: none !important; transition: all .1s linear; filter: brightness(0%); } .navheader li a{ color: rgba(0,0,0,0); } /*tinyicons by https://glyph.smarticons.co/*/ .navheader li:nth-child(1) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/BuM.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(2) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/Bv6.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(3) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgshare.com/i/BvS.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(4) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgshare.com/i/BsF.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(5) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/CCh.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:nth-child(6) { color: rgba(0,0,0,0); list-style-type: none; background: url("https://svgur.com/i/CDY.svg") no-repeat center center !important; background-size: 25px 25px !important; padding: 20px !important; } .navheader li:hover{ background-size: 40px 40px !important; } /*ENTRY*/ #maincontent{ width: calc(60% - 20px); padding-left: calc(30% + 20px); } .entry { padding: var(--entry-padding); } .subcontent { background: var(--subcontent-background); box-shadow: 0px 0px 2px #000; } .entry_text, .currentmusic, .currentlocation { padding: var(--entrytext-padding); background: var(--entry-background); } .userpic { transform: translate(var(--subject-padding-offset),var(--subject-padding)); } .userpic img{ float: right; height: 50px; width: 50px; padding: 5px; background: var(--userpic-border); } .datesubject{ padding: var(--subject-padding); height: 60px; text-align: right; } .date, .date a { color: var(--datecolor); } .subject, .subject a{ color: var(--subjectcolor); transition: 0.25s; transition-timing-function: ease-in-out; } .subject:hover, .subject a:hover { text-shadow: 1px 1px var(--subjectshadow); transition: 0.25s; transition-timing-function: ease-in-out; } .date { transform: translate(-5px, 0); text-transform: uppercase; letter-spacing: 5px; } .subject{ font-size: 30px; line-height: 40px; } .comments { padding: var(--comment-padding); width: 250px; margin-right: auto; margin-left: auto; position: relative; text-align: center; color: var(--subcontent-background); } .comments a{ background: var(--comment-background); font-family: var(--comment-font); padding: 5px; padding-left: 10px; padding-right: 10px; color: var(--comment-color); text-transform: uppercase; transition: 0.25s; transition-timing-function: ease-in-out; } .comments a:hover{ box-shadow: 1px 1px var(--comment-border); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtags { padding-top: 10px; font-weight: bold; } .subcontent .clear{ display: none } .entry .clear { padding: 10px; } .year{ text-align: center; } .year .active{ width: 100px; } .yeartable { background: var(--entry-background); } h2 { letter-spacing: 5px; text-transform: uppercase; color: var(--h2-color); } .ljtags a, .ljtaglist li a, .year .active { padding-left: 5px; padding-right: 5px; background: var(--comment-background); text-transform: uppercase; color: var(--comment-color); font-family: var(--comment-font); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtags a:hover, .ljtaglist li a:hover, .year .active:hover { box-shadow: 1px 1px var(--comment-border); transition: 0.25s; transition-timing-function: ease-in-out; } .ljtaglist li { padding-top: 4px; } /*FOOTER*/ .viewing{ text-align: center; } /*COMMENTS*/ .userpicfriends{ background: transparent !important; width: 50px; float: left; } .userpicfriends img{ width: 50px; height: 50px; } .datesubjectcomment{ padding: 5px; width: 100%; height: 80px; background: var(--titlebg); color: var(--titlecolor); } .datesubjectcomment strong{ font-family: var(--titlefont); font-size: 20px; color: var(--titlecolor); } .datesubjectcomment a{ color: var(--titlecolor); } .commentbox { background: var(--commentbox-background); } .userpiccomment { float: right; height: 50px; width: 50px; padding-top: 15px; padding-right: 15px; } .skiplinks { text-align: center; } .skiplinks, .skiplinks a, #navfooter, #navfooter a, .ljtaglist, .ljtaglist a, li.viewing, li.viewing a{ color: var(--floatinglinkscolor); } .box a:hover, .skiplinks a:hover, #navfooter a:hover, li.veiwing a:hover { color: var(--floatinglinkshover); } .box, .box a { color: var(--maincolor); }

customize

All the colors for this layout are at the top within the block :root{}. Since there were a lot of variables in this one, I separated them out by section so you can see which colors go where. Everything in /*SIDEBAR BACKGROUNDS*/ has to be updated to include your own images for the sidebar. Up to 5 sidebar items (default userpic included) are supported. If you would like to make custom panels, there's a section to do that as well. I would suggest you use clippy in order to do so as making clip paths by hand is so not worth the effort.

Resources

Tiny icons from glyph.smarticons.co