Skip to content

Commit a332be6

Browse files
OlianaydaOlianayda
committed
feat: обновлена навигация в блоге согласно требованиям
1 parent 4f0d855 commit a332be6

File tree

7 files changed

+178
-100
lines changed

7 files changed

+178
-100
lines changed

‎assets/img/muteit-logo.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎blog/blog-source/assets/css/extended/custom.css‎

Lines changed: 89 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -78,30 +78,67 @@ h3 {
7878
}
7979
}
8080

81-
/* Navigation */
82-
.top-navigation {
83-
font-size: 1rem;
84-
padding: var(--size-4) var(--size-2);
81+
/* Header and Navigation */
82+
.header {
83+
padding: 0;
84+
position: relative;
85+
}
86+
87+
.nav-container {
8588
display: flex;
86-
gap: 24px;
89+
justify-content: space-between;
90+
align-items: center;
91+
padding: 20px var(--size-2);
92+
background: #000;
8793
max-width: 1040px;
8894
margin: 0 auto;
8995
}
9096

9197
@media (min-width: 992px) {
92-
.top-navigation {
98+
.nav-container {
9399
padding-left: 100px;
94100
padding-right: 100px;
95101
}
96102
}
97103

98-
.top-navigation a {
99-
color: var(--color-main);
104+
.logo img {
105+
width: 40px;
106+
height: 40px;
107+
margin-right: 20px;
108+
}
109+
110+
.main-nav {
111+
display: flex;
112+
gap: 20px;
113+
align-items: center;
114+
}
115+
116+
.main-nav a {
100117
text-decoration: none;
118+
color: #fff;
119+
font-family: 'Roboto', sans-serif;
120+
font-size: 16px;
121+
transition: color 0.1s;
101122
}
102123

103-
.top-navigation a:hover {
104-
color: var(--color-muted);
124+
.main-nav a:hover {
125+
color: #ddd;
126+
}
127+
128+
.main-nav a.active {
129+
color: #fff;
130+
font-weight: 700;
131+
}
132+
133+
.donation {
134+
font-size: 1rem;
135+
padding: 0;
136+
}
137+
138+
.donation a {
139+
text-decoration: none;
140+
color: #fff;
141+
margin-left: 20px;
105142
}
106143

107144
/* Content */
@@ -181,73 +218,55 @@ h3 {
181218
color: var(--color-main);
182219
}
183220

184-
/* Theme toggle */
185-
#theme-toggle {
186-
color: var(--color-main);
187-
background-color: transparent;
188-
border: none;
189-
cursor: pointer;
190-
}
191-
192-
#theme-toggle svg {
193-
width: 24px;
194-
height: 24px;
195-
fill: currentColor;
196-
}
197-
198-
/* Telegram integration */
199-
.telegram-share {
200-
margin: var(--size-4) 0;
201-
text-align: center;
202-
}
221+
/* Mobile styles */
222+
@media (max-width: 768px) {
223+
.nav-container {
224+
padding: 10px var(--size-2);
225+
flex-wrap: wrap;
226+
}
203227

204-
.telegram-share-button {
205-
display: inline-flex;
206-
align-items: center;
207-
gap: var(--size-2);
208-
padding: var(--size-2) var(--size-3);
209-
color: var(--primary);
210-
background-color: var(--tertiary);
211-
border-radius: 8px;
212-
text-decoration: none;
213-
transition: background-color 0.2s ease;
214-
}
228+
.logo {
229+
margin-left: 50px; /* Учитываем место под бургер-меню */
230+
}
215231

216-
.telegram-share-button:hover {
217-
background-color: var(--code-bg);
218-
}
232+
.main-nav {
233+
display: none; /* Скрываем меню */
234+
}
219235

220-
.telegram-share-button svg {
221-
width: 20px;
222-
height: 20px;
223-
}
236+
.main-nav.active {
237+
display: flex;
238+
flex-direction: column;
239+
align-items: center;
240+
width: 100%;
241+
margin-top: 10px;
242+
order: 3;
243+
}
224244

225-
/* Comments section */
226-
.post-comments {
227-
margin-top: var(--size-5);
228-
padding-top: var(--size-4);
229-
border-top: 1px solid var(--border);
230-
}
245+
.main-nav a {
246+
font-size: 14px;
247+
padding: 10px 0;
248+
}
231249

232-
/* Responsive */
233-
@media (max-width: 992px) {
234-
.main,
235-
.navigation,
236-
.footer {
237-
padding-left: 32px;
238-
padding-right: 32px;
250+
.donation a {
251+
margin-left: 10px;
252+
font-size: 14px;
239253
}
240-
}
241254

242-
@media (max-width: 768px) {
243-
.main,
244-
.navigation,
245-
.footer {
246-
padding-left: var(--size-2);
247-
padding-right: var(--size-2);
255+
/* Бургер-меню */
256+
.burger {
257+
display: block;
258+
cursor: pointer;
259+
position: absolute;
260+
top: 25px;
261+
left: 20px;
262+
z-index: 10;
248263
}
249-
250-
.post-content {
251-
padding: 0;
264+
265+
.burger span {
266+
display: block;
267+
width: 25px;
268+
height: 3px;
269+
background: #fff;
270+
margin: 5px 0;
252271
}
253272
}

‎blog/blog-source/layouts/partials/header.html‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,31 @@
1616
{{- end }}
1717
{{- end }}
1818

19+
{{- /* Header */ -}}
1920
<header class="header">
20-
<nav class="navigation">
21-
<a href="/">Проект</a>
22-
<a href="/blog/">База знаний</a>
23-
<a href="/start/">С чего начать</a>
24-
<a href="/treatments/">Лечение</a>
25-
<a href="/platform/">Платформа</a>
26-
</nav>
21+
<div class="nav-container">
22+
<div class="logo">
23+
<a href="https://muteit.ru/"><img src="/blog/assets/img/muteit-logo.svg" alt="Mute It Logo" width="40" height="40"></a>
24+
</div>
25+
<div class="burger">
26+
<span></span>
27+
<span></span>
28+
<span></span>
29+
</div>
30+
<nav class="main-nav">
31+
<a href="https://muteit.ru/">Главная</a>
32+
<a href="https://muteit.ru/tips/">Советы</a>
33+
<a href="https://muteit.ru/start/">С чего начать</a>
34+
<a href="https://muteit.ru/treatments/">Помощь</a>
35+
<a href="https://muteit.ru/stories/">Истории</a>
36+
<a href="https://muteit.ru/blog/" class="active">База знаний</a>
37+
</nav>
38+
<div class="donation">
39+
<a href="https://yoomoney.ru/fundraise/18ERQJPU5TH.250216" target="_blank" rel="noopener noreferrer">Поддержать проект</a>
40+
</div>
41+
</div>
2742
</header>
43+
{{- /* End Header */ -}}
2844

2945
{{- /* Main Menu */ -}}
3046
{{- if (not .IsHome) }}
@@ -37,4 +53,10 @@ <h1>{{ .Title }}</h1>
3753
</div>
3854
{{- end }}
3955
</header>
40-
{{- end }}
56+
{{- end }}
57+
58+
<script>
59+
document.querySelector('.burger').addEventListener('click', () => {
60+
document.querySelector('.main-nav').classList.toggle('active');
61+
});
62+
</script>

‎blog/blog-source/public/404.html‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<meta name="description" content="Статьи и материалы о парурезисе, его лечении и преодолении">
1111
<meta name="author" content="">
1212
<link rel="canonical" href="http://localhost:55000/blog/404.html">
13-
<link crossorigin="anonymous" href="/blog/assets/css/stylesheet.85a0425df064ceecc6fd4fe9513309377c27eca9a7b1b3d34a91c14e2275a3fb.css" integrity="sha256-haBCXfBkzuzG/U/pUTMJN3wn7KmnsbPTSpHBTiJ1o/s=" rel="preload stylesheet" as="style">
13+
<link crossorigin="anonymous" href="/blog/assets/css/stylesheet.268b94e203a407dd4442d0251e86ee2a7c071def2c0c21f8f75b8d1acc10311e.css" integrity="sha256-JouU4gOkB91EQtAlHobuKnwHHe8sDCH491uNGswQMR4=" rel="preload stylesheet" as="style">
1414
<link rel="icon" href="http://localhost:55000/blog/favicon.ico">
1515
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:55000/blog/favicon-16x16.png">
1616
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:55000/blog/favicon-32x32.png">
@@ -48,16 +48,20 @@
4848
if (localStorage.getItem("dark") === "dark") {
4949
document.body.classList.add('dark');
5050
}
51-
</script>
52-
53-
<header class="header">
54-
<nav class="navigation">
55-
<a href="/">Проект</a>
56-
<a href="/blog/">База знаний</a>
57-
<a href="/start/">С чего начать</a>
58-
<a href="/treatments/">Лечение</a>
59-
<a href="/platform/">Платформа</a>
60-
</nav>
51+
</script><header class="header">
52+
<div class="top-navigation">
53+
<a href="https://muteit.ru" class="logo">
54+
<img src="/blog/logo.svg" alt="MuteIt" width="32" height="32">
55+
</a>
56+
<nav class="nav">
57+
</nav>
58+
<button id="theme-toggle" accesskey="t" title="(Alt + T)">
59+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
60+
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
61+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
62+
</svg>
63+
</button>
64+
</div>
6165
</header>
6266
<header class="page-header"><div class="breadcrumbs"><a href="http://localhost:55000/blog/">Home</a></div>
6367
<h1>404 Page not found</h1>

‎blog/blog-source/public/assets/css/stylesheet.268b94e203a407dd4442d0251e86ee2a7c071def2c0c21f8f75b8d1acc10311e.css‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎blog/blog-source/public/index.html‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<meta name="description" content="Статьи и материалы о парурезисе, его лечении и преодолении">
1212
<meta name="author" content="">
1313
<link rel="canonical" href="http://localhost:55000/blog/">
14-
<link crossorigin="anonymous" href="/blog/assets/css/stylesheet.85a0425df064ceecc6fd4fe9513309377c27eca9a7b1b3d34a91c14e2275a3fb.css" integrity="sha256-haBCXfBkzuzG/U/pUTMJN3wn7KmnsbPTSpHBTiJ1o/s=" rel="preload stylesheet" as="style">
14+
<link crossorigin="anonymous" href="/blog/assets/css/stylesheet.268b94e203a407dd4442d0251e86ee2a7c071def2c0c21f8f75b8d1acc10311e.css" integrity="sha256-JouU4gOkB91EQtAlHobuKnwHHe8sDCH491uNGswQMR4=" rel="preload stylesheet" as="style">
1515
<link rel="icon" href="http://localhost:55000/blog/favicon.ico">
1616
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:55000/blog/favicon-16x16.png">
1717
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:55000/blog/favicon-32x32.png">
@@ -50,16 +50,20 @@
5050
if (localStorage.getItem("dark") === "dark") {
5151
document.body.classList.add('dark');
5252
}
53-
</script>
54-
55-
<header class="header">
56-
<nav class="navigation">
57-
<a href="/">Проект</a>
58-
<a href="/blog/">База знаний</a>
59-
<a href="/start/">С чего начать</a>
60-
<a href="/treatments/">Лечение</a>
61-
<a href="/platform/">Платформа</a>
62-
</nav>
53+
</script><header class="header">
54+
<div class="top-navigation">
55+
<a href="https://muteit.ru" class="logo">
56+
<img src="/blog/logo.svg" alt="MuteIt" width="32" height="32">
57+
</a>
58+
<nav class="nav">
59+
</nav>
60+
<button id="theme-toggle" accesskey="t" title="(Alt + T)">
61+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
62+
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
63+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
64+
</svg>
65+
</button>
66+
</div>
6367
</header> <main class="main">
6468
<article class="first-entry home-info">
6569
<header class="entry-header">

‎blog/blog-source/static/assets/img/muteit-logo.svg‎

Lines changed: 6 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)