From 202de1833252bd731deefd24064d881f52d315b5 Mon Sep 17 00:00:00 2001
From: Robert van Dijk <robert@citroenvlinder17.nl>
Date: Wed, 3 Jan 2024 12:19:21 +0100
Subject: [PATCH] Update buienradar style, and add logo

---
 .../static/buienradar_logo.svg                | 65 +++++++++++++++++++
 .../buienradar_graph/static/css/style.css     | 20 +++++-
 .../buienradar_graph/static/js/index.js       |  5 +-
 .../templates/buienradar_graph/index.jinja2   |  7 +-
 4 files changed, 92 insertions(+), 5 deletions(-)
 create mode 100644 narrowcast_content/buienradar_graph/static/buienradar_logo.svg

diff --git a/narrowcast_content/buienradar_graph/static/buienradar_logo.svg b/narrowcast_content/buienradar_graph/static/buienradar_logo.svg
new file mode 100644
index 0000000..438f7c1
--- /dev/null
+++ b/narrowcast_content/buienradar_graph/static/buienradar_logo.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="184px" height="25px" viewBox="0 0 184 25" enable-background="new 0 0 184 25" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path fill="#152B81" d="M6.584,22.368c1.259,0.562,2.652,0.876,4.12,0.876c5.59,0,10.122-4.531,10.122-10.121
+				c0-1.812-0.478-3.511-1.312-4.982L6.584,22.368z"/>
+			<path fill="#152B81" d="M15.831,4.396c-1.504-0.886-3.254-1.395-5.126-1.395c-5.59,0-10.122,4.531-10.122,10.122
+				c0,1.269,0.235,2.482,0.662,3.602L15.831,4.396z"/>
+		</g>
+		<path fill="#5A9CD7" d="M4.799,21.487L21.907,1.683L1.78,18.491l0,0c-0.595,0.39-0.991,1.061-0.991,1.823
+			c0,1.204,0.975,2.178,2.177,2.178c0.546,0,1.044-0.202,1.426-0.535l0,0h0.001C4.549,21.821,4.686,21.662,4.799,21.487z"/>
+	</g>
+	<path fill="#152B81" d="M28.441,4.529h10.105c4.858,0,5.891,2.74,5.891,4.626c0,1.861-0.904,2.868-2.274,3.618
+		c1.653,0.568,3.205,1.886,3.205,4.601c0,3.694-3.205,5.606-6.462,5.606H28.441V4.529z M34.127,11.714h2.998
+		c1.189,0,1.938-0.336,1.938-1.524c0-0.931-0.775-1.267-1.938-1.267h-2.998V11.714z M34.127,18.589h3.333
+		c1.189,0,2.222-0.337,2.222-1.759c0-1.086-0.646-1.681-1.989-1.681h-3.566V18.589z"/>
+	<path fill="#152B81" d="M61.54,22.98h-4.936v-1.704h-0.052c-0.956,1.343-2.325,2.041-4.368,2.041c-2.403,0-4.6-1.474-4.6-4.549
+		v-9.2h5.117v7.029c0,1.551,0.181,2.637,1.68,2.637c0.878,0,2.041-0.439,2.041-2.585V9.569h5.117V22.98z"/>
+	<path fill="#152B81" d="M69.683,8.121h-5.117V4.529h5.117V8.121z M64.566,9.569h5.117V22.98h-5.117V9.569z"/>
+	<path fill="#152B81" d="M76.773,17.425c0.129,1.523,1.007,2.61,2.609,2.61c0.827,0,1.731-0.311,2.145-0.956h4.781
+		c-1.034,2.894-3.851,4.238-6.899,4.238c-4.291,0-7.521-2.533-7.521-7.003c0-3.903,2.843-7.082,7.081-7.082
+		c5.324,0,7.624,2.972,7.624,8.192H76.773z M81.684,14.763c0-1.239-0.931-2.248-2.249-2.248c-1.525,0-2.404,0.801-2.637,2.248
+		H81.684z"/>
+	<path fill="#152B81" d="M88.87,9.569h4.937v1.706h0.051c0.957-1.345,2.326-2.042,4.369-2.042c2.402,0,4.6,1.474,4.6,4.548v9.199
+		h-5.117v-7.029c0-1.55-0.182-2.636-1.68-2.636c-0.879,0-2.041,0.44-2.041,2.585v7.08H88.87V9.569z"/>
+	<path fill="#5A9CD7" d="M105.791,9.569h4.908v2.145h0.053c0.826-1.603,1.912-2.481,3.773-2.481c0.516,0,1.008,0.077,1.498,0.207
+		v4.523c-0.518-0.182-0.982-0.337-2.016-0.337c-2.016,0-3.102,1.189-3.102,4.058v5.297h-5.115V9.569z"/>
+	<path fill="#5A9CD7" d="M130.986,19.983c0,1.008,0.051,2.145,0.619,2.997h-5.219c-0.131-0.361-0.207-0.903-0.184-1.266h-0.051
+		c-1.084,1.24-2.66,1.603-4.314,1.603c-2.586,0-4.73-1.24-4.73-4.058c0-4.238,4.961-4.083,7.572-4.574
+		c0.699-0.129,1.396-0.336,1.396-1.188c0-0.904-0.854-1.24-1.68-1.24c-1.576,0-1.889,0.801-1.914,1.369h-4.754
+		c0.078-1.887,1.008-2.998,2.326-3.619c1.291-0.62,2.996-0.774,4.574-0.774c6.408,0,6.357,2.661,6.357,5.247V19.983z M126.076,16.96
+		c-0.621,0.311-1.318,0.49-2.018,0.646c-1.135,0.259-1.729,0.543-1.729,1.447c0,0.62,0.67,1.24,1.602,1.24
+		c1.162,0,2.066-0.697,2.145-2.093V16.96z"/>
+	<path fill="#5A9CD7" d="M147.785,22.98h-4.936v-1.473h-0.051c-0.646,0.854-1.422,1.81-3.928,1.81c-3.801,0-5.633-3.747-5.633-7.106
+		c0-3.153,1.213-6.978,5.709-6.978c1.523,0,2.895,0.671,3.67,1.809h0.051V4.529h5.117V22.98z M140.602,12.954
+		c-1.834,0-2.248,1.731-2.248,3.307c0,1.604,0.414,3.335,2.248,3.335s2.248-1.731,2.248-3.335
+		C142.85,14.686,142.436,12.954,140.602,12.954z"/>
+	<path fill="#5A9CD7" d="M163.828,19.983c0,1.008,0.051,2.145,0.619,2.997h-5.221c-0.129-0.361-0.207-0.903-0.18-1.266h-0.053
+		c-1.086,1.24-2.662,1.603-4.316,1.603c-2.584,0-4.729-1.24-4.729-4.058c0-4.238,4.963-4.083,7.572-4.574
+		c0.699-0.129,1.396-0.336,1.396-1.188c0-0.904-0.854-1.24-1.68-1.24c-1.578,0-1.889,0.801-1.912,1.369h-4.756
+		c0.076-1.887,1.006-2.998,2.324-3.619c1.291-0.62,3-0.774,4.576-0.774c6.408,0,6.357,2.661,6.357,5.247V19.983z M158.918,16.96
+		c-0.621,0.311-1.318,0.49-2.016,0.646c-1.139,0.259-1.734,0.543-1.734,1.447c0,0.62,0.674,1.24,1.604,1.24
+		c1.164,0,2.068-0.697,2.146-2.093V16.96z"/>
+	<path fill="#5A9CD7" d="M166.951,9.569h4.91v2.145h0.051c0.826-1.603,1.912-2.481,3.773-2.481c0.516,0,1.008,0.077,1.498,0.207
+		v4.523c-0.516-0.182-0.982-0.337-2.016-0.337c-2.016,0-3.102,1.189-3.102,4.058v5.297h-5.115V9.569z"/>
+	<g>
+		<path fill="#5A9CD7" d="M182.67,8.827c-0.484,0.469-1.068,0.704-1.748,0.704c-0.701,0-1.291-0.24-1.771-0.721
+			c-0.48-0.48-0.721-1.072-0.721-1.773c0-0.729,0.26-1.334,0.777-1.817c0.488-0.451,1.061-0.677,1.715-0.677
+			c0.689,0,1.277,0.244,1.766,0.731c0.486,0.487,0.73,1.075,0.73,1.763C183.418,7.745,183.168,8.342,182.67,8.827z M179.459,5.591
+			c-0.398,0.406-0.596,0.888-0.596,1.445c0,0.578,0.201,1.068,0.605,1.472c0.4,0.404,0.885,0.606,1.453,0.606
+			s1.051-0.203,1.453-0.609c0.4-0.408,0.604-0.898,0.604-1.469c0-0.555-0.201-1.037-0.6-1.445c-0.404-0.415-0.889-0.623-1.457-0.623
+			C180.35,4.969,179.861,5.176,179.459,5.591z M179.83,8.424V5.659c0.172,0,0.428,0,0.77,0.001c0.342,0.001,0.533,0.003,0.57,0.005
+			c0.219,0.016,0.4,0.063,0.545,0.142c0.246,0.135,0.369,0.355,0.369,0.66c0,0.232-0.064,0.4-0.195,0.503
+			c-0.129,0.104-0.289,0.166-0.479,0.186c0.174,0.036,0.305,0.089,0.393,0.159c0.162,0.132,0.244,0.339,0.244,0.621v0.247
+			c0,0.027,0.002,0.054,0.006,0.081c0.002,0.027,0.01,0.054,0.02,0.082l0.025,0.078h-0.691c-0.021-0.088-0.037-0.215-0.045-0.382
+			s-0.023-0.28-0.045-0.339c-0.037-0.097-0.105-0.164-0.203-0.203c-0.055-0.022-0.137-0.037-0.248-0.044l-0.158-0.01h-0.152v0.978
+			H179.83z M181.15,6.204c-0.1-0.039-0.24-0.058-0.42-0.058h-0.176v0.802h0.281c0.168,0,0.301-0.034,0.395-0.101
+			c0.096-0.068,0.143-0.178,0.143-0.329C181.373,6.367,181.299,6.263,181.15,6.204z"/>
+	</g>
+</g>
+</svg>
diff --git a/narrowcast_content/buienradar_graph/static/css/style.css b/narrowcast_content/buienradar_graph/static/css/style.css
index 4b4948b..eb10356 100644
--- a/narrowcast_content/buienradar_graph/static/css/style.css
+++ b/narrowcast_content/buienradar_graph/static/css/style.css
@@ -3,11 +3,27 @@ html {
 }
 
 body {
-    margin: 5px 50px 10px 20px;
-    padding: 60px;
     background-color: #ffffff;
 }
 
+.logo {
+    margin-bottom: -30px;
+    float: right;
+}
+
+.logo img {
+    width: 150px;
+}
+
+.container {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80%;
+}
+
 .source {
     font-weight: normal;
     font-size: 8pt;
diff --git a/narrowcast_content/buienradar_graph/static/js/index.js b/narrowcast_content/buienradar_graph/static/js/index.js
index 294b689..adae32e 100644
--- a/narrowcast_content/buienradar_graph/static/js/index.js
+++ b/narrowcast_content/buienradar_graph/static/js/index.js
@@ -137,7 +137,7 @@ async function createChart() {
                         font: {
                             family: "'RTLGraphikTT-Semibold',Arial,Helvetica,sans-serif",
                             weight: "normal",
-                            size: 8,
+                            size: 12,
                         },
                         padding: 10,
                     }
@@ -158,6 +158,7 @@ async function createChart() {
                         font: {
                             family: "'RTLGraphikTT-Semibold',Arial,Helvetica,sans-serif",
                             weight: "bold",
+                            size: 16,
                         },
                         // autoSkip: true,
                         // maxTicksLimit: 10,
@@ -201,6 +202,7 @@ async function createChart() {
                                 font: {
                                     family: "'RTLGraphikTT-Semibold',Arial,Helvetica,sans-serif",
                                     weight: "bold",
+                                    size: 16
                                 },
                                 position: 'end',
                                 yAdjust: '',
@@ -222,6 +224,7 @@ async function createChart() {
                                 font: {
                                     family: "'RTLGraphikTT-Semibold',Arial,Helvetica,sans-serif",
                                     weight: "normal",
+                                    size: 16,
                                 },
                                 position: 'end',
                                 yAdjust: '',
diff --git a/narrowcast_content/buienradar_graph/templates/buienradar_graph/index.jinja2 b/narrowcast_content/buienradar_graph/templates/buienradar_graph/index.jinja2
index fa80f68..5de639b 100644
--- a/narrowcast_content/buienradar_graph/templates/buienradar_graph/index.jinja2
+++ b/narrowcast_content/buienradar_graph/templates/buienradar_graph/index.jinja2
@@ -8,9 +8,12 @@
     <link rel="stylesheet" href="{{ url_for('buienradar_graph.static', filename='css/style.css') }}">
 </head>
 <body>
-<div>
+<div class="container">
+    <div class="logo">
+        <img src="{{ url_for('buienradar_graph.static', filename='buienradar_logo.svg') }}">
+    </div>
     <canvas id="rainfallChart"></canvas>
-    <div class="source">Source: Buienradar<sup>®</sup></div>
+{#    <div class="source">Source: Buienradar<sup>®</sup></div>#}
 </div>
 
 <script type="text/javascript">