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);
}
a {
color: inherit;
border-bottom: none;
transition: none;
}
@media (min-width: 840px) {
ul {
padding: 0;

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

@ -18,6 +18,7 @@
padding: 1em;
display: flex;
flex-direction: column;
border-bottom: none;
}
h2 {
@ -140,7 +141,7 @@
<span class="learn-more">learn more</span>
</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>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
</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>
</div>

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

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

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

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

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

@ -21,7 +21,7 @@
<div class='posts stretch'>
{#each posts as post}
<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>
<p>{post.metadata.description}</p>
</a>
@ -45,7 +45,7 @@
color: var(--text);
max-width: 18em;
font-size: var(--h3);
font-weight: 300;
font-weight: 400;
}
.post:first-child {
@ -56,7 +56,7 @@
.post:first-child h2 {
font-size: 4rem;
font-weight: 600;
font-weight: 400;
color: var(--second);
}
@ -65,7 +65,7 @@
content: 'Latest post • ' attr(data-pubdate);
color: var(--flash);
font-size: var(--h6);
font-weight: 600;
font-weight: 400;
letter-spacing: .05em;
text-transform: uppercase;
}

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

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

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

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

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

@ -33,38 +33,6 @@
});
</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>
.examples-toc {
overflow-y: auto;
@ -85,6 +53,7 @@
position: relative;
opacity: 0.7;
transition: opacity 0.2s;
color: white;
}
.section-title {
@ -136,3 +105,35 @@
box-shadow: 1px 1px 3px rgba(0,0,0,0.13);
}
</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%;
}
.example a {
color: inherit;
}
.example > p {
margin: 4.4rem 2.4rem 2.4rem 0;
}
@ -155,7 +159,7 @@
<Blurb/>
<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>
<div class="repl-container">
@ -168,7 +172,7 @@
</div>
</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>
<div class="repl-container">
@ -181,7 +185,7 @@
</div>
</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>
<div class="repl-container">
@ -194,7 +198,7 @@
</div>
</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>
<div class="repl-container">
@ -217,7 +221,7 @@
<section class="container">
<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}
<a

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

@ -31,6 +31,7 @@
padding: 0.7em 0;
text-align: center;
opacity: 0.7;
color: white;
}
a.disabled, a.disabled:hover, a.disabled:active {
@ -59,7 +60,7 @@
</style>
<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" />
</a>
@ -83,7 +84,7 @@
</select>
</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" />
</a>
</nav>

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

@ -173,7 +173,7 @@
}
.chapter-markup :global(a) {
text-decoration: underline;
color: white;
}
.chapter-markup :global(ul) {
@ -227,12 +227,16 @@
}
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;
}
a.next:hover {
text-decoration: underline;
/* border-bottom: 2px solid currentColor; */
/* text-decoration: underline; */
}
.improve-chapter {
@ -244,6 +248,9 @@
font-size: 14px;
text-decoration: none;
opacity: .3;
padding-left: 1.2em;
background: no-repeat 0 50% url(/icons/edit.svg);
background-size: 1em 1em;
}
.improve-chapter a:hover {
@ -281,12 +288,12 @@
{/if}
{#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}
</div>
<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>

33
site/static/global.css
Unescape View File

@ -307,25 +307,30 @@ button > svg,
}
/* links ------------------------------------- */
.linkify a:not(.open-in-repl) {
a {
position: relative;
padding: 0 0 .1rem 0;
border-bottom: .1rem solid hsla(15, 100%, 50%, 0.5); /* muted --prime */
padding: 0 0 1px 0;
border-bottom: 1px solid currentColor;
user-select: none;
color: inherit;
color: var(--prime);
transition: color .2s, border .2s, padding .2s;
}
.linkify a:not(.open-in-repl):hover {
a:hover {
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;
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 ---------------------------------- */
.listify ol,
@ -426,18 +431,6 @@ table code, table span {
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 --------------------------- */
.prime { color: var(--prime) !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