Merge pull request #204 from processing/new-logos

New logos

Author: runemadsen

src/components/Topbar.js

@@ -7,27 +7,60 @@ import * as css from './Topbar.module.css';
 import LanguageSelector from './LanguageSelector';
 
 import LogoProcessing from '../images/logo-processing.svg';
-import LogoP5js from '../images/logo-p5js.svg';
-import LogoFoundation from '../images/logo-processingfoundation.svg';
+import LogoProcessingFoundation from '../images/logo-processing-foundation.svg';
+import LogoProcessingAndroid from '../images/logo-processing-android.svg';
+import LogoProcessingPython from '../images/logo-processing-python.svg';
+
+import LogoP5js from '../images/logo-p5js-original.svg';
 
 export const items = [
   {
     className: css.foundation,
-    name: 'Processing Foundation',
+    name: (
+      <>
+        Processing
+        <br /> Foundation
+      </>
+    ),
     link: 'https://processingfoundation.org',
-    logo: <LogoFoundation className={css.logo} />
+    logo: <LogoProcessingFoundation className={css.logo} />,
+    color: '#9c4bff'
   },
   {
     name: 'Processing',
     className: css.processing,
     link: 'https://processing.org',
-    logo: <LogoProcessing className={css.logo} />
+    logo: <LogoProcessing className={css.logo} />,
+    color: '#0564ff'
   },
   {
     className: css.p5,
     name: 'p5.js',
     link: 'https://p5js.org/',
-    logo: <LogoP5js className={css.logo} />
+    logo: <LogoP5js className={css.logo} />,
+    color: '#ED225D'
+  },
+  {
+    name: (
+      <>
+        Processing
+        <br /> Android
+      </>
+    ),
+    link: 'https://android.processing.org/',
+    logo: <LogoProcessingAndroid className={css.logo} />,
+    color: '#98C800'
+  },
+  {
+    name: (
+      <>
+        Processing
+        <br /> Python
+      </>
+    ),
+    link: 'https://py.processing.org/',
+    logo: <LogoProcessingPython className={css.logo} />,
+    color: '#2D9E97'
   }
 ];
 
@@ -45,8 +78,14 @@ const Topbar = ({ show }) => {
             <li key={key} className={classnames(css.item, item.className)}>
               <a className={css.itemLink} href={item.link}>
                 {item.logo}
-                <span>{item.name}</span>
+                <span className={css.name} style={{ color: item.color }}>
+                  {item.name}
+                </span>
               </a>
+              <span
+                className={css.itemBar}
+                style={{ borderBottomColor: item.color }}
+              />
             </li>
           ))}
         </ul>

src/components/Topbar.module.css

@@ -29,7 +29,6 @@
 }
 
 .menu {
-  flex-basis: var(--col6);
   display: flex;
   align-items: center;
 }
@@ -41,57 +40,55 @@
 }
 
 .item {
-  display: flex;
-  align-items: center;
   margin-right: 2rem;
   box-sizing: border-box;
   height: 100%;
   color: var(--processing-blue-mid);
   font-weight: 600;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
 }
 
-.item:hover {
-  border-bottom: solid 4px var(--processing-blue-deep);
+.item a {
   padding-top: 4px;
+  display: flex;
+  height: calc(100% - 4px);
 }
 .item a,
 .item a:hover {
   color: inherit;
 }
-/*Styles for each logo */
-
-.logo {
-  margin-right: 5px;
-  width: 27px;
-  height: auto;
+.item .name {
+  line-height: 1;
 }
-
-.foundation {
-  color: var(--foundation-mid);
+.itemBar {
+  opacity: 0;
+  border-bottom: solid 4px var(--processing-blue-deep);
+  display: block;
+  width: 100%;
+  height: 0;
 }
-
-.foundation:hover {
-  border-color: var(--foundation-mid);
+.item:hover .itemBar {
+  opacity: 1;
 }
 
-.p5 {
-  color: var(--p5-mid);
+/*Styles for each logo */
+
+.logo {
+  margin-right: 8px;
+  width: 30px;
+  height: auto;
 }
 
-.p5:hover {
-  border-color: var(--p5-mid);
+.foundation .logo {
+  margin-top: 2px;
 }
 
-.processing {
-  color: var(--processing-blue-mid);
-  & .logo {
-    margin-top: 3px;
-  }
+.processing .logo {
+  margin-top: 4px;
 }
 
-.processing:hover {
-  border-color: var(--processing-blue-mid);
+.p5 .logo {
+  width: 25px;
 }
 
 .languageSelector {
@@ -104,6 +101,9 @@
       font-size: var(--text-small);
     }
   }
+  .item .name {
+    display: none;
+  }
 }
 
 @media (--small) {
@@ -117,10 +117,6 @@
     margin-right: var(--gutter-double);
   }
 
-  .item span {
-    display: none;
-  }
-
   .logo {
     width: 26px;
     margin-right: 0px;

src/components/sketch/Sketch.js

@@ -53,7 +53,6 @@ const Sketch = ({ children }) => {
     if (window.localStorage) {
       const savedState = window.localStorage.getItem('sketch');
       if (savedState) {
-        console.log('Loaded state from localStorage', savedState);
         setState(JSON.parse(savedState));
       } else {
         setState(initialState);