diff options
author | Kristóf Marussy <kristof@marussy.com> | 2024-08-18 22:52:24 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2024-08-19 16:08:10 +0200 |
commit | 0ffaa72c5b2172aded5e24cd6c935b3304e68383 (patch) | |
tree | 5f268c3042af518337da31c280d8ea387fa08bd4 /src/components/landing/sections/Contact.module.css | |
parent | Improve landing page accessibility (diff) | |
download | blog-0ffaa72c5b2172aded5e24cd6c935b3304e68383.tar.gz blog-0ffaa72c5b2172aded5e24cd6c935b3304e68383.tar.zst blog-0ffaa72c5b2172aded5e24cd6c935b3304e68383.zip |
Diffstat (limited to 'src/components/landing/sections/Contact.module.css')
-rw-r--r-- | src/components/landing/sections/Contact.module.css | 38 |
1 files changed, 36 insertions, 2 deletions
diff --git a/src/components/landing/sections/Contact.module.css b/src/components/landing/sections/Contact.module.css index 7b64a5e..d93488f 100644 --- a/src/components/landing/sections/Contact.module.css +++ b/src/components/landing/sections/Contact.module.css | |||
@@ -143,8 +143,10 @@ | |||
143 | } | 143 | } |
144 | 144 | ||
145 | .small__icon { | 145 | .small__icon { |
146 | height: 1.5rem; | 146 | height: 2rem; |
147 | width: 1.5rem; | 147 | width: 2rem; |
148 | padding: 0.25rem; | ||
149 | margin: -0.25rem; | ||
148 | } | 150 | } |
149 | 151 | ||
150 | .photo__container { | 152 | .photo__container { |
@@ -180,3 +182,35 @@ | |||
180 | transform: none !important; | 182 | transform: none !important; |
181 | } | 183 | } |
182 | } | 184 | } |
185 | |||
186 | @media (forced-colors: active) { | ||
187 | .contact__icon-holder { | ||
188 | border: 2px solid ButtonBorder; | ||
189 | background: ButtonFace; | ||
190 | transition: none; | ||
191 | } | ||
192 | |||
193 | .contact__icon { | ||
194 | color: ButtonText; | ||
195 | transition: none; | ||
196 | } | ||
197 | |||
198 | .contact:not(:has(.contact__action:hover)):hover .contact__icon-holder, | ||
199 | .contact:focus-within:not(:has(.contact__action:focus)) .contact__icon-holder, | ||
200 | .contact:has(.contact__action--alternate:hover) .contact__icon-holder, | ||
201 | .contact:has(.contact__action--alternate:focus) .contact__icon-holder { | ||
202 | background: Highlight; | ||
203 | } | ||
204 | |||
205 | .contact:not(:has(.contact__action:hover)):hover .contact__icon, | ||
206 | .contact:focus-within:not(:has(.contact__action:focus)) .contact__icon, | ||
207 | .contact__icon--alternate { | ||
208 | color: HighlightText; | ||
209 | } | ||
210 | |||
211 | .small__link:hover .small__icon, | ||
212 | .small__link:focus .small__icon { | ||
213 | background: Highlight; | ||
214 | color: HighlightText; | ||
215 | } | ||
216 | } | ||