Browse Source
fix: make things more accessible for tiny screens like watches
TODO: this hasn't been tested on real screens, only the responsive mode in Firefox
master
Failed to extract signature
1 changed files with
16 additions and
8 deletions
-
src/components/Container.tsx
|
|
@ -127,11 +127,13 @@ const Container: React.FC<{ |
|
|
return ( |
|
|
return ( |
|
|
<div |
|
|
<div |
|
|
className={css` |
|
|
className={css` |
|
|
--content-padding-top: min(15rem, 22vh); |
|
|
--cntr-pad-b-start: 10rem; |
|
|
|
|
|
--cntr-pad-b-end: 8rem; |
|
|
|
|
|
--cntr-pad-inline: 10vw; |
|
|
--logo-size: 5rem; |
|
|
--logo-size: 5rem; |
|
|
padding-block-start: var(--content-padding-top); |
|
|
padding-block-start: var(--cntr-pad-b-start); |
|
|
padding-block-end: 8rem; |
|
|
padding-block-end: var(--cntr-pad-b-end); |
|
|
padding-inline: 10vw; |
|
|
padding-inline: var(--cntr-pad-inline); |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
min-height: 100vh; |
|
|
min-height: 100vh; |
|
|
position: relative; |
|
|
position: relative; |
|
|
@ -145,7 +147,7 @@ const Container: React.FC<{ |
|
|
width: 100vw; |
|
|
width: 100vw; |
|
|
left: 0; |
|
|
left: 0; |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
height: 8rem; |
|
|
height: 8vh; |
|
|
background: rgb(0, 0, 0); |
|
|
background: rgb(0, 0, 0); |
|
|
background: linear-gradient( |
|
|
background: linear-gradient( |
|
|
180deg, |
|
|
180deg, |
|
|
@ -162,8 +164,13 @@ const Container: React.FC<{ |
|
|
ref={logoContainer} |
|
|
ref={logoContainer} |
|
|
className={css` |
|
|
className={css` |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: calc(var(--content-padding-top) - var(--logo-size) - 2rem); |
|
|
/* prettier-ignore */ |
|
|
left: 5rem; |
|
|
top: calc( |
|
|
|
|
|
var(--cntr-pad-b-start) |
|
|
|
|
|
- var(--logo-size) |
|
|
|
|
|
- 2rem |
|
|
|
|
|
); |
|
|
|
|
|
left: var(--cntr-pad-inline); |
|
|
background: none; |
|
|
background: none; |
|
|
border: 0; |
|
|
border: 0; |
|
|
font-size: 1rem; |
|
|
font-size: 1rem; |
|
|
@ -285,9 +292,10 @@ const Container: React.FC<{ |
|
|
max-width: 62rem; |
|
|
max-width: 62rem; |
|
|
min-height: 100%; |
|
|
min-height: 100%; |
|
|
margin: auto; |
|
|
margin: auto; |
|
|
|
|
|
gap: 2rem; |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
gap: 2rem; |
|
|
position: relative; |
|
|
`,
|
|
|
`,
|
|
|
className, |
|
|
className, |
|
|
)} |
|
|
)} |
|
|
|
