posted Mar 10, 2019 18:49:09 GMT -6 in wasteland, baby!
[nospaces][googlefont=Overpass:600|Roboto:700|Permanent+Marker|Cabin:400|Quicksand:400,500,600,700]
[newclass=.wasteland-contain]background: url(https://i.ibb.co/Z1kmg95/image.png)!important;[/newclass]
[newclass=.wasteland-LIGHTVER] --accent: #c58380; --mainbg: #eee; --modalbg: #e6e6e6; --maintext: #8a8a8a; --lyricoutline: #444; --deco: rgba(255, 255, 255, 0.25); --decoborder: #fff; --scrollbg: #ddd; --tagtext: #cfcfcf; --notestext: #b4b4b4; --pulse1: rgba(238, 238, 238, 0); --pulse2: rgba(238, 238, 238, 0.4); [/newclass]
[newclass=.wasteland-DARKVER] --accent: #c58380; --mainbg: #444; --modalbg: #3d3d3d; --maintext: #aaa; --lyricoutline: #333; --deco: rgba(0, 0, 0, 0.25); --decoborder: #111; --scrollbg: #555; --tagtext: #777; --notestext: #888; --pulse1: rgba(68, 68, 68, 0); --pulse2: rgba(68, 68, 68, 0.4); [/newclass]
[newclass=.wasteland-contain] width: 500px; height: 500px; background:url(http://placehold.it/500x500.png); margin: 25px auto; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-flow: row wrap; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.25); border: 1px solid #fff; [/newclass]
[newclass=.wasteland-front] width: 500px; height: 500px; display: flex; align-items: center; justify-content: center; [/newclass]
[newclass=.wasteland-lyric] font: 90px/75% permanent marker; color: #eee; text-align: center; position: relative; z-index: 1; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #444; -webkit-text-stroke-color: var(--lyricoutline); width: 500px; word-break: break-word; [/newclass]
[newclass=.wasteland-deco] position: absolute; display: flex; align-items: center; justify-content: center; [/newclass]
[newclass=.wasteland-deco] content: ""; position: absolute; width: 250px; height: 250px; background: rgba(255, 255, 255, 0.25); background: var(--deco); border-radius: 100%; [/newclass]
[newclass=.wasteland-deco:after] content: ""; position: absolute; width: 200px; height: 200px; border: 5px dotted #fff; border: 5px dotted var(--decoborder); z-index: 0; border-radius: 100%; animation: 30s wasteland-spinner linear infinite; } @keyframes wasteland-spinner { from { transform: rotate(90deg); } to { transform: rotate(450deg); }[/newclass]
[newclass=.wasteland-post] width: 475px; height: 475px; background-color: #eee; background-color: var(--mainbg); position: relative; display: flex; flex-flow: column nowrap; z-index: 2; margin-top: -500px; transform: scale(0.33); opacity: 0; transition: 0.5s; overflow: hidden; [/newclass]
[newclass=.wasteland-contain:hover .wasteland-post] margin-top: -500px; transform: scale(1); opacity: 1; transition: 0.5s; [/newclass]
[newclass=.wasteland-modal] height: 10px; padding: 10px; background-color: #e6e6e6; background-color: var(--modalbg); display: flex; [/newclass]
[newclass=.wasteland-modal div] width: 10px; height: 10px; border-radius: 100%; margin-right: 10px; [/newclass]
[newclass=.wasteland-text] height: 250px; border: 50px solid #eee; border: 50px solid var(--mainbg); padding-right: 5px; overflow: auto; font: 12px/14px cabin; text-align: justify; text-align-last: left; background-color: #eee; background-color: var(--mainbg); color: #888; color: var(--maintext); [/newclass]
[newclass=.wasteland-text::-webkit-scrollbar] width: 5px; [/newclass]
[newclass=.wasteland-text::-webkit-scrollbar-thumb] background-color: #999; background-color: var(--accent); border-radius: 20px; border:0px; [/newclass]
[newclass=.wasteland-text::-webkit-scrollbar-track] background: #ddd; background: var(--scrollbg); border: 2px solid #eee; border: 2px solid var(--mainbg); border-radius: 10px; [/newclass]
[newclass=.wasteland-text b] font: 700 13px/14px Quicksand; color: #999; color: var(--accent); [/newclass]
[newclass=.wasteland-footer] width: 100%; height: 100px; background: #eee; background: var(--mainbg); display: flex; align-items: flex-start; justify-content: space-between; [/newclass]
[newclass=.wasteland-details] width: 400px; position: relative; z-index: 1; [/newclass]
[newclass=.wasteland-lyric-line] margin-left: 50px; font: 400 8px/100% Overpass; text-transform: uppercase; color: #b4b4b4; color: var(--notestext); [/newclass]
[newclass=.wasteland-tag] padding-left: 25px; width: 375px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font: 400 25px/100% Quicksand; text-transform: uppercase; color: #ccc; color: var(--tagtext); align-self: flex-start; [/newclass]
[newclass=.wasteland-tag a] color: #aaa; color: var(--accent) !important; font: 700 25px/100% Quicksand !important; [/newclass]
[newclass=.wasteland-tag:after]content:'!';[/newclass]
[newclass=.wasteland-notes] width: 345px; text-align: justify; height: 40px; display: flex; margin-left: 25px; padding-right: 5px; overflow: auto; color: #b4b4b4; color: var(--notestext); font: 500 10px quicksand; [/newclass]
[newclass=.wasteland-notes::-webkit-scrollbar] width: 3px; [/newclass]
[newclass=.wasteland-notes::-webkit-scrollbar-thumb] background: #aaa; background: var(--accent); border:0px; [/newclass]
[newclass=.wasteland-notes::-webkit-scrollbar-track] background: #ddd; background: var(--scrollbg); border:0px; [/newclass]
[newclass=.wasteland-icon] position: absolute; right: 0px; flex-shrink: 0; background: linear-gradient( to bottom right, #eee 0%, #eee 50%, #aaa 50%, #aaa 100% ); background: linear-gradient( to bottom right, var(--mainbg) 0%, var(--mainbg) 50%, var(--accent) 50%, var(--accent) 100% ); height: 99px; width: 100px; display: flex; align-items: center; justify-content: center; [/newclass]
[newclass=.wasteland-icon img] display: block; width: 50px; height: 50px; border-radius: 100%; background-color: #eee; background-color: var(--mainbg); padding: 5px; animation: wasteland-pulse 5s normal infinite; } @keyframes wasteland-pulse { 0% { box-shadow: 0 0 0 0 rgba(238, 238, 238, 0.4); box-shadow: 0 0 0 0px var(--pulse2); } 33% { box-shadow: 0 0 0 20px rgba(238, 238, 238, 0); box-shadow: 0 0 0 20px var(--pulse1); } 100% { box-shadow: 0 0 0 0 rgba(238, 238, 238, 0); box-shadow: 0 0 0 0px var(--pulse1); }[/newclass]
[newclass=.wasteland-credit]text-align: center; margin: -25px 0px 0px 450px; [/newclass]
[newclass=.wasteland-credit a]font: 700 7px/100% roboto;[/newclass]
[newclass=.wasteland-contain]background: url(https://i.ibb.co/Z1kmg95/image.png)!important;[/newclass]
[attr="class","wasteland-LIGHTVER"]
[attr="class","wasteland-contain"]
[attr="class","wasteland-front"]
[attr="class","wasteland-lyric"]
wasteland, baby!
wasteland, baby!
[attr="class","wasteland-deco"]
[attr="class","wasteland-post"]
[attr="class","wasteland-modal"]
[attr="class","wasteland-text"]
all the fear, and fire of the end of the world, happens each time a boy falls in love with a girl. happens great, happens sweet, happily, i'm unfazed here, too. wasteland, baby! i'm in love, i'm in love with you. all the things yet to come are the things that have passed. like the holding of hands, like the breaking of glass. like the bonfire that burns, that all words in the fight fell to. wasteland, baby. i'm in love, i'm in love with you. and i love too, that love soon might end, be known in its aching, shown in the shaking, lately, of my wasteland, baby. be still, my indelible friend, you are unbreaking. though quaking, though crazy, that's just wasteland, baby. [break][break]
and that day that we'll watch the death of the sun, to the cloud, and the cold, and those jeans you have on. and you'll gaze unafraid as they sob from the city roofs. wasteland, baby, i'm in love, i'm in love with you. and i love too, that love soon might end, be known in its aching. shown in the shaking, lately, of my wasteland, baby. be still, my indelible friend, you are unbreaking. though quaking, though crazy, that's wasteland, baby. [break][break]
when the stench of the sea and the absence of green, are the death of all things that are seen and unseen, are an end, but the start of all things that are left to do. wasteland, baby! i'm in love, i'm in love with you.
all the fear, and fire of the end of the world, happens each time a boy falls in love with a girl. happens great, happens sweet, happily, i'm unfazed here, too. wasteland, baby! i'm in love, i'm in love with you. all the things yet to come are the things that have passed. like the holding of hands, like the breaking of glass. like the bonfire that burns, that all words in the fight fell to. wasteland, baby. i'm in love, i'm in love with you. and i love too, that love soon might end, be known in its aching, shown in the shaking, lately, of my wasteland, baby. be still, my indelible friend, you are unbreaking. though quaking, though crazy, that's just wasteland, baby. [break][break]
and that day that we'll watch the death of the sun, to the cloud, and the cold, and those jeans you have on. and you'll gaze unafraid as they sob from the city roofs. wasteland, baby, i'm in love, i'm in love with you. and i love too, that love soon might end, be known in its aching. shown in the shaking, lately, of my wasteland, baby. be still, my indelible friend, you are unbreaking. though quaking, though crazy, that's wasteland, baby. [break][break]
when the stench of the sea and the absence of green, are the death of all things that are seen and unseen, are an end, but the start of all things that are left to do. wasteland, baby! i'm in love, i'm in love with you.
[attr="class","wasteland-footer"]
[attr="class","wasteland-details"]
[attr="class","wasteland-lyric-line"]
wasteland, baby, i'm in love i'm in love with you
wasteland, baby, i'm in love i'm in love with you
[attr="class","wasteland-notes"]
put some notes here. they scroll after three lines. my codes continue to look like leap knockoffs, i see. wasteland, baby! i'm in love, i'm in love with you. wasteland, baby. i'm in love, i'm in love with you. wasteland, baby, i'm in love, i'm in love with you.
put some notes here. they scroll after three lines. my codes continue to look like leap knockoffs, i see. wasteland, baby! i'm in love, i'm in love with you. wasteland, baby. i'm in love, i'm in love with you. wasteland, baby, i'm in love, i'm in love with you.
[attr="class","wasteland-icon"]
[attr="class","wasteland-credit"]SELKIE
[newclass=.wasteland-LIGHTVER] --accent: #c58380; --mainbg: #eee; --modalbg: #e6e6e6; --maintext: #8a8a8a; --lyricoutline: #444; --deco: rgba(255, 255, 255, 0.25); --decoborder: #fff; --scrollbg: #ddd; --tagtext: #cfcfcf; --notestext: #b4b4b4; --pulse1: rgba(238, 238, 238, 0); --pulse2: rgba(238, 238, 238, 0.4); [/newclass]
[newclass=.wasteland-DARKVER] --accent: #c58380; --mainbg: #444; --modalbg: #3d3d3d; --maintext: #aaa; --lyricoutline: #333; --deco: rgba(0, 0, 0, 0.25); --decoborder: #111; --scrollbg: #555; --tagtext: #777; --notestext: #888; --pulse1: rgba(68, 68, 68, 0); --pulse2: rgba(68, 68, 68, 0.4); [/newclass]
[newclass=.wasteland-contain] width: 500px; height: 500px; background:url(http://placehold.it/500x500.png); margin: 25px auto; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-flow: row wrap; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.25); border: 1px solid #fff; [/newclass]
[newclass=.wasteland-front] width: 500px; height: 500px; display: flex; align-items: center; justify-content: center; [/newclass]
[newclass=.wasteland-lyric] font: 90px/75% permanent marker; color: #eee; text-align: center; position: relative; z-index: 1; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #444; -webkit-text-stroke-color: var(--lyricoutline); width: 500px; word-break: break-word; [/newclass]
[newclass=.wasteland-deco] position: absolute; display: flex; align-items: center; justify-content: center; [/newclass]
[newclass=.wasteland-deco] content: ""; position: absolute; width: 250px; height: 250px; background: rgba(255, 255, 255, 0.25); background: var(--deco); border-radius: 100%; [/newclass]
[newclass=.wasteland-deco:after] content: ""; position: absolute; width: 200px; height: 200px; border: 5px dotted #fff; border: 5px dotted var(--decoborder); z-index: 0; border-radius: 100%; animation: 30s wasteland-spinner linear infinite; } @keyframes wasteland-spinner { from { transform: rotate(90deg); } to { transform: rotate(450deg); }[/newclass]
[newclass=.wasteland-post] width: 475px; height: 475px; background-color: #eee; background-color: var(--mainbg); position: relative; display: flex; flex-flow: column nowrap; z-index: 2; margin-top: -500px; transform: scale(0.33); opacity: 0; transition: 0.5s; overflow: hidden; [/newclass]
[newclass=.wasteland-contain:hover .wasteland-post] margin-top: -500px; transform: scale(1); opacity: 1; transition: 0.5s; [/newclass]
[newclass=.wasteland-modal] height: 10px; padding: 10px; background-color: #e6e6e6; background-color: var(--modalbg); display: flex; [/newclass]
[newclass=.wasteland-modal div] width: 10px; height: 10px; border-radius: 100%; margin-right: 10px; [/newclass]
[newclass=.wasteland-text] height: 250px; border: 50px solid #eee; border: 50px solid var(--mainbg); padding-right: 5px; overflow: auto; font: 12px/14px cabin; text-align: justify; text-align-last: left; background-color: #eee; background-color: var(--mainbg); color: #888; color: var(--maintext); [/newclass]
[newclass=.wasteland-text::-webkit-scrollbar] width: 5px; [/newclass]
[newclass=.wasteland-text::-webkit-scrollbar-thumb] background-color: #999; background-color: var(--accent); border-radius: 20px; border:0px; [/newclass]
[newclass=.wasteland-text::-webkit-scrollbar-track] background: #ddd; background: var(--scrollbg); border: 2px solid #eee; border: 2px solid var(--mainbg); border-radius: 10px; [/newclass]
[newclass=.wasteland-text b] font: 700 13px/14px Quicksand; color: #999; color: var(--accent); [/newclass]
[newclass=.wasteland-footer] width: 100%; height: 100px; background: #eee; background: var(--mainbg); display: flex; align-items: flex-start; justify-content: space-between; [/newclass]
[newclass=.wasteland-details] width: 400px; position: relative; z-index: 1; [/newclass]
[newclass=.wasteland-lyric-line] margin-left: 50px; font: 400 8px/100% Overpass; text-transform: uppercase; color: #b4b4b4; color: var(--notestext); [/newclass]
[newclass=.wasteland-tag] padding-left: 25px; width: 375px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font: 400 25px/100% Quicksand; text-transform: uppercase; color: #ccc; color: var(--tagtext); align-self: flex-start; [/newclass]
[newclass=.wasteland-tag a] color: #aaa; color: var(--accent) !important; font: 700 25px/100% Quicksand !important; [/newclass]
[newclass=.wasteland-tag:after]content:'!';[/newclass]
[newclass=.wasteland-notes] width: 345px; text-align: justify; height: 40px; display: flex; margin-left: 25px; padding-right: 5px; overflow: auto; color: #b4b4b4; color: var(--notestext); font: 500 10px quicksand; [/newclass]
[newclass=.wasteland-notes::-webkit-scrollbar] width: 3px; [/newclass]
[newclass=.wasteland-notes::-webkit-scrollbar-thumb] background: #aaa; background: var(--accent); border:0px; [/newclass]
[newclass=.wasteland-notes::-webkit-scrollbar-track] background: #ddd; background: var(--scrollbg); border:0px; [/newclass]
[newclass=.wasteland-icon] position: absolute; right: 0px; flex-shrink: 0; background: linear-gradient( to bottom right, #eee 0%, #eee 50%, #aaa 50%, #aaa 100% ); background: linear-gradient( to bottom right, var(--mainbg) 0%, var(--mainbg) 50%, var(--accent) 50%, var(--accent) 100% ); height: 99px; width: 100px; display: flex; align-items: center; justify-content: center; [/newclass]
[newclass=.wasteland-icon img] display: block; width: 50px; height: 50px; border-radius: 100%; background-color: #eee; background-color: var(--mainbg); padding: 5px; animation: wasteland-pulse 5s normal infinite; } @keyframes wasteland-pulse { 0% { box-shadow: 0 0 0 0 rgba(238, 238, 238, 0.4); box-shadow: 0 0 0 0px var(--pulse2); } 33% { box-shadow: 0 0 0 20px rgba(238, 238, 238, 0); box-shadow: 0 0 0 20px var(--pulse1); } 100% { box-shadow: 0 0 0 0 rgba(238, 238, 238, 0); box-shadow: 0 0 0 0px var(--pulse1); }[/newclass]
[newclass=.wasteland-credit]text-align: center; margin: -25px 0px 0px 450px; [/newclass]
[newclass=.wasteland-credit a]font: 700 7px/100% roboto;[/newclass]