From 1adf56a316ad7f0aaabd0f98bb48caa6526d0f35 Mon Sep 17 00:00:00 2001 From: Nikita <> Date: Tue, 19 Nov 2024 11:18:30 +0200 Subject: [PATCH] Mobile adaptation. Content justification, burger menu, font size 85% for mobile. --- about.html | 23 ++++--- contact.html | 9 +++ download.html | 9 +++ news.html | 9 +++ style.css | 167 +++++++++++++++++++++++++++++++++++++++++++++++++- 5 files changed, 203 insertions(+), 14 deletions(-) diff --git a/about.html b/about.html index 84d0433..6579532 100644 --- a/about.html +++ b/about.html @@ -15,6 +15,16 @@

About Us

+ + + + + +
About Us News @@ -27,18 +37,7 @@
-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, asperiores!

-
-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, laboriosam.

-
-

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, incidunt.

-
-

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda dolor fuga officia, culpa tenetur minus numquam dolore repellendus eum provident atque quo aut enim, alias hic odio totam consequatur in optio. Nemo quod magnam consequuntur!

-
- -
-
- +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus illo voluptatibus atque eos in neque mollitia sapiente deserunt inventore dolores ex minima sint beatae omnis dolor exercitationem amet quod consectetur alias, commodi quasi tenetur itaque quae dolore porro! Distinctio quis inventore voluptates autem suscipit illum? Totam corrupti rem, officiis inventore ab quas temporibus. Officia, ex aliquam blanditiis consectetur impedit quo, numquam id, beatae animi unde quod! Quidem reiciendis facilis nemo neque accusamus, odio distinctio placeat saepe earum illum facere voluptate quibusdam, illo consequuntur eos? Earum corporis ab animi numquam nulla eius, facere voluptas fugiat debitis, eveniet expedita minus sunt quis qui natus nam sint impedit recusandae quam perspiciatis ipsa, officia unde. Error, vitae! Nostrum quo quod, minus similique qui obcaecati harum illum distinctio nihil molestias, sed ullam sint at officiis, unde sequi asperiores fugiat ratione nulla provident aliquid! Labore corrupti excepturi in ducimus perspiciatis doloremque amet consectetur sunt expedita aut aliquid, accusantium, eligendi porro dolores harum repellat magnam similique quia omnis esse ratione provident aliquam tempora cumque eum. Ad quidem aperiam explicabo accusamus odit alias ducimus nulla laborum expedita voluptate repellat quas ullam dignissimos, saepe voluptatibus, doloremque dicta. Blanditiis minus iste vero praesentium minima, dolorum dicta quidem aliquam unde corporis atque delectus error numquam recusandae laudantium rem placeat quis beatae illo eum, ipsa sint eveniet amet? Optio architecto nostrum labore quisquam doloremque. Maxime esse excepturi vero nulla minima fugiat porro ullam veritatis quisquam soluta aperiam blanditiis, eum laudantium voluptas aut consequatur, perferendis ipsa sequi quidem quibusdam numquam quo minus, deserunt, harum! Voluptate ipsa pariatur totam laudantium eveniet culpa dicta necessitatibus, aliquid amet, exercitationem aut neque quae eaque temporibus nobis porro illo dolores eum rerum cumque nulla tempora, fugit obcaecati perferendis iste. Porro tempora ex pariatur dolorum eveniet vitae, ab accusantium, modi ipsa ducimus voluptates culpa iusto mollitia cumque nesciunt harum.

diff --git a/contact.html b/contact.html index 5bf9b84..6e27a0a 100644 --- a/contact.html +++ b/contact.html @@ -15,6 +15,15 @@

Contact

+ + + + +
About Us News diff --git a/download.html b/download.html index f1cc2b1..8f4651d 100644 --- a/download.html +++ b/download.html @@ -15,6 +15,15 @@

Download

+ + + + +
About Us News diff --git a/news.html b/news.html index 086e973..e489f8a 100644 --- a/news.html +++ b/news.html @@ -15,6 +15,15 @@

News

+ + + + +
About Us News diff --git a/style.css b/style.css index 0297f87..a4917ef 100644 --- a/style.css +++ b/style.css @@ -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{ +} -} \ No newline at end of file + +/* 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; + } +}