Skip to content

Commit

Permalink
Add logo to doc site
Browse files Browse the repository at this point in the history
  • Loading branch information
Adam Scarr committed Aug 6, 2018
1 parent 42f10ec commit 6d39f86
Show file tree
Hide file tree
Showing 6 changed files with 210 additions and 38 deletions.
6 changes: 3 additions & 3 deletions docs/layouts/_default/baseof.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions docs/layouts/partials/gqlgen.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 14 additions & 1 deletion docs/layouts/partials/sidebar.html
Original file line number Diff line number Diff line change
@@ -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 := . }}
Expand Down
Binary file modified docs/static/favicon.ico
Binary file not shown.
218 changes: 188 additions & 30 deletions docs/static/main.css
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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;
Expand All @@ -51,7 +75,7 @@ body {
}

a {
color: #336699;
color: var(--color-link);
text-decoration: none;
}

Expand All @@ -62,37 +86,44 @@ 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;
}
}

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 {
Expand All @@ -105,7 +136,7 @@ h1 {
.description {
font-family: 'Work Sans', sans-serif;
font-size: 18px;
color: #555;
color: var(--color-text);
}

.header-link {
Expand All @@ -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 {
Expand All @@ -163,37 +195,48 @@ 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 {
border-bottom: none;
}

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 {
Expand All @@ -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;
}

}
8 changes: 4 additions & 4 deletions docs/static/syntax.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit 6d39f86

Please sign in to comment.