Build sidebar, improve some styles
This commit is contained in:
timvisee
parent
80f9d22123
commit
60843f46a5
|
|
@ -32,14 +32,12 @@ zenn_menu = [
|
|||
{url = "$BASE_URL/about", name = "About"},
|
||||
{url = "https://timvisee.com", name = "timvisee.com"},
|
||||
]
|
||||
zenn_source = "https://gitlab.com/timvisee/blog.timvisee.com/"
|
||||
|
||||
after_dark_title = "Tim Visée"
|
||||
after_dark_menu = [
|
||||
{url = "$BASE_URL", name = "Home"},
|
||||
{url = "$BASE_URL/projects", name = "Projects"},
|
||||
{url = "$BASE_URL/blog", name = "Blog"},
|
||||
{url = "$BASE_URL/categories", name = "Categories"},
|
||||
{url = "$BASE_URL/tags", name = "Tags"},
|
||||
{url = "$BASE_URL/about", name = "About"},
|
||||
{url = "https://timvisee.com", name = "timvisee.com"},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -7,13 +7,15 @@ tags = ["test"]
|
|||
categories = ["dev"]
|
||||
+++
|
||||
|
||||
Ut enim ad minim veniam, quis
|
||||
Ut enim ad minim `veniam`, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
||||
```bash
|
||||
# A random command
|
||||
ffsend upload $file --copy
|
||||
|
||||
ffsend upload $file --copy some really long command to see how wrapping/overflowing goes
|
||||
|
||||
rm -rf /
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@ a {
|
|||
display: inline-block;
|
||||
color: $link-color;
|
||||
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -166,7 +167,7 @@ content {
|
|||
content > #{headings(1,6)} {
|
||||
margin: 0;
|
||||
padding-bottom: 0.3em;
|
||||
border-bottom: 1px solid $background-border;
|
||||
border-bottom: 1px dashed $background-border;
|
||||
}
|
||||
|
||||
content pre,
|
||||
|
|
@ -186,10 +187,17 @@ content img {
|
|||
padding: 0.25em;
|
||||
max-width: 100%;
|
||||
}
|
||||
content code {
|
||||
padding: 0 0.2em;
|
||||
display: inline-block;
|
||||
font-family: $font-monospace;
|
||||
background-color: $background-darker;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
sidebar {
|
||||
width: 20em;
|
||||
padding: 2.5em 1.5em;
|
||||
padding: 0.5em 1.5em 1.5em 1.5em;
|
||||
box-sizing: border-box;
|
||||
background: $background-darker;
|
||||
}
|
||||
|
|
@ -216,14 +224,38 @@ sidebar #{headings(1,6)} {
|
|||
}
|
||||
|
||||
sidebar > section {
|
||||
padding: 1em 0;
|
||||
padding: 1rem 0;
|
||||
|
||||
ul {
|
||||
margin: 0 -1.5rem;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
line-height: 2;
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0 1.5rem;
|
||||
font-family: $font-title;
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: rgba($link-color, 0.1);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba($link-color-hover, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
padding: 2.5em 0;
|
||||
padding: 2em 0;
|
||||
font-family: $font-article;
|
||||
text-align: justify;
|
||||
border-bottom: 1px solid $background-border;
|
||||
border-bottom: 1px dashed $background-border;
|
||||
|
||||
// Hack to fix <pre> overflow
|
||||
width: 100%;
|
||||
|
|
@ -239,12 +271,26 @@ article > header {
|
|||
#{headings(1,6)} {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
border: 1px solid $background-border;
|
||||
border-radius: 3px;
|
||||
font-family: $font-title;
|
||||
padding: 0.2em 0.4em;
|
||||
line-height: 1;
|
||||
margin: 0.1em;
|
||||
}
|
||||
|
||||
content .tag {
|
||||
background-color: $background-darker;
|
||||
}
|
||||
sidebar .tag {
|
||||
background-color: $background;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,31 +70,61 @@
|
|||
<sidebar>
|
||||
{% if config.extra.zenn_menu %}
|
||||
<section>
|
||||
<h1>Menu</h1>
|
||||
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
{% for item in config.extra.after_dark_menu %}
|
||||
<a itemprop="url"
|
||||
class="{% if item.url | replace(from="$BASE_URL", to=config.base_url) == current_url %}active{% endif %}"
|
||||
href="{{ item.url | safe | replace(from="$BASE_URL", to=config.base_url) }}">
|
||||
<span itemprop="name">{{ item.name }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
<ul>
|
||||
{% for item in config.extra.after_dark_menu %}
|
||||
<li>
|
||||
<a itemprop="url"
|
||||
class="{% if item.url | replace(from="$BASE_URL", to=config.base_url) == current_url %}active{% endif %}"
|
||||
href="{{ item.url | safe | replace(from="$BASE_URL", to=config.base_url) }}">
|
||||
<span itemprop="name">{{ item.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<section>
|
||||
<h1><a href="/categories">Categories</a></h1>
|
||||
<p>...</p>
|
||||
</section>
|
||||
<section>
|
||||
<h1><a href="/tags">Tags</a></h1>
|
||||
<p>...</p>
|
||||
<section>
|
||||
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||||
<ul>
|
||||
<li>
|
||||
<a itemprop="url" href="/categories/dev">
|
||||
<span itemprop="name">Dev</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a itemprop="url" href="#">
|
||||
<span itemprop="name">Releases</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<span class="muted">
|
||||
<section>
|
||||
<h1><a href="/tags">Tags</a></h1>
|
||||
<div class="tags">
|
||||
<a href="/tags/test" class="tag">test</a>
|
||||
<a href="/tags/test" class="tag">test</a>
|
||||
<a href="/tags/test" class="tag">test</a>
|
||||
<a href="/tags/test" class="tag">test</a>
|
||||
<a href="/tags/test" class="tag">test</a>
|
||||
<a href="/tags/test" class="tag">test</a>
|
||||
<a href="/tags/test" class="tag">test</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="muted">
|
||||
Copyright © {{ config.title }} {{ now() | date(format="%Y") }}
|
||||
</span>
|
||||
{% if config.extra.zenn_source %}
|
||||
<br /><a href="{{ config.extra.zenn_source }}">Source</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
</sidebar>
|
||||
</main>
|
||||
{% endblock content %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue