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

makes links a bit more obvious, per #2445. also tweaks some /blog css

Browse Source
pull/2471/head
Richard Harris 5 years ago
parent f4d7087ea0
commit 17c5cb75b1
13 changed files with 115 additions and 87 deletions
Show Stats Download Patch File Download Diff File

6
site/src/components/TopNav.svelte
Unescape View File

@ -179,6 +179,12 @@
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
} }
a {
color: inherit;
border-bottom: none;
transition: none;
}
@media (min-width: 840px) { @media (min-width: 840px) {
ul { ul {
padding: 0; padding: 0;

5
site/src/routes/_components/Blurb.svelte
Unescape View File

@ -18,6 +18,7 @@
padding: 1em; padding: 1em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-bottom: none;
} }
h2 { h2 {
@ -140,7 +141,7 @@
<span class="learn-more">learn more</span> <span class="learn-more">learn more</span>
</a> </a>
<div class="linkify description" style="grid-area: what;"> <div class="description" style="grid-area: what;">
<p>Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the <em>browser</em>, Svelte shifts that work into a <em>compile step</em> that happens when you build your app.</p> <p>Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the <em>browser</em>, Svelte shifts that work into a <em>compile step</em> that happens when you build your app.</p>
<p>Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.</p> <p>Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.</p>
@ -157,7 +158,7 @@ npm install
npm run dev & open http://localhost:5000 npm run dev & open http://localhost:5000
</pre> </pre>
<p class="linkify" style="flex: 1">See the <a href="blog/the-easiest-way-to-get-started">quickstart guide</a> for more information.</p> <p style="flex: 1">See the <a href="blog/the-easiest-way-to-get-started">quickstart guide</a> for more information.</p>
<p class="cta"><a rel="prefetch" href="tutorial">Learn Svelte</a></p> <p class="cta"><a rel="prefetch" href="tutorial">Learn Svelte</a></p>
</div> </div>

1
site/src/routes/_components/WhosUsingSvelte.svelte
Unescape View File

@ -18,7 +18,6 @@
a { a {
height: 40px; height: 40px;
margin: 0 0.5em 0.5em 0; margin: 0 0.5em 0.5em 0;
text-decoration: none;
border: 2px solid var(--second); border: 2px solid var(--second);
padding: 5px 10px; padding: 5px 10px;
border-radius: 20px; border-radius: 20px;

36
site/src/routes/blog/[slug].svelte
Unescape View File

@ -17,12 +17,12 @@
<meta name="Description" content={post.metadata.description}> <meta name="Description" content={post.metadata.description}>
</svelte:head> </svelte:head>
<article class='post linkify listify'> <article class='post listify'>
<p class='byline'><a href='{post.metadata.authorURL}'>{post.metadata.author}</a> <time datetime='{post.metadata.pubdate}'>{post.metadata.dateString}</time></p>
<h1>{post.metadata.title}</h1> <h1>{post.metadata.title}</h1>
<p class='standfirst'>{post.metadata.description}</p> <p class='standfirst'>{post.metadata.description}</p>
<p class='byline'><a href='{post.metadata.authorURL}'>{post.metadata.author}</a> <time datetime='{post.metadata.pubdate}'>{post.metadata.dateString}</time></p>
{@html post.html} {@html post.html}
</article> </article>
@ -33,20 +33,32 @@
margin: 0 auto; margin: 0 auto;
} }
h1 {
font-size: 4rem;
font-weight: 400;
}
.standfirst {
font-size: var(--h4);
color: var(--second);
margin: 0 0 1em 0;
}
.byline { .byline {
margin: 0 0 4rem 0; margin: 0 0 6rem 0;
padding: 0 0 1.6rem 0; padding: 1.6rem 0 0 0;
border-bottom: var(--border-w) solid #6767785b; border-top: var(--border-w) solid #6767785b;
font-size: var(--h6); font-size: var(--h6);
text-transform: uppercase;
} }
.byline a { .byline a {
border-bottom: none; /* border-bottom: none; */
font-weight: 600; /* font-weight: 600; */
} }
.byline a:hover { .byline a:hover {
border-bottom: 2px solid var(--prime); /* border-bottom: 2px solid var(--prime); */
} }
.post h1 { .post h1 {
@ -101,12 +113,6 @@
background: transparent; background: transparent;
} }
.standfirst {
font-size: var(--h4);
color: var(--second);
margin: 0 0 2em 0;
}
.post :global(aside) { .post :global(aside) {
float: right; float: right;
margin: 0 0 1em 1em; margin: 0 0 1em 1em;

8
site/src/routes/blog/index.svelte
Unescape View File

@ -21,7 +21,7 @@
<div class='posts stretch'> <div class='posts stretch'>
{#each posts as post} {#each posts as post}
<article class='post' data-pubdate={post.metadata.dateString}> <article class='post' data-pubdate={post.metadata.dateString}>
<a rel='prefetch' href='blog/{post.slug}' title='Read the article »'> <a class="no-underline" rel='prefetch' href='blog/{post.slug}' title='Read the article »'>
<h2>{post.metadata.title}</h2> <h2>{post.metadata.title}</h2>
<p>{post.metadata.description}</p> <p>{post.metadata.description}</p>
</a> </a>
@ -45,7 +45,7 @@
color: var(--text); color: var(--text);
max-width: 18em; max-width: 18em;
font-size: var(--h3); font-size: var(--h3);
font-weight: 300; font-weight: 400;
} }
.post:first-child { .post:first-child {
@ -56,7 +56,7 @@
.post:first-child h2 { .post:first-child h2 {
font-size: 4rem; font-size: 4rem;
font-weight: 600; font-weight: 400;
color: var(--second); color: var(--second);
} }
@ -65,7 +65,7 @@
content: 'Latest post • ' attr(data-pubdate); content: 'Latest post • ' attr(data-pubdate);
color: var(--flash); color: var(--flash);
font-size: var(--h6); font-size: var(--h6);
font-weight: 600; font-weight: 400;
letter-spacing: .05em; letter-spacing: .05em;
text-transform: uppercase; text-transform: uppercase;
} }

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

@ -50,6 +50,9 @@
position: relative; position: relative;
opacity: 0.75; opacity: 0.75;
transition: opacity 0.2s; transition: opacity 0.2s;
border-bottom: none;
padding: 0;
color: white;
} }
.section { .section {

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

@ -367,7 +367,7 @@
<meta name="Description" content="Cybernetically enhanced web apps"> <meta name="Description" content="Cybernetically enhanced web apps">
</svelte:head> </svelte:head>
<div bind:this={container} class='content linkify listify'> <div bind:this={container} class='content listify'>
{#each sections as section} {#each sections as section}
<section data-id={section.slug}> <section data-id={section.slug}>
<h2> <h2>

65
site/src/routes/examples/_TableOfContents.svelte
Unescape View File

@ -33,38 +33,6 @@
}); });
</script> </script>
<ul bind:this={ul} class="examples-toc">
{#each sections as section}
<li>
<span class="section-title">
{section.title}
</span>
{#each section.examples as example}
<a href="examples#{example.slug}">
<div
class="row"
class:active="{example.slug === active_section}"
>
<div class="info">
<div
class="thumbnail"
style="background-image: url(examples/thumbnails/{example.slug}.jpg)"
></div>
<div class="example-title">
{example.title}
</div>
</div>
{#if example.slug === active_section}
<Icon name="arrow-right" />
{/if}
</div>
</a>
{/each}
</li>
{/each}
</ul>
<style> <style>
.examples-toc { .examples-toc {
overflow-y: auto; overflow-y: auto;
@ -85,6 +53,7 @@
position: relative; position: relative;
opacity: 0.7; opacity: 0.7;
transition: opacity 0.2s; transition: opacity 0.2s;
color: white;
} }
.section-title { .section-title {
@ -136,3 +105,35 @@
box-shadow: 1px 1px 3px rgba(0,0,0,0.13); box-shadow: 1px 1px 3px rgba(0,0,0,0.13);
} }
</style> </style>
<ul bind:this={ul} class="examples-toc">
{#each sections as section}
<li>
<span class="section-title">
{section.title}
</span>
{#each section.examples as example}
<a href="examples#{example.slug}">
<div
class="row"
class:active="{example.slug === active_section}"
>
<div class="info">
<div
class="thumbnail"
style="background-image: url(examples/thumbnails/{example.slug}.jpg)"
></div>
<div class="example-title">
{example.title}
</div>
</div>
{#if example.slug === active_section}
<Icon name="arrow-right" />
{/if}
</div>
</a>
{/each}
</li>
{/each}
</ul>

14
site/src/routes/index.svelte
Unescape View File

@ -72,6 +72,10 @@
width: 100%; width: 100%;
} }
.example a {
color: inherit;
}
.example > p { .example > p {
margin: 4.4rem 2.4rem 2.4rem 0; margin: 4.4rem 2.4rem 2.4rem 0;
} }
@ -155,7 +159,7 @@
<Blurb/> <Blurb/>
<div class="examples"> <div class="examples">
<section class="container example linkify"> <section class="container example">
<p>Svelte components are built on top of HTML. Just add data.</p> <p>Svelte components are built on top of HTML. Just add data.</p>
<div class="repl-container"> <div class="repl-container">
@ -168,7 +172,7 @@
</div> </div>
</section> </section>
<section class="container example linkify"> <section class="container example">
<p>CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="TODO-blog-post-on-css-in-js">use your favourite CSS-in-JS library</a>.</p> <p>CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="TODO-blog-post-on-css-in-js">use your favourite CSS-in-JS library</a>.</p>
<div class="repl-container"> <div class="repl-container">
@ -181,7 +185,7 @@
</div> </div>
</section> </section>
<section class="container example linkify"> <section class="container example">
<p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p> <p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
<div class="repl-container"> <div class="repl-container">
@ -194,7 +198,7 @@
</div> </div>
</section> </section>
<section class="container example linkify"> <section class="container example">
<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p> <p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
<div class="repl-container"> <div class="repl-container">
@ -217,7 +221,7 @@
<section class="container"> <section class="container">
<h3>Contributors</h3> <h3>Contributors</h3>
<p class="linkify">Svelte is free and open source software, made possible by the work of dozens of volunteers. <a href="https://github.com/sveltejs/svelte">Join us!</a></p> <p>Svelte is free and open source software, made possible by the work of dozens of volunteers. <a href="https://github.com/sveltejs/svelte">Join us!</a></p>
{#each contributors as contributor, i} {#each contributors as contributor, i}
<a <a

5
site/src/routes/tutorial/[slug]/_TableOfContents.svelte
Unescape View File

@ -31,6 +31,7 @@
padding: 0.7em 0; padding: 0.7em 0;
text-align: center; text-align: center;
opacity: 0.7; opacity: 0.7;
color: white;
} }
a.disabled, a.disabled:hover, a.disabled:active { a.disabled, a.disabled:hover, a.disabled:active {
@ -59,7 +60,7 @@
</style> </style>
<nav> <nav>
<a rel="prefetch" href="tutorial/{(selected.prev || selected).slug}" class:disabled={!selected.prev}> <a rel="prefetch" class="no-underline" href="tutorial/{(selected.prev || selected).slug}" class:disabled={!selected.prev}>
<Icon name="arrow-left" /> <Icon name="arrow-left" />
</a> </a>
@ -83,7 +84,7 @@
</select> </select>
</div> </div>
<a rel="prefetch" href="tutorial/{(selected.next || selected).slug}" class:disabled={!selected.next}> <a rel="prefetch" class="no-underline" href="tutorial/{(selected.next || selected).slug}" class:disabled={!selected.next}>
<Icon name="arrow-right" /> <Icon name="arrow-right" />
</a> </a>
</nav> </nav>

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

@ -173,7 +173,7 @@
} }
.chapter-markup :global(a) { .chapter-markup :global(a) {
text-decoration: underline; color: white;
} }
.chapter-markup :global(ul) { .chapter-markup :global(ul) {
@ -227,12 +227,16 @@
} }
a.next { a.next {
text-decoration: none; /* border-bottom: none; */
padding-right: 1.2em;
background: no-repeat 100% 50% url(/icons/arrow-right.svg);
background-size: 1em 1em;
margin-left: auto; margin-left: auto;
} }
a.next:hover { a.next:hover {
text-decoration: underline; /* border-bottom: 2px solid currentColor; */
/* text-decoration: underline; */
} }
.improve-chapter { .improve-chapter {
@ -244,6 +248,9 @@
font-size: 14px; font-size: 14px;
text-decoration: none; text-decoration: none;
opacity: .3; opacity: .3;
padding-left: 1.2em;
background: no-repeat 0 50% url(/icons/edit.svg);
background-size: 1em 1em;
} }
.improve-chapter a:hover { .improve-chapter a:hover {
@ -281,12 +288,12 @@
{/if} {/if}
{#if selected.next} {#if selected.next}
<a class="next" href="tutorial/{selected.next.slug}">Next <Icon name="arrow-right" /></a> <a class="next" href="tutorial/{selected.next.slug}">Next</a>
{/if} {/if}
</div> </div>
<div class="improve-chapter"> <div class="improve-chapter">
<a href={improve_link}><Icon name="edit" size={14}/> Edit this chapter</a> <a class="no-underline" href={improve_link}>Edit this chapter</a>
</div> </div>
</div> </div>
</div> </div>

33
site/static/global.css
Unescape View File

@ -307,25 +307,30 @@ button > svg,
} }
/* links ------------------------------------- */ /* links ------------------------------------- */
.linkify a:not(.open-in-repl) { a {
position: relative; position: relative;
padding: 0 0 .1rem 0; padding: 0 0 1px 0;
border-bottom: .1rem solid hsla(15, 100%, 50%, 0.5); /* muted --prime */ border-bottom: 1px solid currentColor;
user-select: none; user-select: none;
color: inherit; color: var(--prime);
transition: color .2s, border .2s, padding .2s; transition: color .2s, border .2s, padding .2s;
} }
.linkify a:not(.open-in-repl):hover { a:hover {
color: var(--flash); color: var(--flash);
} }
.linkify a:not(.open-in-repl):hover { a:hover {
padding: 0;
border-bottom: 2px solid currentColor;
}
a.no-underline {
border-bottom: none;
padding: 0; padding: 0;
border-bottom: .2rem solid hsla(15, 100%, 50%, 1);
} }
a:hover:not(.disabled) > .icon { stroke: var(--flash) } /* a:hover:not(.disabled) > .icon { stroke: var(--flash) } */
/* lists ---------------------------------- */ /* lists ---------------------------------- */
.listify ol, .listify ol,
@ -426,18 +431,6 @@ table code, table span {
border-radius: var(--border-r); border-radius: var(--border-r);
} }
.open-in-repl {
position: absolute;
margin-top: 4rem;
margin-left: -2.5rem;
width: 3.6rem;
height: 3.6rem;
padding: .9rem;
background-color: var(--back-light);
border-radius: 50%;
border-left: .1rem solid #c7c6c6;
}
/* theme colors --------------------------- */ /* theme colors --------------------------- */
.prime { color: var(--prime) !important } .prime { color: var(--prime) !important }
.second { color: var(--second) !important } .second { color: var(--second) !important }

7
site/static/icons/edit.svg
Unescape View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<g style="fill: none; stroke: white; stroke-width: 2;">
<path d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34' />
<polygon points='18 2 22 6 12 16 8 16 8 12 18 2' />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 333 B

Write Preview
Loading…
Cancel
Save