npm, Gulp, Minimize
Resolves T30, T29
This commit is contained in:
parent
bc694dc6a0
commit
474efd25f3
16 changed files with 124 additions and 1091 deletions
|
@ -1,305 +1,3 @@
|
|||
/*
|
||||
Rangitaki Project
|
||||
body{margin-top:94px}.main{height:100%;margin-left:0}.overlay{opacity:0;position:fixed;top:0;left:0;background-color:black;width:100%;z-index:30;height:100%;display:none}.header{top:0;right:0;left:0;width:100%;height:64px;position:absolute}.title{color:#fff;font-size:23px;text-decoration:none;line-height:64px;vertical-align:middle;left:75px}.title>a{text-decoration:none;color:#fff}.fadeout{position:absolute;height:64px;top:0;right:0;width:40px}.nav-img{height:26px;padding:19px;cursor:pointer}.nav{width:300px;position:fixed;height:100%;top:0;left:-301px;z-index:40}.nav-item,.nav-item-static{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-close{cursor:pointer}.nav-close-img{height:35px;padding:12px}.nav-item{cursor:pointer}.divider{width:100%}.card{margin-right:auto;margin-left:auto;width:75%;padding:24px;margin-bottom:40px;max-width:1160px}.card a{-moz-hyphens:auto;-epub-hyphens:auto;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;word-wrap:break-word}.headline{display:block;padding-bottom:8px}.card img{max-width:100%;max-height:400px;display:block;margin-left:auto;margin-right:auto}.author{display:block}.fabmenu{position:fixed;bottom:20px;right:20px}.fab{height:60px;width:60px;border-radius:30px;cursor:pointer}.fab-img{width:28px;padding:15px}.subfab{height:45px;width:45px;border-radius:30px;margin-right:auto;margin-left:auto;margin-bottom:25px;display:none}.subfab-img{width:22px;padding:12px}.pag_buttons{margin-right:auto;margin-left:auto;width:calc(75% + 48px);margin-bottom:80px;max-width:1160px;text-align:right}.button{text-decoration:none;color:#fff;line-height:36px;min-width:64px;text-align:center;height:36px;padding:8px;margin-top:4px;margin-bottom:5px;cursor:pointer}.pag_next{margin-left:8px}.footer a{transition:border-bottom-color 150ms ease-in-out 100ms}.footer a:hover{border-bottom-color:#383838}@media screen and (min-width: 1440px){.nav{left:0;padding-top:64px}.nav-close-img{display:none}.nav-close{display:none}.nav-img{display:none}.header{left:300px}.main{margin-left:300px;width:calc(100% - 300px)}}@media screen and (max-width: 720px){.card{width:82%}.pag_buttons{width:calc(82% + 48px)}}
|
||||
|
||||
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;
|
||||
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-close {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-close-img{ /* the hamburger icon */
|
||||
height: 35px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* BUTTON */
|
||||
|
||||
.pag_buttons {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: calc(75% + 48px);
|
||||
margin-bottom: 80px;
|
||||
max-width: 1160px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.button {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
line-height: 36px;
|
||||
min-width: 64px;
|
||||
text-align: center;
|
||||
height: 36px;
|
||||
padding: 8px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pag_next{
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.nav-close-img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.pag_buttons {
|
||||
width: calc(82% + 48px);
|
||||
}
|
||||
|
||||
}
|
||||
/*# sourceMappingURL=rangitaki.css.map */
|
||||
|
|
Reference in a new issue