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

some styling for blog/guide pages

Browse Source
pull/1890/head
Rich Harris 7 years ago
parent 2b7b846cf8
commit dff7265dd6
10 changed files with 280 additions and 105 deletions
Show Stats Download Patch File Download Diff File

5
site/content/blog/2018-04-18-version-2.md
Unescape View File

@ -21,6 +21,11 @@ Each of these items is described in more depth below. If you get stuck, ask for
list-style: none; list-style: none;
} }
li {
position: relative;
list-style: none;
}
li input { li input {
position: absolute; position: absolute;
left: -2.5em; left: -2.5em;

107
site/src/components/top-nav.html
Unescape View File

@ -27,45 +27,6 @@
} }
</script> </script>
<div class='{open ? "open": "closed"} mousecatcher' on:click="{() => open = false}" />
<header>
<a href='.' class='logo' title='Homepage'>
<Logo size={40} />
<h2 class='logotype'>Svelte</h2>
</a>
<div class='flex-auto' />
<span class='menu-link' on:click="{toggleOpen}">
{#if open}
<Icon name='close' />
{:else}
<Icon name='menu' />
{/if}
</span>
<nav bind:this={nav} class='{open ? "open": "closed"}' on:click="{() => open = false}" >
<div class='flex-auto' />
<ul class='primary'>
<li><a rel='prefetch' class='{segment === "guide" ? "active": ""}' href='guide'>Guide</a></li>
<li><a rel='prefetch' class='{segment === "repl" ? "active": ""}' href='repl'>REPL</a></li>
<li><a rel='prefetch' class='{segment === "blog" ? "active": ""}' href='blog'>Blog</a></li>
<li><a href='https://sapper-redesign.now.sh'>Sapper</a></li>
</ul>
<div class='flex-auto' />
<ul class='primary'>
<li><a href='https://discord.gg/yy75DKs' title='Discord Chat'>
<Icon name='message-square' />
</a></li>
<li><a href='https://github.com/sveltejs/svelte' title='Github Repo'>
<Icon name='github' />
</a></li>
</ul>
</nav>
</header>
<style> <style>
/* Unfortunately I'm not able to understand mousecatcher */ /* Unfortunately I'm not able to understand mousecatcher */
.mousecatcher { .mousecatcher {
@ -101,7 +62,7 @@
padding: 0 var(--side-nav); padding: 0 var(--side-nav);
margin: 0 auto; margin: 0 auto;
background-color: rgba(255, 255, 255, .93); background-color: rgba(255, 255, 255, .93);
box-shadow: 0 .3rem .9rem -.2rem rgba(0,0,0,.5); box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5);
font-family: var(--font-ui); font-family: var(--font-ui);
z-index: 10; z-index: 10;
} }
@ -120,6 +81,12 @@
user-select: none; user-select: none;
} }
h2 {
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 300;
}
.open { .open {
transform: translate(-5rem,0); transform: translate(-5rem,0);
transition: transform .2s var(--out-cubic); transition: transform .2s var(--out-cubic);
@ -152,22 +119,33 @@
.logo { .logo {
position: relative; position: relative;
top: .3rem; top: .3rem;
width: 16rem; width: 18rem;
color: var(--second); color: var(--second);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; -webkit-touch-callout: none;
z-index: 11; z-index: 11;
padding: 0.5em 0;
} }
.logotype { .logotype {
display: none; display: none;
font-size: 2.8rem; font-size: 2.8rem;
letter-spacing: .12em; letter-spacing: .12em;
line-height: 1;
margin: 0;
} }
.logo :global(svg) { .home {
float: left; position: relative;
margin-right: .6rem; top: 0;
width: 18rem;
color: var(--second);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
z-index: 11;
padding: 0.5rem 0 0.3rem 4.2rem;
background: url(/logo.svg) 0 50% no-repeat;
background-size: auto 100%;
} }
.active { .active {
@ -203,3 +181,44 @@
.logotype { display: block } .logotype { display: block }
} }
</style> </style>
<div class='{open ? "open": "closed"} mousecatcher' on:click="{() => open = false}" />
<header>
<span class='menu-link' on:click="{toggleOpen}">
{#if open}
<Icon name='close' />
{:else}
<Icon name='menu' />
{/if}
</span>
<nav bind:this={nav} class='{open ? "open": "closed"}' on:click="{() => open = false}" >
<a href='.' class="home" title='Homepage'>
<h2 class='logotype'>Svelte</h2>
</a>
<ul class='primary'>
<li><a rel='prefetch' class='{segment === "guide" ? "active": ""}' href='guide'>Guide</a></li>
<li><a rel='prefetch' class='{segment === "repl" ? "active": ""}' href='repl'>REPL</a></li>
<li><a rel='prefetch' class='{segment === "blog" ? "active": ""}' href='blog'>Blog</a></li>
<li><a href='https://sapper-redesign.now.sh'>Sapper</a></li>
<li>
<a href='https://discord.gg/yy75DKs' title='Discord Chat'>
<Icon name='message-square' />
</a>
</li>
<li>
<a href='https://github.com/sveltejs/svelte' title='Github Repo'>
<Icon name='github' />
</a>
</li>
</ul>
<!-- <ul class='secondary'>
</ul> -->
</nav>
</header>

16
site/src/routes/blog/[slug].html
Unescape View File

@ -14,11 +14,11 @@
</svelte:head> </svelte:head>
<article class='post linkify listify'> <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>
<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>
@ -29,8 +29,8 @@
.byline { .byline {
font-size: 0.8em; font-size: 0.8em;
border-top: 1px solid #eee; border-bottom: 1px solid #eee;
padding: 0.5em 0; padding: 0;
} }
.post h1 { .post h1 {
@ -39,9 +39,7 @@
} }
.post :global(h2) { .post :global(h2) {
margin-top: 16rem; margin: 2em 0 0.5em 0;
padding: 4rem 1.6rem 5.6rem;
border-top: var(--border-w) solid var(--second);
color: var(--second); color: var(--second);
} }
@ -63,7 +61,9 @@
} }
.standfirst { .standfirst {
font-size: var(--h2); font-size: var(--h4);
color: var(--second);
margin: 0 0 2em 0;
} }
.post :global(aside) { .post :global(aside) {

80
site/src/routes/blog/index.html
Unescape View File

@ -13,78 +13,110 @@
<title>Svelte • The magical disappearing UI framework</title> <title>Svelte • The magical disappearing UI framework</title>
</svelte:head> </svelte:head>
<div class='posts grid stretch'> <div class='posts stretch'>
{#each posts as post} {#each posts as post}
<article class='post'> <article class='post' data-pubdate={post.metadata.dateString}>
<a rel='prefetch' href='blog/{post.slug}' title='Read the article »'> <a 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>
<div class='byline'>
<a href='{post.metadata.authorURL}'>{post.metadata.author}</a>
<time datetime='{post.metadata.pubdate}'>{post.metadata.dateString}</time>
</div>
</article> </article>
{/each} {/each}
</div> </div>
<style> <style>
.posts { .posts {
/* display: grid; */
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
/* prevent scroll bar pop-in when navigating to post */ /* prevent scroll bar pop-in when navigating to post */
/* yes this is hacktacular */ /* yes this is hacktacular */
min-height: calc(100vh - var(--nav-h)); min-height: calc(100vh - var(--nav-h));
padding: 10rem var(--side-page); padding: 10rem var(--side-page);
background-color: var(--back-light) /* background-color: var(--back-light) */
} }
.post { .post {
display: flex; /* display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 4rem 3.2rem 2.4rem; padding: 4rem 3.2rem 2.4rem; */
background-color: var(--back);
border-radius: var(--border-r);
box-shadow: .2rem .2rem .8rem .1rem rgba(58, 58, 58, .25);
text-align: center;
} }
h2 { h2 {
display: inline-block; display: inline-block;
margin: 1.6rem 0; margin: 2rem 0 0.5rem 0;
color: var(--second); color: var(--second);
max-width: 18em; /* max-width: 18em; */
font-size: 2rem;
}
.post:first-child {
margin: 0 0 2em 0;
border-bottom: 1px solid #eee;
}
.post:first-child h2 {
font-size: 4rem;
} }
.post > p { .post:first-child::before {
content: 'Latest post • ' attr(data-pubdate);
font-weight: 300;
color: #aaa;
text-transform: uppercase;
}
.post:nth-child(2)::before {
content: 'Older posts';
font-weight: 300;
color: #aaa;
text-transform: uppercase;
}
/* .post:first-child .byline::after {
content: 'Latest post';
font-weight: 700;
color: var(--second);
text-transform: uppercase;
margin-left: 1em;
} */
.post p {
font-size: var(--h5); font-size: var(--h5);
max-width: 30em; max-width: 30em;
color: var(--second);
} }
/* fast link-reset */ /* fast link-reset */
.posts a { all: unset; cursor: pointer } /* .posts a { all: unset; cursor: pointer } */
.post > a {
display: block;
}
.posts a:hover, .posts a:hover,
.posts a:hover > h2 { .posts a:hover > h2 {
color: var(--flash) color: var(--flash)
} }
.byline { .byline {
width: 100%; /* width: 100%; */
margin-top: 4rem;
padding: 1.6rem 0 0 0; padding: 1.6rem 0 0 0;
border-top: var(--border-w) solid var(--second); /* border-bottom: 1px solid var(--second); */
font: 300 var(--code-fs)/1.7 var(--font-mono); font: 300 var(--code-fs)/1.7 var(--font-mono);
} }
time {
/* border-bottom: 1px solid var(--second); */
}
.byline a { .byline a {
display: block;
color: var(--second); color: var(--second);
font-weight: 600;
} }
.byline a:hover { color: var(--flash) } .byline a:hover { color: var(--flash) }

8
site/src/routes/guide/index.html
Unescape View File

@ -128,9 +128,10 @@
.content h2 { .content h2 {
margin-top: 16rem; margin-top: 16rem;
padding: 4rem 1.6rem 5.6rem; padding: 2rem 1.6rem 5.6rem 0.2rem;
border-top: var(--border-w) solid var(--second); border-top: var(--border-w) solid var(--second);
color: var(--second); color: var(--second);
line-height: 1;
} }
.content section:first-of-type > h2 { .content section:first-of-type > h2 {
@ -140,7 +141,8 @@
.content :global(h3), .content :global(h3),
.content :global(h3 > code) { .content :global(h3 > code) {
pointer-events: none; pointer-events: none;
font: 300 var(--h3) var(--font-ui); font-weight: 700;
font-size: var(--h3);
color: black; color: black;
padding: 6.4rem 0 1.6rem 0; padding: 6.4rem 0 1.6rem 0;
} }
@ -172,7 +174,7 @@
section :global(blockquote::before) { section :global(blockquote::before) {
content: ' '; content: ' ';
position: absolute; position: absolute;
top: 1.8rem; top: 1.5rem;
left: 3.2rem; left: 3.2rem;
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;

3
site/src/routes/index.html
Unescape View File

@ -133,7 +133,8 @@
.logo > h1 { .logo > h1 {
margin: 2rem 0; margin: 2rem 0;
font-size: 4.8rem; font-size: 4.8rem;
color: var(--second); color: var(--header);
font-weight: 300;
} }
.logo > h2 { .logo > h2 {

3
site/src/template.html
Unescape View File

@ -8,10 +8,11 @@
%sapper.base% %sapper.base%
<link rel='stylesheet' href='global.css'> <link rel='stylesheet' href='global.css'>
<link href=prism.css rel=stylesheet>
<link rel='manifest' href='manifest.json'> <link rel='manifest' href='manifest.json'>
<link rel='icon' type='image/png' href='favicon.png'> <link rel='icon' type='image/png' href='favicon.png'>
<link href="https://fonts.googleapis.com/css?family=Overpass|Overpass+Mono" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Overpass+Mono|Overpass:300,700" rel="stylesheet">
<!-- Sapper generates a <style> tag containing critical CSS <!-- Sapper generates a <style> tag containing critical CSS
for the current page. CSS for the rest of the app is for the current page. CSS for the rest of the app is

40
site/static/global.css
Unescape View File

@ -86,7 +86,7 @@ a:focus {
----------------------------------------------- -----------------------------------------------
*/ */
:root { :root {
--nav-h: 10rem; --nav-h: 6rem;
--top-offset: 6rem; --top-offset: 6rem;
--sidebar-w: 24rem; --sidebar-w: 24rem;
--code-w: 48em; --code-w: 48em;
@ -110,7 +110,8 @@ a:focus {
--prime: #ff3e00; --prime: #ff3e00;
--second: #676778; --second: #676778;
--flash: #40b3ff; --flash: #40b3ff;
--text: #a19e9b; /* hsl(36, 3%, 62%) */ --heading: #333;
--text: #555; /* hsl(36, 3%, 62%) */
--border-w: .3rem; /* border-width */ --border-w: .3rem; /* border-width */
--border-r: .4rem; /* border-radius */ --border-r: .4rem; /* border-radius */
} }
@ -122,8 +123,8 @@ a:focus {
--h6: 1.4rem; --h6: 1.4rem;
--h5: 1.6rem; --h5: 1.6rem;
--h4: 1.8rem; --h4: 1.8rem;
--h3: 1.6rem; --h3: 2.4rem;
--h2: 2rem; --h2: 3rem;
--h1: 3.2rem; --h1: 3.2rem;
--linemax: 32em; /* max line-length */ --linemax: 32em; /* max line-length */
--lh: calc(4/2.2); /* base line-height */ --lh: calc(4/2.2); /* base line-height */
@ -136,11 +137,12 @@ body {
color: var(--text); color: var(--text);
} }
h1, h2, h3, h4, h5, h6, p, li, blockquote { h1, h2, h3, h4, h5, h6, li, blockquote {
margin-bottom: .8rem; margin: 0;
color: var(--heading);
} }
h1, h2, h3, h4, h5, h6 { font-weight: 300 } h1, h2, h3, h4, h5, h6 { font-weight: 700 }
h6 { font-size: var(--h6) } h6 { font-size: var(--h6) }
h5 { font-size: var(--h5) } h5 { font-size: var(--h5) }
h4 { font-size: var(--h4) } h4 { font-size: var(--h4) }
@ -148,6 +150,11 @@ h3 { font-size: var(--h3) }
h2 { font-size: var(--h2) } h2 { font-size: var(--h2) }
h1 { font-size: var(--h1) } h1 { font-size: var(--h1) }
p {
line-height: 1.35;
margin: 0 0 1em 0;
}
.b, b, strong { font-weight: 500 } .b, b, strong { font-weight: 500 }
i, em { i, em {
@ -181,22 +188,14 @@ tt, code, kbd, samp {
/* opinionated styles --------------------- */ /* opinionated styles --------------------- */
h1, h2 { h1, h2 {
font-family: var(--font-alt); font-family: var(--font-alt);
letter-spacing: 0.17em; line-height: 1.2;
text-transform: uppercase;
line-height: calc(4/2.5);
pointer-events: none; pointer-events: none;
} }
h1 { letter-spacing: 0.1em }
li:not(.white) > h2 { li:not(.white) > h2 {
color: var(--second) color: var(--second)
} }
h3 {
font-family: var(--font-ui);
}
blockquote { blockquote {
position: relative; position: relative;
margin: 1.6rem 0 2.4rem; margin: 1.6rem 0 2.4rem;
@ -207,6 +206,10 @@ blockquote {
max-width: 38.3em; max-width: 38.3em;
} }
blockquote :last-child {
margin: 0;
}
/* buttons -------------------------------- */ /* buttons -------------------------------- */
button { button {
@ -294,7 +297,7 @@ button[outline] {
visibility: hidden; visibility: hidden;
transform: scaleX(0); transform: scaleX(0);
transform-origin: left center; transform-origin: left center;
transition: all .3s var(--out-back); transition: all .15s var(--out-cubic);
z-index: -1; z-index: -1;
} }
@ -317,8 +320,9 @@ a:hover > .icon { stroke: var(--flash) }
.listify ol > li, .listify ol > li,
.listify ul > li { .listify ul > li {
margin-bottom: 0.8rem;
max-width: calc(var(--linemax) - var(--list-padding)); max-width: calc(var(--linemax) - var(--list-padding));
line-height: 1.35;
margin: 0 0 0.8em 0;
} }
.listify ul > li:before { .listify ul > li:before {

16
site/static/logo.svg
Unescape View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
<path style="fill:#ff3e00" d='M96.33,20.61C85.38,4.93,63.74.28,48.09,10.25L20.61,27.77A31.46,31.46,0,0,0,6.37,48.88,33.22,33.22,0,0,0,9.64,70.2,31.52,31.52,0,0,0,4.93,82a33.61,33.61,0,0,0,5.73,25.41c11,15.68,32.6,20.33,48.25,10.36l27.48-17.52a31.48,31.48,0,0,0,14.24-21.11A33.22,33.22,0,0,0,97.36,57.8,31.52,31.52,0,0,0,102.07,46a33.57,33.57,0,0,0-5.74-25.41' />
<path style="fill:white" d='M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45' />
</svg>
<!-- <style>
.logo {
position: relative;
vertical-align: middle;
stroke-miterlimit: 10;
stroke-width: 3.5;
stroke-linecap: round;
stroke-linejoin: round;
}
</style> -->
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

95
site/static/prism.css
Unescape View File

@ -0,0 +1,95 @@
/*
-----------------------------------------------
syntax-highlighting [prism]
-----------------------------------------------
*/
/* colors --------------------------------- */
pre[class*='language-'] {
--background: var(--back-light);
--base: #9b978b;
--comment: #afbfcf;
--keyword: #5ba3d3;
--function: #db794b;
--string: #b69b61;
--number: #86af75;
--tags: var(--function);
--important: var(--string);
}
/* type-base ------------------------------ */
code[class*='language-'],
pre[class*='language-'] {
background: none;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
font: 300 var(--code-fs)/1.7 var(--font-mono);
color: var(--base);
tab-size: 2;
-webkit-hyphens: none;
hyphens: none;
}
/* code-blocks ---------------------------- */
pre[class*='language-'] {
overflow: auto;
padding: 3.2rem 4rem;
margin: .8rem 0 2.4rem;
max-width: var(--code-w);
border-radius: var(--border-r);
box-shadow: 0.1rem 0.1rem 0.3rem rgba(68, 68, 68, 0.25) inset;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: var(--background);
}
/* tokens --------------------------------- */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { color: var(--comment) }
.token.punctuation { color: var(--base) }
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted { color: var(--tags) }
.token.boolean,
.token.number { color: var(--number) }
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted { color: var(--string) }
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable { color: var(--base) }
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name { color: var(--function) }
.token.keyword { color: var(--keyword) }
.token.regex,
.token.important { color: var(--important) }
.token.important,
.token.bold { font-weight: bold }
.token.italic { font-style: italic }
.token.entity { cursor: help }
Write Preview
Loading…
Cancel
Save