Initial AD port

themes/after-dark/docs/content/feature/featured-posts.md

@@ -0,0 +1,62 @@
++++
+title = "Featured Posts"
+description = "Display your favorite blog posts front-and-center."
+categories = ["navigation"]
+tags = ["seo", "retention", "layout", "templating", "style"]
+features = ["code highlighter", "snippets", "related content"]
+[[copyright]]
+  owner = "Josh Habdas"
+  date = "2019"
+  license = "agpl-3.0-or-later"
++++
+
+After Dark helps you showcase your favorite blog posts by allowing you to easily specify a set of pages to appear first in post listings using only site config.
+
+{{< hackcss-alert >}}
+{{< figure
+  src="/images/screenshots/feature-featured-posts-fs8.png"
+>}}
+{{< /hackcss-alert >}}
+
+Use featured posts to drive more traffic to your highest value pages, increase the visibility of niche content or target pages for additional inbound links.
+
+Adjust featured posts from {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} by adding:
+
+```toml
+[params.layout.post.featured]
+  limit = 3
+  items = [
+    "borg-backup-minio-scaleway",
+    "dual-boot-manjaro-mojave-macbook-pro",
+    "surfing-uncensorable-web",
+    "encrypted-internet-wireguard-manjaro-linux"
+  ]
+```
+
+Modify `items` using the {{< external "https://gohugo.io/content-management/organization#slug" "page slugs" />}} from your posts and adjust the featured `limit` to the total number of items you wish to display. Like [Custom Homepage](../custom-homepage/) and [Related Content](../related-content/) performance-optimized thumbnail images will appear automatically when a post contains a [Post Image](../post-images/) with `thumbnail` in the name.
+
+Optionally, customize thumbnail styling using [Custom Styles](../custom-styles/):
+
+```css
+ul.thumbnail.grid li a:hover figure {
+  filter: initial;
+}
+ul.thumbnail.grid li a figure {
+  position: relative;
+  line-height: 0;
+  margin-bottom: 8px;
+}
+ul.thumbnail.grid li a:hover figure::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(
+    circle,
+    rgba(0,0,0,0.1) 0,
+    rgba(0,0,0,0.3) 100%
+  );
+}
+```