diff --git a/layouts/partials/header_only_narrow.html b/layouts/partials/header_only_narrow.html new file mode 100644 index 0000000..7a9d785 --- /dev/null +++ b/layouts/partials/header_only_narrow.html @@ -0,0 +1,64 @@ + + + +{{ partial "head.html" . }} + + + +
+
+
+ +
{{ .Site.Params.Author }}
 +
+
+
+ +
+
+
+ + {{ if .Site.Params.GitHub }} + + + + {{ end }} + + {{ if .Site.Params.Twitter }} + + + + {{ end }} + + {{ if .Site.Params.LinkedIn }} + + + + {{ end }} + + {{ if .Site.Params.Facebook }} + + + + {{ end }} + + {{ if .Site.Params.SoundCloud }} + + + + {{ end }} + + {{ if .Site.Params.Email }} + + + + {{ end }} +
+
+
diff --git a/layouts/partials/page-heading.html b/layouts/partials/page-heading.html index b1fcd61..b63caa4 100644 --- a/layouts/partials/page-heading.html +++ b/layouts/partials/page-heading.html @@ -5,4 +5,3 @@ {{ .Title }} {{ end }} - diff --git a/layouts/posts/single.html b/layouts/posts/single.html index a6674c8..0569ee9 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -1,18 +1,17 @@ - - - -{{ partial "head.html" . }} - - +{{ partial "header_only_narrow.html" . }}
- {{ partial "page-heading.html" . }} +
+
+ {{ if .Params.heading }}{{ .Params.heading }}{{ else }}{{ .Title }}{{ end }} +
+
{{ .Site.Params.Initials }}
+
{{ .Date.Format .Site.Params.DateForm }}
-
{{ if eq 1 .FuzzyWordCount }}{{ .FuzzyWordCount }} word{{ else }}{{ .FuzzyWordCount }} words{{ end }}
{{ if eq 1 .ReadingTime }}{{ .ReadingTime }} minute read{{ else }}{{ .ReadingTime }} minutes read{{ end }}
diff --git a/main.less b/main.less index 0e8bd6b..de07e7e 100644 --- a/main.less +++ b/main.less @@ -19,8 +19,11 @@ @black: #333; @gray: #b7b7b7; -@accent: #0096cc; -@black-background: @black; +@accent: #0096cc; // jasonlong.me blue +@background: #f7f7f7; +@compensated-black: #555; +@compensated-gray: #999; +@compensated-gray-hover: @gray; @white: #fefefe; @milk: #fefefe; @@ -170,7 +173,7 @@ body { // Header section .section.header { - background-color: @black-background; + background-color: @background; .container { .align-items(center); @@ -185,7 +188,7 @@ body { .name { .heading(); - color: @white; + color: @compensated-black; } nav { @@ -214,11 +217,11 @@ body { } ul li { - color: @milk; + color: @compensated-gray; .transition(~'color @{transition-speed-1} @{in-sine}'); &:hover { - color: @white + color: @compensated-gray-hover; } } } @@ -262,7 +265,7 @@ body { // Icons .section.icons { - background-color: @black-background; + background-color: @background; .container { .align-items(center); @@ -273,7 +276,7 @@ body { a { margin-left: 6px; margin-right: 6px; - color: @milk; + color: @compensated-gray; .transition(~'color @{transition-speed-1} @{in-sine}'); &:first-child { @@ -285,7 +288,7 @@ body { } &:hover { - color: @white; + color: @compensated-gray-hover; } .icon { diff --git a/static/css/main.css b/static/css/main.css index ea1ad3b..74a6f8d 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -150,7 +150,7 @@ body { } } .section.header { - background-color: #333333; + background-color: #f7f7f7; } .section.header .container { -webkit-align-items: center; @@ -187,7 +187,7 @@ body { -webkit-font-smoothing: antialiased; font-smoothing: antialiased; color: #333333; - color: #fefefe; + color: #555555; } .section.header nav { font-size: 13px; @@ -214,14 +214,14 @@ body { margin-right: 0; } .section.header nav ul li { - color: #fefefe; + color: #999999; -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); -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); } .section.header nav ul li:hover { - color: #fefefe; + color: #b7b7b7; } @media (min-width: 550px) { .section.header { @@ -257,7 +257,7 @@ body { } } .section.icons { - background-color: #333333; + background-color: #f7f7f7; } .section.icons .container { -webkit-align-items: center; @@ -272,7 +272,7 @@ body { .section.icons .content a { margin-left: 6px; margin-right: 6px; - color: #fefefe; + color: #999999; -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); -ms-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); @@ -285,7 +285,7 @@ body { margin-right: 0; } .section.icons .content a:hover { - color: #fefefe; + color: #b7b7b7; } .section.icons .content a .icon { font-size: 16px;