feat: Upgrade logo

README.md

@@ -1,5 +1,6 @@
-# dat-medium
-Markdown blog system for Beaker inspired by Medium.
+<img src="logo.svg" height="100px">
+
+**Dat Medium** is markdown blog system for Beaker inspired by Medium.
 
 ## Installing
 

app/components/Footer.jsx

@@ -1,9 +1,8 @@
 import { h } from 'hyperapp'
 import { version } from '../../package.json'
+import Logo from 'components/Logo'
 
 export default () =>
   <footer>
-    <div class='container wide'>
-      Powered by dat-medium v.{ version }
-    </div>
+    <Logo size='20px' /> v.{ version }
   </footer>

app/components/Logo.jsx

@@ -1,14 +1,48 @@
 import { h } from 'hyperapp'
 
-export default ({ size = '60px' } = {}) =>
+export default ({ size = '60px', className = '' } = {}) =>
   <svg
     x='0px'
     y='0px'
+    class={className}
     width={size}
     height={size}
-    viewBox='0 0 60 60'
+    viewBox='0 0 40 40'
   >
-    <path
-      d='M 30,0 3.875,15 3.875,45 30,60 56.125,45 l 0,-30 z m -16.44727,16.50635 9.09864,0 0,1.09033 7.35449,19.94238 7.35449,-19.82373 0,-1.20898 9.33692,0 0,1.74414 -1.2002,0.15869 c -0.29075,0.0264 -0.51524,0.13236 -0.67383,0.31738 -0.14537,0.18502 -0.21826,0.37647 -0.21826,0.57471 l 0,21.64746 c 0,0.19823 0.0729,0.38968 0.21826,0.5747 0.15859,0.18503 0.38308,0.29096 0.67383,0.31739 l 1.2002,0.15869 0,1.74414 -10.24854,0 0,-1.74414 2.16064,-0.15869 c 0.29075,-0.0265 0.50893,-0.13236 0.6543,-0.31739 0.15859,-0.18502 0.23779,-0.37647 0.23779,-0.5747 l 0,-22.38086 -9.33691,25.17578 -2.02197,0 -9.01953,-24.79931 0,22.00439 c 0,0.19824 0.0724,0.38968 0.21777,0.5747 0.15859,0.18503 0.38357,0.29096 0.67432,0.31739 l 2.31934,0.15869 0,1.74414 -8.78175,0 0,-1.74414 2.31934,-0.15869 c 0.29075,-0.0265 0.50212,-0.13236 0.63428,-0.31739 0.14537,-0.18502 0.21777,-0.37646 0.21777,-0.5747 l 0,-21.64746 c 0,-0.19824 -0.0724,-0.38969 -0.21777,-0.57471 -0.13216,-0.18502 -0.34353,-0.29095 -0.63428,-0.31738 l -2.31934,-0.15869 z '
-      fill='#2aca4b' />
+    <g
+      transform='translate(0,-1012.3621)'
+      style=''>
+      <path
+        fill='#2aca4b'
+        d='M 20 0 L 2.5839844 10 L 2.5839844 30 L 20 40 L 37.416016 30 L 37.416016 10 L 20 0 z M 11.291016 12.5 L 20 17.5 L 28.708984 12.5 L 28.708984 27.5 L 11.291016 27.5 L 11.291016 12.5 z '
+        transform='translate(0,1012.3621)'
+        id='polygon4191' />
+    </g>
+    <g
+      style='display:inline'>
+      <path
+        fill='#000000'
+        opacity='0.3'
+        d='M 37.416667,30 20,40 2.583333,30 Z'
+        id='polygon4191-7'
+      />
+      <path
+        fill='#000000'
+        opacity='0.3'
+        d='M 37.416667,30 20,40 37.416667,10 Z'
+        id='polygon4191-7-5'
+      />
+      <path
+        fill='#ffffff'
+        opacity='0.3'
+        d='M 2.583333,10 20,0 37.416667,10 Z'
+        id='polygon4191-7-3'
+      />
+      <path
+        fill='#ffffff'
+        opacity='0.3'
+        d='M 2.583333,10 20,0 2.583333,30 Z'
+        id='polygon4191-7-5-5'
+      />
+    </g>
   </svg>

app/style/style.css

@@ -62,12 +62,16 @@ main > header svg {
 }
 
 main > footer {
-  font-size: 0.8em;
+  align-items: baseline;
   color: #AAA;
-  height: 3em;
   display: flex;
-  align-items: center;
+  font-family: monospace;
+  font-size: 0.9em;
+  justify-content: flex-end;
+  margin: 1em;
 }
+main > footer svg { margin-right: 5px; }
+main > footer svg path { fill: #AAA; }
 
 article { margin-bottom: 6em; }
 article a:hover { opacity: 0.7; }