Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Hub page styling fix darkmode and change into tailwind styling

Browse Source
This commit is contained in:
Arista Indrajaya 2024-03-05 16:03:04 +07:00
parent 50412a6eed
commit afd3cb95b8
2 changed files with 23 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
docs/src/pages/docs.js
View File

@ -1,22 +1,22 @@
import clsx from 'clsx'
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
import Layout from '@theme/Layout'
import Heading from '@theme/Heading'
import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import Heading from '@theme/Heading';
import { DocSearch } from '@docsearch/react';
import HomepagePrimaryFeatures from '../components/HomepagePrimaryFeatures';
import HomepageSecondaryFeatures from '../components/HomepageSecondaryFeatures';
import HomepageTerinaryFeatures from '../components/HomepageTerinaryFeatures';
import styles from './docs.module.css'
import HomepagePrimaryFeatures from '../components/HomepagePrimaryFeatures'
import HomepageSecondaryFeatures from '../components/HomepageSecondaryFeatures'
import HomepageTerinaryFeatures from '../components/HomepageTerinaryFeatures'
import { DocSearch } from '@docsearch/react'
import NavbarExtended from '../theme/NavbarExtension'
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext()
const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx(styles.heroBanner)}>
<NavbarExtended />
<div className="container">
<Heading as="h1" className={clsx(styles.heroTitle)}>
<header className="bg-white dark:bg-gray-800 py-16 h-[60vh] text-center relative overflow-hidden">
<div className="bg-custom-img w-full h-full absolute top-0 left-0 bg-cover bg-center"></div>
<div className="container relative z-10">
<Heading as="h1" className="text-2xl md:text-3xl lg:text-5xl font-semibold text-white dark:text-gray-200 mb-8 mt-8">
Hello, how can we help?
</Heading>
<div className={styles.searchBar}>
@ -28,30 +28,30 @@ function HomepageHeader() {
insight={true}
/>
</div>
<p className={clsx(styles.heroSubtitle)}>
Open-source ChatGPT alternative that runs 100% offline on your
computer.
<p className="text-lg md:text-xl lg:text-2xl text-white dark:text-gray-200 mt-8">
Open-source ChatGPT alternative that runs 100% offline on your computer.
</p>
</div>
</header>
)
);
}
export default function Home() {
const { siteConfig } = useDocusaurusContext()
const { siteConfig } = useDocusaurusContext();
return (
<Layout
title={`Docs`}
title="Docs"
description="Description will go into a meta tag in <head />"
>
<div className={clsx(styles.homeBg)}>
<div className="bg-white dark:bg-gray-800">
<HomepageHeader />
<main style={{ backgroundColor: 'whitesmoke' }}>
<main className="bg-whitesmoke dark:bg-gray-900">
<HomepagePrimaryFeatures />
<HomepageSecondaryFeatures />
<HomepageTerinaryFeatures />
</main>
</div>
</Layout>
)
);
}

49
docs/src/pages/docs.module.css
View File

@ -1,47 +1,3 @@
/**
* CSS files with the .module.css suffix will be treated as CSS modules
* and scoped locally.
*/
.heroBanner {
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 996px) {
.heroBanner {
padding: 2rem;
}
}
@media screen and (max-width: 1400px) {
.homeBg {
background-size: auto 600px !important;
}
}
.homeBg {
background-image: url('/img/homepage-new/bg.png') !important;
background-size: contain;
background-repeat: no-repeat;
}
.heroTitle {
font-size: 3rem;
font-weight: 600;
color: white;
margin-top: 4rem;
margin-bottom: 3rem;
}
@media screen and (max-width: 1024px) {
.heroTitle {
font-size: 2rem;
}
}
.searchBar {
background-color: white;
max-width: 580px;
@ -88,8 +44,3 @@
padding: 0px 5px;
margin: 0px 10px;
}
.heroSubtitle {
font-size: 1.25rem;
color: white;
}