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
Download patch file Download diff file Expand all files Collapse all files

62
res/css/rangitaki.css
View file

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