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

npm, Gulp, Minimize

Browse source 
Resolves T30, T29
This commit is contained in:
Marcel Kapfer (mmk2410) 2016-04-26 20:24:17 +02:00
parent bc694dc6a0
commit 474efd25f3
16 changed files with 124 additions and 1091 deletions
Download patch file Download diff file Expand all files Collapse all files

58
res/css/no-nav.css
View file

@ -1,57 +1,3 @@
/*
Rangitaki Project
.nav{display:none}.nav-img{display:none}@media screen and (min-width: 1440px){.header{left:0}.main{margin-left:0;width:100%}}@media screen and (max-width: 720px){.title{left:25px}}
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 18, 2015, 7:07:45 PM
Author : mmk2410
*/
/*
A stylesheet for overriding the default styles if the navigation drawer is disabled
*/
.nav{ /* hide the navigation drawer */
display: none;
}
.nav-img{ /* hide the hamburger icon */
display: none;
}
@media screen and (min-width: 1440px) { /* large devices */
.header { /* full width */
left: 0;
}
.main{ /* full width */
margin-left: 0;
width: 100%;
}
}
@media screen and (max-width: 720px){ /* small devices */
.title{ /* move the title more to the left */
left: 25px;
}
}
/*# sourceMappingURL=no-nav.css.map */

1
res/css/no-nav.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"no-nav.css","sources":["no-nav.sass"],"sourcesContent":["/*\n * Rangitaki Project\n *\n * The MIT License\n *\n * Copyright 2015 mmk2410.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n *\n * A stylesheet for overriding the default styles if the navigation drawer is disabled\n */\n\n.nav {\n display: none; }\n\n.nav-img {\n display: none; }\n\n@media screen and (min-width: 1440px) {\n .header {\n left: 0; }\n\n .main {\n margin-left: 0;\n width: 100%; } }\n\n@media screen and (max-width: 720px) {\n\n .title {\n left: 25px; } }\n"],"mappings":"AA4BA,AAAA,IAAI,AAAC,CACD,OAAO,CAAE,IAAK,CAAG,AAErB,AAAA,QAAQ,AAAC,CACL,OAAO,CAAE,IAAK,CAAG,AAErB,MAAM,CAAN,MAAM,MAAM,SAAS,EAAE,MAAM,EACzB,AAAA,OAAO,AAAC,CACJ,IAAI,CAAE,CAAE,CAAG,AAEf,AAAA,KAAK,AAAC,CACF,WAAW,CAAE,CAAE,CACf,KAAK,CAAE,IAAK,CAAG,CAEvB,MAAM,CAAN,MAAM,MAAM,SAAS,EAAE,KAAK,EAExB,AAAA,MAAM,AAAC,CACH,IAAI,CAAE,IAAK,CAAG","names":[]}

306
res/css/rangitaki.css
View file

@ -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 */

1
res/css/rangitaki.css.map Normal file
View file

File diff suppressed because one or more lines are too long

115
res/js/app.js
View file

@ -1,114 +1 @@
/*
* 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.
*/
var main = function () { // main function; called below
var fabActive = false; // fab hidden at begin
$('.fabmenu').click( // action on fab click
function () {
if (!(fabActive)) { // if fab is hidden
fabFadeIn(); // fade fab in
fabActive = true; // fab = active
} else { // if fab is shown
fabFadeOut(); // fade fab out
fabActive = false; // fab = hidden
}
}
);
var navOpen = false; // nav hidden at begin
$('.nav-img, .overlay, .nav-close').click( // action on hamburger click
function () {
if (!(navOpen)) { // if nav is hidden
openNav(); // open the nav drawer
navOpen = true; // nav = open
} else { // if nav is closed
closeNav(); // close the nav drawer
navOpen = false; // nav = closed
}
}
);
/**
* Keyhandling for the navigation drawer.
* opens the drawer on 'm' (key code: 77)
* closes the drawer on 'Esc' (key code: 27)
*/
$(document).keyup(function (e) {
if (navOpen && (e.which === 27)) {
closeNav();
navOpen = false;
} else if (!(navOpen) && (e.which === 77)) {
openNav();
navOpen = true;
}
});
$('.articletext a').attr('target', '_blank');
};
$(document).ready(main); // run if document is loaded
function goBack() { // go back function
history.go(-1);
}
function fabFadeIn() { // fade fab in
$('.subfab').fadeIn(125); // fade subfabs in
$('.fab-img').fadeOut( // fade fab share image out
60, function callback() {
$('.fab-img').attr("src", "./res/img/close.svg"); // change to fab close image
}
);
$('.fab-img').fadeIn(60); // fade fab close image in
}
function fabFadeOut() { // fade fab out
$('.subfab').fadeOut(125); // fade subfabs out
$('.fab-img').fadeOut( // fade fab close image out
60, function callback() {
$('.fab-img').attr("src", "./res/img/share.svg"); // change to fab share image
}
);
$('.fab-img').fadeIn(60); // fade fab share image in
}
function openNav() { // fade navigation drawer in
$('.nav').animate({"left": "0px"}, 125); // slide in
$('.overlay').show(); // set overlay to show ...
$('.overlay').animate({"opacity": "0.4"}, 125); // ... and fade to a darker transparent color
}
function closeNav() { // fade navigation drawer out
$('.nav').animate({"left": "-301px"}, 125); // slide out
$('.overlay').animate(
{"opacity": "0.0"}, 125, function () { // fade the overlay to complete transparency
$('.overlay').hide(); // hide it then
}
);
}
(function(){var n,t,a,e,r,i;r=function(){var e,r;return e=!1,$(".fabmenu").click(function(){return e?(a(),e=!1):(t(),e=!0)}),r=!1,$(".nav-img, .overlay, .nav-close").click(function(){return r?(n(),r=!1):(i(),r=!0)}),$(document).keyup(function(t){return r&&27===t.which?(n(),r=!1):r||77!==t.which?void 0:(i(),r=!0)}),$(".articletext a").attr("target","_blank")},$(document).ready(r),e=function(){return history.go(-1)},t=function(){return $(".subfab").fadeIn(125),$(".fab-img").fadeOut(60,function(){return $(".fab-img").attr("src","./res/img/close.svg"),$(".fab-img").fadeIn(60)})},a=function(){return $(".subfab").fadeOut(125),$(".fab-img").fadeOut(60,function(){return $(".fab-img").attr("src","./res/img/share.svg"),$(".fab-img").fadeIn(60)})},i=function(){return $(".nav").animate({left:"0px"},125),$(".overlay").show(),$(".overlay").animate({opacity:"0.4"},125)},n=function(){return $(".nav").animate({left:"-301px"},125),$(".overlay").animate({opacity:"0.0"},125,function(){return $(".overlay").hide})}}).call(this);