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;
|
||||
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 {
|
||||
content: "";
|
||||
width: calc(100% - 2 * 30px); // account for .container padding, don't overflow
|
||||
height: 1px;
|
||||
background-image: linear-gradient(to right, var(--accent-color), var(--shadow-color));
|
||||
background-color: var(--accent-color);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 0;
|
||||
font-size: 2rem;
|
||||
|
||||
> a {
|
||||
color: var(--content-text-color);
|
||||
|
@ -63,6 +111,9 @@ article {
|
|||
&:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -164,6 +215,7 @@ article {
|
|||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: underline;
|
||||
|
||||
&.fancy-link {
|
||||
position: relative;
|
||||
|
|
|
@ -8,7 +8,12 @@ Modified to use colors from CSS vars, defined in theme.scss
|
|||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
color: var(--atom-mono-1);
|
||||
|
||||
}
|
||||
|
||||
.hljs > code {
|
||||
background: var(--atom-base);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
|
|
|
@ -6,9 +6,7 @@ metadata.layout = "default.html.ejs"
|
|||
<div class="main">
|
||||
<% for (const post of posts) { %>
|
||||
<article itemscope itemtype="https://schema.org/BlogPosting">
|
||||
<h2 class="article-title" itemprop="headline">
|
||||
<%- fancyLink(post.metadata.title, post.metadata.permalink, `itemprop="url mainEntityOfPage"`) %>
|
||||
</h2>
|
||||
<h1 class="article-title" itemprop="headline"><a href="<%= post.metadata.permalink %>" itemprop="url mainEntityOfPage"><%= post.metadata.title %></a></h1>
|
||||
<%- include("includes/article-meta.html.ejs", { metadata: post.metadata }) %>
|
||||
<div class="article-content" itemprop="description">
|
||||
<%- post.metadata.excerpt %>
|
||||
|
|
Loading…
Reference in New Issue