msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

docs changes

Browse Source
pull/2437/head
Achim Vedam 6 years ago
parent 3360176d7e
commit 3f8fa18443
2 changed files with 39 additions and 93 deletions
Show Stats Download Patch File Download Diff File

53
site/src/routes/docs/_GuideContents.svelte
Unescape View File

@ -7,38 +7,6 @@
export let show_contents; export let show_contents;
export let prevent_sidebar_scroll = false; export let prevent_sidebar_scroll = false;
onMount(() => {
// ------------------------------------------
// TODO – smooth-scroll
// must be something that makes more sense
// this one is too annoying (area too tall)
// maybe svelte-transitions are a solution?
// unfortunately I have no idea how. For now.
// ------------------------------------------
// methods: {
// scrollTo(e, item) {
// e.preventDefault();
// let top = document.querySelector('#' + item).getBoundingClientRect().top;
// window.scrollTo({
// top,
// behavior: "smooth"
// });
// }
// },
const onhashchange = _ => {
// TODO wire this up
// this.store.set({active_section: window.location.hash.slice(1) });
};
window.addEventListener('hashchange', onhashchange, false);
onhashchange();
return () => {
window.removeEventListener('hashchange', onhashchange, false);
};
});
let ul; let ul;
afterUpdate(() => { afterUpdate(() => {
@ -75,22 +43,22 @@
.reference-toc li { .reference-toc li {
display: block; display: block;
line-height: 1.2; line-height: 1.2;
margin: 0 0 4.8rem 0; margin: 0 0 4rem 0;
} }
a { a {
position: relative; position: relative;
opacity: 0.7; opacity: 0.75;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
.section { .section {
display: block; display: block;
padding: 0 0 .8rem 0; padding: 0 0 .8rem 0;
font: 400 var(--h6) var(--font); font-size: var(--h6);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.12em; letter-spacing: 0.1em;
font-weight: 700; font-weight: 600;
} }
.subsection { .subsection {
@ -107,18 +75,15 @@
} }
.subsection[data-level="4"] { .subsection[data-level="4"] {
padding-left: 1em; padding-left: 1.2rem;
} }
.active { .active { opacity: 1 }
opacity: 1;
/* font-weight: 700; */
}
.icon-container { .icon-container {
position: absolute; position: absolute;
top: -.3rem; top: -.2rem;
right: 3.2rem; right: 2.4rem;
} }
</style> </style>

77
site/src/routes/docs/index.svelte
Unescape View File

@ -74,7 +74,6 @@
<style> <style>
aside { aside {
/* display: none; */
position: fixed; position: fixed;
background-color: white; background-color: white;
left: 0.8rem; left: 0.8rem;
@ -84,7 +83,6 @@
overflow: hidden; overflow: hidden;
border: 1px solid #eee; border: 1px solid #eee;
box-shadow: 1px 1px 6px rgba(0,0,0,0.1); box-shadow: 1px 1px 6px rgba(0,0,0,0.1);
padding: 1.6rem;
transition: width 0.2s, height 0.2s; transition: width 0.2s, height 0.2s;
} }
@ -130,17 +128,16 @@
overflow-y: auto; overflow-y: auto;
width: calc(100vw - 4.8rem); width: calc(100vw - 4.8rem);
height: calc(100vh - var(--nav-h) - 10.8rem); height: calc(100vh - var(--nav-h) - 10.8rem);
padding: 2em 0; padding: 2em 1.6rem 2em 3.2rem;
bottom: 2em; bottom: 2em;
} }
.content { .content {
width: 100%; width: 100%;
/* max-width: calc(var(--main-width) + var(--side-nav)); */
margin: 0; margin: 0;
-moz-tab-size: 2;
padding: var(--top-offset) var(--side-nav); padding: var(--top-offset) var(--side-nav);
tab-size: 2; tab-size: 2;
-moz-tab-size: 2;
} }
@media (min-width: 832px) { /* can't use vars in @media :( */ @media (min-width: 832px) { /* can't use vars in @media :( */
@ -174,7 +171,7 @@
} }
.sidebar { .sidebar {
padding: var(--top-offset) 0; padding: var(--top-offset) 0 6.4rem 3.2rem;
font-family: var(--font); font-family: var(--font);
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
@ -183,7 +180,6 @@
} }
.content { .content {
/* max-width: none; */
padding-left: calc(var(--sidebar-w) + var(--side-nav)); padding-left: calc(var(--sidebar-w) + var(--side-nav));
} }
@ -194,23 +190,14 @@
} }
} }
@media (min-width: 1200px) { /* can't use vars in @media :( */
aside {
display: block;
}
.content {
/* box-sizing: content-box; */
/* padding-right: calc(50% - 50rem); */
}
}
.content h2 { .content h2 {
margin-top: 16rem; margin-top: 8rem;
padding: 2rem 1.6rem 5.6rem 0.2rem; padding: 2rem 1.6rem 5.6rem 0.2rem;
border-top: 2px solid var(--second); border-top: var(--border-w) solid #6767785b; /* based on --second */
color: var(--second); color: black;
line-height: 1; line-height: 1;
font-size: var(--h3);
letter-spacing: .05em;
text-transform: uppercase; text-transform: uppercase;
} }
@ -260,18 +247,26 @@
.content :global(h3), .content :global(h3),
.content :global(h3 > code) { .content :global(h3 > code) {
font-weight: 700; margin: 6.4rem 0 0 0;
font-size: var(--h3); padding: 2rem 1.6rem 5.6rem .2rem;
color: var(--second); color: black;
margin: 6.4rem 0 1.6rem 0; border-top: var(--border-w) solid #6767781f; /* based on --second */
padding-left: 0;
background: transparent; background: transparent;
line-height: 1; line-height: 1;
} }
/* avoid doubled border-top */
.content :global(h3 > code) {
border-radius: 0 0 0 0;
border: none;
font-size: var(--h4);
line-height: 1.2;
}
.content :global(h4), .content :global(h4),
.content :global(h4 > code) { .content :global(h4 > code) {
font-weight: 700; font-weight: 600;
font-size: var(--h4); font-size: var(--h4);
color: var(--second); color: var(--second);
margin: 6.4rem 0 1.6rem 0; margin: 6.4rem 0 1.6rem 0;
@ -289,7 +284,7 @@
padding: .3rem .8rem .3rem; padding: .3rem .8rem .3rem;
margin: 0 0.2rem; margin: 0 0.2rem;
top: -.1rem; top: -.1rem;
background: #f4f4f4; background: var(--back-api);
} }
.content :global(pre) :global(code) { .content :global(pre) :global(code) {
@ -304,8 +299,8 @@
} }
.content :global(.icon) { .content :global(.icon) {
width: 20px; width: 2rem;
height: 20px; height: 2rem;
stroke: currentColor; stroke: currentColor;
stroke-width: 2; stroke-width: 2;
stroke-linecap: round; stroke-linecap: round;
@ -319,20 +314,18 @@
section > :global(.code-block) > :global(pre) { section > :global(.code-block) > :global(pre) {
display: inline-block; display: inline-block;
background: transparent; background: var(--back-api);
color: white; color: white;
padding: 0.4em 0.8em; padding: .3rem .8rem;
margin: 0; margin: 0;
border: 1px solid #81b9e0;
box-shadow: none;
max-width: 100%; max-width: 100%;
} }
section > :global(.code-block)> :global(pre.language-markup) { section > :global(.code-block)> :global(pre.language-markup) {
background: #f7fcff; padding: .3rem .8rem .2rem;
background: var(--back-api);
} }
/* max line-length ~60 chars */
section > :global(p) { section > :global(p) {
max-width: var(--linemax) max-width: var(--linemax)
} }
@ -352,24 +345,12 @@
section :global(blockquote) { section :global(blockquote) {
color: hsl(204, 100%, 50%); color: hsl(204, 100%, 50%);
border: 2px solid var(--flash); border: 2px solid var(--flash);
/* padding-left: 8.8rem; */
} }
section :global(blockquote) :global(code) { section :global(blockquote) :global(code) {
background: hsl(204, 100%, 95%) !important; background: hsl(204, 100%, 95%) !important;
color: hsl(204, 100%, 50%); color: hsl(204, 100%, 50%);
} }
section :global(blockquote::before) {
content: ' ';
position: absolute;
top: 1.5rem;
left: 3.2rem;
width: 3rem;
height: 3rem;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#40b3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12' y2='17'/%3E%3C/svg%3E");
}
</style> </style>
<svelte:head> <svelte:head>

Write Preview
Loading…
Cancel
Save