From cbfa954bb25093cdc436e5478e8021273145e32a Mon Sep 17 00:00:00 2001 From: "Lu[ke] Wilson" Date: Tue, 28 Nov 2023 12:05:13 +0000 Subject: [PATCH] logos --- public/tldraw-lockup.svg | 9 - src/app/globals.css | 84 ++++++-- src/app/page.tsx | 2 + src/components/Collab.tsx | 22 ++ src/components/LockupLink.tsx | 121 +++++++++++ src/components/fal-logo.tsx | 374 ++++++++++++++++------------------ 6 files changed, 384 insertions(+), 228 deletions(-) delete mode 100644 public/tldraw-lockup.svg create mode 100644 src/components/Collab.tsx create mode 100644 src/components/LockupLink.tsx diff --git a/public/tldraw-lockup.svg b/public/tldraw-lockup.svg deleted file mode 100644 index 5192128..0000000 --- a/public/tldraw-lockup.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/app/globals.css b/src/app/globals.css index a52ec60..52ccf1b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,33 +1,79 @@ -@import url("@tldraw/tldraw/tldraw.css"); +@import url('@tldraw/tldraw/tldraw.css'); @tailwind base; @tailwind components; @tailwind utilities; :root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; } @media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + } } body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); + color: rgb(var(--foreground-rgb)); + background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) + rgb(var(--background-start-rgb)); } -/* .tl-frame-heading { - display: none; -} */ +.lockup__link img.lockup__by { + height: 40px; + padding-right: 2px; +} + +.lockup__link { + color: var(--color-text); + position: absolute; + z-index: var(--layer-panels); + bottom: 0px; + right: 0px; + display: flex; + flex-direction: row; + gap: 10px; + height: 45px; + padding-right: 10px; + align-items: center; + justify-content: flex-end; +} + +.lockup__link a, +.lockup__link img, +.lockup__link svg { + height: 100%; + /* width: 100%; */ +} + +.fal-logo { + /* margin-left: -4px; */ +} + +.lockup__link__mobile { + bottom: 60px; +} + +.tlui-help-menu { + display: none !important; +} + +.lockup { + /* padding: 0px; */ + width: 120px; +} + +.tlui-debug-panel { + display: none !important; +} + +.lockup__collab { + font-size: 20px; + font-weight: 200; + /* padding: 0px 4px; */ +} diff --git a/src/app/page.tsx b/src/app/page.tsx index cfd8c1f..5927b63 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,7 @@ 'use client' import { LiveImageShape, LiveImageShapeUtil } from '@/components/LiveImageShapeUtil' +import { LockupLink } from '@/components/LockupLink' import * as fal from '@fal-ai/serverless-client' import { DefaultSizeStyle, @@ -91,6 +92,7 @@ export default function Home() { overrides={overrides} > + diff --git a/src/components/Collab.tsx b/src/components/Collab.tsx new file mode 100644 index 0000000..ae79139 --- /dev/null +++ b/src/components/Collab.tsx @@ -0,0 +1,22 @@ +// An 'x' svg icon that represents collaboration between two organisations. +// eg: tldraw x fal +export function Collab() { + return ( + + {/* Two paths form a cross */} + + + ) +} diff --git a/src/components/LockupLink.tsx b/src/components/LockupLink.tsx new file mode 100644 index 0000000..cf37998 --- /dev/null +++ b/src/components/LockupLink.tsx @@ -0,0 +1,121 @@ +/* eslint-disable @next/next/no-img-element */ +import { useBreakpoint } from '@tldraw/tldraw' +import { FalLogo } from './fal-logo' + +export function LockupLink() { + const breakpoint = useBreakpoint() + // const editor = useEditor() + // const isFocusMode = useValue('isFocusMode', () => editor.getInstanceState().isFocusMode, [editor]) + + // if (isFocusMode) return null + + return ( + + + {/* by */} + + + {/* tldraw logo */} + + × + + + + + ) +} + +function Lockup() { + return ( + + + + + + + + + + ) +} + +// Janky as hell but I gotta do talk-prep +function By() { + return ( + + {/* */} + {/* + + + + */} + + + + ) +} diff --git a/src/components/fal-logo.tsx b/src/components/fal-logo.tsx index b2009cd..aee2423 100644 --- a/src/components/fal-logo.tsx +++ b/src/components/fal-logo.tsx @@ -1,202 +1,176 @@ export function FalLogo() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) }