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

22
src/style.css
View file

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