diff --git a/src/components/Exp/Story.tsx b/src/components/Exp/Story.tsx index 48a7b52..e094900 100644 --- a/src/components/Exp/Story.tsx +++ b/src/components/Exp/Story.tsx @@ -1,6 +1,8 @@ import React from "react"; import { css, cx } from "@emotion/css"; +import { ReactComponent as Close } from "../../assets/close.svg"; import { Experience } from "./types"; +import { offscreenWidth } from "../constants"; const story = css` position: absolute; @@ -9,43 +11,134 @@ const story = css` border-radius: 0.5rem; display: flex; - overflow: hidden; - - & .contents { - padding: 1.5rem; - line-height: 1.25rem; - display: flex; - flex-direction: row; - align-items: flex-start; - gap: 2rem; - margin-block-start: 1rem; - height: var(--story-height); + & * { + line-height: 140%; + } - & ul { + & .story-content { + & > div { max-height: 100%; margin: 0; column-count: 3; - column-gap: 2rem; + column-gap: 2.5rem; color: var(--text-subdued); font-weight: 400; - & li + li { - margin-block-start: 0.5rem; + & p { + font-size: 0.9rem; + } + + & > p + p { + margin-block-start: 0.5em; } + } + } + + /* desktop & tablet */ + @media screen and (min-width: ${offscreenWidth}) { + /* offset padding */ + transform: translateX(calc(var(--item-padding) * -1)); + + & .story-handle { + display: none; + } + + & .story-content { + padding: 1.5rem; + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 3rem; + margin-block-start: 1rem; + height: var(--story-height); + } + } + + /* mobile */ + @media screen and (max-width: ${offscreenWidth}) { + position: fixed; + display: flex; + justify-content: center; + height: calc(100vh - 10rem); + width: 100vw; + left: 0; + z-index: 900; + font-size: 1.25rem; + background: var(--bg-colour); + border-inline: 1px solid var(--offscreen-handle); + overflow-y: auto; + overflow-x: hidden; + overscroll-behavior: contain; + + /* + Push this offscreen element out of screen; + Unit.ts will pull it up when .active + */ + top: 100vh; + + & .story-handle { + content: ""; + width: 100%; + height: 1rem; + background-color: var(--offscreen-handle); + position: absolute; + top: 0; + left: 0; - & li::marker { + &::before { content: ""; - font-weight: 800; - padding-top: 1rem; + position: absolute; + width: 2rem; + height: 0.2rem; + background-color: var(--offscreen-handle-tab); + z-index: 900; + inset: 0; + top: 0; + margin: auto; + } + } + + & .story-content { + display: flex; + flex-direction: column; + gap: 3rem; + /* height: 100%; */ + max-width: 40rem; + + margin-block: 4rem; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; + + & > img { + margin-inline: 4rem; + } + + & > div { + column-count: unset; + padding-inline: 4rem; + height: 100%; + overflow-y: auto; + + & p { + font-size: 1rem; + } + } + + & > .closer { + display: flex; } } } `; -export const Story = ({ description, logo }: Experience) => { +export const Story = ({ description, logo, active }: Experience) => { return ( -