1
0
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:
Damillora 2019-11-10 02:00:39 +07:00
parent 56d44dabe5
commit 07bb1710af
7 changed files with 31 additions and 37 deletions

View File

@ -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;
}
}

View File

@ -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;

View File

@ -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) ;
});
}
});

View File

@ -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}}

View File

@ -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}}

View File

@ -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>

View File

@ -27,7 +27,7 @@
</div>
{{/tag}}
<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}}