{{ end }}
126 |
127 | {{ end }}
128 |
129 |
130 |
131 | ### Usage
132 | I simply changed:
133 |
134 | {% image full http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg "One of my favorite touristy-type photos. I secretly waited for the good light while we were "having fun" and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." ->http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/ %}
135 |
136 | to this (this example uses a slightly extended version named `fig`, different than the built-in `figure`):
137 |
138 | {{%/* fig class="full" src="http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg" title="One of my favorite touristy-type photos. I secretly waited for the good light while we were having fun and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." link="http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/" */%}}
139 |
140 | As a bonus, the shortcode named parameters are, arguably, more readable.
141 |
142 | ## Finishing touches
143 | ### Fix content
144 | Depending on the amount of customization that was done with each post with Jekyll, this step will require more or less effort. There are no hard and fast rules here except that `hugo server --watch` is your friend. Test your changes and fix errors as needed.
145 |
146 | ### Clean up
147 | You'll want to remove the Jekyll configuration at this point. If you have anything else that isn't used, delete it.
148 |
149 | ## A practical example in a diff
150 | [Hey, it's Alex](http://heyitsalex.net/) was migrated in less than a _father-with-kids day_ from Jekyll to Hugo. You can see all the changes (and screw-ups) by looking at this [diff](https://github.com/alexandre-normand/alexandre-normand/compare/869d69435bd2665c3fbf5b5c78d4c22759d7613a...b7f6605b1265e83b4b81495423294208cc74d610).
151 |
--------------------------------------------------------------------------------
/assets/styles/partials/_reset.scss:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /* Document
4 | ========================================================================== */
5 |
6 | /**
7 | * 1. Correct the line height in all browsers.
8 | * 2. Prevent adjustments of font size after orientation changes in iOS.
9 | */
10 |
11 | html {
12 | line-height: 1.15; /* 1 */
13 | -webkit-text-size-adjust: 100%; /* 2 */
14 | }
15 |
16 | /* Sections
17 | ========================================================================== */
18 |
19 | /**
20 | * Remove the margin in all browsers.
21 | */
22 |
23 | body {
24 | margin: 0;
25 | }
26 |
27 | /**
28 | * Render the `main` element consistently in IE.
29 | */
30 |
31 | main {
32 | display: block;
33 | }
34 |
35 | /**
36 | * Correct the font size and margin on `h1` elements within `section` and
37 | * `article` contexts in Chrome, Firefox, and Safari.
38 | */
39 |
40 | h1 {
41 | font-size: 2em;
42 | margin: 0.67em 0;
43 | }
44 |
45 | /* Grouping content
46 | ========================================================================== */
47 |
48 | /**
49 | * 1. Add the correct box sizing in Firefox.
50 | * 2. Show the overflow in Edge and IE.
51 | */
52 |
53 | hr {
54 | box-sizing: content-box; /* 1 */
55 | height: 0; /* 1 */
56 | overflow: visible; /* 2 */
57 | }
58 |
59 | /**
60 | * 1. Correct the inheritance and scaling of font size in all browsers.
61 | * 2. Correct the odd `em` font sizing in all browsers.
62 | */
63 |
64 | pre {
65 | font-family: monospace, monospace; /* 1 */
66 | font-size: 1em; /* 2 */
67 | }
68 |
69 | /* Text-level semantics
70 | ========================================================================== */
71 |
72 | /**
73 | * Remove the gray background on active links in IE 10.
74 | */
75 |
76 | a {
77 | background-color: transparent;
78 | }
79 |
80 | /**
81 | * 1. Remove the bottom border in Chrome 57-
82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 | */
84 |
85 | abbr[title] {
86 | border-bottom: none; /* 1 */
87 | text-decoration: underline; /* 2 */
88 | text-decoration: underline dotted; /* 2 */
89 | }
90 |
91 | /**
92 | * Add the correct font weight in Chrome, Edge, and Safari.
93 | */
94 |
95 | b,
96 | strong {
97 | font-weight: bolder;
98 | }
99 |
100 | /**
101 | * 1. Correct the inheritance and scaling of font size in all browsers.
102 | * 2. Correct the odd `em` font sizing in all browsers.
103 | */
104 |
105 | code,
106 | kbd,
107 | samp {
108 | font-family: monospace, monospace; /* 1 */
109 | font-size: 1em; /* 2 */
110 | }
111 |
112 | /**
113 | * Add the correct font size in all browsers.
114 | */
115 |
116 | small {
117 | font-size: 80%;
118 | }
119 |
120 | /**
121 | * Prevent `sub` and `sup` elements from affecting the line height in
122 | * all browsers.
123 | */
124 |
125 | sub,
126 | sup {
127 | font-size: 75%;
128 | line-height: 0;
129 | position: relative;
130 | vertical-align: baseline;
131 | }
132 |
133 | sub {
134 | bottom: -0.25em;
135 | }
136 |
137 | sup {
138 | top: -0.5em;
139 | }
140 |
141 | /* Embedded content
142 | ========================================================================== */
143 |
144 | /**
145 | * Remove the border on images inside links in IE 10.
146 | */
147 |
148 | img {
149 | border-style: none;
150 | }
151 |
152 | /* Forms
153 | ========================================================================== */
154 |
155 | /**
156 | * 1. Change the font styles in all browsers.
157 | * 2. Remove the margin in Firefox and Safari.
158 | */
159 |
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 | font-family: inherit; /* 1 */
166 | font-size: 100%; /* 1 */
167 | line-height: 1.15; /* 1 */
168 | margin: 0; /* 2 */
169 | }
170 |
171 | /**
172 | * Show the overflow in IE.
173 | * 1. Show the overflow in Edge.
174 | */
175 |
176 | button,
177 | input { /* 1 */
178 | overflow: visible;
179 | }
180 |
181 | /**
182 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
183 | * 1. Remove the inheritance of text transform in Firefox.
184 | */
185 |
186 | button,
187 | select { /* 1 */
188 | text-transform: none;
189 | }
190 |
191 | /**
192 | * Correct the inability to style clickable types in iOS and Safari.
193 | */
194 |
195 | button,
196 | [type="button"],
197 | [type="reset"],
198 | [type="submit"] {
199 | -webkit-appearance: button;
200 | }
201 |
202 | /**
203 | * Remove the inner border and padding in Firefox.
204 | */
205 |
206 | button::-moz-focus-inner,
207 | [type="button"]::-moz-focus-inner,
208 | [type="reset"]::-moz-focus-inner,
209 | [type="submit"]::-moz-focus-inner {
210 | border-style: none;
211 | padding: 0;
212 | }
213 |
214 | /**
215 | * Restore the focus styles unset by the previous rule.
216 | */
217 |
218 | button:-moz-focusring,
219 | [type="button"]:-moz-focusring,
220 | [type="reset"]:-moz-focusring,
221 | [type="submit"]:-moz-focusring {
222 | outline: 1px dotted ButtonText;
223 | }
224 |
225 | /**
226 | * Correct the padding in Firefox.
227 | */
228 |
229 | fieldset {
230 | padding: 0.35em 0.75em 0.625em;
231 | }
232 |
233 | /**
234 | * 1. Correct the text wrapping in Edge and IE.
235 | * 2. Correct the color inheritance from `fieldset` elements in IE.
236 | * 3. Remove the padding so developers are not caught out when they zero out
237 | * `fieldset` elements in all browsers.
238 | */
239 |
240 | legend {
241 | box-sizing: border-box; /* 1 */
242 | color: inherit; /* 2 */
243 | display: table; /* 1 */
244 | max-width: 100%; /* 1 */
245 | padding: 0; /* 3 */
246 | white-space: normal; /* 1 */
247 | }
248 |
249 | /**
250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251 | */
252 |
253 | progress {
254 | vertical-align: baseline;
255 | }
256 |
257 | /**
258 | * Remove the default vertical scrollbar in IE 10+.
259 | */
260 |
261 | textarea {
262 | overflow: auto;
263 | }
264 |
265 | /**
266 | * 1. Add the correct box sizing in IE 10.
267 | * 2. Remove the padding in IE 10.
268 | */
269 |
270 | [type="checkbox"],
271 | [type="radio"] {
272 | box-sizing: border-box; /* 1 */
273 | padding: 0; /* 2 */
274 | }
275 |
276 | /**
277 | * Correct the cursor style of increment and decrement buttons in Chrome.
278 | */
279 |
280 | [type="number"]::-webkit-inner-spin-button,
281 | [type="number"]::-webkit-outer-spin-button {
282 | height: auto;
283 | }
284 |
285 | /**
286 | * 1. Correct the odd appearance in Chrome and Safari.
287 | * 2. Correct the outline style in Safari.
288 | */
289 |
290 | [type="search"] {
291 | -webkit-appearance: textfield; /* 1 */
292 | outline-offset: -2px; /* 2 */
293 | }
294 |
295 | /**
296 | * Remove the inner padding in Chrome and Safari on macOS.
297 | */
298 |
299 | [type="search"]::-webkit-search-decoration {
300 | -webkit-appearance: none;
301 | }
302 |
303 | /**
304 | * 1. Correct the inability to style clickable types in iOS and Safari.
305 | * 2. Change font properties to `inherit` in Safari.
306 | */
307 |
308 | ::-webkit-file-upload-button {
309 | -webkit-appearance: button; /* 1 */
310 | font: inherit; /* 2 */
311 | }
312 |
313 | /* Interactive
314 | ========================================================================== */
315 |
316 | /*
317 | * Add the correct display in Edge, IE 10+, and Firefox.
318 | */
319 |
320 | details {
321 | display: block;
322 | }
323 |
324 | /*
325 | * Add the correct display in all browsers.
326 | */
327 |
328 | summary {
329 | display: list-item;
330 | }
331 |
332 | /* Misc
333 | ========================================================================== */
334 |
335 | /**
336 | * Add the correct display in IE 10+.
337 | */
338 |
339 | template {
340 | display: none;
341 | }
342 |
343 | /**
344 | * Add the correct display in IE 10.
345 | */
346 |
347 | [hidden] {
348 | display: none;
349 | }
350 |
--------------------------------------------------------------------------------
/layouts/partials/head.html:
--------------------------------------------------------------------------------
1 |
2 | {{- $gohugoio := "gohugoio" -}}
3 | {{- $themeColor := "#02b875" -}}
4 | {{- $favicon := "favicon.ico" -}}
5 | {{- $icon16 := "icons/icon-16x16.png" -}}
6 | {{- $icon32 := "icons/icon-32x32.png" -}}
7 | {{- $icon144 := "icons/icon-144x144.png" -}}
8 | {{- $icon152 := "icons/icon-152x152.png" -}}
9 | {{- $icon192 := "icons/icon-192x192.png" -}}
10 | {{- $manifest := "manifest.json" -}}
11 | {{- $bg := resources.Get (.Site.Params.bg | default "images/grey-prism.svg") -}}
12 | {{- $avatar := resources.Get (.Site.Params.avatar | default "images/avatar.png") -}}
13 | {{- $style := resources.Get "styles/main.scss" | resources.ExecuteAsTemplate "styles/main-rendered.scss" . | resources.ToCSS | resources.Minify -}}
14 | {{- $customStyle := resources.Get (.Site.Params.customStyle | default "styles/custom.scss") | resources.ToCSS | resources.Minify -}}
15 | {{- $fontAwesome := "https://use.fontawesome.com/releases/v5.8.1/css/all.css" -}}
16 | {{- $fontAwesomeIntegrity := "sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" -}}
17 |
18 |
19 |
20 | {{ with .Site.Params.fontAwesome }}
21 |
22 | {{ else }}
23 |
24 | {{ end }}
25 |
26 |
27 | {{ with .Site.DisqusShortname }}{{ end }}
28 | {{ with .Site.DisqusShortname }}{{ end }}
29 | {{ with .Site.Params.Gitment }}{{ end }}
30 | {{ with .Site.GoogleAnalytics }}{{ end }}
31 | {{ with .Site.Params.baidutongji }}{{ end }}
32 |
33 | {{ if and (eq .Kind "page") (eq .Type "post") }}
34 |
35 |
36 | {{ with .Params.author }}{{ end }}
37 |
38 |
39 |
40 | {{ if isset .Params "cover" }}
41 |
42 |
43 |
44 |
45 |
46 | {{ else }}
47 |
48 |
49 |
50 |
51 |
52 | {{ end }}
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | {{ else }}
62 |
63 |
64 | {{ with .Site.Params.author }}{{ end }}
65 | {{ with .Site.Params.description }}{{ end }}
66 |
67 |
68 |
69 |
70 |
71 | {{ with .Site.Params.description }}{{ end }}
72 |
73 |
74 |
75 |
76 |
77 | {{ with .Site.Params.description }}{{ end }}
78 |
79 |
80 |
81 | {{ end }}
82 |
83 |
84 |
85 |
86 |
87 |
88 | {{ range .AlternativeOutputFormats -}}
89 | {{ printf `` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
90 | {{ end -}}
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 | {{ with .Site.Params.googlesiteverification }}{{ end }}
102 | {{ with .Site.Params.msvalidate }}{{ end }}
103 | {{ with .Site.Params.baidusiteverification }}{{ end }}
104 | {{ with .Site.Params.sogousiteverification }}{{ end }}
105 | {{ with .Site.Params.sositeverification }}{{ end }}
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 | {{ with .Site.Params.customStyle }}{{ end }}
127 |
128 |
129 |
130 |
131 |
132 |
137 |
138 | {{ with .Site.Params.fontAwesome }}
139 |
140 | {{ end }}
141 | {{ with .Site.Params.customStyle }}{{ end }}
142 |
143 |
144 |
145 | {{ if and (eq .Kind "page") (eq .Type "post") }}
146 |
147 | {{ end }}
148 |
149 |
150 | {{ if and (eq .Kind "page") (eq .Type "post") }}
151 |
152 | {{ end }}
153 |
--------------------------------------------------------------------------------
/exampleSite/content/post/goisforlovers.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: (Hu)go Template Primer
3 | tags: ["go", "golang", "templates", "themes", "development"]
4 | date: 2014-07-28
5 | ---
6 |
7 | Hugo uses the excellent [go][] [html/template][gohtmltemplate] library for
8 | its template engine. It is an extremely lightweight engine that provides a very
9 | small amount of logic. In our experience that it is just the right amount of
10 | logic to be able to create a good static website. If you have used other
11 | template systems from different languages or frameworks you will find a lot of
12 | similarities in go templates.
13 |
14 | This document is a brief primer on using go templates. The [go docs][gohtmltemplate]
15 | provide more details.
16 |
17 | ## Introduction to Go Templates
18 |
19 | Go templates provide an extremely simple template language. It adheres to the
20 | belief that only the most basic of logic belongs in the template or view layer.
21 | One consequence of this simplicity is that go templates parse very quickly.
22 |
23 | A unique characteristic of go templates is they are content aware. Variables and
24 | content will be sanitized depending on the context of where they are used. More
25 | details can be found in the [go docs][gohtmltemplate].
26 |
27 | ## Basic Syntax
28 |
29 | Go lang templates are html files with the addition of variables and
30 | functions.
31 |
32 | **Go variables and functions are accessible within {{ }}**
33 |
34 | Accessing a predefined variable "foo":
35 |
36 | {{ foo }}
37 |
38 | **Parameters are separated using spaces**
39 |
40 | Calling the add function with input of 1, 2:
41 |
42 | {{ add 1 2 }}
43 |
44 | **Methods and fields are accessed via dot notation**
45 |
46 | Accessing the Page Parameter "bar"
47 |
48 | {{ .Params.bar }}
49 |
50 | **Parentheses can be used to group items together**
51 |
52 | {{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
53 |
54 |
55 | ## Variables
56 |
57 | Each go template has a struct (object) made available to it. In hugo each
58 | template is passed either a page or a node struct depending on which type of
59 | page you are rendering. More details are available on the
60 | [variables](/layout/variables) page.
61 |
62 | A variable is accessed by referencing the variable name.
63 |
64 | {{ .Title }}
65 |
66 | Variables can also be defined and referenced.
67 |
68 | {{ $address := "123 Main St."}}
69 | {{ $address }}
70 |
71 |
72 | ## Functions
73 |
74 | Go template ship with a few functions which provide basic functionality. The go
75 | template system also provides a mechanism for applications to extend the
76 | available functions with their own. [Hugo template
77 | functions](/layout/functions) provide some additional functionality we believe
78 | are useful for building websites. Functions are called by using their name
79 | followed by the required parameters separated by spaces. Template
80 | functions cannot be added without recompiling hugo.
81 |
82 | **Example:**
83 |
84 | {{ add 1 2 }}
85 |
86 | ## Includes
87 |
88 | When including another template you will pass to it the data it will be
89 | able to access. To pass along the current context please remember to
90 | include a trailing dot. The templates location will always be starting at
91 | the /layout/ directory within Hugo.
92 |
93 | **Example:**
94 |
95 | {{ template "chrome/header.html" . }}
96 |
97 |
98 | ## Logic
99 |
100 | Go templates provide the most basic iteration and conditional logic.
101 |
102 | ### Iteration
103 |
104 | Just like in go, the go templates make heavy use of range to iterate over
105 | a map, array or slice. The following are different examples of how to use
106 | range.
107 |
108 | **Example 1: Using Context**
109 |
110 | {{ range array }}
111 | {{ . }}
112 | {{ end }}
113 |
114 | **Example 2: Declaring value variable name**
115 |
116 | {{range $element := array}}
117 | {{ $element }}
118 | {{ end }}
119 |
120 | **Example 2: Declaring key and value variable name**
121 |
122 | {{range $index, $element := array}}
123 | {{ $index }}
124 | {{ $element }}
125 | {{ end }}
126 |
127 | ### Conditionals
128 |
129 | If, else, with, or, & and provide the framework for handling conditional
130 | logic in Go Templates. Like range, each statement is closed with `end`.
131 |
132 |
133 | Go Templates treat the following values as false:
134 |
135 | * false
136 | * 0
137 | * any array, slice, map, or string of length zero
138 |
139 | **Example 1: If**
140 |
141 | {{ if isset .Params "title" }}
{{ index .Params "title" }}
{{ end }}
142 |
143 | **Example 2: If -> Else**
144 |
145 | {{ if isset .Params "alt" }}
146 | {{ index .Params "alt" }}
147 | {{else}}
148 | {{ index .Params "caption" }}
149 | {{ end }}
150 |
151 | **Example 3: And & Or**
152 |
153 | {{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
154 |
155 | **Example 4: With**
156 |
157 | An alternative way of writing "if" and then referencing the same value
158 | is to use "with" instead. With rebinds the context `.` within its scope,
159 | and skips the block if the variable is absent.
160 |
161 | The first example above could be simplified as:
162 |
163 | {{ with .Params.title }}
{{ . }}
{{ end }}
164 |
165 | **Example 5: If -> Else If**
166 |
167 | {{ if isset .Params "alt" }}
168 | {{ index .Params "alt" }}
169 | {{ else if isset .Params "caption" }}
170 | {{ index .Params "caption" }}
171 | {{ end }}
172 |
173 | ## Pipes
174 |
175 | One of the most powerful components of go templates is the ability to
176 | stack actions one after another. This is done by using pipes. Borrowed
177 | from unix pipes, the concept is simple, each pipeline's output becomes the
178 | input of the following pipe.
179 |
180 | Because of the very simple syntax of go templates, the pipe is essential
181 | to being able to chain together function calls. One limitation of the
182 | pipes is that they only can work with a single value and that value
183 | becomes the last parameter of the next pipeline.
184 |
185 | A few simple examples should help convey how to use the pipe.
186 |
187 | **Example 1 :**
188 |
189 | {{ if eq 1 1 }} Same {{ end }}
190 |
191 | is the same as
192 |
193 | {{ eq 1 1 | if }} Same {{ end }}
194 |
195 | It does look odd to place the if at the end, but it does provide a good
196 | illustration of how to use the pipes.
197 |
198 | **Example 2 :**
199 |
200 | {{ index .Params "disqus_url" | html }}
201 |
202 | Access the page parameter called "disqus_url" and escape the HTML.
203 |
204 | **Example 3 :**
205 |
206 | {{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
207 | Stuff Here
208 | {{ end }}
209 |
210 | Could be rewritten as
211 |
212 | {{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
213 | Stuff Here
214 | {{ end }}
215 |
216 |
217 | ## Context (aka. the dot)
218 |
219 | The most easily overlooked concept to understand about go templates is that {{ . }}
220 | always refers to the current context. In the top level of your template this
221 | will be the data set made available to it. Inside of a iteration it will have
222 | the value of the current item. When inside of a loop the context has changed. .
223 | will no longer refer to the data available to the entire page. If you need to
224 | access this from within the loop you will likely want to set it to a variable
225 | instead of depending on the context.
226 |
227 | **Example:**
228 |
229 | {{ $title := .Site.Title }}
230 | {{ range .Params.tags }}
231 |
232 | {{ end }}
233 |
234 | Notice how once we have entered the loop the value of {{ . }} has changed. We
235 | have defined a variable outside of the loop so we have access to it from within
236 | the loop.
237 |
238 | # Hugo Parameters
239 |
240 | Hugo provides the option of passing values to the template language
241 | through the site configuration (for sitewide values), or through the meta
242 | data of each specific piece of content. You can define any values of any
243 | type (supported by your front matter/config format) and use them however
244 | you want to inside of your templates.
245 |
246 |
247 | ## Using Content (page) Parameters
248 |
249 | In each piece of content you can provide variables to be used by the
250 | templates. This happens in the [front matter](/content/front-matter).
251 |
252 | An example of this is used in this documentation site. Most of the pages
253 | benefit from having the table of contents provided. Sometimes the TOC just
254 | doesn't make a lot of sense. We've defined a variable in our front matter
255 | of some pages to turn off the TOC from being displayed.
256 |
257 | Here is the example front matter:
258 |
259 | ```
260 | ---
261 | title: "Permalinks"
262 | date: "2013-11-18"
263 | aliases:
264 | - "/doc/permalinks/"
265 | groups: ["extras"]
266 | groups_weight: 30
267 | notoc: true
268 | ---
269 | ```
270 |
271 | Here is the corresponding code inside of the template:
272 |
273 | {{ if not .Params.notoc }}
274 |
124 | {{ else if eq (.Get 1) $type }}
125 |
126 | {{ else }}
127 |
128 | {{ end }}
129 | {{ else }}
130 |
131 | {{ end }}
132 |
133 | {{ end }}
134 |
135 |
136 |
137 |
--------------------------------------------------------------------------------
/assets/styles/partials/_content.scss:
--------------------------------------------------------------------------------
1 | .post-content {
2 | position: relative;
3 | color: $text;
4 | line-height: 1.8;
5 | word-wrap: break-word;
6 | word-break: break-word;
7 |
8 | & li + li {
9 | margin-top: 0.5rem;
10 | }
11 |
12 | & a {
13 | padding-bottom: 0.1em;
14 | border-bottom: 1px dashed $green-light;
15 | color: $primary;
16 | opacity: 1;
17 |
18 | &:focus,
19 | &:hover {
20 | border-bottom: 1px solid $green-light;
21 | }
22 | }
23 |
24 | & em {
25 | color: $text-light;
26 | font-style: italic;
27 | }
28 |
29 | & strong {
30 | color: $text-strong;
31 | }
32 |
33 | & del {
34 | color: $text-light;
35 | text-decoration: line-through;
36 | }
37 |
38 | & ins {
39 | color: $text-strong;
40 | text-decoration: underline;
41 | }
42 |
43 | & hr {
44 | position: relative;
45 | margin: 2rem auto;
46 | border-top: 1px dashed $grey-lighter;
47 | border-bottom: none;
48 |
49 | &::before {
50 | content: "sep line";
51 | position: absolute;
52 | top: -12px;
53 | left: calc(50% - 40px);
54 | padding: 0 0.5rem;
55 | background-color: $white;
56 | color: $grey-lighter;
57 | font-size: $size-7;
58 | font-family: $family-monospace;
59 | }
60 | }
61 |
62 | & h1,
63 | & h2,
64 | & h3,
65 | & h4,
66 | & h5,
67 | & h6 {
68 | color: $text-strong;
69 | font-weight: $weight-semibold;
70 | line-height: 1.125;
71 | text-align: left;
72 | }
73 |
74 | & h1 {
75 | margin-top: 2rem;
76 | margin-bottom: 1rem;
77 | font-size: $size-2;
78 | }
79 |
80 | & h2 {
81 | margin-top: 1.75rem;
82 | margin-bottom: 0.75rem;
83 | font-size: $size-3;
84 | }
85 |
86 | & h3 {
87 | margin-top: 1.5rem;
88 | margin-bottom: 0.5rem;
89 | font-size: $size-4;
90 | }
91 |
92 | & h4 {
93 | margin-top: 1.25rem;
94 | margin-bottom: 0.25rem;
95 | font-size: $size-5;
96 | }
97 |
98 | & h5 {
99 | margin-top: 1rem;
100 | margin-bottom: 0;
101 | font-size: $size-6;
102 | }
103 |
104 | & h6 {
105 | margin-top: 1rem;
106 | margin-bottom: 0;
107 | font-size: $size-7;
108 | }
109 |
110 | & p {
111 | margin-top: 1.5rem;
112 | margin-bottom: 1.5rem;
113 | }
114 |
115 | & blockquote {
116 | background-color: $background;
117 | border-left: 5px solid $border;
118 | padding: 0.5rem 1rem;
119 | margin: 2rem 0;
120 |
121 | & p {
122 | margin-top: 0.5rem;
123 | margin-bottom: 0.5rem;
124 | }
125 |
126 | & cite {
127 | margin-top: 1.5rem;
128 | color: $text-light;
129 | font-size: 0.9rem;
130 | }
131 | }
132 |
133 | & tt,
134 | & code {
135 | padding: 0;
136 | padding-top: 0.2em;
137 | padding-bottom: 0.2em;
138 | margin: 0;
139 | font-size: 0.9em;
140 | background-color: $code-background;
141 | font-family: $family-monospace;
142 |
143 | &::before,
144 | &::after {
145 | letter-spacing: -0.2em;
146 | content: "\00a0";
147 | }
148 |
149 | &.has-jax {
150 | padding: 0;
151 | font-size: 1em;
152 | background-color: transparent;
153 | }
154 | }
155 |
156 | & kbd {
157 | display: inline-block;
158 | padding: 0.25em;
159 | background-color: $white-bis;
160 | border: 1px solid $grey-lighter;
161 | border-bottom-color: $grey-light;
162 | border-radius: $radius;
163 | box-shadow: inset 0 -1px 0 $grey-light;
164 | font-size: 0.8em;
165 | line-height: 1.25;
166 | font-family: $family-monospace;
167 | color: $text;
168 | }
169 |
170 | & .highlight {
171 | margin: 2rem auto;
172 | border-radius: $radius;
173 | overflow: hidden;
174 |
175 | & pre {
176 | margin: 0 auto;
177 | }
178 |
179 | & td:first-child {
180 | & pre {
181 | padding-right: 0;
182 | }
183 | }
184 |
185 | & td:last-child {
186 | & pre {
187 | padding-left: 0;
188 | }
189 | }
190 | }
191 |
192 | & pre {
193 | margin: 2rem auto;
194 | padding: 1rem;
195 | overflow-x: auto;
196 | font-size: 0.9rem;
197 | line-height: 1.618;
198 | white-space: pre;
199 | word-wrap: normal;
200 | word-break: normal;
201 |
202 | & code {
203 | font-size: 0.9rem;
204 | background-color: transparent;
205 |
206 | &::before,
207 | &::after {
208 | content: none;
209 | }
210 | }
211 | }
212 |
213 | & sup,
214 | & sub {
215 | font-size: $size-7;
216 |
217 | & a {
218 | border-bottom: none;
219 |
220 | &:focus,
221 | &:hover {
222 | border-bottom: none;
223 | }
224 | }
225 | }
226 |
227 | & ol {
228 | margin-left: 0;
229 | margin-top: 2rem;
230 | margin-bottom: 2rem;
231 | padding-left: 1.5rem;
232 | list-style: decimal outside;
233 |
234 | & ol {
235 | margin-top: 0.5rem;
236 | margin-bottom: 0.5rem;
237 | list-style: lower-roman outside;
238 | }
239 |
240 | & ul {
241 | margin-top: 0.5rem;
242 | margin-bottom: 0.5rem;
243 | list-style: disc outside;
244 | }
245 | }
246 |
247 | & ul {
248 | margin-left: 0;
249 | margin-top: 2rem;
250 | margin-bottom: 2rem;
251 | padding-left: 1.5rem;
252 | list-style: disc outside;
253 |
254 | & ul {
255 | margin-top: 0.5rem;
256 | margin-bottom: 0.5rem;
257 | list-style: circle outside;
258 | }
259 |
260 | & ol {
261 | margin-top: 0.5rem;
262 | margin-bottom: 0.5rem;
263 | list-style: decimal outside;
264 | }
265 | }
266 |
267 | & .task-list {
268 | margin-top: 2rem;
269 | margin-bottom: 2rem;
270 | list-style: none;
271 | padding-left: 0;
272 |
273 | & .task-list {
274 | margin-top: 0.5rem;
275 | margin-bottom: 0.5rem;
276 | padding-left: 1.5rem;
277 | }
278 | }
279 |
280 | & dl {
281 | margin-top: 2rem;
282 | margin-bottom: 2rem;
283 |
284 | & dt {
285 | color: $primary;
286 | margin-top: 1rem;
287 |
288 | &::after {
289 | content: ':';
290 | }
291 | }
292 |
293 | & dd {
294 | text-indent: 2rem;
295 | margin-left: 0;
296 | margin-top: 0.25rem;
297 | }
298 | }
299 |
300 | & figure {
301 | display: block;
302 | margin: 2rem auto;
303 |
304 | & img {
305 | max-width: 100%;
306 | box-shadow: 2px 20px 40px 10px $box-shadow-dark;
307 |
308 | @media screen and (max-width: $tablet) {
309 | box-shadow: none;
310 | }
311 | }
312 |
313 | & figcaption {
314 | & h4 {
315 | color: $grey-light;
316 | font-size: 0.9rem;
317 | text-align: center;
318 | }
319 | }
320 | }
321 |
322 | & img {
323 | display: block;
324 | margin: 2rem auto;
325 | max-width: 100%;
326 | box-shadow: 2px 20px 40px 10px $box-shadow-dark;
327 |
328 | @media screen and (max-width: $tablet) {
329 | box-shadow: none;
330 | }
331 | }
332 |
333 | & div.has-jax {
334 | margin: 2rem auto;
335 | overflow-x: auto;
336 | }
337 |
338 | & .MathJax_Display,
339 | & .MathJax {
340 | &:focus {
341 | outline: none;
342 | }
343 | }
344 | }
345 |
--------------------------------------------------------------------------------
/assets/images/grey-prism.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/exampleSite/content/post/migrate-from-jekyll.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Migrate to Hugo from Jekyll
3 | date: 2014-03-10
4 | ---
5 |
6 | ## Move static content to `static`
7 | Jekyll has a rule that any directory not starting with `_` will be copied as-is to the `_site` output. Hugo keeps all static content under `static`. You should therefore move it all there.
8 | With Jekyll, something that looked like
9 |
10 | ▾