self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-17 14:37:44 +02:00
Code Issues Releases Activity

docs: face lift, botox x3 (#18184)

Browse Source 
* chore: docs face lift

* logo and fonts

* docs: face lift, botox x3

* docs: face lift, botox x3
This commit is contained in:
Alex
2025-05-09 13:27:21 -05:00
committed by GitHub
parent f21fe8716c
commit ff63b0fa8f
16 changed files with 165 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/src/css/custom.css
View File

@ -7,14 +7,22 @@
@tailwind components;
@tailwind utilities;
@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');
body {
font-family: 'Be Vietnam Pro', serif;
font-optical-sizing: auto;
/* font-size: 1.125rem;
@font-face {
font-family: 'Overpass';
src: url('/fonts/overpass/Overpass.ttf') format('truetype-variations');
font-weight: 1 999;
font-style: normal;
ascent-override: 106.25%;
size-adjust: 106.25%; */
size-adjust: 106.25%;
}
@font-face {
font-family: 'Overpass Mono';
src: url('/fonts/overpass/OverpassMono.ttf') format('truetype-variations');
font-weight: 1 999;
font-style: normal;
ascent-override: 106.25%;
size-adjust: 106.25%;
}
.breadcrumbs__link {
@ -29,6 +37,7 @@ img {
/* You can override the default Infima variables here. */
:root {
font-family: 'Overpass', sans-serif;
--ifm-color-primary: #4250af;
--ifm-color-primary-dark: #4250af;
--ifm-color-primary-darker: #4250af;
@ -83,3 +92,12 @@ div[class*='navbar__items'] > li:has(a[class*='version-switcher-34ab39']) {
code {
font-weight: 600;
}
.buy-button {
padding: 8px 14px;
border: 1px solid transparent;
font-family: 'DM Sans', sans-serif;
font-weight: 500;
cursor: pointer;
box-shadow: 0 0 5px 2px rgba(181, 206, 254, 0.4);
}

39
docs/src/pages/index.tsx
View File

@ -4,7 +4,7 @@ import Layout from '@theme/Layout';
import { discordPath, discordViewBox } from '@site/src/components/svg-paths';
import ThemedImage from '@theme/ThemedImage';
import Icon from '@mdi/react';
import { mdiAndroid } from '@mdi/js';
function HomepageHeader() {
return (
<header>
@ -13,11 +13,14 @@ function HomepageHeader() {
<div className="w-full h-[120vh] absolute left-0 top-0 backdrop-blur-3xl bg-immich-bg/40 dark:bg-transparent"></div>
</div>
<section className="text-center pt-12 sm:pt-24 bg-immich-bg/50 dark:bg-immich-dark-bg/80">
<ThemedImage
sources={{ dark: 'img/logomark-dark.svg', light: 'img/logomark-light.svg' }}
className="h-[115px] w-[115px] mb-2 antialiased rounded-none"
alt="Immich logo"
/>
<a href="https://futo.org" target="_blank" rel="noopener noreferrer">
<ThemedImage
sources={{ dark: 'img/logomark-dark-with-futo.svg', light: 'img/logomark-light-with-futo.svg' }}
className="h-[125px] w-[125px] mb-2 antialiased rounded-none"
alt="Immich logo"
/>
</a>
<div className="mt-8">
<p className="text-3xl md:text-5xl sm:leading-tight mb-1 font-extrabold text-black/90 dark:text-white px-4">
Self-hosted{' '}
@ -28,7 +31,7 @@ function HomepageHeader() {
solution<span className="block"></span>
</p>
<p className="max-w-1/4 m-auto mt-4 px-4">
<p className="max-w-1/4 m-auto mt-4 px-4 text-lg text-gray-700 dark:text-gray-100">
Easily back up, organize, and manage your photos on your own server. Immich helps you
<span className="sm:block"></span> browse, search and organize your photos and videos with ease, without
sacrificing your privacy.
@ -36,27 +39,21 @@ function HomepageHeader() {
</div>
<div className="flex flex-col sm:flex-row place-items-center place-content-center mt-9 gap-4 ">
<Link
className="flex place-items-center place-content-center py-3 px-8 border bg-immich-primary dark:bg-immich-dark-primary rounded-xl no-underline hover:no-underline text-white hover:text-gray-50 dark:text-immich-dark-bg font-bold uppercase"
to="docs/overview/introduction"
className="flex place-items-center place-content-center py-3 px-8 border bg-immich-primary dark:bg-immich-dark-primary rounded-xl no-underline hover:no-underline text-white hover:text-gray-50 dark:text-immich-dark-bg font-bold"
to="docs/overview/quick-start"
>
Get started
Get Started
</Link>
<Link
className="flex place-items-center place-content-center py-3 px-8 border bg-immich-primary/10 dark:bg-gray-300 rounded-xl hover:no-underline text-immich-primary dark:text-immich-dark-bg font-bold uppercase"
className="flex place-items-center place-content-center py-3 px-8 border bg-white/90 dark:bg-gray-300 rounded-xl hover:no-underline text-immich-primary dark:text-immich-dark-bg font-bold"
to="https://demo.immich.app/"
>
Demo
</Link>
<Link
className="flex place-items-center place-content-center py-3 px-8 border bg-immich-primary/10 dark:bg-gray-300 rounded-xl hover:no-underline text-immich-primary dark:text-immich-dark-bg font-bold uppercase"
to="https://immich.store"
>
Buy Merch
Open Demo
</Link>
</div>
<div className="my-12 flex gap-1 font-medium place-items-center place-content-center text-immich-primary dark:text-immich-dark-primary">
<div className="my-8 flex gap-1 font-medium place-items-center place-content-center text-immich-primary dark:text-immich-dark-primary">
<Icon
path={discordPath}
viewBox={discordViewBox} /* viewBox may show an error in your IDE but it is normal. */
@ -119,7 +116,7 @@ export default function Home(): JSX.Element {
<HomepageHeader />
<div className="flex flex-col place-items-center text-center place-content-center dark:bg-immich-dark-bg py-8">
<p>This project is available under GNU AGPL v3 license.</p>
<p className="text-xs">Privacy should not be a luxury</p>
<p className="text-sm">Privacy should not be a luxury</p>
</div>
</Layout>
);

1
docs/src/pages/privacy-policy.tsx
View File

@ -1,5 +1,4 @@
import React from 'react';
import Link from '@docusaurus/Link';
import Layout from '@theme/Layout';
function HomepageHeader() {
return (