ember/continuwuity
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Improve and fix styles for code blocks and footnotes

Browse source
This commit is contained in:
Jade Ellis 2024-07-28 22:29:40 +01:00
parent 4267beace5
commit 14e2b42caa
No known key found for this signature in database
GPG key ID: 8705A2A3EBF77BD2
3 changed files with 82 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
packages/website/src/lib/style/code.css Normal file
View file

@ -0,0 +1,57 @@
/* Code */
pre {
color-scheme: var(--code-colour-scheme);
color: var(--code-color);
background-color: var(--code-background-color);
overflow-x: auto;
font-weight: 400;
font-size: .875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: .375rem;
padding: calc(var(--spacing)/2);
box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a
}
pre>code {
word-wrap: normal;
background-color: initial;
border: 0;
border-radius: initial;
display: flex;
flex-direction: column;
line-height: inherit;
margin: 0;
width: max-content;
min-width: 100%;
max-width: auto;
overflow: visible;
}
code[data-line-numbers]>span[data-line-number] {
padding-left: 0;
}
code[data-line-numbers]>span[data-line-number]::before {
/* Insert the line number data attribute before the line */
content: attr(data-line-number);
/* Other styling */
display: inline-block;
width: 1rem;
margin-inline-start: .25rem;
margin-inline-end: .8rem;
text-align: right;
color: var(--code-color);
opacity: 0.25;
}
code>span[data-highlighted] {
background: var(--code-highlighted);
width: 100%;
}
/* code>span[data-highlighted]+span[data-highlighted] {
border-top: 1px solid theme("colors.slate.800");
} */

20
packages/website/src/lib/style/footnote.css Normal file
View file

@ -0,0 +1,20 @@
.footnote-ref {
text-decoration: none;
font-size: var(--footnote-size);
}
sup:has(.footnote-ref) {
vertical-align: super;
}
.footnotes {
font-size: var(--footnote-size);
}
.footnote-backref {
display: inline-block;
/* margin-inline-start: var(--size-4-1); */
margin-inline-start: .5em;
/* color: var(--text-faint); */
text-decoration: none;
}

38
packages/website/src/lib/styles.css
View file

@ -1,8 +1,13 @@
@import "./style/code.css";
@import "./style/footnote.css";
:root {
color-scheme: light;
--spacing: 24px;
--page-width: 57.75rem;
--footnote-size: 0.9em;
--theme: #242424;
--background-color: #f8f8f8;
--surface-color: #fff;
@ -146,37 +151,4 @@ svg {
overflow: visible;
}
/* Code */
pre {
color-scheme: var(--code-colour-scheme);
color: var(--code-color);
background-color: var(--code-background-color);
overflow-x: auto;
font-weight: 400;
font-size: .875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: .375rem;
display: flex;
flex-direction: column;
padding: calc(var(--spacing)/2);
box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a
}
code[data-line-numbers]>span[data-line-number]::before {
/* Insert the line number data attribute before the line */
content: attr(data-line-number);
/* Other styling */
display: inline-block;
width: 1rem;
margin-right: 1rem;
margin-left: 1rem;
text-align: right;
color: gray;
}
code>span[data-highlighted] {
background: #3b4252;
width: 100%;
}