layout | express

[shipping]

Layout: Express by Xy @ shipping

I've been working on this for a few days. It's my first layout, so please enjoy!


LIVE PREVIEW

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" and make sure it's on the right.
   
3. Go to custom css and uncheck everything, replacing the block of "custom stylesheet" with whatever you like below!
   
4. If you remove credit from the code comments, make sure to credit shipping somewhere on your journal.

code

TO WALNUT-LOCUST (pictured above) /*LAYOUT: EXPRESS BY SHIPPING @ DREAMWIDTH*/ :root { --main-color: #666; --first-color: #ee4035; --second-color: #f37736; --third-color: #ffc425; --fourth-color: #7bc043; --fifth-color: #0392cf; --sixth-color: #9932CC; --link-color: #999; --link-hover: #aaa; --sbarbg: #000; --lighttext: #fff; --darktext: #000; --bodybg: #fff; --entrybg: #fff; } /* latin-ext */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /*BODY*/ body{ color: var(--main-color); font-family: raleway; font-size: 12px; background: var(--bodybg); } a, a:link, a:visited { color: var(--link-color); text-decoration: none; font-weight: bold; } a:hover { color: var(--link-hover); text-decoration: none; font-weight: bold; } img { max-width: 700px; } /*HEADER*/ #lj_controlstrip { background: var(--sbarbg); } #lj_controlstrip #lj_controlstrip_userpic img{ border-radius: 50px; } #content { width: 100%; padding: 0px; } ul.navheader { padding-inline-start: 0px; text-align: center; width: 900px; color: var(--lighttext); width: 100%; height: 30px; margin-top: 20px; margin-bottom: 30px; padding-top: 140px; } .navheader li { color: var(--darktext); line-height: 20px; font-size: 15px; display: inline-block; padding-top: 10px; padding-bottom: 10px; margin: 0px; text-transform: uppercase; width: 147px; text-align: center; } .navheader li:not(.view){ transition-timing-function: ease-in; transition: 0.5s; } .navheader li:hover:not(.view) { width: 170px; padding-top: 15px; padding-bottom: 15px; margin-top: -5px; letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } .navheader li:nth-child(1n):not(.view) { background: var(--sixth-color); } .navheader li:nth-child(2n):not(.view) { background: var(--first-color); } .navheader li:nth-child(3n):not(.view) { background: var(--second-color); } .navheader li:nth-child(4n):not(.view) { background: var(--third-color); } .navheader li:nth-child(5n):not(.view) { background: var(--fourth-color); } .navheader li:nth-child(6n):not(.view) { background: var(--fifth-color); } .navheader a, a#visited, a#hover { color: var(--lighttext); } .title, .subtitle { margin-left: auto; margin-right: auto; width: 900px; color: var(--darktext); text-align: center; } .title { margin-top: -190px; font-size: 60px; text-shadow: 2px 2px var(--first-color); } .subtitle { transition-timing-function: ease-in; transition: 0.5s; letter-spacing: 2px; font-size: 14px; text-transform: uppercase; } .subtitle:hover{ transition-timing-function: ease-in; transition: 0.5s; letter-spacing: 4px; } .subtitle:before { content: "{"; } .subtitle:after { content: "}"; } /*CONTENT*/ #maincontent { margin-top: 100px; width: 900px; margin-left: auto; margin-right: auto; position: relative; } .subcontent{ padding: 30px; box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; background: var(--entrybg); } /*ENTRY*/ .userpic, .userpicfriends { float: left; margin-right: 5px; border-right: 5px solid var(--first-color) !important; } .userpicfriends { text-align: right; margin-right: 5px; } .userpic img, .userpicfriends img { width: 50px; height: 50px; } .subject { margin-top: 0px; width: 100%; font-size: 35px; line-height: 35px; padding-bottom: 20px; text-transform: lowercase; } .subject a { color: var(--darktext); transition-timing-function: ease-in; transition: 0.5s; } .subject a:hover { letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } .date { padding-right: 15px; padding-top: 5px; line-height: 12px; letter-spacing: 4px; text-transform: uppercase; font-family: arial; color: var(--first-color); } .datesubject { padding-bottom: 5px; display: block; text-align: left; } .entry { padding-top: 10px; } .comments { text-align: center; font-family: arial; letter-spacing: 4px; text-transform: uppercase; } blockquote { border-left: 5px solid var(--first-color); padding: 5px; } /*SIDEBAR*/ #sidebar { position: fixed; bottom: -165px; float: center; display: flex; width: 100%; height: 200px; background: var(--sbarbg); transition-timing-function: ease-in; transition: 0.5s; z-index: 100 !important; } #sidebar:hover{ bottom: 0px; transition-timing-function: ease-in; transition: 0.5s; } #sidebar div { align: right; padding-top: 40px; width: 260px; } #sidebar div.defaultuserpic { width: 150px; } #sidebar div.defaultuserpic img { border-radius: 100px; border: 10px solid var(--sbarbg); margin-top: -120px; margin-left: 5px; } #sidebar div.sbarbody2 { width: 15% } .sbarbody2{ position: absolute; bottom: 0px; left: 195px; text-align: justify; text-justify: inter-word; height: 120px; } .sbarbody2, .sbarbody { } .sbarlist { list-style-type: none; } .sbartitle { font-size: 25px; line-height: 20px; } .sbarbody:nth-child(1n) .sbartitle { color: var(--first-color); border-bottom: 2px solid var(--first-color); } .sbarbody:nth-child(2n) .sbartitle { color: var(--second-color); border-bottom: 2px solid var(--second-color); } .sbarbody:nth-child(3n) .sbartitle { color: var(--third-color); border-bottom: 2px solid var(--third-color); } .sbarbody:nth-child(4n) .sbartitle { color: var(--fourth-color); border-bottom: 2px solid var(--fourth-color); } .sbarbody:nth-child(5n) .sbartitle { color: var(--fifth-color); border-bottom: 2px solid var(--fifth-color); } /*FOOTER*/ ul.navfooter { text-align: center; padding-inline-start: 0px; } ul.navfooter li { text-align: center; display: inline-block; list-style-type: none; text-transform: uppercase; padding-bottom: 20px; } ul.navfooter::before{ content: "<<"; } ul.navfooter::after{ content: ">>"; } ul.navfooter a { color: var(--first-color); transition-timing-function: ease-in; transition: 0.5s; } /*COMMENT PAGE*/ .commentbox{ box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; padding: 5px; margin-top: 10px; margin-bottom: 10px; background: var(--entrybg); } .commentboxpartial{ box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; padding: 5px; margin-top: 10px; margin-bottom: 10px; background: var(--entrybg); text-align: left; } .commentboxpartial a:nth-child(1) { float: left; } .commentboxpartial a{ float: right; color: var(--first-color); } .userpiccomment { float: left; padding-right: 5px; background-color: var(--first-color); } .datesubjectcomment{ padding: 5px; display: block; height: 100px; text-align: right; } .commentreply { border-top: 1px solid #ddd; padding: 5px; padding-top: 20px; padding-bottom: 20px; text-align: justify; text-justify: inter-word; } .box { text-align: right; padding-bottom: 30px; } .skiplinks{ text-align: center; } /*CALENDAR & TAGS*/ ul.year { padding-inline-start: 0px; text-align: center; } ul.year li, ul.ljtaglist li, .sbaritem{ list-style-type: none; padding: 5px; transition-timing-function: ease-in; transition: 0.5s; } .sbarcontent { padding-right: 3px; height: 130px; background: var(--sbarbg); overflow: scroll; } .sbarcontent::-webkit-scrollbar{ background: var(--sbarbg); } .sbarcontent::-webkit-scrollbar-thumb{ background: var(--third-color); border-radius: 10px; } ul.year li { display: inline; } ul.year li:hover, ul.ljtaglist li:hover, .sbaritem:hover { color: var(--lighttext); letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } ul.year li:hover:nth-child(1n), ul.ljtaglist li:hover:nth-child(1n), .sbaritem:hover:nth-child(1n) { background: var(--first-color); } ul.year li:hover:nth-child(2n), ul.ljtaglist li:hover:nth-child(2n), .sbaritem:hover:nth-child(2n) { background: var(--second-color); } ul.year li:hover:nth-child(3n), ul.ljtaglist li:hover:nth-child(3n), .sbaritem:hover:nth-child(3n) { background: var(--third-color); } ul.year li:hover:nth-child(4n), ul.ljtaglist li:hover:nth-child(4n), .sbaritem:hover:nth-child(4n) { background: var(--fourth-color); } ul.year li:hover:nth-child(5n), ul.ljtaglist li:hover:nth-child(5n), .sbaritem:hover:nth-child(5n) { background: var(--fifth-color); } ul.year li:hover:nth-child(6n), ul.ljtaglist li:hover:nth-child(6n), .sbaritem:hover:nth-child(6n) { background: var(--sixth-color); } ul.year li:hover a, ul.ljtaglist li:hover a, .sbaritem:hover a { color: var(--lighttext); }
TO CONEY ISLAND /*LAYOUT: EXPRESS BY SHIPPING @ DREAMWIDTH*/ :root { --main-color: #233D4D; --first-color: #00FFD5; --second-color: #7AFF95; --third-color: #FFCE7A; --fourth-color: #EF255E; --fifth-color: #700E29; --sixth-color: #FF8362; --link-color: #700E29; --link-hover: #00FFD5; --sbarbg: #60D9BD; --lighttext: #F9F4E1; --darktext: #000; --bodybg: #ffffb1; --entrybg: #fff; } /* latin-ext */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /*BODY*/ body{ color: var(--main-color); font-family: raleway; font-size: 12px; background: var(--bodybg); } a, a:link, a:visited { color: var(--link-color); text-decoration: none; font-weight: bold; } a:hover { color: var(--link-hover); text-decoration: none; font-weight: bold; } img { max-width: 700px; } /*HEADER*/ #lj_controlstrip { background: var(--sbarbg); } #lj_controlstrip #lj_controlstrip_userpic img{ border-radius: 50px; } #content { width: 100%; padding: 0px; } ul.navheader { padding-inline-start: 0px; text-align: center; width: 900px; color: var(--lighttext); width: 100%; height: 30px; margin-top: 20px; margin-bottom: 30px; padding-top: 140px; } .navheader li { color: var(--darktext); line-height: 20px; font-size: 15px; display: inline-block; padding-top: 10px; padding-bottom: 10px; margin: 0px; text-transform: uppercase; width: 147px; text-align: center; } .navheader li:not(.view){ transition-timing-function: ease-in; transition: 0.5s; } .navheader li:hover:not(.view) { width: 170px; padding-top: 15px; padding-bottom: 15px; margin-top: -5px; letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } .navheader li:nth-child(1n):not(.view) { background: var(--sixth-color); } .navheader li:nth-child(2n):not(.view) { background: var(--first-color); } .navheader li:nth-child(3n):not(.view) { background: var(--second-color); } .navheader li:nth-child(4n):not(.view) { background: var(--third-color); } .navheader li:nth-child(5n):not(.view) { background: var(--fourth-color); } .navheader li:nth-child(6n):not(.view) { background: var(--fifth-color); } .navheader a, a#visited, a#hover { color: var(--lighttext); } .title, .subtitle { margin-left: auto; margin-right: auto; width: 900px; color: var(--darktext); text-align: center; } .title { margin-top: -190px; font-size: 60px; text-shadow: 2px 2px var(--first-color); } .subtitle { transition-timing-function: ease-in; transition: 0.5s; letter-spacing: 2px; font-size: 14px; text-transform: uppercase; } .subtitle:hover{ transition-timing-function: ease-in; transition: 0.5s; letter-spacing: 4px; } .subtitle:before { content: "{"; } .subtitle:after { content: "}"; } /*CONTENT*/ #maincontent { margin-top: 100px; width: 900px; margin-left: auto; margin-right: auto; position: relative; } .subcontent{ padding: 30px; box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; background: var(--entrybg); } /*ENTRY*/ .userpic, .userpicfriends { float: left; margin-right: 5px; border-right: 5px solid var(--first-color) !important; } .userpicfriends { text-align: right; margin-right: 5px; } .userpic img, .userpicfriends img { width: 50px; height: 50px; } .subject { margin-top: 0px; width: 100%; font-size: 35px; line-height: 35px; padding-bottom: 20px; text-transform: lowercase; } .subject a { color: var(--darktext); transition-timing-function: ease-in; transition: 0.5s; } .subject a:hover { letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } .date { padding-right: 15px; padding-top: 5px; line-height: 12px; letter-spacing: 4px; text-transform: uppercase; font-family: arial; color: var(--first-color); } .datesubject { padding-bottom: 5px; display: block; text-align: left; } .entry { padding-top: 10px; } .comments { text-align: center; font-family: arial; letter-spacing: 4px; text-transform: uppercase; } blockquote { border-left: 5px solid var(--first-color); padding: 5px; } /*SIDEBAR*/ #sidebar { position: fixed; bottom: -165px; float: center; display: flex; width: 100%; height: 200px; background: var(--sbarbg); transition-timing-function: ease-in; transition: 0.5s; z-index: 100 !important; } #sidebar:hover{ bottom: 0px; transition-timing-function: ease-in; transition: 0.5s; } #sidebar div { align: right; padding-top: 40px; width: 260px; } #sidebar div.defaultuserpic { width: 150px; } #sidebar div.defaultuserpic img { border-radius: 100px; border: 10px solid var(--sbarbg); margin-top: -120px; margin-left: 5px; } #sidebar div.sbarbody2 { width: 15% } .sbarbody2{ position: absolute; bottom: 0px; left: 195px; text-align: justify; text-justify: inter-word; height: 120px; } .sbarbody2, .sbarbody { } .sbarlist { list-style-type: none; } .sbartitle { font-size: 25px; line-height: 20px; } .sbarbody:nth-child(1n) .sbartitle { color: var(--first-color); border-bottom: 2px solid var(--first-color); } .sbarbody:nth-child(2n) .sbartitle { color: var(--second-color); border-bottom: 2px solid var(--second-color); } .sbarbody:nth-child(3n) .sbartitle { color: var(--third-color); border-bottom: 2px solid var(--third-color); } .sbarbody:nth-child(4n) .sbartitle { color: var(--fourth-color); border-bottom: 2px solid var(--fourth-color); } .sbarbody:nth-child(5n) .sbartitle { color: var(--fifth-color); border-bottom: 2px solid var(--fifth-color); } /*FOOTER*/ ul.navfooter { text-align: center; padding-inline-start: 0px; } ul.navfooter li { text-align: center; display: inline-block; list-style-type: none; text-transform: uppercase; padding-bottom: 20px; } ul.navfooter::before{ content: "<<"; } ul.navfooter::after{ content: ">>"; } ul.navfooter a { color: var(--first-color); transition-timing-function: ease-in; transition: 0.5s; } /*COMMENT PAGE*/ .commentbox{ box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; padding: 5px; margin-top: 10px; margin-bottom: 10px; background: var(--entrybg); } .commentboxpartial{ box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; padding: 5px; margin-top: 10px; margin-bottom: 10px; background: var(--entrybg); text-align: left; } .commentboxpartial a:nth-child(1) { float: left; } .commentboxpartial a{ float: right; color: var(--first-color); } .userpiccomment { float: left; padding-right: 5px; background-color: var(--first-color); } .datesubjectcomment{ padding: 5px; display: block; height: 100px; text-align: right; } .commentreply { border-top: 1px solid #ddd; padding: 5px; padding-top: 20px; padding-bottom: 20px; text-align: justify; text-justify: inter-word; } .box { text-align: right; padding-bottom: 30px; } .skiplinks{ text-align: center; } /*CALENDAR & TAGS*/ ul.year { padding-inline-start: 0px; text-align: center; } ul.year li, ul.ljtaglist li, .sbaritem{ list-style-type: none; padding: 5px; transition-timing-function: ease-in; transition: 0.5s; } .sbarcontent { padding-right: 3px; height: 130px; background: var(--sbarbg); overflow: scroll; } .sbarcontent::-webkit-scrollbar{ background: var(--sbarbg); } .sbarcontent::-webkit-scrollbar-thumb{ background: var(--third-color); border-radius: 10px; } ul.year li { display: inline; } ul.year li:hover, ul.ljtaglist li:hover, .sbaritem:hover { color: var(--lighttext); letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } ul.year li:hover:nth-child(1n), ul.ljtaglist li:hover:nth-child(1n), .sbaritem:hover:nth-child(1n) { background: var(--first-color); } ul.year li:hover:nth-child(2n), ul.ljtaglist li:hover:nth-child(2n), .sbaritem:hover:nth-child(2n) { background: var(--second-color); } ul.year li:hover:nth-child(3n), ul.ljtaglist li:hover:nth-child(3n), .sbaritem:hover:nth-child(3n) { background: var(--third-color); } ul.year li:hover:nth-child(4n), ul.ljtaglist li:hover:nth-child(4n), .sbaritem:hover:nth-child(4n) { background: var(--fourth-color); } ul.year li:hover:nth-child(5n), ul.ljtaglist li:hover:nth-child(5n), .sbaritem:hover:nth-child(5n) { background: var(--fifth-color); } ul.year li:hover:nth-child(6n), ul.ljtaglist li:hover:nth-child(6n), .sbaritem:hover:nth-child(6n) { background: var(--sixth-color); } ul.year li:hover a, ul.ljtaglist li:hover a, .sbaritem:hover a { color: var(--lighttext); }	TO HUNG HOM /*LAYOUT: EXPRESS BY SHIPPING @ DREAMWIDTH*/ :root { --main-color: #fff; --first-color: #6f2232; --second-color: #950740; --third-color: #c3073f; --fourth-color: #6f2232; --fifth-color: #950740; --sixth-color: #c3073f; --link-color: #700E29; --link-hover: #00FFD5; --sbarbg: #000; --lighttext: #F9F4E1; --darktext: #F9F4E1; --bodybg: #1a1a1d; --entrybg: #1a1a1d; } /* latin-ext */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /*BODY*/ body{ color: var(--main-color); font-family: raleway; font-size: 12px; background: var(--bodybg); } a, a:link, a:visited { color: var(--link-color); text-decoration: none; font-weight: bold; } a:hover { color: var(--link-hover); text-decoration: none; font-weight: bold; } img { max-width: 700px; } /*HEADER*/ #lj_controlstrip { background: var(--sbarbg); } #lj_controlstrip #lj_controlstrip_userpic img{ border-radius: 50px; } #content { width: 100%; padding: 0px; } ul.navheader { padding-inline-start: 0px; text-align: center; width: 900px; color: var(--lighttext); width: 100%; height: 30px; margin-top: 20px; margin-bottom: 30px; padding-top: 140px; } .navheader li { color: var(--darktext); line-height: 20px; font-size: 15px; display: inline-block; padding-top: 10px; padding-bottom: 10px; margin: 0px; text-transform: uppercase; width: 147px; text-align: center; } .navheader li:not(.view){ transition-timing-function: ease-in; transition: 0.5s; } .navheader li:hover:not(.view) { width: 170px; padding-top: 15px; padding-bottom: 15px; margin-top: -5px; letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } .navheader li:nth-child(1n):not(.view) { background: var(--sixth-color); } .navheader li:nth-child(2n):not(.view) { background: var(--first-color); } .navheader li:nth-child(3n):not(.view) { background: var(--second-color); } .navheader li:nth-child(4n):not(.view) { background: var(--third-color); } .navheader li:nth-child(5n):not(.view) { background: var(--fourth-color); } .navheader li:nth-child(6n):not(.view) { background: var(--fifth-color); } .navheader a, a#visited, a#hover { color: var(--lighttext); } .title, .subtitle { margin-left: auto; margin-right: auto; width: 900px; color: var(--darktext); text-align: center; } .title { margin-top: -190px; font-size: 60px; text-shadow: 2px 2px var(--first-color); } .subtitle { transition-timing-function: ease-in; transition: 0.5s; letter-spacing: 2px; font-size: 14px; text-transform: uppercase; } .subtitle:hover{ transition-timing-function: ease-in; transition: 0.5s; letter-spacing: 4px; } .subtitle:before { content: "{"; } .subtitle:after { content: "}"; } /*CONTENT*/ #maincontent { margin-top: 100px; width: 900px; margin-left: auto; margin-right: auto; position: relative; } .subcontent{ padding: 30px; box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; background: var(--entrybg); } /*ENTRY*/ .userpic, .userpicfriends { float: left; margin-right: 5px; border-right: 5px solid var(--first-color) !important; } .userpicfriends { text-align: right; margin-right: 5px; } .userpic img, .userpicfriends img { width: 50px; height: 50px; } .subject { margin-top: 0px; width: 100%; font-size: 35px; line-height: 35px; padding-bottom: 20px; text-transform: lowercase; } .subject a { color: var(--darktext); transition-timing-function: ease-in; transition: 0.5s; } .subject a:hover { letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } .date { padding-right: 15px; padding-top: 5px; line-height: 12px; letter-spacing: 4px; text-transform: uppercase; font-family: arial; color: var(--first-color); } .datesubject { padding-bottom: 5px; display: block; text-align: left; } .entry { padding-top: 10px; } .comments { text-align: center; font-family: arial; letter-spacing: 4px; text-transform: uppercase; } blockquote { border-left: 5px solid var(--first-color); padding: 5px; } /*SIDEBAR*/ #sidebar { position: fixed; bottom: -165px; float: center; display: flex; width: 100%; height: 200px; background: var(--sbarbg); transition-timing-function: ease-in; transition: 0.5s; z-index: 100 !important; } #sidebar:hover{ bottom: 0px; transition-timing-function: ease-in; transition: 0.5s; } #sidebar div { align: right; padding-top: 40px; width: 260px; } #sidebar div.defaultuserpic { width: 150px; } #sidebar div.defaultuserpic img { border-radius: 100px; border: 10px solid var(--sbarbg); margin-top: -120px; margin-left: 5px; } #sidebar div.sbarbody2 { width: 15% } .sbarbody2{ position: absolute; bottom: 0px; left: 195px; text-align: justify; text-justify: inter-word; height: 120px; } .sbarbody2, .sbarbody { } .sbarlist { list-style-type: none; } .sbartitle { font-size: 25px; line-height: 20px; } .sbarbody:nth-child(1n) .sbartitle { color: var(--first-color); border-bottom: 2px solid var(--first-color); } .sbarbody:nth-child(2n) .sbartitle { color: var(--second-color); border-bottom: 2px solid var(--second-color); } .sbarbody:nth-child(3n) .sbartitle { color: var(--third-color); border-bottom: 2px solid var(--third-color); } .sbarbody:nth-child(4n) .sbartitle { color: var(--fourth-color); border-bottom: 2px solid var(--fourth-color); } .sbarbody:nth-child(5n) .sbartitle { color: var(--fifth-color); border-bottom: 2px solid var(--fifth-color); } /*FOOTER*/ ul.navfooter { text-align: center; padding-inline-start: 0px; } ul.navfooter li { text-align: center; display: inline-block; list-style-type: none; text-transform: uppercase; padding-bottom: 20px; } ul.navfooter::before{ content: "<<"; } ul.navfooter::after{ content: ">>"; } ul.navfooter a { color: var(--first-color); transition-timing-function: ease-in; transition: 0.5s; } /*COMMENT PAGE*/ .commentbox{ box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; padding: 5px; margin-top: 10px; margin-bottom: 10px; background: var(--entrybg); } .commentboxpartial{ box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; padding: 5px; margin-top: 10px; margin-bottom: 10px; background: var(--entrybg); text-align: left; } .commentboxpartial a:nth-child(1) { float: left; } .commentboxpartial a{ float: right; color: var(--first-color); } .userpiccomment { float: left; padding-right: 5px; background-color: var(--first-color); } .datesubjectcomment{ padding: 5px; display: block; height: 100px; text-align: right; } .commentreply { border-top: 1px solid #ddd; padding: 5px; padding-top: 20px; padding-bottom: 20px; text-align: justify; text-justify: inter-word; } .box { text-align: right; padding-bottom: 30px; } .skiplinks{ text-align: center; } /*CALENDAR & TAGS*/ ul.year { padding-inline-start: 0px; text-align: center; } ul.year li, ul.ljtaglist li, .sbaritem{ list-style-type: none; padding: 5px; transition-timing-function: ease-in; transition: 0.5s; } .sbarcontent { padding-right: 3px; height: 130px; background: var(--sbarbg); overflow: scroll; } .sbarcontent::-webkit-scrollbar{ background: var(--sbarbg); } .sbarcontent::-webkit-scrollbar-thumb{ background: var(--third-color); border-radius: 10px; } ul.year li { display: inline; } ul.year li:hover, ul.ljtaglist li:hover, .sbaritem:hover { color: var(--lighttext); letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } ul.year li:hover:nth-child(1n), ul.ljtaglist li:hover:nth-child(1n), .sbaritem:hover:nth-child(1n) { background: var(--first-color); } ul.year li:hover:nth-child(2n), ul.ljtaglist li:hover:nth-child(2n), .sbaritem:hover:nth-child(2n) { background: var(--second-color); } ul.year li:hover:nth-child(3n), ul.ljtaglist li:hover:nth-child(3n), .sbaritem:hover:nth-child(3n) { background: var(--third-color); } ul.year li:hover:nth-child(4n), ul.ljtaglist li:hover:nth-child(4n), .sbaritem:hover:nth-child(4n) { background: var(--fourth-color); } ul.year li:hover:nth-child(5n), ul.ljtaglist li:hover:nth-child(5n), .sbaritem:hover:nth-child(5n) { background: var(--fifth-color); } ul.year li:hover:nth-child(6n), ul.ljtaglist li:hover:nth-child(6n), .sbaritem:hover:nth-child(6n) { background: var(--sixth-color); } ul.year li:hover a, ul.ljtaglist li:hover a, .sbaritem:hover a { color: var(--lighttext); }
TO HARPA /*LAYOUT: EXPRESS BY SHIPPING @ DREAMWIDTH*/ :root { --main-color: #fff; --first-color: #00ffd2; --second-color: #10dfd6; --third-color: #08c0d2; --fourth-color: #259fb2; --fifth-color: #15b4b4; --sixth-color: #04c7e5; --link-color: #c5c6c7; --link-hover: #66fcf1; --sbarbg: #0b0c10; --lighttext: #fff; --darktext: #3d6d8b; --bodybg: #1f2833; --entrybg: #1f2833; } /* latin-ext */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /*BODY*/ body{ color: var(--main-color); font-family: raleway; font-size: 12px; background: var(--bodybg); } a, a:link, a:visited { color: var(--link-color); text-decoration: none; font-weight: bold; } a:hover { color: var(--link-hover); text-decoration: none; font-weight: bold; } img { max-width: 700px; } /*HEADER*/ #lj_controlstrip { background: var(--sbarbg); } #lj_controlstrip #lj_controlstrip_userpic img{ border-radius: 50px; } #content { width: 100%; padding: 0px; } ul.navheader { padding-inline-start: 0px; text-align: center; width: 900px; color: var(--lighttext); width: 100%; height: 30px; margin-top: 20px; margin-bottom: 30px; padding-top: 140px; } .navheader li { color: var(--darktext); line-height: 20px; font-size: 15px; display: inline-block; padding-top: 10px; padding-bottom: 10px; margin: 0px; text-transform: uppercase; width: 147px; text-align: center; } .navheader li:not(.view){ transition-timing-function: ease-in; transition: 0.5s; } .navheader li:hover:not(.view) { width: 170px; padding-top: 15px; padding-bottom: 15px; margin-top: -5px; letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } .navheader li:nth-child(1n):not(.view) { background: var(--sixth-color); } .navheader li:nth-child(2n):not(.view) { background: var(--first-color); } .navheader li:nth-child(3n):not(.view) { background: var(--second-color); } .navheader li:nth-child(4n):not(.view) { background: var(--third-color); } .navheader li:nth-child(5n):not(.view) { background: var(--fourth-color); } .navheader li:nth-child(6n):not(.view) { background: var(--fifth-color); } .navheader a, a#visited, a#hover { color: var(--lighttext); } .title, .subtitle { margin-left: auto; margin-right: auto; width: 900px; color: var(--darktext); text-align: center; } .title { margin-top: -190px; font-size: 60px; text-shadow: 2px 2px var(--first-color); } .subtitle { transition-timing-function: ease-in; transition: 0.5s; letter-spacing: 2px; font-size: 14px; text-transform: uppercase; } .subtitle:hover{ transition-timing-function: ease-in; transition: 0.5s; letter-spacing: 4px; } .subtitle:before { content: "{"; } .subtitle:after { content: "}"; } /*CONTENT*/ #maincontent { margin-top: 100px; width: 900px; margin-left: auto; margin-right: auto; position: relative; } .subcontent{ padding: 30px; box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; background: var(--entrybg); } /*ENTRY*/ .userpic, .userpicfriends { float: left; margin-right: 5px; border-right: 5px solid var(--first-color) !important; } .userpicfriends { text-align: right; margin-right: 5px; } .userpic img, .userpicfriends img { width: 50px; height: 50px; } .subject { margin-top: 0px; width: 100%; font-size: 35px; line-height: 35px; padding-bottom: 20px; text-transform: lowercase; } .subject a { color: var(--darktext); transition-timing-function: ease-in; transition: 0.5s; } .subject a:hover { letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } .date { padding-right: 15px; padding-top: 5px; line-height: 12px; letter-spacing: 4px; text-transform: uppercase; font-family: arial; color: var(--first-color); } .datesubject { padding-bottom: 5px; display: block; text-align: left; } .entry { padding-top: 10px; } .comments { text-align: center; font-family: arial; letter-spacing: 4px; text-transform: uppercase; } blockquote { border-left: 5px solid var(--first-color); padding: 5px; } /*SIDEBAR*/ #sidebar { position: fixed; bottom: -165px; float: center; display: flex; width: 100%; height: 200px; background: var(--sbarbg); transition-timing-function: ease-in; transition: 0.5s; z-index: 100 !important; } #sidebar:hover{ bottom: 0px; transition-timing-function: ease-in; transition: 0.5s; } #sidebar div { align: right; padding-top: 40px; width: 260px; } #sidebar div.defaultuserpic { width: 150px; } #sidebar div.defaultuserpic img { border-radius: 100px; border: 10px solid var(--sbarbg); margin-top: -120px; margin-left: 5px; } #sidebar div.sbarbody2 { width: 15% } .sbarbody2{ position: absolute; bottom: 0px; left: 195px; text-align: justify; text-justify: inter-word; height: 120px; } .sbarbody2, .sbarbody { } .sbarlist { list-style-type: none; } .sbartitle { font-size: 25px; line-height: 20px; } .sbarbody:nth-child(1n) .sbartitle { color: var(--first-color); border-bottom: 2px solid var(--first-color); } .sbarbody:nth-child(2n) .sbartitle { color: var(--second-color); border-bottom: 2px solid var(--second-color); } .sbarbody:nth-child(3n) .sbartitle { color: var(--third-color); border-bottom: 2px solid var(--third-color); } .sbarbody:nth-child(4n) .sbartitle { color: var(--fourth-color); border-bottom: 2px solid var(--fourth-color); } .sbarbody:nth-child(5n) .sbartitle { color: var(--fifth-color); border-bottom: 2px solid var(--fifth-color); } /*FOOTER*/ ul.navfooter { text-align: center; padding-inline-start: 0px; } ul.navfooter li { text-align: center; display: inline-block; list-style-type: none; text-transform: uppercase; padding-bottom: 20px; } ul.navfooter::before{ content: "<<"; } ul.navfooter::after{ content: ">>"; } ul.navfooter a { color: var(--first-color); transition-timing-function: ease-in; transition: 0.5s; } /*COMMENT PAGE*/ .commentbox{ box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; padding: 5px; margin-top: 10px; margin-bottom: 10px; background: var(--entrybg); } .commentboxpartial{ box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; padding: 5px; margin-top: 10px; margin-bottom: 10px; background: var(--entrybg); text-align: left; } .commentboxpartial a:nth-child(1) { float: left; } .commentboxpartial a{ float: right; color: var(--first-color); } .userpiccomment { float: left; padding-right: 5px; background-color: var(--first-color); } .datesubjectcomment{ padding: 5px; display: block; height: 100px; text-align: right; } .commentreply { border-top: 1px solid #ddd; padding: 5px; padding-top: 20px; padding-bottom: 20px; text-align: justify; text-justify: inter-word; } .box { text-align: right; padding-bottom: 30px; } .skiplinks{ text-align: center; } /*CALENDAR & TAGS*/ ul.year { padding-inline-start: 0px; text-align: center; } ul.year li, ul.ljtaglist li, .sbaritem{ list-style-type: none; padding: 5px; transition-timing-function: ease-in; transition: 0.5s; } .sbarcontent { padding-right: 3px; height: 130px; background: var(--sbarbg); overflow: scroll; } .sbarcontent::-webkit-scrollbar{ background: var(--sbarbg); } .sbarcontent::-webkit-scrollbar-thumb{ background: var(--third-color); border-radius: 10px; } ul.year li { display: inline; } ul.year li:hover, ul.ljtaglist li:hover, .sbaritem:hover { color: var(--lighttext); letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } ul.year li:hover:nth-child(1n), ul.ljtaglist li:hover:nth-child(1n), .sbaritem:hover:nth-child(1n) { background: var(--first-color); } ul.year li:hover:nth-child(2n), ul.ljtaglist li:hover:nth-child(2n), .sbaritem:hover:nth-child(2n) { background: var(--second-color); } ul.year li:hover:nth-child(3n), ul.ljtaglist li:hover:nth-child(3n), .sbaritem:hover:nth-child(3n) { background: var(--third-color); } ul.year li:hover:nth-child(4n), ul.ljtaglist li:hover:nth-child(4n), .sbaritem:hover:nth-child(4n) { background: var(--fourth-color); } ul.year li:hover:nth-child(5n), ul.ljtaglist li:hover:nth-child(5n), .sbaritem:hover:nth-child(5n) { background: var(--fifth-color); } ul.year li:hover:nth-child(6n), ul.ljtaglist li:hover:nth-child(6n), .sbaritem:hover:nth-child(6n) { background: var(--sixth-color); } ul.year li:hover a, ul.ljtaglist li:hover a, .sbaritem:hover a { color: var(--lighttext); }	TO NOWHERE /*LAYOUT: EXPRESS BY SHIPPING @ DREAMWIDTH*/ :root { --main-color: #666; --first-color: #94b2b3; --second-color: #87a5a8; --third-color: #7b999d; --fourth-color: #6e8c92; --fifth-color: #627f87; --sixth-color: #a0bfbe; --link-color: #999; --link-hover: #aaa; --sbarbg: #000; --lighttext: #fff; --darktext: #000; --bodybg: #fff; --entrybg: #fff; } /* latin-ext */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /*BODY*/ body{ color: var(--main-color); font-family: raleway; font-size: 12px; background: var(--bodybg); } a, a:link, a:visited { color: var(--link-color); text-decoration: none; font-weight: bold; } a:hover { color: var(--link-hover); text-decoration: none; font-weight: bold; } img { max-width: 700px; } /*HEADER*/ #lj_controlstrip { background: var(--sbarbg); } #lj_controlstrip #lj_controlstrip_userpic img{ border-radius: 50px; } #content { width: 100%; padding: 0px; } ul.navheader { padding-inline-start: 0px; text-align: center; width: 900px; color: var(--lighttext); width: 100%; height: 30px; margin-top: 20px; margin-bottom: 30px; padding-top: 140px; } .navheader li { color: var(--darktext); line-height: 20px; font-size: 15px; display: inline-block; padding-top: 10px; padding-bottom: 10px; margin: 0px; text-transform: uppercase; width: 147px; text-align: center; } .navheader li:not(.view){ transition-timing-function: ease-in; transition: 0.5s; } .navheader li:hover:not(.view) { width: 170px; padding-top: 15px; padding-bottom: 15px; margin-top: -5px; letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } .navheader li:nth-child(1n):not(.view) { background: var(--sixth-color); } .navheader li:nth-child(2n):not(.view) { background: var(--first-color); } .navheader li:nth-child(3n):not(.view) { background: var(--second-color); } .navheader li:nth-child(4n):not(.view) { background: var(--third-color); } .navheader li:nth-child(5n):not(.view) { background: var(--fourth-color); } .navheader li:nth-child(6n):not(.view) { background: var(--fifth-color); } .navheader a, a#visited, a#hover { color: var(--lighttext); } .title, .subtitle { margin-left: auto; margin-right: auto; width: 900px; color: var(--darktext); text-align: center; } .title { margin-top: -190px; font-size: 60px; text-shadow: 2px 2px var(--first-color); } .subtitle { transition-timing-function: ease-in; transition: 0.5s; letter-spacing: 2px; font-size: 14px; text-transform: uppercase; } .subtitle:hover{ transition-timing-function: ease-in; transition: 0.5s; letter-spacing: 4px; } .subtitle:before { content: "{"; } .subtitle:after { content: "}"; } /*CONTENT*/ #maincontent { margin-top: 100px; width: 900px; margin-left: auto; margin-right: auto; position: relative; } .subcontent{ padding: 30px; box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; background: var(--entrybg); } /*ENTRY*/ .userpic, .userpicfriends { float: left; margin-right: 5px; border-right: 5px solid var(--first-color) !important; } .userpicfriends { text-align: right; margin-right: 5px; } .userpic img, .userpicfriends img { width: 50px; height: 50px; } .subject { margin-top: 0px; width: 100%; font-size: 35px; line-height: 35px; padding-bottom: 20px; text-transform: lowercase; } .subject a { color: var(--darktext); transition-timing-function: ease-in; transition: 0.5s; } .subject a:hover { letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } .date { padding-right: 15px; padding-top: 5px; line-height: 12px; letter-spacing: 4px; text-transform: uppercase; font-family: arial; color: var(--first-color); } .datesubject { padding-bottom: 5px; display: block; text-align: left; } .entry { padding-top: 10px; } .comments { text-align: center; font-family: arial; letter-spacing: 4px; text-transform: uppercase; } blockquote { border-left: 5px solid var(--first-color); padding: 5px; } /*SIDEBAR*/ #sidebar { position: fixed; bottom: -165px; float: center; display: flex; width: 100%; height: 200px; background: var(--sbarbg); transition-timing-function: ease-in; transition: 0.5s; z-index: 100 !important; } #sidebar:hover{ bottom: 0px; transition-timing-function: ease-in; transition: 0.5s; } #sidebar div { align: right; padding-top: 40px; width: 260px; } #sidebar div.defaultuserpic { width: 150px; } #sidebar div.defaultuserpic img { border-radius: 100px; border: 10px solid var(--sbarbg); margin-top: -120px; margin-left: 5px; } #sidebar div.sbarbody2 { width: 15% } .sbarbody2{ position: absolute; bottom: 0px; left: 195px; text-align: justify; text-justify: inter-word; height: 120px; } .sbarbody2, .sbarbody { } .sbarlist { list-style-type: none; } .sbartitle { font-size: 25px; line-height: 20px; } .sbarbody:nth-child(1n) .sbartitle { color: var(--first-color); border-bottom: 2px solid var(--first-color); } .sbarbody:nth-child(2n) .sbartitle { color: var(--second-color); border-bottom: 2px solid var(--second-color); } .sbarbody:nth-child(3n) .sbartitle { color: var(--third-color); border-bottom: 2px solid var(--third-color); } .sbarbody:nth-child(4n) .sbartitle { color: var(--fourth-color); border-bottom: 2px solid var(--fourth-color); } .sbarbody:nth-child(5n) .sbartitle { color: var(--fifth-color); border-bottom: 2px solid var(--fifth-color); } /*FOOTER*/ ul.navfooter { text-align: center; padding-inline-start: 0px; } ul.navfooter li { text-align: center; display: inline-block; list-style-type: none; text-transform: uppercase; padding-bottom: 20px; } ul.navfooter::before{ content: "<<"; } ul.navfooter::after{ content: ">>"; } ul.navfooter a { color: var(--first-color); transition-timing-function: ease-in; transition: 0.5s; } /*COMMENT PAGE*/ .commentbox{ box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; padding: 5px; margin-top: 10px; margin-bottom: 10px; background: var(--entrybg); } .commentboxpartial{ box-shadow: rgba(0,0,0,0.3) 0px 0px 10px; padding: 5px; margin-top: 10px; margin-bottom: 10px; background: var(--entrybg); text-align: left; } .commentboxpartial a:nth-child(1) { float: left; } .commentboxpartial a{ float: right; color: var(--first-color); } .userpiccomment { float: left; padding-right: 5px; background-color: var(--first-color); } .datesubjectcomment{ padding: 5px; display: block; height: 100px; text-align: right; } .commentreply { border-top: 1px solid #ddd; padding: 5px; padding-top: 20px; padding-bottom: 20px; text-align: justify; text-justify: inter-word; } .box { text-align: right; padding-bottom: 30px; } .skiplinks{ text-align: center; } /*CALENDAR & TAGS*/ ul.year { padding-inline-start: 0px; text-align: center; } ul.year li, ul.ljtaglist li, .sbaritem{ list-style-type: none; padding: 5px; transition-timing-function: ease-in; transition: 0.5s; } .sbarcontent { padding-right: 3px; height: 130px; background: var(--sbarbg); overflow: scroll; } .sbarcontent::-webkit-scrollbar{ background: var(--sbarbg); } .sbarcontent::-webkit-scrollbar-thumb{ background: var(--third-color); border-radius: 10px; } ul.year li { display: inline; } ul.year li:hover, ul.ljtaglist li:hover, .sbaritem:hover { color: var(--lighttext); letter-spacing: 4px; transition-timing-function: ease-in; transition: 0.5s; } ul.year li:hover:nth-child(1n), ul.ljtaglist li:hover:nth-child(1n), .sbaritem:hover:nth-child(1n) { background: var(--first-color); } ul.year li:hover:nth-child(2n), ul.ljtaglist li:hover:nth-child(2n), .sbaritem:hover:nth-child(2n) { background: var(--second-color); } ul.year li:hover:nth-child(3n), ul.ljtaglist li:hover:nth-child(3n), .sbaritem:hover:nth-child(3n) { background: var(--third-color); } ul.year li:hover:nth-child(4n), ul.ljtaglist li:hover:nth-child(4n), .sbaritem:hover:nth-child(4n) { background: var(--fourth-color); } ul.year li:hover:nth-child(5n), ul.ljtaglist li:hover:nth-child(5n), .sbaritem:hover:nth-child(5n) { background: var(--fifth-color); } ul.year li:hover:nth-child(6n), ul.ljtaglist li:hover:nth-child(6n), .sbaritem:hover:nth-child(6n) { background: var(--sixth-color); } ul.year li:hover a, ul.ljtaglist li:hover a, .sbaritem:hover a { color: var(--lighttext); }

customize

All the colors for this layout are at the top within the block :root{}. maincolor is for the color of the bulk of your text. first-sixth colors are the tabs up top and on hover links in the sidebar and on your tags page. "Recent Entries" is actually under color six, not one. sbarbg is the color for both the sidebar (which is a bottom bar) and the navigation strip on top. lighttext is for mostly links on the navigation top, and darktext is used for subject title in your entry.