Mobile tile layout inbox

by matmat

HTML

<script src="http://fonts.googleapis.com/css?family=Quicksand"></script>
<link href="http://fonts.googleapis.com/css?family=Italianno|Quicksand|Dosis" rel="stylesheet" type="text/css">
<body style="width:250px;height:450px;">
    <div class="body">
    <div class="tilewrapper w50pc pa5pc">
        <div class='box'>
            <div class='content'>
                <img src="http://www.junkst.com/Mobile/Images/Icones/home.png" alt="notifications" title="Notifications" />
            </div>
        </div>
    </div><div class="tilewrapper w50pc lh50pc pa2pc">
        <div class="tilewrapper w50pc h25pc pa10pc">
            <div class='box'>
                <div class='content'>
                    <img src="http://www.junkst.com/Mobile/Images/Icones/groups.png" alt="groups" title="Gérer les contacts" />
                </div>
            </div>
        </div><div class="tilewrapper w50pc pa10pc">
            <div class='box'>
                <div class='content'>
                    <img src="http://www.junkst.com/Mobile/Images/Icones/email.png" alt="abonnements" title="Abonnements" />
                </div>
            </div>
        </div><div class="tilewrapper w50pc pa10pc">
            <div class='box'>
                <div class='content'>
                    <img src="http://www.junkst.com/Mobile/Images/Icones/save.png" alt="annonces" title="Annonces sauvegardées" />
                </div>
            </div>
        </div><div class="tilewrapper w50pc pa10pc">
            <div class='box'>
                <div class='content'>
                    <img src="http://www.junkst.com/Mobile/Images/Icones/search.png" alt="Junkst" title="Junkst" />
                </div>
            </div>
        </div>
    </div>
    <div id="nav">
    <div class="menuwrapper w50pc pa2pc ">
        <div class="menuwrapper w25pc ">
            <div class='box'>
                <div class='content'>
                    <img src="http://www.junkst.com/Mobile/Images/Icones/in.png"...

CSS

html {
    font-family:'quicksand', 'lucida sans';
    font-size:0.9rem;
    color:whitesmoke;

}
div {
    box-sizing: border-box;
    margin:0px;
    padding:0px;
}
.body{
width:250px;height:450px;      
background:gainsboro;
    overflow:auto;
}
.mwrapper {
    background:gainsboro;
    min-height:100vh;
    max-height:450px;
}
.tilewrapper,.menuwrapper {
    margin:auto;
    display:inline-block;
    vertical-align:center;
    cursor:pointer;
    vertical-align: top;
}
.tilewrapper{
background:gainsboro;
   text-align:center;
}
.menuwrapper {
background:grey;
   text-align:left;
    text-indent:5%;
    font-family:dosis;
   letter-spacing: 0.2rem;
}
.menutext{
    display:inline-block;
    height:100%;
    line-height:100%;
vertical-align:middle;
}
.contentwrapper{
   background:white;
    min-height:60vh;
    
}
.pa5pc {
    padding:5%;
}
.pa2pc {
    padding:2%;
}
.pa10pc {
    padding:10%;
    
}
.sbwrapper {
    margin-left:auto;
    margin-right:auto;
    background:#92375D;
}
.searchbox {
    display:table;
    width:100%;
}
.searchinput {
    position: relative;
    display:table-cell;
    vertical-align: middle;
    background: white;
border: 1px solid gainsboro;
}
.searchico {
    display:table-cell;
    vertical-align: middle;
    padding: 3%;

    background:whitesmoke;
    border-radius:0 20% 20% 0%;
}
.searchinput input {
    margin-left:0;
    height:100%;
    width:100%;
    box-sizing:border-box;
    
    font-family:Quicksand;
    font-size:1.1rem;
    border:none;
   
}
.searchlabel {
    display:table-cell;
    text-indent:2%;
    font-size:0.8rem;
    vertical-align:middle;
    
}
.searchbtn{
    color:black;
    text-align:center;
    background:whitesmoke;
}
.searchbtn:active,.searchbtn:focus{
    background:gainsboro;
}
.searchcheck {
    display:table-cell;
}
.menutop50pc{
 height:100%;
    line-height:100%;
vertical-align:middle;
    text-align:left;
}
.accountwrapper {
    margin-top:3%;
    padding:2%;
   ...

JavaScript

$(document).ready(function() {




$(window).scroll(function() {
var stickyNavTop = $('#nav').offset().top;

var scrollTop = $(window).scrollTop();
     
if (scrollTop > stickyNavTop) { 
    $('#nav').addClass('sticky');
} else {
    $('#nav').removeClass('sticky'); 
}

});
});