I'm building a personal site using Emacs, Org-mode, and Cloudflare Pages.
@@ -59,9 +245,9 @@ I'm building a personal site using Emacs, Org-mode, and Cloudfl+In this section you will find posts that are not as structured as the ones found in here. Mainly these will deal with findings, research, assorted writings and random bits and blobs. +
++This Zettelkasten method is growing in popularity for taking notes. Ever felt as though there's too much pieces of information but you don't know how to deal with it? This method solves exactly that problem and more. Think of it as forming a second brain, where you can jot down ideas and information whilst simultaneously being able to connect them together. +
+ ++The official website describes in detail exactly what the Zettelkasten method is, providing use cases and benefits to this method. The part I wanted to highlighted in this is the following paragraph, where the author depicts how this concept would be explained to someone unfamiliar with it: +
+ +++ ++A Zettelkasten is a personal tool for thinking and writing. It has hypertextual features to make a web of thoughts possible. The difference to other systems is that you create a web of thoughts instead of notes of arbitrary size and form, and emphasize connection, not a collection. +
+
+This web of thoughts is exactly what makes it useful, it takes on the seemingly cluttered mess of information and is able to link the nodes together to create something meaningful and useful. +
+ ++There are many personal knowledge management systems' (PKMS) out there that allow you to practice this method; the most common ones being Obsidian and Org Roam. After using Org Roam with Emacs for about a year or so, I realised how useful this method really is. A random idea can be jotted down and later connected to a bigger project or note system. The following picture below is a screenshot of a graph generated UI for all the nodes created in my Org Roam folder: +
+ + +
+
> LinkedIn: LinkedIn
@@ -55,7 +241,7 @@ Thanks for visiting!
This is a website built using Emacs Org-mode and published using org-publish.
org-publishorg-publish
This website is heavily inspired by some people who have decided to use org-publish as a way to convert org files into html. I came across a few that took the plunge and decided to migrate from platforms like Wordpress and instead opted for a more transparent, text-based workflow.
init.el file, which
-(setq org-publish-project-alist - '(("org-notes" - :base-directory "~/web" - :base-extension "org" - :publishing-directory "~/web" - :recursive t - :publishing-function org-html-publish-to-html - :with-author nil - :with-creator nil - :html-validation-link nil - :with-toc t - :section-numbers t - :html-head "<link rel=\"stylesheet\" href=\"style.css\" />" +(setq org-publish-project-alist + '(("org-notes" + :base-directory "~/web" + :base-extension "org" + :publishing-directory "~/web" + :recursive t + :publishing-function org-html-publish-to-html + :with-author nil + :with-creator nil + :html-validation-link nil + :with-toc t + :section-numbers t + :html-head "<link rel=\"stylesheet\" href=\"style.css\" />" ) - ("org-static" - :base-directory "~/web" - :base-extension "css\\|js\\|png\\|jpg\\|gif" - :publishing-directory "~/web/output" - :recursive t - :publishing-function org-publish-attachment) - ("website" :components ("org-notes" "org-static")))) + ("org-static" + :base-directory "~/web" + :base-extension "css\\|js\\|png\\|jpg\\|gif" + :publishing-directory "~/web/output" + :recursive t + :publishing-function org-publish-attachment) + ("website" :components ("org-notes" "org-static"))))
org-publish wha
#+TITLE: Website Name #+OPTIONS: toc:nil num:nil -#+HTML_HEAD: <link rel="stylesheet" href="style.css"> +#+HTML_HEAD: <link rel="stylesheet" href="style.css"> * Welcome! @@ -121,7 +309,7 @@ This will generate a html file inside the~/web/output/directory,-cd ~/web/output +cd ~/web/output python3 -m http.server 8000@@ -132,9 +320,9 @@ And there we go! The files are now being hosted onhttp://localhost:8000/<
Feel free to reach out on GitHub: https://github.com/zainezq
@@ -147,7 +335,7 @@ Feel free to reach out on GitHub: https://g
- block.appendChild(button);
-
- button.addEventListener("click", function () {
- const text = block.innerText.replace(button.innerText, ""); // exclude button text
- navigator.clipboard.writeText(text.trim()).then(() => {
- button.innerText = "Copied!";
- setTimeout(() => (button.innerText = "Copy"), 1500);
- });
- });
- });
-});
-
diff --git a/output/output/output/style.css b/output/output/output/style.css
deleted file mode 100644
index f49d1bd..0000000
--- a/output/output/output/style.css
+++ /dev/null
@@ -1,97 +0,0 @@
-:root {
- --bg: #ffffff;
- --fg: #000000;
- --link: #1a0dab;
- --heading: #004c99;
- --code-bg: #f0f0f0;
-}
-
-
-body {
- background-color: var(--bg);
- color: var(--fg);
- transition: background-color 0.3s, color 0.3s;
-}
-
-/* Headings (override org.css if needed) */
-h1, h2, h3 {
- color: var(--heading);
-}
-
-/* Links */
-a {
- color: var(--link);
-}
-a:hover {
- text-decoration: underline;
-}
-
-/* Copy button inside code blocks */
-.copy-btn {
- position: absolute;
- top: 0.4em;
- right: 0.4em;
- background-color: var(--code-bg);
- color: var(--heading);
- border: 1px solid var(--heading);
- border-radius: 4px;
- padding: 0.2em 0.6em;
- font-size: 0.8rem;
- cursor: pointer;
- z-index: 10;
- transition: background-color 0.3s;
-}
-
-.copy-btn:hover {
- background-color: var(--heading);
- color: var(--code-bg);
-}
-
-/* Nav styling */
-nav {
- border-radius: 6px;
- margin-bottom: 1rem;
- font-weight: 600;
- font-size: 1.1rem;
-}
-
-nav a {
- color: var(--link);
- text-decoration: none;
- font-weight: 600;
-}
-
-nav a:hover {
- text-decoration: underline;
-}
-
-/* Footer styling */
-footer {
- color: var(--fg);
- padding: 1rem;
- margin-top: 2rem;
- border-radius: 6px;
- text-align: center;
- font-size: 0.9rem;
- font-style: italic;
-
-}
-#updated {
- font-size: 0.8rem;
- color: var(--fg);
- margin-bottom: 1rem;
- font-style: italic;
-}
-pre.src::before {
- content: none !important;
-}
-/* Container: */
-pre.src {
- padding: 1.5em 1em 1em 1em; /* top padding leaves space for button */
- font-family: "Fira Mono", "Courier New", monospace;
- font-size: 0.9rem;
- line-height: 1.4;
- overflow-x: auto;
- white-space: pre-wrap; /* wrap long lines */
-
-}
diff --git a/output/output/script.js b/output/output/script.js
deleted file mode 100644
index e55bd2d..0000000
--- a/output/output/script.js
+++ /dev/null
@@ -1,21 +0,0 @@
-
-// COPY BUTTON:
-document.addEventListener("DOMContentLoaded", function () {
- document.querySelectorAll("pre.src").forEach(function (block) {
- const button = document.createElement("button");
- button.innerText = "Copy";
- button.className = "copy-btn";
-
- // Append button inside
- block.appendChild(button);
-
- button.addEventListener("click", function () {
- const text = block.innerText.replace(button.innerText, ""); // exclude button text
- navigator.clipboard.writeText(text.trim()).then(() => {
- button.innerText = "Copied!";
- setTimeout(() => (button.innerText = "Copy"), 1500);
- });
- });
- });
-});
-
diff --git a/output/output/style.css b/output/output/style.css
deleted file mode 100644
index f49d1bd..0000000
--- a/output/output/style.css
+++ /dev/null
@@ -1,97 +0,0 @@
-:root {
- --bg: #ffffff;
- --fg: #000000;
- --link: #1a0dab;
- --heading: #004c99;
- --code-bg: #f0f0f0;
-}
-
-
-body {
- background-color: var(--bg);
- color: var(--fg);
- transition: background-color 0.3s, color 0.3s;
-}
-
-/* Headings (override org.css if needed) */
-h1, h2, h3 {
- color: var(--heading);
-}
-
-/* Links */
-a {
- color: var(--link);
-}
-a:hover {
- text-decoration: underline;
-}
-
-/* Copy button inside code blocks */
-.copy-btn {
- position: absolute;
- top: 0.4em;
- right: 0.4em;
- background-color: var(--code-bg);
- color: var(--heading);
- border: 1px solid var(--heading);
- border-radius: 4px;
- padding: 0.2em 0.6em;
- font-size: 0.8rem;
- cursor: pointer;
- z-index: 10;
- transition: background-color 0.3s;
-}
-
-.copy-btn:hover {
- background-color: var(--heading);
- color: var(--code-bg);
-}
-
-/* Nav styling */
-nav {
- border-radius: 6px;
- margin-bottom: 1rem;
- font-weight: 600;
- font-size: 1.1rem;
-}
-
-nav a {
- color: var(--link);
- text-decoration: none;
- font-weight: 600;
-}
-
-nav a:hover {
- text-decoration: underline;
-}
-
-/* Footer styling */
-footer {
- color: var(--fg);
- padding: 1rem;
- margin-top: 2rem;
- border-radius: 6px;
- text-align: center;
- font-size: 0.9rem;
- font-style: italic;
-
-}
-#updated {
- font-size: 0.8rem;
- color: var(--fg);
- margin-bottom: 1rem;
- font-style: italic;
-}
-pre.src::before {
- content: none !important;
-}
-/* Container: */
-pre.src {
- padding: 1.5em 1em 1em 1em; /* top padding leaves space for button */
- font-family: "Fira Mono", "Courier New", monospace;
- font-size: 0.9rem;
- line-height: 1.4;
- overflow-x: auto;
- white-space: pre-wrap; /* wrap long lines */
-
-}
diff --git a/output/posts.html b/output/posts.html
index 38e9d61..c1e634d 100644
--- a/output/posts.html
+++ b/output/posts.html
@@ -7,6 +7,190 @@
Posts
+
@@ -15,25 +199,26 @@
Updated: 2025-08-06 Wed 21:03
Posts
-
-Links
-
+
+Links
+
-
-Posts Introduction intro
+
+Posts Introduction intro
-
-Zettelkasten Method education
-
+
+Zettelkasten Method education
+
@@ -47,7 +232,7 @@
Copyright © 2022-2025 Zaine Qayyum. All rights reserved unless otherwise noted.
diff --git a/output/posts/post-lists.html b/output/posts/post-lists.html
deleted file mode 100644
index f4910bb..0000000
--- a/output/posts/post-lists.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
-
-
-
-
-Posts List
-
-
-
-
-
-
-
-Updated: 2025-08-06 Wed 22:52
-
-
-Posts List
-
-
-
-
-
-
-
diff --git a/output/posts/posts-intro.html b/output/posts/posts-intro.html
index 2ea0b0b..862b7b0 100644
--- a/output/posts/posts-intro.html
+++ b/output/posts/posts-intro.html
@@ -3,31 +3,217 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
+
Posts Introduction
-
-
-
+
+
+
+
+
-Updated: 2025-08-06 Wed 21:11
+Updated: 2025-08-07 Thu 21:58
Posts Introduction
-
-Introduction
-
+
+Introduction
+
-In this section you will find posts related to both technical and non-technical topics. As Einstein said: “If you can’t explain it simply you don’t understand it well enough”, thus the goal with these posts is to develop the skill of being able to deliver habitual high quality explanations as well as reinforcing the topic learnt.
+In this section you will find posts related to both technical and non-technical topics. As Einstein said: “If you can’t explain it simply you don’t understand it well enough”, thus the goal with these posts is to develop the skill of being able to deliver habitual high quality explanations as well as reinforcing the topic(s) learnt.
@@ -61,10 +247,6 @@ I think the magic comes when you need to put words to things. It is quite easy t
The final line Putting things in words exposes that vagueness is profound in the context of learning. In the pursuit of any academic discipline, we're often confronted with vagueness. Yet, it’s often through explaining a concept to someone else, using your own words, analogies, and diagrams, that one ends up actually understanding it.
-
-
-
-
@@ -74,7 +256,7 @@ The final line Putting things in words exposes that vagueness is profound
Copyright © 2022-2025 Zaine Qayyum. All rights reserved unless otherwise noted.
diff --git a/output/posts/posts-list.html b/output/posts/posts-list.html
new file mode 100644
index 0000000..c062a29
--- /dev/null
+++ b/output/posts/posts-list.html
@@ -0,0 +1,232 @@
+
+
+
+
+
+
+
+Posts List
+
+
+
+
+
+
+
+
+
+
+Updated: 2025-08-07 Thu 22:36
+
+
+Posts List
+
+Posts:
+
+
+- Posts Introduction 2025-08-06 introduction
+
+
+
+
+
+
+
+
+
diff --git a/output/posts/zettelkasten.html b/output/posts/zettelkasten.html
deleted file mode 100644
index b157061..0000000
--- a/output/posts/zettelkasten.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
-
-
-
-
-Zettelkasten Method
-
-
-
-
-
-
-
-
-Updated: 2025-08-06 Wed 21:10
-
-
-Zettelkasten Method
-
-Testing
-
-
-
-
-
-
-
diff --git a/output/setup.html b/output/setup.html
new file mode 100644
index 0000000..e78bf6a
--- /dev/null
+++ b/output/setup.html
@@ -0,0 +1,530 @@
+
+
+
+
+
+
+Setup
+
+
+
+
+
+
+
+
+
+
+Updated: 2025-08-07 Thu 22:36
+
+
+Setup
+
+Introduction
+
+
+This page will highlight the build-script.el used to generate this website. This entire website is generated through org files using the command:
+
+
+
+emacs -Q --script build-site.el
+
+
+
+
+
+The script
+
+
+The script is as follows, at the start I have commented out pieces of code (somewhat relevant to the script but never really used), followed by package management. Then there's the declaration of variables and functions and finally the org-publish-project-alist which handles nearly all of the project generation instructions.
+
+
+
+
+;; Commented out things:
+
+;; (defvar z-head
+;; "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://gongzhitaao.org/orgcss/org.css\" />
+;; <link rel=\"stylesheet\" href=\"/style.css\" />")
+
+;; (setq org-html-validation-link nil
+;; org-html-head-include-scripts nil
+;; org-html-head-include-default-style nil
+;; org-html-head z-head)
+
+;; (type-of (car '(rose violet daisy buttercup)))
+;; (cadr (assoc "FILETAGS" (org-collect-keywords '("FILETAGS"))))
+
+;; (let ((list '(("post1.org") ("post2.org"))))
+;; (mapconcat (lambda (entry)
+;; (format "- [[file:%s]]" (car entry)))
+;; list
+;; "\n"))
+
+
+
+;;BEGIN:
+;; Set the package installation directory so that packages aren't stored in the
+;; ~/.emacs.d/elpa path.
+(require 'package)
+(setq package-user-dir (expand-file-name "./.packages"))
+(setq package-archives '(("melpa" . "https://melpa.org/packages/")
+ ("elpa" . "https://elpa.gnu.org/packages/")))
+
+;; Initialize the package system
+(package-initialize)
+(unless package-archive-contents
+ (package-refresh-contents))
+
+;; Install dependencies
+(package-install 'htmlize)
+
+;; Load the publishing system
+(require 'ox-publish)
+(setq org-html-htmlize-output-type 'css)
+
+(defvar z-preamble
+ "<nav>
+ <a href=\"/\">Home | </a>
+ <a href=\"/posts/posts-list.html\">Posts | </a>
+ <a href=\"/blogs/blogs-list.html\">Blogs | </a>
+ <a href=\"/contact.html\">Contact</a>
+</nav>
+<div id=\"updated\">Updated: %C</div>"
+)
+
+(defvar z-postamble
+ "<footer>
+<div class=\"copyright-container\">
+<div class=\"copyright\">
+Copyright © 2022-2025 Zaine Qayyum. All rights reserved unless otherwise noted.</div></div>
+<div class=\"generated\">
+Created with %c on <a href=\"https://www.archlinux.org/\">Arch</a> <a href=\"https://www.gnu.org\">GNU</a>/<a href=\"https://www.kernel.org/\">Linux</a>
+</div>
+</footer>")
+
+
+
+(defun z/posts-sitemap (title list)
+ "sitemap that lists post links as bullet points with dates and tags."
+ (concat
+ "#+TITLE: " title "\n"
+ "#+OPTIONS: toc:nil num:nil \n\n"
+ "* Posts:\n"
+ (mapconcat
+ (lambda (entry)
+ (let* ((link (car entry))
+ ;; extract relative file name from the link
+ (filename (if (string-match "\\[\\[file:\\([^]]+\\)\\]" link)
+ (match-string 1 link)
+ link))
+ (full-path (expand-file-name filename "~/master-folder/org_files/org_web/posts/"))
+ (date-str "no date")
+ (tags-str ""))
+ ;; Get publish date
+ (let ((date (org-publish-find-date full-path org-publish-project-alist)))
+ (when date
+ (setq date-str (format-time-string "%Y-%m-%d" date))))
+ ;; Get FILETAGS from file buffer
+ (when (file-exists-p full-path)
+ (with-temp-buffer
+ (insert-file-contents full-path)
+ (org-mode)
+ (let* ((tags (cadr (assoc "FILETAGS" (org-collect-keywords '("FILETAGS"))))))
+ (when tags
+ (setq tags-str (mapconcat (lambda (tag)
+ (format "@@html:<span class=\"post-tag\">%s</span>@@" tag))
+ (split-string tags ":" t) ;; <- Splits by ":" and removes empty strings
+ " "))))))
+ ;; Final line output
+ (format "- %s @@html:<span class=\"post-date\">%s</span>@@ %s" link date-str tags-str)))
+ (cdr list)
+ "\n")))
+
+
+(defun z/blogs-sitemap (title list)
+ "sitemap that lists blog links as bullet points with dates and tags."
+ (concat
+ "#+TITLE: " title "\n"
+ "#+OPTIONS: toc:nil num:nil \n\n"
+ "* Posts:\n"
+ (mapconcat
+ (lambda (entry)
+ (let* ((link (car entry))
+ ;; extract relative file name from the link
+ (filename (if (string-match "\\[\\[file:\\([^]]+\\)\\]" link)
+ (match-string 1 link)
+ link))
+ (full-path (expand-file-name filename "~/master-folder/org_files/org_web/blogs/"))
+ (date-str "no date")
+ (tags-str ""))
+ ;; Get publish date
+ (let ((date (org-publish-find-date full-path org-publish-project-alist)))
+ (when date
+ (setq date-str (format-time-string "%Y-%m-%d" date))))
+ ;; Get FILETAGS from file buffer
+ (when (file-exists-p full-path)
+ (with-temp-buffer
+ (insert-file-contents full-path)
+ (org-mode)
+ (let* ((tags (cadr (assoc "FILETAGS" (org-collect-keywords '("FILETAGS"))))))
+ (when tags
+ (setq tags-str (mapconcat (lambda (tag)
+ (format "@@html:<span class=\"post-tag\">%s</span>@@" tag))
+ (split-string tags ":" t) ;; <- Splits by ":" and removes empty strings
+ " "))))))
+ ;; Final line output
+ (format "- %s @@html:<span class=\"post-date\">%s</span>@@ %s" link date-str tags-str)))
+ (cdr list)
+ "\n")))
+
+
+;; Define the publishing project
+(setq org-publish-project-alist
+ `(("org-notes"
+ :recursive t
+ :base-directory "~/master-folder/org_files/org_web/"
+ :publishing-function org-html-publish-to-html
+ :publishing-directory "~/master-folder/org_files/org_web/output"
+ :with-author nil
+ :with-creator t
+ :with-toc t
+ :base-extension "org"
+ :section-numbers nil
+ :time-stamp-file nil
+ :html-preamble ,z-preamble
+ :html-postamble ,z-postamble
+ :html-head "
+<link rel=\"stylesheet\" type=\"text/css\" href=\"https://gongzhitaao.org/orgcss/org.css\" />
+<link rel=\"stylesheet\" href=\"style.css\" />
+<script src=\"script.js\" defer></script>
+"
+ )
+ ("org-posts"
+ :base-directory "~/master-folder/org_files/org_web/posts"
+ :base-extension "org"
+ :publishing-directory "~/master-folder/org_files/org_web/output/posts/"
+ :recursive t
+ :base-extension "org"
+ :publishing-function org-html-publish-to-html
+ :with-author nil
+ :with-creator nil
+ :html-validation-link nil
+ :with-toc t
+ :section-numbers t
+ :html-preamble ,z-preamble
+ :html-postamble ,z-postamble
+ :auto-sitemap t
+ :sitemap-filename "posts-list.org"
+ :sitemap-title "Posts List"
+ :sitemap-style list
+ :sitemap-function z/posts-sitemap
+ :html-head "
+<link rel=\"stylesheet\" type=\"text/css\" href=\"https://gongzhitaao.org/orgcss/org.css\" />
+<link rel=\"stylesheet\" href=\"../style.css\" />
+<script src=\"../script.js\" defer></script>
+"
+ )
+ ("org-blogs"
+ :base-directory "~/master-folder/org_files/org_web/blogs"
+ :base-extension "org"
+ :publishing-directory "~/master-folder/org_files/org_web/output/blogs/"
+ :recursive t
+ :base-extension "org"
+ :publishing-function org-html-publish-to-html
+ :with-author nil
+ :with-creator nil
+ :html-validation-link nil
+ :with-toc t
+ :section-numbers t
+ :html-preamble ,z-preamble
+ :html-postamble ,z-postamble
+ :auto-sitemap t
+ :sitemap-filename "blogs-list.org"
+ :sitemap-title "Blogs List"
+ :sitemap-style list
+ :sitemap-function z/blogs-sitemap
+ :html-head "
+<link rel=\"stylesheet\" type=\"text/css\" href=\"https://gongzhitaao.org/orgcss/org.css\" />
+<link rel=\"stylesheet\" href=\"../style.css\" />
+<script src=\"../script.js\" defer></script>
+"
+ )
+
+
+ ("org-assets"
+ :base-directory "~/master-folder/org_files/org_web/assets/"
+ :base-extension "css\\|js\\|png\\|jpg\\|gif\\|svg\\|pdf\\|woff\\|woff2\\|ttf"
+ :publishing-directory "~/master-folder/org_files/org_web/output/assets/"
+ :recursive t
+ :publishing-function org-publish-attachment)
+ ("org-static"
+ :base-directory "~/master-folder/org_files/org_web/"
+ :base-extension "css\\|js"
+ :publishing-directory "~/master-folder/org_files/org_web/output"
+ :recursive t
+ :publishing-function org-publish-attachment)
+
+ ("website"
+ :components ("org-notes" "org-assets" "org-posts" "org-blogs" "org-static"))))
+
+;; Delete the output before generating the new one
+(delete-directory "~/master-folder/org_files/org_web/output/" t)
+(message "Directory deleted")
+
+;; Generate the site output
+(org-publish-all t)
+
+(message "Build complete!")
+
+
+
+
+
+
+Publish Script
+
+
+As the project is hosted on Github, I have created a small script that is able to push changes to the remote repository, which Cloudflare will automatically detect and rebuild the website:
+
+
+
+
+#!/bin/bash
+
+# Exit immediately if any command fails
+set -e
+
+# Define paths
+ORG_PROJECT_NAME="website"
+ORG_OUTPUT_DIR="$HOME/master-folder/org_files/org_web/output"
+
+# commands used prior to having the `build-script.el`
+# echo "Running org-publish..."
+# emacs --batch \
+# --eval "(require 'org)" \
+# --eval "(require 'ox-publish)" \
+# --eval "(org-publish \"$ORG_PROJECT_NAME\" t)"
+
+cd "$ORG_OUTPUT_DIR"
+
+echo "HTML published to: $ORG_OUTPUT_DIR"
+
+# Git commands
+echo "Adding changes to Git..."
+git add .
+
+echo "Committing..."
+git commit -m "Auto-publish on $(date)" || echo "Nothing to commit."
+
+echo "Pushing to GitHub..."
+git push origin main
+
+echo "Done! Changes pushed and Cloudflare should rebuild the site."
+
+
+
+
+
+
+
+
+
+
+
diff --git a/output/style.css b/output/style.css
index f49d1bd..f9f7184 100644
--- a/output/style.css
+++ b/output/style.css
@@ -95,3 +95,31 @@ pre.src {
white-space: pre-wrap; /* wrap long lines */
}
+
+
+.post-date {
+ color: pink;
+ font-size: 0.9em;
+ margin-left: 8px;
+}
+
+
+ .post-tag {
+ display: inline-block;
+ background-color: #f0f0f0;
+ color: #444;
+ border-radius: 5px;
+ padding: 2px 6px;
+ margin-left: 6px;
+ font-size: 0.8em;
+ float: right;
+ }
+
+ li::after {
+ content: "";
+ display: block;
+ clear: both;
+ }
+li {
+ margin-bottom: 8px;
+}