mirror of
https://github.com/keanuplayz/dotfiles.git
synced 2024-08-15 02:33:12 +00:00
[scripts/markdown2htmldoc] don't use CSS Logical Properties
This commit is contained in:
parent
ef606d6cd9
commit
74a20d6db2
2 changed files with 27 additions and 47 deletions
File diff suppressed because one or more lines are too long
|
@ -13,20 +13,6 @@
|
||||||
// User-Agent stylesheets (<https://stackoverflow.com/a/6867287/12005228>):
|
// User-Agent stylesheets (<https://stackoverflow.com/a/6867287/12005228>):
|
||||||
// Firefox: <https://searchfox.org/mozilla-central/source/layout/style/res/html.css>
|
// Firefox: <https://searchfox.org/mozilla-central/source/layout/style/res/html.css>
|
||||||
// Chromium: <https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css/html.css>
|
// Chromium: <https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css/html.css>
|
||||||
//
|
|
||||||
// NOTE: This stylesheet makes heavy use of the
|
|
||||||
// {margin,padding,border}-{inline,block}-{start,end} rules (apparently they
|
|
||||||
// are called CSS Logical Properties[5]), for two reasons:
|
|
||||||
//
|
|
||||||
// 1. Judging by MDN this might give us not only easy RTL support, but possibly
|
|
||||||
// even support for vertical text directions.
|
|
||||||
//
|
|
||||||
// 2. UA stylesheets also rely on those, so overrides of those end up being
|
|
||||||
// more explicit and are shown in the devtools correctly.
|
|
||||||
//
|
|
||||||
// 3. However, they have pretty bad cross-browser support at the moment, so TODO: remove.
|
|
||||||
//
|
|
||||||
// [5]: <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties>
|
|
||||||
|
|
||||||
@use 'sass:math';
|
@use 'sass:math';
|
||||||
@use 'sass:color';
|
@use 'sass:color';
|
||||||
|
@ -76,22 +62,13 @@ $paragraph-spacing: 1em;
|
||||||
|
|
||||||
@mixin cancel-out-child-margins {
|
@mixin cancel-out-child-margins {
|
||||||
& > :first-child {
|
& > :first-child {
|
||||||
margin-block-start: 0 !important;
|
margin-top: 0 !important;
|
||||||
}
|
}
|
||||||
& > :last-child {
|
& > :last-child {
|
||||||
margin-block-end: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// prettier-ignore
|
|
||||||
@mixin margin-block($margin) { margin-block-start: $margin; margin-block-end: $margin; }
|
|
||||||
// prettier-ignore
|
|
||||||
@mixin margin-inline($margin) { margin-inline-start: $margin; margin-inline-end: $margin; }
|
|
||||||
// prettier-ignore
|
|
||||||
@mixin padding-block($padding) { padding-block-start: $padding; padding-block-end: $padding; }
|
|
||||||
// prettier-ignore
|
|
||||||
@mixin padding-inline($padding) { padding-inline-start: $padding; padding-inline-end: $padding; }
|
|
||||||
|
|
||||||
////////////////////////////////////////////////////////////////////////////////
|
////////////////////////////////////////////////////////////////////////////////
|
||||||
// BASE STYLES
|
// BASE STYLES
|
||||||
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss>
|
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss>
|
||||||
|
@ -171,7 +148,8 @@ a {
|
||||||
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L37-L50>
|
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L37-L50>
|
||||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L75-L82>
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L75-L82>
|
||||||
hr {
|
hr {
|
||||||
@include margin-block($paragraph-spacing * 1.5);
|
margin-top: $paragraph-spacing * 1.5;
|
||||||
|
margin-bottom: $paragraph-spacing * 1.5;
|
||||||
border: border($width: 0.2em);
|
border: border($width: 0.2em);
|
||||||
@include clearfix();
|
@include clearfix();
|
||||||
}
|
}
|
||||||
|
@ -187,14 +165,16 @@ ul,
|
||||||
ol,
|
ol,
|
||||||
pre,
|
pre,
|
||||||
p {
|
p {
|
||||||
@include margin-block($paragraph-spacing);
|
margin-top: $paragraph-spacing;
|
||||||
|
margin-bottom: $paragraph-spacing;
|
||||||
}
|
}
|
||||||
|
|
||||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L84-L98>
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L84-L98>
|
||||||
blockquote {
|
blockquote {
|
||||||
@include margin-inline(0);
|
margin-left: 0;
|
||||||
padding-inline-start: 1em;
|
margin-right: 0;
|
||||||
border-inline-start: border($width: 0.25em);
|
padding-left: 1em;
|
||||||
|
border-left: border($width: 0.25em);
|
||||||
@include cancel-out-child-margins();
|
@include cancel-out-child-margins();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -254,10 +234,10 @@ h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
margin-block-start: $paragraph-spacing * 1.5;
|
margin-top: $paragraph-spacing * 1.5;
|
||||||
margin-block-end: $paragraph-spacing * 1;
|
margin-bottom: $paragraph-spacing * 1;
|
||||||
padding-block-end: 0.3em;
|
padding-bottom: 0.3em;
|
||||||
border-block-end: border();
|
border-bottom: border();
|
||||||
// Make the headers less bold, the default font-weight is 700.
|
// Make the headers less bold, the default font-weight is 700.
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: $line-height-headings;
|
line-height: $line-height-headings;
|
||||||
|
@ -331,8 +311,7 @@ pre {
|
||||||
|
|
||||||
// Inline code snippets.
|
// Inline code snippets.
|
||||||
code {
|
code {
|
||||||
@include padding-block(0.2em);
|
padding: 0.2em 0.3em;
|
||||||
@include padding-inline(0.3em);
|
|
||||||
background-color: rgba(colorscheme.$base-03, 0.2);
|
background-color: rgba(colorscheme.$base-03, 0.2);
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
}
|
}
|
||||||
|
@ -363,8 +342,7 @@ pre {
|
||||||
|
|
||||||
kbd {
|
kbd {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@include padding-block(0.2em);
|
padding: 0.2em 0.3em;
|
||||||
@include padding-inline(0.3em);
|
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
|
|
||||||
// The original stylesheet specifies both font-size and line-height in
|
// The original stylesheet specifies both font-size and line-height in
|
||||||
|
@ -413,8 +391,7 @@ th {
|
||||||
|
|
||||||
td,
|
td,
|
||||||
th {
|
th {
|
||||||
@include padding-block(0.4em);
|
padding: 0.4em 0.75em;
|
||||||
@include padding-inline(0.75em);
|
|
||||||
border: border();
|
border: border();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -430,31 +407,34 @@ tr:nth-child(2n) {
|
||||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L5-L9>
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L5-L9>
|
||||||
ol,
|
ol,
|
||||||
ul {
|
ul {
|
||||||
padding-inline-start: 2em;
|
padding-left: 2em;
|
||||||
|
|
||||||
// Disable the "paragraph" margins for nested lists.
|
// Disable the "paragraph" margins for nested lists.
|
||||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L17-L46>
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L17-L46>
|
||||||
& & {
|
& & {
|
||||||
@include margin-block(0);
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L52-L54>
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L52-L54>
|
||||||
li {
|
li {
|
||||||
@include margin-block($paragraph-spacing * 0.25);
|
margin-top: $paragraph-spacing * 0.25;
|
||||||
|
margin-bottom: $paragraph-spacing * 0.25;
|
||||||
}
|
}
|
||||||
|
|
||||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L59-L65>
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L59-L65>
|
||||||
dt {
|
dt {
|
||||||
margin-block-start: $paragraph-spacing;
|
margin-top: $paragraph-spacing;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L67-L70>
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L67-L70>
|
||||||
dd {
|
dd {
|
||||||
margin-block-end: $paragraph-spacing;
|
margin-bottom: $paragraph-spacing;
|
||||||
margin-inline-start: 1em;
|
margin-left: 0;
|
||||||
|
padding-left: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Apparently not available in Primer? Had to copy from the extracted
|
// Apparently not available in Primer? Had to copy from the extracted
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue