mirror of
https://github.com/Damillora/Yuika
synced 2024-11-05 02:17:32 +00:00
Container and navbar menu without js
This commit is contained in:
parent
56d44dabe5
commit
07bb1710af
@ -87,7 +87,10 @@ header {
|
||||
@apply text-black;
|
||||
}
|
||||
#post .kg-bookmark-container {
|
||||
@apply flex flex-row justify-between text-black border border-gray-500;
|
||||
@apply flex flex-row justify-between text-black border border-gray-500 bg-white transition-bg;
|
||||
}
|
||||
#post .kg-bookmark-container:hover {
|
||||
@apply bg-gray-400 transition-bg;
|
||||
}
|
||||
#post .kg-bookmark-content {
|
||||
@apply w-2/3 py-4 px-4;
|
||||
@ -121,19 +124,34 @@ footer {
|
||||
@apply py-4 px-4;
|
||||
}
|
||||
|
||||
|
||||
.nav {
|
||||
@apply hidden flex flex-col w-full pl-0 my-0 h-12;
|
||||
display: none;
|
||||
@apply hidden flex-col w-full pl-0 my-0 absolute;
|
||||
background-color: #085d93;
|
||||
}
|
||||
.nav li {
|
||||
@apply flex flex-row justify-start items-center h-full my-0 py-2 text-white text-sm px-2;
|
||||
@apply flex flex-row justify-start items-center my-0 py-2 text-white text-sm px-2 h-12 px-4;
|
||||
}
|
||||
.nav li a {
|
||||
@apply align-middle w-full table-cell;
|
||||
line-height: 3rem;
|
||||
}
|
||||
#menushow:hover .nav {
|
||||
@apply block w-screen;
|
||||
right: -1rem;
|
||||
}
|
||||
|
||||
@screen md {
|
||||
.nav {
|
||||
@apply w-auto block flex-row;
|
||||
@apply block static w-auto flex-row h-12 bg-transparent;
|
||||
}
|
||||
.nav li {
|
||||
@apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block px-4;
|
||||
@apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block h-full;
|
||||
}
|
||||
#menushow:hover .nav {
|
||||
@apply pt-0;
|
||||
right: 0;
|
||||
width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
$(document).ready(function () {
|
||||
|
||||
var nav = document.querySelector('.index-navbar');
|
||||
var feed = document.querySelector('#post');
|
||||
var feed = document.querySelector('.content');
|
||||
|
||||
var lastScrollY = window.scrollY;
|
||||
var lastWindowHeight = window.innerHeight;
|
||||
|
@ -1,24 +0,0 @@
|
||||
|
||||
|
||||
function sliderheight(a) {
|
||||
divHeight = $('.navbar').height();
|
||||
if(a) {
|
||||
$('.nav').css({'background-color' : '#3b90c6'});
|
||||
} else {
|
||||
$('.nav').css({'background-color' : ''});
|
||||
}
|
||||
}
|
||||
|
||||
$("#menushow").click(function() {
|
||||
var menu = $(".nav");
|
||||
var menubtn = $("#menushow");
|
||||
if(menu.is(":hidden")) {
|
||||
sliderheight(true);
|
||||
menu.slideDown(250);
|
||||
} else {
|
||||
menu.slideUp(250, function() {
|
||||
sliderheight(false) ;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
@ -50,7 +50,7 @@
|
||||
</div>
|
||||
{{/author}}
|
||||
|
||||
<div class="container px-6 my-6 flex flex-wrap justify-between mx-auto post-feed content">
|
||||
<div class="container px-2 md:px-12 my-6 flex flex-wrap justify-between mx-auto post-feed content">
|
||||
{{#foreach posts}}
|
||||
{{> "post-card"}}
|
||||
{{/foreach}}
|
||||
|
@ -9,7 +9,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container px-6 my-6 flex flex-wrap justify-between mx-auto post-feed content">
|
||||
<div class="container px-2 md:px-12 my-6 flex flex-wrap justify-between mx-auto post-feed content">
|
||||
{{#foreach posts}}
|
||||
{{> "post-card"}}
|
||||
{{/foreach}}
|
||||
|
@ -14,8 +14,8 @@
|
||||
<p class="text-sm text-white">{{@site.description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menushow" class="block md:hidden flex flex-column items-center px-2 py-2 cursor-pointer">
|
||||
<img src="{{asset "images/menu.svg"}}" class="h-8 text-white" style="filter: invert(1);" alt="menu"/>
|
||||
<div id="menushow" class="cursor-pointer relative">
|
||||
<img src="{{asset "images/menu.svg"}}" class="h-12 px-3 py-3 text-white md:hidden" style="filter: invert(1);" alt="menu"/>
|
||||
{{navigation}}
|
||||
</div>
|
||||
{{navigation}}
|
||||
</header>
|
||||
|
Loading…
Reference in New Issue
Block a user