diff --git a/src/components/LanguagePicker.astro b/src/components/LanguagePicker.astro index e7f11ae..08df5be 100644 --- a/src/components/LanguagePicker.astro +++ b/src/components/LanguagePicker.astro @@ -35,7 +35,7 @@ const getPathForLang = (targetLang: string) => { { variant === 'desktop' ? (
@@ -50,7 +50,7 @@ const getPathForLang = (targetLang: string) => { 'px-2 py-1 text-sm font-outfit rounded transition-colors outline-none', lang === currentLang ? 'text-pycon-red-100 font-bold underline' - : 'text-pycon-orange-500 hover:text-white focus-visible:text-pycon-red-500', + : 'text-pycon-orange hover:text-pycon-black dark:hover:text-white focus-visible:text-pycon-red-75', ]} > {t.label[lang as keyof typeof t.label]} @@ -58,7 +58,11 @@ const getPathForLang = (targetLang: string) => { ))}
) : ( -
+
Idioma
{languages.map((lang) => ( @@ -67,12 +71,12 @@ const getPathForLang = (targetLang: string) => { hreflang={lang} lang={lang} aria-current={lang === currentLang ? 'page' : undefined} - aria-label={`${t['labelariadesc']} ${t.label[lang as keyof typeof t.label]}`} + aria-label={t['labelariadesc'][lang as keyof typeof t.labelariadesc]} class:list={[ 'px-3 py-2 text-sm font-outfit rounded transition-colors outline-none', lang === currentLang - ? 'bg-blue-600 text-white font-bold' - : 'bg-white/5 text-slate-300 hover:bg-white/10 focus-visible:bg-blue-600 focus-visible:text-white', + ? 'bg-pycon-orange text-white font-bold' + : 'bg-pycon-black/5 dark:bg-white/5 text-slate-600 dark:text-slate-300 hover:bg-pycon-black/10 dark:hover:bg-white/10 focus-visible:bg-pycon-orange focus-visible:text-white', ]} > {t.label[lang as keyof typeof t.label]} diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro index 479f8d1..6437ccc 100644 --- a/src/components/Navigation.astro +++ b/src/components/Navigation.astro @@ -1,6 +1,7 @@ --- import ResponsiveToggle from './ResponsiveToggle.astro' import LanguagePicker from './LanguagePicker.astro' +import ThemeToggle from './ThemeToggle.astro' import { getRelativeLocaleUrl } from 'astro:i18n' import { menuTexts } from '../i18n/menu' @@ -55,13 +56,13 @@ const { items } = menuTexts[currentLang]
diff --git a/src/components/ResponsiveToggle.astro b/src/components/ResponsiveToggle.astro index 9eff0e3..375414e 100644 --- a/src/components/ResponsiveToggle.astro +++ b/src/components/ResponsiveToggle.astro @@ -18,7 +18,7 @@ const { class: className } = Astro.props + + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index a4906d0..31186d5 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -28,16 +28,36 @@ const { title, description = 'PyconES 2026' } = Astro.props {title} + + - +
- + \ No newline at end of file diff --git a/src/style/global.css b/src/style/global.css index e954f05..d1e66c5 100644 --- a/src/style/global.css +++ b/src/style/global.css @@ -1,5 +1,7 @@ @import 'tailwindcss'; +@custom-variant dark (&:where(.dark, .dark *)); + html { scroll-behavior: smooth; scroll-padding-top: 6rem; /* Adjust based on your header height */ @@ -53,9 +55,50 @@ html { --color-pycon-red-50: #fca09c; --color-pycon-red-25: #fdcfcd; + --color-pycon-mute: #cc6600; + --color-pycon-mute-100: #cc6600; + + --color-pycon-gray: #4a4a48; + --color-pycon-gray-100: #4a4a48; + --color-pycon-black: #1d1d1b; --color-pycon-black-100: #1d1d1b; --color-pycon-black-75: #555554; --color-pycon-black-50: #8e8e8d; --color-pycon-black-25: #c6c6c6; + + --color-pycon-white: #ffffff; + + /*DS colors*/ + --color-pantone-151c: --color-pycon-orange-100; + --color-pantone-123c: --color-pycon-yellow-100; + --color-pantone-warm-red: --color-pycon-red-100; + --color-pantone-black-c: --color-pycon-black-100; + --color-pantone-yellow-100: --color-pycon-yellow; + --color-pantone-yellow-75: --color-pycon-yellow-75; + --color-pantone-yellow-50: --color-pycon-yellow-50; + --color-pantone-yellow-25: --color-pycon-yellow-25; + --color-pantone-warm-red-100: --color-pycon-red; + --color-pantone-warm-red-75: --color-pycon-red-75; + --color-pantone-warm-red-50: --color-pycon-red-50; + --color-pantone-warm-red-25: --color-pycon-red-25; + + --color-tier-main: --color-pycon-yellow; + --color-tier-platinum: --color-pycon-orange; + --color-tier-gold: --color-pycon-red; + --color-tier-silver: --color-pycon-mute; + --color-tier-bronze: --color-pycon-gray; +} + +@layer base { + :root { + --bg-color: #ffffff; + --text-color: #1d1d1b; + --bg-symbol: url('/images/symbol-black-dark.svg'); + color-scheme: light dark; + } + .dark { + --bg-color: #1d1d1b; + --text-color: #ffffff; + } } diff --git a/tailwind.config.mjs b/tailwind.config.mjs index b9b98ef..b62efaa 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -1,5 +1,6 @@ /** @type {import('tailwindcss').Config} */ export default { + darkMode: 'class', content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], plugins: [], }