colin/uninsane
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style: tune the li markers

Browse Source
This commit is contained in:
Colin 2022-04-05 21:19:15 +00:00
parent c937c85114
commit 53b59ca713
1 changed files with 62 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
sass/static/style.scss
View File

@ -83,6 +83,34 @@ $margin_hdr_max: $indent_hdr;
$margin_hdr_min: 0.2rem;
$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
body
{
@ -99,27 +127,6 @@ h1, h2, h3, header
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.
// TODO: probably want to inline this to prevent any early rendering.
.hide
@ -162,12 +169,42 @@ body
.portal
{
text-align: justify;
max-width: 40rem;
// center this within its container
margin-left: 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
{
display: flex;
@ -234,27 +271,14 @@ body
margin-left: 0.15rem;
margin-right: 0.15rem;
}
// list of arrows: https://www.alt-codes.net/arrow_alt_codes.php
h1::before
{
//content: "↳";
content: "⤷";
// content: "➥";
content: $marker_title;
}
h2::before
{
//content: "→";
//content: "↦";
//content: "↣";
//content: "⇒";
//content: "⇢";
//content: "⇥";
//content: "⇨";
//content: "⍈";
content: "➜";
//content: "⤚";
//content: "⤞";
//content: "⤠";
content: $marker_section;
}
h2::after
{