Commit 519c7e4b authored by prolinux's avatar prolinux

header menu add margin, min/max syze. info-block add back. blocks-section add…

header menu add margin, min/max syze. info-block add back. blocks-section add size. boy add margin auto
parent 06ace29b
...@@ -30,8 +30,8 @@ ...@@ -30,8 +30,8 @@
<div class="header-center"> <div class="header-center">
<nav class="header-menu"> <nav class="header-menu">
<ul> <ul>
<li><a href="#">Главная</a></li> <li><a href="index.html">Главная</a></li>
<li><a href="downloads.html">Загрузки</a></li> <li><a href="#">Загрузки</a></li>
<li><a href="news.html">Новости</a></li> <li><a href="news.html">Новости</a></li>
<li><a href="https://wiki.ximperlinux.ru">Wiki</a></li> <li><a href="https://wiki.ximperlinux.ru">Wiki</a></li>
</ul> </ul>
......
...@@ -31,9 +31,9 @@ ...@@ -31,9 +31,9 @@
<div class="header-center"> <div class="header-center">
<nav class="header-menu"> <nav class="header-menu">
<ul> <ul>
<li><a href="#">Главная</a></li> <li><a href="index.html">Главная</a></li>
<li><a href="downloads.html">Загрузки</a></li> <li><a href="downloads.html">Загрузки</a></li>
<li><a href="news.html">Новости</a></li> <li><a href="#">Новости</a></li>
<li><a href="https://wiki.ximperlinux.ru">Wiki</a></li> <li><a href="https://wiki.ximperlinux.ru">Wiki</a></li>
</ul> </ul>
</nav> </nav>
......
...@@ -42,7 +42,8 @@ ...@@ -42,7 +42,8 @@
/* Общие стили */ /* Общие стили */
body { body {
margin: 0; margin-left: auto;
margin-right: auto;
padding: 0; padding: 0;
font-family: Evolventa, Arial, sans-serif; font-family: Evolventa, Arial, sans-serif;
color: #fff; color: #fff;
...@@ -52,6 +53,8 @@ body { ...@@ -52,6 +53,8 @@ body {
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
max-width: 1700px; max-width: 1700px;
justify-content: center;
align-items: center;
} }
body::before { body::before {
...@@ -183,7 +186,8 @@ header { ...@@ -183,7 +186,8 @@ header {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 20px 20px; padding: 20px 20px;
margin: 0; margin-left: auto;
margin-right: auto;
position: fixed; position: fixed;
width: 100%; width: 100%;
top: 0px; top: 0px;
...@@ -226,6 +230,7 @@ header { ...@@ -226,6 +230,7 @@ header {
.header-center { .header-center {
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative;
align-items: center; align-items: center;
flex: 2; flex: 2;
min-width: 0; min-width: 0;
...@@ -244,7 +249,7 @@ header { ...@@ -244,7 +249,7 @@ header {
} }
.header-menu ul li { .header-menu ul li {
margin: 0 15px; margin: 0 2%;
} }
.header-menu ul li a { .header-menu ul li a {
...@@ -299,7 +304,6 @@ header h1 { ...@@ -299,7 +304,6 @@ header h1 {
.header-center { .header-center {
order: 1; order: 1;
flex: 0 0 100%;
margin-top: 10px; margin-top: 10px;
display: none; display: none;
} }
...@@ -308,6 +312,7 @@ header h1 { ...@@ -308,6 +312,7 @@ header h1 {
order: 2; order: 2;
flex: 0; flex: 0;
margin: 0px !important; margin: 0px !important;
width: 0px !important;
} }
.header-menu ul li { .header-menu ul li {
...@@ -321,16 +326,32 @@ header h1 { ...@@ -321,16 +326,32 @@ header h1 {
.header-left { .header-left {
flex: 1; flex: 1;
margin: 0px !important;
width: 0px !important;
} }
} }
/* Когда окно на полэкрана */ /* Когда окно на полэкрана */
@media (max-width: 970px) { @media (max-width: 1260px) {
.header-right { .header-right {
margin: 0px !important; margin: 0px 12% !important;
} }
.header-left { .header-left {
margin: 0px !important; margin: 0px 12% !important;
}
.header-center {
margin: 0px 12% !important;
}
}
@media (max-width: 960px) {
.header-right {
margin: 0px 0% !important;
}
.header-left {
margin: 0px 0% !important;
}
.header-center {
padding: 0px 0px !important;
} }
} }
...@@ -389,7 +410,7 @@ header h1 { ...@@ -389,7 +410,7 @@ header h1 {
} }
.mobile-menu a:hover { .mobile-menu a:hover {
background-color: var(--border); background: linear-gradient(38deg,#009dff,#ca00de);
} }
/* Скрываем обычное меню на мобильных устройствах */ /* Скрываем обычное меню на мобильных устройствах */
...@@ -608,6 +629,8 @@ main { ...@@ -608,6 +629,8 @@ main {
.info-block { .info-block {
background: #2d2d32; background: #2d2d32;
background-image: url(images/card_bg.png); background-image: url(images/card_bg.png);
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px; border-radius: 20px;
padding: 25px 25px 40px 25px; padding: 25px 25px 40px 25px;
position: relative; position: relative;
...@@ -617,6 +640,8 @@ main { ...@@ -617,6 +640,8 @@ main {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
width: 80%; /* Уменьшаем ширину карточек */ width: 80%; /* Уменьшаем ширину карточек */
height: 80%; height: 80%;
min-width: 350px;
max-width: 350px;
margin: 0 auto; /* Центрируем карточки */ margin: 0 auto; /* Центрируем карточки */
} }
...@@ -667,6 +692,17 @@ main { ...@@ -667,6 +692,17 @@ main {
margin-bottom: 70px; margin-bottom: 70px;
} }
/* Адаптация для сжатого браузера */
@media (max-width: 1324px) {
#blocks-section {
grid-template-columns: repeat(2, 1fr); /* Две карточки в ряд на планшетах */
}
main {
padding: 0px 5% !important;
margin: 0px !important;
}
}
/* Адаптация для планшетов */ /* Адаптация для планшетов */
@media (max-width: 1024px) { @media (max-width: 1024px) {
#blocks-section { #blocks-section {
...@@ -674,7 +710,7 @@ main { ...@@ -674,7 +710,7 @@ main {
} }
main { main {
padding: 0px 0% 20px 0% !important; padding: 0px 0% 20px 0% !important;
} }
} }
/* Адаптация для мобильных устройств */ /* Адаптация для мобильных устройств */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment