diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index a94a54b60c81a..94d1da3be3afb 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -78,8 +78,6 @@ const config = { announcementBar: { id: 'site_announcement_immich', content: `⚠️ The project is under very active development. Expect bugs and changes. Do not use it as the only way to store your photos and videos!`, - backgroundColor: '#593f00', - textColor: '#ffefc9', isCloseable: false, }, docs: { diff --git a/docs/src/components/community-guides.tsx b/docs/src/components/community-guides.tsx index 6982853fade77..7f4206c97baf1 100644 --- a/docs/src/components/community-guides.tsx +++ b/docs/src/components/community-guides.tsx @@ -52,20 +52,20 @@ const guides: CommunityGuidesProps[] = [ function CommunityGuide({ title, description, url }: CommunityGuidesProps): JSX.Element { return ( -
+
-

+

{title}

{description}

-

+

{url}

View Guide diff --git a/docs/src/components/community-projects.tsx b/docs/src/components/community-projects.tsx index d8273c67c2179..3a034e3a04cfd 100644 --- a/docs/src/components/community-projects.tsx +++ b/docs/src/components/community-projects.tsx @@ -87,23 +87,23 @@ const projects: CommunityProjectProps[] = [ function CommunityProject({ title, description, url }: CommunityProjectProps): JSX.Element { return ( -
+
-

+

{title}

{description}

-

+

{url}

- View Project + View Link
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 5ee7bf7393e57..f693ce701b3ab 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -7,11 +7,12 @@ @tailwind components; @tailwind utilities; -@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); html, button { - font-family: 'Overpass', sans-serif; + font-family: 'Be Vietnam Pro', sans-serif; + font-optical-sizing: auto; } img { @@ -27,7 +28,6 @@ img { --ifm-color-primary-light: #4250af; --ifm-color-primary-lighter: #4250af; --ifm-color-primary-lightest: #4250af; - --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); } @@ -40,10 +40,28 @@ img { --ifm-color-primary-light: #d5e4fc; --ifm-color-primary-lighter: #e9f1fe; --ifm-color-primary-lightest: #ffffff; - --ifm-background-color: #000000; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + --ifm-background-color: #000000; } div[class^='announcementBar_'] { min-height: 2rem; + background-color: #2b3336; + color: white; +} + +.menu__link { + padding: 10px; + padding-left: 16px; + border-radius: 10px; + font-size: 15px; +} + +.menu__list-item-collapsible { + border-radius: 10px; + font-size: 15px; +} + +code { + font-weight: 600; } diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index a375efb8a8590..6b6bbb0f4b4f5 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -7,41 +7,74 @@ function HomepageHeader() { return (
-
+
Immich logo -
-

- Self-hosted photo and - video management solution +

+
+
+ Immich logo +
+

+ Self-hosted{' '} + + photo and + video management{' '} + + solution +

+ +

+ Easily back up, organize, and manage your photos on your own server. Immich helps you + browse, search and organize your photos and videos with ease, without + sacrificing your privacy.

+
Get started - Demo portal - - - - Discord + Demo
- screenshots + screenshots + +
+
+
+ + Immich logo + +
+

Download mobile app

+

+ Download Immich app and start backing up your photos and videos securely to your own server +

+
+ + app qr code
); @@ -61,13 +101,9 @@ function HomepageHeader() { export default function Home(): JSX.Element { return ( - + -
+

This project is available under GNU AGPL v3 license.

Privacy should not be a luxury

diff --git a/docs/static/img/app-qrcode-dark.svg b/docs/static/img/app-qrcode-dark.svg new file mode 100644 index 0000000000000..faa567a52aedc --- /dev/null +++ b/docs/static/img/app-qrcode-dark.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/static/img/app-qrcode-light.svg b/docs/static/img/app-qrcode-light.svg new file mode 100644 index 0000000000000..c7121248f3cb0 --- /dev/null +++ b/docs/static/img/app-qrcode-light.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/static/img/immich-screenshots.png b/docs/static/img/immich-screenshots.png deleted file mode 100644 index 6123279f2d652..0000000000000 Binary files a/docs/static/img/immich-screenshots.png and /dev/null differ diff --git a/docs/static/img/immich-screenshots.webp b/docs/static/img/immich-screenshots.webp deleted file mode 100644 index 62cc036797179..0000000000000 Binary files a/docs/static/img/immich-screenshots.webp and /dev/null differ diff --git a/docs/static/img/logomark-dark.svg b/docs/static/img/logomark-dark.svg new file mode 100644 index 0000000000000..446caba279760 --- /dev/null +++ b/docs/static/img/logomark-dark.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/static/img/logomark-light.svg b/docs/static/img/logomark-light.svg new file mode 100644 index 0000000000000..497fbdcf14902 --- /dev/null +++ b/docs/static/img/logomark-light.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/static/img/screenshot-dark.webp b/docs/static/img/screenshot-dark.webp new file mode 100644 index 0000000000000..8455548f5e5f3 Binary files /dev/null and b/docs/static/img/screenshot-dark.webp differ diff --git a/docs/static/img/screenshot-light.webp b/docs/static/img/screenshot-light.webp new file mode 100644 index 0000000000000..33365cec12bae Binary files /dev/null and b/docs/static/img/screenshot-light.webp differ diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js index 1ef26facbb621..98f69bcd59b7a 100644 --- a/docs/tailwind.config.js +++ b/docs/tailwind.config.js @@ -11,13 +11,13 @@ module.exports = { colors: { // Light Theme 'immich-primary': '#4250af', - 'immich-bg': 'white', + 'immich-bg': '#f9f8fb', 'immich-fg': 'black', 'immich-gray': '#F6F6F4', // Dark Theme 'immich-dark-primary': '#adcbfa', - 'immich-dark-bg': 'black', + 'immich-dark-bg': '#070a14', 'immich-dark-fg': '#e5e7eb', 'immich-dark-gray': '#212121', },