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