Merge pull request #288 from janhq/css-drake
Footer background, CTA & Highlight colors
This commit is contained in:
commit
62de74b602
@ -51,7 +51,7 @@ export default function Dropdown() {
|
|||||||
return (
|
return (
|
||||||
<div className="inline-flex align-items-stretch">
|
<div className="inline-flex align-items-stretch">
|
||||||
<a
|
<a
|
||||||
className="cursor-pointer relative inline-flex items-center rounded-l-md border-0 px-3.5 py-2.5 text-base font-semibold text-white bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-500 dark:hover:bg-indigo-400 hover:text-white"
|
className="cursor-pointer relative inline-flex items-center rounded-l-md border-0 px-3.5 py-2.5 text-base font-semibold text-white bg-blue-600 dark:bg-blue-500 hover:bg-blue-500 dark:hover:bg-blue-400 hover:text-white"
|
||||||
href={defaultSystem.href}
|
href={defaultSystem.href}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
@ -62,7 +62,7 @@ export default function Dropdown() {
|
|||||||
{defaultSystem.name}
|
{defaultSystem.name}
|
||||||
</a>
|
</a>
|
||||||
<Menu as="div" className="relative -ml-px block">
|
<Menu as="div" className="relative -ml-px block">
|
||||||
<Menu.Button className="cursor-pointer relative inline-flex items-center rounded-r-md border-0 border-l border-gray-300 active:border-l active:border-white h-full text-white bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-500 dark:hover:bg-indigo-400">
|
<Menu.Button className="cursor-pointer relative inline-flex items-center rounded-r-md border-0 border-l border-gray-300 active:border-l active:border-white h-full text-white bg-blue-600 dark:bg-blue-500 hover:bg-blue-500 dark:hover:bg-blue-400">
|
||||||
<span className="sr-only">Open OS options</span>
|
<span className="sr-only">Open OS options</span>
|
||||||
<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
|
<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
|
||||||
</Menu.Button>
|
</Menu.Button>
|
||||||
@ -75,7 +75,7 @@ export default function Dropdown() {
|
|||||||
leaveFrom="transform opacity-100 scale-100"
|
leaveFrom="transform opacity-100 scale-100"
|
||||||
leaveTo="transform opacity-0 scale-95"
|
leaveTo="transform opacity-0 scale-95"
|
||||||
>
|
>
|
||||||
<Menu.Items className="absolute right-0 z-10 mt-2 w-72 text-left origin-top-right rounded-md bg-indigo-600 dark:bg-indigo-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
<Menu.Items className="absolute right-0 z-10 mt-2 w-72 text-left origin-top-right rounded-md bg-blue-600 dark:bg-blue-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||||
<div className="py-1">
|
<div className="py-1">
|
||||||
{systems.map((system) => (
|
{systems.map((system) => (
|
||||||
<Menu.Item key={system.name}>
|
<Menu.Item key={system.name}>
|
||||||
@ -84,7 +84,7 @@ export default function Dropdown() {
|
|||||||
href={system.href}
|
href={system.href}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
active
|
active
|
||||||
? "bg-indigo-500 dark:hover:bg-indigo-400 hover:text-white"
|
? "bg-blue-500 dark:hover:bg-blue-400 hover:text-white"
|
||||||
: "text-white",
|
: "text-white",
|
||||||
"block px-4 py-2"
|
"block px-4 py-2"
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -60,7 +60,7 @@ export default function HomepageHero() {
|
|||||||
<Dropdown />
|
<Dropdown />
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="cursor-pointer relative inline-flex items-center rounded px-3.5 py-2 dark:py-2.5 text-base font-semibold text-indigo-600 bg-white border-indigo-600 dark:border-0 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white"
|
className="cursor-pointer relative inline-flex items-center rounded px-3.5 py-2 dark:py-2.5 text-base font-semibold text-blue-600 bg-white border-blue-600 dark:border-0 hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
window.open(
|
window.open(
|
||||||
"https://github.com/janhq/jan",
|
"https://github.com/janhq/jan",
|
||||||
|
|||||||
@ -25,7 +25,7 @@
|
|||||||
|
|
||||||
/* For readability concerns, you should choose a lighter palette in dark mode. */
|
/* For readability concerns, you should choose a lighter palette in dark mode. */
|
||||||
[data-theme="dark"] {
|
[data-theme="dark"] {
|
||||||
--ifm-color-primary: #2563EB; /* 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 */
|
||||||
--ifm-color-primary-darkest: #163C9D; /* Darkest Blue */
|
--ifm-color-primary-darkest: #163C9D; /* Darkest Blue */
|
||||||
@ -34,3 +34,13 @@
|
|||||||
--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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer.footer--dark {
|
||||||
|
--ifm-footer-background-color: #1a212f;
|
||||||
|
--ifm-footer-color: var(--ifm-footer-link-color);
|
||||||
|
--ifm-footer-link-color: var(--ifm-color-secondary);
|
||||||
|
--ifm-footer-title-color: var(--ifm-color-white);
|
||||||
|
|
||||||
|
background-color: var(--ifm-footer-background-color);
|
||||||
|
color: var(--ifm-footer-color)
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user