fix: align sizes of icons in footer
This commit is contained in:
parent
05c4fca47e
commit
372116ca80
2 changed files with 12 additions and 4 deletions
|
|
@ -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;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue