mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-09-30 00:41:09 +00:00
Improved Markdown styling
This commit is contained in:
Bojan Mojsilovic
parent
a7eec46a27
commit
e28299e9f0
3
src/assets/icons/dot.svg
Normal file
3
src/assets/icons/dot.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.2 5.384C2.76267 5.384 2.35733 5.28267 1.984 5.08C1.62133 4.86667 1.33333 4.57867 1.12 4.216C0.906667 3.85333 0.8 3.45333 0.8 3.016C0.8 2.568 0.906667 2.168 1.12 1.816C1.33333 1.45333 1.62133 1.17067 1.984 0.967999C2.35733 0.754666 2.76267 0.648 3.2 0.648C3.648 0.648 4.05333 0.754666 4.416 0.967999C4.77867 1.17067 5.06667 1.45333 5.28 1.816C5.504 2.168 5.616 2.568 5.616 3.016C5.616 3.45333 5.504 3.85333 5.28 4.216C5.06667 4.57867 4.77867 4.86667 4.416 5.08C4.05333 5.28267 3.648 5.384 3.2 5.384Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 626 B |
@ -9,33 +9,209 @@
|
||||
.editor {
|
||||
margin-block: 8px;
|
||||
|
||||
* {
|
||||
p {
|
||||
color: var(--text-primary);
|
||||
font-family: Lora;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p, li {
|
||||
h1 {
|
||||
color: var(--text-primary);
|
||||
font-family: Nacelle;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 40px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--text-primary);
|
||||
font-family: Nacelle;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 36px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--text-primary);
|
||||
font-family: Nacelle;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--text-primary);
|
||||
font-family: Nacelle;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 30px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: var(--text-primary);
|
||||
font-family: Nacelle;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--text-primary);
|
||||
font-family: Nacelle;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top:1px solid var(--subtile-devider);
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-left: 0px;
|
||||
padding-left: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
li {
|
||||
&::marker {
|
||||
content: '•';
|
||||
}
|
||||
padding-left: 8px;
|
||||
color: var(--text-primary);
|
||||
font-family: Lora;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
line-height: 24px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
|
||||
ul {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-left: 0px;
|
||||
padding-left: 24px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
li {
|
||||
padding-left: 8px;
|
||||
color: var(--text-primary);
|
||||
font-family: Lora;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
|
||||
ol {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
dl {
|
||||
margin-left: 0px;
|
||||
padding-left: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
dt {
|
||||
color: var(--text-primary);
|
||||
font-family: Lora;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
dd {
|
||||
padding-left: 8px;
|
||||
color: var(--text-primary);
|
||||
font-family: Lora;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
|
||||
dl {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img + sup {
|
||||
display: block;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
color: var(--text-primary);
|
||||
font-family: Lora;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
padding-left: 12px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
border-left: 4px solid var(--text-tertiary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-links);
|
||||
font-family: Lora;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
pre, code, mark {
|
||||
background-color: var(--background-input);
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--text-primary);
|
||||
font-family: "Fira Mono";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
ins {
|
||||
color: var(--warning-bright);
|
||||
}
|
||||
|
||||
del {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,9 +35,9 @@
|
||||
|
||||
.title {
|
||||
color: var(--text-primary);
|
||||
font-size: 32px;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 40px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
@ -54,9 +54,9 @@
|
||||
.text {
|
||||
color: var(--text-primary);
|
||||
font-family: Lora;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -129,15 +129,6 @@ Ordered
|
||||
3. Integer molestie lorem at massa
|
||||
|
||||
|
||||
1. You can use sequential numbers...
|
||||
1. ...or keep all the numbers as \`1.\`
|
||||
|
||||
Start numbering with offset:
|
||||
|
||||
57. foo
|
||||
1. bar
|
||||
|
||||
|
||||
## Code
|
||||
|
||||
Inline \`code\`
|
||||
@ -195,31 +186,16 @@ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
|
||||
## Images
|
||||
|
||||
|
||||
|
||||
[^image]
|
||||
|
||||
Like links, Images also have a footnote style syntax
|
||||
|
||||
![Alt text][id]
|
||||
With a reference later in the document defining the URL location, like this:
|
||||
|
||||
With a reference later in the document defining the URL location:
|
||||
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
[^image]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
|
||||
|
||||
## Plugins
|
||||
|
||||
The killer feature of \`markdown-it\` is very effective support of
|
||||
[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
|
||||
|
||||
|
||||
### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
|
||||
|
||||
> Classic markup: :wink: :cry: :laughing: :yum:
|
||||
>
|
||||
> Shortcuts (emoticons): :-) :-( 8-) ;)
|
||||
|
||||
see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
|
||||
|
||||
## Optionals (should we support them?)
|
||||
|
||||
### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
|
||||
|
||||
@ -243,8 +219,6 @@ Footnote 1 link[^first].
|
||||
|
||||
Footnote 2 link[^second].
|
||||
|
||||
Inline footnote^[Text of inline footnote] definition.
|
||||
|
||||
Duplicated footnote reference[^second].
|
||||
|
||||
[^first]: Footnote **can have markup**
|
||||
@ -269,24 +243,6 @@ Term 2 with *inline markup*
|
||||
|
||||
Third paragraph of definition 2.
|
||||
|
||||
_Compact style:_
|
||||
|
||||
Term 1
|
||||
~ Definition 1
|
||||
|
||||
Term 2
|
||||
~ Definition 2a
|
||||
~ Definition 2b
|
||||
|
||||
|
||||
### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
|
||||
|
||||
This is HTML abbreviation example.
|
||||
|
||||
It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
|
||||
|
||||
*[HTML]: Hyper Text Markup Language
|
||||
|
||||
`;
|
||||
|
||||
const Longform: Component< { naddr: string } > = (props) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user