From 6d39f868b2129f90f62c3e7d4ca104bfca7eb6a8 Mon Sep 17 00:00:00 2001
From: Adam Scarr <adam.scarr@99designs.com>
Date: Mon, 6 Aug 2018 16:12:47 +1000
Subject: [PATCH] Add logo to doc site

---
 docs/layouts/_default/baseof.html  |   6 +-
 docs/layouts/partials/gqlgen.svg   |   1 +
 docs/layouts/partials/sidebar.html |  15 +-
 docs/static/favicon.ico            | Bin 4286 -> 4286 bytes
 docs/static/main.css               | 218 +++++++++++++++++++++++++----
 docs/static/syntax.css             |   8 +-
 6 files changed, 210 insertions(+), 38 deletions(-)
 create mode 100644 docs/layouts/partials/gqlgen.svg

diff --git a/docs/layouts/_default/baseof.html b/docs/layouts/_default/baseof.html
index 3f274ce85a..f3b653f766 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 0000000000..e0f16389f4
--- /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 df01cdbe8a..068fb89ac4 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 0bb7dae6d842db7ff6364c39988f323f9798eefd..b136cce9338cdb4894bed86d2ea1d0b57d3e57d7 100644
GIT binary patch
literal 4286
zcmc&%O^g&p7;RMCNTOpR5;zU<ClEd8O%G#c52#sial3ju+(<aU!ASI`2TUe}>~2?2
zFm6I*ufl-@4r0Pd35%N;AwzeME^&=w_T+^FlW<@b+8N*L>1ujvdwQl9BeSWkzwf<Q
zUG-JfSB9|(e>-;?{BN9l-Y~WqhOrw7O~yD9+l&6Zy8W8(h^xLU?)p-Ee`D5uWmFE@
z2GaZ?#x9a;R4nao*6gRDc?+qVO22ly_>>{PZmsqNFv}?%IsR-c9N9bsnsobe>P-zF
zjpLVD>!rkKK%pV0Ue3aLbLJZZAbrh^`s7yN&t`ChjXAs2XPi-?4Y2>L!@K4ga%VuI
zCeE8D&4a+*j<Bw{-^byYCkA2lcC7nMKUS>8^*g?_KDkmGe=3cEZWaB_*rpS>;+yNz
z-VPu7z;neHzGJ?dwr9Cfo7~cLtx2YzPTJ4t{ehf*FT%QF-?bU@g}|}C0)I3wffT<5
zbJqLBplu=6<r-fD-&;DDUhl1uxuS67qlRv$*U3!{h4Z91jdBO69XRG8u7Qrps>9w<
z94hx*Yc9)HZ=(jasEI`FF82A~x?Nr!-+MvnCb=ul=VA0dY9`o%`k1%x60ABS9C1<C
z$g6KuAHMx*r0t3j<zABF0oy!jeV(V8?%Rky_fGuXYup>$15EUFtjRt0VQoK4>kKLv
z)%RWVF!<>&Yus}>FZWYCh7Q)}sNS#Fhv~04`=5=^kxTJ<Q~N%~@uAM8>Rx?n0yfI8
zou-_A=a2b`G1Z^W^YnSo_|m)ruISunjx(u)?>ms@$SMP8BlY%G55LT_Ot;O`Z#wp_
zw6-cYz7#uj9=#6UkCeU218IGoVK;F9HR{%Gg-z!p>AT`o8WWXWu~bCAH~(U>k7vaB
zhp)`{;kb5E)QjlTmi~u5HVdvxSbLr~Bl{o5koXPCm$UBey!F?|$~x|^kK-|{VPEXi
zZP<o>-m@LrHeGX@R~Kd7PSuO*6ZbgJpJd$X{FT=Ke*Pw7km4fdIa%Xg+5A@ZkCJa>
z{uM9$`M<n>>DR^L57(6X_di1XQ8@ncX6zR+f4@H*gSnCy+p2lf<1gSB*yp>`<0!9-
zKjH6tG1tfNZF>}l%6ad4j@Zw{vT9d3W7Y_ZJ4uf}aX+l6_*2<4CdN5^1moz%-_q)f
zzXL}cSGL1)XrFjEH_`dWJCXi+hw%a5SA#gB*cNYvG(IkeKhIA*HwdTN<M&6n4nO4m
zq43Nf=lhHL@%!^H?HiUye}9@cHSDb-?@x{a{_#5AML*(Pzst9Dk@q+J_Ep|H#F8WL
z{T-Iu)pn^>W@?pMrNwgl$y%kdX{=pdEw#(7YP%dpsZ|QAt7BnxX(_CXtsZ;3)T*Qt
Y+A7th#hwjqV;niiMNV>4L+MfbU#-=o0RR91

literal 4286
zcmcJSU2GIp6vwA7wxwWNq5`6!Rlyh}k#=`Bepl;5HAV~=OnflbMBj`Le#E}9YD_SG
zfS=)kK43J`-EB#zHX%mYfMJOVDk4VltGFH7irN-bDip`xe|GM4I@uPsDck&d&b{Z{
zbMD=__sm_(s^G7o!P0+gTb*Ssv@Gjdpv$@))IXb_Owy^y*v?(B)#pCNPuu;onP$pZ
z<h&Dx!S(q)lW^{za=<Ja$X5d$q1<K;`(`oCq)_Av+URxAT_XSCzzHQhCfr|+o=Nmu
znHz_KA;eq;FTx0%0<-or=-<QBaG4p9PE5?(^p%p^R}EX4<kWkIm`mU(aNs*oo_6@u
zXMNgs)}il#eeh^!+^H#*OMMypXkb$Aw4a-C3*cU8F%IZ$a1aKeoqcw7$hMfi#X&pa
zTtfSC_!@TOyE?Gh&TaIq&e((1>O=QT>14r^w42~_(7rwfIp~Fxuo;%WcfC{LIiKYp
zzKh8HJW{bfh7aIRA3dil!y#zThb>^9r;$I>*V<(}wb}Bi%i8@b8Na_o+|QIhlNj`-
zf&FsGm+;fR5@tR#k>e%CpNy=(7N7Scey3@_3wOhs8M2mfFGF<R`@{LA<8w270cO3U
zJj42^U%74KErQ>`%;5m~4T__BO^zTW`c>F;#(H239+Pppvl$GIC~3}Ew$Y2P@9!7*
z3A7hhdNC*0v|u#$pW!*!1czaXj9F??IiD`OV0GF97x*zckZ*y`LiKigXv%jLcIDUE
zQJqztd!d}X@-=mjv8q{$p}MK{d;)W)i-%qLy_`IcC(wU|Rnv_L+syN14htEl8vVNL
z$hV=q{M2&BsFu9}mEk;R)A7$jf2OgxUi7l_`}1yN>@f8w+1YZ$>Ta5--O)MV=XD|P
z0qys-#s|He{Hb7E!kNoh)#9A`(#eVQVtl-Qd%$brcM<3v^ikMO`%UonpLs^cPJeN1
zlXEe8KWsHNN!qQT_rQZ*J9K8le!j2XKmUTRfWe2h>f1qb*Qygeu=(v<=qrG!6JMeS
z?@;t^_=D#;$MY{S2kfdJ-@pd&_6t&L(tFIr{TqEnF-GxO(pLT57V?qr8F<M|5?yxy
zjooDW!jg5xussU{u)G-GyQe-x+vGO#z@)LZa|J$nX2x#hj)>ng_~?D&okyhA6K4&{
zovNeP&>n>L$e35@Gx3Z(74eyePe%zq?S(bQ7yUx`3VI->e(pV<nYQlY-@?Rw#C9H_
z{R5c1M(#2(jl^dK><amAL4ODSfe+z2`66|XQC(RV8ha~k?YW12pE!Ci=pB*<)jpG3
zceDoiW#dD^`-eXLrl{d=wiJ0OR6`}Sz#%vd8#D0%oiBY?ievV&*0?7dADDxD4K$ZS
zJd>M{iXn7Y(;k}d<qq8e)z&BNpJD0UjYosC?plu4-40sM5a^vQ`4=1mtt|z8pgsB|
zcy~4Cz#5CSL2=9dWaAU(l$ff=s;lO^jLJ@IOUuo1F8;*z-1g3M^<C^JF^AyyM<@5`
zuEf-J`dspr^66dX<yJl3Tq3{s`zw7O@<!)E?mIxwKK%U$zZs(b=c7&TMtB8OU%Yxc
zlRWNNv+Iu4yY7fjUzO{oD%?V4TRvAi7E4)HK+bhzeXd(Ivi?7h<IUr($Lq&iPt=d)
uPt=d*3mZrCx%`n>D!)6HD&%9SNA|{Y3pT`ZR;tR)Rk*HVn_QCP&F=rd{NmXF

diff --git a/docs/static/main.css b/docs/static/main.css
index 3689413a9b..1f5fec22fd 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 3a11eb583c..2e0b2e9def 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;
 }