From 8586b3ec9ed448d3e12fbdb077eeae8130d85984 Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Tue, 28 Nov 2023 13:19:45 +0700 Subject: [PATCH] Improve structure scss --- docs/src/pages/index.js | 270 ++---------------- docs/src/styles/components.scss | 18 -- docs/src/styles/{ => components}/base.scss | 17 +- docs/src/styles/{ => components}/card.scss | 0 .../styles/{ => components}/typography.scss | 0 docs/src/styles/main.scss | 14 +- docs/src/styles/tweaks.scss | 32 --- docs/src/styles/tweaks/breadcrumb.scss | 18 ++ docs/src/styles/tweaks/markdown.scss | 47 +++ docs/src/styles/tweaks/navbar.scss | 34 +++ docs/src/styles/tweaks/redocusaurus.scss | 23 ++ docs/src/styles/tweaks/sidebar.scss | 41 +++ docs/src/theme/Layout/index.js | 2 +- docs/tailwind.config.js | 3 - 14 files changed, 203 insertions(+), 316 deletions(-) delete mode 100644 docs/src/styles/components.scss rename docs/src/styles/{ => components}/base.scss (87%) rename docs/src/styles/{ => components}/card.scss (100%) rename docs/src/styles/{ => components}/typography.scss (100%) create mode 100644 docs/src/styles/tweaks/breadcrumb.scss create mode 100644 docs/src/styles/tweaks/markdown.scss create mode 100644 docs/src/styles/tweaks/navbar.scss create mode 100644 docs/src/styles/tweaks/redocusaurus.scss create mode 100644 docs/src/styles/tweaks/sidebar.scss diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index 986fff9a2..f0f025e67 100644 --- a/docs/src/pages/index.js +++ b/docs/src/pages/index.js @@ -16,266 +16,30 @@ export default function Home() { const { siteConfig } = useDocusaurusContext(); return ( <> - + {/* */} -
-
- -
-
-
- {/* TODO: Add upcoming events here */} - {/* */} -

- Own your AI -

-

- A   - - free, open-source - -  alternative to OpenAI -
-  that runs on your  - - personal computer - -

- -
- - -
-
- -
-
- -
-
-
-
-
-
-

AI that you control

-

- Private. Local. Infinitely Customizable. -

-
-
- Element -
-
Personal AI that runs on your computer
-

- Jan runs directly on your local machine, offering privacy, - convenience and customizability. -

- -
-
-
-
-
Extendable via App and Plugin framework
-

- Jan has a versatile app and plugin framework, allowing you - to customize it to your needs. -

-
- -
-
-
-
- Private and offline, your data never leaves your machine -
-

- Your conversations and data are with an AI that runs on your - computer, where only you have access. -

-
- -
-
-
-
No subscription fees, the AI runs on your computer
-

- Say goodbye to monthly subscriptions or usage-based APIs. - Jan runs 100% free on your own hardware. -

-
- -
-
-
- -
-
-
-

- Your AI, forever. +
+
+
+
+

+ Own your AI

-

- Apps come and go, but your AI and data should last.{" "} +

+ Jan is an open-source alternative to ChatGPT that runs on your + own computer

-
-
-
- Icon - Lock -

- Jan uses open, standard and non-proprietary files stored - locally on your device. -

-
-
- Icon - Camera -

- You have total control over your AI, which means you can - use Jan offline and switch to another app easily if you - want. -

-
-
-
- -
- -

100% free on your own hardware

- -
-
-
- -
-

- We are open-source.
Join Jan community. -

-
-
- -
-
- Discord logo -
- -
- Join our Discord -
- -
- - -
-
- -
-
- View Github -
- Github Element -
- +
+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Error explicabo aperiam molestias neque quod ad id dolorum + adipisci dicta magni possimus, tempore temporibus magnam nisi + harum veritatis eaque molestiae suscipit. +

diff --git a/docs/src/styles/components.scss b/docs/src/styles/components.scss deleted file mode 100644 index 3583c258c..000000000 --- a/docs/src/styles/components.scss +++ /dev/null @@ -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; - } -} diff --git a/docs/src/styles/base.scss b/docs/src/styles/components/base.scss similarity index 87% rename from docs/src/styles/base.scss rename to docs/src/styles/components/base.scss index b94081d66..31a09e914 100644 --- a/docs/src/styles/base.scss +++ b/docs/src/styles/components/base.scss @@ -1,7 +1,8 @@ @layer base { 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-dark: #204fcf; /* Darker Blue */ --ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */ @@ -13,8 +14,10 @@ --ifm-navbar-link-hover-color: inherit; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); } + 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-dark: #204fcf; /* Darker Blue */ --ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */ @@ -24,12 +27,18 @@ --ifm-color-primary-lightest: #3a8bff; /* Lightest Blue */ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } + + pre, + code { + @apply text-sm; + } + body { @apply text-base; @apply antialiased; - @apply bg-white dark:bg-black; - @apply text-gray-800 dark:text-gray-300; + @apply bg-[#FAFAFA] dark:bg-[#18181B]; } + img { pointer-events: none; } diff --git a/docs/src/styles/card.scss b/docs/src/styles/components/card.scss similarity index 100% rename from docs/src/styles/card.scss rename to docs/src/styles/components/card.scss diff --git a/docs/src/styles/typography.scss b/docs/src/styles/components/typography.scss similarity index 100% rename from docs/src/styles/typography.scss rename to docs/src/styles/components/typography.scss diff --git a/docs/src/styles/main.scss b/docs/src/styles/main.scss index 459a1197b..216b960d3 100644 --- a/docs/src/styles/main.scss +++ b/docs/src/styles/main.scss @@ -2,8 +2,12 @@ @import "tailwindcss/components"; @import "tailwindcss/utilities"; -@import "./typography.scss"; -@import "./tweaks.scss"; -@import "./base.scss"; -@import "./components.scss"; -@import "./card.scss"; +@import "./components/base.scss"; +@import "./components/typography.scss"; +@import "./components/card.scss"; + +@import "./tweaks/navbar.scss"; +@import "./tweaks/breadcrumb.scss"; +@import "./tweaks/markdown.scss"; +@import "./tweaks/redocusaurus.scss"; +@import "./tweaks/sidebar.scss"; diff --git a/docs/src/styles/tweaks.scss b/docs/src/styles/tweaks.scss index d5d016436..3531e8397 100644 --- a/docs/src/styles/tweaks.scss +++ b/docs/src/styles/tweaks.scss @@ -25,38 +25,6 @@ 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 { position: relative; &:first-child { diff --git a/docs/src/styles/tweaks/breadcrumb.scss b/docs/src/styles/tweaks/breadcrumb.scss new file mode 100644 index 000000000..9091f8386 --- /dev/null +++ b/docs/src/styles/tweaks/breadcrumb.scss @@ -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; + } +} diff --git a/docs/src/styles/tweaks/markdown.scss b/docs/src/styles/tweaks/markdown.scss new file mode 100644 index 000000000..7e8e33871 --- /dev/null +++ b/docs/src/styles/tweaks/markdown.scss @@ -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; +} diff --git a/docs/src/styles/tweaks/navbar.scss b/docs/src/styles/tweaks/navbar.scss new file mode 100644 index 000000000..96c074455 --- /dev/null +++ b/docs/src/styles/tweaks/navbar.scss @@ -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; + } +} diff --git a/docs/src/styles/tweaks/redocusaurus.scss b/docs/src/styles/tweaks/redocusaurus.scss new file mode 100644 index 000000000..b2cff9ba7 --- /dev/null +++ b/docs/src/styles/tweaks/redocusaurus.scss @@ -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; + } + } + } +} diff --git a/docs/src/styles/tweaks/sidebar.scss b/docs/src/styles/tweaks/sidebar.scss new file mode 100644 index 000000000..a0e229808 --- /dev/null +++ b/docs/src/styles/tweaks/sidebar.scss @@ -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; +} diff --git a/docs/src/theme/Layout/index.js b/docs/src/theme/Layout/index.js index 22c4cc131..15fece0f6 100644 --- a/docs/src/theme/Layout/index.js +++ b/docs/src/theme/Layout/index.js @@ -47,7 +47,7 @@ export default function Layout(props) {
- {!noFooter &&