Personal Site
Add simple tab styles
+49
-2
+49
-2
src/components/home/feeds/Feeds.astro
+49
-2
src/components/home/feeds/Feeds.astro
···
23
23
---
24
24
25
25
<section class="feeds">
26
-
<div id="tab-container">
26
+
<!-- tabindex -1 disables tabbing onto this element
27
+
tabbing is disabled because when the element overflows its focusable
28
+
to scrub across children etc. which is a logical default
29
+
but in this case is annoying as scrubbing is already possible via the tabs
30
+
-->
31
+
<div id="tab-container" tabindex="-1">
27
32
{
28
33
tabs.map((tab, i) => (
29
34
<label>
···
39
44
) : (
40
45
<tab.icon />
41
46
))}
42
-
{tab.label}
47
+
<span class="label">{tab.label}</span>
43
48
</label>
44
49
))
45
50
}
···
71
76
<style>
72
77
.tab {
73
78
display: none;
79
+
}
80
+
81
+
#tab-container {
82
+
display: flex;
83
+
flex-direction: row;
84
+
gap: 10px;
85
+
overflow-x: auto;
86
+
scrollbar-width: none;
87
+
88
+
label {
89
+
display: grid;
90
+
grid-template: "icon text" 1fr / auto auto;
91
+
flex-direction: row;
92
+
gap: 2.5px;
93
+
margin: 2.5px;
94
+
padding: 2.5px;
95
+
96
+
&:has(:checked) {
97
+
border-bottom: 5px solid blue;
98
+
}
99
+
100
+
&:focus-within {
101
+
border: 1px solid red;
102
+
}
103
+
104
+
img,
105
+
svg {
106
+
width: 24px;
107
+
height: 24px;
108
+
grid-area: icon;
109
+
}
110
+
111
+
.label {
112
+
grid-area: text;
113
+
}
114
+
115
+
input {
116
+
/* visually hide it but dont remove from dom/accessibility tree for focus */
117
+
opacity: 0;
118
+
grid-area: icon;
119
+
}
120
+
}
74
121
}
75
122
</style>