Parametrize background color

layout/_base.html

@@ -53,7 +53,7 @@
 					<a class="first en {% if lang == 'en' %}selected{% endif %}" href="{{ 'en' | lang_url }}">en</a>
 					<a class="first {% if lang == 'es' %}selected{% endif %}" href="{{ 'es' | lang_url }}">es</a>
 				</div>
-				<object id="logo" type="image/svg+xml" data="{{ 'svg/alucho-logo.svg' | static }}"></object>
+				<div id="logo">{{ 'alucho-logo' | svg }}</div>
 				<div class="vbox">
 					<div id="alucho-title" class="hbox"><h1 class="header-title"><a>Alejandro Rodríguez</a></h1></div>
 					<div id="designer-subtitle" class="hbox"><a>{{ 'graphic designer' | lang }}</a></div>

static/css/main.css

@@ -5,6 +5,7 @@
 	--caption-vmargin: calc(1.5 * var(--tile-margin));
 	--body-margin: 3.6vw;
 	--theme-color: #46c8a5;
+	--bgcolor: white;
 	/* --tile-margin: 12.75px; */
 	/* --body-margin: 66px; */
 	--header-inner-space: calc(8 * var(--tile-margin));
@@ -133,6 +134,10 @@ body {
 	/* width: calc(100% - 2*var(--body-margin)); */
 	/* margin: 0 var(--body-margin); */
 	position: absolute;
+	background-color: var(--bgcolor);
+}
+#logo #background {
+	fill: var(--bgcolor) !important;
 }
 #wide-header {
 	width: calc(100% - 2*(var(--body-margin)));
@@ -149,7 +154,7 @@ body {
 	justify-content: flex-end;
 	position: fixed;
 	/* width: calc(100% - 2*var(--body-margin) - 2*var(--tile-margin)); */
-	background-color: white;
+	background-color: var(--bgcolor);
 	/* padding-bottom: calc(2*var(--tile-margin)); */
 	/* border-bottom: calc(2*var(--tile-margin)); */
 	height: var(--header-space);
@@ -265,7 +270,7 @@ figure figcaption {
 	display: flex;
 	flex-direction: column;
 	position: absolute;
-	background-color: white;
+	background-color: var(--bgcolor);
 	bottom: 0;
 	width: calc(100% - 2 * var(--caption-hmargin));
   -webkit-transform: translateY(100%);

static/js/eye.js

@@ -1,13 +1,10 @@
-// nilox (c)
-
 window.onload = function () {
     const body = document.getElementById('body');
     const lang = document.getElementById('lang-chooser');
     const eye = document.getElementById('logo');
-    const eyeDoc = eye.contentDocument;
-    const logo = eyeDoc.getElementById('alucho-logo');
-    const iris = eyeDoc.getElementById('iris');
-    const pupil = eyeDoc.getElementById('pupil');
+    const logo = document.getElementById('alucho-logo');
+    const iris = document.getElementById('iris');
+    const pupil = document.getElementById('pupil');
 
     // #iris cx attribute animation settings (relative to #alucho-logo i.e. absolute inside the svg)
     const istart = 66;

static/svg/alucho-logo.svg

@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg
   id="alucho-logo"
   xmlns:dc="http://purl.org/dc/elements/1.1/"