recipe tracker test

[nospaces][googlefont=Montserrat:300,700,800|Roboto:400,400i,700]


[newclass=.ltloTrack] --ltloAccent:#353b42!important; --ltloBorder:#000000!important; [/newclass]

[attr="class","ltloTrack"]

[attr="class","ltloHeader"]

bruce's tracker

[attr="class","ltloBody"]

active

title

with whoever

complete

[attr="class","ltloCredit"]SELKIE

[newclass=.ltloTrack] width:500px; height:700px; background-color:#fcfcfc; display:flex; flex-flow:row wrap; border-radius:5px; border:1px solid #ddd; overflow:auto; [/newclass]
[newclass=.ltloTrack::-webkit-scrollbar] width:0px; [/newclass]
[newclass=.ltloHeader] width:100%; height:150px; position:relative; overflow:hidden; background-color:#aaa; background-color:var(--ltloAccent); display:flex; align-items:center; justify-content:space-between; [/newclass]
[newclass=.ltloHeader img] width:200px; height:200px; border-radius:100%; padding:10px; margin-left:25px; background-color:#fafafa; border:25px solid #ccc; border:25px solid var(--ltloBorder); [/newclass]
[newclass=.ltloHeader div:nth-child(2)] width:270px; height:270px; margin-left:24px; border:1px solid transparent; border-bottom:1px solid #fff; border-radius:100%; position:absolute; animation:spinner 1.5s linear infinite; animation-play-state: paused; } @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } [/newclass]
[newclass=.ltloTrack:hover .ltloHeader div:nth-child(2)] animation-play-state: running; [/newclass]
[newclass=.ltloHeader span] margin:0px 0px 0px 25px; font:300 32px/32px montserrat; text-align:left; color:#fafafa; [/newclass]
[newclass=.ltloBody] width: 100%; padding:25px; position:relative; display:flex; flex-flow:row wrap; [/newclass]
[newclass=.ltloBody div] display:flex; width:500px; background-color:#; text-align:left; [/newclass]
[newclass=.ltloBody div div] background-color:#; padding:10px 10px 10px 25px; display:flex; flex-flow:column nowrap; [/newclass]
[newclass=.ltloBody div h1] margin:0px; font:300 20px montserrat; color:#ccc; [/newclass]
[newclass=.ltloBody div h1 a] color:var(--ltloAccent); font:300 20px montserrat!important;[/newclass]
[newclass=.ltloBody div h2] margin:10px; padding:0px 10px; font:400 10px roboto; color:#bbb; text-transform:uppercase; border-left:1px solid #ddd; border-right:1px solid #ddd; text-align:justify; [/newclass]
[newclass=.ltloBody div h2 a] font:400 10px roboto; [/newclass]
[newclass=.ltloBody h3] margin:0px; margin-top:auto; font:700 48px/48px montserrat; writing-mode: vertical-rl; margin-left:-35px; color:#ccc; opacity:.25; align-self:flex-start; cursor:default; [/newclass]
[newclass=.ltloCredit] font:bold 7px roboto; margin-left:450px; [/newclass]
[newclass=.ltloCredit a] font:bold 7px roboto!important; [/newclass]