statbate/layout
1
0
Fork 0
mirror of https://github.com/statbate/layout.git synced 2026-08-11 03:12:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update

Browse source
This commit is contained in:
poiuty 2023-06-13 16:22:33 +03:00
parent b9c9e96164
commit 4da3f515eb
4 changed files with 70 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

48
css/statbate.css
View file

@ -49,8 +49,8 @@ width: 100%;
} }
.header_navbar li { .header_navbar li {
list-style-type: none; list-style-type: none;
padding: 8px; padding: 8px;
} }
.header_track { .header_track {
@ -70,7 +70,7 @@ width: 100%;
} }
.footer { .footer {
margin-top: 12px;; margin-top: 12px;
} }
.footer_banner { .footer_banner {
@ -105,13 +105,11 @@ width: 100%;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);
opacity: 0.5; opacity: 0.5;
} }
.header_mobile_nav,
.header_mobile { .header_mobile {
display: none; display: none;
} }
.icon-menu-wrap { .icon-menu-wrap {
flex: 0 0 36px; flex: 0 0 36px;
display: flex; display: flex;
@ -127,8 +125,21 @@ width: 100%;
bottom: 0px; bottom: 0px;
} }
.icon-menu span { .icon-menu._active span {
transform: scale(0);
}
.icon-menu._active span:first-child {
transform: rotate(-45deg);
top: calc(50% - 1px);
}
.icon-menu._active span:last-child {
transform: rotate(45deg);
bottom: calc(50% - 1px);
}
.icon-menu span {
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
left: 0px; left: 0px;
top: calc(50% - 1px); top: calc(50% - 1px);
@ -139,7 +150,6 @@ width: 100%;
} }
.icon-menu { .icon-menu {
position: relative; position: relative;
width: 25px; width: 25px;
height: 20px; height: 20px;
@ -147,16 +157,26 @@ width: 100%;
z-index: 5; z-index: 5;
} }
/* .header_mobile_nav {
justify-content: start; background-color: #bbbab5;
justify-content: center; border-radius: 8px;
justify-content: end; margin-top: 12px;
*/ text-align: center;
}
.header_mobile_nav a {
display: block;
padding: 10px;
font-weight: bold;
color: rgba(0, 0, 0, 0.5);
text-decoration: none;
}
@media (max-width: 805px) { @media (max-width: 805px) {
.header { .header {
display: none; display: none;
} }
.header_mobile { .header_mobile {
width: 100%; width: 100%;
background-color: #eae8d4; background-color: #eae8d4;
@ -164,7 +184,7 @@ justify-content: end;
display: flex; display: flex;
} }
.header_track { .header_track {
flex: 0 0 80px; flex: 0 0 82px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;

14
index.html
View file

@ -15,7 +15,9 @@
<link rel="stylesheet" href="./css/statbate.css"> <link rel="stylesheet" href="./css/statbate.css">
<!-- JS --> <!-- JS -->
<script src="./js/jquery-3.7.0.min.js"></script>
<script src="./js/bootstrap.min.js"></script> <script src="./js/bootstrap.min.js"></script>
<script src="./js/statbate.js"></script>
</head> </head>
@ -50,17 +52,25 @@
<a href="/" class="header_logo"></a> <a href="/" class="header_logo"></a>
<div class="icon-menu-wrap"> <div class="icon-menu-wrap">
<div class="icon-menu"> <div class="icon-menu" onclick="choose()">
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="header_mobile_nav">
<a href="/" class="">Chaturbate</a>
<a href="/bonga/">BongaCams</a>
<a href="/strip/">Stripchat</a>
<a href="/search.php">Search</a>
</div>
<!-- header mobile end --> <!-- header mobile end -->
<div class="content"></div> <div class="content"></div>

2
js/jquery-3.7.0.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

21
js/statbate.js Normal file
View file

@ -0,0 +1,21 @@
var mobile = false;
window.addEventListener("resize", function() {
if(mobile && window.innerWidth > 805) {
mobile = false;
$(".icon-menu").removeClass("_active");
$(".header_mobile_nav").hide();
}
});
function choose(el) {
if($(".icon-menu").hasClass("_active")) {
$(".icon-menu").removeClass("_active");
$(".header_mobile_nav").hide();
mobile = false;
return;
}
$(".icon-menu").addClass("_active");
$(".header_mobile_nav").show();
mobile = true;
}