Something went wrong. Try again.
Tea journaling on ATProto (alpha)
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244/* Feed Components — Sticky Notes on Corkboard */.feed-card { background-color: var(--feed-card-bg); border: none; border-radius: 0.25rem; padding: 0.75rem; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; transition-duration: 200ms; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); break-inside: avoid; overflow: hidden;}
@media (min-width: 640px) { .feed-card { padding: 1rem; }}
.feed-card:hover { box-shadow: var(--shadow-md);}
/* Sticky-note rotation only inside the feed pinboard. Uses the independent `rotate` property so it doesn't conflict with the fade-in-slide-up animation's `transform`. */@media (min-width: 768px) { .feed-grid .feed-card { rotate: var(--card-rotate, 0deg); backface-visibility: hidden; }
.feed-grid .feed-card:hover { /* var(... , 0deg) form prevents Lightning CSS (v4's bundled minifier) from dead-stripping `rotate: 0deg` as an initial value. Without this, the minified output drops the un-tilt on hover and the cards stay rotated. */ rotate: var(--feed-card-hover-rotate, 0deg); transform: translateY(-2px); }
/* --card-rotate values are assigned per-card via JS in feed-masonry.js */}
/* Brew cards — the main sticky note, slightly larger presence */.feed-card-brew { background-color: var(--feed-card-bg); background-image: linear-gradient( var(--type-brew-tint), var(--type-brew-tint) ); border-radius: 0.25rem; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);}
.feed-card-brew:hover { box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);}
/* Compact cards — equipment and roasters */.feed-card-compact { padding: 0.625rem; border-radius: 0.5rem;}
/* Feed card type tints — colored sticky notes */.feed-card-bean { background-color: var(--feed-card-bg); background-image: linear-gradient( var(--type-bean-tint), var(--type-bean-tint) );}.feed-card-recipe { background-color: var(--feed-card-bg); background-image: linear-gradient( var(--type-recipe-tint), var(--type-recipe-tint) );}.feed-card-roaster { background-color: var(--feed-card-bg); background-image: linear-gradient( var(--type-roaster-tint), var(--type-roaster-tint) );}.feed-card-grinder { background-color: var(--feed-card-bg); background-image: linear-gradient( var(--type-grinder-tint), var(--type-grinder-tint) );}.feed-card-brewer { background-color: var(--feed-card-bg); background-image: linear-gradient( var(--type-brewer-tint), var(--type-brewer-tint) );}
/* Feed grid layout — starts as normal grid, JS adds masonry class for tight packing */.feed-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; overflow: hidden; background-image: var(--texture-cork); background-color: var(--feed-board-bg); border-radius: 0.75rem; padding: 0.75rem; border: 1px solid var(--feed-board-border); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.12);}@media (min-width: 640px) { .feed-grid { padding: 1.25rem; }}
.feed-masonry-col { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0;}
@media (min-width: 768px) { .feed-grid { grid-template-columns: repeat(2, 1fr); column-gap: 1.25rem; row-gap: 1.25rem; }
.feed-masonry-col { gap: 1.25rem; }}
/* Brew cards get extra presence without spanning columns */.feed-card-brew { padding: 1rem;}@media (min-width: 640px) { .feed-card-brew { padding: 1.25rem; }}
/* Inner content boxes inside tinted cards — blend with outer card */.feed-card .feed-content-box,.feed-card .feed-content-box-sm { background: transparent;}
/* Type badges — inline pill with icon + label */.type-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding-left: 0.375rem; padding-right: 0.375rem; padding-top: 0.125rem; padding-bottom: 0.125rem; border-radius: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; border: 1px solid currentColor; opacity: 0.8;}
.type-badge svg { color: inherit; width: 0.75rem; height: 0.75rem;}
.type-badge-brew { color: var(--type-brew);}.type-badge-bean { color: var(--type-bean);}.type-badge-recipe { color: var(--type-recipe);}.type-badge-roaster { color: var(--type-roaster);}.type-badge-grinder { color: var(--type-grinder);}.type-badge-brewer { color: var(--type-brewer);}
/* Entity card type dot — small colored indicator in card headers */.entity-card-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0;}
.entity-card-dot-bean { background: var(--type-bean);}.entity-card-dot-roaster { background: var(--type-roaster);}.entity-card-dot-grinder { background: var(--type-grinder);}.entity-card-dot-brewer { background: var(--type-brewer);}.entity-card-dot-recipe { background: var(--type-recipe);}
.feed-content-box { background: var(--surface-bg); border-radius: 0.5rem; padding: 0.75rem;}
.feed-content-box-sm { background: var(--surface-bg); border-radius: 0.5rem; padding: 0.5rem;}