improve styling
This commit is contained in:
Philipp Kühn
committed by
Hans Pagel
Hans Pagel
parent
a0ef78a603
commit
49ab7ebb04
@@ -95,3 +95,304 @@ code {
|
|||||||
.DocSearch-Container {
|
.DocSearch-Container {
|
||||||
filter: saturate(0);
|
filter: saturate(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.text {
|
||||||
|
$spacing: 0.75em;
|
||||||
|
|
||||||
|
> p {
|
||||||
|
&.is-large {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> div,
|
||||||
|
> p,
|
||||||
|
> ul,
|
||||||
|
> ol,
|
||||||
|
> blockquote {
|
||||||
|
margin-top: 2 * $spacing;
|
||||||
|
margin-bottom: 2 * $spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul li,
|
||||||
|
> ol li,
|
||||||
|
> ul ul,
|
||||||
|
> ul ol,
|
||||||
|
> ol ol,
|
||||||
|
> ol ul {
|
||||||
|
margin-top: 0.5 * $spacing;
|
||||||
|
margin-bottom: 0.5 * $spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
> h1,
|
||||||
|
> h2,
|
||||||
|
> h3,
|
||||||
|
> h4,
|
||||||
|
> h5,
|
||||||
|
> h6 {
|
||||||
|
color: $colorBlack;
|
||||||
|
margin-top: 3 * $spacing;
|
||||||
|
margin-bottom: $spacing;
|
||||||
|
|
||||||
|
& + * {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> h1,
|
||||||
|
> h4,
|
||||||
|
> h5,
|
||||||
|
> h6 {
|
||||||
|
a {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> h1,
|
||||||
|
> .is-h1 {
|
||||||
|
font-size: 2.75rem;
|
||||||
|
line-height: 1.15;
|
||||||
|
|
||||||
|
&.is-large {
|
||||||
|
font-size: 3.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> h2,
|
||||||
|
> .is-h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
> h2,
|
||||||
|
> h3 {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 100%;
|
||||||
|
color: rgba($colorBlack, 0.4);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 400;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.1s $ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover a {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> p > img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
> pre {
|
||||||
|
border: 1px solid rgba($colorBlack, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
> p code,
|
||||||
|
> ul code,
|
||||||
|
> ol code,
|
||||||
|
> .table-wrapper code,
|
||||||
|
> .remark-container code {
|
||||||
|
color: rgba($colorBlack, 0.7);
|
||||||
|
background-color: rgba($colorYellow, 0.3);
|
||||||
|
box-decoration-break: clone;
|
||||||
|
}
|
||||||
|
|
||||||
|
> p a,
|
||||||
|
> ul a,
|
||||||
|
> ol a,
|
||||||
|
> .table-wrapper a,
|
||||||
|
> .remark-container a {
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
code {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#toc {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
& + ul {
|
||||||
|
list-style: none;
|
||||||
|
background-color: rgba($colorBlack, 0.03);
|
||||||
|
padding: 1.25rem !important;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: block;
|
||||||
|
content: 'On this page';
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.025rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba($colorBlack, 0.3);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p a img[src^="https://img.shields.io"] {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 1.25rem;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
content: "\2022";
|
||||||
|
color: $colorBlack;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> ol {
|
||||||
|
list-style: none;
|
||||||
|
counter-reset: item;
|
||||||
|
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 2.5rem;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
margin-top: 1px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 1.5rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
background-color: rgba($colorBlack, 0.1);
|
||||||
|
border-radius: 9999px;
|
||||||
|
color: $colorBlack;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
content: counter(item);
|
||||||
|
counter-increment: item;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .table-wrapper {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
> table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: 0.5rem;
|
||||||
|
min-width: 8rem;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
white-space: nowrap;
|
||||||
|
color: $colorBlack;
|
||||||
|
font-weight: 500;
|
||||||
|
border-bottom: 1px solid rgba($colorBlack, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-bottom: 1px solid rgba($colorBlack, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:last-child td {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr {
|
||||||
|
&:last-child td {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba($colorBlack, 0.02);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .remark-container {
|
||||||
|
padding: 1.25rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
color: rgba($colorBlack, 0.7);
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
background-color: rgba($colorYellow, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.info {
|
||||||
|
background-color: rgba($colorBlue, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.error {
|
||||||
|
background-color: rgba($colorRed, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.pro {
|
||||||
|
background-color: rgba($colorOrange, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.remark-container-title {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> blockquote {
|
||||||
|
border-left: 1px solid rgba($colorGrey, 0.5);
|
||||||
|
padding-left: 2 * $spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|||||||
@@ -93,44 +93,44 @@
|
|||||||
;
|
;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Inter';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
src:
|
|
||||||
url("~@/assets/fonts/Inter-SemiBold.woff2") format("woff2"),
|
|
||||||
url("~@/assets/fonts/Inter-SemiBold.woff") format("woff"),
|
|
||||||
;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Inter';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 600;
|
|
||||||
src:
|
|
||||||
url("~@/assets/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
|
|
||||||
url("~@/assets/fonts/Inter-SemiBoldItalic.woff") format("woff"),
|
|
||||||
;
|
|
||||||
}
|
|
||||||
|
|
||||||
// @font-face {
|
// @font-face {
|
||||||
// font-family: 'Inter';
|
// font-family: 'Inter';
|
||||||
// font-style: normal;
|
// font-style: normal;
|
||||||
// font-weight: 700;
|
// font-weight: 600;
|
||||||
// src:
|
// src:
|
||||||
// url("~@/assets/fonts/Inter-Bold.woff2") format("woff2"),
|
// url("~@/assets/fonts/Inter-SemiBold.woff2") format("woff2"),
|
||||||
// url("~@/assets/fonts/Inter-Bold.woff") format("woff"),
|
// url("~@/assets/fonts/Inter-SemiBold.woff") format("woff"),
|
||||||
// ;
|
// ;
|
||||||
// }
|
// }
|
||||||
// @font-face {
|
// @font-face {
|
||||||
// font-family: 'Inter';
|
// font-family: 'Inter';
|
||||||
// font-style: italic;
|
// font-style: italic;
|
||||||
// font-weight: 700;
|
// font-weight: 600;
|
||||||
// src:
|
// src:
|
||||||
// url("~@/assets/fonts/Inter-BoldItalic.woff2") format("woff2"),
|
// url("~@/assets/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
|
||||||
// url("~@/assets/fonts/Inter-BoldItalic.woff") format("woff"),
|
// url("~@/assets/fonts/Inter-SemiBoldItalic.woff") format("woff"),
|
||||||
// ;
|
// ;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
src:
|
||||||
|
url("~@/assets/fonts/Inter-Bold.woff2") format("woff2"),
|
||||||
|
url("~@/assets/fonts/Inter-Bold.woff") format("woff"),
|
||||||
|
;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 700;
|
||||||
|
src:
|
||||||
|
url("~@/assets/fonts/Inter-BoldItalic.woff2") format("woff2"),
|
||||||
|
url("~@/assets/fonts/Inter-BoldItalic.woff") format("woff"),
|
||||||
|
;
|
||||||
|
}
|
||||||
|
|
||||||
// @font-face {
|
// @font-face {
|
||||||
// font-family: 'Inter';
|
// font-family: 'Inter';
|
||||||
// font-style: normal;
|
// font-style: normal;
|
||||||
|
|||||||
@@ -1,15 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<Layout :show-sidebar="false">
|
<Layout :show-sidebar="false">
|
||||||
<app-section>
|
<app-section>
|
||||||
<h1>
|
<div class="text">
|
||||||
Headless WYSIWYG Text Editor
|
<h1 class="is-large">
|
||||||
</h1>
|
A framework to build the editor you want
|
||||||
<p>
|
</h1>
|
||||||
tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
|
<p class="is-large">
|
||||||
</p>
|
tiptap is a headless wrapper around <a href="https://ProseMirror.net">ProseMirror</a> – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as <em>New York Times</em>, <em>The Guardian</em> or <em>Atlassian</em>.
|
||||||
<p>
|
</p>
|
||||||
Create exactly the rich text editor you want out of customizable building blocks. tiptap comes with sensible defaults, a lot of extensions and a friendly API to customize every aspect. It’s backed by a welcoming community, open source, and free.
|
<p class="is-large">
|
||||||
</p>
|
Create exactly the rich text editor you want out of customizable building blocks. tiptap comes with sensible defaults, a lot of extensions and a friendly API to customize every aspect. It’s backed by a welcoming community, open source, and free.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</app-section>
|
</app-section>
|
||||||
|
|
||||||
<app-section>
|
<app-section>
|
||||||
@@ -17,69 +19,77 @@
|
|||||||
</app-section>
|
</app-section>
|
||||||
|
|
||||||
<app-section>
|
<app-section>
|
||||||
<h2>
|
<div class="text">
|
||||||
Features
|
<h2 class="is-h1">
|
||||||
</h2>
|
Features
|
||||||
|
</h2>
|
||||||
|
|
||||||
<h3>
|
<h3>
|
||||||
Headless
|
Headless
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
We don’t tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is headless and comes without any CSS. You are in full control over markup, styling and behaviour.
|
We don’t tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is headless and comes without any CSS. You are in full control over markup, styling and behaviour.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3>
|
<h3>
|
||||||
Framework-agnostic
|
Framework-agnostic
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
No matter what framework you use, you’ll enjoy tiptap. Out of the box, it works with plain JavaScript and Vue.js, but it’s also possible to use it in [React](/guide/getting-started/react), Svelte and others.
|
No matter what framework you use, you’ll enjoy tiptap. Out of the box, it works with plain JavaScript and Vue.js, but it’s also possible to use it in [React](/guide/getting-started/react), Svelte and others.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3>
|
<h3>
|
||||||
TypeScript
|
TypeScript
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
tiptap 2 is written in TypeScript. That helps us to find bugs early and gives you a nice autocomplete for the API (if your IDE supports that) on top of the extensive human written documentation.
|
tiptap 2 is written in TypeScript. That helps us to find bugs early and gives you a nice autocomplete for the API (if your IDE supports that) on top of the extensive human written documentation.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3>
|
<h3>
|
||||||
Collaborative
|
Collaborative
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
Real-time collaboration, syncing between different devices and working offline used to be hard. We provide everything you need to keep everything in sync, conflict-free with the power of [Y.js](https://github.com/yjs/yjs). Our production-grade setup requires less than 20 lines of code.
|
Real-time collaboration, syncing between different devices and working offline used to be hard. We provide everything you need to keep everything in sync, conflict-free with the power of [Y.js](https://github.com/yjs/yjs). Our production-grade setup requires less than 20 lines of code.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h3>
|
<h3>
|
||||||
Community
|
Community
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p>
|
||||||
Over the years, a lovely community has grown around tiptap. There’s so much content shared, so many people helping out in issues and a ton of community extensions, you’ll be surprised how much that can help.
|
Over the years, a lovely community has grown around tiptap. There’s so much content shared, so many people helping out in issues and a ton of community extensions, you’ll be surprised how much that can help.
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
</app-section>
|
</app-section>
|
||||||
|
|
||||||
<app-section>
|
<app-section>
|
||||||
<h2>
|
<div class="text">
|
||||||
Who uses tiptap?
|
<h2 class="is-h1">
|
||||||
</h2>
|
Who uses tiptap?
|
||||||
- [GitLab](https://gitlab.com)
|
</h2>
|
||||||
- [Statamic CMS](https://statamic.com)
|
<p>
|
||||||
- [Twill CMS](https://twill.io)
|
- [GitLab](https://gitlab.com)
|
||||||
- [ApostropheCMS](https://apostrophecms.com)
|
- [Statamic CMS](https://statamic.com)
|
||||||
- [Directus CMS](https://directus.io)
|
- [Twill CMS](https://twill.io)
|
||||||
- [Nextcloud](https://apps.nextcloud.com/apps/text)
|
- [ApostropheCMS](https://apostrophecms.com)
|
||||||
- [DocIQ](https://www.dociq.io)
|
- [Directus CMS](https://directus.io)
|
||||||
- [ycode](https://www.ycode.com/)
|
- [Nextcloud](https://apps.nextcloud.com/apps/text)
|
||||||
- [Scrumpy](https://www.scrumpy.io)
|
- [DocIQ](https://www.dociq.io)
|
||||||
- … and [many more](https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D)
|
- [ycode](https://www.ycode.com/)
|
||||||
|
- [Scrumpy](https://www.scrumpy.io)
|
||||||
|
- … and [many more](https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</app-section>
|
</app-section>
|
||||||
|
|
||||||
<app-section>
|
<app-section>
|
||||||
<h2>
|
<div class="text">
|
||||||
License
|
<h2 class="is-h1">
|
||||||
</h2>
|
License
|
||||||
<p>
|
</h2>
|
||||||
tiptap is licensed under [MIT](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md), so you’re free to do whatever you want. If you’re using it in production, do the right thing and [become one of our wonderful sponsors](/sponsor) to fund the development, maintenance and support of tiptap and the whole ecosystem.
|
<p>
|
||||||
</p>
|
tiptap is licensed under [MIT](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md), so you’re free to do whatever you want. If you’re using it in production, do the right thing and [become one of our wonderful sponsors](/sponsor) to fund the development, maintenance and support of tiptap and the whole ecosystem.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</app-section>
|
</app-section>
|
||||||
</Layout>
|
</Layout>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,9 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<Layout>
|
<Layout>
|
||||||
<app-section>
|
<app-section>
|
||||||
<div class="doc-page">
|
<VueRemarkContent class="text" />
|
||||||
<VueRemarkContent class="doc-page__markdown" />
|
|
||||||
</div>
|
|
||||||
</app-section>
|
</app-section>
|
||||||
</Layout>
|
</Layout>
|
||||||
</template>
|
</template>
|
||||||
@@ -72,5 +70,3 @@ export default {
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" src="./style.scss" scoped></style>
|
|
||||||
|
|||||||
@@ -1,279 +0,0 @@
|
|||||||
.doc-page {
|
|
||||||
&__markdown ::v-deep {
|
|
||||||
$spacing: 0.75em;
|
|
||||||
|
|
||||||
> div,
|
|
||||||
> p,
|
|
||||||
> ul,
|
|
||||||
> ol,
|
|
||||||
> blockquote {
|
|
||||||
margin-top: 2 * $spacing;
|
|
||||||
margin-bottom: 2 * $spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
> ul li,
|
|
||||||
> ol li,
|
|
||||||
> ul ul,
|
|
||||||
> ul ol,
|
|
||||||
> ol ol,
|
|
||||||
> ol ul {
|
|
||||||
margin-top: 0.5 * $spacing;
|
|
||||||
margin-bottom: 0.5 * $spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
> h1,
|
|
||||||
> h2,
|
|
||||||
> h3,
|
|
||||||
> h4,
|
|
||||||
> h5,
|
|
||||||
> h6 {
|
|
||||||
color: $colorBlack;
|
|
||||||
margin-top: 3 * $spacing;
|
|
||||||
margin-bottom: $spacing;
|
|
||||||
|
|
||||||
& + * {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> h1,
|
|
||||||
> h4,
|
|
||||||
> h5,
|
|
||||||
> h6 {
|
|
||||||
a {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> h2,
|
|
||||||
> h3 {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
a {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 100%;
|
|
||||||
color: rgba($colorBlack, 0.4);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 400;
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.1s $ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover a {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> p > img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
> pre {
|
|
||||||
border: 1px solid rgba($colorBlack, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
> p code,
|
|
||||||
> ul code,
|
|
||||||
> ol code,
|
|
||||||
> .table-wrapper code,
|
|
||||||
> .remark-container code {
|
|
||||||
color: rgba($colorBlack, 0.7);
|
|
||||||
background-color: rgba($colorYellow, 0.3);
|
|
||||||
box-decoration-break: clone;
|
|
||||||
}
|
|
||||||
|
|
||||||
> p a,
|
|
||||||
> ul a,
|
|
||||||
> ol a,
|
|
||||||
> .table-wrapper a,
|
|
||||||
> .remark-container a {
|
|
||||||
text-decoration: underline;
|
|
||||||
|
|
||||||
code {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#toc {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
& + ul {
|
|
||||||
list-style: none;
|
|
||||||
background-color: rgba($colorBlack, 0.03);
|
|
||||||
padding: 1.25rem !important;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
display: block;
|
|
||||||
content: 'On this page';
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.025rem;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: rgba($colorBlack, 0.3);
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
padding-left: 0;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p a img[src^="https://img.shields.io"] {
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
> ul {
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 1.25rem;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 0.75rem;
|
|
||||||
content: "\2022";
|
|
||||||
color: $colorBlack;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> ol {
|
|
||||||
list-style: none;
|
|
||||||
counter-reset: item;
|
|
||||||
|
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 2.5rem;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
margin-top: 1px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 1.5rem;
|
|
||||||
width: 1.5rem;
|
|
||||||
background-color: rgba($colorBlack, 0.1);
|
|
||||||
border-radius: 9999px;
|
|
||||||
color: $colorBlack;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 700;
|
|
||||||
content: counter(item);
|
|
||||||
counter-increment: item;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .table-wrapper {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
overflow-x: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
|
|
||||||
> table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 0.5rem;
|
|
||||||
min-width: 8rem;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
white-space: nowrap;
|
|
||||||
color: $colorBlack;
|
|
||||||
font-weight: 500;
|
|
||||||
border-bottom: 1px solid rgba($colorBlack, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
border-bottom: 1px solid rgba($colorBlack, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:last-child td {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr {
|
|
||||||
&:last-child td {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba($colorBlack, 0.02);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .remark-container {
|
|
||||||
padding: 1.25rem;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
color: rgba($colorBlack, 0.7);
|
|
||||||
|
|
||||||
&.warning {
|
|
||||||
background-color: rgba($colorYellow, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.info {
|
|
||||||
background-color: rgba($colorBlue, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.error {
|
|
||||||
background-color: rgba($colorRed, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.pro {
|
|
||||||
background-color: rgba($colorOrange, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.remark-container-title {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> blockquote {
|
|
||||||
border-left: 1px solid rgba($colorGrey, 0.5);
|
|
||||||
padding-left: 2 * $spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user