shadowfacts
/
shadowfacts.net
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Add Markdown-style decorations to articles

This commit is contained in:
Shadowfacts 2019-06-29 15:12:24 -04:00
parent 2fe034aef5
commit 15cde307bb
Signed by: shadowfacts
GPG Key ID: 94A5AB95422746E5
3 changed files with 59 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
site/css/main.scss
View File

@ -43,17 +43,65 @@ article {
margin-bottom: 75px; margin-bottom: 75px;
color: var(--content-text-color); color: var(--content-text-color);
h1::before { content: "#"; }
h2::before { content: "##"; }
h3::before { content: "###"; }
h1::before, h2::before, h3::before {
font-family: $monospace;
color: var(--accent-color);
margin-right: 10px;
}
@media (min-width: 768px) {
a::before { content: "["; }
a::after { content: "](" attr(href) ")"; word-wrap: break-word; }
a::before, a::after {
color: var(--secondary-ui-text-color);
font-family: $monospace;
font-size: 14px;
text-decoration: none !important;
}
a { text-decoration: none; }
}
code::before, code::after {
content: "`";
font-family: $monospace;
color: var(--secondary-ui-text-color);
}
pre {
&::before, &::after {
content: "```";
display: block;
background: none;
color: var(--secondary-ui-text-color);
}
code::before, code::after {
content: "";
display: none;
}
}
strong::before, strong::after {
content: "**";
font-family: $monospace;
color: var(--secondary-ui-text-color);
}
em::before, em::after {
content: "_";
font-family: $monospace;
color: var(--secondary-ui-text-color);
}
&::after { &::after {
content: ""; content: "";
width: calc(100% - 2 * 30px); // account for .container padding, don't overflow width: calc(100% - 2 * 30px); // account for .container padding, don't overflow
height: 1px; height: 1px;
background-image: linear-gradient(to right, var(--accent-color), var(--shadow-color)); background-color: var(--accent-color);
position: absolute; position: absolute;
} }
.article-title { .article-title {
margin-top: 20px; margin-top: 20px;
margin-bottom: 0; margin-bottom: 0;
font-size: 2rem;
> a { > a {
color: var(--content-text-color); color: var(--content-text-color);
@ -63,6 +111,9 @@ article {
&:hover { &:hover {
color: var(--accent-color); color: var(--accent-color);
} }
&::before, &::after {
content: "";
}
} }
} }
@ -164,6 +215,7 @@ article {
a { a {
color: var(--accent-color); color: var(--accent-color);
text-decoration: underline;
&.fancy-link { &.fancy-link {
position: relative; position: relative;

5
site/css/syntax-highlighting.css
View File

@ -8,7 +8,12 @@ Modified to use colors from CSS vars, defined in theme.scss
overflow-x: auto; overflow-x: auto;
padding: 0.5em; padding: 0.5em;
color: var(--atom-mono-1); color: var(--atom-mono-1);
}
.hljs > code {
background: var(--atom-base); background: var(--atom-base);
display: block;
} }
.hljs-comment, .hljs-comment,

4
site/index.html.ejs
View File

@ -6,9 +6,7 @@ metadata.layout = "default.html.ejs"
<div class="main"> <div class="main">
<% for (const post of posts) { %> <% for (const post of posts) { %>
<article itemscope itemtype="https://schema.org/BlogPosting"> <article itemscope itemtype="https://schema.org/BlogPosting">
<h2 class="article-title" itemprop="headline"> <h1 class="article-title" itemprop="headline"><a href="<%= post.metadata.permalink %>" itemprop="url mainEntityOfPage"><%= post.metadata.title %></a></h1>
<%- fancyLink(post.metadata.title, post.metadata.permalink, `itemprop="url mainEntityOfPage"`) %>
</h2>
<%- include("includes/article-meta.html.ejs", { metadata: post.metadata }) %> <%- include("includes/article-meta.html.ejs", { metadata: post.metadata }) %>
<div class="article-content" itemprop="description"> <div class="article-content" itemprop="description">
<%- post.metadata.excerpt %> <%- post.metadata.excerpt %>