Complete material design for the blog for all screen sizes (responsive). Mobile-first
This commit is contained in:
mmk2410
parent
96cc249f9d
commit
9d9b9ca962
3 changed files with 103 additions and 22 deletions
|
|
@ -51,6 +51,7 @@ THE SOFTWARE.
|
|||
|
||||
<body>
|
||||
<?php if($nav_drawer == "yes"){ ?>
|
||||
<div class="overlay"></div>
|
||||
<div class="nav">
|
||||
<div class="divider"></div>
|
||||
<?php
|
||||
|
|
|
|||
|
|
@ -37,17 +37,28 @@ body{
|
|||
|
||||
.main{
|
||||
height: 100%;
|
||||
width: calc(100% - 300px);
|
||||
margin-left: 300px;
|
||||
width: 100% - 300px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: black;
|
||||
width: 100%;
|
||||
z-index: 30;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
/* HEADER */
|
||||
.header{
|
||||
background-color: #ff4415;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
left: 300px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
box-shadow: 2px 0px 2px 2px rgba(62, 62, 62, 0.45);
|
||||
|
|
@ -64,11 +75,9 @@ body{
|
|||
}
|
||||
|
||||
.nav-img{
|
||||
left: 19px;
|
||||
top: 19px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
padding: 19px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* NAV DRAWER */
|
||||
|
|
@ -78,11 +87,12 @@ body{
|
|||
position: fixed;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
left: -300px;
|
||||
background-color: #fff;
|
||||
padding-top: 64px;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
transition: background-color 125ms ease-in-out 0ms;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.nav-item, .nav-item-static{
|
||||
|
|
@ -118,12 +128,13 @@ body{
|
|||
.card{
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 65%;
|
||||
width: 75%;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
padding: 24px;
|
||||
box-shadow: 0px 1px 1.5px 1.5px rgba(62, 62, 62, 0.3);
|
||||
margin-bottom: 40px;
|
||||
max-width: 1160px;
|
||||
}
|
||||
|
||||
.card a{
|
||||
|
|
@ -222,4 +233,37 @@ body{
|
|||
|
||||
.footer a:hover{
|
||||
border-bottom-color: #383838;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1440px) {
|
||||
|
||||
.nav{
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.nav-img{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header{
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.main{
|
||||
margin-left: 300px;
|
||||
width: calc(100% - 300px);
|
||||
}
|
||||
|
||||
.card{
|
||||
width: 1160px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px){
|
||||
|
||||
.card{
|
||||
width: 82%;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -24,26 +24,62 @@
|
|||
|
||||
var main = function(){
|
||||
|
||||
$('.fabmenu').mouseenter(function(){
|
||||
$('.subfab').fadeIn(125);
|
||||
$('.fab-img').fadeOut(60, function callback(){
|
||||
$('.fab-img').attr("src", "http://c2/rangitaki/res/img/close.svg");
|
||||
});
|
||||
$('.fab-img').fadeIn(60);
|
||||
var fabActive = false;
|
||||
$('.fabmenu').click(function(){
|
||||
if(!(fabActive)){
|
||||
fabFadeIn();
|
||||
fabActive = true;
|
||||
} else {
|
||||
fabFadeOut();
|
||||
fabActive = false;
|
||||
}
|
||||
});
|
||||
|
||||
$('.fabmenu').mouseleave(function(){
|
||||
$('.subfab').fadeOut(125);
|
||||
$('.fab-img').fadeOut(60, function callback(){
|
||||
$('.fab-img').attr("src", "http://c2/rangitaki/res/img/share.svg");
|
||||
});
|
||||
$('.fab-img').fadeIn(60);
|
||||
var navOpen = false;
|
||||
$('.nav-img, .overlay').click(function(){
|
||||
if(!(navOpen)){
|
||||
openNav();
|
||||
navOpen = true;
|
||||
} else {
|
||||
closeNav();
|
||||
navOpen = false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
$(document).ready(main);
|
||||
|
||||
function goBack(){
|
||||
history.go(-1);
|
||||
}
|
||||
|
||||
function fabFadeIn(){
|
||||
$('.subfab').fadeIn(125);
|
||||
$('.fab-img').fadeOut(60, function callback(){
|
||||
$('.fab-img').attr("src", "http://c2/rangitaki/res/img/close.svg");
|
||||
});
|
||||
$('.fab-img').fadeIn(60);
|
||||
}
|
||||
|
||||
function fabFadeOut(){
|
||||
$('.subfab').fadeOut(125);
|
||||
$('.fab-img').fadeOut(60, function callback(){
|
||||
$('.fab-img').attr("src", "http://c2/rangitaki/res/img/share.svg");
|
||||
});
|
||||
$('.fab-img').fadeIn(60);
|
||||
}
|
||||
|
||||
function openNav(){
|
||||
$('.nav').animate({"left":"0px"}, 125);
|
||||
$('.overlay').show();
|
||||
$('.overlay').animate({"opacity":"0.4"}, 125);
|
||||
}
|
||||
|
||||
function closeNav(){
|
||||
$('.nav').animate({"left":"-300px"}, 125);
|
||||
$('.overlay').animate({"opacity":"0.0"}, 125, function(){
|
||||
$('.overlay').hide();
|
||||
});
|
||||
}
|
||||
Reference in a new issue