M6C9.de/src/components/Head.pug

head
	// region SEO
	meta(charset=head.charset)
	meta(name="viewport", content=head.viewport)
	title= head.title
	meta(name="description", content=head.description)
	meta(name="author", content=head.author)
	meta(name="keywords", content=head.keywords)
	meta(name="robots", content=head.robots)
	meta(name="revisit-after", content=head.revisitAfter)
	meta(name="language", content=head.language)
	meta(name="distribution", content=head.distribution)
	meta(name="rating", content=head.rating)
	// endregion

	// region Open Graph / Facebook
	meta(property="og:type", content=head.ogType)
	meta(property="og:url", content=head.ogUrl)
	meta(property="og:title", content=head.ogTitle)
	meta(property="og:description", content=head.ogDescription)
	meta(property="og:image", content=head.ogImage)
	// endregion

	// region Twitter
	meta(property="twitter:card", content=head.twitterCard)
	meta(property="twitter:url", content=head.twitterUrl)
	meta(property="twitter:title", content=head.twitterTitle)
	meta(property="twitter:description", content=head.twitterDescription)
	meta(property="twitter:image", content=head.twitterImage)
	// endregion

	favicon(href="/public/favicon.ico", rel="icon", type="image/x-icon")
	link(rel="apple-touch-icon", sizes="180x180", href="/public/apple-touch-icon.png")
	link(rel="icon", type="image/png", sizes="32x32", href="/public/favicon-32x32.png")
	link(rel="icon", type="image/png", sizes="16x16", href="/public/favicon-16x16.png")
	link(rel="manifest", href="/public/site.webmanifest")

	// region Schema.org for Google
	script(type="application/ld+json").
		{
			"@context": "https://schema.org",
			"@type": "Person",
			"name": "Michael W. Czechowski",
			"jobTitle": "Web Technologies & Software Architecture",
			"url": "https://dailysh.it",
			"sameAs": ["https://github.com/nextlevelshit", "https://www.linkedin.com/in/michael-werner-czechowski/", "https://www.xing.com/profile/Michael_Czechowski"]
		}
	// endregion

	// region tailwindcss
	script(src="https://cdn.tailwindcss.com")
	script.
		tailwind.config = {
			darkMode: "media",
			theme: {
				fontFamily: {
					mono: ["Roboto Mono", "monospace"],
					serif: ["Libre Baskerville", "serif"],
					sans: ["Afacad Flux", "sans-serif"],
				},
				extend: {
					fontSize: {
						sm: "1rem",
						base: "1.25rem",
						xl: "1.563rem",
						"2xl": "1.953rem",
						"3xl": "2.441rem",
						"4xl": "3.052rem",
					},
					colors: {
						"nls-green": "#79C28D",
						"nls-blue": "#5A99C3",
						"nls-violet": "#7E86CA",
						"nls-purple": "#C18FBD",
						"nls-pink": "#EC7A9A",
						"nls-red": "#E76F51",
						"nls-orange": "#F9A03F",
						"nls-yellow": "#F9C74F",
						"nls-black": "#0D0E11",
						"nls-white": "#f8fafc",
						white: "#f9f9f9",
						black: "#0f0f11",
						gray: "#6b7280",
						deepblack: "#0a0a0c",
						deepwhite: "#fefefe",
					},
				},
			},
		};
	// endregion

	// region Custom CSS
	style.
		/* Afacad Flux */
		@font-face {
			font-family: "Afacad Flux";
			src: url("/public/fonts/AfacadFlux-Medium.ttf") format("truetype");
			font-weight: 500;
			font-style: normal;
			font-display: swap;
		}

		@font-face {
			font-family: "Afacad Flux";
			src: url("/public/fonts/AfacadFlux-SemiBold.ttf") format("truetype");
			font-weight: 600;
			font-style: normal;
			font-display: swap;
		}

		/* Libre Baskerville */
		@font-face {
			font-family: "Libre Baskerville";
			src: url("/public/fonts/LibreBaskerville-Regular.ttf") format("truetype");
			font-weight: 400;
			font-style: normal;
			font-display: swap;
		}

		@font-face {
			font-family: "Libre Baskerville";
			src: url("/public/fonts/LibreBaskerville-Bold.ttf") format("truetype");
			font-weight: 700;
			font-style: normal;
			font-display: swap;
		}

		/* Roboto Mono */
		@font-face {
			font-family: "Roboto Mono";
			src: url("/public/fonts/RobotoMono-Regular.ttf") format("truetype");
			font-weight: 400;
			font-style: normal;
			font-display: swap;
		}

		@font-face {
			font-family: "Roboto Mono";
			src: url("/public/fonts/RobotoMono-SemiBold.ttf") format("truetype");
			font-weight: 600;
			font-style: normal;
			font-display: swap;
		}

		ul {
			list-style-position: outside !important;
			margin-left: 1.22rem;
		}

		section ~ section,
		section ~ footer,
		section ~ header {
			/*padding-top: 4rem;*/
		}

		p a {
			text-decoration: underline;
		}

		p a:hover,
		p a:focus {
			outline-offset: 2px;
			outline: 1px currentColor solid;
			border-radius: 0.2rem;
		}

		.carousel-track {
			/* Hide scrollbars but keep functionality */
			scrollbar-width: none;
			-ms-overflow-style: none;
		}

		.carousel-track::-webkit-scrollbar {
			display: none;
		}

		/* Smooth button hover states */
		.carousel-btn {
			backdrop-filter: blur(4px);
			transition: all 0.2s ease;
		}

		.carousel-btn:hover {
			transform: translateY(-50%) scale(1.05);
		}

		.carousel-btn:active {
			transform: translateY(-50%) scale(0.95);
		}

	script(async, defer, data-website-id=head.umamiId, src=head.umamiSrc)

	script.
		window.visitDuration = Date.now();

		const getVisitDuration = () => {
			return Math.floor((Date.now() - window.visitDuration) / 1000);
		};

		// Check for saved user preference, if any, on load of the website
		const darkMode = localStorage.getItem("darkMode");

		// If no preference is set, check system preference
		if (darkMode === null) {
			if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
				document.documentElement.classList.add("dark");
				localStorage.setItem("darkMode", "dark");
			}
		} else if (darkMode === "dark") {
			document.documentElement.classList.add("dark");
		}

		function toggleDarkMode() {
			if (document.documentElement.classList.contains("dark")) {
				document.documentElement.classList.remove("dark");
				localStorage.setItem("darkMode", "light");
			} else {
				document.documentElement.classList.add("dark");
				localStorage.setItem("darkMode", "dark");
			}
		}