diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 00a6377b..99fa3425 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -27,6 +27,7 @@ jobs: with: # Number of commits to fetch. 0 indicates all history. fetch-depth: 1 + lfs: true - name: Prepare for building uses: ./.github/actions/prepare diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 2b4b8eba..c3e64d27 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -27,6 +27,7 @@ jobs: with: # Number of commits to fetch. 0 indicates all history. fetch-depth: 1 + lfs: true - name: Prepare for building uses: ./.github/actions/prepare diff --git a/README.md b/README.md index 7c672949..5cdca525 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ Just check out this demo below and you'll get it in a snap. Showcase: https://react-dev-inspector.zthxxx.me/showcase -[![inspector-gif](https://github.com/zthxxx/react-dev-inspector/raw/master/docs/images/inspect.gif)](https://react-dev-inspector.zthxxx.me/showcase) +[![inspector-preview](https://github.com/zthxxx/react-dev-inspector/raw/dev/docs/images/inspector.mp4)](https://react-dev-inspector.zthxxx.me/showcase) Wanna try out the demo right now? Sure, here is the online demo: diff --git a/docs/components/features/style.module.css b/docs/components/features/style.module.css index 8aeb4913..850f205f 100644 --- a/docs/components/features/style.module.css +++ b/docs/components/features/style.module.css @@ -12,7 +12,7 @@ color: #000; background-color: white; overflow: hidden; - border-radius: 1.78em; + border-radius: 1.5em; box-shadow: 0 8px 16px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%), 0 0 0 1px rgb(0 0 0 / 3%); diff --git a/docs/components/landing-page/home.global.css b/docs/components/landing-page/home.global.css index 7b7305ac..2dcb15a7 100644 --- a/docs/components/landing-page/home.global.css +++ b/docs/components/landing-page/home.global.css @@ -57,14 +57,15 @@ } #preview-card { - aspect-ratio: 125/70; + aspect-ratio: 567/311; color: #fff; text-shadow: 0 0 1rem rgba(0,0,0,0.1); display: flex; justify-content: center; align-items: center; - padding: 1rem; + padding: 0; background-color: #fefcfe; + overflow: hidden; .docs-img-wrapper { display: flex; @@ -76,7 +77,13 @@ min-width: 95%; border-radius: 20px; } + + .docs-preview-video { + max-width: 100%; + max-height: 100%; + } } + #preview-card img { position: absolute; object-fit: cover; @@ -125,14 +132,14 @@ letter-spacing: -.08rem; } } - @media screen and (max-width: 1024px) { + /* @media screen and (max-width: 1024px) { #preview-card { padding: 0; .docs-img-wrapper { width: 96%; } } - } + } */ @media screen and (max-width: 640px) { #online-editor-demo { diff --git a/docs/components/landing-page/landing-page.tsx b/docs/components/landing-page/landing-page.tsx index 0149fd2b..a52a854c 100644 --- a/docs/components/landing-page/landing-page.tsx +++ b/docs/components/landing-page/landing-page.tsx @@ -2,9 +2,8 @@ import { useState } from 'react' import dynamic from 'next/dynamic' import Image from 'next/image' import Link from 'next/link' -import inspectPreview from '@images/inspect.gif' +import inspectorPreview from '@images/inspector.mp4' import workingPipeline from '@images/working-pipeline.svg' -import { isDev } from '@utils' import { Feature, Features } from '@components/features' import { StackBlitz } from '@components/stack-blitz' import { Marquee } from '@components/marquee' @@ -58,15 +57,19 @@ export const LandingPage = () => { centered href='/showcase' > - - {!isDev && ( - Background - )} - +