2026.es.pycon.org/src/layouts/Layout.astro at 509c160dcb09d38c9614ef100b665f0a6057843a · python-spain/2026.es.pycon.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
---
import Nav from '../components/Nav.astro'
import '../style/global.css'
import '@fontsource-variable/jetbrains-mono'
import '@fontsource-variable/outfit'
import { ClientRouter } from 'astro:transitions'

interface Props {
  title: string
  description?: string // Optional (?)
}
const { lang } = Astro.params || { lang: 'es' }
const { title, description = 'PyconES 2026' } = Astro.props
---

<!doctype html>
<html lang={lang as string}>
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content={description} />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
    <link rel="manifest" href="/favicon/site.webmanifest" />
    <meta name="generator" content={Astro.generator} />

    <title>{title}</title>

    <ClientRouter />

    <script is:inline>
      const theme = (() => {
        if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
          return localStorage.getItem('theme')
        }

        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
          return 'dark'
        }

        return 'light'
      })()

      if (theme === 'dark') {
        document.documentElement.classList.add('dark')
      } else {
        document.documentElement.classList.remove('dark')
      }
    </script>
  </head>

  <body
    class="bg-pycon-white dark:bg-pycon-black font-outfit text-pycon-black dark:text-pycon-white antialiased h-screen relative transition-colors duration-300"
  >
    <div
      class="fixed inset-0 bg-[url('/images/symbol-black-light.svg')] dark:bg-[url('/images/symbol-black-dark.svg')] bg-size-[80vh] bg-position-[140%_120%] bg-no-repeat opacity-5 pointer-events-none blur transition-colors duration-300"
    >
    </div>
    <Nav lang={lang as string} />

    <main class="relative z-10 flex flex-col justify-center container mx-auto p-4 md:p-8">
      <slot />
    </main>
  </body>
</html>

<style is:global>
  /* Global CSS styles (Vanilla CSS) */

  html {
    font-family: 'Outfit Variable', sans-serif;
    scroll-behavior: smooth; /* Smooth scroll when navigating by anchors (#) */
  }

  /* Scrollbar customization (optional, Midudev style) */
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--bg-color);
  }
  ::-webkit-scrollbar-thumb {
    background: #c6c6c6;
    border-radius: 5px;
  }
  .dark ::-webkit-scrollbar-thumb {
    background: #555554;
  }
  .dark ::-webkit-scrollbar-thumb:hover {
    background: #8e8e8d;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #8e8e8d;
  }
</style>