mmk2410/rangitaki
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Complete material design for the blog for all screen sizes (responsive). Mobile-first

Browse source
This commit is contained in:
mmk2410 2015-06-15 17:58:15 +02:00
parent 96cc249f9d
commit 9d9b9ca962
3 changed files with 103 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.php
View file

@ -51,6 +51,7 @@ THE SOFTWARE.
<body> <body>
<?php if($nav_drawer == "yes"){ ?> <?php if($nav_drawer == "yes"){ ?>
<div class="overlay"></div>
<div class="nav"> <div class="nav">
<div class="divider"></div> <div class="divider"></div>
<?php <?php

62
res/css/rangitaki.css
View file

@ -37,17 +37,28 @@ body{
.main{ .main{
height: 100%; height: 100%;
width: calc(100% - 300px); width: 100% - 300px;
margin-left: 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 */
.header{ .header{
background-color: #ff4415; background-color: #ff4415;
position: fixed; position: fixed;
top: 0px; top: 0px;
right: 0px; right: 0px;
left: 300px; left: 0px;
width: 100%; width: 100%;
height: 64px; height: 64px;
box-shadow: 2px 0px 2px 2px rgba(62, 62, 62, 0.45); box-shadow: 2px 0px 2px 2px rgba(62, 62, 62, 0.45);
@ -64,11 +75,9 @@ body{
} }
.nav-img{ .nav-img{
left: 19px;
top: 19px;
height: 26px; height: 26px;
position: absolute; padding: 19px;
display: none; cursor: pointer;
} }
/* NAV DRAWER */ /* NAV DRAWER */
@ -78,11 +87,12 @@ body{
position: fixed; position: fixed;
height: 100%; height: 100%;
top: 0px; top: 0px;
left: 0px; left: -300px;
background-color: #fff; background-color: #fff;
padding-top: 64px; padding-top: 64px;
border-right: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0;
transition: background-color 125ms ease-in-out 0ms; transition: background-color 125ms ease-in-out 0ms;
z-index: 40;
} }
.nav-item, .nav-item-static{ .nav-item, .nav-item-static{
@ -118,12 +128,13 @@ body{
.card{ .card{
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
width: 65%; width: 75%;
background: #fff; background: #fff;
border-radius: 2px; border-radius: 2px;
padding: 24px; padding: 24px;
box-shadow: 0px 1px 1.5px 1.5px rgba(62, 62, 62, 0.3); box-shadow: 0px 1px 1.5px 1.5px rgba(62, 62, 62, 0.3);
margin-bottom: 40px; margin-bottom: 40px;
max-width: 1160px;
} }
.card a{ .card a{
@ -222,4 +233,37 @@ body{
.footer a:hover{ .footer a:hover{
border-bottom-color: #383838; 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%;
}
} }

62
res/js/app.js
View file

@ -24,26 +24,62 @@
var main = function(){ var main = function(){
$('.fabmenu').mouseenter(function(){ var fabActive = false;
$('.subfab').fadeIn(125); $('.fabmenu').click(function(){
$('.fab-img').fadeOut(60, function callback(){ if(!(fabActive)){
$('.fab-img').attr("src", "http://c2/rangitaki/res/img/close.svg"); fabFadeIn();
}); fabActive = true;
$('.fab-img').fadeIn(60); } else {
fabFadeOut();
fabActive = false;
}
}); });
$('.fabmenu').mouseleave(function(){ var navOpen = false;
$('.subfab').fadeOut(125); $('.nav-img, .overlay').click(function(){
$('.fab-img').fadeOut(60, function callback(){ if(!(navOpen)){
$('.fab-img').attr("src", "http://c2/rangitaki/res/img/share.svg"); openNav();
}); navOpen = true;
$('.fab-img').fadeIn(60); } else {
closeNav();
navOpen = false;
}
}); });
} };
$(document).ready(main); $(document).ready(main);
function goBack(){ function goBack(){
history.go(-1); 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();
});
} }