Intentional Markdown blog template - Lightweight, yet Sophisticated.
-
Download both stylesheets:
curl -LO https://raw.githubusercontent.com/BeyondCodeBootcamp/beyond-blog-template/main/assets/github-markdown.css curl -LO https://raw.githubusercontent.com/BeyondCodeBootcamp/beyond-blog-template/main/assets/beyond-theme.css
-
Include them in the
<head>of your html:<link rel="stylesheet" href="/assets/github-markdown.css" /> <link rel="stylesheet" href="/assets/beyond-theme.css" />
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Beyond Code Styles -->
<link rel="stylesheet" href="/assets/github-markdown.css" />
<link rel="stylesheet" href="/assets/beyond-theme.css" />
</head>
<body>
<!-- more content -->
</body>
</html>Inside of your <body> create an <article class="markdown-body"> with the rendered Markdown output.
<article class="markdown-body">
<!-- Place rendered markdown content here. Example: -->
<p>Hello</p>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</article>Create a <nav class="beyond-nav"> with a single <a href="/"> link to the homepage, and a <ul> containing all other links.
<nav class="beyond-nav">
<a href="/">
<span style="font-weight: bold">Beyond</span>
<span style="font-weight: lighter">Code</span>
</a>
<ul>
<li><a href="/">Blog</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>Create a <footer class="beyond-footer"> and all elements inside of it will be spaced evenly.
<footer class="beyond-footer">
© 2021
<center>♥</center>
AJ ONeal
</footer>curl -sS https://webinstall.dev | bash
webi sd comrak
bash build.sh- @sindresorhus for github-markdown.css (MIT License)
- @uniqname for beyond-theme.css