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