diff --git a/js/components/LogoLink.js b/js/components/LogoLink.js
new file mode 100644
index 0000000..2e28b60
--- /dev/null
+++ b/js/components/LogoLink.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+import Link from './Link';
+
+export default function LogoLink({ small=false }) {
+ return (
+
+
+
+
+
+ Technology Radar
+
+
+
+ );
+}
diff --git a/styles/components/branding.css b/styles/components/branding.css
index 880a58b..ebee26d 100644
--- a/styles/components/branding.css
+++ b/styles/components/branding.css
@@ -12,9 +12,7 @@
&__logo {
flex: 0 0 200px;
& img {
- display: block;
- width: 150px;
- height: 60px;
+ display: inline-block;
}
}
diff --git a/styles/components/logo-link.css b/styles/components/logo-link.css
new file mode 100644
index 0000000..9133a44
--- /dev/null
+++ b/styles/components/logo-link.css
@@ -0,0 +1,63 @@
+.logo-link {
+ display: inline-block;
+ transition: 200ms all ease-out;
+ width: 400px;
+ color: var(--color-white);
+ text-decoration: none;
+ position: relative;
+
+ &__slide {
+ transition: 400ms all cubic-bezier(0.54, 0, 0.28, 1);
+ display: block;
+ position: relative;
+ }
+
+ &__icon {
+ transition: 400ms opacity ease-out;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ opacity: 0;
+ }
+
+ &__img {
+ transition: 400ms all cubic-bezier(0.54, 0, 0.28, 1);
+ }
+
+ &__text {
+ transition: 400ms all cubic-bezier(0.54, 0, 0.28, 1);
+ position: absolute;
+ top: 50%;
+ left: 130px;
+ white-space: nowrap;
+ font-size: 18px;
+ line-height: 1;
+ margin-top: -1px;
+ transform: translateY(-50%);
+ opacity: 0;
+ }
+
+ &--small {
+ .logo-link__img {
+ transform: scale(0.55);
+ }
+
+ .logo-link__text {
+ opacity: 0.8;
+ }
+
+ .logo-link__slide {
+ transform: translateX(-32px);
+ }
+
+ &:hover {
+ .logo-link__icon {
+ opacity: 1;
+ }
+
+ .logo-link__slide {
+ transform: translateX(0);
+ }
+ }
+ }
+}
diff --git a/tasks/watch.js b/tasks/watch.js
index e53de63..2aa5a61 100644
--- a/tasks/watch.js
+++ b/tasks/watch.js
@@ -33,6 +33,7 @@ runBuild('all');
watch(stylesPath(), options, watchBuild('css'));
watch(jsPath(), options, watchBuild('js'));
+watch(jsPath(), options, watchBuild('pages'));
watch(assetsPath(), options, watchBuild('assets'));
watch(radarPath(), options, watchBuild('pages'));