[SITE CSS] add style for kirbytags + darken footer color at photo pages

assets/css/main.css

@@ -195,4 +195,28 @@ html {
   .visible-xxs {
     display: block !important; } }
 
+/*
+ * KIRBYTAGS
+ */
+.html5player {
+  width: 100%;
+  height: auto;
+  background-color: black; }
+
+div.video-container {
+  position: relative;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  padding-bottom: 53%;
+  padding-top: 30px;
+  overflow: hidden; }
+
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%; }
+
 /*# sourceMappingURL=main.css.map */

assets/css/templates/home.css

@@ -1,12 +1,10 @@
 /* STYLE for jannikbeyerstedt.de
  * for specific template
  */
-/* line 6, /Users/jannik/Sites/aquila-jannik4/assets/scss/templates/home.scss */
 main div.home {
   text-align: center;
   margin-top: 20%;
   margin-bottom: 20%; }
-  /* line 10, /Users/jannik/Sites/aquila-jannik4/assets/scss/templates/home.scss */
   main div.home h1 {
     margin: 0;
     font-family: 'Alegreya Sans', "Verdana", "Arial", sans-serif;
@@ -14,7 +12,6 @@ main div.home {
     font-size: 60px;
     margin-top: 15px;
     margin-bottom: 15px; }
-  /* line 18, /Users/jannik/Sites/aquila-jannik4/assets/scss/templates/home.scss */
   main div.home p {
     margin: 0;
     font-size: 20px; }

assets/css/templates/photo.css

@@ -5,10 +5,19 @@ body {
   background-color: #424242;
   color: #fff; }
 
+a {
+  color: #108ffd; }
+  a:active, a:hover {
+    color: #75bffe; }
+
 @media (min-width: 544px) {
   nav ul.nav.main {
     color: #fff; } }
 
+footer {
+  background-color: #303030;
+  color: #e6e6e6; }
+
 div.carousel {
   max-width: 1300px;
   margin: 0 auto; }

assets/scss/main.scss

@@ -270,3 +270,29 @@ html {
     display: block!important;
   }
 }
+
+
+
+/*
+ * KIRBYTAGS
+ */
+.html5player {
+  width: 100%;
+  height: auto;
+  background-color: black;
+}
+
+div.video-container {
+  position: relative;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  padding-bottom: 53%;
+  padding-top: 30px;
+  overflow: hidden;
+}
+.video-container iframe {
+  position: absolute; top: 0; left: 0;
+  width: 100%; height: 100%;
+}
+

assets/scss/templates/photo.scss

@@ -7,10 +7,20 @@
 
 @import "../mainvariables";
 
-// change main.scss behavior
+
+$inv_bgColor: #424242;
+$inv_fontcolor: #fff;
+
+// change main.scss behavior - inverted color style
 body {
-  background-color: #424242;
+  background-color: $inv_bgColor;
-  color: #fff;
+  color: $inv_fontcolor;
+}
+a {
+  color: lighten($link-color, 10%);
+  &:active, &:hover {
+    color: lighten($link-color, 30%);
+  }
 }
 @include media-breakpoint-up(sm) {
   nav {
@@ -19,12 +29,16 @@ body {
     }
   }
 }
+footer {
+  background-color: darken($inv_bgColor, 7%);
+  color: darken($inv_fontcolor, 10%);
+}
 
 
 // additional css
 main.photo {
   .container {
-    
+
   }
 }
 
@@ -36,7 +50,7 @@ div.carousel {
 
 
 // ---- from boostrap ----
-// @requires animation.scss (already in main.scss) and carousel.js, util.js
 @import "images";
 
+// @requires animation.scss (already in main.scss) and carousel.js, util.js
 @import "carousel";

site/templates/photo.php

@@ -11,7 +11,6 @@ snippet('base/cont-header');
 ?>
 
 <main class="section photo">
-
   <?php echo snippet('plg-carousel', array('currentPage'=>$page,
                                            'preNormal'=>'',
                                            'preAlt'=>'')); ?>