diff --git a/docs/layouts/_default/baseof.html b/docs/layouts/_default/baseof.html
index 3f274ce85ae..f3b653f7668 100644
--- a/docs/layouts/_default/baseof.html
+++ b/docs/layouts/_default/baseof.html
@@ -11,9 +11,9 @@
 
  	<title>{{ if not .IsHome }}{{ .Title }} &mdash;{{ end }} {{ .Site.Title }}</title>
 
-	<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i|Source+Code+Pro:400,700|Work+Sans:600,700|VT323" rel="stylesheet">
-	<link rel="stylesheet" href="{{ .Site.BaseURL }}main.css" type="text/css"/>
-	<link rel="stylesheet" href="{{ .Site.BaseURL }}syntax.css" type="text/css"/>
+	<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i|Source+Code+Pro:400,700|Work+Sans:600,700" rel="stylesheet">
+	<link rel="stylesheet" href="{{ .Site.BaseURL }}main.css?v=2" type="text/css"/>
+	<link rel="stylesheet" href="{{ .Site.BaseURL }}syntax.css?v=2" type="text/css"/>
 
 	<!-- Global site tag (gtag.js) - Google Analytics -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-116208894-2"></script>
diff --git a/docs/layouts/partials/gqlgen.svg b/docs/layouts/partials/gqlgen.svg
new file mode 100644
index 00000000000..e0f16389f49
--- /dev/null
+++ b/docs/layouts/partials/gqlgen.svg
@@ -0,0 +1 @@
+<svg version="1.1" viewBox="0 0 31.92 31.43" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-79.29 -106.7)"><path transform="matrix(.2646 0 0 .2646 79.29 106.7)" d="m31.95 0c-5.673 0-10.27 4.598-10.27 10.27 0 0.5862 0.06001 1.157 0.1543 1.717l-19.74 11.39c-1.239 0.5653-2.1 1.816-2.1 3.266v65.51h0.01562c0.001603 1.235 0.6446 2.437 1.793 3.096l20.03 11.56c-0.09429 0.5594-0.1543 1.131-0.1543 1.717 0 5.673 4.598 10.27 10.27 10.27 5.674 0 10.27-4.6 10.27-10.27 0-5.673-4.598-10.27-10.27-10.27-2.492 0-4.774 0.8879-6.553 2.363l-18.22-10.52v-61.4l18.22-10.52c1.778 1.475 4.061 2.363 6.553 2.363 5.674 0 10.27-4.6 10.27-10.27 0-5.673-4.598-10.27-10.27-10.27zm56.73 0c-5.673 0-10.27 4.598-10.27 10.27 0 5.673 4.598 10.27 10.27 10.27 2.492 0 4.776-0.8879 6.555-2.363l18.22 10.52v61.4l-18.22 10.52c-1.778-1.474-4.062-2.361-6.553-2.361-5.673 0-10.27 4.598-10.27 10.27 0 5.673 4.598 10.27 10.27 10.27 5.675 0 10.27-4.6 10.27-10.27 0-0.5862-0.06002-1.157-0.1543-1.717l19.74-11.39c1.239-0.5653 2.1-1.814 2.1-3.264v-65.51h-0.01562c-0.00133-1.236-0.6437-2.438-1.793-3.098l-20.03-11.56c0.09428-0.5594 0.1543-1.131 0.1543-1.717 0-5.673-4.597-10.27-10.27-10.27zm-28.37 20.76c-5.675 0-10.27 4.598-10.27 10.27 0 1.524 0.3402 2.967 0.9355 4.268l-14.76 14.76c-1.301-0.5953-2.742-0.9355-4.266-0.9355-5.673 0-10.27 4.598-10.27 10.27 0 5.673 4.598 10.27 10.27 10.27 1.524 0 2.963-0.3406 4.264-0.9355l14.77 14.77c-0.5953 1.301-0.9355 2.742-0.9355 4.266 0 5.673 4.599 10.27 10.27 10.27 5.672 0 10.27-4.596 10.27-10.27 0-1.524-0.3401-2.965-0.9355-4.266l15.63-15.63c0.5748 0.0998 1.162 0.1621 1.766 0.1621 5.675 0 10.27-4.598 10.27-10.27 0-5.675-4.599-10.27-10.27-10.27-1.524 0-2.965 0.3404-4.266 0.9355l-13.13-13.13c0.5954-1.301 0.9355-2.743 0.9355-4.268 0-5.673-4.599-10.27-10.27-10.27zm-4.266 19.61c1.3 0.5949 2.742 0.9355 4.266 0.9355 1.523 0 2.964-0.3408 4.264-0.9355l13.13 13.13c-0.5948 1.3-0.9355 2.742-0.9355 4.266 0 2.377 0.8147 4.558 2.17 6.299l-14.36 14.37c-1.3-0.5947-2.741-0.9336-4.264-0.9336-1.524 0-2.965 0.3388-4.266 0.9336l-14.77-14.77c0.5949-1.3 0.9355-2.74 0.9355-4.264 0-1.523-0.3389-2.964-0.9336-4.264l14.76-14.77z"/></g></svg>
diff --git a/docs/layouts/partials/sidebar.html b/docs/layouts/partials/sidebar.html
index df01cdbe8a8..068fb89ac49 100644
--- a/docs/layouts/partials/sidebar.html
+++ b/docs/layouts/partials/sidebar.html
@@ -1,5 +1,18 @@
+<div class="layout--logo">
+	<a class="logo" href="http://github.com/99designs/gqlgen">
+		{{ partial "gqlgen.svg" }}
+		<span class="logo--name">gqlgen</span>
+	</a>
+</div>
+
 <nav>
-	<a class="logo" href="http://github.com/99designs/gqlgen">gqlgen</a>
+	<input class="hamburger-toggle" type="checkbox" />
+
+	<div class="hamburger">
+		<span></span>
+		<span></span>
+		<span></span>
+	</div>
 
 	<ul class="menu">
 	{{ $currentPage := . }}
diff --git a/docs/static/favicon.ico b/docs/static/favicon.ico
index 0bb7dae6d84..b136cce9338 100644
Binary files a/docs/static/favicon.ico and b/docs/static/favicon.ico differ
diff --git a/docs/static/main.css b/docs/static/main.css
index 3689413a9bf..1f5fec22fd3 100644
--- a/docs/static/main.css
+++ b/docs/static/main.css
@@ -1,3 +1,27 @@
+:root {
+    --font-text: 'Roboto', sans-serif;
+    --font-heading: 'Work Sans', sans-serif;
+    --font-code: 'Source Code Pro', monospace;
+
+    --main-bg-color: coral;
+
+    --color-link: #336699;
+    --color-text: #556;
+
+    --color-heading-text: #445;
+    --color-heading-background: #e9ebed;
+
+    --color-nav-text: #eee;
+    --color-nav-background: #0A215C;
+    --color-nav-active: #284578;
+
+    --color-anchor-default: #DDD;
+    --color-anchor-hover: #666;
+
+    --color-code-text: #445;
+    --color-code-background: #f5f9fc;
+}
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -42,7 +66,7 @@ table {
 }
 
 body {
-    font-family: 'Roboto', sans-serif;
+    font-family: var(--font-text);
     font-size: 15px;
     line-height: 1.55em;
     display: flex;
@@ -51,7 +75,7 @@ body {
 }
 
 a {
-    color: #336699;
+    color: var(--color-link);
     text-decoration: none;
 }
 
@@ -62,7 +86,11 @@ a:hover {
 @media (min-width: 768px) {
     body {
         display: grid;
-        grid-template-columns: 220px 1fr;
+        grid-template:
+            'logo header'
+            'nav content'
+            'nav footer';
+        grid-template-columns: 200px 1fr;
         grid-template-rows: min-content auto min-content;
     }
 }
@@ -70,29 +98,32 @@ a:hover {
 main {
     flex: 1;
     padding: 20px;
-    color: #556;
+    color: var(--color-text);
 }
 
 .content {
+    grid-area: content;
     max-width: 920px;
     margin: auto;
 }
 
 header {
-    background: #e9ebed;
+    grid-area: header;
+    background: var(--color-heading-background);
     padding: 45px 20px;
-    overflow:hidden;
+    overflow: hidden;
 }
 
 footer {
     padding: 2px;
     text-align: center;
     font-size: 0.7em;
-    color: #222;
+    color: var(--color-heading-text);
 }
 
 h1,h2,h3,h4,h5,h6 {
-    font-family: 'Work Sans', sans-serif;
+    font-family: var(--font-heading);
+    color: #445;
 }
 
 h1 {
@@ -105,7 +136,7 @@ h1 {
 .description {
     font-family: 'Work Sans', sans-serif;
     font-size: 18px;
-    color: #555;
+    color: var(--color-text);
 }
 
 .header-link {
@@ -131,14 +162,15 @@ p {
 }
 
 nav {
-    color: #eee;
-    background-color: #303538;
-    grid-row: span 3;
+    grid-area: nav;
+    color: var(--color-nav-text);
+    background-color: var(--color-nav-background);
+    font-family: var(--font-heading);
+    font-weight: 500;
 }
 
 .menu {
-    font-family: 'Work Sans', sans-serif;
-    font-weight: 700;
+
 }
 
 .menu a {
@@ -163,26 +195,36 @@ ul.submenu {
 }
 
 ul.menu li {
+    font-weight: 400;
 }
 
-ul.menu li.active {
-    background-color: #576;
+ul.menu li.active,
+ul.menu li:hover  {
+    background-color: var(--color-nav-active);
 }
 
-ul.menu li:hover {
-    background-color: #222;
+.layout--logo {
+    grid-area: logo;
+    background-color: var(--color-nav-background);
 }
 
 .logo {
-    font-family: 'VT323', monospace;
-    font-size: 3em;
-    text-decoration: none;
+    grid-area: logo;
     color: #eee;
-    width: 100%;
+    margin: 15px;
     text-align: center;
-    margin: 70px auto;
-    border-bottom: none;
-    display:block;
+    display: block;
+}
+
+.logo svg {
+    fill: currentColor;
+    max-width: 30px;
+}
+
+.logo--name {
+    vertical-align: top;
+    height: 100%;
+    font-size: 30px;
 }
 
 .logo:hover {
@@ -190,10 +232,11 @@ ul.menu li:hover {
 }
 
 code {
-    padding:2px;
-    font-family: 'Source Code Pro', monospace;
+    padding: 1px 5px;
+    font-family: var(--font-code);
     font-weight: 500;
-    color: #996666;
+    color: var(--color-code-text);
+    background-color: var(--color-code-background);
 }
 
 strong {
@@ -210,12 +253,127 @@ strong {
 }
 
 .anchor-icon {
-    fill: #DDD;
+    fill: var(--color-anchor-default);
     display: inline-block;
     vertical-align: middle;
     padding: 5px;
 }
 
 .anchor-icon:hover {
-    fill: #666;
+    fill: var(--color-anchor-hover);
+}
+
+@media (min-width: 768px) {
+    .logo {
+        margin: 20px 50px;
+
+    }
+    .logo svg {
+        max-width: none;
+        margin: 5px;
+    }
+    nav input {
+        display: none;
+    }
+}
+
+/* pure css hamburger, adapted from https://codepen.io/erikterwan/pen/EVzeRP */
+
+@media (max-width: 767px) {
+    .layout--logo {
+        z-index: 2;
+    }
+
+    nav {
+        -webkit-user-select: none;
+        user-select: none;
+
+    }
+
+    .hamburger {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        margin: 15px;
+        z-index: 3;
+    }
+
+    nav input {
+        display: block;
+        width: 70px;
+        height: 70px;
+        position: absolute;
+        top: -7px;
+        left: -5px;
+
+        cursor: pointer;
+
+        opacity: 0; /* hide this */
+        z-index: 4; /* and place it over the hamburger */
+
+        -webkit-touch-callout: none;
+    }
+
+    .hamburger span {
+        display: block;
+        width: 28px;
+        height: 4px;
+        margin: 5px;
+        position: relative;
+        background: currentColor;
+        border-radius: 3px;
+        z-index: 1;
+        transform-origin: 0 1.5px;
+
+        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
+        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
+        opacity 0.55s ease;
+    }
+
+    nav input:checked ~ .hamburger span {
+        opacity: 1;
+        transform: rotate(45deg) translate(-2px, -1px);
+    }
+
+    nav input:checked ~ .hamburger span:nth-last-child(2) {
+        opacity: 0;
+        transform: rotate(0deg) scale(0.2, 0.2);
+    }
+
+    nav input:checked ~ .hamburger span:nth-last-child(1) {
+        transform: rotate(-45deg) translate(0, -1px);
+    }
+
+    .menu {
+        z-index: 1;
+        position: absolute;
+        width: 300px;
+        height: 100%;
+        margin: -100px 0 0 -50px;
+        padding: 150px 0;
+
+        color: var(--color-heading-text);
+        background-color: var(--color-heading-background);
+        font-family: var(--font-heading);
+        font-weight: 500;
+
+        list-style-type: none;
+        -webkit-font-smoothing: antialiased;
+        /* to stop flickering of text in safari */
+
+        transform-origin: 0% 0%;
+        transform: translate(-100%, 0);
+
+        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
+    }
+
+    ul.menu li.active,
+    ul.menu li:hover  {
+        background-color: #d3d5d7;
+    }
+
+    nav input:checked ~ ul {
+        transform: none;
+    }
+
 }
diff --git a/docs/static/syntax.css b/docs/static/syntax.css
index 3a11eb583c6..2e0b2e9defe 100644
--- a/docs/static/syntax.css
+++ b/docs/static/syntax.css
@@ -59,10 +59,10 @@
 .chroma code {
     overflow: auto;
     display: block;
-    background-color: #e7edef;
-    padding: 5px;
+    padding: 5px 10px;
     margin-bottom: 1em;
-    font-family: 'Source Code Pro', monospace;
+    font-family: var(--font-code);
+    color: var(--color-code-text);
+    background-color: var(--color-code-background);
     font-size: 13px;
-    color: #445;
 }