Update docs
This commit is contained in:
Vadim
127
docs/index.css
127
docs/index.css
@@ -3,11 +3,130 @@ html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}/**
|
||||
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
|
||||
* Based on https://github.com/chriskempson/tomorrow-theme
|
||||
* @author Rose Pritchard
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #ccc;
|
||||
background: none;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}.color-container.svelte-yl9omk.svelte-yl9omk{height:100px;display:flex;align-items:center;justify-content:center;user-select:none}.color-container.svelte-yl9omk>p.svelte-yl9omk{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-style:italic;font-size:18px}.main-container.svelte-7d88a5.svelte-7d88a5{display:flex;width:100%;flex-direction:column;align-items:center}.carousel-container.svelte-7d88a5.svelte-7d88a5{display:flex;width:100%}.content-container.svelte-7d88a5.svelte-7d88a5{flex:1;display:flex;overflow:hidden;box-sizing:border-box}.content-container.svelte-7d88a5>div.svelte-7d88a5{width:100%;display:flex;transition-timing-function:ease-in-out;transition-property:transform}.arrow-container.svelte-7d88a5.svelte-7d88a5{padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}:root{--dot-size:10px}.main-container.svelte-1j143j1{display:flex;align-items:center}.dot-container.svelte-1j143j1{height:calc(var(--dot-size) + 10px);width:calc(var(--dot-size) + 10x);display:flex;align-items:center;justify-content:center}:root{--size:2px
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
}
|
||||
|
||||
.token.function-name {
|
||||
color: #6196cc;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function {
|
||||
color: #f08d49;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #f8c555;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.builtin {
|
||||
color: #cc99cd;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #7ec699;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #67cdcc;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
}
|
||||
.color-container.svelte-1wnaxpj.svelte-1wnaxpj{height:100px;width:100%;display:flex;align-items:center;justify-content:center;user-select:none}.color-container.svelte-1wnaxpj>p.svelte-1wnaxpj{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-style:italic;font-size:18px}.main-container.svelte-5wk0f1.svelte-5wk0f1{display:flex;width:100%;flex-direction:column;align-items:center}.carousel-container.svelte-5wk0f1.svelte-5wk0f1{position:relative;display:flex;width:100%}.content-container.svelte-5wk0f1.svelte-5wk0f1{flex:1;display:flex;overflow:hidden;box-sizing:border-box}.content-container.svelte-5wk0f1>div.svelte-5wk0f1{width:100%;display:flex;transition-timing-function:ease-in-out;transition-property:transform}.arrow-container.svelte-5wk0f1.svelte-5wk0f1{padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.albums-container.svelte-cnc8a5.svelte-cnc8a5{display:flex;justify-content:center;flex-wrap:wrap}.album-container.svelte-cnc8a5.svelte-cnc8a5{width:250px;padding:10px;background-color:#c6c6c6;border-radius:5px;margin:5px}.album-title.svelte-cnc8a5.svelte-cnc8a5{font-size:16px}.album-size.svelte-cnc8a5.svelte-cnc8a5{font-size:10px;color:#585858}.album-tag.svelte-cnc8a5.svelte-cnc8a5{background-color:#8f8f8f;border-radius:5px;padding:1px 5px;color:#ffffff;margin-top:3px;margin-bottom:3px;display:inline-block;font-size:10px}.album-tag.svelte-cnc8a5.svelte-cnc8a5:not(:last-child){margin-right:3px}.album-arrow.svelte-cnc8a5.svelte-cnc8a5{width:20px;background-color:#000000;opacity:0;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center}.album-arrow.svelte-cnc8a5>i.svelte-cnc8a5{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.album-container.svelte-cnc8a5:hover .album-arrow.svelte-cnc8a5{opacity:0.5}.album-arrow-prev.svelte-cnc8a5.svelte-cnc8a5{left:0}.album-arrow-prev.svelte-cnc8a5>i.svelte-cnc8a5{transform:rotate(135deg);right:-4px}.album-arrow-next.svelte-cnc8a5.svelte-cnc8a5{right:0}.album-arrow-next.svelte-cnc8a5>i.svelte-cnc8a5{transform:rotate(-45deg);left:-4px}.docs__main-layout__main-container.svelte-j98mm2{background-color:#eaeaea}.docs__main-layout__content-container.svelte-j98mm2{display:flex;justify-content:center}@media screen and (min-width: 0px){.docs__main-layout__content-inner-container.svelte-j98mm2{width:100%}}@media screen and (min-width: 768px){.docs__main-layout__content-inner-container.svelte-j98mm2{width:70%}}@media screen and (min-width: 992px){.docs__main-layout__content-inner-container.svelte-j98mm2{width:60%}}@media screen and (min-width: 1200px){.docs__main-layout__content-inner-container.svelte-j98mm2{width:50%}}.image-container.svelte-1cv82er{display:block;width:100%;height:150px}img.svelte-1cv82er{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}:root{--dot-size:10px}.main-container.svelte-1j143j1{display:flex;align-items:center}.dot-container.svelte-1j143j1{height:calc(var(--dot-size) + 10px);width:calc(var(--dot-size) + 10x);display:flex;align-items:center;justify-content:center}:root{--size:2px
|
||||
}.circle.svelte-1bt6c9d{width:20px;height:20px;border-radius:50%;background-color:rgba(93, 93, 93, 0.5);display:flex;align-items:center;justify-content:center;transition:opacity 100ms ease;cursor:pointer}.circle.svelte-1bt6c9d:hover{opacity:0.9}.arrow.svelte-1bt6c9d{border:solid #1e1e1e;border-width:0 var(--size) var(--size) 0;padding:var(--size);position:relative}.next.svelte-1bt6c9d{transform:rotate(-45deg);left:calc(var(--size) / -2)}.prev.svelte-1bt6c9d{transform:rotate(135deg);right:calc(var(--size) / -2)}.disabled.svelte-1bt6c9d,.disabled.svelte-1bt6c9d:hover{opacity:0.5}.main-container.svelte-6wkp3k{display:flex;align-items:center;justify-content:center;height:16px;width:16px}.dot.svelte-6wkp3k{background-color:#5d5d5d;border-radius:50%;display:inline-block;opacity:0.5;cursor:pointer;transition:opacity 100ms ease}.dot.svelte-6wkp3k:hover{opacity:0.9}.current.svelte-6wkp3k{opacity:0.7}
|
||||
File diff suppressed because one or more lines are too long
@@ -28,7 +28,7 @@
|
||||
/**
|
||||
* Page to start on
|
||||
*/
|
||||
export let initialPageIndex = 1
|
||||
export let initialPageIndex = 0
|
||||
|
||||
/**
|
||||
* Transition speed (ms)
|
||||
@@ -197,7 +197,10 @@
|
||||
"
|
||||
bind:this={pagesElement}
|
||||
>
|
||||
<slot></slot>
|
||||
<slot
|
||||
currentPageIndex={originalCurrentPageIndex}
|
||||
>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
{#if arrows}
|
||||
@@ -236,6 +239,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
.carousel-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
146
src/docs/AlbumsPreview/AlbumsPreview.svelte
Normal file
146
src/docs/AlbumsPreview/AlbumsPreview.svelte
Normal file
@@ -0,0 +1,146 @@
|
||||
<script>
|
||||
import Carousel from '../../components/Carousel/Carousel.svelte'
|
||||
import Image from './Image.svelte'
|
||||
|
||||
const albums = {
|
||||
forest: {
|
||||
title: 'Forest',
|
||||
tags: ['forest', 'trees'],
|
||||
images: [
|
||||
'https://cdn.pixabay.com/photo/2017/04/09/09/56/avenue-2215317_1280.jpg',
|
||||
'https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477_1280.jpg',
|
||||
'https://cdn.pixabay.com/photo/2016/08/11/23/55/trees-1587301_1280.jpg'
|
||||
]
|
||||
},
|
||||
birds: {
|
||||
title: 'Birds',
|
||||
tags: ['birds', 'owl', 'parrot'],
|
||||
images: [
|
||||
'https://cdn.pixabay.com/photo/2016/11/18/12/14/owl-1834152_1280.jpg',
|
||||
'https://cdn.pixabay.com/photo/2016/05/26/04/19/macaw-1416388_1280.jpg'
|
||||
]
|
||||
},
|
||||
flowers: {
|
||||
title: 'Flowers',
|
||||
tags: ['flowers', 'blossom', 'beauty'],
|
||||
images: [
|
||||
'https://cdn.pixabay.com/photo/2018/09/06/23/37/hydrangea-3659614_1280.jpg',
|
||||
'https://cdn.pixabay.com/photo/2016/04/12/18/19/carnation-1325012_1280.jpg',
|
||||
'https://cdn.pixabay.com/photo/2017/06/06/19/18/rose-2378156_1280.jpg'
|
||||
]
|
||||
},
|
||||
coffee: {
|
||||
title: 'Coffee',
|
||||
tags: ['coffee', 'cup'],
|
||||
images: [
|
||||
'https://cdn.pixabay.com/photo/2017/05/12/08/29/coffee-2306471_1280.jpg',
|
||||
'https://cdn.pixabay.com/photo/2016/03/30/21/59/coffee-beans-1291656_1280.jpg',
|
||||
'https://cdn.pixabay.com/photo/2018/01/31/09/57/coffee-3120750_1280.jpg',
|
||||
]
|
||||
}
|
||||
}
|
||||
function imagesLength(length) {
|
||||
return `${length} image${length > 1 ? 's' : ''}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="albums-container">
|
||||
{#each Object.entries(albums) as [albumKey, album] (albumKey)}
|
||||
<div class="album-container">
|
||||
<Carousel
|
||||
let:showPrevPage
|
||||
let:showNextPage
|
||||
>
|
||||
<div slot="prev" class="album-arrow album-arrow-prev" on:click={showPrevPage}>
|
||||
<i />
|
||||
</div>
|
||||
{#each album.images as imageSrc, imageIndex (imageSrc)}
|
||||
<Image src={imageSrc} alt={album.title} />
|
||||
{/each}
|
||||
<div slot="next" class="album-arrow album-arrow-next" on:click={showNextPage}>
|
||||
<i />
|
||||
</div>
|
||||
</Carousel>
|
||||
<div class="">
|
||||
<span class="album-title">{album.title}</span>
|
||||
<span class="album-size">{imagesLength(album.images.length)}</span>
|
||||
<div class="album-tags-container">
|
||||
{#each album.tags as tag (tag)}
|
||||
<span class="album-tag">{tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.albums-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.album-container {
|
||||
width: 250px;
|
||||
padding: 10px;
|
||||
background-color: #c6c6c6;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
.album-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.album-size {
|
||||
font-size: 10px;
|
||||
color: #585858;
|
||||
}
|
||||
.album-tag {
|
||||
background-color: #8f8f8f;
|
||||
border-radius: 5px;
|
||||
padding: 1px 5px;
|
||||
color: #ffffff;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
}
|
||||
.album-tag:not(:last-child) {
|
||||
margin-right: 3px;
|
||||
}
|
||||
.album-arrow {
|
||||
width: 20px;
|
||||
background-color: #000000;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
transition: opacity 150ms ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.album-arrow > i{
|
||||
border: solid #1e1e1e;
|
||||
border-width: 0 5px 5px 0;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.album-container:hover .album-arrow {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.album-arrow-prev {
|
||||
left: 0;
|
||||
}
|
||||
.album-arrow-prev > i {
|
||||
transform: rotate(135deg);
|
||||
right: -4px;
|
||||
}
|
||||
.album-arrow-next {
|
||||
right: 0;
|
||||
}
|
||||
.album-arrow-next > i {
|
||||
transform: rotate(-45deg);
|
||||
left: -4px;
|
||||
}
|
||||
</style>
|
||||
22
src/docs/AlbumsPreview/Image.svelte
Normal file
22
src/docs/AlbumsPreview/Image.svelte
Normal file
@@ -0,0 +1,22 @@
|
||||
<script>
|
||||
export let src
|
||||
export let alt
|
||||
</script>
|
||||
|
||||
<div class="image-container">
|
||||
<img {src} {alt} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.image-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import Carousel from './Carousel.svx'
|
||||
import '../../node_modules/prismjs/themes/prism.css'
|
||||
import '../../node_modules/prismjs/themes/prism-tomorrow.css'
|
||||
import './global.css'
|
||||
</script>
|
||||
|
||||
|
||||
@@ -2,17 +2,18 @@
|
||||
import _ from 'lodash'
|
||||
import Carousel from '../components/Carousel/Carousel.svelte'
|
||||
import Color from './Color.svelte'
|
||||
import AlbumsPreview from './AlbumsPreview/AlbumsPreview.svelte'
|
||||
|
||||
const colors = [
|
||||
{ color: '#e5f9f0', text: '#e5f9f0' },
|
||||
{ color: '#ccf3e2', text: '#ccf3e2' },
|
||||
{ color: '#b2edd3', text: '#b2edd3' },
|
||||
{ color: '#99e7c5', text: '#99e7c5' },
|
||||
{ color: '#7fe1b7', text: '#7fe1b7' },
|
||||
{ color: '#66dba8', text: '#66dba8' },
|
||||
{ color: '#4cd59a', text: '#4cd59a' },
|
||||
{ color: '#32cf8b', text: '#32cf8b' },
|
||||
{ color: '#19c97d', text: '#19c97d' },
|
||||
{ color: '#85d78b', text: '#85d78b' },
|
||||
{ color: '#71d077', text: '#71d077' },
|
||||
{ color: '#5dca64', text: '#5dca64' },
|
||||
{ color: '#49c351', text: '#49c351' },
|
||||
{ color: '#35bd3e', text: '#35bd3e' },
|
||||
{ color: '#2faa37', text: '#2faa37' },
|
||||
{ color: '#2a9731', text: '#2a9731' },
|
||||
{ color: '#25842b', text: '#25842b' },
|
||||
{ color: '#1f7125', text: '#1f7125' },
|
||||
]
|
||||
</script>
|
||||
|
||||
@@ -54,4 +55,6 @@
|
||||
</Carousel>
|
||||
```
|
||||
|
||||
## Albums preview or Marketplace item pictures
|
||||
|
||||
<AlbumsPreview />
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
<div class="docs__main-layout__content-container">
|
||||
<div class="docs__main-layout__content-inner-container">
|
||||
<slot></slot>
|
||||
<div class="docs__main-layout__main-container">
|
||||
<div class="docs__main-layout__content-container">
|
||||
<div class="docs__main-layout__content-inner-container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.docs__main-layout__main-container {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
.docs__main-layout__content-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -3,7 +3,7 @@ html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
Reference in New Issue
Block a user