Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit edb56e0

Browse files
committedFeb 9, 2025··
feat: improve styling
1 parent 780b9f0 commit edb56e0

File tree

1 file changed

+30
-19
lines changed

1 file changed

+30
-19
lines changed
 

‎website/src/catalog/RuleItem.vue

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,14 @@ const moreFeatures = computed(() => Math.max(meta.features.length - 2, 0))
2222
<div class="rule-header">
2323
<a :href="meta.link" class="rule-name" target="_blank">{{ meta.name }}</a>
2424
<div class="rule-badges">
25-
<a :href="`/catalog/${meta.language}/`">
26-
<Badge type="info" :text="languages[meta.language]" />
27-
</a>
28-
<Badge v-if="meta.hasFix" type="tip" text="🛠️ Fix" />
25+
<Badge type="info">
26+
<a :href="`/catalog/${meta.language}/`" class="override-badge-text-color" target="_blank">
27+
{{ languages[meta.language] }}
28+
</a>
29+
</Badge>
30+
<Badge v-if="meta.hasFix" type="tip">
31+
<span class="override-badge-text-color">🛠️ Fix</span>
32+
</Badge>
2933
</div>
3034
</div>
3135
<div class="rule-details">
@@ -50,7 +54,7 @@ const moreFeatures = computed(() => Math.max(meta.features.length - 2, 0))
5054
+{{ moreFeatures }}
5155
</code>
5256
</div>
53-
<a :href="meta.playgroundLink" class="playground-link" target="_blank">
57+
<a :href="meta.playgroundLink" class="link playground" target="_blank">
5458
Try in Playground →
5559
</a>
5660
</div>
@@ -64,6 +68,27 @@ a {
6468
a:hover {
6569
text-decoration: underline;
6670
}
71+
.override-badge-text-color {
72+
color: var(--vp-c-text-1);
73+
}
74+
.override-badge-text-color:hover {
75+
color: var(--vp-c-text-1);
76+
}
77+
78+
.link {
79+
filter: brightness(1.3);
80+
color: var(--vp-button-brand-bg);
81+
}
82+
.link:hover {
83+
color: var(--vp-button-brand-bg);
84+
filter: brightness(1.5);
85+
}
86+
.rule-name {
87+
font-weight: 600;
88+
}
89+
.playground {
90+
font-size: 0.8em;
91+
}
6792
.rule-item {
6893
border: 1px solid var(--vp-c-divider);
6994
border-radius: 8px;
@@ -76,10 +101,6 @@ a:hover {
76101
margin-bottom: 12px;
77102
}
78103
79-
.rule-name {
80-
font-weight: 600;
81-
}
82-
83104
.rule-badges {
84105
display: flex;
85106
gap: 4px;
@@ -102,16 +123,6 @@ a:hover {
102123
line-height: 24px;
103124
padding-top: 0;
104125
}
105-
106-
.playground-link {
107-
font-size: 0.8em;
108-
color: var(--vp-button-brand-bg);
109-
filter: brightness(1.1);
110-
}
111-
.playground-link:hover {
112-
color: var(--vp-button-brand-bg);
113-
filter: brightness(1.35);
114-
}
115126
.emoji-offset {
116127
/* Offset emoji visual spacing */
117128
margin-right: -2px;

0 commit comments

Comments
 (0)
Please sign in to comment.