perf: calculate heading font size dynamically (#983)
This commit is contained in:
parent
b3c4d741b2
commit
52f5ee9cd3
3 changed files with 19 additions and 34 deletions
|
@ -86,7 +86,7 @@
|
|||
<a href="{{ post.url | relative_url }}" class="card post-preview h-100">
|
||||
<div class="card-body">
|
||||
{% include datetime.html date=post.date class="small" lang=include.lang %}
|
||||
<h3 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h3>
|
||||
<h4 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h4>
|
||||
<div class="text-muted small">
|
||||
<p>
|
||||
{% include no-linenos.html content=post.content %}
|
||||
|
|
|
@ -39,42 +39,27 @@ body {
|
|||
|
||||
/* --- Typography --- */
|
||||
|
||||
h1 {
|
||||
@extend %heading;
|
||||
@for $i from 1 through 5 {
|
||||
h#{$i} {
|
||||
@extend %heading;
|
||||
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
@if $i > 1 {
|
||||
@extend %section;
|
||||
@extend %anchor;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %heading;
|
||||
@extend %section;
|
||||
@extend %anchor;
|
||||
@if $i < 5 {
|
||||
$factor: 0.18rem;
|
||||
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@if $i == 1 {
|
||||
$factor: 0.23rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %heading;
|
||||
@extend %section;
|
||||
@extend %anchor;
|
||||
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend %heading;
|
||||
@extend %section;
|
||||
@extend %anchor;
|
||||
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@extend %heading;
|
||||
@extend %section;
|
||||
@extend %anchor;
|
||||
|
||||
font-size: 1.1rem;
|
||||
font-size: 1rem + (5 - $i) * $factor;
|
||||
} @else {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
@ -348,7 +348,7 @@ h1 + .post-meta {
|
|||
}
|
||||
|
||||
.card {
|
||||
h3 {
|
||||
h4 {
|
||||
@extend %text-color;
|
||||
@extend %text-clip;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue