Version 0.9: Code comments, bug fixes, three new test files

res/css/rangitaki.css

@@ -1,4 +1,6 @@
 /*
+Rangitaki Project
+
 The MIT License
 
 Copyright 2015 mmk2410.
@@ -21,7 +23,7 @@ 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
 */
@@ -29,15 +31,15 @@ THE SOFTWARE.
 /*      BODY        */
 
 body{
-    margin-top: 94px;
+    margin-top: 94px; /* Set enough space for the header */
 }
 
-.main{
+.main{ /* main content */
     height: 100%;
-    margin-left: 0px;
+    margin-left: 0;
 }
 
-.overlay {
+.overlay { /* overlay: used for a darker background when the navigation drawer is open */
     opacity: 0;
     position: fixed;
     top: 0;
@@ -46,19 +48,20 @@ body{
     width: 100%;
     z-index: 30;
     height: 100%;
-    display: none;
+    display: none; /* because the thing is hidden at the beginning and shown with js */
 }
+
 /*      HEADER      */
 .header{
-    top: 0px;
-    right: 0px;
-    left: 0px;
+    top: 0;
+    right: 0;
+    left: 0;
     width: 100%;
     height: 64px;
     position: absolute;
 }
 
-.title{
+.title{ /* title in the header */
     color: #fff;
     font-size: 23px;
     text-decoration: none;
@@ -67,20 +70,20 @@ body{
     left: 75px;
 }
 
-.title > a{
+.title > a{ /* and a a styling */
     text-decoration: none;
     color: #fff;
 }
 
-.fadeout{
+.fadeout{ /* a fadeout if the title is to long */
     position: absolute;
     height: 64px;
-    top: 0px;
-    right: 0px;
+    top: 0;
+    right: 0;
     width: 40px;
 }
 
-.nav-img{
+.nav-img{ /* the hamburger icon */
     height: 26px;
     padding: 19px;
     cursor: pointer;
@@ -88,22 +91,21 @@ body{
 
 /*      NAV DRAWER      */
 
-.nav{
+.nav{ /* the main object */
     width: 300px;
     position: fixed;
     height: 100%;
-    top: 0px;
+    top: 0;
     left: -300px;
     padding-top: 64px;
     z-index: 40;
 }
 
-.nav-item, .nav-item-static{
+.nav-item, .nav-item-static{ /* a nav-item */
     text-decoration: none;
     text-indent: 0;
     display: inline-block;
     height: 48px;
-    text-decoration: none;
     vertical-align: middle;
     width: 284px;
     line-height: 48px;
@@ -111,17 +113,17 @@ body{
     transition: background-color 125ms ease-in-out 0ms;
 }
 
-.nav-item{
+.nav-item{ /* additional setting for clickable nav items */
     cursor: pointer;
 }
 
-.divider{
+.divider{ /* a simple divider with all options. better than <hr> */
     width: 100%;
 }
 
 /*      MAIN            */
 
-.card{
+.card{ /* just a card */
     margin-right: auto;
     margin-left: auto;
     width: 75%;
@@ -130,62 +132,70 @@ body{
     max-width: 1160px;
 }
 
-.card a{
+.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*/
 
 }
 
-.card a:hover{
-
-}
-
-.headline{
+.headline{ /* title in a card */
     display: block;
     padding-bottom: 8px;
 }
 
 
-.card img{
-    max-width: 100%;
-    max-height: 400px;
+.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{
+.date{ /* possibility to style the date */
 
 }
 
-.articletext{
+.articletext{ /* posibitlity to style the text */
 
 }
 
-.author{
+.author{ /* styling for the author */
     display: block;
 }
 
-.tag{
+.tag{ /* possibility to style the text */
 
 }
 
 /*      FAB             */
 
-.fabmenu{
+.fabmenu{ /* surrounds the complete fab menu */
     position: fixed;
     bottom: 20px;
-    right: 20px;    
+    right: 20px;
 }
 
-.fab{
+.fab{ /* the main fab (always visible if enabled) */
     height: 60px;
     width: 60px;
     border-radius: 30px;
     cursor: pointer;
 }
 
-.fab-img{
+.fab-img{ /* fab image for the main fab */
     width: 28px;
     padding: 15px;
 }
 
-.subfab{
+.subfab{ /* a smaller fab in the fab menu */
     height: 45px;
     width: 45px;
     border-radius: 30px;
@@ -195,41 +205,41 @@ body{
     display: none;
 }
 
-.subfab-img{
+.subfab-img{ /* and the image for it */
     width: 22px;
     padding: 12px;
 }
 
 /*      FOOTER          */
 
-.footer{
+.footer{ /* possibility for styling the footer */
 
 }
 
 
-.footer a{
+.footer a{ /* styling of the footer a */
     transition: border-bottom-color 150ms ease-in-out 100ms;
 }
 
-.footer a:hover{
+.footer a:hover{ /* and the hovered one*/
     border-bottom-color: #383838;
 }
 
-@media screen and (min-width: 1440px) {
+@media screen and (min-width: 1440px) { /* make it responsive: large devices */
 
-    .nav{
-        left: 0px;
+    .nav{ /* always show navigation bar */
+        left: 0;
     }
 
-    .nav-img{
+    .nav-img{ /* always hide navigation bar icon*/
         display: none;
     }
 
-    .header{
+    .header{ /* move header to the right */
         left: 300px;
     }
 
-    .main{
+    .main{ /* move main content to the right and limit its width */
         margin-left: 300px;
         width: calc(100% - 300px);
     }
@@ -237,10 +247,10 @@ body{
 }
 
 
-@media screen and (max-width: 720px){
+@media screen and (max-width: 720px){ /* make it responsive: small devices */
 
-    .card{
+    .card{ /* wider cards */
         width: 82%;
     }
 
-}
+}