From 21a5d698b18803dd9d4ad1a3fd993b41ea1da867 Mon Sep 17 00:00:00 2001 From: Ruben van de Ven Date: Wed, 9 Sep 2020 12:13:51 +0200 Subject: [PATCH] DP logo and colours --- client/components/Nav.jsx | 3 ++- client/images/dp-logo-line-drawing.svg | 1 + client/styles/abstracts/_variables.scss | 2 +- client/styles/components/_nav.scss | 13 ++++++++++++- client/theme.js | 2 +- 5 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 client/images/dp-logo-line-drawing.svg diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx index c227dee7..1bc1dabb 100644 --- a/client/components/Nav.jsx +++ b/client/components/Nav.jsx @@ -17,7 +17,8 @@ import { metaKeyName, } from '../utils/metaKey'; import CaretLeftIcon from '../images/left-arrow.svg'; import TriangleIcon from '../images/down-filled-triangle.svg'; -import LogoIcon from '../images/p5js-logo-small.svg'; +// import LogoIcon from '../images/p5js-logo-small.svg'; +import LogoIcon from '../images/dp-logo-line-drawing.svg'; class Nav extends React.PureComponent { constructor(props) { diff --git a/client/images/dp-logo-line-drawing.svg b/client/images/dp-logo-line-drawing.svg new file mode 100644 index 00000000..6360f360 --- /dev/null +++ b/client/images/dp-logo-line-drawing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index d0f62b27..ada053ce 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -1,7 +1,7 @@ $base-font-size: 12; //colors -$p5js-pink: #ed225d; +$p5js-pink: #FFE117; /*DP Colours*/ $processing-blue: #007BBB; $p5js-active-pink: #f10046; $white: #fff; diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss index a15165a1..586d7e31 100644 --- a/client/styles/components/_nav.scss +++ b/client/styles/components/_nav.scss @@ -166,12 +166,23 @@ .nav__item-logo { position: relative; - height: #{42 / $base-font-size}rem; + height: #{(42 - 1) / $base-font-size}rem; width: #{56 / $base-font-size}rem; + background:$p5js-pink; & span { position: absolute; } + + svg{ + width: 100%; + height: 90%; + padding-top: 5%; + + path{ + stroke: $dark; + } + } } .svg__logo g > path { @include themify() { diff --git a/client/theme.js b/client/theme.js index 9d096d78..997f6b0f 100644 --- a/client/theme.js +++ b/client/theme.js @@ -7,7 +7,7 @@ export const Theme = { }; export const colors = { - p5jsPink: '#ed225d', + p5jsPink: '#FFE117', // DP Colours processingBlue: '#007BBB', p5jsActivePink: '#f10046', white: '#fff',