A few fixes for dark mode (#99)

* fixes

* fix

* clean up

Author: mikatuo

_includes/card.html

@@ -18,7 +18,9 @@
 		<div class="row">
 		{%- if include.icon -%}
 			<div class="columns two">
-				<span class="icon" style="zoom: {{ include.zoom }};"><img src="{{ include.icon }}" alt="{{ include.icon_alt }}"/></span>
+				<span class="icon" style="zoom: {{ include.zoom }};">
+					{% include_relative {{include.icon}} %}
+				</span>
 			</div>
 			<div class="columns ten">
 				<h5 class="left">{{ include.title }}</h5>

_includes/learn_card.html

@@ -1,6 +1,13 @@
 <div class='card left compact clickable'>
 <div class="center" style="padding-bottom: 1em;">
-<a href="{{ include.link }}"><img src="{{ include.image }}" style="max-height: 8em;"/></a>
+<a href="{{ include.link }}">
+    {% assign image_extension = include.image | split:'.' | last %}
+    {%- if image_extension == "svg" -%}
+        <span class="icon">{% include_relative {{include.image}} %}</span>
+    {%- else -%}
+        <img src="{{ include.image }}" style="max-height:8em;border-radius:4px;"/>
+    {%- endif -%}
+</a>
 </div>
 <div>
 <a href="{{ include.link }}"><h5>{{ include.title }}</h5></a>

_includes/learn_section.html

@@ -1,5 +1,5 @@
-
-<div class="section hero blue" style="background-image: url('/images/BG-stripes-left.svg')">
+<div class="blue">
+<div class="section hero dark:darken-10" style="background-image: url('/images/BG-stripes-left.svg')">
 <div class="container">
 <div class="row center">
 <h1>Learn Defold</h1>
@@ -29,3 +29,4 @@ <h1>Learn Defold</h1>
 </div>
 </div>
 </div>
+</div>

_layouts/learn.html

@@ -3,7 +3,7 @@
 title: Learn
 ---
 
-<div class="section hero center blackwhite" style='background-image: url("/images/hero/testimonials-background-0.5x.png");'>
+<div class="section hero center blackwhite dark:darken-10" style='background-image: url("/images/hero/testimonials-background-0.5x.png");'>
 	<div class="container">
 		<div class="row">
 			<div class="column one-half left">

_layouts/post.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 ---
-<div class="section lightest">
+<div class="section lightest dark:dark">
 	<div class="container">
 		<div class="row">
 			<div class="columns ten">

_scss/defold.scss

@@ -23,6 +23,11 @@
 ******************************************************************************/
 
 .dark-mode {
+	.dark\:darken-10 {
+		background-blend-mode: darken;
+		background-color: rgba(0, 0, 0, 0.10);
+	}
+
 	.dark\:dark {
 		background-color: var(--dark) !important;
 		color: var(--lighter) !important;
@@ -1053,6 +1058,12 @@ ul.checkmark li:before {
 .card .icon img {
 	vertical-align: bottom;
 }
+.card .icon svg path {
+	fill: currentColor !important;
+}
+.card.compact .icon svg {
+	max-height: 8em;
+}
 .card h5 {
 	margin-bottom: 0;
 }

tutorials.html

@@ -4,7 +4,7 @@
 nav: floating
 ---
 
-<div class="section hero center blackwhite" style='background-image: url("/images/hero/testimonials-background-0.5x.png");'>
+<div class="section hero center blackwhite dark:darken-10" style='background-image: url("/images/hero/testimonials-background-0.5x.png");'>
 	<div class="container">
 		<div class="row">
 			<div class="column one-half left">

videos.html

@@ -4,7 +4,7 @@
 nav: floating
 ---
 
-<div class="section hero center blackwhite" style='background-image: url("/images/hero/testimonials-background-0.5x.png");'>
+<div class="section hero center blackwhite dark:darken-10" style='background-image: url("/images/hero/testimonials-background-0.5x.png");'>
 	<div class="container">
 		<div class="row">
 			<div class="column one-half left">