mirror of
https://github.com/He4eT/xecut-site.git
synced 2026-05-05 01:47:25 +00:00
menu: desktop version
This commit is contained in:
parent
2304d44f8c
commit
1196b31663
6 changed files with 239 additions and 18 deletions
|
|
@ -1,7 +1,20 @@
|
||||||
html, body {
|
html, body {
|
||||||
font-family: Play, sans-sefif;
|
font-family: Play, sans-sefif;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
*::selection {
|
||||||
|
background-color: var(--color-fg);
|
||||||
|
color: var(--color-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: Xecut, sans-sefif;
|
font-family: Xecut, sans-sefif;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 72px;
|
||||||
|
margin-block-start: 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
15
src/_assets/css/layout.css
Normal file
15
src/_assets/css/layout.css
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > main {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
padding: calc(4 * var(--step));
|
||||||
|
}
|
||||||
142
src/_assets/css/menu.css
Normal file
142
src/_assets/css/menu.css
Normal file
|
|
@ -0,0 +1,142 @@
|
||||||
|
header.menu {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 320px;
|
||||||
|
|
||||||
|
padding: calc(4 * var(--step));
|
||||||
|
font-family: Xecut, sans-serif;
|
||||||
|
|
||||||
|
height: fit-content;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* */
|
||||||
|
|
||||||
|
header.menu a {
|
||||||
|
color: var(--color-fg);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: opacity .2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.menu a:hover {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* */
|
||||||
|
|
||||||
|
.logo a {
|
||||||
|
font-size: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* */
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: calc(4 * var(--step));
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar ul {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
margin: calc(8 * var(--step)) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links li {
|
||||||
|
padding: calc(1 * var(--step)) calc(2 * var(--step));
|
||||||
|
|
||||||
|
border-inline-end: calc(1 * var(--step)) solid;
|
||||||
|
border-color: var(--color-inactive);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links li.active {
|
||||||
|
border-color: var(--color-fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* */
|
||||||
|
|
||||||
|
.nav-langs {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0;
|
||||||
|
margin-block-start: auto;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-langs .lang-separator {
|
||||||
|
color: var(--color-inactive);
|
||||||
|
}
|
||||||
|
.nav-langs .lang-separator:first-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* */
|
||||||
|
|
||||||
|
.desktop-logo {
|
||||||
|
display: none;
|
||||||
|
margin-block-start: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* */
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
display: none;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
width: 30px;
|
||||||
|
height: 21px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon {
|
||||||
|
display: block;
|
||||||
|
background-color: white;
|
||||||
|
height: 3px;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon:nth-child(1) {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon:nth-child(2) {
|
||||||
|
top: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-icon:nth-child(3) {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav-links {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
7
src/_assets/css/variables.css
Normal file
7
src/_assets/css/variables.css
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
body {
|
||||||
|
--step: 8px;
|
||||||
|
|
||||||
|
--color-bg: #ffffff;
|
||||||
|
--color-fg: #000000;
|
||||||
|
--color-inactive: #cdcdcd;
|
||||||
|
}
|
||||||
|
|
@ -21,12 +21,18 @@
|
||||||
<link rel="stylesheet" href="/_assets/css/fonts.css">
|
<link rel="stylesheet" href="/_assets/css/fonts.css">
|
||||||
<link rel="stylesheet" href="/_assets/css/vendor.css">
|
<link rel="stylesheet" href="/_assets/css/vendor.css">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/_assets/css/variables.css">
|
||||||
<link rel="stylesheet" href="/_assets/css/base.css">
|
<link rel="stylesheet" href="/_assets/css/base.css">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/_assets/css/layout.css">
|
||||||
<link rel="stylesheet" href="/_assets/css/menu.css">
|
<link rel="stylesheet" href="/_assets/css/menu.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="container">
|
||||||
{% include 'parts/menu.njk' %}
|
{% include 'parts/menu.njk' %}
|
||||||
|
<main>
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,56 @@
|
||||||
{% set items = config.menu %}
|
<header class="menu">
|
||||||
|
<div class="topbar">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="{{ '/' | locale_url }}">
|
||||||
|
{{ translations[page.lang]['title'] }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<ul>
|
<button class="hamburger" id="hamburger" aria-label="Открыть меню">
|
||||||
{%- for item in items %}
|
<span class="hamburger-icon"></span>
|
||||||
|
<span class="hamburger-icon"></span>
|
||||||
|
<span class="hamburger-icon"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="navbar">
|
||||||
|
<ul class="nav-links">
|
||||||
|
{% set items = config.menu %}
|
||||||
|
{%- for item in items %}
|
||||||
{% set isCurrent = page.url.startsWith('/' ~ page.lang ~ '/' ~ item) %}
|
{% set isCurrent = page.url.startsWith('/' ~ page.lang ~ '/' ~ item) %}
|
||||||
{% set label = item %}
|
{% set label = translations[page.lang]['menu'][item] %}
|
||||||
{% set href = ('/' ~ item ~ '/') | locale_url %}
|
{% set href = ('/' ~ item ~ '/') | locale_url %}
|
||||||
|
|
||||||
<li>
|
<li class="{% if isCurrent %} active {% endif %}">
|
||||||
{% if isCurrent %}
|
<a href="{{ href }}" >
|
||||||
<span>{{ label }}</span>
|
{{ label }}
|
||||||
{% else %}
|
</a>
|
||||||
<a href="{{ href }}">{{ label }}</a>
|
|
||||||
{% endif %}
|
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
{%- endfor %}
|
{%- endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<ul class="nav-langs">
|
||||||
|
{% set langs = config.langs %}
|
||||||
|
{%- for lang in langs %}
|
||||||
|
<li class="lang-separator" aria-hidden>|</li>
|
||||||
|
<li>
|
||||||
|
<a href="{{ page.url | locale_url(lang) }}" >
|
||||||
|
{{ lang }}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{%- endfor %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<a href="/" class="desktop-logo" aria-hidden>
|
||||||
|
<img src="/_assets/img/common/tower.svg">
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('hamburger').addEventListener('click', function() {
|
||||||
|
const navLinks = document.querySelector('.nav-links');
|
||||||
|
navLinks.classList.toggle('active');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue