mafoo.org.uk/selfdefined
1
0
Fork 0
mirror of https://github.com/fooflington/selfdefined.git synced 2025-01-22 17:30:00 +00:00
Code Issues Projects Releases Wiki Activity

feat(11ty): apply styles to markdown output

Browse Source
This commit is contained in:
Oscar 2019-11-12 20:46:38 +01:00
parent 7e14a2b954
commit 8307168459
2 changed files with 51 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
11ty/_includes/components/definition.njk
View File

@ -3,14 +3,16 @@
{{ definition.data.title}}
<span class="word__speech">{{ definition.data.speech}}</span>
</h3>
{{ definition.templateContent | safe }}
{# <p>{{ definition.data.alt_words }}</p> #}
{%- if definition.data.alt_words -%}
<h4>Alt words</h4>
<ul class="list-semicolon">
{% for word in definition.data.alt_words %}
<li>{{ word }}</li>
{% endfor %}
</ul>
{% endif %}
<div class="word__content">
{{ definition.templateContent | safe }}
{# <p>{{ definition.data.alt_words }}</p> #}
{%- if definition.data.alt_words -%}
<h4>Alt words</h4>
<ul class="list-semicolon">
{% for word in definition.data.alt_words %}
<li>{{ word }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
</article>

43
_site/scss/base.scss
View File

@ -185,10 +185,45 @@ p {
margin: 0;
}
& > p:first-of-type,
&__definition {
font-family: $sans-serif;
font-size: 1.5rem;
&__content {
align-items: stretch;
@supports (display: grid) {
// align-items: flex-start;
display: grid;
grid-template-columns: 1fr 4fr;
grid-gap: 1rem;
& > * {
margin: 0 !important;
}
}
& > p {
grid-column: 1 / -1;
font-family: $sans-serif;
font-size: 1.5rem;
}
& h4 {
grid-column: 1;
font-family: $con-sans;
font-size: 0.85rem;
flex: 0 1 auto;
text-transform: uppercase;
@supports (display: grid) {
text-align: right;
}
}
& h4 ~ p,
& h4 ~ ul {
border-left: 0.1rem solid lightgrey;
padding-left: 1rem;
grid-column: 2;
font-size: inherit;
}
}
&__speech {