rangitaki/res/css/rangitaki.css

/*
Rangitaki Project

The MIT License

Copyright 2015 mmk2410.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
/*
    Created on : Jun 14, 2015, 6:13:38 PM
    Author     : mmk2410
*/

/*      BODY        */

body{
    margin-top: 94px; /* Set enough space for the header */
}

.main{ /* main content */
    height: 100%;
    margin-left: 0;
}

.overlay { /* overlay: used for a darker background when the navigation drawer is open */
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    width: 100%;
    z-index: 30;
    height: 100%;
    display: none; /* because the thing is hidden at the beginning and shown with js */
}

/*      HEADER      */
.header{
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 64px;
    position: absolute;
}

.title{ /* title in the header */
    color: #fff;
    font-size: 23px;
    text-decoration: none;
    line-height: 64px;
    vertical-align: middle;
    left: 75px;
}

.title > a{ /* and a a styling */
    text-decoration: none;
    color: #fff;
}

.fadeout{ /* a fadeout if the title is to long */
    position: absolute;
    height: 64px;
    top: 0;
    right: 0;
    width: 40px;
}

.nav-img{ /* the hamburger icon */
    height: 26px;
    padding: 19px;
    cursor: pointer;
}

/*      NAV DRAWER      */

.nav{ /* the main object */
    width: 300px;
    position: fixed;
    height: 100%;
    top: 0;
    left: -301px;
    padding-top: 64px;
    z-index: 40;
}

.nav-item, .nav-item-static{ /* a nav-item */
    text-decoration: none;
    text-indent: 0;
    display: inline-block;
    height: 48px;
    vertical-align: middle;
    width: 284px;
    line-height: 48px;
    padding-left: 16px;
    transition: background-color 125ms ease-in-out 0ms;
}

.nav-item{ /* additional setting for clickable nav items */
    cursor: pointer;
}

.divider{ /* a simple divider with all options. better than <hr> */
    width: 100%;
}

/*      MAIN            */

.card{ /* just a card */
    margin-right: auto;
    margin-left: auto;
    width: 75%;
    padding: 24px;
    margin-bottom: 40px;
    max-width: 1160px;
}

.card a{ /* and another a styling */
    -moz-hyphens: auto;
    -epub-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word; /* until here: break long links */
}

.card a:hover{ /* hovered card links; just here to help you create a own theme*/

}

.headline{ /* title in a card */
    display: block;
    padding-bottom: 8px;
}


.card img{ /* image in a card*/
    max-width: 100%; /* regulate width */
    max-height: 400px; /* regulate height */
    display: block; /* centered */
    margin-left: auto; /* centerd */
    margin-right: auto; /* centred */
}

.date{ /* possibility to style the date */

}

.articletext{ /* posibitlity to style the text */

}

.author{ /* styling for the author */
    display: block;
}

.tag{ /* possibility to style the text */

}

/*      FAB             */

.fabmenu{ /* surrounds the complete fab menu */
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.fab{ /* the main fab (always visible if enabled) */
    height: 60px;
    width: 60px;
    border-radius: 30px;
    cursor: pointer;
}

.fab-img{ /* fab image for the main fab */
    width: 28px;
    padding: 15px;
}

.subfab{ /* a smaller fab in the fab menu */
    height: 45px;
    width: 45px;
    border-radius: 30px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 25px;
    display: none;
}

.subfab-img{ /* and the image for it */
    width: 22px;
    padding: 12px;
}

/*      FOOTER          */

.footer{ /* possibility for styling the footer */

}


.footer a{ /* styling of the footer a */
    transition: border-bottom-color 150ms ease-in-out 100ms;
}

.footer a:hover{ /* and the hovered one*/
    border-bottom-color: #383838;
}

@media screen and (min-width: 1440px) { /* make it responsive: large devices */

    .nav{ /* always show navigation bar */
        left: 0;
    }

    .nav-img{ /* always hide navigation bar icon*/
        display: none;
    }

    .header{ /* move header to the right */
        left: 300px;
    }

    .main{ /* move main content to the right and limit its width */
        margin-left: 300px;
        width: calc(100% - 300px);
    }

}


@media screen and (max-width: 720px){ /* make it responsive: small devices */

    .card{ /* wider cards */
        width: 82%;
    }

}