refactored css for header

src/components/BaseLayout/BaseLayout.astro

@@ -7,7 +7,7 @@ import HeaderBanner from "@components/HeaderBanner";
 import UIString from "@components/UIString";
 ---
 
-<body>
+<body data-is-site-under-construction={IS_SITE_UNDER_CONSTRUCTION && "true"}>
 	{
 		IS_SITE_UNDER_CONSTRUCTION && (
 			<HeaderBanner>

src/components/Header/Header.astro

@@ -7,21 +7,20 @@ import UIString from "@components/UIString";
 import TranslatedLink from "@components/TranslatedLink";
 import LanguageSelect from "@components/LanguageSelect";
 import NavToggle from "./NavToggle";
-import "./Header.scss";
 
 const { name, nav, contacts } = SITE_METADATA;
 const { pathname } = Astro.url;
 ---
 
-<header class={`header${IS_SITE_UNDER_CONSTRUCTION ? " header-banner" : ""}`}>
+<header {...(IS_SITE_UNDER_CONSTRUCTION ? { style: 'top: 45px;' } : {})}>
 	<div class="container">
-		<div class="header__logo">
+		<div class="logo">
 			<TranslatedLink to={"/"}>
 				{name}
 			</TranslatedLink>
 		</div>
-		<nav class="header__nav">
+		<nav>
-			<ul class="header__nav-links">
+			<ul>
 				{
 					nav.map((link) => (
 						<li>
@@ -32,7 +31,7 @@ const { pathname } = Astro.url;
 					))
 				}
 			</ul>
-			<div class="header__nav-contacts">
+			<div class="contacts">
 				<a href={"mailto:" + contacts.email}>
 					Email
 					<Icon name="email" width="18" height="18" />
@@ -46,7 +45,7 @@ const { pathname } = Astro.url;
 					<Icon name="telegram" width="18" height="18" />
 				</a>
 			</div>
-			<div class="flex header__nav-settings">
+			<div class="flex settings">
 				<LanguageSelect />
 				<ThemeSwitcher client:visible />
 			</div>
@@ -54,3 +53,126 @@ const { pathname } = Astro.url;
 		<NavToggle client:visible />
 	</div>
 </header>
+
+<style lang="scss">
+	header {
+		position: sticky;
+		top: 0;
+		border-bottom: 1px solid var(--border-color);
+		background-color: var(--background-header-color);
+		padding-top: 13.5px;
+		padding-bottom: 13.5px;
+		user-select: none;
+		z-index: 9999;
+		& .container {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		& .logo a {
+			text-decoration: none;
+			font-weight: 600;
+			font-size: var(--font-size-lg);
+			color: var(--font-color);
+			&:hover {
+				text-decoration: underline;
+				text-decoration-thickness: 2px;
+				text-underline-offset: 5px;
+			}
+		}
+		& nav {
+			display: flex;
+			align-items: center;
+			& ul {
+				display: flex;
+				list-style: none;
+				column-gap: 20px;
+				margin: 0;
+				padding: 0;
+				margin-right: 35px;
+				& li a {
+					display: inline-block;
+					font-weight: 500;
+					color: var(--font-color);
+					text-decoration: none;
+					text-transform: lowercase;
+					&:hover,
+					&.active {
+						color: var(--color-blue-500);
+						text-decoration: underline;
+						text-decoration-thickness: 2px;
+						text-underline-offset: 4px;
+					}
+				}
+			}
+			& .contacts {
+				display: flex;
+				align-items: center;
+				column-gap: 10px;
+				margin-right: 30px;
+				& a {
+					text-decoration: none;
+					font-size: 0;
+					&:hover {
+						opacity: var(--opacity-hover);
+					}
+				}
+			}
+			& .settings {
+				column-gap: 13.5px;
+			}
+		}
+	}
+
+	@media screen and (max-width: 768px) {
+		header {
+			padding: 10px 0;
+			& nav {
+				display: none;
+			}
+		}
+
+		body[data-is-mobile-open="true"] {
+			overflow-y: hidden;
+			touch-action: none;
+			& header {
+				padding: 15px 0;
+				background-color: var(--background-header-color);
+				position: fixed;
+				right: 0;
+				left: 0;
+				top: 0;
+				bottom: 0;
+				height: 100%;
+				z-index: 9999;
+				& .container {
+					flex-direction: column;
+					row-gap: 3rem;
+				}
+				& .logo {
+					align-self: flex-start;
+				}
+				& nav {
+					display: block;
+					& ul {
+						display: block;
+						text-align: center;
+						margin: 0;
+						& li {
+							margin-bottom: 30px;
+							& a {
+								font-size: var(--font-size-xl);
+							}
+						}
+					}
+					& .contacts {
+						margin-right: 0;
+						margin-top: 2rem;
+						justify-content: center;
+					}
+				}
+			}
+		}
+	}
+</style>

src/components/Header/Header.scss

@@ -1,144 +0,0 @@
-.header {
-	position: sticky;
-	top: 0;
-	border-bottom: 1px solid var(--border-color);
-	background-color: var(--background-header-color);
-	padding-top: 13.5px;
-	padding-bottom: 13.5px;
-	user-select: none;
-	z-index: 9999;
-	& .container {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	&__logo a {
-		text-decoration: none;
-		font-weight: 600;
-		font-size: var(--font-size-lg);
-		color: var(--font-color);
-		&:hover {
-			text-decoration: underline;
-			text-decoration-thickness: 2px;
-			text-underline-offset: 5px;
-		}
-	}
-	&__nav {
-		display: flex;
-		align-items: center;
-		& ul {
-			display: flex;
-			list-style: none;
-			column-gap: 20px;
-			margin: 0;
-			padding: 0;
-			margin-right: 35px;
-			& li a {
-				display: inline-block;
-				font-weight: 500;
-				color: var(--font-color);
-				text-decoration: none;
-				text-transform: lowercase;
-				&:hover,
-				&.active {
-					color: var(--color-blue-500);
-					text-decoration: underline;
-					text-decoration-thickness: 2px;
-					text-underline-offset: 4px;
-				}
-			}
-		}
-		&-contacts {
-			display: flex;
-			align-items: center;
-			column-gap: 10px;
-			margin-right: 30px;
-			& a {
-				text-decoration: none;
-				font-size: 0;
-				&:hover {
-					opacity: var(--opacity-hover);
-				}
-			}
-		}
-		&-settings {
-			column-gap: 13.5px;
-		}
-	}
-}
-
-@media screen and (max-width: 768px) {
-	.header {
-		padding: 10px 0;
-		&__nav {
-			display: none;
-		}
-	}
-
-	body[data-is-mobile-open="true"] {
-		overflow-y: hidden;
-		touch-action: none;
-		& .header {
-			padding: 15px 0;
-			background-color: var(--background-header-color);
-			position: fixed;
-			right: 0;
-			left: 0;
-			top: 0;
-			bottom: 0;
-			height: 100%;
-			z-index: 9999;
-			& .container {
-				flex-direction: column;
-				row-gap: 3rem;
-			}
-			&__logo {
-				align-self: flex-start;
-			}
-			&__nav {
-				display: block;
-				&-links {
-					display: block;
-					text-align: center;
-					margin: 0;
-					& li {
-						margin-bottom: 30px;
-						& a {
-							font-size: var(--font-size-xl);
-						}
-					}
-				}
-				&-contacts {
-					margin-right: 0;
-					margin-top: 2rem;
-					justify-content: center;
-				}
-			}
-			& .nav-toggle {
-				position: absolute;
-				right: var(--content-padding);
-			}
-			& .theme-switcher {
-				display: block;
-				position: absolute;
-				bottom: 45px;
-				right: 2.2rem;
-				& svg {
-					width: 36px;
-					height: 36px;
-				}
-			}
-			& .language-select {
-				position: absolute;
-				bottom: 115px;
-				right: 2.2rem;
-				& svg,
-				& select {
-					height: 36px;
-					width: 36px;
-				}
-			}
-		}
-	}
-}

src/components/Header/NavToggle/NavToggle.scss

@@ -13,3 +13,10 @@
 		display: none;
 	}
 }
+
+body[data-is-mobile-open="true"] {
+	.nav-toggle {
+		position: absolute;
+		right: var(--content-padding);
+	}
+}

src/components/HeaderBanner/HeaderBanner.astro

@@ -1,13 +1,9 @@
-<div class="banner-wrapper">
+<div>
 	<span><slot /></span>
 </div>
 
-<style lang="scss" is:global>
+<style lang="scss">
-	.header.header-banner {
+	div {
-		top: 45px;
-	}
-
-	.banner-wrapper {
 		padding: 12px 0;
 		min-height: 45px;
 		text-align: center;
@@ -17,18 +13,4 @@
 		top: 0;
 		z-index: 99999;
 	}
-
-	@media screen and (max-width: 768px) {
-		body[data-is-mobile-open="true"] {
-			& .header.header-banner {
-				margin-top: 45px;
-				& .language-select {
-					bottom: 145px;
-				}
-				& .theme-switcher {
-					bottom: 80px;
-				}
-			}
-		}
-	}
 </style>

src/components/LanguageSelect/LanguageSelect.astro

@@ -1,13 +1,13 @@
 ---
 import { Icon } from "astro-icon";
-import { DEFAULT_LANGUAGE } from "@root/config";
+import { DEFAULT_LANGUAGE, IS_SITE_UNDER_CONSTRUCTION } from "@root/config";
 import languages from "@i18n/languages";
 import { getLanguageFromURL } from "@root/utils";
 
 const lang = getLanguageFromURL(Astro.url.pathname);
 ---
 
-<div class="flex language-select">
+<div class="flex language-select" {...(IS_SITE_UNDER_CONSTRUCTION ? { style: 'bottom: 145px;' } : {})}>
 	<Icon name="translate" width="21" height="21" />
 	<select id="languageSelect" value={lang} aria-label="Select language">
 		{
@@ -42,6 +42,19 @@ const lang = getLanguageFromURL(Astro.url.pathname);
 		border-radius: var(--border-radius-md);
 		cursor: pointer;
 	}
+
+	body[data-is-mobile-open="true"] {
+		.language-select {
+			position: absolute;
+			bottom: 115px;
+			right: 2.2rem;
+			& svg,
+			& select {
+				height: 36px;
+				width: 36px;
+			}
+		}
+	}
 </style>
 
 <script define:vars={{ lang, DEFAULT_LANGUAGE }}>

src/components/ThemeSwticher/ThemeSwitcher.scss

@@ -16,3 +16,16 @@
 		transition: all 0.1s linear 0s;
 	}
 }
+
+body[data-is-mobile-open="true"] {
+	.theme-switcher {
+		display: block;
+		position: absolute;
+		bottom: 45px;
+		right: 2.2rem;
+		& svg {
+			width: 36px;
+			height: 36px;
+		}
+	}
+}

src/components/ThemeSwticher/ThemeSwitcher.tsx

@@ -1,3 +1,4 @@
+import { IS_SITE_UNDER_CONSTRUCTION } from "@root/config";
 import type { Component, JSX } from "solid-js";
 
 import { createSignal, onMount, Switch, Match } from "solid-js";
@@ -50,7 +51,12 @@ const ThemeSwitcher: Component = () => {
 	});
 
 	return (
-		<button onClick={toggleTheme} class={isReady() ? "theme-switcher ready" : "theme-switcher"} aria-label={theme()}>
+		<button
+			onClick={toggleTheme}
+			class={isReady() ? "theme-switcher ready" : "theme-switcher"}
+			aria-label={theme()}
+			{...(IS_SITE_UNDER_CONSTRUCTION ? { style: "bottom:80px;" } : {})}
+		>
 			<Switch
 				children={
 					<>