MichaelBradley/website
MichaelBradley/website
1
0
Fork 0
Code Issues Pull requests Activity Actions

Improve shrinking stability

Browse source
This commit is contained in:
Michael Bradley 2025-02-21 02:48:48 -05:00
parent a49e2253d6
commit a85a91a701
Signed by: MichaelBradley
SSH key fingerprint: SHA256:cj/YZ5VT+QOKncqSkx+ibKTIn0Obg7OIzwzl9BL8EO8
2 changed files with 11 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/Body/Links.tsx
View file

@ -10,7 +10,7 @@ type ImageLinkProps = {
};
const ImageLink = ({ href, title, Image }: ImageLinkProps) => (
<a rel="me" href={href} title={title}>
<a rel="me" href={href} title={title} className="footerAction">
<Image width="100%" />
</a>
);
@ -21,7 +21,7 @@ const Links = () => (
<ImageLink href="https://www.linkedin.com/in/michaelmbradley/" title="LinkedIn account" Image={LinkedIn} />
<ImageLink href="https://mstdn.ca/@michaelbradley/" title="Mastodon account" Image={Mastodon} />
<input id="dark-mode-toggle" type="checkbox" aria-label="Toggle dark mode" />
<label htmlFor="dark-mode-toggle" id="dark-mode-toggle-label" title="Toggle dark mode">
<label htmlFor="dark-mode-toggle" id="dark-mode-toggle-label" title="Toggle dark mode" className="footerAction">
<DarkModeToggleIcon width="100%" />
</label>
</div>

22
src/style.css
View file

@ -338,18 +338,20 @@ span {
.links {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
column-gap: 1rem;
row-gap: 1rem;
width: min(40rem, 75%);
flex-wrap: nowrap;
justify-content: space-evenly;
column-gap: 2.5%;
width: min(40rem, 95%);
a {
flex: 1 1 1rem;
.footerAction {
flex: 1 0 2rem;
max-width: 5rem;
display: flex;
justify-content: center;
aspect-ratio: 1;
}
a {
svg {
transition: fill var(--anim-duration) ease;
fill: var(--foreground);
@ -361,12 +363,6 @@ span {
}
#dark-mode-toggle-label {
flex: 1 1 1rem;
max-width: 5rem;
display: flex;
justify-content: center;
aspect-ratio: 1;
overflow: hidden;
border-radius: 50%;
cursor: grab;