937written posts
offlinecurrently
All birds and men are sure to die but songs may live forever
[nospaces] [attr="class","gim-canvasdark"] No. 03: Ashes to Ashes - Minimal as minimal gets, yet spent a stupidly long amount of time on those blasted embers soooo...I'm slapping this on a darker background so they're at least somewhat more visible orz. Lyrics are from a Promare track, though not, I'm afraid, the one called Ashes
[attr="class","emberlit"] [attr="class","emberlit_border"] [attr="class","emberlit_inner"] [attr="class","emberlit_gradient"] [attr="class","emberlit_header"] [attr="class","top-ember"]  [attr="class","emberlit_lyrics"]
The pyro in us wants to watch [break]
the kingdom of your castle burn [attr="class","emberlit_text"] We do not say the words of cheer much any more. All smiles have become archaic. The trouble is that we have a bad habit, encouraged by pedants and sophisticates, of considering happiness as something rather stupid. Only pain is intellectual, only evil interesting. This is the treason of the artist: a refusal to admit the banality of evil and the terrible boredom of pain. If you can’t lick ‘em, join ‘em. If it hurts, repeat it. But to praise despair is to condemn delight, to embrace violence is to lose hold of everything else. [break][break] We have almost lost hold; we can no longer describe a happy man, nor make any celebration of joy. How can I tell you about the people of Omelas? They were not naive and happy children— though their children were, in fact, happy. They were mature, intelligent, passionate adults whose lives were not wretched. [break][break] O miracle! but I wish I could describe it better. I wish I could convince you. Omelas sounds in my words like a city in a fairy tale, long ago and far away, once upon a time. Perhaps it would be best if you imagined it as your own fancy bids, assuming it will rise to the occasion, for certainly I cannot suit you all. [break][break]
[attr="class","h3"]notes – exerpt from The Ones Who Walk Away From Omelas, Ursula Le Guin
[attr="class","emberlit_footer"] [attr="class","seamlessembers"] [attr="class","bottom-ember"]  [attr="class","bottom-ember"] [attr="class","bottom-ember"] [attr="class","bottom-ember"] [attr="class","emberlit_footer"] [attr="class","seamlessembers"] [attr="class","bottom-ember"] [attr="class","bottom-ember"] [attr="class","bottom-ember"] [attr="class","bottom-ember"]
[googlefont=Nunito Sans:300,400,600][googlefont=Petrona:400,500,700]
[newclass=.gim-canvasdark]background: #111; width: 100%; padding: 20px 0; color: #999; line-height: 1.5em[/newclass]
[newclass=.emberlit]max-width: calc(450px + 10px); min-width: 300px; width: 95%; margin: 30px auto; --textgray: #808080; --textaccent: rgb(179 87 22); --textaccentRGB: 179, 87, 22; } .emberlit a.gimcredits { display: block; text-align: right; margin-top: 4px; font: 700 7px/10px sans-serif; letter-spacing: .8px; text-decoration: none; text-transform: uppercase; } .emberlit_gradient { position: absolute; height: 100%; width: 100%; background: linear-gradient(to bottom, rgb(11, 15, 21) 70%, rgba(7, 16, 31, 0) 90%); top: 0; z-index: 20; } .emberlit_border { padding: 3px; background: transparent; border: 1px solid rgba(var(--textaccentRGB), .3); border: 1px solid #0D0E0F; } .emberlit_inner { background: #0D0E0F; background: rgb(13, 19, 29); position: relative; overflow: hidden; border: 1px solid rgba(var(--textaccentRGB), .3); } .emberlit_header { width: 100%; height: 45px; top: 0; z-index: 30; position: relative; display: flex; justify-content: center; overflow: hidden; } .top-ember { display: block; } .top-ember svg, .top-ember img { opacity: 0; animation: flicker3 9s 0 linear; animation-iteration-count: infinite; filter: brightness(2.25); -webkit-animation: flicker3 9s 0 linear; -webkit-animation-iteration-count: infinite; -webkit-filter: brightness(2.25); } @keyframes flicker3 { 0%, 100% { transform: translate(0, 15px); opacity: 0; } 90%, 99% { opacity: 1; transform: translate(0, -45px); } } .emberlit_lyrics { position: relative; color: var(--textaccent); padding: 35px 60px 0px; text-align: center; z-index: 50; letter-spacing: .15em; margin-top: -45px; text-transform: uppercase; font: 700 11.5px/14px 'Petrona', serif; opacity: .8; } .emberlit_text { color: var(--textgray); padding: 20px 35px 0 45px; margin-bottom: -138px; z-index: 50; position: relative; font: 300 12px/17px 'Nunito Sans', sans-serif; font: 300 13px/18.5px 'Nunito Sans', sans-serif; letter-spacing: .65px; } .emberlit br+br { content: ''; display: block; margin: 0 0 11px; } .emberlit hr { display: block; border: 0; border-top: 0px dotted var(--textgray); width: 10%; margin: 22px auto 0; opacity: .8; } .emberlit .h3 { font: 500 11.5px/11.5px 'Petrona', serif; text-transform: uppercase; color: var(--textaccent); display: inline-flex; align-items: center; letter-spacing: .1em; } .emberlit_footer { z-index: 0; height: 227px; width: 100%; display: flex; justify-content: center; } .seamlessembers { position: absolute; bottom: 0; display: block; } .bottom-ember { height: calc(240px / 2); overflow: visible; } .bottom-ember img { height: 240px; filter: brightness(1.3) blur(1); -webkit-filter: brightness(1.3) blur(1); } .seamlessembers:first-child { animation: flicker1 60s 0 linear; animation-iteration-count: infinite; transform: translate(0, 0) scale(1); -webkit-animation: flicker1 60s 0 linear; -webkit-animation-iteration-count: infinite; -webkit-transform: translate(0, 0) scale(1); opacity: .75; } .seamlessembers:last-child { animation: flicker2 60s 0 linear; animation-iteration-count: infinite; transform: translate(0, 480px) scale(1.25); -webkit-animation: flicker2 60s 0 linear; -webkit-animation-iteration-count: infinite; -webkit-transform: translate(0, 480px) scale(1.25); } @keyframes flicker1 { 0%, 100% { transform: translate(0, 0) scale(1); -webkit-transform: translate(0, 0) scale(1); } 49% { transform: translate(0, -480px) scale(1); -webkit-transform: translate(0, -480px) scale(1); opacity: 1; } 50% { transform: translate(0, 480px) scale(1); -webkit-transform: translate(0, 480px) scale(1); opacity: 0 } 51% { opacity: 1; } 99% { transform: translate(0px, 0) scale(1); -webkit-transform: translate(0px, 0) scale(1); opacity: .75; } } @keyframes flicker2 { 0%, 100% { transform: translate(0, 480px) scale(1.25); -webkit-transform: translate(0, 480px) scale(1.25); } 50% { transform: translate(0, 0) scale(1); -webkit-transform: translate(0, 0) scale(1); opacity: .75 } 99% { transform: translate(0, -480px) scale(1.25); -webkit-transform: translate(0, -480px) scale(1.25); opacity: 1; } [/newclass]
|
last edit on Apr 25, 2021 18:10:00 GMT by gimmick |
