Personal Site
Focus outline tweaks
+18
-3
+18
-3
src/components/home/feeds/Feeds.astro
+18
-3
src/components/home/feeds/Feeds.astro
···
85
85
overflow-x: auto;
86
86
scrollbar-width: none;
87
87
88
+
border-bottom: 2px solid green;
89
+
88
90
label {
89
91
display: grid;
90
92
grid-template: "icon text" 1fr / auto auto;
···
93
95
margin: 2.5px;
94
96
padding: 2.5px;
95
97
96
-
&:has(:checked) {
97
-
border-bottom: 5px solid blue;
98
+
position: relative;
99
+
padding-bottom: 5px;
100
+
&::after {
101
+
content: "";
102
+
width: 100%;
103
+
height: 5px;
104
+
display: block;
105
+
106
+
position: absolute;
107
+
bottom: 0;
108
+
left: 0;
109
+
}
110
+
111
+
&:has(:checked)::after {
112
+
background-color: blue;
98
113
}
99
114
100
115
&:focus-within {
101
-
border: 1px solid red;
116
+
outline: 1px solid red;
102
117
}
103
118
104
119
img,