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 * as React from "react"
|
||||||
import { ReactNode } from "react"
|
import { ReactNode } from "react"
|
||||||
import { Box, useTheme } from "@mui/material"
|
import { Box, useTheme } from "@mui/material"
|
||||||
|
import styled from "@emotion/styled"
|
||||||
|
|
||||||
export type FooterProps = {
|
export type FooterProps = {
|
||||||
|
className?: string
|
||||||
children: ReactNode
|
children: ReactNode
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Footer = ({ children }: FooterProps) => {
|
export const Footer = styled(({ className, children }: FooterProps) => {
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
|
{...{ className }}
|
||||||
position="fixed"
|
position="fixed"
|
||||||
display="flex"
|
display="flex"
|
||||||
bottom={0}
|
bottom={0}
|
||||||
|
|
@ -22,4 +25,9 @@ export const Footer = ({ children }: FooterProps) => {
|
||||||
{children}
|
{children}
|
||||||
</Box>
|
</Box>
|
||||||
)
|
)
|
||||||
|
})`
|
||||||
|
> a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
`
|
||||||
|
|
|
||||||
|
|
@ -76,7 +76,7 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
|
||||||
<Footer>
|
<Footer>
|
||||||
<Tooltip title="GitLab">
|
<Tooltip title="GitLab">
|
||||||
<Link rel="me" href="https://gitlab.com/felschr">
|
<Link rel="me" href="https://gitlab.com/felschr">
|
||||||
<FaGitlab />
|
<FaGitlab size="1.25em" />
|
||||||
</Link>
|
</Link>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title="GitHub">
|
<Tooltip title="GitHub">
|
||||||
|
|
@ -86,7 +86,7 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title="Mastodon">
|
<Tooltip title="Mastodon">
|
||||||
<Link rel="me" href="https://todon.eu/@felschr">
|
<Link rel="me" href="https://todon.eu/@felschr">
|
||||||
<BsMastodon />
|
<BsMastodon size="1.25em" />
|
||||||
</Link>
|
</Link>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title="LinkedIn">
|
<Tooltip title="LinkedIn">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue