steve-for-jekyll 1.0.3 → 1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 30db961533c03e5fc57450d2c60ed9bfb0eb0fb2db2458fe18d1feb6bfd6c7d9
-  data.tar.gz: 8a5ca288b685b1615a4a81533d3133529053230375d423df62c5c39465b3f4ea
+  metadata.gz: 4c837ff93e1e9855f712da1f580559ef04530333c4c63e9a3bb37042c6d8cee4
+  data.tar.gz: 66c3123e4f2e17afb3b89527c5aa7660e36e7061f957b1d362277634b944f7c8
 SHA512:
-  metadata.gz: 8eb77604f98315bccef6cc7a5ed5ebcceebfdcb247d95ff252dabc317a6cbcd11b79b3715de976ac728962835360a34eef889a57d0706a42219eec80152bf2b5
-  data.tar.gz: 9e72a82ba9e616b20310c69748bf61b173caeed4fa856fb87a2bae4c39ee8f4bef6f46c27744a472242676ded7205352561bea9fe8117d0b557a37217b4e46b2
+  metadata.gz: d0e4cb6d03cd8f10500dd0b154e5887d122bfd191c738f9831e9b2f74c0d0cd90729fe68bc623c15d7ca5f3be559c2f099e26e395cd7d05d80929e5788e5c3fd
+  data.tar.gz: 8d74ce76512ce06fbe249c2b09d793ae1617de1068c35d8fe4290ac6e8c831c0a6e498d39ab20d15b997b27e6f5f2999e9eaf15b4ed37d3a9cec0fe0943fcff7

data/README.md

@@ -177,9 +177,51 @@ Steve uses the following Jekyll plugins to create sitemaps, RSS feeds, archives
 - [jekyll-sitemap](https://github.com/jekyll/jekyll-sitemap) — generates the XML sitemap.
 - [jekyll-paginate](https://github.com/jekyll/jekyll-paginate) — paginates the home post list.
 - [jekyll-archives](https://github.com/jekyll/jekyll-archives) — generates the archives by date, tag and category.
+- [jekyll-loading-lazy](https://github.com/gildesmarais/jekyll-loading-lazy) — adds `loading="lazy"` to all images and frames on your pages and posts.
 
 While Steve sets initial configurations for these plugins, you may want to change them in your `_config.yml`. Please refer to these plugins documentations for further reading about how to change their config options.
 
+### Comments
+
+Steve supports [Staticman](https://staticman.net)-powered comments, and provides initial settings from our own `staticman.yml` config file. You can create your own settings at any time, but keep in mind that Steve looks for the following fields when submitting comments:
+
+- `name`
+- `email`
+- `website`
+- `message`
+
+[Follow these instructions](https://staticman.net/docs/getting-started.html) to set up your Staticman instance.
+
+You can also customize your comments' section and submit form adding the `site.comments` object in your `_config.yml`:
+
+```yaml
+comments:
+  title: Comments
+  form_title: New Comment
+  date_format: "%b %e, %Y @ %l:%M %P"
+  staticman_endpoint: # Get yours on <https://staticman.net>
+  notice: |+ # Accepts Markdown
+    Please be nice in the comments.
+
+    Comments are moderated, so it can take a while for your's to show up.
+
+    Also, you can use [Markdown](https://daringfireball.net/projects/markdown).
+  fields:
+    name:
+      label: Name
+      placeholder: "John Appleseed"
+    email:
+      label: Email address
+      placeholder: "your@email.net"
+    website:
+      label: Website
+      placeholder: "https://john.blog/"
+    message:
+      label: Message
+      placeholder: Your comment message
+    submit: Submit Comment
+```
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at <https://github.com/esporo/steve>. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.

data/_config.yml

@@ -1,70 +1,96 @@
-# Site info
-title: Steve for Jekyll
-tagline: Charming and fun blog theme.
-description: Steve is a charming and fun blog theme for Jekyll websites.
-
-email: steve-support@esporo.net
-
-lang: en
-
-url: ""
-baseurl: "/steve/"
-
-# Theme settings
-steve:
-  intensedebate_account: # get one at <https://intensedebate.com/install>
-  archives: # Prefixes used with archive titles
-    date: Posts from
-    tag: More about…
-    category: Posts filed in
-  date_formats: # Uses <http://strftime.net>
-    post: "%b %e, %Y"
-    archives:
-      day: "%b %e, %Y"
-      month: "%b, %Y"
-      year: "%Y"
-  page_404: |+
-    The page you're looking for could not be found.
-
-    Maybe the search can help.
-  pagination:
-    next_page: "&laquo; Next"
-    prev_page: "Previous &raquo;"
-    prev_post: "Previous:"
-    next_post: "Next:"
-  post:
-    byline: "By"
-    tags: More about…
-  search:
-    label: Search this blog
-    placeholder: What you're looking for?
-    submit: Go!
-
-
-# Build settings
-markdown: kramdown
-permalink: "/:year/:month/:day/:title/"
-
-theme: steve-for-jekyll
-
-paginate: 6
-paginate_path: "/page/:num/"
-
-plugins:
-  - jekyll-feed
-  - jekyll-seo-tag
-  - jekyll-sitemap
-  - jekyll-paginate
-  - jekyll-archives
-
-# Plugin: jekyll-archives
-jekyll-archives:
-  enabled: all
-  layout: archive
-  slug_mode: default
-  permalinks:
-    day: "/:year/:month/:day/"
-    month: "/:year/:month/"
-    year: "/:year/"
-    category: "/:name/"
-    tag: "/tag/:name/"
+# Site info
+title: Steve for Jekyll
+tagline: Charming and fun blog theme.
+description: Steve is a charming and fun blog theme for Jekyll websites.
+
+email: steve-support@esporo.net
+
+lang: en
+
+url: ""
+baseurl: "/steve/"
+
+# Theme settings
+steve:
+  archives: # Prefixes used with archive titles
+    date: Posts from
+    tag: More about…
+    category: Posts filed in
+  date_formats: # Uses <http://strftime.net>
+    post: "%b %e, %Y"
+    archives:
+      day: "%b %e, %Y"
+      month: "%b, %Y"
+      year: "%Y"
+  page_404: |+
+    The page you're looking for could not be found.
+
+    Maybe the search can help.
+  pagination:
+    next_page: "&laquo; Next"
+    prev_page: "Previous &raquo;"
+    prev_post: "Previous:"
+    next_post: "Next:"
+  post:
+    byline: "By"
+    tags: More about…
+  search:
+    label: Search this blog
+    placeholder: What you're looking for?
+    submit: Go!
+
+# Comments Settings
+comments:
+  title: Comments
+  form_title: New Comment
+  date_format: "%b %e, %Y @ %l:%M %P"
+  staticman_endpoint: # Get yours on <https://staticman.net>
+  notice: |+
+    Please be nice in the comments.
+
+    Comments are moderated, so it can take a while for your's to show up.
+
+    Also, you can use [Markdown](https://daringfireball.net/projects/markdown).
+  fields:
+    name:
+      label: Name
+      placeholder: "John Appleseed"
+    email:
+      label: Email address
+      placeholder: "your@email.net"
+    website:
+      label: Website
+      placeholder: "https://john.blog/"
+    message:
+      label: Message
+      placeholder: Your comment message
+    submit: Submit Comment
+
+# Build settings
+markdown: kramdown
+permalink: "/:year/:month/:day/:title/"
+
+theme: steve-for-jekyll
+
+paginate: 6
+paginate_path: "/page/:num/"
+
+plugins:
+  - jekyll-feed
+  - jekyll-seo-tag
+  - jekyll-sitemap
+  - jekyll-paginate
+  - jekyll-archives
+  - jekyll-loading-lazy
+
+# Plugin: jekyll-archives
+jekyll-archives:
+  enabled: all
+  layout: archive
+  slug_mode: default
+  permalinks:
+    day: "/:year/:month/:day/"
+    month: "/:year/:month/"
+    year: "/:year/"
+    category: "/:name/"
+    tag: "/tag/:name/"

data/_includes/blog/post.html

@@ -1,43 +1,57 @@
-<article class="content post">
-  <header class="content-header">
-    {% if post.title != "" %}
-      <h2 class="content-title">
-        <a href="{{ post.url | relative_url }}" rel="bookmark">{{ post.title }}</a>
-      </h2>
-    {% endif %}
-
-    <div class="content-meta">
-      <a class="content-date" href="{{ post.url | relative_url }}" rel="bookmark">
-        <time datetime="{{ post.date | date_to_xmlschema }}">
-          {{ post.date | date: site.steve.date_formats.post }}
-        </time>
-      </a>
-
-      {% if post.author %}
-        {% assign author = site.data.authors[post.author] %}
-
-        {% if author.url %}
-          <a class="content-author" href="{{ author.url }}" rel="author">
-            {{ author.name }}
-          </a>
-        {% else %}
-          <a class="content-author" href="{{ post.author | prepend: 'https://twitter.com/' }}" rel="author">
-            {{ post.author }}
-          </a>
-        {% endif %}
-      {% endif %}
-    </div>
-  </header>
-
-  {% if post.image %}
-    <figure class="content-cover">
-      <img src="{{ post.image.url | default: post.image }}" alt="{{ post.image.alt | default: '' }}" />
-    </figure>
-  {% endif %}
-
-  {% unless include.full_post == false %}
-    <div class="content-body">
-      {{ post.content }}
-    </div>
-  {% endunless %}
-</article>
+<article class="content post">
+  <header class="content-header">
+    {% if post.category %}
+      <div class="content-meta">
+        {%- assign category_slug = post.category | slugify -%}
+        {%- assign category_url = site.jekyll-archives.permalinks.category -%}
+
+        <a
+          href="{{ category_url | replace: ':name', category_slug | relative_url }}"
+          rel="tag"
+        >
+          {{- post.category -}}
+        </a>
+      </div>
+    {% endif %}
+
+    {% if post.title != "" %}
+      <h2 class="content-title">
+        <a href="{{ post.url | relative_url }}" rel="bookmark">{{ post.title }}</a>
+      </h2>
+    {% endif %}
+
+    <div class="content-meta">
+      <a class="content-date" href="{{ post.url | relative_url }}" rel="bookmark">
+        <time datetime="{{ post.date | date_to_xmlschema }}">
+          {{ post.date | date: site.steve.date_formats.post }}
+        </time>
+      </a>
+
+      {% if post.author %}
+        {% assign author = site.data.authors[post.author] %}
+
+        {% if author.url %}
+          <a class="content-author" href="{{ author.url }}" rel="author">
+            {{ author.name }}
+          </a>
+        {% else %}
+          <a class="content-author" href="{{ post.author | prepend: 'https://twitter.com/' }}" rel="author">
+            {{ post.author }}
+          </a>
+        {% endif %}
+      {% endif %}
+    </div>
+  </header>
+
+  {% if post.image %}
+    <figure class="content-cover">
+      <img src="{{ post.image.url | default: post.image }}" alt="{{ post.image.alt | default: '' }}" />
+    </figure>
+  {% endif %}
+
+  {% unless include.full_post == false %}
+    <div class="content-body">
+      {{ post.content }}
+    </div>
+  {% endunless %}
+</article>

data/_includes/post/comment-form.html

@@ -0,0 +1,69 @@
+<form action="{{ site.comments.staticman_endpoint }}" method="post">
+  <h3 class="form-title">{{ site.comments.form_title }}</h3>
+
+  <div class="comments-notice">
+    {{ site.comments.notice | markdownify }}
+  </div>
+
+  <div class="comment-message-area">
+    <label for="comment_message" class="visually-hidden">
+      {{ site.comments.fields.message.label }}
+    </label>
+
+    <textarea
+      id="comment_message"
+      class="message-area"
+      name="fields[message]"
+      placeholder="{{ site.comments.fields.message.placeholder }}"
+      required
+    ></textarea>
+  </div>
+
+  <div class="comment-fields">
+    <label for="comment_name" class="visually-hidden">
+      {{ site.comments.fields.name.label }}
+    </label>
+
+    <input
+      type="text"
+      id="comment_name"
+      class="comment-field"
+      name="fields[name]"
+      placeholder="{{ site.comments.fields.name.placeholder }}"
+      required
+    />
+
+    <label for="comment_email" class="visually-hidden">
+      {{ site.comments.fields.email.label }}
+    </label>
+    <input
+      type="email"
+      id="comment_email"
+      class="comment-field"
+      name="fields[email]"
+      placeholder="{{ site.comments.fields.email.placeholder }}"
+      required
+    />
+
+    <label for="comment_website" class="visually-hidden">
+      {{ site.comments.fields.website.label }}
+    </label>
+    <input
+      type="url"
+      id="comment_website"
+      class="comment-field"
+      name="fields[website]"
+      placeholder="{{ site.comments.fields.website.placeholder }}"
+    />
+  </div>
+
+  <div class="comment-actions">
+    <button class="form-submit" type="submit">
+      {{ site.comments.fields.submit }}
+    </button>
+  </div>
+
+  <input type="hidden" name="options[redirect]" value="{{ page.url |
+  absolute_url }}#comments" />
+  <input type="hidden" name="options[slug]" value="{{ page.slug }}" />
+</form>

data/_includes/post/comments.html

@@ -0,0 +1,47 @@
+{% if site.data.comments[page.slug] or page.comments != false %}
+  <section id="comments" class="content">
+    <h2 class="comments-title">
+      {{ site.comments.title }}
+    </h2>
+
+    {% if site.data.comments[page.slug] %}
+      <ol class="comments-list">
+
+        {% assign comments = site.data.comments[page.slug] | sort: date %}
+
+        {% for comment_object in site.data.comments[page.slug] %}
+
+          {% assign comment = comment_object | last %}
+
+          <li class="comment-item">
+            <section class="comment">
+              <header class="comment-meta">
+                <img class="author-avatar" src="//www.gravatar.com/avatar/{{ comment.email }}?d=monsterid&s=64" alt="" />
+                <h5 class="author">
+                  {% if comment.website %}
+                    <a href="{{ comment.website }}" rel="author">
+                      {{ comment.name }}
+                    </a>
+                  {% else %}
+                    {{ comment.name }}
+                  {% endif %}
+                </h5>
+
+                <time class="comment-date">
+                  {{ comment.date | date: site.comments.date_format }}
+                </time>
+              </header>
+
+              <div class="comment-body">
+                {{ comment.message | markdownify }}
+              </div>
+            </section>
+          </li>
+        {% endfor %}
+
+      </ol>
+    {% endif %}
+
+    {% include post/comment-form.html %}
+  </section>
+{% endif %}

data/_layouts/post.html

@@ -4,10 +4,22 @@ layout: blog
 
 <article class="content post">
   <header class="content-header">
+    {% if page.category %}
+      <div class="content-meta">
+        {%- assign category_slug = page.category | slugify -%}
+        {%- assign category_url = site.jekyll-archives.permalinks.category -%}
+
+        <a
+          href="{{ category_url | replace: ':name', category_slug | relative_url }}"
+          rel="tag"
+        >
+          {{- page.category -}}
+        </a>
+      </div>
+    {% endif %}
+
     {% if page.title != "" %}
-      <h1 class="content-title">
-        {{ page.title }}
-      </h1>
+      <h1 class="content-title">{{ page.title }}</h1>
     {% endif %}
 
     <div class="content-meta">
@@ -25,7 +37,11 @@ layout: blog
             {{ author.name }}
           </a>
         {% else %}
-          <a class="content-author" href="{{ page.author | prepend: 'https://twitter.com/' }}" rel="author">
+          <a
+            class="content-author"
+            href="{{ page.author | prepend: 'https://twitter.com/' }}"
+            rel="author"
+          >
             {{ page.author }}
           </a>
         {% endif %}
@@ -34,9 +50,12 @@ layout: blog
   </header>
 
   {% if page.image %}
-  <fig[ure class="content-cover">
-    <img src="{{ page.image.url | default: page.image }}" alt="{{ page.image.alt | default: '' }}" />
-  </fi]gure>
+    <figure class="content-cover">
+      <img
+        src="{{ page.image.url | default: page.image }}"
+        alt="{{ page.image.alt | default: '' }}"
+      />
+    </figure>
   {% endif %}
 
   <div class="content-body">
@@ -49,44 +68,48 @@ layout: blog
 
       <ul class="content-tags">
         {% for tag in page.tags %}
-        <li>
-          {%- assign tag_slug = tag | slugify -%}
+          <li>
+            {%- assign tag_slug = tag | slugify -%}
+            {%- assign tag_url = site.jekyll-archives.permalinks.tag -%}
 
-          <a href="{{ site.jekyll-archives.permalinks.tag | replace: ':name', tag_slug | relative_url }}" rel="tag">
-            {{ tag }}
-          </a>
-        </li>
+            <a
+              href="{{ tag_url | replace: ':name', tag_slug | relative_url }}"
+              rel="tag"
+            >
+              {{- tag -}}
+            </a>
+          </li>
         {% endfor %}
       </ul>
     </footer>
   {% endif %}
 </article>
 
-{% if site.steve.intensedebate_account and page.comments != false %}
-  <section id="comments" class="content comments">
-      <script>
-        var idcomments_acct = "{{ site.steve.intensedebate_account }}";
-        var idcomments_post_id = "{{ post.date | date: "%s" }}";
-        var idcomments_post_url = "{{ post.url | absolute_url }}";
-      </script>
-      <span id="IDCommentsPostTitle" style="display:none"></span>
-      <script type='text/javascript' src='https://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>
-  </section>
-{% endif %}
+{% include post/comments.html %}
 
 {% if page.previous or page.next %}
   <nav class="content-navigation">
     {% if page.previous %}
-      <a class="nav-link prev-link" href="{{ page.previous.url | relative_url }}" rel="prev">
-        {{ site.steve.pagination.prev_post }} <strong>{{ page.previous.title }}</strong>
+      <a
+        class="nav-link prev-link"
+        href="{{ page.previous.url | relative_url }}"
+        rel="prev"
+      >
+        {{ site.steve.pagination.prev_post }}
+
+        <strong>{{ page.previous.title }}</strong>
       </a>
     {% endif %}
-
     {% if page.next %}
-      <a class="nav-link next-link" href="{{ page.next.url | relative_url }}" rel="next">
-        {{ site.steve.pagination.next_post }} <strong>{{ page.next.title }}</strong>
+      <a
+        class="nav-link next-link"
+        href="{{ page.next.url | relative_url }}"
+        rel="next"
+      >
+        {{ site.steve.pagination.next_post }}
+
+        <strong>{{ page.next.title }}</strong>
       </a>
     {% endif %}
   </nav>
 {% endif %}
-

data/_sass/steve/_base.scss

@@ -1,222 +1,269 @@
-/*
-  Resets
-*/
-
-body,
-h1, h2, h3, h4, h5, h6,
-p, blockquote, pre, hr,
-dl, dd, ol, ul, figure {
-  margin: 0;
-  padding: 0;
-}
-
-/*
-  Basic styling
-*/
-
-html {
-  font-size: 16px;
-}
-
-body {
-  background-color: var(--color-body);
-  font-family: var(--font);
-  line-height: 1.5;
-}
-
-/*
-  Text Elements
-*/
-
-.content-body {
-  p, pre, blockquote,
-  dl, ul, ol,
-  figure, iframe, table,
-  .highlight {
-    margin-bottom: var(--gap);
-  }
-}
-
-// Links
-a {
-  color: var(--color-link);
-  text-decoration: none;
-  transition: color 250ms ease;
-
-  &:hover,
-  &:focus {
-    color: var(--color-link-hover);
-    text-decoration: underline;
-  }
-}
-
-// Lists
-ul, ol {
-  margin-left: var(--gap);
-}
-
-dl {
-  dt + dd {
-    margin-bottom: calc(var(--gap) / 2);
-  }
-
-  dt + dd + dt {
-    margin-top: calc(var(--gap) / 2);
-  }
-}
-
-// Headings
-h1, h2, h3, h4, h5, h6 {
-  line-height: 1.2;
-  font-family: var(--font-headings);
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-h2 {
-  font-size: 1.5rem;
-}
-
-h3 {
-  font-size: 1.25rem;
-}
-
-h4 {
-  font-size: 1rem;
-}
-
-h5 {
-  font-size: 0.875rem;
-}
-
-h6 {
-  font-size: 0.75rem;
-}
-
-// Code
-pre {
-  max-width: 100%;
-  overflow-x: auto;
-}
-
-// Media
-img, iframe,
-video, audio {
-  max-width: 100%;
-  border-radius: 3px;
-  box-shadow: 0 2px 5px var(--color-details);
-}
-
-// Tables
-table {
-  border: 1px solid var(--color-details-lighter);
-  border-radius: 3px;
-  border-collapse: collapse;
-  color: var(--color-details-darker);
-  width: 100%;
-
-  th, td {
-    border-bottom: 1px solid var(--color-details-lighter);
-    padding: calc(var(--gap) / 4);
-    text-align: left;
-  }
-
-  th {
-    background: var(--color-details-lighter);
-  }
-}
-
-// Quotes
-
-blockquote {
-  border-left: 4px solid var(--color-details-lighter);
-  padding-left: calc(var(--gap) / 2);
-  padding-top: calc(var(--gap) / 4);
-  padding-bottom: calc(var(--gap) / 4);
-  font-style: italic;
-  color: var(--color-details-darker);
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-}
-
-// Horizontal rule
-hr {
-  width: 250px;
-  height: 3px;
-  margin: calc(var(--gap) * 2) auto;
-  background-color: var(--color-details-lighter);
-  border: none;
-  border-radius: 3px;
-}
-
-// Forms
-input[type="text"],
-input[type="email"],
-input[type="password"],
-input[type="search"],
-input[type="tel"],
-input[type="number"],
-input[type="color"],
-input[type="button"],
-input[type="reset"],
-input[type="submit"],
-textarea,
-button {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  background: var(--color-bg);
-  padding: 5px;
-  margin: 0;
-  font: inherit;
-}
-
-input[type="text"],
-input[type="email"],
-input[type="password"],
-input[type="search"],
-input[type="tel"],
-input[type="number"],
-input[type="color"],
-textarea {
-  border-bottom: 3px dashed var(--color-details-lighter);
-  transition: border-bottom-color 250ms ease;
-
-  &:hover,
-  &:focus {
-    outline: none;
-    border-bottom-color: var(--color-link);
-  }
-}
-
-input[type="button"],
-input[type="reset"],
-input[type="submit"],
-button {
-  box-shadow: inset 0 0 0 var(--color-details-lighter);
-  border-bottom: 3px solid var(--color-details-lighter);
-  color: var(--color-link);
-  transition-property: color, box-shadow, border-bottom-color;
-  transition-duration: 250ms;
-  transition-timing-function: ease;
-  padding-left: 10px;
-  padding-right: 10px;
-
-  &:hover,
-  &:focus {
-    cursor: pointer;
-    box-shadow: inset 0 -2.5em 0 var(--color-link);
-    border-bottom-color: var(--color-link-hover);
-    color: var(--color-details-lighter);
-  }
-
-  &:active {
-    box-shadow: inset 0 -2.5em 0 var(--color-link-hover);
-  }
-}
+/*
+  Resets
+*/
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+hr,
+dl,
+dd,
+ol,
+ul,
+figure {
+  margin: 0;
+  padding: 0;
+}
+
+/*
+  Basic styling
+*/
+
+html {
+  font-size: 16px;
+}
+
+body {
+  background-color: var(--color-body);
+  font-family: var(--font);
+  line-height: 1.5;
+}
+
+/*
+  Accessibility helpers
+*/
+.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}
+
+/*
+  Text Elements
+*/
+
+.content-body {
+  p,
+  pre,
+  blockquote,
+  dl,
+  ul,
+  ol,
+  figure,
+  iframe,
+  table,
+  .highlight {
+    margin-bottom: var(--gap);
+  }
+}
+
+// Links
+a {
+  color: var(--color-link);
+  text-decoration: none;
+  transition: color 250ms ease;
+
+  &:hover,
+  &:focus {
+    color: var(--color-link-hover);
+    text-decoration: underline;
+  }
+}
+
+// Lists
+ul,
+ol {
+  margin-left: var(--gap);
+
+  ul,
+  ol {
+    margin-bottom: 0;
+  }
+}
+
+dl {
+  dt + dd {
+    margin-bottom: calc(var(--gap) / 2);
+  }
+
+  dt + dd + dt {
+    margin-top: calc(var(--gap) / 2);
+  }
+}
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.2;
+  font-family: var(--font-headings);
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+h3 {
+  font-size: 1.25rem;
+}
+
+h4 {
+  font-size: 1rem;
+}
+
+h5 {
+  font-size: 0.875rem;
+}
+
+h6 {
+  font-size: 0.75rem;
+}
+
+// Code
+pre {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+// Media
+img,
+iframe,
+video,
+audio {
+  max-width: 100%;
+  border-radius: 3px;
+  box-shadow: 0 2px 5px var(--color-details);
+}
+
+// Tables
+table {
+  border: 1px solid var(--color-details-lighter);
+  border-radius: 3px;
+  border-collapse: collapse;
+  color: var(--color-details-darker);
+  width: 100%;
+
+  th,
+  td {
+    border-bottom: 1px solid var(--color-details-lighter);
+    padding: calc(var(--gap) / 4);
+    text-align: left;
+  }
+
+  th {
+    background: var(--color-details-lighter);
+  }
+}
+
+// Quotes
+
+blockquote {
+  border-left: 4px solid var(--color-details-lighter);
+  padding-left: calc(var(--gap) / 2);
+  padding-top: calc(var(--gap) / 4);
+  padding-bottom: calc(var(--gap) / 4);
+  font-style: italic;
+  color: var(--color-details-darker);
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Horizontal rule
+hr {
+  width: 250px;
+  height: 3px;
+  margin: calc(var(--gap) * 2) auto;
+  background-color: var(--color-details-lighter);
+  border: none;
+  border-radius: 3px;
+}
+
+// Forms
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="number"],
+input[type="color"],
+input[type="url"],
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+textarea,
+button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: var(--color-bg);
+  padding: 5px;
+  margin: 0;
+  font: inherit;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="number"],
+input[type="color"],
+input[type="url"],
+textarea {
+  border-bottom: 3px dashed var(--color-details-lighter);
+  transition: border-bottom-color 250ms ease;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    border-bottom-color: var(--color-link);
+  }
+}
+
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+button {
+  box-shadow: inset 0 0 0 var(--color-details-lighter);
+  border-bottom: 3px solid var(--color-details-lighter);
+  color: var(--color-link);
+  transition-property: color, box-shadow, border-bottom-color;
+  transition-duration: 250ms;
+  transition-timing-function: ease;
+  padding-left: 10px;
+  padding-right: 10px;
+
+  &:hover,
+  &:focus {
+    cursor: pointer;
+    box-shadow: inset 0 -2.5em 0 var(--color-link);
+    border-bottom-color: var(--color-link-hover);
+    color: var(--color-details-lighter);
+  }
+
+  &:active {
+    box-shadow: inset 0 -2.5em 0 var(--color-link-hover);
+  }
+}

data/_sass/steve/_layout.scss

@@ -352,6 +352,81 @@ label[for="search_terms"] {
   }
 }
 
+// Comments
+
+.comments-title {
+  margin-bottom: var(--gap);
+}
+
+.comments-notice {
+  margin-top: calc(var(--gap) / 2);
+  margin-bottom: calc(var(--gap) / 2);
+  color: var(--color-details-darker);
+}
+
+.comments-list {
+  list-style: none;
+  margin-left: 0;
+  margin-bottom: var(--gap);
+
+  .comment-item {
+    margin-bottom: var(--gap);
+    padding-bottom: var(--gap);
+    border-bottom: 3px dotted var(--color-details-lighter);
+  }
+}
+
+.comment {
+  font-size: 95%;
+
+  .comment-meta {
+    margin-bottom: 1rem;
+  }
+
+  .author-avatar {
+    width: 2.5rem;
+    border-radius: 5px;
+    box-shadow: 0 0 2px var(--color-details);
+    float: left;
+    margin-right: 1rem;
+  }
+
+  .comment-body > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.comment-message-area {
+  margin-bottom: calc(var(--gap) / 2);
+}
+
+.message-area {
+  width: 100%;
+  resize: vertical;
+}
+
+.comment-fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: calc(var(--gap) / 2);
+  margin-bottom: calc(var(--gap) / 2);
+
+  @media screen and (max-width: 800px) {
+    grid-template-columns: 1fr;
+    flex-flow: column nowrap;
+  }
+
+  input {
+    min-width: 0;
+    width: auto;
+  }
+}
+
+.comment-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
 /*
   Site Footer
 */

data/staticman.yml

@@ -0,0 +1,30 @@
+comments:
+  branch: main
+  commitMessage: "Adds comment via Staticman"
+  path: "_data/comments/{options.slug}"
+  filename: "comment-{@timestamp}"
+  format: yaml
+  moderation: true
+  allowedFields:
+    - name
+    - email
+    - website
+    - message
+  generatedFields:
+    date:
+      type: date
+      options:
+        format: timestamp-seconds
+  requiredFields:
+    - name
+    - email
+    - message
+  transforms:
+    email: md5
+  akismet:
+    enabled: true
+    author: name
+    authorEmail: email
+    authorUrl: website
+    content: message
+    type: comment

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: steve-for-jekyll
 version: !ruby/object:Gem::Version
-  version: 1.0.3
+  version: '1.2'
 platform: ruby
 authors:
 - Arthur Freitas
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-05-10 00:00:00.000000000 Z
+date: 2021-07-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.15.1
+        version: '0.15'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.15.1
+        version: '0.15'
 - !ruby/object:Gem::Dependency
   name: jekyll-seo-tag
   requirement: !ruby/object:Gem::Requirement
@@ -108,6 +108,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2.2'
+- !ruby/object:Gem::Dependency
+  name: jekyll-loading-lazy
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -142,6 +156,8 @@ files:
 - _includes/head.html
 - _includes/header.html
 - _includes/header/menu.html
+- _includes/post/comment-form.html
+- _includes/post/comments.html
 - _includes/search-form.html
 - _layouts/archive.html
 - _layouts/blog.html
@@ -155,6 +171,7 @@ files:
 - _sass/steve/_syntax.scss
 - assets/css/screen.scss
 - assets/js/responsive-videos.js
+- staticman.yml
 homepage: https://github.com/esporo/steve
 licenses:
 - MIT
@@ -174,7 +191,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.15
+rubygems_version: 3.2.21
 signing_key:
 specification_version: 4
 summary: A charming and fun Jekyll theme for blogs.