fix: align sizes of icons in footer

This commit is contained in:
Felix Schröter 2023-01-05 10:52:33 +01:00
parent 05c4fca47e
commit 372116ca80
Signed by: felschr
GPG key ID: 671E39E6744C807D
2 changed files with 12 additions and 4 deletions

View file

@ -1,16 +1,19 @@
import * as React from "react"
import { ReactNode } from "react"
import { Box, useTheme } from "@mui/material"
import styled from "@emotion/styled"
export type FooterProps = {
className?: string
children: ReactNode
}
export const Footer = ({ children }: FooterProps) => {
export const Footer = styled(({ className, children }: FooterProps) => {
const theme = useTheme()
return (
<Box
{...{ className }}
position="fixed"
display="flex"
bottom={0}
@ -22,4 +25,9 @@ export const Footer = ({ children }: FooterProps) => {
{children}
</Box>
)
})`
> a {
display: flex;
align-items: center;
}
`

View file

@ -76,7 +76,7 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
<Footer>
<Tooltip title="GitLab">
<Link rel="me" href="https://gitlab.com/felschr">
<FaGitlab />
<FaGitlab size="1.25em" />
</Link>
</Tooltip>
<Tooltip title="GitHub">
@ -86,7 +86,7 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
</Tooltip>
<Tooltip title="Mastodon">
<Link rel="me" href="https://todon.eu/@felschr">
<BsMastodon />
<BsMastodon size="1.25em" />
</Link>
</Tooltip>
<Tooltip title="LinkedIn">