mirror of
https://github.com/sergeyyarkov/yarkov.tech.git
synced 2026-10-11 10:29:21 +03:00
refactored css for header
This commit is contained in:
parent
d6b66cca4a
commit
634607d236
@ -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>
|
||||
|
||||
@ -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">
|
||||
<ul class="header__nav-links">
|
||||
<nav>
|
||||
<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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -13,3 +13,10 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body[data-is-mobile-open="true"] {
|
||||
.nav-toggle {
|
||||
position: absolute;
|
||||
right: var(--content-padding);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,9 @@
|
||||
<div class="banner-wrapper">
|
||||
<div>
|
||||
<span><slot /></span>
|
||||
</div>
|
||||
|
||||
<style lang="scss" is:global>
|
||||
.header.header-banner {
|
||||
top: 45px;
|
||||
}
|
||||
|
||||
.banner-wrapper {
|
||||
<style lang="scss">
|
||||
div {
|
||||
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>
|
||||
|
||||
@ -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 }}>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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={
|
||||
<>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user