465 lines
13 KiB
SCSS
465 lines
13 KiB
SCSS
// My GLORIOUS theme for rendered Markdown documents (But may come in handy for
|
|
// other projects? Who knows!). Integrated with my colorscheme generators, best
|
|
// paired with my very own syntax highlighting theme. Based on
|
|
// sindresorhus/github-markdown-css[1] and primer/css[2]. By the way, here[3]
|
|
// is the first ever public version of the Markdown styles. Also, GitLab's
|
|
// stylesheet can be found here[4], it supports way more syntactical features.
|
|
//
|
|
// [1]: <https://github.com/sindresorhus/github-markdown-css/blob/1485dd78f5e744ef36e946e5ae44838e3906f9d8/github-markdown.css>
|
|
// [2]: <https://github.com/primer/css/tree/63764f7edd59c5f4949c91e5373471aa8b0d4865>
|
|
// [3]: <https://github.com/primer/primer-markdown/tree/fa1aa995def5b85cfb8f3c414cded8cb6559292c>
|
|
// [4]: <https://gitlab.com/gitlab-org/gitlab/-/blob/7a6e4f24d0d828500a7c7b6eb84973a1b4c35534/app/assets/stylesheets/framework/typography.scss>
|
|
//
|
|
// User-Agent stylesheets (<https://stackoverflow.com/a/6867287/12005228>):
|
|
// 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>
|
|
|
|
@use 'sass:math';
|
|
@use 'sass:color';
|
|
|
|
// NOTE: GitHub uses an ancient version of normalize.css:
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/normalize.scss>
|
|
@use '../node_modules/normalize.css/normalize.css';
|
|
|
|
@use '../../../colorschemes/out/_colorscheme.scss';
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// CONFIGURATION CONSTANTS AND FUNCTIONS
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/support/variables/typography.scss#L34-L38>
|
|
$font-default: 'Ubuntu', sans-serif;
|
|
$font-monospace: 'Ubuntu Mono', monospace;
|
|
// https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/support/variables/typography.scss#L29-L32
|
|
$line-height-headings: 1.25;
|
|
$line-height-code-blocks: 1.3;
|
|
$line-height-default: 1.5;
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/support/variables/typography.scss#L40-L42>
|
|
$font-size-default: 16px;
|
|
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/support/variables/misc.scss#L3-L12>
|
|
$border-radius: 4px;
|
|
@function border($width: 1px, $style: solid, $color: colorscheme.$base-02) {
|
|
@return $width $style $color;
|
|
}
|
|
|
|
$paragraph-spacing: 1em;
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// MIXINS AND FUNCTIONS
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
@mixin clearfix {
|
|
&::after,
|
|
&::before {
|
|
display: table;
|
|
content: '';
|
|
}
|
|
&::after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
@mixin cancel-out-child-margins {
|
|
& > :first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
& > :last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// BASE STYLES
|
|
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss>
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss>
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L1-L4>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L15-L21>
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L7-L11>
|
|
body {
|
|
color: colorscheme.$fg;
|
|
background-color: colorscheme.$bg;
|
|
font-family: $font-default;
|
|
font-size: $font-size-default;
|
|
line-height: $line-height-default;
|
|
word-wrap: break-word;
|
|
|
|
$tab-size: 4;
|
|
-moz-tab-size: $tab-size;
|
|
-o-tab-size: $tab-size;
|
|
tab-size: $tab-size;
|
|
|
|
&::-moz-selection,
|
|
&::selection,
|
|
& ::-moz-selection,
|
|
& ::selection {
|
|
color: colorscheme.$selection-fg;
|
|
background-color: colorscheme.$selection-bg;
|
|
}
|
|
}
|
|
|
|
// Also called `.markdown-body` by GitHub.
|
|
article {
|
|
min-width: 200px;
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: 32px;
|
|
@media (max-width: 768px - 1px) {
|
|
padding: 24px;
|
|
}
|
|
|
|
@include clearfix();
|
|
@include cancel-out-child-margins();
|
|
}
|
|
|
|
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/octicons.scss>
|
|
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/typography-base.scss#L81-L88>
|
|
.octicon {
|
|
display: inline-block;
|
|
overflow: visible !important; // Not sure about this.
|
|
vertical-align: text-bottom;
|
|
fill: currentColor;
|
|
}
|
|
|
|
// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L23-L30>
|
|
a {
|
|
color: colorscheme.$base-0D;
|
|
text-decoration: none;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L35-L44>
|
|
&:not([href]) {
|
|
color: unset;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
// <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>
|
|
hr {
|
|
margin-top: $paragraph-spacing * 1.5;
|
|
margin-bottom: $paragraph-spacing * 1.5;
|
|
border: border($width: 0.2em);
|
|
@include clearfix();
|
|
}
|
|
|
|
// Set up paragraph margins for paragraphs themselves and other elements that
|
|
// will appear at the top level.
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L63-L73>
|
|
dl,
|
|
details,
|
|
table,
|
|
blockquote,
|
|
ul,
|
|
ol,
|
|
pre,
|
|
p {
|
|
margin-top: $paragraph-spacing;
|
|
margin-bottom: $paragraph-spacing;
|
|
}
|
|
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L84-L98>
|
|
blockquote {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding-left: 1em;
|
|
border-left: border($width: 0.25em);
|
|
@include cancel-out-child-margins();
|
|
}
|
|
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/base.scss#L78-L85>
|
|
summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/images.scss#L5-L22>
|
|
img {
|
|
max-width: 100%;
|
|
// Fixes manually specified widths for images.
|
|
box-sizing: content-box;
|
|
background-color: colorscheme.$bg;
|
|
|
|
&[align='left'],
|
|
&[align='right'] {
|
|
margin: 0.5em 1.25em;
|
|
}
|
|
|
|
&[align='left'] {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&[align='right'] {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
ins,
|
|
del {
|
|
text-decoration: none;
|
|
}
|
|
|
|
ins {
|
|
color: colorscheme.$base-0B;
|
|
}
|
|
|
|
del {
|
|
color: colorscheme.$base-08;
|
|
}
|
|
|
|
mark {
|
|
background-color: colorscheme.$base-0A;
|
|
color: colorscheme.$bg;
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// HEADINGS
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/headings.scss>
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/headings.scss#L5-L15>
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: $paragraph-spacing * 1.5;
|
|
margin-bottom: $paragraph-spacing * 1;
|
|
padding-bottom: 0.3em;
|
|
border-bottom: border();
|
|
// Make the headers less bold, the default font-weight is 700.
|
|
font-weight: 600;
|
|
line-height: $line-height-headings;
|
|
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L51-L61>
|
|
.anchor {
|
|
float: left;
|
|
$size: 16px;
|
|
$offset: 4px;
|
|
padding-right: $offset;
|
|
margin-left: -($size + $offset);
|
|
|
|
// Undo the default styles for links.
|
|
color: unset;
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
> * {
|
|
visibility: hidden;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.anchor > * {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
@media (hover: none) {
|
|
.anchor > * {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// CODE
|
|
// <https://github.com/primer/css/blob/39274b353b6bfc43016c23599076bc3e03f0c1c1/src/markdown/code.scss>
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/typography-base.scss#L65-L79>
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
code,
|
|
kbd,
|
|
samp,
|
|
pre {
|
|
font-family: $font-monospace;
|
|
}
|
|
|
|
// Inline code snippets.
|
|
code {
|
|
padding: 0.2em 0.3em;
|
|
color: inherit;
|
|
background-color: rgba(colorscheme.$base-03, 0.2);
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
// Code blocks.
|
|
pre {
|
|
padding: 1em;
|
|
overflow: auto;
|
|
color: colorscheme.$fg;
|
|
background-color: colorscheme.$bg;
|
|
border: border();
|
|
border-radius: $border-radius;
|
|
line-height: $line-height-code-blocks;
|
|
word-wrap: normal;
|
|
|
|
// Undo the highlighting of inline snippets.
|
|
code {
|
|
padding: unset;
|
|
background-color: unset;
|
|
border: unset;
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// KEYBOARD SHORTCUTS
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/kbd.scss>
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
kbd {
|
|
display: inline-block;
|
|
padding: 0.2em 0.3em;
|
|
vertical-align: bottom;
|
|
|
|
// The original stylesheet specifies both font-size and line-height in
|
|
// pixels, but I want to do the same in relative units instead, so
|
|
// recalculating everything proportionally.
|
|
$orig-font-size: /* 11px */ 12px;
|
|
$orig-line-height: 10px;
|
|
$rel-font-size: math.div($orig-font-size, 16px) * 1em;
|
|
$rel-line-height: math.div($orig-line-height, $orig-font-size);
|
|
// This rule implicitly resets all inherited font-related properties.
|
|
font: #{$rel-font-size}/#{$rel-line-height} #{$font-monospace};
|
|
|
|
$kbd-bg-color: if(colorscheme.$is-dark, colorscheme.$bg, colorscheme.$fg);
|
|
$kbd-fg-color: if(colorscheme.$is-dark, colorscheme.$fg, colorscheme.$bg);
|
|
|
|
color: $kbd-fg-color;
|
|
background-color: color.change($kbd-bg-color, $lightness: 10%);
|
|
border: border($width: 0.1em, $color: color.change($kbd-bg-color, $lightness: 5%));
|
|
border-bottom-width: 0.4em;
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// TABLES
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/tables.scss>
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/tables.scss#L4-L35>
|
|
table {
|
|
display: block;
|
|
width: 100%;
|
|
overflow: auto;
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/base.scss#L56-L59>
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
|
|
// For browsers with support for `max-content`. Not sure what this pair of
|
|
// rules does differently from just `width: 100%`.
|
|
width: max-content;
|
|
max-width: 100%;
|
|
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/tables.scss#L32-L34>
|
|
img {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
th {
|
|
font-weight: 600;
|
|
}
|
|
|
|
td,
|
|
th {
|
|
padding: 0.4em 0.75em;
|
|
border: border();
|
|
}
|
|
|
|
tr:nth-child(2n) {
|
|
background-color: rgba(colorscheme.$base-02, 0.1);
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// LISTS
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss>
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L5-L9>
|
|
ol,
|
|
ul {
|
|
padding-left: 2em;
|
|
|
|
// Disable the "paragraph" margins for nested lists.
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L17-L46>
|
|
& & {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L52-L54>
|
|
li {
|
|
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>
|
|
dt {
|
|
margin-top: $paragraph-spacing;
|
|
font-weight: 600;
|
|
font-style: italic;
|
|
}
|
|
|
|
// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L67-L70>
|
|
dd {
|
|
margin-bottom: $paragraph-spacing;
|
|
margin-left: 0;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
// Apparently not available in Primer? Had to copy from the extracted
|
|
// production stylesheets.
|
|
// <https://github.com/primer/css/issues/1149>
|
|
// <https://gitlab.com/gitlab-org/gitlab/-/blob/7a6e4f24d0d828500a7c7b6eb84973a1b4c35534/app/assets/stylesheets/framework/typography.scss#L403-417>
|
|
ul > li.task-list-item {
|
|
list-style-type: none;
|
|
> input[type='checkbox']:first-child {
|
|
margin: 0 0.2em 0.25em -1.6em;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|