Details XD
This commit is contained in:
parent
82251d5272
commit
0befb1f4f1
@ -34,7 +34,7 @@ export function LangSwitcher() {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon" className="bg-inherit border-none text-content" dangerouslySetInnerHTML={{ __html: icons["lang"] }} />
|
||||
<Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons["lang"] }} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56">
|
||||
<DropdownMenuRadioGroup value={clang} onValueChange={clinkClang}>
|
||||
|
@ -10,6 +10,6 @@ import { icons } from "../lib/icons"
|
||||
export function NavButton({selected, variant}) {
|
||||
|
||||
return (
|
||||
<Button variant="outline" size="icon" className={cn("bg-inherit border-none text-content", selected ? "text-accent" : "text-content")} dangerouslySetInnerHTML={{ __html: icons[variant] }} />
|
||||
<Button variant="outline" size="icon" className={cn("bg-inherit border-none text-content", selected ? "text-accent hover:text-bkg" : "text-content hover:text-bkg")} dangerouslySetInnerHTML={{ __html: icons[variant] }} />
|
||||
)
|
||||
}
|
||||
|
@ -7,5 +7,7 @@ const { title, description } = dictionary[Astro.currentLocale];
|
||||
---
|
||||
|
||||
<SinglePage>
|
||||
<div class="flex flex-col h-screen">
|
||||
<ShowcaseTabs client:load />
|
||||
</div>
|
||||
</SinglePage>
|
||||
|
@ -43,8 +43,9 @@ const data = [{
|
||||
|
||||
export function ShowcaseTabs() {
|
||||
return (
|
||||
<Tabs defaultValue={data[0].value} className="h-full">
|
||||
|
||||
<Tabs defaultValue={data[0].value} className="h-[87%] bottom-0 flex flex-col">
|
||||
<div className="my-auto">
|
||||
<div>
|
||||
{data.map((item) => (
|
||||
<TabsContent value={item.value} className="">
|
||||
<Card className="h-full">
|
||||
@ -79,15 +80,14 @@ export function ShowcaseTabs() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
))
|
||||
}
|
||||
|
||||
))}
|
||||
<TabsList className={`grid w-full mt-4 grid-cols-${data.length}`}>
|
||||
{data.map((item) => (
|
||||
<TabsTrigger value={item.value}>{item.handle}</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Tabs>
|
||||
)
|
||||
}
|
||||
|
@ -33,7 +33,7 @@ export function ThemeSelector() {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon" className="bg-inherit border-none text-content" dangerouslySetInnerHTML={{ __html: icons[theme] }} />
|
||||
<Button variant="outline" size="icon" className="bg-inherit border-none text-content hover:text-bkg" dangerouslySetInnerHTML={{ __html: icons[theme] }} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-20">
|
||||
<DropdownMenuRadioGroup value={theme} onValueChange={newTheme}>
|
||||
|
@ -3,7 +3,7 @@ const { title, description, lang, themeOverride } = Astro.props;
|
||||
import { ViewTransitions } from 'astro:transitions';
|
||||
import Navbar from "../components/Navbar.astro";
|
||||
import "../style/index.css";
|
||||
import "../style/globals.css";
|
||||
//import "../style/globals.css";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
|
@ -1,71 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 100% 50%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--ring: 215 20.2% 65.1%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 224 71% 4%;
|
||||
--foreground: 213 31% 91%;
|
||||
|
||||
--muted: 223 47% 11%;
|
||||
--muted-foreground: 215.4 16.3% 56.9%;
|
||||
|
||||
--accent: 216 34% 17%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--popover: 224 71% 4%;
|
||||
--popover-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--border: 216 34% 17%;
|
||||
--input: 216 34% 17%;
|
||||
|
||||
--card: 224 71% 4%;
|
||||
--card-foreground: 213 31% 91%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 1.2%;
|
||||
|
||||
--secondary: 222.2 47.4% 11.2%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 63% 31%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--ring: 216 34% 17%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
}
|
@ -1,6 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/*
|
||||
Light Mode: https://www.realtimecolors.com/dashboard?colors=161618-f0f0f0-FFE500-dbddff-6120cf&fonts=Poppins-Poppins
|
||||
Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5-390068-ffe500&fonts=Poppins-Poppins
|
||||
@ -14,6 +15,22 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
|
||||
--color-secondary: 237deg, 100%, 93%;
|
||||
--color-accent: 262deg, 73%, 47%;
|
||||
--color-accent-red: 0deg, 84%, 60%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 47.4% 11.2%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 47.4% 11.2%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 100% 50%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--ring: 215 20.2% 65.1%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@ -25,6 +42,21 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
|
||||
--color-secondary: 273deg, 100%, 20%;
|
||||
--color-accent: 54deg, 100%, 50%;
|
||||
--color-accent-red: 0deg, 84%, 60%;
|
||||
|
||||
--background: 224 71% 4%;
|
||||
--foreground: 213 31% 91%;
|
||||
--input: 216 34% 17%;
|
||||
--muted: 223 47% 11%;
|
||||
--muted-foreground: 215.4 16.3% 56.9%;
|
||||
--popover: 224 71% 4%;
|
||||
--popover-foreground: 215 20.2% 65.1%;
|
||||
--border: 216 34% 17%;
|
||||
--card: 224 71% 4%;
|
||||
--card-foreground: 213 31% 91%;
|
||||
--destructive: 0 63% 31%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--ring: 216 34% 17%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,6 +68,21 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
|
||||
--color-secondary: 273deg, 100%, 20%;
|
||||
--color-accent: 54deg, 100%, 50%;
|
||||
--color-accent-red: 0deg, 84%, 60%;
|
||||
|
||||
--background: 224 71% 4%;
|
||||
--foreground: 213 31% 91%;
|
||||
--input: 216 34% 17%;
|
||||
--muted: 0 0% 15%;
|
||||
--muted-foreground: 215.4 16.3% 56.9%;
|
||||
--popover: 224 71% 4%;
|
||||
--popover-foreground: 215 20.2% 65.1%;
|
||||
--border: 9 20% 21%;
|
||||
--card: 0 0% 15%;
|
||||
--card-foreground: 213 31% 91%;
|
||||
--destructive: 0 63% 31%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--ring: 216 34% 17%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
:root[data-theme="theme_light"] {
|
||||
@ -46,5 +93,20 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
|
||||
--color-secondary: 237deg, 100%, 93%;
|
||||
--color-accent: 262deg, 73%, 47%;
|
||||
--color-accent-red: 0deg, 84%, 60%;
|
||||
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 47.4% 11.2%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--muted: 210 4% 85%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 47.4% 11.2%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 100% 50%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--ring: 215 20.2% 65.1%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user