diff options
Diffstat (limited to 'src/components/HeaderBar')
| -rw-r--r-- | src/components/HeaderBar/index.tsx | 20 |
1 files changed, 14 insertions, 6 deletions
diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx index 439851d..5c536ef 100644 --- a/src/components/HeaderBar/index.tsx +++ b/src/components/HeaderBar/index.tsx @@ -27,16 +27,20 @@ const headerTextStyles = css` font-family: "Uni Sans", "Hind", "Arial", sans-serif; margin: 0 2rem 10rem 2rem; - + .title { font-size: 3vmax; margin-bottom: 0; } - + + .full_size { + line-height: 200%; + } + .description { font-size: 1.5vmax; } - + .title, .description { transition: font-size 1s; } @@ -49,6 +53,10 @@ const headerTextStyles = css` font-size: 5vmax; } + .full_size { + line-height: 100%; + } + .description { font-size: 2vmax; } @@ -64,7 +72,7 @@ const homeButtonStyles = css` transform: scale(0.15); } } - + * { position: absolute; top: -10rem; @@ -96,8 +104,8 @@ function HeaderBar({ title, description }: HeaderBarProps): JSX.Element { </div> <div css={css`${headerTextStyles}; margin-bottom: 12.5%;`}> - <h1 className="title">{title}</h1> - <h1 className="description">{description}</h1> + <h1 className={description ? "title" : "title full_size"}>{title}</h1> + {description ? <h1 className="description">{description}</h1> : null} </div> <Link to="/" css={homeButtonStyles}> |