From d006f96fb31d4023e2dddc372aaec264a2906c5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 29 Jan 2021 11:46:19 +0100 Subject: [PATCH 01/26] black to white --- docs/src/components/Demo/style.scss | 3 +- docs/src/components/PageNavigation/style.scss | 6 +-- docs/src/layouts/App/base.scss | 44 +--------------- docs/src/layouts/App/style.scss | 30 +++++------ docs/src/templates/DocPage/style.scss | 50 ++++++++----------- docs/src/variables.scss | 2 +- 6 files changed, 44 insertions(+), 91 deletions(-) diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss index 69530caf..2cbbaf35 100644 --- a/docs/src/components/Demo/style.scss +++ b/docs/src/components/Demo/style.scss @@ -12,10 +12,11 @@ max-height: 50rem; overflow: auto; scroll-behavior: smooth; + border: 1px solid rgba($colorBlack, 0.1); } &__source { - border: 1px solid rgba($colorWhite, 0.1); + border: 1px solid rgba($colorBlack, 0.1); background-color: $colorBlack; } diff --git a/docs/src/components/PageNavigation/style.scss b/docs/src/components/PageNavigation/style.scss index 1583320c..a0e51f6f 100644 --- a/docs/src/components/PageNavigation/style.scss +++ b/docs/src/components/PageNavigation/style.scss @@ -4,13 +4,13 @@ padding: 1.5rem 0; &__link { - color: rgba($colorWhite, 0.6); + color: rgba($colorBlack, 0.6); padding: 0.25rem 0.5rem; border-radius: 5px; &:hover { - color: $colorWhite; - background-color: rgba($colorWhite, 0.05); + color: $colorBlack; + background-color: rgba($colorBlack, 0.05); } } } diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss index adb77670..f6e645e6 100644 --- a/docs/src/layouts/App/base.scss +++ b/docs/src/layouts/App/base.scss @@ -55,7 +55,7 @@ body { -moz-osx-font-smoothing: grayscale; line-height: 1.7; font-feature-settings: 'cv05' 1; - background-color: $colorBlack; + background-color: $colorWhite; color: $colorText; } @@ -75,7 +75,7 @@ a { text-decoration: none; &:hover { - color: $colorWhite; + color: $colorBlack; } } @@ -91,46 +91,6 @@ code { color: white; } -// TODO: Move to examples -// .ProseMirror { -// > * + * { -// margin-top: 0.75em; -// } - -// ul, -// ol { -// padding: 0 1rem; -// } - -// pre { -// background: $colorBlack; -// color: $colorWhite; -// font-family: 'JetBrainsMono', monospace; -// padding: 0.75rem 1rem; -// border-radius: 0.5rem; - -// code { -// color: inherit; -// background: none; -// font-size: 0.8rem; -// } -// } - -// img { -// max-width: 100%; -// height: auto; -// } - -// hr { -// margin: 1rem 0; -// } - -// blockquote { -// padding-left: 1rem; -// border-left: 2px solid rgba($colorBlack, 0.1); -// } -// } - .DocSearch, .DocSearch-Container { filter: saturate(0); diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss index 256e9a9c..7c648ac6 100644 --- a/docs/src/layouts/App/style.scss +++ b/docs/src/layouts/App/style.scss @@ -16,7 +16,7 @@ $menuBreakPoint: 800px; display: inline-flex; align-items: center; font-weight: 600; - color: $colorWhite; + color: $colorBlack; font-size: 1.5rem; &::after { @@ -27,7 +27,7 @@ $menuBreakPoint: 800px; letter-spacing: 0.05rem; text-transform: uppercase; border-radius: 5px; - border: 1px solid $colorWhite; + border: 1px solid $colorBlack; padding: 0 0.4em; } } @@ -51,13 +51,13 @@ $menuBreakPoint: 800px; height: 3rem; overflow: hidden; background-color: transparent; - border: 1px solid rgba($colorWhite, 0.1); + border: 1px solid rgba($colorBlack, 0.1); border-radius: 0.5rem; padding: 0.5rem 0.75rem; &::after { content: 'Search'; - color: rgba($colorWhite, 0.5); + color: rgba($colorBlack, 0.5); } } @@ -90,7 +90,7 @@ $menuBreakPoint: 800px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; - border-right: 1px solid rgba($colorWhite, 0.1); + border-right: 1px solid rgba($colorBlack, 0.1); } } @@ -121,7 +121,7 @@ $menuBreakPoint: 800px; left: 0; width: 100%; height: 100%; - background-color: $colorBlack; + background-color: $colorWhite; opacity: 0.8; transform: translate3d(0,0,0); pointer-events: none; @@ -146,7 +146,7 @@ $menuBreakPoint: 800px; transition: color 0.2s $ease; &:hover { - color: $colorWhite; + color: $colorBlack; } @media (min-width: $menuBreakPoint) { @@ -177,7 +177,7 @@ $menuBreakPoint: 800px; letter-spacing: 0.025rem; font-size: 0.75rem; text-transform: uppercase; - color: rgba($colorWhite, 0.3); + color: rgba($colorBlack, 0.3); margin-bottom: 0.5rem; } @@ -209,16 +209,16 @@ $menuBreakPoint: 800px; white-space: nowrap; &:hover { - color: $colorWhite; + color: $colorBlack; } &--exact { - color: $colorWhite; - background-color: rgba($colorWhite, 0.05); + color: $colorBlack; + background-color: rgba($colorBlack, 0.05); } &--draft { - color: rgba($colorWhite, 0.4); + color: rgba($colorBlack, 0.4); &::after { content: 'draft'; @@ -268,7 +268,7 @@ $menuBreakPoint: 800px; &--with-children::after { content: '›'; font-weight: bold; - color: rgba($colorWhite, 0.2); + color: rgba($colorBlack, 0.2); position: absolute; margin-left: -1.5em; } @@ -287,14 +287,14 @@ $menuBreakPoint: 800px; } &__page-navigation { - border-top: 1px solid rgba($colorWhite, 0.1); + border-top: 1px solid rgba($colorBlack, 0.1); } &__page-footer { font-size: 0.85rem; padding: 1.5rem 0; text-align: center; - border-top: 1px solid rgba($colorWhite, 0.1); + border-top: 1px solid rgba($colorBlack, 0.1); a { text-decoration: underline; diff --git a/docs/src/templates/DocPage/style.scss b/docs/src/templates/DocPage/style.scss index f51005ca..ac79b5be 100644 --- a/docs/src/templates/DocPage/style.scss +++ b/docs/src/templates/DocPage/style.scss @@ -27,8 +27,7 @@ > h4, > h5, > h6 { - font-weight: 500; - color: $colorWhite; + color: $colorBlack; margin-top: 3 * $spacing; margin-bottom: $spacing; @@ -54,7 +53,7 @@ position: absolute; top: 0; right: 100%; - color: rgba($colorWhite, 0.4); + color: rgba($colorBlack, 0.4); text-decoration: none; font-weight: 400; padding-right: 0.5rem; @@ -80,7 +79,7 @@ } > pre { - border: 1px solid rgba($colorWhite, 0.1); + border: 1px solid rgba($colorBlack, 0.1); } > p code, @@ -88,8 +87,8 @@ > ol code, > .table-wrapper code, > .remark-container code { - color: $colorYellow; - background-color: rgba($colorYellow, 0.1); + color: rgba($colorBlack, 0.7); + background-color: rgba($colorYellow, 0.3); box-decoration-break: clone; } @@ -110,9 +109,10 @@ & + ul { list-style: none; - border: 1px solid rgba($colorWhite, 0.1); + background-color: rgba($colorBlack, 0.03); padding: 1.25rem !important; border-radius: 0.5rem; + font-size: 0.85rem; &::before { display: block; @@ -121,7 +121,7 @@ letter-spacing: 0.025rem; font-size: 0.75rem; text-transform: uppercase; - color: rgba($colorWhite, 0.3); + color: rgba($colorBlack, 0.3); margin-bottom: 0.5rem; } @@ -157,7 +157,7 @@ display: inline-block; margin-right: 0.75rem; content: "\2022"; - color: $colorYellow; + color: $colorBlack; } } } @@ -180,9 +180,9 @@ justify-content: center; height: 1.5rem; width: 1.5rem; - background-color: rgba($colorYellow, 0.1); + background-color: rgba($colorBlack, 0.1); border-radius: 9999px; - color: $colorYellow; + color: $colorBlack; font-size: 0.75rem; font-weight: 700; content: counter(item); @@ -219,13 +219,13 @@ th { white-space: nowrap; - color: $colorWhite; + color: $colorBlack; font-weight: 500; - border-bottom: 1px solid rgba($colorWhite, 0.2); + border-bottom: 1px solid rgba($colorBlack, 0.2); } td { - border-bottom: 1px solid rgba($colorWhite, 0.1); + border-bottom: 1px solid rgba($colorBlack, 0.1); } tr:last-child td { @@ -238,7 +238,7 @@ } &:hover { - background: rgba($colorWhite, 0.02); + background: rgba($colorBlack, 0.02); } } } @@ -246,31 +246,23 @@ > .remark-container { padding: 1.25rem; - border: 1px solid rgba($colorWhite, 0.1); border-radius: 0.5rem; + color: rgba($colorBlack, 0.7); &.warning { - border-color: rgba($colorYellow, 0.1); - background-color: rgba($colorYellow, 0.1); - color: $colorYellow; + background-color: rgba($colorYellow, 0.3); } &.info { - border-color: rgba($colorBlue, 0.1); - background-color: rgba($colorBlue, 0.1); - color: $colorBlue; + background-color: rgba($colorBlue, 0.3); } &.error { - border-color: rgba($colorRed, 0.1); - background-color: rgba($colorRed, 0.1); - color: $colorRed; + background-color: rgba($colorRed, 0.3); } &.pro { - border-color: rgba($colorOrange, 0.1); - background-color: rgba($colorOrange, 0.1); - color: $colorOrange; + background-color: rgba($colorOrange, 0.3); } .remark-container-title { @@ -280,7 +272,7 @@ > blockquote { border-left: 1px solid rgba($colorGrey, 0.5); - padding-left: 2*$spacing; + padding-left: 2 * $spacing; } } diff --git a/docs/src/variables.scss b/docs/src/variables.scss index e2ec6e9b..1e908a11 100644 --- a/docs/src/variables.scss +++ b/docs/src/variables.scss @@ -1,6 +1,6 @@ $colorWhite: #FFF; $colorBlack: #0D0D0D; -$colorText: rgba($colorWhite, 0.75); +$colorText: rgba($colorBlack, 0.8); $colorGrey: #616161; $colorPurple: #A975FF; $colorRed: #FB5151; From c2309a63a71470a684480566354fb991c0dbb519 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 29 Jan 2021 14:18:43 +0100 Subject: [PATCH 02/26] add basic new page layout --- docs/src/assets/images/logo.svg | 17 +++ docs/src/layouts/App/base.scss | 4 +- docs/src/layouts/App/index.vue | 197 +++++++++++++++----------------- docs/src/layouts/App/style.scss | 122 ++++++++++---------- 4 files changed, 177 insertions(+), 163 deletions(-) create mode 100644 docs/src/assets/images/logo.svg diff --git a/docs/src/assets/images/logo.svg b/docs/src/assets/images/logo.svg new file mode 100644 index 00000000..ad843d0e --- /dev/null +++ b/docs/src/assets/images/logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss index f6e645e6..342fae83 100644 --- a/docs/src/layouts/App/base.scss +++ b/docs/src/layouts/App/base.scss @@ -28,11 +28,11 @@ border: 4px solid rgba(0, 0, 0, 0); background-clip: padding-box; border-radius: 8px; - background-color: rgba($colorWhite, 0); + background-color: rgba($colorBlack, 0); } :hover::-webkit-scrollbar-thumb { - background-color: rgba($colorWhite, 0.1); + background-color: rgba($colorBlack, 0.1); } ::-webkit-scrollbar-button { diff --git a/docs/src/layouts/App/index.vue b/docs/src/layouts/App/index.vue index 3f5e4c82..f605dc03 100644 --- a/docs/src/layouts/App/index.vue +++ b/docs/src/layouts/App/index.vue @@ -1,117 +1,110 @@ diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss index 7c648ac6..b33ffe12 100644 --- a/docs/src/layouts/App/style.scss +++ b/docs/src/layouts/App/style.scss @@ -2,14 +2,37 @@ $navHeight: 4.5rem; $mobileBreakPoint: 600px; $menuBreakPoint: 800px; -.app { - display: flex; - &__title { + +.app { + &__navigation { + position: fixed; + display: flex; + z-index: 1; + top: 0; + width: 100%; + height: $navHeight; + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba($colorBlack, 0.1); + padding: 0 2rem; + + &::after { + content: ''; + z-index: -1; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: $colorWhite; + opacity: 0.8; + transform: translate3d(0,0,0); + pointer-events: none; + } + } + + &__content { display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 2rem; } &__name { @@ -45,20 +68,6 @@ $menuBreakPoint: 800px; &__search { position: relative; - display: flex; - align-items: center; - width: 100%; - height: 3rem; - overflow: hidden; - background-color: transparent; - border: 1px solid rgba($colorBlack, 0.1); - border-radius: 0.5rem; - padding: 0.5rem 0.75rem; - - &::after { - content: 'Search'; - color: rgba($colorBlack, 0.5); - } } &__search-docsearch { @@ -85,48 +94,48 @@ $menuBreakPoint: 800px; top: 0; align-self: flex-start; padding: 2rem; + padding-top: $navHeight + 2rem; height: 100vh; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; - border-right: 1px solid rgba($colorBlack, 0.1); } } - &__content { + &__main { flex: 1 1 auto; min-width: 0; } - &__top-bar { - display: flex; - flex-direction: column; - padding: 1rem 0; - position: sticky; - z-index: 2; - top: 0; - backdrop-filter: blur(10px); - max-height: 100vh; + // &__top-bar { + // display: flex; + // flex-direction: column; + // padding: 1rem 0; + // position: sticky; + // z-index: 2; + // top: 0; + // backdrop-filter: blur(10px); + // max-height: 100vh; - @media (min-width: $menuBreakPoint) { - padding: 1.5rem 0; - } + // @media (min-width: $menuBreakPoint) { + // padding: 1.5rem 0; + // } - &::after { - content: ''; - z-index: -1; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: $colorWhite; - opacity: 0.8; - transform: translate3d(0,0,0); - pointer-events: none; - } - } + // &::after { + // content: ''; + // z-index: -1; + // position: absolute; + // top: 0; + // left: 0; + // width: 100%; + // height: 100%; + // background-color: $colorWhite; + // opacity: 0.8; + // transform: translate3d(0,0,0); + // pointer-events: none; + // } + // } &__top-bar-inner { width: 100%; @@ -283,6 +292,7 @@ $menuBreakPoint: 800px; @media (min-width: $mobileBreakPoint) { padding: 2rem 0; + padding-top: $navHeight; } } @@ -290,17 +300,6 @@ $menuBreakPoint: 800px; border-top: 1px solid rgba($colorBlack, 0.1); } - &__page-footer { - font-size: 0.85rem; - padding: 1.5rem 0; - text-align: center; - border-top: 1px solid rgba($colorBlack, 0.1); - - a { - text-decoration: underline; - } - } - &__mobile-nav { padding: 1rem; flex: 1 1 auto; @@ -313,4 +312,9 @@ $menuBreakPoint: 800px; padding: 2rem; } } + + &__footer { + border-top: 1px solid rgba($colorBlack, 0.1); + padding: 2rem; + } } From caa105b992fda348bfceedb4de4f7b618441a0f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 29 Jan 2021 14:59:05 +0100 Subject: [PATCH 03/26] add some styling --- docs/gridsome.config.js | 2 +- docs/src/components/AppSection/index.vue | 9 +++ docs/src/components/AppSection/style.scss | 15 ++++ docs/src/components/Demo/style.scss | 8 +- docs/src/layouts/App/index.vue | 11 ++- docs/src/layouts/App/style.scss | 20 ++--- docs/src/links.yaml | 2 - docs/src/pages/index.vue | 95 +++++++++++++++++++++++ docs/src/templates/DocPage/index.vue | 14 +++- 9 files changed, 157 insertions(+), 19 deletions(-) create mode 100644 docs/src/components/AppSection/index.vue create mode 100644 docs/src/components/AppSection/style.scss create mode 100644 docs/src/pages/index.vue diff --git a/docs/gridsome.config.js b/docs/gridsome.config.js index 68ebb6f2..dd739bf5 100644 --- a/docs/gridsome.config.js +++ b/docs/gridsome.config.js @@ -44,7 +44,7 @@ module.exports = { typeName: 'DocPage', baseDir: './src/docPages', template: './src/templates/DocPage/index.vue', - index: './introduction', + // index: './introduction', plugins: [ '@gridsome/remark-prismjs', 'remark-container', diff --git a/docs/src/components/AppSection/index.vue b/docs/src/components/AppSection/index.vue new file mode 100644 index 00000000..4a5bb866 --- /dev/null +++ b/docs/src/components/AppSection/index.vue @@ -0,0 +1,9 @@ + + + diff --git a/docs/src/components/AppSection/style.scss b/docs/src/components/AppSection/style.scss new file mode 100644 index 00000000..1191485e --- /dev/null +++ b/docs/src/components/AppSection/style.scss @@ -0,0 +1,15 @@ +.app-section { + position: relative; + + &__inner { + position: relative; + z-index: 2; + padding: 4rem 1rem; + margin: 0 auto; + max-width: 50rem; + + // @media (min-width: $mobileBreakPoint) { + // padding: 0 2rem; + // } + } +} diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss index 2cbbaf35..c3f24efd 100644 --- a/docs/src/components/Demo/style.scss +++ b/docs/src/components/Demo/style.scss @@ -63,12 +63,12 @@ width: 100%; padding: 0.5rem 1.25rem; font-size: 0.85rem; - border: 1px solid rgba($colorWhite, 0.1); + border-top: 1px solid rgba($colorWhite, 0.1); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; - border-top-width: 0; background-color: $colorBlack; white-space: nowrap; + color: rgba($colorWhite, 0.5); } &__name { @@ -84,6 +84,10 @@ &__link { margin-left: auto; + + &:hover { + color: $colorWhite; + } } &__error { diff --git a/docs/src/layouts/App/index.vue b/docs/src/layouts/App/index.vue index f605dc03..64009c70 100644 --- a/docs/src/layouts/App/index.vue +++ b/docs/src/layouts/App/index.vue @@ -33,7 +33,7 @@
-
+
@@ -49,7 +49,7 @@
-
+
@@ -123,6 +123,13 @@ import PageNavigation from '@/components/PageNavigation' // import GithubButton from 'vue-github-button' export default { + props: { + showSidebar: { + type: Boolean, + default: true, + }, + }, + components: { Icon, PageNavigation, diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss index b33ffe12..b3d342ff 100644 --- a/docs/src/layouts/App/style.scss +++ b/docs/src/layouts/App/style.scss @@ -8,7 +8,7 @@ $menuBreakPoint: 800px; &__navigation { position: fixed; display: flex; - z-index: 1; + z-index: 2; top: 0; width: 100%; height: $navHeight; @@ -33,6 +33,8 @@ $menuBreakPoint: 800px; &__content { display: flex; + position: relative; + z-index: 1; } &__name { @@ -163,15 +165,15 @@ $menuBreakPoint: 800px; } } - &__inner { - margin: 0 auto; - max-width: 50rem; - padding: 0 1rem; + // &__inner { + // margin: 0 auto; + // max-width: 50rem; + // padding: 0 1rem; - @media (min-width: $mobileBreakPoint) { - padding: 0 2rem; - } - } + // @media (min-width: $mobileBreakPoint) { + // padding: 0 2rem; + // } + // } &__link-group { margin-bottom: 1rem; diff --git a/docs/src/links.yaml b/docs/src/links.yaml index dbabf680..67d75b23 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -1,7 +1,5 @@ - title: Overview items: - - title: Introduction - link: / - title: Installation link: /overview/installation - title: Upgrade Guide diff --git a/docs/src/pages/index.vue b/docs/src/pages/index.vue new file mode 100644 index 00000000..2ebcb7c5 --- /dev/null +++ b/docs/src/pages/index.vue @@ -0,0 +1,95 @@ + + + diff --git a/docs/src/templates/DocPage/index.vue b/docs/src/templates/DocPage/index.vue index cbcd1b05..634ee7cd 100644 --- a/docs/src/templates/DocPage/index.vue +++ b/docs/src/templates/DocPage/index.vue @@ -1,8 +1,10 @@ @@ -19,7 +21,13 @@ query($path: String!) { + diff --git a/docs/src/main.js b/docs/src/main.js index ebe38797..00cace32 100644 --- a/docs/src/main.js +++ b/docs/src/main.js @@ -3,6 +3,7 @@ import 'prismjs/components/prism-jsx.js' import 'prismjs/components/prism-typescript.js' import 'prismjs/components/prism-scss.js' import PortalVue from 'portal-vue' +import iframeResize from 'iframe-resizer/js/iframeResizer' import App from '~/layouts/App' Prism.manual = true @@ -20,6 +21,16 @@ export default function (Vue, { head }) { } Vue.use(PortalVue) + + Vue.directive('resize', { + bind(el, { value = {} }) { + el.addEventListener('load', () => iframeResize(value, el)) + }, + unbind(el) { + el.iFrameResizer.removeListeners() + }, + }) + Vue.component('Layout', App) Vue.component('Demo', () => import(/* webpackChunkName: "demo" */ '~/components/Demo')) Vue.component('LiveDemo', () => import(/* webpackChunkName: "live-demo" */ '~/components/LiveDemo')) diff --git a/docs/src/pages/index.vue b/docs/src/pages/index.vue index 2ebcb7c5..f6f4d6da 100644 --- a/docs/src/pages/index.vue +++ b/docs/src/pages/index.vue @@ -13,6 +13,14 @@ +