ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

improve styling

Browse Source
This commit is contained in:
Philipp Kühn
2021-02-02 12:40:58 +01:00
committed by Hans Pagel
parent a0ef78a603
commit 49ab7ebb04
5 changed files with 398 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
docs/src/layouts/App/base.scss
View File

@@ -95,3 +95,304 @@ code {
.DocSearch-Container {
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;
}
}

50
docs/src/layouts/App/fonts.scss
View File

@@ -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-family: 'Inter';
// font-style: normal;
// font-weight: 700;
// font-weight: 600;
// src:
// url("~@/assets/fonts/Inter-Bold.woff2") format("woff2"),
// url("~@/assets/fonts/Inter-Bold.woff") format("woff"),
// 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: 700;
// font-weight: 600;
// src:
// url("~@/assets/fonts/Inter-BoldItalic.woff2") format("woff2"),
// url("~@/assets/fonts/Inter-BoldItalic.woff") format("woff"),
// url("~@/assets/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
// 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-family: 'Inter';
// font-style: normal;

26
docs/src/pages/index.vue
View File

@@ -1,15 +1,17 @@
<template>
<Layout :show-sidebar="false">
<app-section>
<h1>
Headless WYSIWYG Text Editor
<div class="text">
<h1 class="is-large">
A framework to build the editor you want
</h1>
<p>
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">
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>
<p class="is-large">
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>
@@ -17,7 +19,8 @@
</app-section>
<app-section>
<h2>
<div class="text">
<h2 class="is-h1">
Features
</h2>
@@ -55,12 +58,15 @@
<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.
</p>
</div>
</app-section>
<app-section>
<h2>
<div class="text">
<h2 class="is-h1">
Who uses tiptap?
</h2>
<p>
- [GitLab](https://gitlab.com)
- [Statamic CMS](https://statamic.com)
- [Twill CMS](https://twill.io)
@@ -71,15 +77,19 @@
- [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>
<h2>
<div class="text">
<h2 class="is-h1">
License
</h2>
<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>
</Layout>
</template>

6
docs/src/templates/DocPage/index.vue
View File

@@ -1,9 +1,7 @@
<template>
<Layout>
<app-section>
<div class="doc-page">
<VueRemarkContent class="doc-page__markdown" />
</div>
<VueRemarkContent class="text" />
</app-section>
</Layout>
</template>
@@ -72,5 +70,3 @@ export default {
},
}
</script>
<style lang="scss" src="./style.scss" scoped></style>

279
docs/src/templates/DocPage/style.scss
View File

@@ -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;
}
}
}