diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-10-02 17:39:16 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-11 18:14:41 +0100 |
| commit | 6221fa82e41915702d8139cade5c25e9d61e619f (patch) | |
| tree | 9c725b7f7b1e002747712de456c73f28839f0ebd /src/components/templates | |
| parent | 36890cfafeba6e30782df1260d7f9e678c7da4bf (diff) | |
refactor(components): remove Column and NoScript from atoms
* Column is a simple div meant to be used inside Columns component so
they should live together.
* NoScript is only used in Layout component and its name does not
make sense since it needs to be used inside a `noscript` element.
Diffstat (limited to 'src/components/templates')
| -rw-r--r-- | src/components/templates/layout/layout.module.scss | 15 | ||||
| -rw-r--r-- | src/components/templates/layout/layout.tsx | 5 |
2 files changed, 17 insertions, 3 deletions
diff --git a/src/components/templates/layout/layout.module.scss b/src/components/templates/layout/layout.module.scss index 5b89341..d86340f 100644 --- a/src/components/templates/layout/layout.module.scss +++ b/src/components/templates/layout/layout.module.scss @@ -41,6 +41,21 @@ } } +.noscript { + padding: var(--spacing-xs) var(--spacing-sm); + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 10; + background: var(--color-bg); + border-bottom: fun.convert-px(3) solid var(--color-border); + color: var(--color-primary-darker); + font-size: var(--font-size-sm); + font-weight: 600; + text-align: center; +} + .noscript-spacing { width: 100%; height: fun.convert-px(75); diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx index c994469..444b170 100644 --- a/src/components/templates/layout/layout.tsx +++ b/src/components/templates/layout/layout.tsx @@ -16,7 +16,7 @@ import { useScrollPosition, useSettings, } from '../../../utils/hooks'; -import { ButtonLink, Icon, Main, NoScript } from '../../atoms'; +import { ButtonLink, Icon, Main } from '../../atoms'; import { SiteFooter, type SiteFooterProps, @@ -264,8 +264,7 @@ export const Layout: FC<LayoutProps> = ({ topId="top" /> <noscript> - {/*eslint-disable-next-line react/jsx-no-literals -- Position allowed*/} - <NoScript message={noScript} position="top" /> + <div className={styles.noscript}>{noScript}</div> </noscript> </> ); |