Skip to content

Commit 723e6d9

Browse files
jorgemanrubiajorgemanrubia
committed
Rename bubbles => cards
1 parent e86b266 commit 723e6d9

File tree

333 files changed

+2939
-2747
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

333 files changed

+2939
-2747
lines changed

‎app/assets/images/bubble-add.svg‎ renamed to ‎app/assets/images/card-add.svg‎

File renamed without changes.

‎app/assets/images/bubbles.svg‎ renamed to ‎app/assets/images/cards.svg‎

File renamed without changes.

‎app/assets/images/pop.svg‎ renamed to ‎app/assets/images/closure.svg‎

File renamed without changes.

‎app/assets/stylesheets/animation.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
}
3939

4040
@keyframes wobble {
41-
0% { transform: rotate(calc(var(--bubble-rotate) + 90deg)); }
41+
0% { transform: rotate(calc(var(--card-rotate) + 90deg)); }
4242
15% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
4343
25% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }
4444
33% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; }
@@ -47,7 +47,7 @@
4747
}
4848

4949
@keyframes wobble-alt {
50-
0% { transform: rotate(calc(var(--bubble-rotate) + -90deg)); }
50+
0% { transform: rotate(calc(var(--card-rotate) + -90deg)); }
5151
12% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
5252
25% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
5353
33% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }

‎app/assets/stylesheets/bubbles.css‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
}
2121
}
2222

23-
.bubble {
23+
.something-to-rename {
2424
--bubble-background: radial-gradient(circle at center, color(from var(--bubble-color) srgb r g b / 0.25), color(from var(--bubble-color) srgb r g b / 0.05));
2525
--bubble-border-width: 0.2rem;
2626
--hover-size: 0;
@@ -110,15 +110,15 @@
110110
}
111111

112112
@media (hover: hover) {
113-
.bubbles .bubble:not(.popped):hover & {
113+
.bubbles .something-to-rename:not(.popped):hover & {
114114
transform: translate(0, -1rem);
115115
}
116116

117-
.bubbles .bubble:not(.popped):hover & + & {
117+
.bubbles .something-to-rename:not(.popped):hover & + & {
118118
transform: translate(1rem, -1rem);
119119
}
120120

121-
.bubbles .bubble:not(.popped):hover & + & + & {
121+
.bubbles .something-to-rename:not(.popped):hover & + & + & {
122122
transform: translate(1.5rem, -0.5rem);;
123123
}
124124
}
@@ -176,7 +176,7 @@
176176
}
177177

178178
@media (hover: hover) {
179-
.bubbles .bubble:not(.popped):hover & {
179+
.bubbles .something-to-rename:not(.popped):hover & {
180180
transform: translate(-0.5rem, -2rem);
181181
}
182182
}
@@ -195,22 +195,22 @@
195195
}
196196

197197
@media (hover: hover) {
198-
.bubbles .bubble:not(.popped):hover & {
198+
.bubbles .something-to-rename:not(.popped):hover & {
199199
transform: rotate(calc(var(--rotation) + var(--bubble-shift) * 1)) translate(0rem, 0.5rem);
200200
}
201201
}
202202
}
203203

204204
@media (hover: hover) {
205-
.bubbles .bubble:not(.popped):hover & {
205+
.bubbles .something-to-rename:not(.popped):hover & {
206206
transform: translate(1rem, 1rem);
207207
}
208208

209-
.bubbles .bubble:not(.popped):hover & + & {
209+
.bubbles .something-to-rename:not(.popped):hover & + & {
210210
transform: translate(0, -1rem);
211211
}
212212

213-
.bubbles .bubble:not(.popped):hover & + & + & {
213+
.bubbles .something-to-rename:not(.popped):hover & + & + & {
214214
transform: translate(-1rem, -1rem);
215215
}
216216
}
@@ -227,7 +227,7 @@
227227
transition: 0.2s ease;
228228

229229
@media (hover: hover) {
230-
.bubbles .bubble:not(.popped):hover & {
230+
.bubbles .something-to-rename:not(.popped):hover & {
231231
transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift))) scale(0.9);
232232
}
233233
}
@@ -273,7 +273,7 @@
273273
margin-inline: var(--tray-size);
274274
}
275275

276-
.bubble {
276+
.something-to-rename {
277277
order: 0;
278278
}
279279

@@ -379,22 +379,22 @@
379379
}
380380
}
381381

382-
textarea {
383-
--input-color: var(--bubble-color);
384-
--input-border-radius: 0;
382+
/*textarea {*/
383+
/* --input-color: var(--bubble-color);*/
384+
/* --input-border-radius: 0;*/
385385

386-
font-size: 9cqi;
387-
font-weight: 800;
388-
line-height: 1.2;
386+
/* font-size: 9cqi;*/
387+
/* font-weight: 800;*/
388+
/* line-height: 1.2;*/
389389

390-
&::selection {
391-
background-color: var(--bubble-color);
392-
color: var(--color-ink-reversed);
393-
}
394-
}
390+
/* &::selection {*/
391+
/* background-color: var(--bubble-color);*/
392+
/* color: var(--color-ink-reversed);*/
393+
/* }*/
394+
/*}*/
395395

396396
@media (hover: hover) {
397-
.bubble:has(.bubble__image img:not([src=""])):hover & {
397+
.something-to-rename:has(.bubble__image img:not([src=""])):hover & {
398398
color: var(--color-ink-reversed);
399399
text-shadow: 0 0 0.2em var(--bubble-color), 0 0 0.2em var(--bubble-color), 0 0 0.2em var(--bubble-color);
400400
position: relative;
@@ -422,7 +422,7 @@
422422
--bubble-border-color: color-mix(in srgb, var(--bubble-color) 30%, var(--color-bg));
423423
}
424424

425-
.bubble & {
425+
.something-to-rename & {
426426
--bubble-size: 100%;
427427
}
428428

‎app/assets/stylesheets/cards.css‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
padding: calc(var(--block-space) * 1.5) var(--block-space);
3030
margin: var(--block-space) auto calc(var(--block-space) * 1.5);
3131

32-
.card__title {
32+
.something-to-rename__title {
3333
margin-block-start: 0.1em;
3434
min-block-size: 0;
3535
}
@@ -52,7 +52,7 @@
5252
margin-block-start: -0.2em;
5353
}
5454

55-
.card__tags {
55+
.something-to-rename__tags {
5656
font-size: var(--text-small);
5757
}
5858
}
@@ -78,8 +78,8 @@
7878
--border-size: 0;
7979

8080
aspect-ratio: 2/0.95;
81-
background-color: color-mix(in srgb, var(--bubble-color) 4%, var(--color-bg));
82-
color: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink));
81+
background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-bg));
82+
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
8383
max-inline-size: 75ch;
8484
z-index: 1;
8585

@@ -111,11 +111,11 @@
111111
inset: var(--actions-block-inset) calc(var(--actions-inline-inset) * -1) auto auto;
112112
}
113113

114-
.card__actions-container {
114+
.something-to-rename__actions-container {
115115
--border-radius: 1em;
116-
116+
117117
background-color: var(--color-bg);
118-
color: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink));
118+
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
119119
margin-block: calc(var(--block-space) * -1.66) calc(var(--block-space) * 1.66);
120120
padding: calc(var(--block-space) * 0.66) calc(var(--inline-space) * 1.5);
121121
position: relative;
@@ -126,18 +126,18 @@
126126
}
127127

128128
.btn:not(.popup__item, .btn--plain) {
129-
--btn-background: var(--bubble-color);
129+
--btn-background: var(--card-color);
130130
--btn-color: var(--color-ink-reversed);
131131
}
132132

133133
.btn--plain {
134-
--btn-color: var(--bubble-color);
134+
--btn-color: var(--card-color);
135135

136136
text-decoration: underline;
137137
}
138138

139-
.bubble__pop-message {
140-
color: var(--bubble-color);
139+
.something-to-rename__closure-message {
140+
color: var(--card-color);
141141
}
142142
}
143143

@@ -152,7 +152,7 @@
152152
}
153153

154154
.switch__input:checked + .switch__btn {
155-
background-color: var(--bubble-color) !important;
155+
background-color: var(--card-color) !important;
156156
}
157157

158158
strong {
@@ -203,14 +203,14 @@
203203
padding-block: var(--block-space);
204204
}
205205

206-
.card__bucket {
207-
background-color: var(--bubble-color);
206+
.card__collection {
207+
background-color: var(--card-color);
208208
font-weight: 800;
209209
letter-spacing: 0.5ch;
210210
padding: var(--block-space-half) var(--inline-space-double);
211211
}
212212

213-
.card-bucket__filter {
213+
.card-collection__filter {
214214
> button {
215215
--hover-size: 0;
216216
}
@@ -244,7 +244,7 @@
244244
--padding-inline: calc(var(--block-space-double) + var(--block-space));
245245
--padding-block: var(--block-space-double) calc(var(--block-space-double) + var(--block-space-half));
246246

247-
background-color: color-mix(in srgb, var(--bubble-color) 33%, var(--color-bg));
247+
background-color: color-mix(in srgb, var(--card-color) 33%, var(--color-bg));
248248
border-radius: 0.2em;
249249
display: inline-flex;
250250
margin-block: calc(var(--block-space) * -1) calc(var(--block-space) * -0.33);
@@ -374,7 +374,7 @@
374374
}
375375
}
376376

377-
.card__link {
377+
.something-to-rename__link {
378378
--hover-size: 0;
379379

380380
content: "";
@@ -389,7 +389,7 @@
389389
}
390390

391391
.card__meta {
392-
--border-color: var(--bubble-color);
392+
--border-color: var(--card-color);
393393
--border-size: 1px;
394394
--row-gap: 0.25em;
395395

@@ -405,7 +405,7 @@
405405
}
406406

407407
.card__move-button {
408-
--btn-background: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink));
408+
--btn-background: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
409409

410410
margin-block-start: calc(var(--block-space) * 1.2);
411411
margin-inline-end: calc(var(--inline-space) * -4);
@@ -416,16 +416,16 @@
416416
flex: 1 1 25%;
417417
}
418418

419-
.card__tag {
420-
color: var(--bubble-color);
419+
.something-to-rename__tag {
420+
color: var(--card-color);
421421
font-weight: 700;
422422
}
423423

424-
.card__tags {
425-
color: var(--bubble-color);
424+
.something-to-rename__tags {
425+
color: var(--card-color);
426426
}
427427

428-
.card__title {
428+
.something-to-rename__title {
429429
--hover-size: 0;
430430
--input-border-radius: 0;
431431

@@ -498,10 +498,10 @@
498498
}
499499
}
500500

501-
.card__popped {
501+
.card__closed {
502502
align-items: center;
503503
aspect-ratio: 7/4;
504-
border: var(--block-space-half) solid var(--bubble-color);
504+
border: var(--block-space-half) solid var(--card-color);
505505
position: absolute;
506506
inset: auto var(--block-space) var(--block-space-double) auto;
507507
justify-content: space-between;
@@ -510,18 +510,18 @@
510510
z-index: -1;
511511
}
512512

513-
.card__popped-by {
513+
.card__closed-by {
514514
border-block-end: 1px dashed currentcolor;
515515
}
516516

517-
.card__popped-title {
517+
.card__closed-title {
518518
color: var(--color-ink-reversed);
519519
font-size: var(--text-rel-large);
520520
font-weight: 900;
521521
text-shadow:
522-
-2px -2px 0 var(--bubble-color),
523-
2px -2px 0 var(--bubble-color),
524-
-2px 2px 0 var(--bubble-color),
525-
2px 2px 0 var(--bubble-color);
522+
-2px -2px 0 var(--card-color),
523+
2px -2px 0 var(--card-color),
524+
-2px 2px 0 var(--card-color),
525+
2px 2px 0 var(--card-color);
526526
}
527527
}

‎app/assets/stylesheets/popup.css‎ renamed to ‎app/assets/stylesheets/closureup.css‎

File renamed without changes.

‎app/assets/stylesheets/buckets.css‎ renamed to ‎app/assets/stylesheets/collections.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@layer components {
2-
.bucket {
2+
.collection {
33
inline-size: min(35ch, 40%);
44
line-height: 1.2;
55

@@ -10,7 +10,7 @@
1010
}
1111
}
1212

13-
.buckets {
13+
.collections {
1414
--gap: 2cqi;
1515
--hover-size: 0;
1616
--column-gap: var(--gap);
@@ -20,20 +20,20 @@
2020
padding: var(--gap);
2121
}
2222

23-
.bucket__button {
23+
.collection__button {
2424
position: absolute;
2525
inset: calc((var(--btn-size) * -1) - 2cqi) 1cqi auto auto;
2626
}
2727

28-
.bucket__bubbles {
28+
.collection__cards {
2929
--border-radius: 1.5em;
3030

3131
margin-block: 0;
3232
max-inline-size: 100%;
3333
padding: 1cqi;
3434
}
3535

36-
.bubbles__container {
36+
.cards__container {
3737
aspect-ratio: 18 / 9;
3838
container-type: inline-size;
3939
}

‎app/assets/stylesheets/color-picker.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.color-picker {
2-
--panel-border-color: var(--bubble-color);
2+
--panel-border-color: var(--card-color);
33
--panel-border-radius: 2em;
44
--panel-border-size: 2px;
55
--panel-padding: 0.5em 0.7em;

‎app/assets/stylesheets/events.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
}
8787

8888
.event--related {
89-
--hover-color: var(--bubble-color);
89+
--hover-color: var(--card-color);
9090
--hover-size: 0.15rem;
9191

9292
box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
@@ -138,7 +138,7 @@
138138

139139
.event__icon {
140140
aspect-ratio: 1;
141-
background-color: var(--bubble-color);
141+
background-color: var(--card-color);
142142
block-size: 1.7em;
143143
border-radius: 1.7em;
144144
inline-size: 1.7em;

0 commit comments

Comments
 (0)