feat(11ty): apply styles to markdown output

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

View File

@ -3,6 +3,7 @@
{{ definition.data.title}} {{ definition.data.title}}
<span class="word__speech">{{ definition.data.speech}}</span> <span class="word__speech">{{ definition.data.speech}}</span>
</h3> </h3>
<div class="word__content">
{{ definition.templateContent | safe }} {{ definition.templateContent | safe }}
{# <p>{{ definition.data.alt_words }}</p> #} {# <p>{{ definition.data.alt_words }}</p> #}
{%- if definition.data.alt_words -%} {%- if definition.data.alt_words -%}
@ -13,4 +14,5 @@
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %}
</div>
</article> </article>

View File

@ -185,12 +185,47 @@ p {
margin: 0; margin: 0;
} }
& > p:first-of-type, &__content {
&__definition { 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-family: $sans-serif;
font-size: 1.5rem; 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 { &__speech {
font-size: 0.5em; font-size: 0.5em;
font-family: $sans-serif; font-family: $sans-serif;