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

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;
-  color: #fff;
+  background-color: $inv_bgColor;
+  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";