ettore.dreucci/cocoa-eh-hugo-theme
1
0
Fork 0
mirror of https://github.com/Noettore/cocoa-eh-hugo-theme.git synced 2025-10-15 11:46:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

v0.3.0

Browse Source 
- Change color from orange to blue; improve colors elsewhere
- Change `div.section` to `section`
- Rename  `posts` directory to `blog`
- Add ability to specify extra CSS files in `config.toml`
- Removed `WebFontsFile` feature from `config.toml`
- Remove the initials displayed on top right of single post pages
- Update example site
This commit is contained in:
Nishanth Shanmugham
2015-12-24 16:45:37 -06:00
parent 0d9d498caa
commit 204880aac9
19 changed files with 283 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
README.md
View File

@@ -10,7 +10,7 @@ A consistent and responsive [Hugo](http://gohugo.io) [theme](https://github.com/
* Built-in support for 404 pages * Built-in support for 404 pages
* Syntax highlighting * Syntax highlighting
<img src="http://i.imgur.com/jdstF9j.png" width="600"> <img src="http://i.imgur.com/jdstF9j.png" width="800">
# Table of Contents # Table of Contents
@@ -21,7 +21,7 @@ A consistent and responsive [Hugo](http://gohugo.io) [theme](https://github.com/
* [Contributing](#contributing) * [Contributing](#contributing)
* [License](#license) * [License](#license)
# Getting Started ## Getting Started
From the root of your Hugo site, clone the theme into `themes/cocoa` by running: From the root of your Hugo site, clone the theme into `themes/cocoa` by running:
@@ -35,14 +35,14 @@ Then, generate your site's files by running:
hugo -t cocoa hugo -t cocoa
```` ````
# Usage ## Usage
#### Creating Content #### Creating Content
* Posts should generally go under a `content/posts` directory. Typically you would run: * Posts should generally go under a `content/blog` directory. Typically you would run:
```` ````
hugo new posts/your-new-post.md hugo new blog/your-new-post.md
```` ````
* Fixed pages such as an About page should preferably go under a `content/fixed` or be present at the root of the `contents` directory. * Fixed pages such as an About page should preferably go under a `content/fixed` or be present at the root of the `contents` directory.
@@ -59,11 +59,21 @@ Please see the sample [`config.toml`](https://github.com/nishanths/cocoa-hugo-th
An example site is available under the `exampleSite/` directory. An example site is available under the `exampleSite/` directory.
# Screenshots ## Screenshots
See this [Imgur album](http://imgur.com/a/skabh) or the [`images/`](https://github.com/nishanths/cocoa-hugo-theme/tree/master/images) directory! See this [Imgur album](http://imgur.com/a/skabh) or the [`images/`](https://github.com/nishanths/cocoa-hugo-theme/tree/master/images) directory!
# Changelog ## Changelog
> v0.3.0
- Change color from orange to blue; improve colors elsewhere
- Change `div.section` to `section`
- Rename `posts` directory to `blog`
- Add ability to specify extra CSS files in `config.toml`
- Removed `WebFontsFile` feature from `config.toml`
- Remove the initials displayed on top right of single post pages
- Update example site
> v0.2.0 > v0.2.0
@@ -74,7 +84,7 @@ See this [Imgur album](http://imgur.com/a/skabh) or the [`images/`](https://gith
* Initial release * Initial release
# Contributing ## Contributing
Pull requests, bug fixes, and new features are welcome! Pull requests, bug fixes, and new features are welcome!
@@ -84,6 +94,6 @@ Pull requests, bug fixes, and new features are welcome!
4. Push to the branch (`git push origin my-new-feature`) 4. Push to the branch (`git push origin my-new-feature`)
5. Create new Pull Request on GitHub 5. Create new Pull Request on GitHub
# License ## License
Licensed under the MIT License. See the [LICENSE](https://github.com/nishanths/cocoa-hugo-theme/blob/master/LICENSE.md) file for more details. Licensed under the MIT License. See the [LICENSE](https://github.com/nishanths/cocoa-hugo-theme/blob/master/LICENSE.md) file for more details.

5
exampleSite/config.toml
View File

@@ -12,7 +12,7 @@ disqusShortname = "cocoaexamplesite" # TODO: optional, comment out to disable Di
[permalinks] [permalinks]
fixed = ":title/" fixed = ":title/"
posts = "posts/:slug/" blog = "blog/:slug/"
[params] [params]
Author = "Arthur Dent" Author = "Arthur Dent"
@@ -24,7 +24,8 @@ Email = "you@example.space" # TODO:
FaviconFile = "img/leaf.ico" FaviconFile = "img/leaf.ico"
GATracker = "XYZ" # TODO: GATracker = "XYZ" # TODO:
GitHub = "//github.com/you" # TODO: GitHub = "//github.com/you" # TODO:
Initials = "ad" # displayed on single post page Initials = "ad" # displayed on single post page; DEPRECATED in v0.3.0
Lang = "en" Lang = "en"
LinkedIn = "//linkedin.com/in/you" # TODO: LinkedIn = "//linkedin.com/in/you" # TODO:
Twitter = "//twitter.com/you" # TODO: Twitter = "//twitter.com/you" # TODO:
ExtraCssFiles = [ "/css/override.css" ] # relative to public directory

0
exampleSite/content/posts/lesmiserables-hugo.md → exampleSite/content/blog/lesmiserables-hugo.md
View File

0
exampleSite/content/posts/metamorphosis-kafka.md → exampleSite/content/blog/metamorphosis-kafka.md
View File

0
exampleSite/content/posts/use-at-instead-of-head.md → exampleSite/content/blog/use-at-instead-of-head.md
View File

4
exampleSite/content/blog.html → exampleSite/content/posts.html
View File

@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="canonical" href="/posts"/> <link rel="canonical" href="/blog"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="refresh" content="0;url=/posts"/> <meta http-equiv="refresh" content="0;url=/blog"/>
</head> </head>
</html> </html>

1
exampleSite/static/css/override.css Normal file
View File

@@ -0,0 +1 @@
/* override css styles of the main theme here */

4
layouts/404.html
View File

@@ -1,5 +1,5 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<div class="section main"> <section class="main">
<div class="container f04"> <div class="container f04">
<div class="content"> <div class="content">
<div class="num">404</div> <div class="num">404</div>
@@ -7,5 +7,5 @@
<div class="suggestion"><a href="/">Visit home page</a></div> <div class="suggestion"><a href="/">Visit home page</a></div>
</div> </div>
</div> </div>
</div> </section>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

6
layouts/_default/list.html
View File

@@ -1,8 +1,8 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<div class="section main"> <section class="main">
<div class="container"> <div class="container">
<div class="content"> <div class="content">
{{ partial "page-heading" . }} <div class="page-heading">Blog</div>
<ul> <ul>
{{ range .Data.Pages.ByPublishDate }} {{ range .Data.Pages.ByPublishDate }}
{{ partial "li.html" . }} {{ partial "li.html" . }}
@@ -10,6 +10,6 @@
</ul> </ul>
</div> </div>
</div> </div>
</div> </section>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

4
layouts/_default/single.html
View File

@@ -1,9 +1,9 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<div class="section main"> <section class="main">
<div class="container"> <div class="container">
<div class="content"> <div class="content">
{{ .Content }} {{ .Content }}
</div> </div>
</div> </div>
</div> </section>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

11
layouts/posts/single.html → layouts/blog/single.html
View File

@@ -1,13 +1,11 @@
{{ partial "header_only_narrow.html" . }} {{ partial "header.html" . }}
<div class="section main post"> <section class="main post non-narrow zero-top-spacing">
<div class="container"> <div class="container">
<div class="content"> <div class="content">
<div class="front-matter"> <div class="front-matter">
<div class="title-container"> <div class="title-container">
<div class="page-heading"> {{ partial "page-heading" . }}
<a href="{{ .Permalink }}">{{ if .Params.heading }}{{ .Params.heading }}{{ else }}{{ .Title }}{{ end }}</a>
</div>
<div class="initials"><a href="{{ .Site.BaseURL }}">{{ .Site.Params.Initials }}</a></div> <div class="initials"><a href="{{ .Site.BaseURL }}">{{ .Site.Params.Initials }}</a></div>
</div> </div>
<div class="meta"> <div class="meta">
@@ -20,11 +18,12 @@
<br> <br>
<p><a href="/posts/">Back to posts</a></p> <p><a href="/posts/">Back to posts</a></p>
</div> </div>
<br>
<div class="disqus"> <div class="disqus">
{{ template "_internal/disqus.html" . }} {{ template "_internal/disqus.html" . }}
</div> </div>
</div> </div>
</div> </div>
</div> </section>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

4
layouts/fixed/single.html
View File

@@ -1,5 +1,5 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<div class="section main"> <section class="main">
<div class="container"> <div class="container">
<div class="content"> <div class="content">
{{ partial "page-heading.html" . }} {{ partial "page-heading.html" . }}
@@ -8,5 +8,5 @@
</div> </div>
</div> </div>
</div> </div>
</div> </section>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

8
layouts/index.html
View File

@@ -1,17 +1,17 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<div class="section main"> <section class="main">
<div class="container"> <div class="container">
<div class="content"> <div class="content">
<div class="page-heading">Posts</div> <div class="page-heading">Blog</div>
<ul> <ul>
{{ range .Data.Pages.ByPublishDate }} {{ range .Data.Pages.ByPublishDate }}
{{ if eq .Section "posts" }} {{ if eq .Section "blog" }}
{{ partial "li.html" . }} {{ partial "li.html" . }}
{{ end }} {{ end }}
{{ end }} {{ end }}
</ul> </ul>
</div> </div>
</div> </div>
</div> </section>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

10
layouts/partials/head_includes.html
View File

@@ -15,8 +15,9 @@
<link rel="stylesheet" href="/css/reset.css"> <link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/pygments.css"> <link rel="stylesheet" href="/css/pygments.css">
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/main.css">
{{ if .Site.Params.WebfontsFile }}
<link rel="stylesheet" href="/{{ .Site.Params.WebfontsFile }}"> {{range .Site.Params.ExtraCssFiles}}
<link rel="stylesheet" href="{{.}}">
{{end}} {{end}}
{{ else }} {{ else }}
@@ -24,8 +25,9 @@
<link rel="stylesheet" href="/css/reset.css?{{ .Now.Unix }}"> <link rel="stylesheet" href="/css/reset.css?{{ .Now.Unix }}">
<link rel="stylesheet" href="/css/pygments.css?{{ .Now.Unix }}"> <link rel="stylesheet" href="/css/pygments.css?{{ .Now.Unix }}">
<link rel="stylesheet" href="/css/main.css?{{ .Now.Unix }}"> <link rel="stylesheet" href="/css/main.css?{{ .Now.Unix }}">
{{ if .Site.Params.WebfontsFile }}
<link rel="stylesheet" href="/{{ .Site.Params.WebfontsFile }}?{{ .Now.Unix }}"> {{range .Site.Params.ExtraCssFiles}}
<link rel="stylesheet" href="{{.}}?{{ .Now.Unix }}">
{{end}} {{end}}
{{ end }} {{ end }}

13
layouts/partials/header.html
View File

@@ -5,23 +5,22 @@
<body lang="{{ .Site.Params.Lang }}"> <body lang="{{ .Site.Params.Lang }}">
<div class="section header"> <section class="header">
<div class="container"> <div class="container">
<div class="content"> <div class="content">
<a href="/"><div class="name">{{ .Site.Params.Author }}</div></a>
<nav> <nav>
<ul> <ul>
<a href="/posts/"><li>Posts</li></a> <a href="/blog/"><li>Blog</li></a>
<a href="/about/"><li>About</li></a> <a href="/about/"><li>About</li></a>
<a href="/code/"><li>Code</li></a> <a href="/code/"><li>Code</li></a>
{{ if .Site.Params.ResumeLink }}<a href={{ .Site.Params.ResumeLink }}><li>Resume</li></a>{{ end }}
</ul> </ul>
</nav> </nav>
<a href="/"><div class="name">{{ .Site.Params.Author }}</div></a>
</div>
</div> </div>
</div> </div>
</section>
<div class="section icons"> <section class="icons">
<div class="container"> <div class="container">
<div class="content"> <div class="content">
@@ -62,4 +61,4 @@
{{ end }} {{ end }}
</div> </div>
</div> </div>
</div> </section>

65
layouts/partials/header_only_narrow.html
View File

@@ -1,65 +0,0 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
{{ partial "head.html" . }}
<body lang="{{ .Site.Params.Lang }}">
<div class="section header narrow">
<div class="container">
<div class="content">
<nav>
<ul>
<a href="/posts/"><li>Posts</li></a>
<a href="/about/"><li>About</li></a>
<a href="/code/"><li>Code</li></a>
{{ if .Site.Params.ResumeLink }}<a href={{ .Site.Params.ResumeLink }}><li>Resume</li></a>{{ end }}
</ul>
</nav>
<a href="/"><div class="name">{{ .Site.Params.Author }}</div></a>
</div>
</div>
</div>
<div class="section icons narrow">
<div class="container">
<div class="content">
{{ if .Site.Params.GitHub }}
<a href="{{ .Site.Params.GitHub }}" target="_blank">
<i class="icon ion-social-github"></i>
</a>
{{ end }}
{{ if .Site.Params.Twitter }}
<a href="{{ .Site.Params.Twitter }}" target="_blank">
<i class="icon ion-social-twitter"></i>
</a>
{{ end }}
{{ if .Site.Params.LinkedIn }}
<a href="{{ .Site.Params.LinkedIn }}" target="_blank">
<i class="icon ion-social-linkedin"></i>
</a>
{{ end }}
{{ if .Site.Params.Facebook }}
<a href="{{ .Site.Params.Facebook }}" target="_blank">
<i class="icon ion-social-facebook larger"></i>
</a>
{{ end }}
{{ if .Site.Params.SoundCloud }}
<a href="{{ .Site.Params.SoundCloud }}" target="_blank">
<i class="icon ion-ios-musical-notes larger"></i>
</a>
{{ end }}
{{ if .Site.Params.Email }}
<a href="mailto:{{ .Site.Params.Email }}">
<i class="icon ion-ios-email larger"></i>
</a>
{{ end }}
</div>
</div>
</div>

107
main.less
View File

@@ -3,26 +3,30 @@
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic,700,700italic); @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic,700,700italic);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:700); @import url(https://fonts.googleapis.com/css?family=Raleway:500);
// Less variables // Less variables
@base-font-size: 16px; @base-font-size: 16px;
@vspacing: @base-font-size*2; @vspacing: @base-font-size*2;
@wide-1-breakpoint: 600px;
@monospace-font-stack: ~"'Ubuntu Mono', 'Menlo', monospace"; @monospace-font-stack: ~"'Ubuntu Mono', 'Menlo', monospace";
@body-font-stack: ~"'Open Sans', 'Helvetica Neue', 'Arial', sans-serif"; @body-font-stack: ~"'Open Sans', 'Helvetica Neue', 'Arial', sans-serif";
@heading-font-stack: ~"'Raleway', 'Helvetica Neue', 'Arial', sans-serif"; @heading-font-stack: ~"'Raleway', 'Helvetica Neue', 'Arial', sans-serif";
@special-font-stack-1: ~"'Raleway', 'Helvetica Neue', 'Arial', sans-serif"; @special-font-stack-1: ~"'Raleway', 'Helvetica Neue', 'Arial', sans-serif";
@black: #111; @black: #333;
@gray: #999; @gray: #777;
@accent: rgba(244,109,44,1); // accent colors from hermanradtke.com
@link-hover: rgba(222,90,29,1); @accent: #428bca; // alt: rgba(244,109,44,1);
@link-hover: #2a6496; // alt: rgba(222,90,29,1);
@complementary-accent: #1DA1DE; @complementary-accent: #1DA1DE;
@background: #f7f7f7; @background: #f7f7f7;
@compensated-black: #555; @compensated-black: #555;
@compensated-gray: #999; @compensated-gray: #999;
@compensated-black-hover: #111;
@compensated-gray-hover: #b7b7b7; @compensated-gray-hover: #b7b7b7;
@white: #fefefe; @white: #fefefe;
@milk: #fefefe; @milk: #fefefe;
@@ -104,13 +108,15 @@ body {
font-smoothing: subpixel-antialiased; font-smoothing: subpixel-antialiased;
} }
@media (min-width: 550px) { @media (min-width: @wide-1-breakpoint) {
body { body {
.justify-content(center); // vertically center all sections .justify-content(center); // vertically center all sections
} }
.narrow { .non-narrow {
display: none !important; &.zero-top-spacing {
padding-top: 0 !important;
}
} }
} }
@@ -126,7 +132,7 @@ body {
// //
// Both classes are flex elements // Both classes are flex elements
.section { section {
.flex-display(); .flex-display();
// Sections position their containers centrally, with spacing to the sides // Sections position their containers centrally, with spacing to the sides
// The containers can then move their children around as needed. // The containers can then move their children around as needed.
@@ -140,8 +146,8 @@ body {
width: 100%; width: 100%;
} }
@media (min-width: 550px) { @media (min-width: @wide-1-breakpoint) {
.section { section {
padding: 0 @vspacing/2; padding: 0 @vspacing/2;
margin-left: 100px; margin-left: 100px;
margin-right: 100px; margin-right: 100px;
@@ -151,24 +157,24 @@ body {
// Sections order // Sections order
.section.header { section.header {
.flex-order(0); .flex-order(0);
} }
.section.icons { section.icons {
.flex-order(1); .flex-order(1);
} }
.section.main { section.main {
.flex-order(2); .flex-order(2);
} }
@media (min-width: 550px) { @media (min-width: @wide-1-breakpoint) {
.section.header { section.header {
.flex-order(0); .flex-order(0);
} }
.section.icons { section.icons {
.flex-order(2); .flex-order(2);
} }
.section.main { section.main {
.flex-order(1); .flex-order(1);
} }
} }
@@ -176,7 +182,7 @@ body {
// Styles for sections and contents // Styles for sections and contents
// Header section // Header section
.section.header { section.header {
background-color: @background; background-color: @background;
.container { .container {
@@ -199,7 +205,7 @@ body {
font-size: 14px; font-size: 14px;
margin-bottom: floor(@vspacing/2); margin-bottom: floor(@vspacing/2);
text-transform: uppercase; text-transform: uppercase;
// font-weight: 600; font-family: @heading-font-stack;
ul { ul {
list-style: none; list-style: none;
@@ -221,18 +227,19 @@ body {
} }
ul li { ul li {
color: @compensated-gray; color: @compensated-black;
font-weight: 500;
.transition(~'color @{transition-speed-1} @{in-sine}'); .transition(~'color @{transition-speed-1} @{in-sine}');
&:hover { &:hover {
color: @compensated-gray-hover; color: @compensated-black-hover;
} }
} }
} }
} }
@media (min-width: 550px) { @media (min-width: @wide-1-breakpoint) {
.section.header { section.header {
background-color: transparent; background-color: transparent;
.container { .container {
@@ -248,7 +255,7 @@ body {
} }
nav { nav {
font-size: 13px; font-size: 14px;
margin-bottom: 0; margin-bottom: 0;
ul { ul {
@@ -268,7 +275,7 @@ body {
// Icons // Icons
.section.icons { section.icons {
background-color: @background; background-color: @background;
.container { .container {
@@ -280,7 +287,7 @@ body {
a { a {
margin-left: 6px; margin-left: 6px;
margin-right: 6px; margin-right: 6px;
color: @compensated-gray; color: @compensated-black;
.transition(~'color @{transition-speed-1} @{in-sine}'); .transition(~'color @{transition-speed-1} @{in-sine}');
&:first-child { &:first-child {
@@ -292,7 +299,7 @@ body {
} }
&:hover { &:hover {
color: @compensated-gray-hover; color: @compensated-black-hover;
} }
.icon { .icon {
@@ -306,8 +313,8 @@ body {
} }
} }
@media (min-width: 550px) { @media (min-width: @wide-1-breakpoint) {
.section.icons { section.icons {
background-color: transparent; background-color: transparent;
.container { .container {
@@ -339,7 +346,7 @@ body {
// Main section // Main section
.section.main { section.main {
.container { .container {
.align-items(center); .align-items(center);
.justify-content(flex-start); .justify-content(flex-start);
@@ -403,8 +410,8 @@ body {
} }
} }
@media (min-width: 550px) { @media (min-width: @wide-1-breakpoint) {
.section.main { section.main {
.content { .content {
.front-matter { .front-matter {
.date, .word-count, .reading-time .middot { .date, .word-count, .reading-time .middot {
@@ -414,7 +421,7 @@ body {
.title-container { .title-container {
.initials { .initials {
display: initial; display: none;
} }
} }
} }
@@ -423,7 +430,7 @@ body {
// 404 page // 404 page
.section.main { section.main {
.container.f04 { .container.f04 {
.justify-content(center); .justify-content(center);
@@ -446,8 +453,8 @@ body {
} }
} }
@media (min-width: 550px) { @media (min-width: @wide-1-breakpoint) {
.section.main { section.main {
.container.f04 { .container.f04 {
.justify-content(flex-start); .justify-content(flex-start);
@@ -469,7 +476,7 @@ body {
// Post item // Post item
.section.main { section.main {
.container { .container {
.content { .content {
.post-item { .post-item {
@@ -493,43 +500,43 @@ body {
// Spacing // Spacing
.section { section {
padding: 0 @vspacing/2; padding: 0 @vspacing/2;
} }
.section.header { section.header {
padding-top: @vspacing; padding-top: @vspacing;
padding-bottom: floor(@vspacing/2); padding-bottom: floor(@vspacing/2);
} }
.section.icons { section.icons {
padding-top: 0; padding-top: 0;
padding-bottom: @vspacing; padding-bottom: @vspacing;
} }
.section.main { section.main {
padding-top: @vspacing; padding-top: @vspacing;
padding-bottom: @vspacing; padding-bottom: @vspacing;
} }
@media (min-width: 550px) { @media (min-width: @wide-1-breakpoint) {
@vspacing: 60px; @vspacing: 60px;
.container { .container {
margin: 0 @vspacing/2; margin: 0 @vspacing/2;
} }
.section.header { section.header {
padding-top: @vspacing; padding-top: @vspacing;
padding-bottom: @vspacing; padding-bottom: @vspacing;
} }
.section.icons { section.icons {
padding-top: @vspacing; padding-top: @vspacing;
padding-bottom: @vspacing; padding-bottom: @vspacing;
} }
.section.main { section.main {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
@@ -547,7 +554,7 @@ body {
} }
} }
.section.main.post { section.main.post {
padding-top: @vspacing; padding-top: @vspacing;
padding-bottom: @vspacing; padding-bottom: @vspacing;
} }
@@ -570,10 +577,10 @@ img.profile {
min-width:100%; min-width:100%;
} }
@media (min-width: 550px) { @media (min-width: @wide-1-breakpoint) {
img.profile { img.profile {
min-width: 400px; min-width: 300px;
max-width: 400px !important; max-width: 300px !important;
} }
} }

4
markdown.less
View File

@@ -1,4 +1,4 @@
.section.main .content { section.main .content {
.markdown { .markdown {
@background-gray: #f7f7f7; @background-gray: #f7f7f7;
@@ -185,4 +185,4 @@ tbody tr:nth-child(odd) th {
} }
} // end .markdown } // end .markdown
} // end .section.main .content } // end section.main .content

330
static/css/main.css
View File

@@ -1,15 +1,15 @@
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic,700,700italic); @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic,700,700italic);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:700); @import url(https://fonts.googleapis.com/css?family=Raleway:500);
.dark { .dark {
color: #111 !important; color: #333 !important;
} }
.light { .light {
color: #999 !important; color: #777 !important;
} }
.accent { .accent {
color: #f46d2c !important; color: #428bca !important;
} }
@media (min-width: 550px) { @media (min-width: 550px) {
.small-screens-only { .small-screens-only {
@@ -61,27 +61,27 @@ body {
min-height: 100%; min-height: 100%;
font-weight: 400; font-weight: 400;
font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;
color: #111; color: #333;
line-height: 1.6; line-height: 1.6;
text-rendering: optimizeLegibility !important; text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased; font-smoothing: subpixel-antialiased;
} }
@media (min-width: 550px) { @media (min-width: 600px) {
body { body {
-webkit-justify-content: center; -webkit-justify-content: center;
-moz-justify-content: center; -moz-justify-content: center;
-ms-justify-content: center; -ms-justify-content: center;
justify-content: center; justify-content: center;
} }
.narrow { .non-narrow.zero-top-spacing {
display: none !important; padding-top: 0 !important;
} }
} }
.icon { .icon {
text-rendering: geometricPrecision !important; text-rendering: geometricPrecision !important;
} }
.section { section {
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -105,56 +105,56 @@ body {
display: flex; display: flex;
width: 100%; width: 100%;
} }
@media (min-width: 550px) { @media (min-width: 600px) {
.section { section {
padding: 0 16px; padding: 0 16px;
margin-left: 100px; margin-left: 100px;
margin-right: 100px; margin-right: 100px;
max-width: 750px; max-width: 750px;
} }
} }
.section.header { section.header {
-webkit-order: 0; -webkit-order: 0;
-moz-order: 0; -moz-order: 0;
-ms-order: 0; -ms-order: 0;
order: 0; order: 0;
} }
.section.icons { section.icons {
-webkit-order: 1; -webkit-order: 1;
-moz-order: 1; -moz-order: 1;
-ms-order: 1; -ms-order: 1;
order: 1; order: 1;
} }
.section.main { section.main {
-webkit-order: 2; -webkit-order: 2;
-moz-order: 2; -moz-order: 2;
-ms-order: 2; -ms-order: 2;
order: 2; order: 2;
} }
@media (min-width: 550px) { @media (min-width: 600px) {
.section.header { section.header {
-webkit-order: 0; -webkit-order: 0;
-moz-order: 0; -moz-order: 0;
-ms-order: 0; -ms-order: 0;
order: 0; order: 0;
} }
.section.icons { section.icons {
-webkit-order: 2; -webkit-order: 2;
-moz-order: 2; -moz-order: 2;
-ms-order: 2; -ms-order: 2;
order: 2; order: 2;
} }
.section.main { section.main {
-webkit-order: 1; -webkit-order: 1;
-moz-order: 1; -moz-order: 1;
-ms-order: 1; -ms-order: 1;
order: 1; order: 1;
} }
} }
.section.header { section.header {
background-color: #f7f7f7; background-color: #f7f7f7;
} }
.section.header .container { section.header .container {
-webkit-align-items: center; -webkit-align-items: center;
-moz-align-items: center; -moz-align-items: center;
-ms-align-items: center; -ms-align-items: center;
@@ -164,7 +164,7 @@ body {
-ms-justify-content: center; -ms-justify-content: center;
justify-content: center; justify-content: center;
} }
.section.header .content { section.header .content {
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -179,7 +179,7 @@ body {
-ms-align-items: center; -ms-align-items: center;
align-items: center; align-items: center;
} }
.section.header .name { section.header .name {
font-size: 18px; font-size: 18px;
font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
letter-spacing: -0.005rem; letter-spacing: -0.005rem;
@@ -188,15 +188,16 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-smoothing: antialiased; font-smoothing: antialiased;
color: #111; color: #333;
color: #555; color: #555;
} }
.section.header nav { section.header nav {
font-size: 14px; font-size: 14px;
margin-bottom: 16px; margin-bottom: 16px;
text-transform: uppercase; text-transform: uppercase;
font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
} }
.section.header nav ul { section.header nav ul {
list-style: none; list-style: none;
text-align: center; text-align: center;
display: -webkit-inline-flex; display: -webkit-inline-flex;
@@ -205,63 +206,64 @@ body {
display: -ms-inline-flex; display: -ms-inline-flex;
display: inline-flex; display: inline-flex;
} }
.section.header nav ul a { section.header nav ul a {
margin-left: 6px; margin-left: 6px;
margin-right: 6px; margin-right: 6px;
} }
.section.header nav ul a:first-child { section.header nav ul a:first-child {
margin-left: 0; margin-left: 0;
} }
.section.header nav ul a:last-child { section.header nav ul a:last-child {
margin-right: 0; margin-right: 0;
} }
.section.header nav ul li { section.header nav ul li {
color: #999; color: #555;
font-weight: 500;
-webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
} }
.section.header nav ul li:hover { section.header nav ul li:hover {
color: #b7b7b7; color: #111;
} }
@media (min-width: 550px) { @media (min-width: 600px) {
.section.header { section.header {
background-color: transparent; background-color: transparent;
} }
.section.header .container { section.header .container {
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
-moz-justify-content: flex-start; -moz-justify-content: flex-start;
-ms-justify-content: flex-start; -ms-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
} }
.section.header .content { section.header .content {
-webkit-align-items: flex-start; -webkit-align-items: flex-start;
-moz-align-items: flex-start; -moz-align-items: flex-start;
-ms-align-items: flex-start; -ms-align-items: flex-start;
align-items: flex-start; align-items: flex-start;
} }
.section.header .name { section.header .name {
color: #111; color: #333;
} }
.section.header nav { section.header nav {
font-size: 13px; font-size: 14px;
margin-bottom: 0; margin-bottom: 0;
} }
.section.header nav ul { section.header nav ul {
text-align: left; text-align: left;
} }
.section.header nav ul li { section.header nav ul li {
color: #999; color: #777;
} }
.section.header nav ul li:hover { section.header nav ul li:hover {
color: #111; color: #333;
} }
} }
.section.icons { section.icons {
background-color: #f7f7f7; background-color: #f7f7f7;
} }
.section.icons .container { section.icons .container {
-webkit-align-items: center; -webkit-align-items: center;
-moz-align-items: center; -moz-align-items: center;
-ms-align-items: center; -ms-align-items: center;
@@ -271,56 +273,56 @@ body {
-ms-justify-content: center; -ms-justify-content: center;
justify-content: center; justify-content: center;
} }
.section.icons .content a { section.icons .content a {
margin-left: 6px; margin-left: 6px;
margin-right: 6px; margin-right: 6px;
color: #999; color: #555;
-webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
} }
.section.icons .content a:first-child { section.icons .content a:first-child {
margin-left: 0; margin-left: 0;
} }
.section.icons .content a:last-child { section.icons .content a:last-child {
margin-right: 0; margin-right: 0;
} }
.section.icons .content a:hover { section.icons .content a:hover {
color: #b7b7b7; color: #111;
} }
.section.icons .content a .icon { section.icons .content a .icon {
font-size: 20px; font-size: 20px;
} }
.section.icons .content a .icon.larger { section.icons .content a .icon.larger {
font-size: 22px; font-size: 22px;
} }
@media (min-width: 550px) { @media (min-width: 600px) {
.section.icons { section.icons {
background-color: transparent; background-color: transparent;
} }
.section.icons .container { section.icons .container {
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
-moz-justify-content: flex-start; -moz-justify-content: flex-start;
-ms-justify-content: flex-start; -ms-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
} }
.section.icons .content a { section.icons .content a {
margin-left: 3px; margin-left: 3px;
margin-right: 3px; margin-right: 3px;
color: #999; color: #777;
} }
.section.icons .content a:hover { section.icons .content a:hover {
color: #111; color: #333;
} }
.section.icons .content a .icon { section.icons .content a .icon {
font-size: 18px; font-size: 18px;
} }
.section.icons .content a .icon.larger { section.icons .content a .icon.larger {
font-size: 20px; font-size: 20px;
} }
} }
.section.main .container { section.main .container {
-webkit-align-items: center; -webkit-align-items: center;
-moz-align-items: center; -moz-align-items: center;
-ms-align-items: center; -ms-align-items: center;
@@ -330,11 +332,11 @@ body {
-ms-justify-content: flex-start; -ms-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
} }
.section.main .content { section.main .content {
color: #111; color: #333;
font-size: 16px; font-size: 16px;
} }
.section.main .content .title-container { section.main .content .title-container {
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -345,7 +347,7 @@ body {
-ms-justify-content: space-between; -ms-justify-content: space-between;
justify-content: space-between; justify-content: space-between;
} }
.section.main .content .title-container .initials { section.main .content .title-container .initials {
display: none; display: none;
font-size: 18px; font-size: 18px;
font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
@@ -355,20 +357,20 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-smoothing: antialiased; font-smoothing: antialiased;
color: #111; color: #333;
color: #999; color: #777;
} }
.section.main .content .title-container .initials a { section.main .content .title-container .initials a {
color: #999; color: #777;
-webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
} }
.section.main .content .title-container .initials a:hover { section.main .content .title-container .initials a:hover {
color: #111; color: #333;
} }
.section.main .content .page-heading { section.main .content .page-heading {
font-size: 18px; font-size: 18px;
font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
letter-spacing: -0.005rem; letter-spacing: -0.005rem;
@@ -377,15 +379,15 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-smoothing: antialiased; font-smoothing: antialiased;
color: #111; color: #333;
margin-bottom: 16px; margin-bottom: 16px;
} }
.section.main .content .front-matter .page-heading { section.main .content .front-matter .page-heading {
margin-bottom: 0; margin-bottom: 0;
} }
.section.main .content .front-matter .meta { section.main .content .front-matter .meta {
font-size: 14px; font-size: 14px;
color: #999; color: #777;
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -393,37 +395,37 @@ body {
display: flex; display: flex;
margin-bottom: 32px; margin-bottom: 32px;
} }
.section.main .content .front-matter .date, section.main .content .front-matter .date,
.section.main .content .front-matter .word-count, section.main .content .front-matter .word-count,
.section.main .content .front-matter .reading-time .middot { section.main .content .front-matter .reading-time .middot {
display: none; display: none;
} }
.section.main .content .front-matter .middot { section.main .content .front-matter .middot {
font-size: 6px; font-size: 6px;
margin: 0 6px; margin: 0 6px;
display: inline; display: inline;
vertical-align: middle; vertical-align: middle;
} }
.section.main .content .front-matter .middot:before { section.main .content .front-matter .middot:before {
content: "•"; content: "•";
} }
@media (min-width: 550px) { @media (min-width: 600px) {
.section.main .content .front-matter .date, section.main .content .front-matter .date,
.section.main .content .front-matter .word-count, section.main .content .front-matter .word-count,
.section.main .content .front-matter .reading-time .middot { section.main .content .front-matter .reading-time .middot {
display: initial; display: initial;
} }
.section.main .content .title-container .initials { section.main .content .title-container .initials {
display: initial; display: none;
} }
} }
.section.main .container.f04 { section.main .container.f04 {
-webkit-justify-content: center; -webkit-justify-content: center;
-moz-justify-content: center; -moz-justify-content: center;
-ms-justify-content: center; -ms-justify-content: center;
justify-content: center; justify-content: center;
} }
.section.main .container.f04 .content { section.main .container.f04 .content {
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -438,37 +440,37 @@ body {
-ms-align-items: center; -ms-align-items: center;
align-items: center; align-items: center;
} }
.section.main .container.f04 .content .num { section.main .container.f04 .content .num {
margin: 30px 0px 30px 0; margin: 30px 0px 30px 0;
font-weight: 200; font-weight: 200;
font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 50px; font-size: 50px;
} }
.section.main .container.f04 .content .detail { section.main .container.f04 .content .detail {
margin-bottom: 40px; margin-bottom: 40px;
} }
@media (min-width: 550px) { @media (min-width: 600px) {
.section.main .container.f04 { section.main .container.f04 {
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
-moz-justify-content: flex-start; -moz-justify-content: flex-start;
-ms-justify-content: flex-start; -ms-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
} }
.section.main .container.f04 .content { section.main .container.f04 .content {
-webkit-align-items: flex-start; -webkit-align-items: flex-start;
-moz-align-items: flex-start; -moz-align-items: flex-start;
-ms-align-items: flex-start; -ms-align-items: flex-start;
align-items: flex-start; align-items: flex-start;
} }
.section.main .container.f04 .content .num { section.main .container.f04 .content .num {
margin: 0 0 10px 0; margin: 0 0 10px 0;
font-size: 32px; font-size: 32px;
} }
.section.main .container.f04 .content .detail { section.main .container.f04 .content .detail {
margin-bottom: 30px; margin-bottom: 30px;
} }
} }
.section.main .container .content .post-item { section.main .container .content .post-item {
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -481,66 +483,66 @@ body {
display: list-item; display: list-item;
list-style: disc inside; list-style: disc inside;
} }
.section.main .container .content .post-item .meta { section.main .container .content .post-item .meta {
font-size: 14px; font-size: 14px;
color: #999; color: #777;
display: none; display: none;
min-width: 100px; min-width: 100px;
text-align: right; text-align: right;
margin-right: 16px; margin-right: 16px;
} }
.section { section {
padding: 0 16px; padding: 0 16px;
} }
.section.header { section.header {
padding-top: 32px; padding-top: 32px;
padding-bottom: 16px; padding-bottom: 16px;
} }
.section.icons { section.icons {
padding-top: 0; padding-top: 0;
padding-bottom: 32px; padding-bottom: 32px;
} }
.section.main { section.main {
padding-top: 32px; padding-top: 32px;
padding-bottom: 32px; padding-bottom: 32px;
} }
@media (min-width: 550px) { @media (min-width: 600px) {
.container { .container {
margin: 0 30px; margin: 0 30px;
} }
.section.header { section.header {
padding-top: 60px; padding-top: 60px;
padding-bottom: 60px; padding-bottom: 60px;
} }
.section.icons { section.icons {
padding-top: 60px; padding-top: 60px;
padding-bottom: 60px; padding-bottom: 60px;
} }
.section.main { section.main {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.section.main .container .content .post-item { section.main .container .content .post-item {
display: flex; display: flex;
list-style: none; list-style: none;
} }
.section.main .container .content .post-item .meta { section.main .container .content .post-item .meta {
display: block; display: block;
} }
.section.main.post { section.main.post {
padding-top: 60px; padding-top: 60px;
padding-bottom: 60px; padding-bottom: 60px;
} }
} }
a { a {
color: #f46d2c; color: #428bca;
-webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -moz-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -o-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
} }
a:hover { a:hover {
color: #de5a1d; color: #2a6496;
} }
img { img {
max-width: 100%; max-width: 100%;
@@ -548,21 +550,21 @@ img {
img.profile { img.profile {
min-width: 100%; min-width: 100%;
} }
@media (min-width: 550px) { @media (min-width: 600px) {
img.profile { img.profile {
min-width: 400px; min-width: 300px;
max-width: 400px !important; max-width: 300px !important;
} }
} }
.page-heading a { .page-heading a {
color: #111; color: #333;
} }
.section.main .content .markdown h1, section.main .content .markdown h1,
.section.main .content .markdown h2, section.main .content .markdown h2,
.section.main .content .markdown h3, section.main .content .markdown h3,
.section.main .content .markdown h4, section.main .content .markdown h4,
.section.main .content .markdown h5, section.main .content .markdown h5,
.section.main .content .markdown h6 { section.main .content .markdown h6 {
font-size: 18px; font-size: 18px;
font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
letter-spacing: -0.005rem; letter-spacing: -0.005rem;
@@ -571,41 +573,41 @@ img.profile {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-smoothing: antialiased; font-smoothing: antialiased;
color: #111; color: #333;
} }
.section.main .content .markdown h1 { section.main .content .markdown h1 {
font-size: 1.75rem; font-size: 1.75rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.section.main .content .markdown h2 { section.main .content .markdown h2 {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.section.main .content .markdown h3 { section.main .content .markdown h3 {
font-size: 1em; font-size: 1em;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.section.main .content .markdown h4, section.main .content .markdown h4,
.section.main .content .markdown h5, section.main .content .markdown h5,
.section.main .content .markdown h6 { section.main .content .markdown h6 {
font-size: 1rem; font-size: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
letter-spacing: none; letter-spacing: none;
text-transform: none; text-transform: none;
} }
.section.main .content .markdown code, section.main .content .markdown code,
.section.main .content .markdown pre { section.main .content .markdown pre {
font-family: 'Ubuntu Mono', 'Menlo', monospace; font-family: 'Ubuntu Mono', 'Menlo', monospace;
font-size: 0.98rem; font-size: 0.98rem;
background-color: #f7f7f7; background-color: #f7f7f7;
} }
.section.main .content .markdown code { section.main .content .markdown code {
/* enclosed by single backtick (`) */ /* enclosed by single backtick (`) */
padding: .15em .5em; padding: .15em .5em;
color: #a10c31; color: #a10c31;
border-radius: 2px; border-radius: 2px;
} }
.section.main .content .markdown pre { section.main .content .markdown pre {
/* Hugo specific: consider using the 'highlight' shortcode */ /* Hugo specific: consider using the 'highlight' shortcode */
display: block; display: block;
margin-top: 1rem; margin-top: 1rem;
@@ -617,90 +619,90 @@ img.profile {
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
} }
.section.main .content .markdown pre code { section.main .content .markdown pre code {
/* enclosed by 4 backticks (````) */ /* enclosed by 4 backticks (````) */
padding: 0; padding: 0;
font-size: 0.9rem; font-size: 0.9rem;
} }
.section.main .content .markdown p { section.main .content .markdown p {
/* Invoked by line break */ /* Invoked by line break */
font-size: 1rem; font-size: 1rem;
margin-top: 0; margin-top: 0;
margin-bottom: 1em; margin-bottom: 1em;
} }
.section.main .content .markdown ul, section.main .content .markdown ul,
.section.main .content .markdown ol, section.main .content .markdown ol,
.section.main .content .markdown dl { section.main .content .markdown dl {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.section.main .content .markdown dt { section.main .content .markdown dt {
font-weight: bold; font-weight: bold;
} }
.section.main .content .markdown dd { section.main .content .markdown dd {
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.section.main .content .markdown ul { section.main .content .markdown ul {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
.section.main .content .markdown li { section.main .content .markdown li {
list-style-type: disc; list-style-type: disc;
list-style-position: inside; list-style-position: inside;
} }
.section.main .content .markdown em { section.main .content .markdown em {
font-style: italic; font-style: italic;
} }
.section.main .content .markdown strong { section.main .content .markdown strong {
font-weight: 700; font-weight: 700;
} }
.section.main .content .markdown hr { section.main .content .markdown hr {
position: relative; position: relative;
margin: 1.75rem 0; margin: 1.75rem 0;
border: 0; border: 0;
border-top: 1px solid #b3b3b3; border-top: 1px solid #919191;
border-top: 1px solid #cccccc; border-top: 1px solid #aaaaaa;
} }
.section.main .content .markdown abbr { section.main .content .markdown abbr {
font-size: 0.85rem; font-size: 0.85rem;
font-weight: bold; font-weight: bold;
color: #444444; color: #666666;
text-transform: uppercase; text-transform: uppercase;
} }
.section.main .content .markdown abbr[title] { section.main .content .markdown abbr[title] {
cursor: help; cursor: help;
border-bottom: 1px dotted #b3b3b3; border-bottom: 1px dotted #919191;
} }
.section.main .content .markdown blockquote { section.main .content .markdown blockquote {
padding: .5rem 1rem; padding: .5rem 1rem;
margin: .8rem 0; margin: .8rem 0;
color: #7a7a7a; color: #7a7a7a;
border-left: .25rem solid #e5e5e5; border-left: .25rem solid #e5e5e5;
} }
.section.main .content .markdown blockquote p:last-child { section.main .content .markdown blockquote p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@media (min-width: 550px) { @media (min-width: 550px) {
.section.main .content .markdown blockquote { section.main .content .markdown blockquote {
padding-right: 5rem; padding-right: 5rem;
padding-left: 1.25rem; padding-left: 1.25rem;
} }
} }
.section.main .content .markdown img { section.main .content .markdown img {
margin: 1rem 0; margin: 1rem 0;
max-width: 100%; max-width: 100%;
} }
.section.main .content .markdown table { section.main .content .markdown table {
margin-bottom: 1rem; margin-bottom: 1rem;
width: 100%; width: 100%;
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
border-collapse: collapse; border-collapse: collapse;
} }
.section.main .content .markdown td, section.main .content .markdown td,
.section.main .content .markdown th { section.main .content .markdown th {
padding: .25rem .5rem; padding: .25rem .5rem;
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
} }
.section.main .content .markdown tbody tr:nth-child(odd) td, section.main .content .markdown tbody tr:nth-child(odd) td,
.section.main .content .markdown tbody tr:nth-child(odd) th { section.main .content .markdown tbody tr:nth-child(odd) th {
background-color: #f7f7f7; background-color: #f7f7f7;
} }