Improve structure scss
This commit is contained in:
Faisal Amir
parent
d63c9c3d46
commit
8586b3ec9e
@ -16,267 +16,31 @@ export default function Home() {
|
|||||||
const { siteConfig } = useDocusaurusContext();
|
const { siteConfig } = useDocusaurusContext();
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<AnnoncementBanner />
|
{/* <AnnoncementBanner /> */}
|
||||||
<Layout
|
<Layout
|
||||||
title={`${siteConfig.tagline}`}
|
title={`${siteConfig.tagline}`}
|
||||||
description="Jan is a ChatGPT-alternative that runs on your own computer, with a local API server."
|
description="Jan is a ChatGPT-alternative that runs on your own computer, with a local API server."
|
||||||
>
|
>
|
||||||
<main className="bg-gray-50 dark:bg-gray-950/95 relative">
|
<main>
|
||||||
<div className="relative">
|
<div className="container">
|
||||||
<ThemedImage
|
<div className="grid grid-cols-1 lg:grid-cols-12 mt-10 gap-8 items-center">
|
||||||
alt="App screenshot"
|
<div className="col-span-7">
|
||||||
sources={{
|
<h1 className="bg-gradient-to-b dark:from-white from-black to-gray-700 dark:to-gray-400 bg-clip-text text-7xl font-semibold leading-tight text-transparent dark:text-transparent lg:leading-tight">
|
||||||
light: useBaseUrl("/img/bg-hero-light.svg"),
|
|
||||||
dark: useBaseUrl("/img/bg-hero-dark.svg"),
|
|
||||||
}}
|
|
||||||
className="absolute w-full h-full opacity-10 dark:opacity-20 top-0 object-cover blur-3xl"
|
|
||||||
/>
|
|
||||||
<div className="container pt-16">
|
|
||||||
<div className="grid grid-cols-1 items-center gap-4">
|
|
||||||
<div className="relative z-10 text-center ">
|
|
||||||
{/* TODO: Add upcoming events here */}
|
|
||||||
{/* <div className="bg-red-50 mb-4 inline-flex items-center py-1 rounded-full px-4 gap-x-2">
|
|
||||||
<span className="font-bold uppercase text-blue-600">
|
|
||||||
Event
|
|
||||||
</span>
|
|
||||||
<a href="/events/nvidia-llm-day-nov-23">
|
|
||||||
<p className="font-bold">
|
|
||||||
8 Nov 2023: Nvidia LLM Day (Hanoi)
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div> */}
|
|
||||||
<h1 className="bg-gradient-to-r dark:from-white from-black to-gray-500 dark:to-gray-400 bg-clip-text text-4xl lg:text-6xl font-bold leading-tight text-transparent dark:text-transparent lg:leading-tight">
|
|
||||||
Own your AI
|
Own your AI
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-xl leading-relaxed lg:text-2xl lg:leading-relaxed text-gray-500 dark:text-gray-400">
|
<p className="text-2xl mt-1">
|
||||||
A
|
Jan is an open-source alternative to ChatGPT that runs on your
|
||||||
<span className="dark:text-white text-black">
|
own computer
|
||||||
free, open-source
|
|
||||||
</span>
|
|
||||||
alternative to OpenAI
|
|
||||||
<br />
|
|
||||||
that runs on your
|
|
||||||
<span className="dark:text-white text-black">
|
|
||||||
personal computer
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="my-6 flex flex-col-reverse md:flex-row items-center justify-center gap-4 relative z-20">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="cursor-pointer relative hidden md:inline-flex items-center px-4 py-2.5 text-base font-semibold rounded-lg border border-gray-400 dark:border-gray-700 text-gray-600 dark:text-white"
|
|
||||||
onClick={() =>
|
|
||||||
window.open(
|
|
||||||
"https://github.com/janhq/jan",
|
|
||||||
"_blank",
|
|
||||||
"noreferrer"
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
View Github
|
|
||||||
</button>
|
|
||||||
<Dropdown />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-center relative ">
|
|
||||||
<div className="p-3 border dark:border-gray-500 border-gray-400 inline-block rounded-lg">
|
|
||||||
<ThemedImage
|
|
||||||
alt="App screenshot"
|
|
||||||
sources={{
|
|
||||||
light: useBaseUrl("/img/desktop-llm-chat-light.png"),
|
|
||||||
dark: useBaseUrl("/img/desktop-llm-chat-dark.png"),
|
|
||||||
}}
|
|
||||||
width={1000}
|
|
||||||
className="rounded-md mx-auto"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="container mt-40 text-center">
|
|
||||||
<h2>AI that you control</h2>
|
|
||||||
<p className="text-base mt-2 w-full lg:w-2/5 mx-auto leading-relaxed">
|
|
||||||
Private. Local. Infinitely Customizable.
|
|
||||||
</p>
|
|
||||||
<div className="grid text-left lg:grid-cols-2 mt-16 gap-4">
|
|
||||||
<div className="card relative min-h-[380px] lg:min-h-[460px]">
|
|
||||||
<img
|
|
||||||
src="/img/card-element.png"
|
|
||||||
alt="Element"
|
|
||||||
className="absolute w-full bottom-0 left-0"
|
|
||||||
/>
|
|
||||||
<div className="p-8 relative z-40">
|
|
||||||
<h5>Personal AI that runs on your computer</h5>
|
|
||||||
<p className="mt-2">
|
|
||||||
Jan runs directly on your local machine, offering privacy,
|
|
||||||
convenience and customizability.
|
|
||||||
</p>
|
|
||||||
<ThemedImage
|
|
||||||
alt="Group Chat"
|
|
||||||
sources={{
|
|
||||||
light: useBaseUrl("/img/group-chat-light.png"),
|
|
||||||
dark: useBaseUrl("/img/group-chat-dark.png"),
|
|
||||||
}}
|
|
||||||
className="mt-10"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card relative min-h-[380px] lg:min-h-[460px]">
|
|
||||||
<div className="p-8">
|
|
||||||
<h5>Extendable via App and Plugin framework</h5>
|
|
||||||
<p className="mt-2">
|
|
||||||
Jan has a versatile app and plugin framework, allowing you
|
|
||||||
to customize it to your needs.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<ThemedImage
|
<div className="col-span-5">
|
||||||
alt="Framework"
|
|
||||||
sources={{
|
|
||||||
light: useBaseUrl("/img/card-framework-light.png"),
|
|
||||||
dark: useBaseUrl("/img/card-framework-dark.png"),
|
|
||||||
}}
|
|
||||||
className="w-11/12 ml-auto mt-auto"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="card relative min-h-[380px] lg:min-h-[460px]">
|
|
||||||
<div className="p-8">
|
|
||||||
<h5>
|
|
||||||
Private and offline, your data never leaves your machine
|
|
||||||
</h5>
|
|
||||||
<p className="mt-2">
|
|
||||||
Your conversations and data are with an AI that runs on your
|
|
||||||
computer, where only you have access.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<ThemedImage
|
|
||||||
alt="Group Chat"
|
|
||||||
sources={{
|
|
||||||
light: useBaseUrl("/img/card-nitro-light.png"),
|
|
||||||
dark: useBaseUrl("/img/card-nitro-dark.png"),
|
|
||||||
}}
|
|
||||||
className="w-3/4 mx-auto mt-auto"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="card relative min-h-[380px] lg:min-h-[460px]">
|
|
||||||
<div className="p-8">
|
|
||||||
<h5>No subscription fees, the AI runs on your computer</h5>
|
|
||||||
<p className="mt-2">
|
|
||||||
Say goodbye to monthly subscriptions or usage-based APIs.
|
|
||||||
Jan runs 100% free on your own hardware.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<ThemedImage
|
|
||||||
alt="Group Chat"
|
|
||||||
sources={{
|
|
||||||
light: useBaseUrl("/img/card-free-light.png"),
|
|
||||||
dark: useBaseUrl("/img/card-free-dark.png"),
|
|
||||||
}}
|
|
||||||
className="w-full mt-auto mx-auto"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="container lg:px-20 py-40 lg:py-[200px] text-center lg:text-left">
|
|
||||||
<div className="flex flex-col lg:flex-row space-y-20 lg:space-y-0">
|
|
||||||
<div>
|
|
||||||
<h1 className="bg-gradient-to-r dark:from-white from-black to-gray-500 dark:to-gray-400 bg-clip-text text-4xl lg:text-6xl font-bold leading-tight text-transparent dark:text-transparent lg:leading-tight">
|
|
||||||
Your AI, forever.
|
|
||||||
</h1>
|
|
||||||
<p className="text-lg lg:text-2xl mt-2">
|
|
||||||
Apps come and go, but your AI and data should last.{" "}
|
|
||||||
</p>
|
|
||||||
<div className="w-full lg:w-3/4 mt-8">
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-24">
|
|
||||||
<div>
|
|
||||||
<img
|
|
||||||
src="/img/ic-park-solid-unlock.svg"
|
|
||||||
alt="Icon - Lock"
|
|
||||||
className="w-8 mb-4 mx-auto lg:mx-0"
|
|
||||||
/>
|
|
||||||
<p>
|
<p>
|
||||||
Jan uses open, standard and non-proprietary files stored
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
||||||
locally on your device.
|
Error explicabo aperiam molestias neque quod ad id dolorum
|
||||||
|
adipisci dicta magni possimus, tempore temporibus magnam nisi
|
||||||
|
harum veritatis eaque molestiae suscipit.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<img
|
|
||||||
src="img/ic-baseline-control-camera.svg"
|
|
||||||
alt="Icon - Camera"
|
|
||||||
className="w-8 mb-4 mx-auto lg:mx-0"
|
|
||||||
/>
|
|
||||||
<p>
|
|
||||||
You have total control over your AI, which means you can
|
|
||||||
use Jan offline and switch to another app easily if you
|
|
||||||
want.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full lg:w-80 text-center">
|
|
||||||
<ThemedImage
|
|
||||||
alt="App screenshot"
|
|
||||||
sources={{
|
|
||||||
light: useBaseUrl("/img/jan-icon-light.png"),
|
|
||||||
dark: useBaseUrl("/img/jan-icon-dark.png"),
|
|
||||||
}}
|
|
||||||
className="w-40 lg:w-full mx-auto"
|
|
||||||
/>
|
|
||||||
<p className="mt-1 font-bold">100% free on your own hardware</p>
|
|
||||||
<DownloadLink />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="container pb-40 text-center">
|
|
||||||
<h2>
|
|
||||||
We are open-source. <br /> Join Jan community.
|
|
||||||
</h2>
|
|
||||||
<div className="mt-14">
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
||||||
<a href="https://discord.com/invite/FTk2MvZwJH" target="_blank">
|
|
||||||
<div className="card h-52 relative flex items-center justify-center">
|
|
||||||
<div className="relative z-50">
|
|
||||||
<img
|
|
||||||
src="/img/discord-logo.png"
|
|
||||||
alt="Discord logo"
|
|
||||||
className="w-28"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card-link card-link-bg dark:card-link-bg-dark absolute right-4 top-5">
|
|
||||||
Join our Discord
|
|
||||||
</div>
|
|
||||||
<ThemedImage
|
|
||||||
alt="Discord Element"
|
|
||||||
sources={{
|
|
||||||
light: useBaseUrl("/img/discord-element-light.png"),
|
|
||||||
dark: useBaseUrl("/img/discord-element-dark.png"),
|
|
||||||
}}
|
|
||||||
className="absolute"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/janhq/jan" target="_blank">
|
|
||||||
<div className="card h-52 relative flex items-center justify-center">
|
|
||||||
<div className="relative z-50">
|
|
||||||
<AiOutlineGithub className="text-8xl dark:text-white text-black" />
|
|
||||||
</div>
|
|
||||||
<div className="card-link card-link-bg dark:card-link-bg-dark absolute right-4 top-5">
|
|
||||||
View Github
|
|
||||||
</div>
|
|
||||||
<img
|
|
||||||
alt="Github Element"
|
|
||||||
src="/img/github-element-dark.png"
|
|
||||||
className="absolute left-8"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -1,18 +0,0 @@
|
|||||||
@layer components {
|
|
||||||
.el-blur-hero {
|
|
||||||
height: 200px;
|
|
||||||
background: linear-gradient(
|
|
||||||
180deg,
|
|
||||||
hsl(296, 100%, 67%) 0%,
|
|
||||||
hsl(253, 100%, 57%) 100%
|
|
||||||
);
|
|
||||||
z-index: 2;
|
|
||||||
border-bottom-left-radius: 100%;
|
|
||||||
border-bottom-right-radius: 100%;
|
|
||||||
border-top-left-radius: 100%;
|
|
||||||
border-top-right-radius: 100%;
|
|
||||||
filter: blur(100px);
|
|
||||||
-webkit-filter: blur(100px);
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,7 +1,8 @@
|
|||||||
@layer base {
|
@layer base {
|
||||||
|
|
||||||
html[data-theme="light"] {
|
html[data-theme="light"] {
|
||||||
--ifm-background-color: white;
|
--custom-radial-blur: #e1e7fd;
|
||||||
|
--ifm-background-color: #fafafa;
|
||||||
--ifm-color-primary: #2563eb; /* New Primary Blue */
|
--ifm-color-primary: #2563eb; /* New Primary Blue */
|
||||||
--ifm-color-primary-dark: #204fcf; /* Darker Blue */
|
--ifm-color-primary-dark: #204fcf; /* Darker Blue */
|
||||||
--ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */
|
--ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */
|
||||||
@ -13,8 +14,10 @@
|
|||||||
--ifm-navbar-link-hover-color: inherit;
|
--ifm-navbar-link-hover-color: inherit;
|
||||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme="dark"] {
|
html[data-theme="dark"] {
|
||||||
--ifm-background-color: black;
|
--custom-radial-blur: #1d1b48;
|
||||||
|
--ifm-background-color: #18181b;
|
||||||
--ifm-color-primary: #ffffff; /* New Primary Blue */
|
--ifm-color-primary: #ffffff; /* New Primary Blue */
|
||||||
--ifm-color-primary-dark: #204fcf; /* Darker Blue */
|
--ifm-color-primary-dark: #204fcf; /* Darker Blue */
|
||||||
--ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */
|
--ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */
|
||||||
@ -24,12 +27,18 @@
|
|||||||
--ifm-color-primary-lightest: #3a8bff; /* Lightest Blue */
|
--ifm-color-primary-lightest: #3a8bff; /* Lightest Blue */
|
||||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code {
|
||||||
|
@apply text-sm;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply text-base;
|
@apply text-base;
|
||||||
@apply antialiased;
|
@apply antialiased;
|
||||||
@apply bg-white dark:bg-black;
|
@apply bg-[#FAFAFA] dark:bg-[#18181B];
|
||||||
@apply text-gray-800 dark:text-gray-300;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
@ -2,8 +2,12 @@
|
|||||||
@import "tailwindcss/components";
|
@import "tailwindcss/components";
|
||||||
@import "tailwindcss/utilities";
|
@import "tailwindcss/utilities";
|
||||||
|
|
||||||
@import "./typography.scss";
|
@import "./components/base.scss";
|
||||||
@import "./tweaks.scss";
|
@import "./components/typography.scss";
|
||||||
@import "./base.scss";
|
@import "./components/card.scss";
|
||||||
@import "./components.scss";
|
|
||||||
@import "./card.scss";
|
@import "./tweaks/navbar.scss";
|
||||||
|
@import "./tweaks/breadcrumb.scss";
|
||||||
|
@import "./tweaks/markdown.scss";
|
||||||
|
@import "./tweaks/redocusaurus.scss";
|
||||||
|
@import "./tweaks/sidebar.scss";
|
||||||
|
|||||||
@ -25,38 +25,6 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
|
||||||
@apply px-0 lg:h-16 border-b border-gray-200 dark:border-gray-800 bg-white/50 backdrop-blur-lg dark:bg-black/50 shadow-none;
|
|
||||||
|
|
||||||
.navbar__toggle {
|
|
||||||
width: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-sidebar__backdrop {
|
|
||||||
height: 100dvh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-sidebar {
|
|
||||||
height: 100dvh;
|
|
||||||
.navbar-sidebar__close {
|
|
||||||
width: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar__title {
|
|
||||||
@apply text-lg;
|
|
||||||
}
|
|
||||||
.navbar__brand {
|
|
||||||
margin-right: 24px;
|
|
||||||
&:hover {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.navbar__inner {
|
|
||||||
@apply container;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumbs__item {
|
.breadcrumbs__item {
|
||||||
position: relative;
|
position: relative;
|
||||||
&:first-child {
|
&:first-child {
|
||||||
|
|||||||
18
docs/src/styles/tweaks/breadcrumb.scss
Normal file
18
docs/src/styles/tweaks/breadcrumb.scss
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
.breadcrumbs {
|
||||||
|
@apply mb-8;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
position: relative;
|
||||||
|
&:first-child {
|
||||||
|
.breadcrumbs__link {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__link {
|
||||||
|
padding-top: 2px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
47
docs/src/styles/tweaks/markdown.scss
Normal file
47
docs/src/styles/tweaks/markdown.scss
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
.theme-doc-markdown {
|
||||||
|
a {
|
||||||
|
@apply text-blue-600 dark:text-blue-400 underline;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style: revert;
|
||||||
|
}
|
||||||
|
ol {
|
||||||
|
list-style: decimal;
|
||||||
|
}
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
padding-left: 16px;
|
||||||
|
li {
|
||||||
|
@apply leading-normal;
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
@apply mb-2;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
&:first-child {
|
||||||
|
@apply mb-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2 {
|
||||||
|
@apply mb-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-list-item {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
34
docs/src/styles/tweaks/navbar.scss
Normal file
34
docs/src/styles/tweaks/navbar.scss
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
.navbar {
|
||||||
|
@apply my-4 bg-transparent py-0 shadow-none top-4;
|
||||||
|
&:before {
|
||||||
|
width: 100%;
|
||||||
|
height: 16px;
|
||||||
|
top: -16px;
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
left: 0;
|
||||||
|
@apply dark:bg-[#09090B]/10 backdrop-blur-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__inner {
|
||||||
|
@apply border border-gray-300 dark:border-gray-800 rounded-lg bg-[#E4E4E7]/50 dark:bg-[#09090B]/50 backdrop-blur-md flex items-center h-14 px-8 relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
@apply flex items-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__brand {
|
||||||
|
&:hover {
|
||||||
|
@apply dark:text-white text-black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="searchBox_"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
23
docs/src/styles/tweaks/redocusaurus.scss
Normal file
23
docs/src/styles/tweaks/redocusaurus.scss
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
.redocusaurus {
|
||||||
|
.menu-content {
|
||||||
|
top: 80px !important;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-container {
|
||||||
|
ul > li > label {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul > li > ul > li > label {
|
||||||
|
background-color: transparent;
|
||||||
|
&:hover {
|
||||||
|
@apply dark:bg-gray-800/50 bg-gray-100;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
@apply dark:bg-gray-800/50 bg-gray-100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
41
docs/src/styles/tweaks/sidebar.scss
Normal file
41
docs/src/styles/tweaks/sidebar.scss
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
// * Classname from Docusaurus template
|
||||||
|
// * We just overide the styling with applied class from tailwind
|
||||||
|
|
||||||
|
[class*="docSidebarContainer_"] {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
@apply dark:border-gray-800 border-gray-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="sidebar_"] {
|
||||||
|
padding-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="sidebarViewport_"] {
|
||||||
|
top: 80px !important;
|
||||||
|
height: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="docItemCol_"] {
|
||||||
|
@apply lg:px-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
// * Including custom sidebar table of content
|
||||||
|
.table-of-contents {
|
||||||
|
@apply text-base py-0 dark:border-gray-800 border-gray-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__caret:before {
|
||||||
|
background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="codeBlockContainer_"] {
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="codeBlockTitle_"] {
|
||||||
|
border-bottom: 1px solid #52525a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="iconExternalLink_"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@ -47,7 +47,7 @@ export default function Layout(props) {
|
|||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{!noFooter && <Footer />}
|
{/* {!noFooter && <Footer />} */}
|
||||||
</LayoutProvider>
|
</LayoutProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,9 +7,6 @@ module.exports = {
|
|||||||
container: {
|
container: {
|
||||||
center: true,
|
center: true,
|
||||||
padding: "16px",
|
padding: "16px",
|
||||||
screens: {
|
|
||||||
"2xl": "1400px",
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: [
|
sans: [
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user