r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

DP logo and colours

Browse source
This commit is contained in:
Ruben van de Ven 2020-09-09 12:13:51 +02:00
parent a548e6937c
commit 21a5d698b1
5 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/components/Nav.jsx
View file

@ -17,7 +17,8 @@ import { metaKeyName, } from '../utils/metaKey';
import CaretLeftIcon from '../images/left-arrow.svg'; import CaretLeftIcon from '../images/left-arrow.svg';
import TriangleIcon from '../images/down-filled-triangle.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 { class Nav extends React.PureComponent {
constructor(props) { constructor(props) {

1
client/images/dp-logo-line-drawing.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 7.7 KiB

2
client/styles/abstracts/_variables.scss
View file

@ -1,7 +1,7 @@
$base-font-size: 12; $base-font-size: 12;
//colors //colors
$p5js-pink: #ed225d; $p5js-pink: #FFE117; /*DP Colours*/
$processing-blue: #007BBB; $processing-blue: #007BBB;
$p5js-active-pink: #f10046; $p5js-active-pink: #f10046;
$white: #fff; $white: #fff;

13
client/styles/components/_nav.scss
View file

@ -166,12 +166,23 @@
.nav__item-logo { .nav__item-logo {
position: relative; position: relative;
height: #{42 / $base-font-size}rem; height: #{(42 - 1) / $base-font-size}rem;
width: #{56 / $base-font-size}rem; width: #{56 / $base-font-size}rem;
background:$p5js-pink;
& span { & span {
position: absolute; position: absolute;
} }
svg{
width: 100%;
height: 90%;
padding-top: 5%;
path{
stroke: $dark;
}
}
} }
.svg__logo g > path { .svg__logo g > path {
@include themify() { @include themify() {

2
client/theme.js
View file

@ -7,7 +7,7 @@ export const Theme = {
}; };
export const colors = { export const colors = {
p5jsPink: '#ed225d', p5jsPink: '#FFE117', // DP Colours
processingBlue: '#007BBB', processingBlue: '#007BBB',
p5jsActivePink: '#f10046', p5jsActivePink: '#f10046',
white: '#fff', white: '#fff',