Finish edits to go templates content

This commit is contained in:
Ryan Watters
2017-03-05 23:19:01 -06:00
parent c4aa9a3482
commit b6c7d01e7f
24 changed files with 308 additions and 181 deletions
+2 -1
View File
@@ -14,7 +14,7 @@ toc: true
Hugo is a general-purpose website framework. Technically speaking, Hugo is a [static site generator][]. Unlike systems that dynamically build a page with each visitor request, Hugo builds pages when you create or update your content. Since websites are viewed far more often than they are edited, Hugo is designed to provide an optimal viewing experience for your website's end users and an ideal writing experience for website authors.
Websites built with Hugo are extremely fast and secure. Hugo sites can be hosted anywhere, including [Heroku][], [GoDaddy][], [DreamHost][], [GitHub Pages][], [Surge][], [Aerobatic][], [Firebase][], [Google Cloud Storage][], [Amazon S3][], [Rackspace][], [Azure][], and [CloudFront][] and work well with CDNs. Hugo sites run without the need for a database or dependencies on expensive runtimes like Ruby, Python, or PHP.
Websites built with Hugo are extremely fast and secure. Hugo sites can be hosted anywhere, including [Netlify][], [Heroku][], [GoDaddy][], [DreamHost][], [GitHub Pages][], [Surge][], [Aerobatic][], [Firebase][], [Google Cloud Storage][], [Amazon S3][], [Rackspace][], [Azure][], and [CloudFront][] and work well with CDNs. Hugo sites run without the need for a database or dependencies on expensive runtimes like Ruby, Python, or PHP.
We think of Hugo as the ideal website creation tool. Hugo provides nearly instant build times and the ability to rebuild whenever a change is made, which is invaluable when you are designing websites and creating content.
@@ -67,6 +67,7 @@ I wanted to develop a fast and full-featured website framework without any depen
[Middleman]: https://middlemanapp.com/
[Nanoc]: http://nanoc.ws/
[Nanoc]: https://nanoc.ws/
[Netlify]: https://netlify.com
[rackspace]: https://www.rackspace.com/cloud/files
[static site generator]: /about/benefits/
[Rackspace]: https://www.rackspace.com/cloud/files
+64 -68
View File
@@ -12,20 +12,19 @@ weight: 10
draft: false
aliases: [/templates/go-template-primer/,/layouts/go-templates/,/layout/go-templates/]
toc: true
wip: true
---
Hugo uses the excellent [Go html/template][gohtmltemplate] library, an extremely lightweight engine that provides just the right amount of logic to be able to create any style of static website. If you have used other template systems from different languages or frameworks, you will find a lot of similarities in Go templates.
{{% note "Go Deep with the Go Docs" %}}
This document is only designed as a brief primer. For an in-depth look into Go templates, check the official [Go docs](http://golang.org/pkg/html/template/).
This is only a primer. For an in-depth look into Go templates, check the official [Go docs](http://golang.org/pkg/html/template/).
{{% /note %}}
## Introduction to Go Templates
Go templates provide an extremely simple template language that adheres to the belief that only the most basic of logic belongs in the template or view layer. As a positive consequence of this simplicity, Go templates parse very quickly.
A unique characteristic of Go templates is that they are content aware. Variables and content will be sanitized depending on the context of where they are used.
A unique characteristic of Go templates is that they are *content aware*. Variables and content will be sanitized depending on the context of where they are used.
## Basic Syntax
@@ -45,13 +44,13 @@ Parameters for functions are separated using spaces. The following example calls
#### Methods and Fields are Accessed via dot Notation
Accessing the Page Parameter "bar"
Accessing the Page Parameter `bar` defined in a piece of content's [front matter][].
```golang
{{ .Params.bar }}
```
#### Parentheses can be Used to Group Items Together
#### Parentheses Can be Used to Group Items Together
```golang
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
@@ -59,16 +58,15 @@ Accessing the Page Parameter "bar"
## Variables
Each Go template has a struct (object) made available to it. In Hugo, each
template is passed page struct. More details are available in the [variables and params section][variablesparams].
Each Go template has a struct (object) made available to it. In Hugo, each template is passed a page's struct. More details on the structs passed to specific page kinds are in the [variables][] section.
A variable is accessed by referencing the variable name.
A variable is accessed by referencing the variable name inside of a template:
```golang
<title>{{ .Title }}</title>
```
Variables can also be defined and referenced.
Variables can also be defined and referenced:
```golang
{{ $address := "123 Main St."}}
@@ -77,7 +75,9 @@ Variables can also be defined and referenced.
## Functions
Go template ships with a few functions that provide basic functionality. The Go template system also provides a mechanism for applications to extend the set of available functions. [Hugo template functions][hugofunctions] provide additional functionality we believe us useful for building websites. Functions are called by using their name followed by the required parameters separated by spaces. Template functions cannot be added without recompiling Hugo.
Go templates only ship with a few basic functions but also provide a mechanism for applications to extend the original set.
[Hugo template functions][functions] provide additional functionality specific to building websites. Functions are called by using their name followed by the required parameters separated by spaces. Template functions cannot be added without recompiling Hugo.
### Example 1: Adding Numbers
@@ -104,7 +104,7 @@ There are more boolean operators than those listed in the Hugo docs in the [Gola
When including another template, you will pass to it the data it will be
able to access. To pass along the current context, please remember to
include a trailing dot. The templates location will always be starting at
the /layout/ directory within Hugo.
the `/layout/` directory within Hugo.
### Template and Partial Examples
@@ -126,10 +126,10 @@ Go templates provide the most basic iteration and conditional logic.
### Iteration
Just like in Go, the Go templates make heavy use of `range` to iterate over
a map, array or slice. The following are different examples of how to use
a map, array, or slice. The following are different examples of how to use
range.
#### Example 1: Using Context**
#### Example 1: Using Context
```golang
{{ range array }}
@@ -137,7 +137,7 @@ range.
{{ end }}
```
#### Example 2: Declaring Value=>Variable name
#### Example 2: Declaring Value => Variable name
```golang
{{range $element := array}}
@@ -156,13 +156,13 @@ range.
### Conditionals
`if`, `else`, `with`, `or` & `and` provide the framework for handling conditional logic in Go Templates. Like `range`, each statement is closed with an `{{end}}`.
`if`, `else`, `with`, `or`, and `and` provide the framework for handling conditional logic in Go Templates. Like `range`, each statement is closed with an `{{end}}`.
Go Templates treat the following values as false:
* false
* 0
* any array, slice, map, or string of length zero
* any zero-length array, slice, map, or string
#### Example 1: `if`
@@ -189,12 +189,14 @@ Go Templates treat the following values as false:
#### Example 4: `with`
An alternative way of writing "`if`" and then referencing the same value
is to use "`with`" instead. `with` rebinds the context `.` within its scope,
is to use "`with`" instead. `with` rebinds the context `.` within its scope
and skips the block if the variable is absent.
The first example above could be simplified as:
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
```golang
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
```
#### Example 5: `if` … `else if`
@@ -208,19 +210,20 @@ The first example above could be simplified as:
## Pipes
One of the most powerful components of Go templates is the ability to stack actions one after another. This is done by using pipes. Borrowed from Unix pipes, the concept is simple, each pipeline's output becomes the input of the following pipe.
One of the most powerful components of Go templates is the ability to stack actions one after another. This is done by using pipes. Borrowed from Unix pipes, the concept is simple: each pipeline's output becomes the input of the following pipe.
Because of the very simple syntax of Go templates, the pipe is essential to being able to chain together function calls. One limitation of the pipes is that they only can work with a single value and that value becomes the last parameter of the next pipeline.
Because of the very simple syntax of Go templates, the pipe is essential to being able to chain together function calls. One limitation of the pipes is that they can only work with a single value and that value becomes the last parameter of the next pipeline.
A few simple examples should help convey how to use the pipe.
### Example 1: `shuffle`
The following two examples are functionally the same:
```golang
{{ shuffle (seq 1 5) }}
```
is the same as
```golang
{{ (seq 1 5) | shuffle }}
@@ -228,16 +231,12 @@ is the same as
### Example 2: `index`
The following accesses the page parameter called "disqus_url" and escapes the HTML. This example also uses the [`index` function][index], which is built into Go templates:
```golang
{{ index .Params "disqus_url" | html }}
```
Access the page parameter called "disqus_url" and escape the HTML.
The `index` function is built in to [Go][]. [You can read more about `index` in the Godocs][]. The Godocs have the following to say about`index`:
> ...returns the result of indexing its first argument by the following arguments. Thus "index x 1 2 3" is, in Go syntax, `x[1][2][3]`. Each indexed item must be a map, slice, or array.
### Example 3: `or` with `isset`
```golang
@@ -251,8 +250,9 @@ Could be rewritten as
{{ if isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" }}
Stuff Here
{{ end }}
```
### Example $: Internet Explorer Conditional Comments
### Example 4: Internet Explorer Conditional Comments
By default, Go Templates remove HTML comments from output. This has the unfortunate side effect of removing Internet Explorer conditional comments. As a workaround, use something like this:
@@ -270,20 +270,19 @@ Alternatively, you can use the backtick (`` ` ``) to quote the IE conditional co
## Context (aka "the dot")
The most easily overlooked concept to understand about Go templates is that `{{ . }}` always refers to the current context. In the top level of your template, this will be the data set made available to it. Inside of a iteration, however, it will have the value of the current item. When inside of a loop, the context has changed: `{{ . }}` will no longer refer to the data available to the entire page. If you need to access this from within the loop, you will likely want to do one of the following:
The most easily overlooked concept to understand about Go templates is that `{{ . }}` always refers to the current context. In the top level of your template, this will be the data set made available to it. Inside of an iteration, however, it will have the value of the current item in the loop; i.e., `{{ . }}` will no longer refer to the data available to the entire page. If you need to access page-level data (e.g., page params set in front matter) from within the loop, you will likely want to do one of the following:
### Define a Variable Independent of Context
### 1. Define a Variable Independent of Context
The following shows how to define a variable independent of the context.
{{% code file="range-through-tags-w-variable.html" %}}
{{% code file="tags-range-with-page-variable.html" %}}
```html
{{ $title := .Site.Title }}
{{ $base := .Site.BaseURL }}
<ul class="tags">
{{ range .Params.tags }}
<li>
<a href="{{ $base }}tags/{{ . | urlize }}">{{ . }}</a>
<a href="/tags/{{ . | urlize }}">{{ . }}</a>
- {{ $title }}
</li>
{{ end }}
@@ -295,17 +294,16 @@ The following shows how to define a variable independent of the context.
Notice how once we have entered the loop (i.e. `range`), the value of `{{ . }}` has changed. We have defined a variable outside of the loop (`{{$title}}`) that we've assigned a value so that we have access to the value from within the loop as well.
{{% /note %}}
### Use `$.` to Access the Global Context
### 2. Use `$.` to Access the Global Context
`$` has special significance in your templates. `$` is set to the starting value of `.` ("the dot") by default. This is a [documented feature of Go text/template][]. This means you have access to the global context from anywhere. Here is an equivalent example of the preceding code block where we defined `$title` and `$base` for the same desired output, but now using `$`:
`$` has special significance in your templates. `$` is set to the starting value of `.` ("the dot") by default. This is a [documented feature of Go text/template][dotdoc]. This means you have access to the global context from anywhere. Here is an equivalent example of the preceding code block but now using `$` to grab `.Site.Title` from the global context:
{{% code file="range-through-tags-w-global.html" %}}
```html
{{ $base := .Site.BaseURL }}
<ul class="tags">
{{ range .Params.tags }}
<li>
<a href="{{$base}}tags/{{ . | urlize }}">{{ . }}</a>
<a href="/tags/{{ . | urlize }}">{{ . }}</a>
- {{ $.Site.Title }}
</li>
{{ end }}
@@ -314,7 +312,7 @@ Notice how once we have entered the loop (i.e. `range`), the value of `{{ . }}`
{{% /code %}}
{{% warning "Don't Redefine the Dot" %}}
The built-in magic of `$` would cease to work if someone were to mischievously redefine the special character; e.g. `{{ $ := .Site }}`. ***Don't do it.*** You may, of course, recover from this mischief by using `{{ $ := . }}` in a global context to reset `$` to its default value.
The built-in magic of `$` would cease to work if someone were to mischievously redefine the special character; e.g. `{{ $ := .Site }}`. *Don't do it.* You may, of course, recover from this mischief by using `{{ $ := . }}` in a global context to reset `$` to its default value.
{{% /warning %}}
## Whitespace
@@ -323,37 +321,33 @@ Go 1.6 includes the ability to trim the whitespace from either side of a Go tag
For instance, the following Go template will include the newlines and horizontal tab in its HTML output:
{{% code file="with-whitespace.html" %}}
```html
<div>
{{ .Title }}
</div>
```
{{% /code %}}
{{% output file="with-whitespace-output.html" %}}
Which will output:
```html
<div>
Hello, World!
</div>
```
{{% /output %}}
Leveraging the `-` in the following example will remove the extra white space surrounding the `.Title` variable and remove the newline:
{{% code file="without-whitespace-input.html" %}}
```html
<div>
{{- .Title -}}
</div>
```
{{% /code %}}
{{% output file="without-whitespace-input.html" %}}
Which then outputs:
```html
<div>Hello, World!</div>
```
{{% /output %}}
Go considers the following characters whitespace:
@@ -364,30 +358,30 @@ Go considers the following characters whitespace:
## Hugo Parameters
Hugo provides the option of passing values to the template language through the site configuration (i.e. for site-wide values), or through the metadata of each specific piece of content (i.e. the [front matter][]). You can define any values of any type---as long as they are supported by the front matter format specified via `metaDataFormat` in your configuration file---and use them however you want in your templates.
Hugo provides the option of passing values to your template layer through your [site configuration][config] (i.e. for site-wide values) or through the metadata of each specific piece of content (i.e. the [front matter][]). You can define any values of any type and use them however you want in your templates, as long as the values are supported by the front matter format specified via `metaDataFormat` in your configuration file.
## Using Content (`Page`) Parameters
You can provide variables to be used by templates in individual content's [front matter][].
An example of this is used in this documentation site and specifically on the page you're currently reading. Most of the pages benefit from having the table of contents provided, but sometimes the table of contents doesn't make a lot of sense. We've defined a variable in our front matter that will prevent a table of contents from rendering when specifically set to `false`.
An example of this is used in the Hugo docs. Most of the pages benefit from having the table of contents provided, but sometimes the table of contents doesn't make a lot of sense. We've defined a `notoc` variable in our front matter that will prevent a table of contents from rendering when specifically set to `true`.
Here is the example front matter:
```yaml
---
title: Go Template Primer
lastmod: 2017-02-21
title: Roadmap
lastmod: 2017-03-05
date: 2013-11-18
toc: true
notoc: true
---
```
Here is the corresponding code inside the `table-of-contents.html` [partial template][partials]:
Here is the corresponding code inside the `toc.html` [partial template][partials]:
{{% code file="table-of-contents.html" %}}
{{% code file="layouts/partials/toc.html" download="toc.html" %}}
```html
{{if ne .Params.toc false}}
{{ if not .Params.notoc }}
<aside id="toc">
<header class="toc-header">
<a href="#{{.Title | urlize}}">
@@ -401,11 +395,11 @@ Here is the corresponding code inside the `table-of-contents.html` [partial temp
```
{{% /code %}}
We want the *default* behavior to be for pages to include a TOC unless otherwise specified. This template checks to make sure that the `toc:` field in this page's front matter does not equal (i.e. `ne`) `false`.
We want the *default* behavior to be for pages to include a TOC unless otherwise specified. This template checks to make sure that the `notoc:` field in this page's front matter is not `true`.
## Using Site Configuration Parameters
You can arbitrarily define as many site-level parameters as you want in n your [site's configuration file][hugoconfig]. These parameters are globally available in your templates.
You can arbitrarily define as many site-level parameters as you want in your [site's configuration file][config]. These parameters are globally available in your templates.
For instance, you might declare the following:
@@ -418,17 +412,15 @@ params:
```
{{% /code %}}
Within a footer layout, you might then declare a `<footer>` which is only provided if the `CopyrightHTML` parameter is provided, and if it is given, you would declare it to be HTML-safe, so that the HTML entity is not escaped again. This would let you easily update just your top-level config file each January 1st, instead of hunting through your templates.
Within a footer layout, you might then declare a `<footer>` that is only rendered if the `copyrighthtml` parameter is provided. If it *is* provided, you will then need to declare the string is safe to use via the [`safeHTML` function][safehtml] so that the HTML entity is not escaped again. This would let you easily update just your top-level config file each January 1st, instead of hunting through your templates.
{{% code file="layouts/partials/sample-footer.html" %}}
```html
{{if .Site.Params.CopyrightHTML}}<footer>
{{if .Site.Params.copyrighthtml}}<footer>
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHTML}}</div>
</footer>{{end}}
```
{{% /code %}}
An alternative way of writing the "`if`" and then referencing the same value is to use [`with`](/functions/with/) instead. `with` rebinds the context (`.`) within its scope and skips the block if the variable is absent:
An alternative way of writing the "`if`" and then referencing the same value is to use [`with`][with] instead. `with` rebinds the context (`.`) within its scope and skips the block if the variable is absent:
{{% code file="layouts/partials/twitter.html" %}}
```html
@@ -440,7 +432,7 @@ An alternative way of writing the "`if`" and then referencing the same value is
```
{{% /code %}}
Finally, you can pull "magic constants" out of your layouts as well. The following uses the [`first`][first] and [`.RelPermalink`][relpermalink] functions, as well as the [`.Site.Pages`][sitevars] variable.
Finally, you can pull "magic constants" out of your layouts as well. The following uses the [`first`][first] function, as well as the [`.RelPermalink`][relpermalink] page variable and the [`.Site.Pages`][sitevars] site variable.
```html
<nav class="recent">
@@ -453,7 +445,7 @@ Finally, you can pull "magic constants" out of your layouts as well. The followi
## Example: Show Only Upcoming Events
Go allows you to do more than what's shown here. Using Hugo's [`where` function](/functions/where/) and Go built-ins, we can list only the items from `content/events/` whose date (set in a content file's [front matter][]) is in the future. The following is an example [partial template][partials]:
Go allows you to do more than what's shown here. Using Hugo's [`where` function][where] and Go built-ins, we can list only the items from `content/events/` whose date (set in a content file's [front matter][]) is in the future. The following is an example [partial template][partials]:
{{% code file="layouts/partials/upcoming-events.html" download="upcoming-events.html" %}}
```html
@@ -475,16 +467,20 @@ Go allows you to do more than what's shown here. Using Hugo's [`where` function]
[`where` function]: /functions/where/
[documented feature of Go text/template]: http://golang.org/pkg/text/template/#hdr-Variables
[config]: /getting-started/configuration/
[dotdoc]: http://golang.org/pkg/text/template/#hdr-Variables
[first]: /functions/first/
[front matter]: /content-management/front-matter/
[functions]: /functions/ "See the full list of Hugo's templating functions with a quick start reference guide and basic and advanced examples."
[Go html/template]: http://golang.org/pkg/html/template/ "Godocs references for Golang's html templating"
[gohtmltemplate]: http://golang.org/pkg/html/template/ "Godocs references for Golang's html templating"
[hugoconfig]: /getting-started/configuration/
[hugofunctions]: /functions/ "Link to section for Hugo's templating functions"
[index]: /functions/index/
[math functions]: /functions/math/
[partials]: /templates/partials-templates/ "Link to the partial templates page inside of the templating section of the Hugo docs"
[relpermalink]: /functions/relpermalink/
[relpermalink]: /variables/page-variables/
[safehtml]: /functions/safehtml/
[sitevars]: /variables/site-variables/
[variables]: /variables/ "See the full extent of page-, site-, and other variables that Hugo make available to you in your templates."
[You can read more about `index` in the Godocs]: http://golang.org/pkg/text/template/ "Godocs page for index function"
[where]: /functions/where/
[with]: /functions/with/
[godocsindex]: http://golang.org/pkg/text/template/ "Godocs page for index function"
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+16 -11
View File
@@ -4,26 +4,31 @@
{{ end }}
{{ define "main" }}
<main id="homepage" class="main">
<div class="home-row hero">
<div class="home-row hero animated">
{{ partial "homepage/homepage-hero.html" . }}
</div>
<div class="home-row animated">
<div class="home-row-content first-fade animated">
{{ partial "homepage/homepage-focus.html" . }}
</div>
<div class="home-row focus">
<div class="home-row-content home-row-content-focus">
{{partial "homepage/homepage-focus.html" . }}
</div>
</div>
<div class="home-row">
<div class="home-row-content homepage-features">
<div class="home-row features">
<div class="home-row-content home-row-content-features">
{{ partial "homepage/homepage-features" . }}
</div>
</div>
<div class="home-row">
<div class="home-row-content homepage-tweets">
<div class="home-row install">
<div class="home-row-content">
{{ partial "homepage/homepage-install.html" . }}
</div>
</div>
<div class="home-row tweets">
<div class="home-row-content home-row-content-tweets">
{{ partial "homepage/homepage-tweets.html" . }}
</div>
</div>
<div class="home-row">
<div class="home-row-content homepage-open-source">
<div class="home-row open-source">
<div class="home-row-content home-row-content-open-source">
{{ partial "homepage/homepage-open-source.html" . }}
</div>
</div>
@@ -1,6 +1,7 @@
<h2>What Makes Hugo Special?</h2>
<h2>What Makes Hugo Special? <br><span>These are just a few of Hugo's Powerful Features</span></h2>
{{ range sort $.Site.Data.homepagefeatures.feature "order" }}
<div class="homepage-feature" id="{{ .name | urlize }}">
<div class="home-row-content-feature" id="{{ .name | urlize }}">
<h3>{{.name}}</h3>
<div class="homepage-feature-content">
{{ .description | markdownify }}
+4 -11
View File
@@ -1,16 +1,9 @@
<div class="half">
<div class="svgs">
{{partial "svg-icons/gopher-small-homepage.svg" .}}
{{partial "svg-icons/md.svg" .}}
</div>
<div class="homepage-terminal">
$ brew update
<br> $ brew install hugo
</div>
</div>
<div class="half half-content">
<h2>Focus on your content and design.</h2>
<hr class="hr">
<p>Forget databases, security updates, and cofee breaks spent waiting for your site to rebuild.</p>
<p>Golang's speed combined with markdown's elegant simplicity mean Hugo is the first static site generator fast enough to keep up with your creativity.</p>
</div>
</div>
<div class="focus-svgs">
{{ partial "svg-icons/content.svg" . }} {{ partial "svg-icons/design.svg" . }}
</div>
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="homepage-icon animated">
<div class="homepage-icon">
{{ partial "svg-icons/hugo-logo-wide.svg" . }}
</div>
<div class="hero-tagline">The world's fastest static website engine.
@@ -0,0 +1,19 @@
<div class="half">
<div class="svgs">
{{partial "svg-icons/gopher-small-homepage.svg" .}}
</div>
<div class="homepage-terminal">
$ brew update
<br> $ brew install hugo
</div>
</div>
<div class="half half-content">
<h2>Hugo installs in minutes and builds in seconds.</h2>
<p>As a single binary, Hugo works on OSX, Windows, Linux, FreeBSD, and anywhere else where the Go compiler tool chain can run.</p>
<div class="platform-icons">
<i class="fa fa-apple"></i>
<i class="fa fa-windows"></i>
<i class="fa fa-linux"></i>
<i class="icon-freebsd"></i>
</div>
</div>
+18
View File
@@ -0,0 +1,18 @@
<svg id="content-icon" class="focus-row-icon"width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<circle id="content-halo" cx="256" cy="256" r="256" style="fill:rgb(252,216,4);"/>
<path d="M256,100.748C197.49,100.758 150.082,148.166 150.082,206.676C150.082,237.664 163.414,265.546 184.617,284.923C185.621,285.759 186.625,286.641 187.666,287.552C204.215,302.651 214.604,324.36 214.604,348.503L214.604,357.719L297.396,357.719L297.396,348.503C297.396,324.356 307.762,302.651 324.36,287.552C325.371,286.64 326.378,285.758 327.386,284.923C348.56,265.546 361.918,237.66 361.918,206.676C361.918,148.166 314.513,100.758 256,100.748Z" style="fill:white;fill-rule:nonzero;"/>
<path d="M327.019,206.67C327.019,245.883 295.212,277.65 256.013,277.65C216.764,277.653 184.98,245.886 184.98,206.67C184.98,167.461 216.764,135.614 256.013,135.614C295.213,135.617 327.019,167.46 327.019,206.67Z" style="fill:rgb(230,229,229);fill-rule:nonzero;"/>
<path d="M256.017,437.677L227.378,420.587L284.652,420.587L256.017,437.677Z" style="fill:white;fill-rule:nonzero;"/>
<path d="M303.167,413.851C303.167,415.572 302.51,417.296 301.192,418.611C299.874,419.926 298.153,420.586 296.432,420.586L215.572,420.586C213.851,420.586 212.123,419.929 210.809,418.611C209.495,417.293 208.834,415.572 208.834,413.851L208.834,357.72L303.171,357.72L303.171,413.852L303.167,413.852L303.167,413.851Z" style="fill:rgb(52,59,67);fill-rule:nonzero;"/>
<g>
<rect x="208.83" y="364.709" width="94.337" height="6.95" style="fill:rgb(73,80,87);"/>
<rect x="208.83" y="378.682" width="94.337" height="6.976" style="fill:rgb(73,80,87);"/>
<rect x="208.83" y="392.621" width="94.337" height="6.98" style="fill:rgb(73,80,87);"/>
<rect x="208.83" y="406.594" width="94.337" height="7.016" style="fill:rgb(73,80,87);"/>
</g>
<rect x="229.574" y="252.366" width="17.606" height="105.353" style="fill:rgb(253,131,105);"/>
<rect x="247.18" y="252.366" width="17.613" height="105.353" style="fill:rgb(234,101,82);"/>
<rect x="264.787" y="252.366" width="17.616" height="105.353" style="fill:rgb(226,79,59);"/>
<path d="M282.426,252.37L264.773,221.864L247.207,221.864L229.601,252.37L282.426,252.37Z" style="fill:white;fill-rule:nonzero;"/>
<path d="M264.773,221.864L255.97,206.633L247.207,221.864L264.773,221.864Z" style="fill:rgb(52,59,67);fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

+5
View File
@@ -0,0 +1,5 @@
<svg id="design-icon" class="focus-row-icon" width="100%" height="100%" viewBox="0 0 51 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M50.956,14.456L25.5,29L0.044,14.456L25.5,0L50.956,14.456Z" style="fill:rgb(252,216,4);fill-rule:nonzero;"/>
<path d="M25.5,29L9.7,19.973L0.044,25.456L25.5,40L50.956,25.456L41.3,19.973L25.5,29Z" style="fill:rgb(51,186,145);fill-rule:nonzero;"/>
<path d="M25.5,40L9.7,30.973L0.044,36.456L25.5,51L50.956,36.456L41.3,30.973L25.5,40Z" style="fill:rgb(255,64,136);fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 707 B

+11
View File
@@ -0,0 +1,11 @@
<svg id="focus-icon" class="focus-row-icon" width="100%" height="100%" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:10;">
<path d="M30.028,1L30.028,11" style="fill:none;stroke:rgb(0,168,138);stroke-width:2px;"/>
<path d="M30.028,11L34.028,7" style="fill:none;stroke:rgb(0,168,138);stroke-width:2px;"/>
<path d="M30.028,11L26.028,7" style="fill:none;stroke:rgb(0,168,138);stroke-width:2px;"/>
<path d="M30.028,59L30.028,49" style="fill:none;stroke:rgb(0,168,138);stroke-width:2px;"/>
<path d="M30.028,49L26.028,53" style="fill:none;stroke:rgb(0,168,138);stroke-width:2px;"/>
<path d="M30.028,49L34.028,53" style="fill:none;stroke:rgb(0,168,138);stroke-width:2px;"/>
<path d="M57.972,29.642L50.738,36.876C39.221,48.393 20.548,48.393 9.031,36.876L2.027,29.872L9.261,22.638C20.778,11.121 39.451,11.121 50.968,22.638L57.972,29.642Z" style="fill:rgb(231,236,237);fill-rule:nonzero;"/>
<circle cx="29.67" cy="29.783" r="11.813" style="fill:rgb(0,131,192);"/>
<path d="M22.857,31C22.305,31 21.857,30.552 21.857,30C21.857,26.14 24.997,23 28.857,23C29.409,23 29.857,23.448 29.857,24C29.857,24.552 29.409,25 28.857,25C26.1,25 23.857,27.243 23.857,30C23.857,30.552 23.41,31 22.857,31Z" style="fill:white;fill-rule:nonzero;"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

+61
View File
@@ -0,0 +1,61 @@
<svg id="idea-icon" class="focus-row-icon" width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M466.287,256C466.287,372.142 372.148,466.281 256.001,466.281C139.867,466.281 45.715,372.145 45.715,256C45.715,139.853 139.867,45.719 256.001,45.719C372.146,45.719 466.287,139.853 466.287,256Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
<path d="M213.597,97.925C232.469,97.925 247.681,113.142 247.681,132.022L247.681,379.945C247.681,395.525 237.277,408.655 222.987,412.71C222.987,412.71 222.954,412.741 222.91,412.71C221.896,412.992 220.862,413.196 219.674,413.419C218.499,413.685 217.196,413.841 215.783,413.903C215.102,414.046 214.321,414.046 213.597,414.046C195.498,414.046 181.369,400.598 179.697,383.38L179.697,383.342C174.917,385.902 169.329,387.435 163.536,387.435C144.758,387.435 129.442,372.17 129.442,353.28C129.442,349.284 130.266,345.244 131.508,341.676C130.827,341.676 130.136,341.712 129.442,341.712C110.662,341.712 95.386,326.49 95.386,307.618C95.386,299.267 98.389,291.741 103.337,285.781C92.808,279.998 85.701,268.811 85.701,255.983C85.701,241.696 94.5,229.451 106.969,224.444C101.176,218.323 97.62,210.054 97.62,200.992C97.62,182.209 112.919,166.926 131.699,166.926L132.324,166.926C131.472,163.982 130.985,160.654 130.985,157.375C130.985,138.6 146.301,123.312 165.082,123.312C170.176,123.312 175.614,124.531 179.994,126.558C182.58,110.316 196.671,97.925 213.597,97.925Z" style="fill:rgb(5,148,203);fill-rule:nonzero;"/>
<g>
<path d="M175.389,132.019C175.389,153.121 192.518,170.281 213.61,170.281C215.919,170.281 217.793,168.41 217.793,166.09C217.793,163.83 215.919,161.979 213.61,161.979C197.078,161.979 183.65,148.539 183.65,132.019C183.65,115.489 197.077,102.044 213.61,102.044C230.122,102.044 243.567,115.489 243.567,132.019L243.567,379.983C243.567,396.51 230.122,409.956 213.61,409.956C197.078,409.956 183.65,396.511 183.65,379.983C183.65,363.463 197.077,350.023 213.61,350.023C215.919,350.023 217.793,348.172 217.793,345.914C217.793,343.595 215.919,341.721 213.61,341.721C192.518,341.721 175.389,358.878 175.389,379.983C175.389,401.077 192.518,418.199 213.61,418.199C234.707,418.199 251.874,401.078 251.874,379.983L251.874,132.019C251.874,110.922 234.704,93.801 213.61,93.801C192.518,93.801 175.389,110.922 175.389,132.019Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
<path d="M163.565,391.578C142.448,391.578 125.342,374.398 125.342,353.291C125.342,348.839 126.084,344.423 127.597,340.253C128.416,338.087 130.792,336.945 132.899,337.747C135.083,338.482 136.222,340.868 135.403,343.044C134.213,346.321 133.588,349.825 133.588,353.289C133.588,369.814 147.031,383.267 163.566,383.267C168.499,383.267 173.404,382.061 177.7,379.716C179.735,378.633 182.247,379.37 183.388,381.388C184.456,383.426 183.728,385.935 181.701,386.997C176.132,390.011 169.865,391.578 163.565,391.578Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
<path d="M129.463,345.805C108.358,345.805 91.265,328.704 91.265,307.617C91.265,298.716 94.378,290.038 100.133,283.125C101.556,281.384 104.198,281.164 105.939,282.616C107.677,284.093 107.959,286.697 106.469,288.417C101.986,293.821 99.501,300.628 99.501,307.62C99.501,324.135 112.949,337.58 129.466,337.58C130.091,337.58 130.638,337.58 131.181,337.465C147.033,336.582 159.431,323.454 159.431,307.621C159.431,305.355 161.292,303.505 163.568,303.505C165.877,303.505 167.728,305.358 167.728,307.621C167.728,327.848 151.907,344.582 131.798,345.762C131.096,345.787 130.272,345.805 129.463,345.805Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
<path d="M214.24,311.734C211.905,311.734 210.052,309.873 210.052,307.618C210.052,295.901 200.608,286.442 188.883,286.442C177.174,286.442 167.725,295.901 167.725,307.618C167.725,309.876 165.872,311.734 163.565,311.734C161.289,311.734 159.428,309.873 159.428,307.618C159.428,291.385 172.658,278.142 188.883,278.142C205.121,278.142 218.349,291.385 218.349,307.618C218.351,309.875 216.498,311.734 214.24,311.734Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
<path d="M119.779,294.198C98.761,294.198 81.584,277.079 81.584,255.998C81.584,234.881 98.759,217.721 119.779,217.721C140.889,217.721 158.061,234.881 158.061,255.998C158.061,258.241 156.195,260.117 153.916,260.117C151.615,260.117 149.736,258.241 149.736,255.998C149.736,239.466 136.306,226.028 119.776,226.028C103.272,226.028 89.87,239.465 89.87,255.998C89.87,272.513 103.272,285.94 119.776,285.94C122.103,285.94 123.967,287.806 123.967,290.079C123.969,292.393 122.106,294.198 119.779,294.198Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
<path d="M106.958,228.559C105.89,228.559 104.772,228.098 103.935,227.23C97.225,220.108 93.506,210.818 93.506,200.995C93.506,179.888 110.681,162.784 131.778,162.784C132.016,162.784 132.344,162.784 132.638,162.792C150.778,163.053 166.366,175.149 168.596,190.908C170.127,201.714 177.29,212.622 189.79,212.622C192.107,212.622 193.953,214.486 193.953,216.805C193.953,219.058 192.107,220.927 189.79,220.927C174.625,220.927 162.828,209.317 160.404,192.078C158.551,179.181 144.64,171.234 132.305,171.04L131.775,171.032C115.253,171.032 101.803,184.472 101.803,200.992C101.803,208.662 104.688,215.971 109.987,221.58C111.556,223.249 111.503,225.83 109.846,227.389C109.006,228.188 107.985,228.559 106.958,228.559Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
<path d="M132.351,171.044C130.587,171.044 128.913,169.846 128.409,168.092C127.38,164.592 126.865,160.993 126.865,157.378C126.865,136.289 143.979,119.19 165.06,119.19C170.961,119.19 176.498,120.437 181.741,122.974C183.797,123.988 184.631,126.494 183.638,128.545C182.637,130.603 180.182,131.445 178.131,130.432C174.053,128.443 169.655,127.432 165.062,127.432C148.558,127.432 135.12,140.859 135.12,157.381C135.12,160.256 135.56,163.028 136.308,165.75C136.956,167.964 135.719,170.286 133.525,170.867C133.155,171.018 132.73,171.044 132.351,171.044Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
</g>
<path d="M298.4,97.925C279.523,97.925 264.298,113.142 264.298,132.022L264.298,379.945C264.298,395.525 274.717,408.655 289.017,412.71C289.017,412.71 289.045,412.741 289.086,412.71C290.1,412.992 291.149,413.196 292.309,413.419C293.499,413.685 294.795,413.841 296.21,413.903C296.891,414.046 297.682,414.046 298.396,414.046C316.488,414.046 330.629,400.598 332.29,383.38L332.29,383.342C337.064,385.902 342.666,387.435 348.449,387.435C367.247,387.435 382.551,372.17 382.551,353.28C382.551,349.284 381.729,345.244 380.48,341.676C381.174,341.676 381.855,341.712 382.551,341.712C401.326,341.712 416.622,326.49 416.622,307.618C416.622,299.267 413.606,291.741 408.671,285.781C419.203,279.998 426.281,268.811 426.281,255.983C426.281,241.696 417.498,229.451 405.028,224.444C410.814,218.323 414.375,210.054 414.375,200.992C414.375,182.209 399.069,166.926 380.281,166.926L379.679,166.926C380.529,163.982 381.013,160.654 381.013,157.375C381.013,138.6 365.704,123.312 346.919,123.312C341.804,123.312 336.382,124.531 332.01,126.558C329.419,110.316 315.311,97.925 298.4,97.925Z" style="fill:rgb(5,148,203);fill-rule:nonzero;"/>
<g>
<path d="M336.608,132.019C336.608,153.121 319.418,170.281 298.39,170.281C296.071,170.281 294.199,168.41 294.199,166.09C294.199,163.83 296.068,161.979 298.39,161.979C314.912,161.979 328.339,148.539 328.339,132.019C328.339,115.489 314.912,102.044 298.39,102.044C281.875,102.044 268.433,115.489 268.433,132.019L268.433,379.983C268.433,396.51 281.876,409.956 298.39,409.956C314.912,409.956 328.339,396.511 328.339,379.983C328.339,363.463 314.912,350.023 298.39,350.023C296.071,350.023 294.199,348.172 294.199,345.914C294.199,343.595 296.068,341.721 298.39,341.721C319.418,341.721 336.608,358.878 336.608,379.983C336.608,401.077 319.418,418.199 298.39,418.199C277.285,418.199 260.123,401.078 260.123,379.983L260.123,132.019C260.123,110.922 277.285,93.801 298.39,93.801C319.418,93.801 336.608,110.922 336.608,132.019Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
<path d="M348.435,391.578C369.488,391.578 386.653,374.398 386.653,353.291C386.653,348.839 385.926,344.423 384.387,340.253C383.578,338.087 381.215,336.945 379.037,337.747C376.912,338.482 375.778,340.868 376.605,343.044C377.777,346.321 378.351,349.825 378.351,353.289C378.351,369.814 364.975,383.267 348.435,383.267C343.435,383.267 338.592,382.061 334.294,379.716C332.264,378.633 329.735,379.37 328.624,381.388C327.546,383.426 328.273,385.935 330.288,386.997C335.863,390.011 342.138,391.578 348.435,391.578Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
<path d="M382.539,345.805C403.646,345.805 420.732,328.704 420.732,307.617C420.732,298.716 417.622,290.038 411.864,283.125C410.443,281.384 407.786,281.164 406.06,282.616C404.312,284.093 404.043,286.697 405.53,288.417C410.007,293.821 412.506,300.628 412.506,307.62C412.506,324.135 399.051,337.58 382.539,337.58C381.914,337.58 381.359,337.58 380.803,337.465C364.964,336.582 352.569,323.454 352.569,307.621C352.569,305.355 350.716,303.505 348.437,303.505C346.125,303.505 344.274,305.358 344.274,307.621C344.274,327.848 360.079,344.582 380.219,345.762C380.899,345.787 381.731,345.805 382.539,345.805Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
<path d="M297.75,311.734C300.092,311.734 301.938,309.873 301.938,307.618C301.938,295.901 311.397,286.442 323.114,286.442C334.803,286.442 344.275,295.901 344.275,307.618C344.275,309.876 346.126,311.734 348.438,311.734C350.719,311.734 352.57,309.873 352.57,307.618C352.57,291.385 339.33,278.142 323.115,278.142C306.874,278.142 293.654,291.385 293.654,307.618C293.654,309.875 295.5,311.734 297.75,311.734Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
<path d="M392.227,294.198C413.242,294.198 430.415,277.079 430.415,255.998C430.415,234.881 413.242,217.721 392.227,217.721C371.11,217.721 353.937,234.881 353.937,255.998C353.937,258.241 355.798,260.117 358.079,260.117C360.373,260.117 362.257,258.241 362.257,255.998C362.257,239.466 375.694,226.028 392.227,226.028C408.731,226.028 422.118,239.465 422.118,255.998C422.118,272.513 408.732,285.94 392.227,285.94C389.892,285.94 388.031,287.806 388.031,290.079C388.031,292.393 389.892,294.198 392.227,294.198Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
<path d="M405.029,228.559C406.107,228.559 407.233,228.098 408.063,227.23C414.765,220.108 418.492,210.818 418.492,200.995C418.492,179.888 401.312,162.784 380.228,162.784C379.982,162.784 379.665,162.784 379.358,162.792C361.228,163.053 345.64,175.149 343.4,190.908C341.867,201.714 334.716,212.622 322.213,212.622C319.886,212.622 318.053,214.486 318.053,216.805C318.053,219.058 319.886,220.927 322.213,220.927C337.366,220.927 349.178,209.317 351.594,192.078C353.447,179.181 367.358,171.234 379.7,171.04L380.23,171.032C396.734,171.032 410.19,184.472 410.19,200.992C410.19,208.662 407.292,215.971 402.003,221.58C400.441,223.249 400.493,225.83 402.167,227.389C402.984,228.188 404.005,228.559 405.029,228.559Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
<path d="M379.665,171.044C381.413,171.044 383.085,169.846 383.595,168.092C384.616,164.592 385.134,160.993 385.134,157.378C385.134,136.289 368.026,119.19 346.931,119.19C341.038,119.19 335.493,120.437 330.265,122.974C328.209,123.988 327.365,126.494 328.36,128.545C329.358,130.603 331.803,131.445 333.864,130.432C337.945,128.443 342.335,127.432 346.93,127.432C363.434,127.432 376.877,140.859 376.877,157.381C376.877,160.256 376.437,163.028 375.694,165.75C375.036,167.964 376.275,170.286 378.474,170.867C378.835,171.018 379.273,171.044 379.665,171.044Z" style="fill:rgb(0,131,192);fill-rule:nonzero;"/>
</g>
<g>
<rect x="252.236" y="0" width="7.511" height="28.063" style="fill:rgb(53,63,73);"/>
<path d="M199.072,6.387L206.455,4.8L212.271,32.282L204.924,33.83L199.072,6.387Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M148.433,23.662L155.306,20.605L166.744,46.246L159.843,49.306L148.433,23.662Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M102.499,51.085L108.553,46.669L125.062,69.394L118.977,73.81L102.499,51.085Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M63.233,87.501L68.261,81.907L89.123,100.685L84.079,106.281L63.233,87.501Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M32.403,131.246L36.164,124.739L60.476,138.77L56.716,145.334L32.403,131.246Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M11.365,180.477L13.682,173.325L40.367,181.988L38.058,189.158L11.365,180.477Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M1.007,232.996L1.78,225.475L29.682,228.442L28.906,235.912L1.007,232.996Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M1.007,279.009L28.906,276.096L29.682,283.566L1.78,286.525L1.007,279.009Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M11.365,331.538L38.058,322.883L40.367,330.015L13.682,338.685L11.365,331.538Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<g transform="matrix(0.8661,-0.4999,0.4999,0.8661,-182.244,73.6972)">
<rect x="32.397" y="373.243" width="28.071" height="7.527" style="fill:rgb(53,63,73);"/>
</g>
<g transform="matrix(0.743,-0.6693,0.6693,0.743,-260.139,158.394)">
<rect x="62.142" y="414.165" width="28.068" height="7.524" style="fill:rgb(53,63,73);"/>
</g>
<path d="M102.499,460.913L118.985,438.213L125.062,442.609L108.573,465.331L102.499,460.913Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M148.433,488.346L159.843,462.712L166.744,465.774L155.306,491.412L148.433,488.346Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M199.072,505.669L204.924,478.188L212.271,479.775L206.455,507.197L199.072,505.669Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<rect x="252.236" y="483.942" width="7.511" height="28.055" style="fill:rgb(53,63,73);"/>
<path d="M299.677,479.775L307.06,478.188L312.925,505.669L305.545,507.197L299.677,479.775Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M345.302,465.774L352.147,462.712L363.565,488.346L356.678,491.412L345.302,465.774Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M386.927,442.609L393.01,438.213L409.545,460.913L403.427,465.331L386.927,442.609Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<g transform="matrix(0.6692,-0.7431,0.7431,0.6692,-166.397,462.098)">
<rect x="432.046" y="403.908" width="7.514" height="28.058" style="fill:rgb(53,63,73);"/>
</g>
<path d="M451.521,373.248L455.267,366.748L479.592,380.759L475.826,387.272L451.521,373.248Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M471.622,330.015L473.939,322.893L500.632,331.538L498.308,338.685L471.622,330.015Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M482.31,283.584L483.083,276.116L510.99,279.009L510.219,286.525L482.31,283.584Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M482.31,228.444L510.209,225.475L510.99,232.996L483.091,235.919L482.31,228.444Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M471.622,181.993L498.308,173.325L500.632,180.477L473.96,189.158L471.622,181.993Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M451.529,138.783L475.826,124.754L479.592,131.261L455.295,145.334L451.529,138.783Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M422.895,100.685L443.741,81.907L448.756,87.501L427.918,106.281L422.895,100.685Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M386.953,69.394L403.427,46.679L409.545,51.098L393.038,73.81L386.953,69.394Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M345.302,46.239L356.678,20.621L363.565,23.662L352.17,49.298L345.302,46.239Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
<path d="M299.739,32.282L305.545,4.813L312.925,6.387L307.071,33.83L299.739,32.282Z" style="fill:rgb(53,63,73);fill-rule:nonzero;"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 16 KiB

-1
View File
@@ -8,7 +8,6 @@
</a>
</header>
{{.TableOfContents}}
</div>
<div class="fade"></div>
</aside>
+1 -1
View File
@@ -274,7 +274,7 @@ hljs.registerLanguage("xml", function(s) {
hljs.registerLanguage("go", function(e) {
var t = { keyword: "code output note warning break default func interface select case map struct chan else goto package switch const fallthrough if range end type continue for import return var go defer bool byte complex64 complex128 float32 float64 int8 int16 int32 int64 string uint8 uint16 uint32 uint64 int uint uintptr rune id autoplay Get", literal: "file download copy true false iota nil Pages with", built_in: "append cap close complex highlight copy imag len make new panic print println real recover delete Site Data tweet speakerdeck youtube ref relref vimeo instagram gist figure innershortcode" };
return { aliases: ["golang"], k: t, i: "</", c: [e.CLCM, e.CBCM, { cN: "string", v: [e.QSM, { b: "'", e: "[^\\\\]'" }, { b: "`", e: "`" }] }, { cN: "number", v: [{ b: e.CNR + "[dflsi]", r: 1 }, e.CNM] }, { b: /:=/ }, { cN: "function", bK: "func", e: /\s*\{/, eE: !0, c: [e.TM, { cN: "params", b: /\(/, e: /\)/, k: t, i: /["']/ }] }] }
return { aliases: ["golang","hugo"], k: t, i: "</", c: [e.CLCM, e.CBCM, { cN: "string", v: [e.QSM, { b: "'", e: "[^\\\\]'" }, { b: "`", e: "`" }] }, { cN: "number", v: [{ b: e.CNR + "[dflsi]", r: 1 }, e.CNM] }, { b: /:=/ }, { cN: "function", bK: "func", e: /\s*\{/, eE: !0, c: [e.TM, { cN: "params", b: /\(/, e: /\)/, k: t, i: /["']/ }] }] }
});
hljs.registerLanguage("markdown", function(e) {
return { aliases: ["md", "mkdown", "mkd"], c: [{ cN: "section", v: [{ b: "^#{1,6}", e: "$" }, { b: "^.+?\\n[=-]{2,}$" }] }, { b: "<", e: ">", sL: "xml", r: 0 }, { cN: "bullet", b: "^([*+-]|(\\d+\\.))\\s+" }, { cN: "strong", b: "[*_]{2}.+?[*_]{2}" }, { cN: "emphasis", v: [{ b: "\\*.+?\\*" }, { b: "_.+?_", r: 0 }] }, { cN: "quote", b: "^>\\s+", e: "$" }, { cN: "code", v: [{ b: "^```w*s*$", e: "^```s*$" }, { b: "`.+?`" }, { b: "^( {4}| )", e: "$", r: 0 }] }, { b: "^[-\\*]{3,}", e: "$" }, { b: "\\[.+?\\][\\(\\[].*?[\\)\\]]", rB: !0, c: [{ cN: "string", b: "\\[", e: "\\]", eB: !0, rE: !0, r: 0 }, { cN: "link", b: "\\]\\(", e: "\\)", eB: !0, eE: !0 }, { cN: "symbol", b: "\\]\\[", e: "\\]", eB: !0, eE: !0 }], r: 10 }, { b: /^\[[^\n]+\]:/, rB: !0, c: [{ cN: "symbol", b: /\[/, e: /\]/, eB: !0, eE: !0 }, { cN: "link", b: /:\s*/, e: /$/, eB: !0 }] }] }
+1
View File
@@ -49,3 +49,4 @@ p {
::-webkit-scrollbar {
display:none;
}
+4
View File
@@ -1,3 +1,7 @@
kbd {
font-family: $code-font-family;
}
.body-copy {
code,
pre {
@@ -55,7 +55,7 @@ aside#toc {
transform: scale(1);
border-radius: 0px;
margin-right: 1.5em;
padding-bottom:20px;
// padding-bottom:20px;
.fade {
content: '';
display: inline-block;
+82 -66
View File
@@ -57,6 +57,30 @@ ul.animated {
}
}
.home-row {
min-height: auto;
display: flex;
flex-wrap: wrap;
&.hero {
margin-top: 50px;
min-height: auto;
flex-direction: column;
align-items: center;
&.animated {
opacity: 0;
}
}
&:nth-child(2) {
background-color: darken($hugo-gray-ultra-light, 3%);
}
&:nth-child(3) {
background-color: $hugo-white;
}
&:nth-child(5) {
background-color: $hugo-blue;
}
}
.homepage-icon {
display: block;
display: flex;
@@ -64,26 +88,26 @@ ul.animated {
width: 90%;
max-width: 540px;
margin-top: 5em;
opacity: 0;
margin: {
right: auto;
left: auto;
}
span {
width: 100%;
display: inline;
text-align: center;
font-size: 2.3em;
@include MQ(M) {
font-size: 3.5em;
}
color: $hugo-pink;
font-weight: 900;
font-family: 'helvetica neue',
helvetica,
arial;
margin-left: -.25em;
}
.get-started {
.button.xl {
display: block;
margin-top: 1.5em;
font-size: 1.3em;
padding-right: 1em;
padding-left: 1em;
width: auto;
max-width: 12em;
margin-left: auto;
margin-right: auto;
// background-color: rgb(140,197,231);
}
margin-bottom:5em;
}
.hero-tagline {
@@ -100,27 +124,6 @@ ul.animated {
}
}
.home-row {
min-height: auto;
display: flex;
flex-wrap: wrap;
&.hero {
margin-top: 50px;
min-height: auto;
flex-direction: column;
align-items: center;
}
&:nth-child(2) {
background-color: darken($hugo-gray-ultra-light, 3%);
}
&:nth-child(3) {
background-color: $hugo-white;
}
&:nth-child(4) {
background-color: $hugo-blue;
}
}
.home-row-content {
display: flex;
flex-wrap: wrap;
@@ -135,6 +138,11 @@ ul.animated {
width: 100%;
text-align: center;
margin-bottom: 1em;
span {
font-size: .7em;
font-weight: 300;
color: lighten($base-font-color, 20%);
}
}
@include MQ(XL) {
justify-content: space-around;
@@ -144,12 +152,29 @@ ul.animated {
}
}
.homepage-features {
.home-row-content-focus {
display: flex;
.focus-svgs {
display: flex;
justify-content: space-around;
@include MQ(M) {
max-width: 48%;
}
svg {
max-width: 48%;
}
}
#content-halo {
fill: $hugo-blue!important;
}
}
.home-row-content-features {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 85%;
.homepage-feature {
.home-row-content-feature {
margin-bottom: 2em;
max-width: $L * .31;
h3 {
@@ -160,7 +185,7 @@ ul.animated {
font-size: 1.1em;
}
.homepage-feature-content {
color: lighten($base-font-color, 30%);
color: lighten($base-font-color, 20%);
font-weight: 200;
line-height: 1.3;
font-size: .9em;
@@ -221,22 +246,6 @@ ul.animated {
}
}
.get-started {
.button.xl {
display: block;
margin-top: 1.5em;
font-size: 1.3em;
padding-right: 1em;
padding-left: 1em;
width: auto;
max-width: 12em;
margin-left: auto;
margin-right: auto;
// background-color: rgb(140,197,231);
}
margin-bottom:5em;
}
.homepage-terminal {
font-family: $code-font-family;
background-color: $hugo-gray;
@@ -322,8 +331,16 @@ svg {
}
}
.homepage-tweets {
// color: $hugo-white;
.platform-icons {
display:flex;
width:100%;
justify-content:space-between;
i {
font-size: 80px;
}
}
.home-row-content-tweets {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
@@ -350,17 +367,16 @@ svg {
right: 10px;
color: #1DA1F2;
}
.homepage-tweet-attribution {
font-style: normal;
width: 100%;
display: block;
font-size: .8em;
text-align: right;
}
}
.homepage-tweet-attribution {
font-style: normal;
width: 100%;
display: block;
font-size: .8em;
text-align: right;
}
.homepage-open-source {
.home-row-content-open-source {
div {
width: 100%;
text-align: center;
+1 -1
View File
File diff suppressed because one or more lines are too long
+13 -16
View File
@@ -1,31 +1,28 @@
$('#homepage-nav > ul.animated').addClass('fadeInDown');
$('.homepage-icon.animated').addClass('fadeIn');
$('.home-row.hero.animated').addClass('fadeIn');
$(document).ready(function() {
let offset1 = $('.hero').height() * .2,
offset2 = offset1 * 2,
scrolled1 = false,
scrolled2 = false,
let
scrolled = false,
atTop = true,
terminal = $('.homepage-terminal'),
firstFade = $('.first-fade'),
gopher = $('#gopher'),
cape = $('.gopher-cape'),
badge = $('.gopher-badge');
badge = $('.gopher-badge'),
installrow = $('.home-row.install');
$(window).scroll(function() {
let scroll = $(this).scrollTop();
let scroll = $(this).scrollTop(),
offset = installrow.offset().top - 120;
console.log(scrolled, atTop);
if (scroll > 20 && atTop == true) {
$('#homepage-nav').addClass('shadow');
atTop = false;
}else if (scroll < 20) {
} else
if (scroll < 20) {
$('#homepage-nav').removeClass('shadow');
atTop = true;
}
if (scroll > offset1 && scrolled1 == false) {
firstFade.addClass('fadeIn');
scrolled1 = true;
} else if (scroll > offset2 && scrolled2 == false) {
} else if (scroll > offset && scrolled == false) {
terminal.blast({ delimiter: "letter" }).velocity("transition.fadeIn", {
display: null,
customClass: "visible",
@@ -42,7 +39,7 @@ $(document).ready(function() {
});
}
});
scrolled2 = true;
scrolled = true;
}
// else if (scroll > offset3)
});
+1 -1
View File
File diff suppressed because one or more lines are too long