eriel/theapp
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mobile adaptation. Content justification, burger menu, font size 85% for mobile.

Browse source
This commit is contained in:
Nikita 2024-11-19 11:18:30 +02:00
commit 1adf56a316
5 changed files with 203 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

167
style.css
View file

@ -1,3 +1,4 @@
body,a,p,h1,h2,h3,h5{padding: 0; margin: 0}
body{
background-color: #000; /*Цвет фона всей страницы*/
@ -139,7 +140,7 @@ p, a, ul, li{
}
.content_box{
margin: 50px;
margin: 40px;
}
.logo_home, .logo_home:link, .logo_home:visited, .logo_home:hover, .logo_home:active {
border: none;
@ -175,6 +176,168 @@ p, a, ul, li{
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: #eee;
margin: 5px 0;
}
@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 #eee;
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: #eee;
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: #000;
flex-direction: column;
border-bottom: solid 1px #eee;
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;
}
}