Coffee journaling on ATProto (alpha)
alpha.arabica.social
coffee
feat: change coloring of inner cards
authored by
Patrick Dewey
and committed by
tangled.org
15ff0fe5
58a4b58d
+47
-26
+47
-26
static/css/app.css
+47
-26
static/css/app.css
···
90
90
--type-grinder: #78716c;
91
91
--type-brewer: #5b6e4e;
92
92
93
-
/* Type background tints (subtle card wash) */
94
-
--type-brew-tint: rgba(107, 68, 35, 0.04);
95
-
--type-bean-tint: rgba(180, 83, 9, 0.04);
96
-
--type-recipe-tint: rgba(160, 82, 45, 0.04);
97
-
--type-roaster-tint: rgba(146, 64, 14, 0.04);
98
-
--type-grinder-tint: rgba(120, 113, 108, 0.04);
99
-
--type-brewer-tint: rgba(91, 110, 78, 0.04);
93
+
/* Type background tints */
94
+
--type-brew-tint: rgba(107, 68, 35, 0.08);
95
+
--type-bean-tint: rgba(180, 83, 9, 0.07);
96
+
--type-recipe-tint: rgba(160, 82, 45, 0.07);
97
+
--type-roaster-tint: rgba(146, 64, 14, 0.07);
98
+
--type-grinder-tint: rgba(120, 113, 108, 0.06);
99
+
--type-brewer-tint: rgba(91, 110, 78, 0.07);
100
100
101
101
/* Rating badges */
102
102
--rating-bg: #fef3c7;
···
188
188
--type-grinder: #a8a29e;
189
189
--type-brewer: #8ba37a;
190
190
191
-
/* Type background tints (slightly stronger on dark) */
192
-
--type-brew-tint: rgba(166, 124, 82, 0.06);
193
-
--type-bean-tint: rgba(217, 119, 6, 0.06);
194
-
--type-recipe-tint: rgba(196, 114, 74, 0.06);
195
-
--type-roaster-tint: rgba(194, 97, 14, 0.06);
196
-
--type-grinder-tint: rgba(168, 162, 158, 0.06);
197
-
--type-brewer-tint: rgba(139, 163, 122, 0.06);
191
+
/* Type background tints */
192
+
--type-brew-tint: rgba(166, 124, 82, 0.10);
193
+
--type-bean-tint: rgba(217, 119, 6, 0.09);
194
+
--type-recipe-tint: rgba(196, 114, 74, 0.09);
195
+
--type-roaster-tint: rgba(194, 97, 14, 0.09);
196
+
--type-grinder-tint: rgba(168, 162, 158, 0.08);
197
+
--type-brewer-tint: rgba(139, 163, 122, 0.09);
198
198
199
199
/* Rating badges */
200
200
--rating-bg: rgba(251, 191, 36, 0.15);
···
327
327
--type-roaster: #c2610e;
328
328
--type-grinder: #a8a29e;
329
329
--type-brewer: #8ba37a;
330
-
--type-brew-tint: rgba(166, 124, 82, 0.06);
331
-
--type-bean-tint: rgba(217, 119, 6, 0.06);
332
-
--type-recipe-tint: rgba(196, 114, 74, 0.06);
333
-
--type-roaster-tint: rgba(194, 97, 14, 0.06);
334
-
--type-grinder-tint: rgba(168, 162, 158, 0.06);
335
-
--type-brewer-tint: rgba(139, 163, 122, 0.06);
330
+
--type-brew-tint: rgba(166, 124, 82, 0.10);
331
+
--type-bean-tint: rgba(217, 119, 6, 0.09);
332
+
--type-recipe-tint: rgba(196, 114, 74, 0.09);
333
+
--type-roaster-tint: rgba(194, 97, 14, 0.09);
334
+
--type-grinder-tint: rgba(168, 162, 158, 0.08);
335
+
--type-brewer-tint: rgba(139, 163, 122, 0.09);
336
336
--rating-bg: rgba(251, 191, 36, 0.15);
337
337
--rating-text: #fbbf24;
338
338
--alert-warning-bg: rgba(251, 191, 36, 0.08);
···
801
801
box-shadow: var(--shadow-md);
802
802
}
803
803
804
-
/* Feed card type tints — subtle background wash per record type */
804
+
/* Feed card type tints — outer card gets full tint */
805
805
.feed-card-brew {
806
806
background: linear-gradient(var(--type-brew-tint), var(--type-brew-tint)), var(--card-bg);
807
807
}
808
-
809
808
.feed-card-bean {
810
809
background: linear-gradient(var(--type-bean-tint), var(--type-bean-tint)), var(--card-bg);
811
810
}
812
-
813
811
.feed-card-recipe {
814
812
background: linear-gradient(var(--type-recipe-tint), var(--type-recipe-tint)), var(--card-bg);
815
813
}
816
-
817
814
.feed-card-roaster {
818
815
background: linear-gradient(var(--type-roaster-tint), var(--type-roaster-tint)), var(--card-bg);
819
816
}
820
-
821
817
.feed-card-grinder {
822
818
background: linear-gradient(var(--type-grinder-tint), var(--type-grinder-tint)), var(--card-bg);
823
819
}
824
-
825
820
.feed-card-brewer {
826
821
background: linear-gradient(var(--type-brewer-tint), var(--type-brewer-tint)), var(--card-bg);
822
+
}
823
+
824
+
/* Inner content boxes inside tinted cards — deeper shade of the same tint */
825
+
.feed-card-brew .feed-content-box,
826
+
.feed-card-brew .feed-content-box-sm {
827
+
background: linear-gradient(rgba(107, 68, 35, 0.06), rgba(107, 68, 35, 0.06)), var(--card-bg);
828
+
}
829
+
.feed-card-bean .feed-content-box,
830
+
.feed-card-bean .feed-content-box-sm {
831
+
background: linear-gradient(rgba(180, 83, 9, 0.05), rgba(180, 83, 9, 0.05)), var(--card-bg);
832
+
}
833
+
.feed-card-recipe .feed-content-box,
834
+
.feed-card-recipe .feed-content-box-sm {
835
+
background: linear-gradient(rgba(160, 82, 45, 0.05), rgba(160, 82, 45, 0.05)), var(--card-bg);
836
+
}
837
+
.feed-card-roaster .feed-content-box,
838
+
.feed-card-roaster .feed-content-box-sm {
839
+
background: linear-gradient(rgba(146, 64, 14, 0.05), rgba(146, 64, 14, 0.05)), var(--card-bg);
840
+
}
841
+
.feed-card-grinder .feed-content-box,
842
+
.feed-card-grinder .feed-content-box-sm {
843
+
background: linear-gradient(rgba(120, 113, 108, 0.05), rgba(120, 113, 108, 0.05)), var(--card-bg);
844
+
}
845
+
.feed-card-brewer .feed-content-box,
846
+
.feed-card-brewer .feed-content-box-sm {
847
+
background: linear-gradient(rgba(91, 110, 78, 0.05), rgba(91, 110, 78, 0.05)), var(--card-bg);
827
848
}
828
849
829
850
/* Type badges — inline pill with icon + label */