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 {
|
||||
font-family: Play, sans-sefif;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
*::selection {
|
||||
background-color: var(--color-fg);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
h1 {
|
||||
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/vendor.css">
|
||||
|
||||
<link rel="stylesheet" href="/_assets/css/variables.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">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
{% include 'parts/menu.njk' %}
|
||||
|
||||
<main>
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</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="Открыть меню">
|
||||
<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 label = item %}
|
||||
{% set label = translations[page.lang]['menu'][item] %}
|
||||
{% set href = ('/' ~ item ~ '/') | locale_url %}
|
||||
|
||||
<li>
|
||||
{% if isCurrent %}
|
||||
<span>{{ label }}</span>
|
||||
{% else %}
|
||||
<a href="{{ href }}">{{ label }}</a>
|
||||
{% endif %}
|
||||
<li class="{% if isCurrent %} active {% endif %}">
|
||||
<a href="{{ href }}" >
|
||||
{{ label }}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{%- endfor %}
|
||||
</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