forked from shadowfacts/shadowfacts.net
Add Markdown-style decorations to articles
This commit is contained in:
parent
2fe034aef5
commit
15cde307bb
|
@ -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;
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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 %>
|
||||||
|
|
Loading…
Reference in New Issue