Minor styling adjustments
This commit is contained in:
parent
f847b07160
commit
e64eac49d7
3 changed files with 19 additions and 11 deletions
|
|
@ -10,5 +10,5 @@
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block sidebar %}
|
{% block sidebar %}
|
||||||
<a href="{{ "/" | url }}">← Home</a>
|
<a href="{{ "/" | url }}">Go Back Home</a>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,10 @@ $highlight: #ff005f;
|
||||||
$highlight-1: #ff005f11;
|
$highlight-1: #ff005f11;
|
||||||
$highlight-2: #ff005f22;
|
$highlight-2: #ff005f22;
|
||||||
|
|
||||||
|
$reduced: #888;
|
||||||
|
$reduced-1: #88888811;
|
||||||
|
$reduced-2: #88888822;
|
||||||
|
|
||||||
@import 'ibm-plex/css/ibm-plex.scss';
|
@import 'ibm-plex/css/ibm-plex.scss';
|
||||||
|
|
||||||
*, *:before, *:after {
|
*, *:before, *:after {
|
||||||
|
|
@ -38,13 +42,13 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
h1 {
|
h1 {
|
||||||
color: #222;
|
color: #222;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 24px;
|
line-height: 32px;
|
||||||
padding: 0 0 32px;
|
padding: 0 0 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 16px;
|
line-height: 24px;
|
||||||
padding: 0 0 24px;
|
padding: 0 0 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -173,6 +177,7 @@ footer {
|
||||||
grid-area: footer;
|
grid-area: footer;
|
||||||
padding-top: 48px;
|
padding-top: 48px;
|
||||||
border-top: 1px dotted #aaa;
|
border-top: 1px dotted #aaa;
|
||||||
|
color: $reduced;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
|
|
@ -228,16 +233,19 @@ footer {
|
||||||
article { display: none; }
|
article { display: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
footer,
|
footer {
|
||||||
.posts aside {
|
|
||||||
color: #888;
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
border-bottom: 1px dotted #888;
|
border-bottom: 1px dotted currentColor;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #88888822;
|
background: $reduced-2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post-list {
|
||||||
|
time {
|
||||||
|
color: $reduced;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,10 +3,10 @@
|
||||||
{% block sidebar %}
|
{% block sidebar %}
|
||||||
<nav>
|
<nav>
|
||||||
<h2>Recent Posts</h2>
|
<h2>Recent Posts</h2>
|
||||||
<ul>
|
<ul class="post-list">
|
||||||
{%- for post in (collections.posts | reverse) -%}
|
{%- for post in (collections.posts | reverse) -%}
|
||||||
{% if not post.data.draft %}
|
{% if not post.data.draft %}
|
||||||
<li{% if page.url == post.url %} aria-current="page"{% endif %}><time datetime="{{post.date}}">{{ post.date | toISODate }}</time> -- <a href="{{post.url}}">{{ post.data.title }}</a></li>
|
<li{% if page.url == post.url %} aria-current="page"{% endif %}><time datetime="{{post.date}}">{{ post.date | toISODate }}</time> <a href="{{post.url}}">{{ post.data.title }}</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{%- endfor -%}
|
{%- endfor -%}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue