From 3b4d483c4b558b44f6e6fcf859a401bb3620116e Mon Sep 17 00:00:00 2001 From: Gnarwhal Date: Mon, 23 Sep 2024 07:02:42 +0000 Subject: [PATCH] Embeautification --- .../components/copied_image_dark.svg | 18 ++++ .../components/copied_image_light.svg | 18 ++++ src/app/[...file]/components/copy.css.ts | 90 ++++++++++++++++--- src/app/[...file]/components/copy.tsx | 39 +++++++- .../[...file]/components/copy_image_dark.svg | 25 ++++++ .../[...file]/components/copy_image_light.svg | 25 ++++++ .../components/types/markdown.css.ts | 10 ++- src/app/[...file]/download_dark.svg | 80 +++++++---------- src/app/[...file]/download_light.svg | 80 +++++++---------- src/app/[...file]/page.css.ts | 10 ++- src/app/[...file]/page.tsx | 2 +- 11 files changed, 284 insertions(+), 113 deletions(-) create mode 100644 src/app/[...file]/components/copied_image_dark.svg create mode 100644 src/app/[...file]/components/copied_image_light.svg create mode 100644 src/app/[...file]/components/copy_image_dark.svg create mode 100644 src/app/[...file]/components/copy_image_light.svg diff --git a/src/app/[...file]/components/copied_image_dark.svg b/src/app/[...file]/components/copied_image_dark.svg new file mode 100644 index 0000000..264e2ed --- /dev/null +++ b/src/app/[...file]/components/copied_image_dark.svg @@ -0,0 +1,18 @@ + + + + + + + diff --git a/src/app/[...file]/components/copied_image_light.svg b/src/app/[...file]/components/copied_image_light.svg new file mode 100644 index 0000000..1c35677 --- /dev/null +++ b/src/app/[...file]/components/copied_image_light.svg @@ -0,0 +1,18 @@ + + + + + + + diff --git a/src/app/[...file]/components/copy.css.ts b/src/app/[...file]/components/copy.css.ts index 06d1b71..9207e53 100644 --- a/src/app/[...file]/components/copy.css.ts +++ b/src/app/[...file]/components/copy.css.ts @@ -3,19 +3,83 @@ import { style } from '@vanilla-extract/css'; import * as colors from '../../colors.css'; export const copy = style({ - display: 'block', - margin: 0, - border: 'none', - padding: '0', - outline: 'inherit', - fontFamily: 'monospace', - fontSize: '1.1em', - lineHeight: '2em', - background: 'none', - color: 'inherit', - transition: 'color 0.15s', - whiteSpace: 'pre-wrap', + display: 'flex', + alignItems: 'center', + width: 'max-content', + backgroundColor: colors.background, +}); + +export const copy_button = style({ + display: 'flex', + margin: 0, + border: 'none', + padding: 0, + outline: 'inherit', + fontFamily: 'monospace', + fontSize: '1.1em', + lineHeight: '2em', + color: 'inherit', + whiteSpace: 'pre-wrap', + transition: 'background-color 0.35s', + background: 'none', + width: 'max-content', + height: '100%', ':hover': { - color: colors.accent, + backgroundColor: colors.background2, }, }); + +const copy_image = style({ + boxSizing: 'border-box', + border: `1px solid ${colors.background2}`, + padding: '0.75em', + width: 'auto', + height: '100%', + selectors: { + [`${copy}:hover &`]: { + }, + }, +}); + +export const copy_image_dark = style([copy_image, { + display: 'block', + '@media': { + '(prefers-color-scheme: light)': { + display: 'none', + }, + }, +}]); + +export const copy_image_light = style([copy_image, { + display: 'none', + '@media': { + '(prefers-color-scheme: light)': { + display: 'block', + }, + }, +}]); + +export const copied_image_dark = style([copy_image, { + display: 'block', + '@media': { + '(prefers-color-scheme: light)': { + display: 'none', + }, + }, +}]); + +export const copied_image_light = style([copy_image, { + display: 'none', + '@media': { + '(prefers-color-scheme: light)': { + display: 'block', + }, + }, +}]); + + +export const copy_text = style({ + margin: 0, + marginLeft: '1em', + width: 'max-content', +}); diff --git a/src/app/[...file]/components/copy.tsx b/src/app/[...file]/components/copy.tsx index fe479c2..7d3d761 100644 --- a/src/app/[...file]/components/copy.tsx +++ b/src/app/[...file]/components/copy.tsx @@ -1,11 +1,16 @@ 'use client' import { useState } from 'react'; +import Image from 'next/image'; import * as style from './copy.css'; +import copy_image_dark from './copy_image_dark.svg'; +import copy_image_light from './copy_image_light.svg'; +import copied_image_dark from './copied_image_dark.svg'; +import copied_image_light from './copied_image_light.svg'; -export default function Copy({ className, text, children }: { className?: string, text: string, children?: React.ReactNode }) { - const [copied, set_copied ] = useState(false); +export default function Copy({ className, text, show_text }: { className?: string, text: string, show_text?: boolean }) { + const [copied, set_copied] = useState(false); function make_copy_text(text: string) { return () => { navigator.clipboard.writeText(text); @@ -13,5 +18,33 @@ export default function Copy({ className, text, children }: { className?: string setTimeout(() => { set_copied(false); }, 2000); }; } - return + return
+ + {show_text ?

{text}

: <>} +
; } diff --git a/src/app/[...file]/components/copy_image_dark.svg b/src/app/[...file]/components/copy_image_dark.svg new file mode 100644 index 0000000..ac79323 --- /dev/null +++ b/src/app/[...file]/components/copy_image_dark.svg @@ -0,0 +1,25 @@ + + + + + + + + + + diff --git a/src/app/[...file]/components/copy_image_light.svg b/src/app/[...file]/components/copy_image_light.svg new file mode 100644 index 0000000..e11f246 --- /dev/null +++ b/src/app/[...file]/components/copy_image_light.svg @@ -0,0 +1,25 @@ + + + + + + + + + + diff --git a/src/app/[...file]/components/types/markdown.css.ts b/src/app/[...file]/components/types/markdown.css.ts index d010ed8..a28c5b5 100644 --- a/src/app/[...file]/components/types/markdown.css.ts +++ b/src/app/[...file]/components/types/markdown.css.ts @@ -12,6 +12,12 @@ export const code_bounds = style({ }); export const copy = style({ - position: 'absolute', - right: 0, + position: 'absolute', + right: 0, + height: '5em', + '@media': { + 'screen and (max-width: 768px)': { + width: '3em', + } + } }); diff --git a/src/app/[...file]/download_dark.svg b/src/app/[...file]/download_dark.svg index eb1ae1d..776142d 100644 --- a/src/app/[...file]/download_dark.svg +++ b/src/app/[...file]/download_dark.svg @@ -7,60 +7,48 @@ viewBox="0 0 135.46666 135.46667" version="1.1" id="svg1" - inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)" - sodipodi:docname="download.svg" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> - + id="layer1" + transform="matrix(0.85941469,0,0,0.85941469,9.5223114,9.5223114)"> - - + + + + diff --git a/src/app/[...file]/download_light.svg b/src/app/[...file]/download_light.svg index 39f671b..bcc6e2c 100644 --- a/src/app/[...file]/download_light.svg +++ b/src/app/[...file]/download_light.svg @@ -7,60 +7,48 @@ viewBox="0 0 135.46666 135.46667" version="1.1" id="svg1" - inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)" - sodipodi:docname="download.svg" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> - + id="layer1" + transform="matrix(0.85941469,0,0,0.85941469,9.5223114,9.5223114)"> - - + + + + diff --git a/src/app/[...file]/page.css.ts b/src/app/[...file]/page.css.ts index 060cbb8..df59703 100644 --- a/src/app/[...file]/page.css.ts +++ b/src/app/[...file]/page.css.ts @@ -12,12 +12,13 @@ export const root = style({ export const center = style({ boxSizing: 'border-box', width: '100%', + maxWidth: '90em', height: 'max-content', padding: '2em', }); export const title_group = style({ - marginBottom: '1em', + marginBottom: '0.5em', width: '100%', height: '3.5em', display: 'flex', @@ -102,8 +103,13 @@ export const download_tty_group = style({ margin: 0, marginBottom: '1em', borderBottom: `1px solid ${colors.background2}`, - paddingBottom: '1em', + paddingBottom: '0.5em', }, }, }); +export const download_tty = style({ + padding: '0.25em 0', + height: '3em', +}) + diff --git a/src/app/[...file]/page.tsx b/src/app/[...file]/page.tsx index 52e6c43..cde757a 100644 --- a/src/app/[...file]/page.tsx +++ b/src/app/[...file]/page.tsx @@ -67,7 +67,7 @@ export default async function Page({
- {download_ttys.map((text, index) => {text})} + {download_ttys.map((text, index) => )}
{(!enable_repointing && searchParams['root'] != undefined) ?

Error: this instance of Motto does not have repointing enabled

: