public/svelte-carousel
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update docs

Browse Source
This commit is contained in:
Vadim
2021-01-27 01:03:46 +03:00
parent 29e63d1795
commit f9ef97c8b6
5 changed files with 254 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/docs/Layouts/Main.svelte
View File

@@ -1,9 +1,25 @@
<script>
const links = [{
title: 'github',
url: 'https://github.com/vadimkorr/svelte-carousel'
}, {
title: 'npm',
url: 'https://www.npmjs.com/package/svelte-carousel'
}]
</script>
<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 class="docs__main-layout__header-container">
<img class="docs__main-layout__logo" src="./svelte-carousel-logo-md.png" alt="svelte-carousel-logo" />
<div class="docs__main-layout__links-container">
{#each links as { url, title } (title)}
<a href={url} target="_blank" rel="noopener noreferrer">{title}</a>
{/each}
</div>
</div>
<div class="docs__main-layout__content-container">
<slot></slot>
</div>
</div>
<style>
@@ -11,27 +27,52 @@
background-color: #eaeaea;
}
.docs__main-layout__content-container {
.docs__main-layout__header-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
padding: 10px;
box-sizing: border-box;
background-color: #f0e68c;
}
.docs__main-layout__logo {
height: 80%;
}
.docs__main-layout__links-container {
display: flex;
justify-content: center;
padding: 10px;
}
.docs__main-layout__links-container > a {
text-decoration: none;
color: #009800;
}
.docs__main-layout__links-container > a:not(:last-child) {
margin-right: 10px;
}
.docs__main-layout__content-container {
margin: 0 auto;
}
@media screen and (min-width: 0px) {
.docs__main-layout__content-inner-container {
.docs__main-layout__content-container {
width: 95%;
}
}
@media screen and (min-width: 768px) {
.docs__main-layout__content-inner-container {
.docs__main-layout__content-container {
width: 70%;
}
}
@media screen and (min-width: 992px) {
.docs__main-layout__content-inner-container {
.docs__main-layout__content-container {
width: 60%;
}
}
@media screen and (min-width: 1200px) {
.docs__main-layout__content-inner-container {
.docs__main-layout__content-container {
width: 50%;
}
}