diff options
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | pages/post/[id].tsx | 10 | ||||
| -rw-r--r-- | styles/layout.css | 14 | ||||
| -rw-r--r-- | yarn.lock | 18 |
4 files changed, 39 insertions, 6 deletions
diff --git a/package.json b/package.json index 4f17d12..f4c4d42 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "react-markdown": "^6.0.0", "react-syntax-highlighter": "^15.4.3", "rehype-raw": "^5.1.0", - "remark-gfm": "^1.0.0" + "remark-gfm": "^1.0.0", + "use-mousetrap": "^1.0.4" }, "devDependencies": { "@types/node": "^14.14.36", diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx index 70347c8..35a41e6 100644 --- a/pages/post/[id].tsx +++ b/pages/post/[id].tsx @@ -1,7 +1,7 @@ import Head from 'next/head'; import { readdirSync, readFileSync } from 'fs'; import { join } from 'path'; -import { ReactNode } from 'react'; +import { CSSProperties, ReactNode, useState } from 'react'; import ReactMarkdown from 'react-markdown'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import rehypeRaw from 'rehype-raw'; @@ -76,6 +76,12 @@ export function RenderedArticle(props: { content: string; }) { />; } +var collapsed = false; +function toggle() { + collapsed = !collapsed; + document.documentElement.style.setProperty('--collapse-horizontal-gap', Number(collapsed).toString()); +} + export default function Post(props: { content: string; meta: ArticleMeta; @@ -89,7 +95,7 @@ export default function Post(props: { </Head> <div className='centeredPage'> <div className='titleWrapper'> - <h1>{props.meta.title}</h1> + <h1 onClick={toggle}>{props.meta.title}</h1> <p className='subtile'>{props.meta.subtitle}</p> {props.meta.tags && <Tags tags={props.meta.tags} />} </div> diff --git a/styles/layout.css b/styles/layout.css index 70f94dc..96a3604 100644 --- a/styles/layout.css +++ b/styles/layout.css @@ -1,19 +1,23 @@ :root { - --nav-width: 200px; + --collapse-horizontal-gap: 0; + --nav-width: calc(200px * (1 - var(--collapse-horizontal-gap))) !important; --page-width: 700px; --page-margins: 24px; } .centeredPage { + transition-property: gap, max-width; + transition-duration: 500ms; + max-width: calc(var(--nav-width) + var(--page-width) + var(--page-margins)); margin: 0 auto; margin-top: 96px; padding: 0 var(--page-margins); display: grid; - gap: var(--page-margins); - grid-template-columns: var(--nav-width) 1fr; grid-auto-rows: auto; + + gap: var(--page-margins) calc((1 - var(--collapse-horizontal-gap)) * var(--page-margins)); } .titleWrapper { @@ -28,6 +32,10 @@ .navAreaWrapper { grid-column: 1; grid-row: 2; + + transition-property: width; + transition-duration: 500ms; + width: var(--nav-width); } .navAreaWrapper > .sticky { position: sticky; @@ -200,6 +200,11 @@ dependencies: "@types/unist" "*" +"@types/mousetrap@^1.6.4": + version "1.6.8" + resolved "https://registry.yarnpkg.com/@types/mousetrap/-/mousetrap-1.6.8.tgz#448929e6dc21126392830465fdb9d4a2cfc16a88" + integrity sha512-zTqjvgCUT5EoXqbqmd8iJMb4NJqyV/V7pK7AIKq7qcaAsJIpGlTVJS1HQM6YkdHCdnkNSbhcQI7MXYxFfE3iCA== + "@types/node@^14.14.36": version "14.14.36" resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.36.tgz#5637905dbb15c30a33a3c65b9ef7c20e3c85ebad" @@ -1503,6 +1508,11 @@ minimist@^1.2.0: resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== +mousetrap@^1.6.5: + version "1.6.5" + resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9" + integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA== + ms@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" @@ -2365,6 +2375,14 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-mousetrap@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/use-mousetrap/-/use-mousetrap-1.0.4.tgz#9ec635821140e702cc873f41880a5cbd46d1d09a" + integrity sha512-+limiYsm2e1Xs/tnwfEqSCcvh6XTcfLTpCoJFA+mu+btInnlrkFkZ48DLwVGejJdvP5H3Ge79t0bcRKepncvbQ== + dependencies: + "@types/mousetrap" "^1.6.4" + mousetrap "^1.6.5" + use-subscription@1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1" |