336 lines
7.2 KiB
CSS
336 lines
7.2 KiB
CSS
|
||
body,a,p,h1,h2,h3,h5{padding: 0; margin: 0}
|
||
body{
|
||
background-color: #000; /*Цвет фона всей страницы*/
|
||
color:#eee; /*Цвет текста всей страницы*/
|
||
}
|
||
html {
|
||
font-size: 100%;
|
||
}
|
||
@font-face {
|
||
font-family: 'GeistMono';
|
||
src: url('font/geistmono.ttf') format('truetype');
|
||
}
|
||
h1{
|
||
font-family: "GeistMono";
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
}
|
||
h2{
|
||
font-family: "GeistMono";
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
}
|
||
h3{
|
||
font-family: "GeistMono";
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
}
|
||
p, a, ul, li, body{
|
||
font-family: "GeistMono";
|
||
font-weight: 200;
|
||
font-size: 1rem;
|
||
}
|
||
/*ЦВЕТ МЕНЯТЬ ТУТА*/
|
||
:root {
|
||
--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); /*Цвет текста кнопки*/
|
||
text-align: center;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
width: 120px;
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
.nav_butt_1:hover, .nav_butt_1:active {
|
||
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); /*Цвет текста кнопки*/
|
||
text-align: center;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
font-size: 1rem;
|
||
width: 120px;
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
.nav_butt_2:hover, .nav_butt_2:active {
|
||
background-color: var(--main-color);/*цвет кнопки при наведении*/
|
||
color: var(--background-color); /*цвет текста кнопки при наведении*/
|
||
}
|
||
|
||
/*КНОПКИ КОНТЕНТА*/
|
||
.content_butt:link, .content_butt:visited {
|
||
font-weight: 500;
|
||
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); /*цвет текста кнопки при наведении*/
|
||
}
|
||
|
||
/*СТИЛИ ГЛАВНОЙ СТРАНИЦЫ*/
|
||
.main_container{
|
||
max-width: 800px;
|
||
max-height: 100vh;
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
padding-top: 200px;
|
||
}
|
||
.logo{
|
||
max-width: 80px;
|
||
padding-bottom: 30px;
|
||
}
|
||
.links{
|
||
padding-top: 100px;
|
||
justify-content: space-between;
|
||
display: flex;
|
||
}
|
||
|
||
/*СТИЛИ ВТОРИЧНЫХ СТРАНИЦ*/
|
||
.page_container{
|
||
max-height: 100vh;
|
||
text-align: center;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.nav_box{
|
||
height: 100vh;
|
||
border-right: solid 1px var(--main-color);
|
||
width: 20%;
|
||
position: fixed;
|
||
padding-top: 10vh;
|
||
}
|
||
.content_wrap{
|
||
text-align: left;
|
||
width: 80%;
|
||
float: right;
|
||
display: block;
|
||
position: relative;
|
||
}
|
||
.navigation{
|
||
padding-top: 48px;
|
||
width: 130px;
|
||
margin:0 auto;
|
||
}
|
||
.content_box{
|
||
margin: 40px;
|
||
}
|
||
.content_box img{
|
||
max-width: 100%;
|
||
}
|
||
.logo_home, .logo_home:link, .logo_home:visited, .logo_home:hover, .logo_home:active {
|
||
border: none;
|
||
background-color: transparent;
|
||
}
|
||
.contacts{
|
||
margin: 0 auto;
|
||
padding-top: 40vh;
|
||
width: 300px;
|
||
}
|
||
|
||
/*НОВОСТИ И ПОСТЫ*/
|
||
.post_box{
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: solid 1px var(--accent-color); /*обводка новостного дропа*/
|
||
margin-bottom: 20px;
|
||
}
|
||
.post_name{
|
||
margin-bottom: 20px;
|
||
text-transform: uppercase;
|
||
}
|
||
.post_description{
|
||
margin-bottom: 20px;
|
||
}
|
||
.multiline{
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
-webkit-line-clamp: 2; /* Ограничение на 2 строки */
|
||
}
|
||
.post_date{
|
||
float: right;
|
||
}
|
||
.readmore{
|
||
}
|
||
|
||
/* BURGER and MOBILE */
|
||
.burger-toggle {
|
||
display: none;
|
||
}
|
||
.burger {
|
||
display: none;
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
width: 30px;
|
||
z-index: 2;
|
||
}
|
||
.burger .line {
|
||
width: 100%;
|
||
height: 3px;
|
||
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;
|
||
text-align: center;
|
||
padding-top: 25vh;
|
||
}
|
||
.logo{
|
||
max-width: 80px;
|
||
padding-bottom: 30px;
|
||
}
|
||
.links{
|
||
padding-top: 50px;
|
||
justify-content: space-between;
|
||
display: block;
|
||
}
|
||
|
||
|
||
/*Вторичные страницы*/
|
||
.content_wrap{
|
||
text-align: left;
|
||
width: 100%;
|
||
float: left;
|
||
display: block;
|
||
position: relative;
|
||
margin-top: 12px;
|
||
}
|
||
.content_box{
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
}
|
||
.post_box{
|
||
width: 99%;
|
||
padding: 4px 2px 4px 2px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.logo{
|
||
padding: 0;
|
||
margin: 0;
|
||
width: 40px;
|
||
}
|
||
.nav_box {
|
||
width: 100%;
|
||
border-right: none;
|
||
border-bottom: solid 1px var(--main-color);
|
||
position: relative;
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
height: auto;
|
||
grid-gap:20px;
|
||
}
|
||
|
||
.burger {
|
||
display: block;
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
width: 30px;
|
||
height: 24px;
|
||
z-index: 2;
|
||
}
|
||
.burger .line {
|
||
width: 100%;
|
||
height: 3px;
|
||
background-color: var(--main-color);
|
||
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; /* Вторая линия исчезает */
|
||
}
|
||
|
||
.burger-toggle:checked + .burger .line:nth-child(3) {
|
||
transform: translateY(-8px) rotate(-45deg);
|
||
}
|
||
.burger-toggle:checked ~ .navigation {
|
||
display: flex;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.navigation {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
width: 100%;
|
||
background-color: var(--background-color);
|
||
flex-direction: column;
|
||
border-bottom: solid 1px var(--main-color);
|
||
align-items: center;
|
||
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; /* Убираем скрытие */
|
||
}
|
||
.navigation a {
|
||
width: 100%;
|
||
border: none;
|
||
padding: 15px;
|
||
text-align: left;
|
||
}
|
||
|
||
/* Показать меню, если чекбокс включен */
|
||
.burger-toggle:checked ~ .navigation {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 769px) {
|
||
.burger {
|
||
display: none;
|
||
}
|
||
.navigation {
|
||
display: block;
|
||
}
|
||
}
|