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

tutorial changes

Browse Source
pull/2437/head
Achim Vedam 5 years ago
parent 0b517eafda
commit 3c8560542b
3 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File

18
site/src/routes/tutorial/[slug]/_components/ScreenToggle.svelte
Unescape View File

@ -7,7 +7,7 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 42px; height: 4.6rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -16,15 +16,15 @@
} }
button { button {
padding: 0.3em 0.6em; margin: 0 .15em;
border-radius: 1em; width: 4em;
line-height: 1;
height: 1em; height: 1em;
padding: .2em .4em .3em;
border-radius: var(--border-r);
line-height: 1;
box-sizing: content-box; box-sizing: content-box;
color: #999; color: #888;
border: 1px solid #f4f4f4; border: 1px solid var(--back-light);
width: 4em;
margin: 0 0.15em;
} }
.selected { .selected {
@ -37,4 +37,4 @@
<button class:selected={offset === 0} on:click={() => offset = 0}>tutorial</button> <button class:selected={offset === 0} on:click={() => offset = 0}>tutorial</button>
<button class:selected={offset === 1} on:click={() => offset = 1}>input</button> <button class:selected={offset === 1} on:click={() => offset = 1}>input</button>
<button class:selected={offset === 2} on:click={() => offset = 2}>output</button> <button class:selected={offset === 2} on:click={() => offset = 2}>output</button>
</div> </div>

11
site/src/routes/tutorial/[slug]/_components/TableOfContents.svelte
Unescape View File

@ -38,13 +38,8 @@
opacity: 0.4; opacity: 0.4;
} }
span { span { white-space: nowrap }
white-space: nowrap; strong { opacity: 0.7 }
}
strong {
opacity: 0.7;
}
select { select {
position: absolute; position: absolute;
@ -86,4 +81,4 @@
<a rel="prefetch" href="tutorial/{(selected.next || selected).slug}" class:disabled={!selected.next}> <a rel="prefetch" href="tutorial/{(selected.next || selected).slug}" class:disabled={!selected.next}>
<Icon name="arrow-right" /> <Icon name="arrow-right" />
</a> </a>
</nav> </nav>

45
site/src/routes/tutorial/[slug]/index.svelte
Unescape View File

@ -114,7 +114,6 @@
height: calc(100vh - var(--nav-h)); height: calc(100vh - var(--nav-h));
overflow: hidden; overflow: hidden;
padding: 0 0 42px 0; padding: 0 0 42px 0;
/* margin: 0 calc(var(--side-nav) * -1); */
box-sizing: border-box; box-sizing: border-box;
} }
@ -123,7 +122,7 @@
width: 300%; width: 300%;
height: 100%; height: 100%;
grid-template-columns: 33.333% 66.666%; grid-template-columns: 33.333% 66.666%;
transition: transform 0.3s; transition: transform .3s;
grid-auto-rows: 100%; grid-auto-rows: 100%;
} }
@ -131,9 +130,7 @@
.offset-2 { transform: translate(-66.666%, 0); } .offset-2 { transform: translate(-66.666%, 0); }
@media (min-width: 768px) { @media (min-width: 768px) {
.tutorial-outer { .tutorial-outer { padding: 0 }
padding: 0;
}
.viewport { .viewport {
width: 100%; width: 100%;
@ -157,19 +154,23 @@
} }
.chapter-markup { .chapter-markup {
padding: 1em; padding: 3.2rem 4rem;
overflow: auto; overflow: auto;
flex: 1; flex: 1;
height: 0; height: 0;
} }
.chapter-markup :global(h2) { .chapter-markup :global(h2) {
margin: 4rem 0 1.6rem 0;
font-size: var(--h3); font-size: var(--h3);
margin: 3.2rem 0 1.6rem 0;
line-height: 1; line-height: 1;
color: white; color: white;
} }
.chapter-markup :global(h2:first-child) {
margin-top: .4rem;
}
.chapter-markup :global(a) { .chapter-markup :global(a) {
text-decoration: underline; text-decoration: underline;
} }
@ -179,7 +180,7 @@
} }
.chapter-markup :global(blockquote) { .chapter-markup :global(blockquote) {
background-color: rgba(255,255,255,0.1); background-color: rgba(255,255,255,.1);
color: white; color: white;
} }
@ -189,7 +190,7 @@
} }
.chapter-markup::-webkit-scrollbar-thumb { .chapter-markup::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,0.7); background-color: rgba(255,255,255,.7);
border-radius: 1em; border-radius: 1em;
outline: 1px solid green; outline: 1px solid green;
} }
@ -197,45 +198,49 @@
.chapter-markup :global(p) > :global(code), .chapter-markup :global(p) > :global(code),
.chapter-markup :global(ul) :global(code) { .chapter-markup :global(ul) :global(code) {
color: white; color: white;
background: rgba(255,255,255,0.1); background: rgba(255,255,255,.1);
padding: 0.2em 0.4em; padding: .2em .4em;
white-space: nowrap; white-space: nowrap;
} }
.controls { .controls {
border-top: 1px solid rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,.1);
padding: 1em 0 0 0; padding: 1em 0 0 0;
display: flex; display: flex;
} }
.show { .show {
text-transform: uppercase; background: rgba(255,255,255,.1);
background: rgba(255,255,255,0.1); padding: .2em .7em .3em;
padding: 0.2em 0.7em; border-radius: var(--border-r);
border-radius: 2em; top: .1em;
top: 0.1em;
position: relative; position: relative;
font-size: var(--h5); font-size: var(--h5);
font-weight: 300; font-weight: 300;
} }
.show:hover { .show:hover {
background: rgba(255,255,255,0.2); background: rgba(255,255,255,.2);
} }
a.next { a.next {
text-decoration: none;
margin-left: auto; margin-left: auto;
} }
a.next:hover {
text-decoration: underline;
}
.improve-chapter { .improve-chapter {
padding: 1em 0 .5em 0; padding: 1em 0 .5em 0;
} }
.improve-chapter a { .improve-chapter a {
padding: 0 .1em;
font-size: 14px; font-size: 14px;
text-decoration: none; text-decoration: none;
opacity: 0.3; opacity: .3;
padding: 0 0.1em;
} }
.improve-chapter a:hover { .improve-chapter a:hover {

Write Preview
Loading…
Cancel
Save