posted Oct 5, 2018 21:29:41 GMT -6 in [ABC's] werewolf gimmick
[nospaces][googlefont=Roboto:400,600,700|Montserrat:600,700]
[newclass=.wwgm_tracker] --wwgm_accent:#A4447C; [/newclass]
[newclass=.wwgm_tracker] width:600px; height:400px; background:url(http://placehold.it/600x400.png); border-radius:5px; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; [/newclass]
[newclass=.wwgm_contain] display:flex; flex-flow:row wrap; align-items:center; justify-content:center; opacity:1; transition:.5s ease; position:relative [/newclass]
[newclass=.wwgm_hover] position:absolute; top:0px; width:600px; height:400px; transition:.5s ease; transition-delay:.75s; [/newclass]
[newclass=.wwgm_tracker:hover .wwgm_hover] animation: wwgm_wipe .5s ease; background-color:rgba(0,0,0,.5); transition:.5s ease; } @keyframes wwgm_wipe { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); }[/newclass]
[newclass=.wwgm_header] width:calc(100% - 20px); height:95px; padding:10px; background-color:#333; display:flex; align-items:center; justify-content:flex-start; position:relative; top:-115px; transition:.33s ease; z-index:1; transition-delay:.33s; [/newclass]
[newclass=.wwgm_tracker:hover .wwgm_header] top:0px; transition:.33s ease; transition-delay:.5s; [/newclass]
[newclass=.wwgm_header img] width:75px; height:75px; padding:5px; background-color:#fafafa; border:5px solid var(--wwgm_accent); border-radius:100%; [/newclass]
[newclass=.wwgm_header h1] margin:0px 0px 0px 25px; font:700 30px montserrat; text-transform:uppercase; color:#eee; [/newclass]
[newclass=.wwgm_threads] display:flex; width:600px; align-items:flex-start; justify-content:flex-start; [/newclass]
[newclass=.wwgm_thread_box] width:186.5px; height:186.5px; margin-top:10px; margin-left:10px; flex-shrink:0; background-color:#aaa; display:flex; align-items:center; justify-content:space-between; overflow:hidden; position:relative; z-index:1; opacity:0; transition:.33s ease; [/newclass]
[newclass=.wwgm_tracker:hover .wwgm_thread_box:nth-child(1)] opacity:1; transition:.33s ease; transition-delay:1s; [/newclass]
[newclass=.wwgm_tracker:hover .wwgm_thread_box:nth-child(2)] opacity:1; transition:.33s ease; transition-delay:1.33s; [/newclass]
[newclass=.wwgm_tracker:hover .wwgm_thread_box:nth-child(3)] opacity:1; transition:.33s ease; transition-delay:1.66s; [/newclass]
[newclass=.wwgm_thread_box h1] margin:0px; height:100%; width:25px; display:flex; align-items:center; justify-content:center; background-color:#333; color:#eee; font:600 8px/25px montserrat; text-transform:uppercase; [/newclass]
[newclass=.wwgm_thread_box h1 span] writing-mode: vertical-rl; [/newclass]
[newclass=.wwgm_thread_list] width:162px; height:187px; overflow:auto; background-color:#eee; [/newclass]
[newclass=.wwgm_thread_list::-webkit-scrollbar] width:0px; [/newclass]
[newclass=.wwgm_thread_hover] height:20px; margin:5px; background-color:#333; border-radius:5px; font:700 7px/20px roboto; overflow:hidden; text-transform:uppercase; color:#aaa; [/newclass]
[newclass=.wwgm_thread_title] margin-top:0px; transition:.33s ease; background-color:#333; [/newclass]
[newclass=.wwgm_thread_hover:hover .wwgm_thread_title] margin-top:-20px; transition:.33s ease; transition-delay:.75s; [/newclass]
[newclass=.wwgm_thread_title a] color:#fafafa; font:700 7px/20px roboto!important; [/newclass]
[newclass=.wwgm_footer] height:81px; width:calc(100% - 100px); padding:0px 50px; background-color:#333; color:#eee; font:600 10px roboto; text-transform:uppercase; margin-top:10px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; top:80px; transition:.33s ease; transition-delay:.33s; [/newclass]
[newclass=.wwgm_footer span] font-size:90px; color:var(--wwgm_accent); position:absolute; bottom:-15px; right:0px; text-shadow:-1px -1px 0 #eee, 1px -1px 0 #eee, -1px 1px 0 #eee, 1px 1px 0 #eee; [/newclass]
[newclass=.wwgm_tracker:hover .wwgm_footer] top:0px; transition:.33s ease; transition-delay:.5s; [/newclass]
[newclass=.wwgm_credit] font:700 7px roboto; margin-left:550px; [/newclass]
[newclass=.wwgm_credit a] font:700 7px roboto!important; [/newclass]
[newclass=.th]speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale } @font-face { font-family: "honeybee";src:url("//dl.dropbox.com/s/0l8lnm6qy7vzwn7/honeybee.eot");src:url("//dl.dropbox.com/s/0l8lnm6qy7vzwn7/honeybee.eot?#iefix") format("embedded-opentype"),url("//dl.dropbox.com/s/504hc3yd80hv4ux/honeybee.woff") format("woff"),url("//dl.dropbox.com/s/2f5jbp3v8tjk5hf/honeybee.ttf") format("truetype"),url("//dl.dropbox.com/s/nyfekn9fqo1wid2/honeybee.svg#honeybee") format("svg");font-weight: normal;font-style: normal;[/newclass]
[newclass=.th-constellation:before]content:"\e41d"; font-family:"honeybee";[/newclass]
[attr="class","wwgm_tracker"]
[attr="class","wwgm_contain"]
[attr="class","wwgm_header"]
firstname lastname
[attr="class","wwgm_threads"]
[attr="class","wwgm_thread_box"]
ongoing
[attr="class","wwgm_thread_list"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_box"]
complete
[attr="class","wwgm_thread_list"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_box"]
planned
[attr="class","wwgm_thread_list"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_thread_hover"]
[attr="class","wwgm_footer"]
bring your heroes to the wolves den and watch them all get crushed
[attr="class","th th-constellation"]
bring your heroes to the wolves den and watch them all get crushed
[attr="class","th th-constellation"]
[attr="class","wwgm_hover"]
[attr="class","wwgm_credit"]SELKIE
[newclass=.wwgm_tracker] --wwgm_accent:#A4447C; [/newclass]
[newclass=.wwgm_tracker] width:600px; height:400px; background:url(http://placehold.it/600x400.png); border-radius:5px; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; [/newclass]
[newclass=.wwgm_contain] display:flex; flex-flow:row wrap; align-items:center; justify-content:center; opacity:1; transition:.5s ease; position:relative [/newclass]
[newclass=.wwgm_hover] position:absolute; top:0px; width:600px; height:400px; transition:.5s ease; transition-delay:.75s; [/newclass]
[newclass=.wwgm_tracker:hover .wwgm_hover] animation: wwgm_wipe .5s ease; background-color:rgba(0,0,0,.5); transition:.5s ease; } @keyframes wwgm_wipe { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); }[/newclass]
[newclass=.wwgm_header] width:calc(100% - 20px); height:95px; padding:10px; background-color:#333; display:flex; align-items:center; justify-content:flex-start; position:relative; top:-115px; transition:.33s ease; z-index:1; transition-delay:.33s; [/newclass]
[newclass=.wwgm_tracker:hover .wwgm_header] top:0px; transition:.33s ease; transition-delay:.5s; [/newclass]
[newclass=.wwgm_header img] width:75px; height:75px; padding:5px; background-color:#fafafa; border:5px solid var(--wwgm_accent); border-radius:100%; [/newclass]
[newclass=.wwgm_header h1] margin:0px 0px 0px 25px; font:700 30px montserrat; text-transform:uppercase; color:#eee; [/newclass]
[newclass=.wwgm_threads] display:flex; width:600px; align-items:flex-start; justify-content:flex-start; [/newclass]
[newclass=.wwgm_thread_box] width:186.5px; height:186.5px; margin-top:10px; margin-left:10px; flex-shrink:0; background-color:#aaa; display:flex; align-items:center; justify-content:space-between; overflow:hidden; position:relative; z-index:1; opacity:0; transition:.33s ease; [/newclass]
[newclass=.wwgm_tracker:hover .wwgm_thread_box:nth-child(1)] opacity:1; transition:.33s ease; transition-delay:1s; [/newclass]
[newclass=.wwgm_tracker:hover .wwgm_thread_box:nth-child(2)] opacity:1; transition:.33s ease; transition-delay:1.33s; [/newclass]
[newclass=.wwgm_tracker:hover .wwgm_thread_box:nth-child(3)] opacity:1; transition:.33s ease; transition-delay:1.66s; [/newclass]
[newclass=.wwgm_thread_box h1] margin:0px; height:100%; width:25px; display:flex; align-items:center; justify-content:center; background-color:#333; color:#eee; font:600 8px/25px montserrat; text-transform:uppercase; [/newclass]
[newclass=.wwgm_thread_box h1 span] writing-mode: vertical-rl; [/newclass]
[newclass=.wwgm_thread_list] width:162px; height:187px; overflow:auto; background-color:#eee; [/newclass]
[newclass=.wwgm_thread_list::-webkit-scrollbar] width:0px; [/newclass]
[newclass=.wwgm_thread_hover] height:20px; margin:5px; background-color:#333; border-radius:5px; font:700 7px/20px roboto; overflow:hidden; text-transform:uppercase; color:#aaa; [/newclass]
[newclass=.wwgm_thread_title] margin-top:0px; transition:.33s ease; background-color:#333; [/newclass]
[newclass=.wwgm_thread_hover:hover .wwgm_thread_title] margin-top:-20px; transition:.33s ease; transition-delay:.75s; [/newclass]
[newclass=.wwgm_thread_title a] color:#fafafa; font:700 7px/20px roboto!important; [/newclass]
[newclass=.wwgm_footer] height:81px; width:calc(100% - 100px); padding:0px 50px; background-color:#333; color:#eee; font:600 10px roboto; text-transform:uppercase; margin-top:10px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; top:80px; transition:.33s ease; transition-delay:.33s; [/newclass]
[newclass=.wwgm_footer span] font-size:90px; color:var(--wwgm_accent); position:absolute; bottom:-15px; right:0px; text-shadow:-1px -1px 0 #eee, 1px -1px 0 #eee, -1px 1px 0 #eee, 1px 1px 0 #eee; [/newclass]
[newclass=.wwgm_tracker:hover .wwgm_footer] top:0px; transition:.33s ease; transition-delay:.5s; [/newclass]
[newclass=.wwgm_credit] font:700 7px roboto; margin-left:550px; [/newclass]
[newclass=.wwgm_credit a] font:700 7px roboto!important; [/newclass]
[newclass=.th]speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale } @font-face { font-family: "honeybee";src:url("//dl.dropbox.com/s/0l8lnm6qy7vzwn7/honeybee.eot");src:url("//dl.dropbox.com/s/0l8lnm6qy7vzwn7/honeybee.eot?#iefix") format("embedded-opentype"),url("//dl.dropbox.com/s/504hc3yd80hv4ux/honeybee.woff") format("woff"),url("//dl.dropbox.com/s/2f5jbp3v8tjk5hf/honeybee.ttf") format("truetype"),url("//dl.dropbox.com/s/nyfekn9fqo1wid2/honeybee.svg#honeybee") format("svg");font-weight: normal;font-style: normal;[/newclass]
[newclass=.th-constellation:before]content:"\e41d"; font-family:"honeybee";[/newclass]