style: tune the li markers
This commit is contained in:
parent
c937c85114
commit
53b59ca713
|
@ -83,6 +83,34 @@ $margin_hdr_max: $indent_hdr;
|
||||||
$margin_hdr_min: 0.2rem;
|
$margin_hdr_min: 0.2rem;
|
||||||
$margin_hdr_delta: $margin_hdr_max - $margin_hdr_min;
|
$margin_hdr_delta: $margin_hdr_max - $margin_hdr_min;
|
||||||
|
|
||||||
|
$marker_title: "⤷";
|
||||||
|
$marker_section: "➜";
|
||||||
|
$marker_li: "⤚ ";
|
||||||
|
|
||||||
|
// list of arrows: https://www.alt-codes.net/arrow_alt_codes.php
|
||||||
|
// ↳
|
||||||
|
// ⤷
|
||||||
|
// ➥
|
||||||
|
//
|
||||||
|
// →
|
||||||
|
// ↦
|
||||||
|
// ↣
|
||||||
|
// ⇒
|
||||||
|
// ⇢
|
||||||
|
// ⇥
|
||||||
|
// ⇨
|
||||||
|
// ⍈
|
||||||
|
// ➜
|
||||||
|
// ➔
|
||||||
|
// ➙
|
||||||
|
// ⤚
|
||||||
|
// ⤞
|
||||||
|
// ⤠
|
||||||
|
// ➳
|
||||||
|
// ►
|
||||||
|
// ➢
|
||||||
|
// ➲
|
||||||
|
|
||||||
// reset browser defaults
|
// reset browser defaults
|
||||||
body
|
body
|
||||||
{
|
{
|
||||||
|
@ -99,27 +127,6 @@ h1, h2, h3, header
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
p
|
|
||||||
{
|
|
||||||
padding: 0;
|
|
||||||
// this aligns the paragraphs with the header indents
|
|
||||||
margin-left: $margin_hdr_max;
|
|
||||||
margin-right: $margin_hdr_max;
|
|
||||||
|
|
||||||
// interpolate margins from 0 (at 20em) -> max (at 40em):
|
|
||||||
@media (max-width: 40rem)
|
|
||||||
{
|
|
||||||
margin-left: calc(#{$margin_hdr_delta / 20rem * 100%} + #{$margin_hdr_min - $margin_hdr_delta});
|
|
||||||
margin-right: calc(#{$margin_hdr_delta / 20rem * 100%} + #{$margin_hdr_min - $margin_hdr_delta});
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 20rem)
|
|
||||||
{
|
|
||||||
margin-left: $margin_hdr_min;
|
|
||||||
margin-right: $margin_hdr_min;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// some element which should not ever be displayed.
|
// some element which should not ever be displayed.
|
||||||
// TODO: probably want to inline this to prevent any early rendering.
|
// TODO: probably want to inline this to prevent any early rendering.
|
||||||
.hide
|
.hide
|
||||||
|
@ -162,12 +169,42 @@ body
|
||||||
|
|
||||||
.portal
|
.portal
|
||||||
{
|
{
|
||||||
text-align: justify;
|
|
||||||
max-width: 40rem;
|
max-width: 40rem;
|
||||||
// center this within its container
|
// center this within its container
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
|
||||||
|
p, ul
|
||||||
|
{
|
||||||
|
text-align: justify;
|
||||||
|
padding: 0;
|
||||||
|
// this aligns the paragraphs with the header indents
|
||||||
|
margin-left: $margin_hdr_max;
|
||||||
|
margin-right: $margin_hdr_max;
|
||||||
|
|
||||||
|
// interpolate margins from 0 (at 20em) -> max (at 40em):
|
||||||
|
@media (max-width: 40rem)
|
||||||
|
{
|
||||||
|
margin-left: calc(#{$margin_hdr_delta / 20rem * 100%} + #{$margin_hdr_min - $margin_hdr_delta});
|
||||||
|
margin-right: calc(#{$margin_hdr_delta / 20rem * 100%} + #{$margin_hdr_min - $margin_hdr_delta});
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 20rem)
|
||||||
|
{
|
||||||
|
margin-left: $margin_hdr_min;
|
||||||
|
margin-right: $margin_hdr_min;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul
|
||||||
|
{
|
||||||
|
padding-left: 1.3rem;
|
||||||
|
}
|
||||||
|
li::marker
|
||||||
|
{
|
||||||
|
content: $marker_li;
|
||||||
|
}
|
||||||
|
|
||||||
header, h1, h2, h3
|
header, h1, h2, h3
|
||||||
{
|
{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -234,27 +271,14 @@ body
|
||||||
margin-left: 0.15rem;
|
margin-left: 0.15rem;
|
||||||
margin-right: 0.15rem;
|
margin-right: 0.15rem;
|
||||||
}
|
}
|
||||||
// list of arrows: https://www.alt-codes.net/arrow_alt_codes.php
|
|
||||||
h1::before
|
h1::before
|
||||||
{
|
{
|
||||||
//content: "↳";
|
content: $marker_title;
|
||||||
content: "⤷";
|
|
||||||
// content: "➥";
|
|
||||||
}
|
}
|
||||||
h2::before
|
h2::before
|
||||||
{
|
{
|
||||||
//content: "→";
|
content: $marker_section;
|
||||||
//content: "↦";
|
|
||||||
//content: "↣";
|
|
||||||
//content: "⇒";
|
|
||||||
//content: "⇢";
|
|
||||||
//content: "⇥";
|
|
||||||
//content: "⇨";
|
|
||||||
//content: "⍈";
|
|
||||||
content: "➜";
|
|
||||||
//content: "⤚";
|
|
||||||
//content: "⤞";
|
|
||||||
//content: "⤠";
|
|
||||||
}
|
}
|
||||||
h2::after
|
h2::after
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in New Issue
Block a user