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 03:36:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix validation HTML validation errors (#62)

Browse Source 
* Make the theme compliant with W3C standards (#55)

* Dropped the line because chrome tab is deprecated.

* On header, "li" elements are meant to surround the "a" elements and not the other way around.

* Dropped all section tags I could find at first glance, as they had no semantic meaning and were firing warnings at the W3C validator.

* Change "middot" from a helper div to a helper class since putting div's inside ul's is not compliant

* Fixed a problem of the previous commit. A middot would not hide if on mobile.

* Fix archetypes bug with Go templates

* Fix additional validation error in 404
This commit is contained in:
Michael Noronha
2017-11-09 16:22:28 -06:00
committed by GitHub
parent b1fa4bb421
commit 969bd5ca4e
14 changed files with 217 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
layouts/404.html
View File

@@ -9,12 +9,12 @@
</style> </style>
</head> </head>
<body> <body>
<img src={{ .Site.Params.logofile }} class="logo" alt="logo"></img> <img src={{ .Site.Params.logofile }} class="logo" alt="logo" />
<div class="container f04"> <div class="container f04">
<div class="content"> <div class="content">
<section class="header"> <div class="header column">
<div class="name">404</div> <div class="name">404</div>
</section> </div>
<div class="detail">The page you were looking for does not exist.</div> <div class="detail">The page you were looking for does not exist.</div>
<div class="suggestion"><a href="/">Visit the home page</a></div> <div class="suggestion"><a href="/">Visit the home page</a></div>
</div> </div>

4
layouts/_default/section.html
View File

@@ -1,5 +1,5 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<section class="main"> <div class="main column">
<div class="container"> <div class="container">
<div class="content"> <div class="content">
{{ $globalTitle := .Title}} {{ $globalTitle := .Title}}
@@ -24,5 +24,5 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

4
layouts/_default/single.html
View File

@@ -1,5 +1,5 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<section class="main"> <div class="main column">
<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>
</section> </div>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

4
layouts/_default/taxonomy.html
View File

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

17
layouts/blog/single.html
View File

@@ -1,6 +1,6 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<section class="main post non-narrow zero-top-spacing"> <div class="main post non-narrow zero-top-spacing column">
<div class="container"> <div class="container">
<div class="content"> <div class="content">
<div class="front-matter"> <div class="front-matter">
@@ -11,27 +11,24 @@
<div class="date" title="{{ .Date.Format .Site.Params.dateformfull }}">{{ .Date.Format .Site.Params.dateform }}</div> <div class="date" title="{{ .Date.Format .Site.Params.dateformfull }}">{{ .Date.Format .Site.Params.dateform }}</div>
{{ if not .Params.noauthor }} {{ if not .Params.noauthor }}
{{ if .Params.author }} {{ if .Params.author }}
<div class="author" title="{{ .Params.Author }}"><div class="middot"></div>{{ .Params.author }}</div> <div class="author middot" title="{{ .Params.Author }}">{{ .Params.author }}</div>
{{end}} {{end}}
{{end}} {{end}}
<div class="reading-time"><div class="middot"></div>{{ .ReadingTime }} minute read</div> <div class="reading-time middot">{{ .ReadingTime }} minute read</div>
<div class="tags"> <div class="tags">
<ul> <ul>
{{ range .Params.tags }} {{ range .Params.tags }}
<div class="middot"></div> <li class="middot"><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> </li>
<li><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> </li>
{{ end }} {{ end }}
</ul> </ul>
</div> </div>
<div class="tags"> <div class="tags">
<ul> <ul>
{{ if isset .Params "hacker_news_id" }} {{ if isset .Params "hacker_news_id" }}
<div class="middot"></div> <li class="middot"><a href="https://news.ycombinator.com/item?id={{ .Params.hacker_news_id }}">Hacker News</a> </li>
<li><a href="https://news.ycombinator.com/item?id={{ .Params.hacker_news_id }}">Hacker News</a> </li>
{{ end }} {{ end }}
{{ if isset .Params "lobsters_id" }} {{ if isset .Params "lobsters_id" }}
<div class="middot"></div> <li class="middot"><a href="https://lobste.rs/s/{{ .Params.lobsters_id }}">Lobsters</a> </li>
<li><a href="https://lobste.rs/s/{{ .Params.lobsters_id }}">Lobsters</a> </li>
{{ end }} {{ end }}
</ul> </ul>
</div> </div>
@@ -75,6 +72,6 @@
{{ end }} {{ end }}
</div> </div>
</div> </div>
</section> </div>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

4
layouts/index.html
View File

@@ -1,5 +1,5 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<section class="main"> <div class="main column">
<div class="container"> <div class="container">
<div class="content"> <div class="content">
{{ range where .Data.Pages "Title" "Home" }} {{ range where .Data.Pages "Title" "Home" }}
@@ -44,6 +44,6 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

10
layouts/partials/css/colors.css
View File

@@ -6,20 +6,20 @@ a:hover {
color: {{ .Param "colors.identifier_dark" }}; color: {{ .Param "colors.identifier_dark" }};
} }
section.main .content .markdown, section.header .name, section.header nav ul li:hover { div.main .content .markdown, div.header .name, div.header nav ul a:hover {
color: {{ .Param "colors.foreground" }}; color: {{ .Param "colors.foreground" }};
} }
section.header nav ul li { div.header nav ul a {
color: {{ .Param "colors.trivial" }}; color: {{ .Param "colors.trivial" }};
} }
section.main .content .markdown code { div.main .content .markdown code {
background-color: {{ .Param "colors.background" }}; background-color: {{ .Param "colors.background" }};
color: {{ .Param "colors.identifier" }}; color: {{ .Param "colors.identifier" }};
} }
section.main .content .markdown pre, section.main .content .markdown pre code { div.main .content .markdown pre, div.main .content .markdown pre code {
background-color: {{ .Param "colors.background_dark" }}; background-color: {{ .Param "colors.background_dark" }};
color: {{ .Param "colors.code" }}; color: {{ .Param "colors.code" }};
} }
@@ -62,4 +62,4 @@ section.main .content .markdown pre, section.main .content .markdown pre code {
.ssk { .ssk {
background-color: {{ .Param "colors.trivial" }}; background-color: {{ .Param "colors.trivial" }};
} }

256
layouts/partials/css/main.css
View File

@@ -25,7 +25,7 @@ time, mark, audio, video {
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { footer, header, hgroup, menu, nav, section, div.column {
display: block; display: block;
} }
body { body {
@@ -107,6 +107,22 @@ section {
align-items: center; align-items: center;
width: 100%; width: 100%;
} }
div.column {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
width: 100%;
}
.container { .container {
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
@@ -115,7 +131,7 @@ section {
display: flex; display: flex;
width: 100%; width: 100%;
} }
section.header .container { div.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;
@@ -125,7 +141,7 @@ section.header .container {
-ms-justify-content: center; -ms-justify-content: center;
justify-content: center; justify-content: center;
} }
section.header .content { div.header .content {
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -140,11 +156,11 @@ section.header .content {
-ms-align-items: center; -ms-align-items: center;
align-items: center; align-items: center;
} }
section.header .container .logo { div.header .container .logo {
max-width: 100px; max-width: 100px;
margin-left: -2em; margin-left: -2em;
} }
section.header .name { div.header .name {
padding-top: 20px; padding-top: 20px;
font-size: 28px; font-size: 28px;
font-family: 'Nexa Bold', 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Nexa Bold', 'Helvetica Neue', 'Arial', sans-serif;
@@ -156,10 +172,10 @@ section.header .name {
color: #333333; color: #333333;
color: #555555; color: #555555;
} }
section.header nav { div.header nav {
margin-bottom: 16px; margin-bottom: 16px;
} }
section.header nav ul { div.header nav ul {
list-style: none; list-style: none;
text-align: center; text-align: center;
display: -webkit-inline-flex; display: -webkit-inline-flex;
@@ -168,17 +184,17 @@ section.header nav ul {
display: -ms-inline-flex; display: -ms-inline-flex;
display: inline-flex; display: inline-flex;
} }
section.header nav ul a { div.header nav ul li {
margin-left: 6px; margin-left: 6px;
margin-right: 6px; margin-right: 6px;
} }
section.header nav ul a:first-child { div.header nav ul li:first-child {
margin-left: 0; margin-left: 0;
} }
section.header nav ul a:last-child { div.header nav ul li:last-child {
margin-right: 0; margin-right: 0;
} }
section.header nav ul li { div.header nav ul a {
color: #555555; color: #555555;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
@@ -189,10 +205,10 @@ section.header nav ul li {
-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 { div.header nav ul a:hover {
color: #111111; color: #111111;
} }
section.footer .container { div.footer .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;
@@ -205,7 +221,7 @@ section.footer .container {
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
section.footer .container a { div.footer .container a {
font-size: 14px; font-size: 14px;
margin-left: 6px; margin-left: 6px;
margin-right: 6px; margin-right: 6px;
@@ -215,28 +231,28 @@ section.footer .container a {
-ms-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -ms-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-o-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -o-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
} }
section.footer .container a:first-child { div.footer .container a:first-child {
margin-left: 0; margin-left: 0;
} }
section.footer .container a:last-child { div.footer .container a:last-child {
margin-right: 0; margin-right: 0;
} }
section.footer .container a:hover { div.footer .container a:hover {
opacity: 0.8; opacity: 0.8;
} }
section.footer .container a .icon { div.footer .container a .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
section.footer .container .copyright { div.footer .container .copyright {
flex-grow: 0.5; flex-grow: 0.5;
text-align: start; text-align: start;
} }
section.footer .container .icons { div.footer .container .icons {
flex-grow: 0.5; flex-grow: 0.5;
text-align: end; text-align: end;
} }
section.main .container { div.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;
@@ -246,11 +262,11 @@ section.main .container {
-ms-justify-content: flex-start; -ms-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
} }
section.main .content { div.main .content {
color: #111111; color: #111111;
font-size: 16px; font-size: 16px;
} }
section.main .content .title-container { div.main .content .title-container {
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -261,10 +277,10 @@ section.main .content .title-container {
-ms-justify-content: space-between; -ms-justify-content: space-between;
justify-content: space-between; justify-content: space-between;
} }
section.main .content .posts { div.main .content .posts {
margin-bottom: 4em; margin-bottom: 4em;
} }
section.main .content .page-heading { div.main .content .page-heading {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
font-family: 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Helvetica Neue', 'Arial', sans-serif;
@@ -276,10 +292,10 @@ section.main .content .page-heading {
color: #333333; color: #333333;
margin-bottom: 16px; margin-bottom: 16px;
} }
section.main .content .front-matter .page-heading { div.main .content .front-matter .page-heading {
margin-bottom: 0; margin-bottom: 0;
} }
section.main .content .front-matter .meta { div.main .content .front-matter .meta {
font-size: 14px; font-size: 14px;
color: #666666; color: #666666;
display: -webkit-flex; display: -webkit-flex;
@@ -289,23 +305,20 @@ section.main .content .front-matter .meta {
display: flex; display: flex;
margin-bottom: 32px; margin-bottom: 32px;
} }
section.main .content .front-matter .date, div.main .content .front-matter .date,
section.main .content .front-matter .author, div.main .content .front-matter .author,
section.main .content .front-matter .tags, div.main .content .front-matter .tags,
section.main .content .front-matter .word-count, div.main .content .front-matter .word-count,
section.main .content .front-matter .reading-time .middot { div.main .content .front-matter .middot:before {
display: none; display: none;
} }
section.main .content .front-matter .middot { div.main .content .front-matter .middot:before {
font-size: 6px; font-size: 6px;
margin: 0 6px; margin: 0 6px;
display: inline;
vertical-align: middle; vertical-align: middle;
}
section.main .content .front-matter .middot:before {
content: "•"; content: "•";
} }
section.main .content .front-matter .tags ul { div.main .content .front-matter .tags ul {
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -320,25 +333,25 @@ section.main .content .front-matter .tags ul {
-ms-align-items: center; -ms-align-items: center;
align-items: center; align-items: center;
} }
section.main .content .front-matter .tags ul li { div.main .content .front-matter .tags ul li {
-webkit-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -webkit-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-moz-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -moz-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-ms-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -ms-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
-o-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); -o-transition: opacity 0.1s cubic-bezier(0.47, 0, 0.75, 0.72);
} }
section.main .content .front-matter .tags ul li:hover { div.main .content .front-matter .tags ul li:hover {
opacity: 0.7; opacity: 0.7;
} }
section.main .content .front-matter .tags ul li a { div.main .content .front-matter .tags ul li a {
color: #666666; color: #666666;
} }
section.main .container.f04 { div.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 { div.main .container.f04 .content {
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -353,20 +366,20 @@ section.main .container.f04 .content {
-ms-align-items: center; -ms-align-items: center;
align-items: center; align-items: center;
} }
section.main .container.f04 .content .num { div.main .container.f04 .content .num {
margin: 30px 0px 30px 0; margin: 30px 0px 30px 0;
font-weight: 400; font-weight: 400;
font-family: 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Helvetica Neue', 'Arial', sans-serif;
font-size: 50px; font-size: 50px;
} }
section.main .container.f04 .content .detail { div.main .container.f04 .content .detail {
margin-bottom: 40px; margin-bottom: 40px;
} }
section.main .container .content .groupby { div.main .container .content .groupby {
margin-top: 1em; margin-top: 1em;
padding-left: 0.5em; padding-left: 0.5em;
} }
section.main .container .content .post-item { div.main .container .content .post-item {
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -379,38 +392,41 @@ section.main .container .content .post-item {
display: list-item; display: list-item;
list-style: disc inside; list-style: disc inside;
} }
section.main .container .content .post-item .meta { div.main .container .content .post-item .meta {
font-size: 14px; font-size: 14px;
color: #666666; color: #666666;
display: none; display: none;
min-width: 100px; min-width: 100px;
} }
section.main .container .content .see-more { div.main .container .content .see-more {
font-style: italic; font-style: italic;
float: right; float: right;
font-size: 0.9em; font-size: 0.9em;
margin-top: 2em; margin-top: 2em;
color: #313537; color: #313537;
} }
section.main .container .content .see-more:hover { div.main .container .content .see-more:hover {
color: #666; color: #666;
} }
section { section {
padding: 0 16px; padding: 0 16px;
} }
section.header { div.column {
padding: 0 16px;
}
div.header {
padding-top: 10px; padding-top: 10px;
} }
section.header-home { div.header-home {
padding-top: 36px; padding-top: 36px;
} }
section.main { div.main {
padding-top: 32px; padding-top: 32px;
} }
section.main .container .content .post-item .meta { div.main .container .content .post-item .meta {
display: block; display: block;
} }
section.main .container .content .post-item { div.main .container .content .post-item {
display: flex; display: flex;
list-style: none; list-style: none;
} }
@@ -427,22 +443,22 @@ a:hover {
img { img {
max-width: 100%; max-width: 100%;
} }
section.main .content { div.main .content {
width: 100%; width: 100%;
} }
section.main .content .markdown { div.main .content .markdown {
font-size: 1.1em; font-size: 1.1em;
line-height: 1.75em; line-height: 1.75em;
color: #313537; color: #313537;
font-family: serif; font-family: serif;
font-weight: 300; font-weight: 300;
} }
section.main .content .markdown h1, div.main .content .markdown h1,
section.main .content .markdown h2, div.main .content .markdown h2,
section.main .content .markdown h3, div.main .content .markdown h3,
section.main .content .markdown h4, div.main .content .markdown h4,
section.main .content .markdown h5, div.main .content .markdown h5,
section.main .content .markdown h6 { div.main .content .markdown h6 {
font-size: 22px; font-size: 22px;
font-family: 'Helvetica Neue', 'Arial', sans-serif; font-family: 'Helvetica Neue', 'Arial', sans-serif;
letter-spacing: -0.005rem; letter-spacing: -0.005rem;
@@ -454,37 +470,37 @@ section.main .content .markdown h6 {
text-transform: none; text-transform: none;
margin-top: 1.75rem; margin-top: 1.75rem;
} }
section.main .content .markdown h1 { div.main .content .markdown h1 {
font-size: 1.75rem; font-size: 1.75rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
section.main .content .markdown h2 { div.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 { div.main .content .markdown h3 {
font-size: 1em; font-size: 1em;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
section.main .content .markdown h4, div.main .content .markdown h4,
section.main .content .markdown h5, div.main .content .markdown h5,
section.main .content .markdown h6 { div.main .content .markdown h6 {
font-size: 1rem; font-size: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
letter-spacing: none; letter-spacing: none;
} }
section.main .content .markdown code, div.main .content .markdown code,
section.main .content .markdown pre { div.main .content .markdown pre {
font-family: 'Menlo', monospace; font-family: 'Menlo', monospace;
font-size: 0.98rem; font-size: 0.98rem;
background-color: #f7f7f7; background-color: #f7f7f7;
} }
section.main .content .markdown code { div.main .content .markdown code {
/* enclosed by single backtick (`) */ /* enclosed by single backtick (`) */
padding: .15em .5em; padding: .15em .5em;
border-radius: 2px; border-radius: 2px;
} }
section.main .content .markdown pre { div.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;
@@ -495,18 +511,18 @@ section.main .content .markdown pre {
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
} }
section.main .content .markdown pre code { div.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 a code { div.main .content .markdown a code {
color: #428bca !important; color: #428bca !important;
} }
section.main .content .markdown a code:hover { div.main .content .markdown a code:hover {
text-decoration: underline; text-decoration: underline;
} }
section.main .content .markdown p { div.main .content .markdown p {
{{if .Site.Params.align_left}} {{if .Site.Params.align_left}}
text-align: left; text-align: left;
{{else}} {{else}}
@@ -515,68 +531,68 @@ section.main .content .markdown p {
margin-top: 0; margin-top: 0;
margin-bottom: 1em; margin-bottom: 1em;
} }
section.main .content .markdown ul, div.main .content .markdown ul,
section.main .content .markdown ol, div.main .content .markdown ol,
section.main .content .markdown dl { div.main .content .markdown dl {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
section.main .content .markdown dt { div.main .content .markdown dt {
font-weight: bold; font-weight: bold;
} }
section.main .content .markdown dd { div.main .content .markdown dd {
margin-bottom: .5rem; margin-bottom: .5rem;
} }
section.main .content .markdown ul { div.main .content .markdown ul {
list-style-type: disc; list-style-type: disc;
list-style-position: outside; list-style-position: outside;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
section.main .content .markdown ol { div.main .content .markdown ol {
list-style-type: decimal; list-style-type: decimal;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
section.main .content .markdown li { div.main .content .markdown li {
margin-left: 2em; margin-left: 2em;
} }
section.main .content .markdown em { div.main .content .markdown em {
font-style: italic; font-style: italic;
} }
section.main .content .markdown strong { div.main .content .markdown strong {
font-weight: 700; font-weight: 700;
} }
section.main .content .markdown hr { div.main .content .markdown hr {
position: relative; position: relative;
margin: 1.75rem 0; margin: 1.75rem 0;
border: 0; border: 0;
border-top: 1px solid #808080; border-top: 1px solid #808080;
border-top: 1px solid #999999; border-top: 1px solid #999999;
} }
section.main .content .markdown abbr { div.main .content .markdown abbr {
font-size: 0.85rem; font-size: 0.85rem;
font-weight: bold; font-weight: bold;
color: #666666; color: #666666;
text-transform: uppercase; text-transform: uppercase;
} }
section.main .content .markdown abbr[title] { div.main .content .markdown abbr[title] {
cursor: help; cursor: help;
border-bottom: 1px dotted #808080; border-bottom: 1px dotted #808080;
} }
section.main .content .markdown blockquote { div.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 { div.main .content .markdown blockquote p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
section.main .content .markdown figure { div.main .content .markdown figure {
width: 100%; width: 100%;
background: #fff; background: #fff;
margin-bottom: 1em; margin-bottom: 1em;
} }
section.main .content .markdown figure img { div.main .content .markdown figure img {
width: 100%; width: 100%;
height: auto; height: auto;
max-width: 100%; max-width: 100%;
@@ -584,32 +600,32 @@ section.main .content .markdown figure img {
position: static; position: static;
margin: auto; margin: auto;
} }
section.main .content .markdown table { div.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, div.main .content .markdown td,
section.main .content .markdown th { div.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, div.main .content .markdown tbody tr:nth-child(odd) td,
section.main .content .markdown tbody tr:nth-child(odd) th { div.main .content .markdown tbody tr:nth-child(odd) th {
background-color: #f7f7f7; background-color: #f7f7f7;
} }
section.main .content .markdown .footnotes ol { div.main .content .markdown .footnotes ol {
list-style-type: decimal; list-style-type: decimal;
margin-left: 16px; margin-left: 16px;
} }
section.main .content .markdown .footnotes li { div.main .content .markdown .footnotes li {
list-style-type: unset; list-style-type: unset;
} }
section.main .content .markdown .footnote-ref { div.main .content .markdown .footnote-ref {
font-size: 0.7em; font-size: 0.7em;
} }
section.main .content .navigation { div.main .content .navigation {
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -625,7 +641,7 @@ section.main .content .navigation {
align-items: center; align-items: center;
padding: 2em; padding: 2em;
} }
section.main .content .navigation div { div.main .content .navigation div {
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -641,18 +657,18 @@ section.main .content .navigation div {
align-items: center; align-items: center;
margin-top: 1em; margin-top: 1em;
} }
section.main .content .navigation .icon { div.main .content .navigation .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
section.main .content .navigation a { div.main .content .navigation a {
width: 250px; width: 250px;
margin: 0 1em; margin: 0 1em;
text-align: center; text-align: center;
font-style: italic; font-style: italic;
color: #313537; color: #313537;
} }
section.main .content .share, section.main .content .share div { div.main .content .share, div.main .content .share div {
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
display: -ms-flexbox; display: -ms-flexbox;
@@ -668,34 +684,34 @@ section.main .content .share, section.main .content .share div {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
section.main .content .share { div.main .content .share {
background-color: rgba(152, 152, 152, 0.07); background-color: rgba(152, 152, 152, 0.07);
padding: 1em 0; padding: 1em 0;
} }
section.main .content .share a { div.main .content .share a {
margin: 0 6px; margin: 0 6px;
} }
/* Fonts */ /* Fonts */
.wf-raleway-n4-active body, .wf-raleway-n4-active body,
.wf-raleway-n4-active section.header nav ul li, .wf-raleway-n4-active div.header nav ul a,
.wf-raleway-n7-active section.main .content .page-heading, .wf-raleway-n7-active div.main .content .page-heading,
.wf-raleway-n2-active section.main .container.f04 .content .num, .wf-raleway-n2-active div.main .container.f04 .content .num,
.wf-raleway-n7-active section.main .content .markdown h1, .wf-raleway-n7-active div.main .content .markdown h1,
.wf-raleway-n7-active section.main .content .markdown h2, .wf-raleway-n7-active div.main .content .markdown h2,
.wf-raleway-n7-active section.main .content .markdown h3, .wf-raleway-n7-active div.main .content .markdown h3,
.wf-raleway-n7-active section.main .content .markdown h4, .wf-raleway-n7-active div.main .content .markdown h4,
.wf-raleway-n7-active section.main .content .markdown h5, .wf-raleway-n7-active div.main .content .markdown h5,
.wf-raleway-n7-active section.main .content .markdown h6 { .wf-raleway-n7-active div.main .content .markdown h6 {
font-family: 'Raleway'; font-family: 'Raleway';
} }
.wf-merriweather-n3-active section.main .content .markdown { .wf-merriweather-n3-active div.main .content .markdown {
font-family: 'Merriweather'; font-family: 'Merriweather';
} }
.wf-ubuntu-mono-n4-active section.main .content .markdown code, .wf-ubuntu-mono-n4-active div.main .content .markdown code,
.wf-ubuntu-mono-n4-active section.main .content .markdown pre { .wf-ubuntu-mono-n4-active div.main .content .markdown pre {
font-family: 'Ubuntu Mono'; font-family: 'Ubuntu Mono';
} }

80
layouts/partials/css/min600px.css
View File

@@ -13,133 +13,139 @@ margin-left: 100px;
margin-right: 100px; margin-right: 100px;
max-width: 750px; max-width: 750px;
} }
section.header { div.column {
padding: 0 16px;
margin-left: 100px;
margin-right: 100px;
max-width: 750px;
}
div.header {
background-color: transparent; background-color: transparent;
} }
section.header .container { div.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 .container .logo { div.header .container .logo {
margin: 0; margin: 0;
} }
section.header-home .container .logo { div.header-home .container .logo {
max-width: 180px; max-width: 180px;
margin-left: 20px; margin-left: 20px;
} }
section.header-home .name-home { div.header-home .name-home {
padding-top: 30px; padding-top: 30px;
font-size: 40px; font-size: 40px;
} }
section.header-home nav ul li { div.header-home nav ul a {
font-size: 18px; font-size: 18px;
} }
section.header .content { div.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 { div.header .name {
color: #333333; color: #333333;
} }
section.header nav { div.header nav {
font-size: 14px; font-size: 14px;
margin-bottom: 0; margin-bottom: 0;
} }
section.header nav ul { div.header nav ul {
text-align: left; text-align: left;
} }
section.header nav ul li { div.header nav ul a {
color: #666666; color: #666666;
} }
section.header nav ul li:hover { div.header nav ul a:hover {
color: #333333; color: #333333;
} }
section.footer { div.footer {
background-color: transparent; background-color: transparent;
} }
section.footer .container { div.footer .container {
flex-direction: row; flex-direction: row;
} }
section.footer .container a { div.footer .container a {
margin-left: 3px; margin-left: 3px;
margin-right: 3px; margin-right: 3px;
color: #666666; color: #666666;
} }
section.footer .container a:hover { div.footer .container a:hover {
color: #333333; color: #333333;
} }
section.footer .container a .icon { div.footer .container a .icon {
font-size: 18px; font-size: 18px;
} }
section.footer .container a .icon.larger { div.footer .container a .icon.larger {
font-size: 20px; font-size: 20px;
} }
section.main .content .front-matter .date, div.main .content .front-matter .date,
section.main .content .front-matter .author, div.main .content .front-matter .author,
section.main .content .front-matter .tags, div.main .content .front-matter .tags,
section.main .content .front-matter .word-count, div.main .content .front-matter .word-count,
section.main .content .front-matter .reading-time .middot { div.main .content .front-matter .middot:before {
display: initial; display: initial;
} }
section.main .container.f04 { div.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 { div.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 { div.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 { div.main .container.f04 .content .detail {
margin-bottom: 30px; margin-bottom: 30px;
} }
.container { .container {
padding: 0 30px; padding: 0 30px;
} }
section.header { div.header {
padding-top: 60px; padding-top: 60px;
padding-bottom: 60px; padding-bottom: 60px;
} }
section.footer { div.footer {
padding-top: 30px; padding-top: 30px;
padding-bottom: 60px; padding-bottom: 60px;
} }
section.main { div.main {
padding-top: 0; padding-top: 0;
} }
section.main .container .content .post-item { div.main .container .content .post-item {
display: flex; display: flex;
list-style: none; list-style: none;
padding-left: 1.5em; padding-left: 1.5em;
} }
section.main .container .content .post-item .meta { div.main .container .content .post-item .meta {
display: block; display: block;
} }
section.main.post { div.main.post {
padding-top: 60px; padding-top: 60px;
padding-bottom: 60px; padding-bottom: 60px;
} }
section.main .content .markdown blockquote { div.main .content .markdown blockquote {
padding-right: 5rem; padding-right: 5rem;
padding-left: 1.25rem; padding-left: 1.25rem;
} }
section.main .content .navigation { div.main .content .navigation {
-webkit-flex-direction: row; -webkit-flex-direction: row;
-moz-flex-direction: row; -moz-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; flex-direction: row;
} }
section.main .content .navigation div { div.main .content .navigation div {
margin-top: 0em; margin-top: 0em;
} }

8
layouts/partials/css/min769px.css
View File

@@ -1,13 +1,13 @@
section.main .content .markdown figure { div.main .content .markdown figure {
width: 110%; width: 110%;
margin-left: -4%; margin-left: -4%;
} }
section.main .content .markdown img { div.main .content .markdown img {
max-width: 110%; max-width: 110%;
width: 110%; width: 110%;
margin-left: -4%; margin-left: -4%;
} }
section.main .content .markdown pre { div.main .content .markdown pre {
width: 110%; width: 110%;
margin-left: -4%; margin-left: -4%;
} }

4
layouts/partials/footer.html
View File

@@ -1,4 +1,4 @@
<section class="footer"> <div class="footer column">
<div class="container"> <div class="container">
{{ if .Site.Params.githubRepo }} {{ if .Site.Params.githubRepo }}
@@ -58,7 +58,7 @@
</div> </div>
</div> </div>
</section> </div>
{{ partial "footer_scripts" . }} {{ partial "footer_scripts" . }}

12
layouts/partials/header.html
View File

@@ -6,9 +6,9 @@
<body> <body>
{{ if or (.Site.Params.small_banner_logo) (.IsPage) }} {{ if or (.Site.Params.small_banner_logo) (.IsPage) }}
<section class="header"> <div class="header column">
{{ else }} {{ else }}
<section class="header header-home"> <div class="header header-home column">
{{ end }} {{ end }}
<div class="container"> <div class="container">
<a href="{{ .Site.BaseURL }}"><img class="logo" src="{{ .Site.Params.logofile | absURL }}" alt="logo" /></a> <a href="{{ .Site.BaseURL }}"><img class="logo" src="{{ .Site.Params.logofile | absURL }}" alt="logo" /></a>
@@ -17,22 +17,22 @@
<nav> <nav>
<ul> <ul>
{{ if ne (len (where .Site.RegularPages "Section" "blog")) 0 }} {{ if ne (len (where .Site.RegularPages "Section" "blog")) 0 }}
<a href="{{ .Site.BaseURL }}blog/"><li>Blog</li></a> <li><a href="{{ .Site.BaseURL }}blog/">Blog</a></li>
{{ end }} {{ end }}
{{ range $.Site.Home.Sections }} {{ range $.Site.Home.Sections }}
{{ range first 1 (where .Pages "Section" "ne" "")}} {{ range first 1 (where .Pages "Section" "ne" "")}}
{{ if ne .Section "blog"}} {{ if ne .Section "blog"}}
<a href="{{ .Section | urlize | absURL }}"><li>{{ .Section }}</li></a> <li><a href="{{ .Section | urlize | absURL }}">{{ .Section }}</a></li>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ range where .Site.RegularPages "Section" ""}} {{ range where .Site.RegularPages "Section" ""}}
{{ if and (ne .Title "License") (ne .Title "Home")}} {{ if and (ne .Title "License") (ne .Title "Home")}}
<a href="{{ .Permalink }}"><li>{{ .Title }}</li></a> <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }} {{ end }}
{{ end }} {{ end }}
</ul> </ul>
</nav> </nav>
</div> </div>
</div> </div>
</section> </div>

3
layouts/partials/meta.html
View File

@@ -1,5 +1,4 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="HandheldFriendly" content="True"> <meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"> <meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -23,4 +22,4 @@
<meta property="twitter:card" content="summary"> <meta property="twitter:card" content="summary">
{{ end }} {{ end }}
<meta property="og:description" content="{{ if .IsHome }}{{ .Site.Params.description }}{{ else if .IsPage }}{{ .Description }}{{ end }}"> <meta property="og:description" content="{{ if .IsHome }}{{ .Site.Params.description }}{{ else if .IsPage }}{{ .Description }}{{ end }}">
<meta property="twitter:description" content="{{ if .IsHome }}{{ .Site.Params.description }}{{ else if .IsPage }}{{ .Description }}{{ end }}"> <meta property="twitter:description" content="{{ if .IsHome }}{{ .Site.Params.description }}{{ else if .IsPage }}{{ .Description }}{{ end }}">

4
layouts/section/blog.html
View File

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