Desaturate logo colors

assets/sass/components/_home.scss

@@ -0,0 +1,9 @@
+.home__about,
+.home__photos,
+.home__blog {
+  margin-top: 8vmin;
+}
+
+.home__more {
+  text-align: right;
+}

assets/sass/components/_logo.scss

@@ -0,0 +1,29 @@
+$_desaturate_amount: 35%;
+
+$_color_1: desaturate(#ff6800, $_desaturate_amount);
+$_color_2: desaturate(#e8ff00, $_desaturate_amount);
+$_color_3: desaturate(#00a9ff, $_desaturate_amount);
+$_color_4: desaturate(#b346e2, $_desaturate_amount);
+
+.logo__wrapper {
+  width: 7rem;
+  line-height: 0;
+  margin-bottom: 1em;
+}
+
+.logo__color_1 {
+  fill: $_color_1;
+}
+
+.logo__color_2 {
+  fill: $_color_2;
+}
+
+.logo__color_3 {
+  fill: $_color_3;
+}
+
+.logo__color_4 {
+  fill: $_color_4;
+}
+

assets/sass/components/_post.scss

@@ -1,6 +1,7 @@
 .post {
   border-bottom: 1px dashed $border-color;
-  padding: 1.5em $pad-min;
+  margin-top: 2em;
+  padding-bottom: 1.5em;
 
   img {
     max-width: 100%;

assets/sass/components/_site-header.scss

@@ -6,3 +6,11 @@
     border-bottom: 1px dashed $text-color-dark;
   }
 }
+
+.site-header__container {
+  @include container;
+}
+
+.site-header__home-link {
+  color: inherit;
+}

assets/sass/elements/_blockquote.scss

@@ -1,4 +1,5 @@
 blockquote {
   padding-left: 2rem;
   border-left: 3px solid $text-color-light;
+  margin: 1em 0;
 }

assets/sass/main.scss

@@ -28,14 +28,17 @@
 // 5. Objects – class-based selectors which define undecorated design patterns,
 //    for example media object known from OOCSS
 @import "objects/container";
+@import "objects/outer";
 
 // 6. Components – specific UI components.
 //    This is where majority of our work takes place and our UI components
 //    are often composed of Objects and Components
 @import "components/site-header";
+@import "components/home";
 @import "components/posts";
 @import "components/post";
 @import "components/photos";
+@import "components/logo";
 
 // 7. Utilities – utilities and helper classes with ability to override
 //    anything which goes before in the triangle, eg. hide helper class

assets/sass/objects/_outer.scss

@@ -0,0 +1,3 @@
+.outer {
+  padding: 0 $pad-min;
+}

content/_index.md

@@ -0,0 +1,7 @@
+---
+date: '2019-10-16'
+---
+
+Hi, my name is Dan Barber. I’m a web designer and developer in New York.
+I design and build standards compliant websites that are simple, usable and
+attractive using open source software technologies.

layouts/home.html

@@ -1,3 +0,0 @@
-{{ define "main" }}
-  <h1>Foo</h1>
-{{ end }}

layouts/index.html

@@ -0,0 +1,45 @@
+{{ define "main" }}
+  <section class="home__about outer">
+    <article class="container">
+      {{ .Content }}
+    </article>
+  </section>
+
+  <section class="home__photos outer">
+    <article class="container">
+      <header>
+        <h2>Latest Photos</h2>
+      </header>
+
+      <div class="photos__container">
+        {{ range first 3 (where .Site.RegularPages "Section" "photos") }}
+          <article class="photos__thumb-container">
+            {{ partial "photo_thumb.html" . }}
+          </article>
+        {{ end }}
+      </div>
+
+      <footer class="home__more">
+        <p><a href="/photos">All Photos →</a></p>
+      </footer>
+    </article>
+  </section>
+
+  <section class="home__blog">
+    <article>
+      <header class="outer">
+        <div class="container">
+          <h2>From the Blog</h2>
+        </div>
+      </header>
+
+      {{ range first 3 (where .Site.RegularPages "Section" "blog") }}
+        {{ partial "blog_post_summary.html" . }}
+      {{ end }}
+
+      <footer class="container home__more">
+        <p><a href="/blog">More →</a></p>
+      </footer>
+    </article>
+  </section>
+{{ end }}

layouts/partials/blog_post_summary.html

@@ -0,0 +1,17 @@
+<article class="post outer">
+  <header>
+    <div class="container">
+      <h3 class="post__title"><a href="{{.Permalink}}">{{.Title}}</a></h3>
+
+      <p class="post__date">{{.Date.Format "Jan 2, 2006"}}</p>
+    </div>
+  </header>
+
+  {{ if .Truncated }}
+    {{.Summary}}
+
+    <p class="post__read-more"><a href="{{.Permalink}}">Read on →</a></p>
+  {{ else }}
+    {{.Content}}
+  {{ end }}
+</article>

layouts/partials/header.html

@@ -1,5 +1,7 @@
 <header class="site-header" role="banner">
-  <div class="container">
-    <h1>{{.Site.Title}}</h1>
+  <div class="site-header__container">
+    <h1 class="logo__wrapper">
+      <a class="site-header__home-link" href="/">{{ partial "logo.svg" . }}</a>
+    </h1>
   </div>
 </header>

layouts/section/blog.html

@@ -1,22 +1,8 @@
 {{ define "main" }}
   <section class="posts">
-  {{ range .Paginator.Pages }}
-    <article class="post">
-      <header>
-        <h3 class="post__title"><a href="{{.Permalink}}">{{.Title}}</a></h3>
-
-        <p class="post__date">{{.Date.Format "Jan 2, 2006"}}</p>
-      </header>
-
-      {{ if .Truncated }}
-        {{.Summary}}
-
-        <p class="post__read-more"><a href="{{.Permalink}}">Read on →</a></p>
-      {{ else }}
-        {{.Content}}
-      {{ end }}
-    </article>
-  {{ end }}
+    {{ range .Paginator.Pages }}
+      {{ partial "blog_post_summary.html" . }}
+    {{ end }}
   </section>
 
   <section class="posts__pagination">

resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -324,7 +324,8 @@ a {
 
 blockquote {
   padding-left: 2rem;
-  border-left: 3px solid #a6a6a6; }
+  border-left: 3px solid #a6a6a6;
+  margin: 1em 0; }
 
 figure {
   margin: 1em 0; }
@@ -369,6 +370,9 @@ pre {
   margin-right: auto;
   max-width: 40rem; }
 
+.outer {
+  padding: 0 6.5%; }
+
 .site-header {
   padding: 0 6.5%;
   border-bottom: 1px dashed #333; }
@@ -376,6 +380,22 @@ pre {
     .site-header {
       border-bottom: 1px dashed #ddd; } }
 
+.site-header__container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 40rem; }
+
+.site-header__home-link {
+  color: inherit; }
+
+.home__about,
+.home__photos,
+.home__blog {
+  margin-top: 8vmin; }
+
+.home__more {
+  text-align: right; }
+
 .posts__pagination {
   padding: 1em 6.5%; }
 
@@ -394,7 +414,8 @@ pre {
 
 .post {
   border-bottom: 1px dashed #ccc;
-  padding: 1.5em 6.5%; }
+  margin-top: 2em;
+  padding-bottom: 1.5em; }
   .post img {
     max-width: 100%; }
   .post > * {
@@ -431,3 +452,20 @@ pre {
 .photos__thumb {
   border-radius: 0.25rem;
   width: 100%; }
+
+.logo__wrapper {
+  width: 7rem;
+  line-height: 0;
+  margin-bottom: 1em; }
+
+.logo__color_1 {
+  fill: #d2702d; }
+
+.logo__color_2 {
+  fill: #c3d22d; }
+
+.logo__color_3 {
+  fill: #2d9ad2; }
+
+.logo__color_4 {
+  fill: #a46bbd; }

scripts/fix_images

@@ -0,0 +1,24 @@
+#!/usr/bin/env ruby
+
+require "date"
+require "fileutils"
+require "front_matter_parser"
+
+unsafe_yaml_loader = ->(string) { YAML.load(string) }
+
+Dir.glob("content/photos/**/*.md").each do |file|
+  parsed_file = FrontMatterParser::Parser.
+    parse_file(file, loader: unsafe_yaml_loader)
+
+  image = parsed_file["image"].split("/").last
+
+  new_content = <<~CONTENT
+    #{parsed_file.front_matter.merge("image" => image).to_yaml}---
+
+    #{parsed_file.content}
+  CONTENT
+
+  File.open(file, "w") do |new_file|
+    new_file.write(new_content)
+  end
+end