burger menu block buttons

This commit is contained in:
Nikita 2024-11-19 20:44:25 +02:00
parent eca96ff0bc
commit 944015c172

View file

@ -1,8 +1,8 @@
body,a,p,h1,h2,h3,h5{padding: 0; margin: 0} body,a,p,h1,h2,h3,h5{padding: 0; margin: 0}
body{ body{
background-color: #000; /*Цвет фона всей страницы*/ background-color: var(--background-color);
color:#eee; /*Цвет текста всей страницы*/ color:var(--main-color);
} }
html { html {
font-size: 100%; font-size: 100%;
@ -31,18 +31,15 @@ p, a, ul, li, body{
font-weight: 200; font-weight: 200;
font-size: 1rem; font-size: 1rem;
} }
/*ЦВЕТ МЕНЯТЬ ТУТА*/
:root { :root {
--main-color: #eee; /* Это цвет текста и всяких обводок*/ --main-color: #eee;
--accent-color: #989898; /* акцент */ --accent-color: #989898;
--background-color: #000; /* цвет фона */ --background-color: #000;
} }
/*КНОПКИ НА ГЛАВНОЙ СТРАНИЦЕ*/
.nav_butt_1:link, .nav_butt_1:visited { .nav_butt_1:link, .nav_butt_1:visited {
box-sizing: content-box; box-sizing: content-box;
border: solid var(--main-color) 1px; /*Цвет рамки кнопки*/ border: solid var(--main-color) 1px;
color: var(--main-color); /*Цвет текста кнопки*/ color: var(--main-color);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
@ -52,15 +49,13 @@ p, a, ul, li, body{
margin-top: 10px; margin-top: 10px;
} }
.nav_butt_1:hover, .nav_butt_1:active { .nav_butt_1:hover, .nav_butt_1:active {
background-color: var(--main-color);/*цвет кнопки при наведении*/ background-color: var(--main-color);
color: var(--background-color); /*цвет текста кнопки при наведении*/ color: var(--background-color);
} }
/*КНОПКИ НА СТРАНИЦАХ С БОКОВЫМ НАВИГАТОРОМ*/
.nav_butt_2:link, .nav_butt_2:visited { .nav_butt_2:link, .nav_butt_2:visited {
box-sizing: content-box; box-sizing: content-box;
border: solid var(--main-color) 1px; /*Цвет рамки кнопки*/ border: solid var(--main-color) 1px;
color: var(--main-color); /*Цвет текста кнопки*/ color: var(--main-color);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
@ -71,21 +66,21 @@ p, a, ul, li, body{
margin-top: 10px; margin-top: 10px;
} }
.nav_butt_2:hover, .nav_butt_2:active { .nav_butt_2:hover, .nav_butt_2:active {
background-color: var(--main-color);/*цвет кнопки при наведении*/ background-color: var(--main-color);
color: var(--background-color); /*цвет текста кнопки при наведении*/ color: var(--background-color);
} }
/*КНОПКИ КОНТЕНТА*/ /*КНОПКИ КОНТЕНТА*/
.content_butt:link, .content_butt:visited { .content_butt:link, .content_butt:visited {
font-weight: 500; font-weight: 500;
color: var(--accent-color); /*Цвет текста кнопки*/ color: var(--accent-color);
text-align: center; text-align: center;
text-decoration: underline; text-decoration: underline;
display: inline-block; display: inline-block;
} }
.content_butt:hover, .content_butt:active { .content_butt:hover, .content_butt:active {
background-color: var(--main-color);/*цвет кнопки при наведении*/ background-color: var(--main-color);
color: var(--background-color); /*цвет текста кнопки при наведении*/ color: var(--background-color);
} }
/*СТИЛИ ГЛАВНОЙ СТРАНИЦЫ*/ /*СТИЛИ ГЛАВНОЙ СТРАНИЦЫ*/
@ -147,12 +142,10 @@ p, a, ul, li, body{
padding-top: 40vh; padding-top: 40vh;
width: 300px; width: 300px;
} }
/*НОВОСТИ И ПОСТЫ*/
.post_box{ .post_box{
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: solid 1px var(--accent-color); /*обводка новостного дропа*/ border: solid 1px var(--accent-color);
margin-bottom: 20px; margin-bottom: 20px;
} }
.post_name{ .post_name{
@ -166,15 +159,13 @@ p, a, ul, li, body{
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; /* Ограничение на 2 строки */ -webkit-line-clamp: 2;
} }
.post_date{ .post_date{
float: right; float: right;
} }
.readmore{ .readmore{
} }
/* BURGER and MOBILE */
.burger-toggle { .burger-toggle {
display: none; display: none;
} }
@ -193,14 +184,11 @@ p, a, ul, li, body{
background-color: var(--main-color); background-color: var(--main-color);
margin: 5px 0; margin: 5px 0;
} }
/*Для девайсов с шириной до 768пиксов*/
@media (max-width: 768px) { @media (max-width: 768px) {
html { html {
font-size: 85%; font-size: 85%;
} }
/*Главная*/
.main_container{ .main_container{
max-width: 90%; max-width: 90%;
max-height: 100vh; max-height: 100vh;
@ -216,9 +204,6 @@ p, a, ul, li, body{
justify-content: space-between; justify-content: space-between;
display: block; display: block;
} }
/*Вторичные страницы*/
.content_wrap{ .content_wrap{
text-align: left; text-align: left;
width: 100%; width: 100%;
@ -253,7 +238,6 @@ p, a, ul, li, body{
height: auto; height: auto;
grid-gap:20px; grid-gap:20px;
} }
.burger { .burger {
display: block; display: block;
cursor: pointer; cursor: pointer;
@ -271,14 +255,12 @@ p, a, ul, li, body{
margin: 5px 0; margin: 5px 0;
transition: transform 0.1s ease, opacity 0.1s ease, background-color 0.1s ease; transition: transform 0.1s ease, opacity 0.1s ease, background-color 0.1s ease;
} }
/*Анимаця*/
.burger-toggle:checked + .burger .line:nth-child(1) { .burger-toggle:checked + .burger .line:nth-child(1) {
transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg);
} }
.burger-toggle:checked + .burger .line:nth-child(2) { .burger-toggle:checked + .burger .line:nth-child(2) {
opacity: 0; /* Вторая линия исчезает */ opacity: 0;
} }
.burger-toggle:checked + .burger .line:nth-child(3) { .burger-toggle:checked + .burger .line:nth-child(3) {
@ -289,7 +271,6 @@ p, a, ul, li, body{
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
.navigation { .navigation {
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -299,32 +280,30 @@ p, a, ul, li, body{
flex-direction: column; flex-direction: column;
border-bottom: solid 1px var(--main-color); border-bottom: solid 1px var(--main-color);
align-items: center; align-items: center;
transform: translateY(-20px); /* Начальная позиция меню */ transform: translateY(-20px);
opacity: 0; /* Меню скрыто */ opacity: 0;
visibility: hidden; /* Скрыть элемент визуально */ visibility: hidden;
transition: transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease;
z-index: 1; z-index: 1;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }
.burger-toggle:checked ~ .navigation { .burger-toggle:checked ~ .navigation {
transform: translateY(0); /* Возвращаем меню в исходное положение */ transform: translateY(0);
opacity: 1; /* Делаем меню видимым */ opacity: 1;
visibility: visible; /* Убираем скрытие */ visibility: visible;
display: block;
} }
.navigation a { .navigation a {
width: 100%; width: ;
border: none; border: none;
padding: 15px; padding: 15px;
text-align: left; text-align: left;
} }
/* Показать меню, если чекбокс включен */
.burger-toggle:checked ~ .navigation { .burger-toggle:checked ~ .navigation {
display: flex; display: block;
} }
} }
@media (min-width: 769px) { @media (min-width: 769px) {
.burger { .burger {
display: none; display: none;