Skip to content

Воронков Валерий / krystalvpn

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 49e8da85 by xcoder
Options

Add burger for horizontal mobile view

1 parent 97eafa6f
Inline Side-by-side
Showing 3 changed files with 125 additions and 6 deletions
index.html
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="image/svg+xml" href="favicons/favicon.svg" rel="icon" /> <link type="image/svg+xml" href="favicons/favicon.svg" rel="icon" />
<link rel="stylesheet" href="bootstrap.min.css" /> <link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css?ver=1.08" />
<title>KrystalVPN</title> <title>KrystalVPN</title>
</head> </head>
<body> <body>
...@@ -250,6 +250,19 @@ ...@@ -250,6 +250,19 @@
</button> </button>
</div> </div>
</div> </div>
<footer class="footer mobile">
<div class="text-center first">
<img src="assets/krystal_logo.svg" alt="krystal footer" />
<span class="footer_title-one">krystal</span>
<span class="footer_title-two">vpn</span>
</div>
<div class="text-center second">
&copy;
<span class="year"></span>
<span data-lang="rights">Все права защищены.</span>
</div>
</footer>
</div> </div>
<footer class="footer"> <footer class="footer">
......
index.js
...@@ -162,17 +162,27 @@ portrait.addEventListener("change", function(e) { ...@@ -162,17 +162,27 @@ portrait.addEventListener("change", function(e) {
// Portrait mode // Portrait mode
console.log("Portrait mode"); console.log("Portrait mode");
const main = document.querySelector(".main"); const main = document.querySelector(".main");
const header = document.querySelector("header");
if (main != null) { if (main != null) {
main.classList.remove("oriented") main.classList.remove("oriented")
} }
if (header != null) {
header.classList.remove("oriented")
}
} else { } else {
// Landscape // Landscape
console.log("Landscape"); console.log("Landscape");
const main = document.querySelector(".main"); const main = document.querySelector(".main");
const header = document.querySelector("header");
if (main != null) { if (main != null) {
main.classList.add("oriented") main.classList.add("oriented")
} }
if (header != null) {
header.classList.add("oriented")
}
} }
}); });
style.css
...@@ -31,11 +31,24 @@ body::-webkit-scrollbar-thumb { ...@@ -31,11 +31,24 @@ body::-webkit-scrollbar-thumb {
background: #ccc; background: #ccc;
} }
/* @media screen and (max-width: 680px) {
body {
overflow-y: hidden;
}
} */
header { header {
background-color: #430092; background-color: #430092;
box-shadow: 0px 4px 22px #000000; box-shadow: 0px 4px 22px #000000;
} }
/* @media screen and (max-width: 680px) {
header {
position: sticky;
z-index: 101;
}
} */
header > ul.nav.nav-pills { header > ul.nav.nav-pills {
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
...@@ -182,6 +195,41 @@ header > ul.nav.nav-pills > .nav-item.detailed > .dropdown { ...@@ -182,6 +195,41 @@ header > ul.nav.nav-pills > .nav-item.detailed > .dropdown {
} }
} }
header.oriented > .nav.nav-pills > .nav-item {
display: none;
}
header.oriented > .nav.nav-pills > .nav-item.detailed {
width: 100%;
justify-content: space-between;
}
header.oriented > .nav.nav-pills > .nav-item.detailed > .menu {
display: none;
}
header.oriented > .nav.nav-pills > .nav-item.detailed > .dropdown {
display: none;
}
header.oriented > .nav.nav-pills > .nav-item.detailed > .humburger {
display: block;
}
header.oriented
> .nav.nav-pills
> .nav-item.detailed
> .humburger
> .humburger-line {
width: 42px;
height: 4px;
margin: 6px 0;
background-color: #faff00;
}
.dropdown-menu.show { .dropdown-menu.show {
min-width: unset; min-width: unset;
...@@ -334,18 +382,31 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher { ...@@ -334,18 +382,31 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
cursor: pointer; cursor: pointer;
} }
.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .mobile-cross-wrapper > img { .opened-mob-menu.show
> .mobile-menu-container
> .top-mobile-section
> .mobile-cross-wrapper
> img {
width: 34px; width: 34px;
} }
} }
.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .menu > span { .opened-mob-menu.show
> .mobile-menu-container
> .top-mobile-section
> .menu
> span {
max-width: max-content; max-width: max-content;
margin-bottom: 30px; margin-bottom: 30px;
} }
.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .menu > span > a { .opened-mob-menu.show
> .mobile-menu-container
> .top-mobile-section
> .menu
> span
> a {
font-family: "RobotoRegular"; font-family: "RobotoRegular";
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
...@@ -359,11 +420,21 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher { ...@@ -359,11 +420,21 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
user-select: none; user-select: none;
} }
.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .menu > span > a:first-child { .opened-mob-menu.show
> .mobile-menu-container
> .top-mobile-section
> .menu
> span
> a:first-child {
margin: 0 0 0 16px; margin: 0 0 0 16px;
} }
.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .menu > span > a:last-child { .opened-mob-menu.show
> .mobile-menu-container
> .top-mobile-section
> .menu
> span
> a:last-child {
margin: 0 16px 0 0px; margin: 0 16px 0 0px;
} }
...@@ -475,6 +546,13 @@ hr.delimeter { ...@@ -475,6 +546,13 @@ hr.delimeter {
background-color: #430092; background-color: #430092;
} }
/* @media screen and (max-width: 680px) {
.main {
overflow-y: scroll;
height: calc(100vh - 88px);
}
} */
.main > .main-first { .main > .main-first {
display: flex; display: flex;
...@@ -925,6 +1003,18 @@ article.notation-one { ...@@ -925,6 +1003,18 @@ article.notation-one {
} }
} }
@media screen and (min-width: 681px) {
.footer.mobile {
display: none;
}
}
@media screen and (max-width: 680px) {
.footer.mobile {
display: block;
}
}
@media screen and (max-width: 680px) { @media screen and (max-width: 680px) {
.support-btn { .support-btn {
margin-bottom: 62px; margin-bottom: 62px;
...@@ -998,6 +1088,12 @@ footer.footer { ...@@ -998,6 +1088,12 @@ footer.footer {
background-color: #430092; background-color: #430092;
} }
@media screen and (max-width: 680px) {
footer.footer {
display: none;
}
}
footer.footer > .text-center.first { footer.footer > .text-center.first {
font-family: "RobotoRegular"; font-family: "RobotoRegular";
font-size: 18px; font-size: 18px;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!