Merge branch 'release/1.3'

gatsby-config.js

@@ -35,10 +35,11 @@ module.exports = {
     },
     'gatsby-transformer-remark',
     'gatsby-plugin-offline',
+    // 'gatsby-plugin-styled-components',
     {
       resolve: 'gatsby-plugin-styled-components',
       options: {
-        "ssr": false
+        "ssr": true
       }
     },
     'gatsby-transformer-sharp',

package.json

@@ -11,23 +11,23 @@
     "@sanity/block-content-to-react": "^2.0.6",
     "babel-plugin-styled-components": "^1.10.0",
     "dotenv": "^6.2.0",
-    "gatsby": "^2.1.4",
-    "gatsby-image": "^2.0.29",
-    "gatsby-plugin-manifest": "^2.0.17",
+    "gatsby": "^2.1.20",
+    "gatsby-image": "^2.0.31",
+    "gatsby-plugin-manifest": "^2.0.21",
     "gatsby-plugin-meta-redirect": "^1.1.1",
     "gatsby-plugin-nprogress": "^2.0.8",
-    "gatsby-plugin-offline": "^2.0.23",
-    "gatsby-plugin-react-helmet": "^3.0.6",
-    "gatsby-plugin-sharp": "^2.0.20",
-    "gatsby-plugin-styled-components": "^3.0.5",
-    "gatsby-remark-images": "^3.0.4",
-    "gatsby-source-filesystem": "^2.0.20",
-    "gatsby-source-sanity": "^1.1.0",
-    "gatsby-transformer-remark": "^2.2.5",
-    "gatsby-transformer-sharp": "^2.1.13",
+    "gatsby-plugin-offline": "^2.0.24",
+    "gatsby-plugin-react-helmet": "^3.0.7",
+    "gatsby-plugin-sharp": "^2.0.24",
+    "gatsby-plugin-styled-components": "^3.0.6",
+    "gatsby-remark-images": "^3.0.5",
+    "gatsby-source-filesystem": "^2.0.23",
+    "gatsby-source-sanity": "^1.1.1",
+    "gatsby-transformer-remark": "^2.3.0",
+    "gatsby-transformer-sharp": "^2.1.15",
     "github-buttons": "git+https://github.com/ntkme/github-buttons.git",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
     "react-helmet": "^5.2.0",
     "react-media": "^1.9.2",
     "styled-components": "^4.1.3",

src/components/Layout/general.css

@@ -2,7 +2,7 @@
   --color-black: #111111;
   --color-white: #ffffff;
   --color-mint: #91c9b2;
-  --color-mint: #a8e063;
+  --color-mint: #6dd5ed;
   --color-pink: #EA638C;
   --color-grey: #2a2b2b;
   --color-page-background: #111111;

src/components/Layout/header/Header.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import styled from 'styled-components'
-import logo from '../../../images/logo.png'
+import logo from '../../../images/dvanc_logo.png'
 import '../general.css'
 // import '../fonts.css'
 
@@ -108,21 +108,94 @@ const SiteNav = styled.ul`
     color: var(--color-white);
   }
   a {
-    border-bottom: 0!important;
     color: var(--color-white);
+    margin: 0.313em 0.5em;
+    padding-bottom:0.3em;
+
+    display: inline-block;
+    vertical-align: middle;
+    -webkit-transform: perspective(1px) translateZ(0);
+    transform: perspective(1px) translateZ(0);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+    position: relative;
+    overflow: hidden;
+
+    
+    &:before {
+      content: "";
+      position: absolute;
+      z-index: -1;
+      left: 51%;
+      right: 51%;
+      bottom: 0;
+      background: #6dd5ed;
+      height: 4px;
+      -webkit-transition-property: left, right;
+      transition-property: left, right;
+      -webkit-transition-duration: 0.3s;
+      transition-duration: 0.3s;
+      -webkit-transition-timing-function: ease-out;
+      transition-timing-function: ease-out;
+    }
+
     &:hover {
+      border-bottom: 0!important;
       color: var(--color-mint);
     }
     &.active {
-      background: white;
-      color: #333!important;
-      padding: 0.313em 0.5em;
+      color: var(--color-mint);
+      
       &:hover {
-        color: #333;
+        outline: none;
       }
     }
+    &.active:before,
+    &:hover:before, 
+    &:focus:before, 
+    &:active:before {
+      left: 0;
+      right: 0;
+    }
   }
   a:hover { color: var(--color-mint)}
+
+  @-webkit-keyframes pg {
+    to {
+      -webkit-transform: scale(1.6);
+      transform: scale(1.6);
+    }
+  }
+  @keyframes pg {
+    to {
+      -webkit-transform: scale(1.6);
+      transform: scale(1.6);
+    }
+  }
+
+  li.logo a {
+    display: inline-block;
+    vertical-align: middle;
+    -webkit-transform: perspective(1px) translateZ(0);
+    transform: perspective(1px) translateZ(0);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+    &:hover,
+    &:focus,
+    &:active {
+      -webkit-animation-name: pg;
+      animation-name: pg;
+      -webkit-animation-duration: 0.6s;
+      animation-duration: 0.6s;
+      -webkit-animation-timing-function: linear;
+      animation-timing-function: linear;
+      -webkit-animation-iteration-count: infinite;
+      animation-iteration-count: infinite;
+      -webkit-animation-direction: alternate;
+      animation-direction: alternate;
+    }
+    &:before {
+      background: transparent;
+    }
+  }
 `
 
 const isPartiallyActive = ( {isPartiallyCurrent} ) => {
@@ -138,7 +211,7 @@ const Header = (props) => {
     <MainHeader>
       <nav>
         <SiteNav>
-          <li><Link to="/"><img src={logo} alt="Logo of danielvanc.com" height="40" width="40" title="Go to homepage" /></Link></li>
+          <li className="logo"><Link to="/"><img src={logo} alt="Logo of danielvanc.com" height="40" width="40" title="Go to homepage" /></Link></li>
           {/* <li><Link to="/" getProps={isCurrent}{...props}>Home</Link></li> */}
           <li><Link to="/now" getProps={isPartiallyActive}{...props} title="Find out what I'm focusing on now">Now</Link></li>
           <li><Link to="/notes" getProps={isPartiallyActive}{...props} title="Find out what I've written lately">Notes</Link></li>

src/components/Shared/Buttons.js

@@ -19,10 +19,25 @@ const BlogButton = styled(ALink) `
   padding: 0.750em 2em;
   text-transform: uppercase;
 
-  &:hover {
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  -webkit-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+
+  &:hover,
+  &:focus,
+  &:active {
     border: 1px solid var(--color-borders)!important;
     color: #979797!important;
     transition: all 0.5s;
+
+    -webkit-transform: scale(0.8);
+    transform: scale(0.8);
+    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
+    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
   }
 `
 

src/components/Shared/MobileMonthsMenu.js

@@ -3,7 +3,9 @@ import { Location, navigate } from '@reach/router';
 import styled from 'styled-components'
 
 const MobileList = styled.select`
-  -webkit-appearance: listbox;
+  -webkit-appearance: menulist;
+  -moz-appearance: menulist;
+  appearance: menulist;
   @media screen and (min-width: 64em) {
     display: none;
   }

studio/dist/index.html

@@ -1,4 +1,4 @@
-<!doctype html><html><head><meta charSet="utf-8"/><title>danielvanc.com – Sanity</title><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/><link rel="stylesheet" href="/static/css/main.css?c88f60d48515cab6a759"/><link rel="subresource" href="/static/js/vendor.bundle.js?174015d785c7661938f7"/><link rel="subresource" href="/static/js/app.bundle.js?c88f60d48515cab6a759"/><link rel="icon" href="/static/favicon.ico"/></head><body id="sanityBody"><div id="sanity"><div class="sanity-app-loading-screen__root"><style type="text/css">
+<!doctype html><html><head><meta charSet="utf-8"/><title>danielvanc.com – Sanity</title><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/><link rel="stylesheet" href="/static/css/main.css?26f72e6060529d5fe870"/><link rel="subresource" href="/static/js/vendor.bundle.js?395c76b13ba77105821c"/><link rel="subresource" href="/static/js/app.bundle.js?26f72e6060529d5fe870"/><link rel="icon" href="/static/favicon.ico"/></head><body id="sanityBody"><div id="sanity"><div class="sanity-app-loading-screen__root"><style type="text/css">
 .sanity-app-loading-screen__root {
   display: block;
   width: 100vw;
@@ -68,4 +68,4 @@
   text-align: center;
   font-family: helvetica, arial, sans-serif;
 }
-</style><h1>JavaScript disabled</h1><p>Please <a href="https://www.enable-javascript.com/">enable JavaScript</a> in your browser and reload the page to proceed.</p></div></div></noscript></div><script>!function(e,t){if(void 0!==window.fetch)t.forEach(function(t){var o=e.createElement("script");o.src=t,o.async=!1,e.head.appendChild(o)});else{var o=e.getElementById("sanity");'<div style="height:100%;width: 100%;position: absolute;top:45%;text-align:center;font-family:helvetica, arial, sans-serif;">',"<h1>Browser not supported</h1>",'<p>Please use a modern browser such as <a href="https://www.google.com/chrome/">Chrome</a> or <a href="https://www.getfirefox.org/">Firefox</a>.</p>',"</div>","</div>";var r=o;do{r.style.height="100%",r=r.parentNode}while(r.parentNode);o.innerHTML='<div style="position:relative;height:100%;"><div style="height:100%;width: 100%;position: absolute;top:45%;text-align:center;font-family:helvetica, arial, sans-serif;"><h1>Browser not supported</h1><p>Please use a modern browser such as <a href="https://www.google.com/chrome/">Chrome</a> or <a href="https://www.getfirefox.org/">Firefox</a>.</p></div></div>'}}(document,["/static/js/vendor.bundle.js?174015d785c7661938f7","/static/js/app.bundle.js?c88f60d48515cab6a759"]);</script></body></html>
+</style><h1>JavaScript disabled</h1><p>Please <a href="https://www.enable-javascript.com/">enable JavaScript</a> in your browser and reload the page to proceed.</p></div></div></noscript></div><script>!function(e,t){if(void 0!==window.fetch)t.forEach(function(t){var o=e.createElement("script");o.src=t,o.async=!1,e.head.appendChild(o)});else{var o=e.getElementById("sanity");'<div style="height:100%;width: 100%;position: absolute;top:45%;text-align:center;font-family:helvetica, arial, sans-serif;">',"<h1>Browser not supported</h1>",'<p>Please use a modern browser such as <a href="https://www.google.com/chrome/">Chrome</a> or <a href="https://www.getfirefox.org/">Firefox</a>.</p>',"</div>","</div>";var r=o;do{r.style.height="100%",r=r.parentNode}while(r.parentNode);o.innerHTML='<div style="position:relative;height:100%;"><div style="height:100%;width: 100%;position: absolute;top:45%;text-align:center;font-family:helvetica, arial, sans-serif;"><h1>Browser not supported</h1><p>Please use a modern browser such as <a href="https://www.google.com/chrome/">Chrome</a> or <a href="https://www.getfirefox.org/">Firefox</a>.</p></div></div>'}}(document,["/static/js/vendor.bundle.js?395c76b13ba77105821c","/static/js/app.bundle.js?26f72e6060529d5fe870"]);</script></body></html>

studio/package.json

@@ -14,12 +14,12 @@
     "sanity"
   ],
   "dependencies": {
-    "@sanity/base": "^0.140.7",
-    "@sanity/components": "^0.140.7",
-    "@sanity/core": "^0.140.7",
-    "@sanity/default-layout": "^0.140.7",
+    "@sanity/base": "^0.140.8",
+    "@sanity/components": "^0.140.8",
+    "@sanity/core": "^0.140.8",
+    "@sanity/default-layout": "^0.140.8",
     "@sanity/default-login": "^0.140.3",
-    "@sanity/desk-tool": "^0.140.7",
+    "@sanity/desk-tool": "^0.140.8",
     "prop-types": "^15.6",
     "react": "^16.2",
     "react-dom": "^16.2"