refactor: add concordia logo and title

lighttpd.conf

@@ -6,7 +6,8 @@ mimetype.assign = (
   ".html" => "text/html",
   ".js" => "application/javascript",
   ".css" => "text/css",
-  ".png" => "image/png"
+  ".png" => "image/png",
+  ".svg" => "image/svg+xml"
 )
 
 index-file.names = ( "index.html" )

src/assets/app_logo_circle.svg

@@ -0,0 +1 @@
+<svg id="b37e941a-4c43-4ef7-9a51-e1598f898259" data-name="Main" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 537.4 537.4"><defs><style>.ac1237be-2158-4fc0-ae9f-071b2ff57398{fill:#0b2540;}.b45f1c22-1b20-401d-9f53-3289cddfc3c4,.be317747-31f7-43a4-9fba-03772684f044,.be531e54-2bea-4919-990d-82f88a84fa29{fill:#ea6954;}.a4966b61-2d1b-4dfd-b016-51913d3feac9,.b45f1c22-1b20-401d-9f53-3289cddfc3c4,.be317747-31f7-43a4-9fba-03772684f044,.be531e54-2bea-4919-990d-82f88a84fa29,.e5dfb83f-a67f-4542-9762-d2465cc0a2c6{stroke:#ea6954;stroke-miterlimit:10;}.b45f1c22-1b20-401d-9f53-3289cddfc3c4{stroke-width:4px;}.a4966b61-2d1b-4dfd-b016-51913d3feac9,.e5dfb83f-a67f-4542-9762-d2465cc0a2c6{fill:none;}.a4966b61-2d1b-4dfd-b016-51913d3feac9{stroke-width:8px;}.e5dfb83f-a67f-4542-9762-d2465cc0a2c6{stroke-width:5px;}.be317747-31f7-43a4-9fba-03772684f044{stroke-width:6px;}.be531e54-2bea-4919-990d-82f88a84fa29{stroke-width:10px;}</style></defs><title>concordia_logo_clean</title><g id="aa7412e7-d10f-4a17-bb5d-8cce7f8be73c" data-name="Background"><circle class="ac1237be-2158-4fc0-ae9f-071b2ff57398" cx="268.7" cy="268.7" r="268.7"/></g><g id="b4a70f8e-cb9b-4d04-a6af-3bbf6423659c" data-name="Thin lines"><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="110.22" y1="241.47" x2="317.86" y2="121.92"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="371.69" y1="148.92" x2="111.87" y2="298.91"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M166,329.18"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M111.87,359.31"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M213.08,358.08"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M162,387.77"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="267.76" y1="389.44" x2="322.41" y2="358.21"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="267.76" y1="389.44" x2="267.76" y2="389.44"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M269.1,89.17"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M269.1,149.77"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="317.86" y1="121.92" x2="317.53" y2="180.07"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="371.75" y1="154.56" x2="371.75" y2="210.37"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="165.3" y1="329.98" x2="164.44" y2="333.16"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="213.08" y1="358.08" x2="213.08" y2="358.08"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="164.44" y1="267.78" x2="164.44" y2="328.38"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="267.76" y1="389.44" x2="111.81" y2="298.88"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="268.07" y1="90.08" x2="267.76" y2="389.44"/></g><g id="ad2424b4-f499-4d57-ba69-57371a617f7c" data-name="Thick lines"><polyline class="a4966b61-2d1b-4dfd-b016-51913d3feac9" points="111.87 299.08 112.61 181.66 267.76 90.08"/><polyline class="a4966b61-2d1b-4dfd-b016-51913d3feac9" points="426.2 179.98 372.06 211.97 267.76 151.37 165.24 210.37 165.24 267.97"/><polyline class="a4966b61-2d1b-4dfd-b016-51913d3feac9" points="322.41 358.21 425.97 297.59 425.18 358.68 267.76 451.17 111.87 359.08"/></g><g id="b157ebcc-6b21-403c-8fdd-bc0b20aa202f" data-name="Medium lines"><polyline class="e5dfb83f-a67f-4542-9762-d2465cc0a2c6" points="267.76 90.08 267.76 150.67 317.86 121.92 317.86 180.07 371.96 149.77 371.96 212.17"/><polyline class="e5dfb83f-a67f-4542-9762-d2465cc0a2c6" points="111.87 359.08 165.3 329.98 165.3 386.17 213.08 358.08 213.08 418.17 267.74 389.44 267.74 451.17"/></g><g id="bab675c2-16d2-4e69-a23f-8e6406c1997e" data-name="Small nodes"><circle class="be317747-31f7-43a4-9fba-03772684f044" cx="371.96" cy="149.77" r="3.19"/><circle class="be317747-31f7-43a4-9fba-03772684f044" cx="213.08" cy="358.08" r="3.19"/></g><g id="b3217dd3-e6fd-4786-bb13-4cd0eac59017" data-name="Big nodes"><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="165.24" cy="267.97" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="267.76" cy="90.08" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="267.76" cy="389.44" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="111.87" cy="298.91" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="165.3" cy="329.98" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="426.3" cy="179.98" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="317.86" cy="121.92" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="322.41" cy="358.21" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="111.87" cy="359.08" r="3.19"/></g></svg>

src/index.html

@@ -8,6 +8,10 @@
 	<script src="darkMode.js"></script>
 </head>
 <body id="preview">
+	<div id="logo" style="display: flex; flex-flow: column; justify-content: center">
+		<img style="height: 128px; display: block" src="assets/app_logo_circle.svg" alt="Concordia">
+		<h1 style="text-align: center; font-weight: bold">CONCORDIA</h1>
+	</div>
 	<!-- Header "Concordia usage guide" -->
 	<h1 class="code-line" data-line-start=0 data-line-end=1 >
 		<a id="Concordia_usage_guide_0"></a>
@@ -123,8 +127,8 @@
 			left: 'unset',
 			time: '0.3s',
 			mixColor: '#d7d6dc',
-			backgroundColor: '#fff', 
-			buttonColorDark: '#282923', 
+			backgroundColor: '#fff',
+			buttonColorDark: '#282923',
 			buttonColorLight: '#fff',
 			saveInCookies: false,
 			label: '🌓',