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

Merge branch 'master' into announcement

Browse Source
pull/2451/head
Richard Harris 6 years ago
parent 8c582abb10 6ddaa9cbd3
commit 190d86701c
44 changed files with 739 additions and 786 deletions
Show Stats Download Patch File Download Diff File

186
README.md
Unescape View File

@ -1,151 +1,16 @@
# Svelte <p align="center">
<a href="https://svelte.dev">
<img alt="Cybernetically enhanced web apps: Svelte" src="banner.png">
</a>
</p>
The magical disappearing UI framework.
* [Read the introductory blog post](https://svelte.technology/blog/frameworks-without-the-framework) ## What is Svelte?
* [Read the guide](https://svelte.technology/guide)
* [Try it out](https://svelte.technology/repl)
* [Chat on Discord](https://discord.gg/yy75DKs)
--- Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
## Tooling Learn more at the [Svelte website](https://svelte.dev), or stop by the [Discord chatroom](https://discord.gg/yy75DKs).
This is the Svelte compiler, which is primarily intended for authors of tooling that integrates Svelte with different build systems. If you just want to write Svelte components and use them in your app, you probably want one of those tools:
### Build Systems
* [gulp-svelte](https://github.com/shinnn/gulp-svelte) - gulp plugin
* [metalsmith-svelte](https://github.com/shinnn/metalsmith-svelte) - Metalsmith plugin
* [system-svelte](https://github.com/CanopyTax/system-svelte) – System.js loader
* [svelte-loader](https://github.com/sveltejs/svelte-loader) – Webpack loader
* [meteor-svelte](https://github.com/klaussner/meteor-svelte) – Meteor build plugin
* [sveltejs-brunch](https://github.com/StarpTech/sveltejs-brunch) – Brunch build plugin
* [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte) – Rollup plugin
* [parcel-plugin-svelte](https://github.com/DeMoorJasper/parcel-plugin-svelte) - Parcel build plugin
* [sveltify](https://github.com/tehshrike/sveltify) - Browserify transform
* [rules_svelte](https://github.com/thelgevold/rules_svelte) - Bazel Rules
### CSS Preprocessors
* [Less](https://github.com/ls-age/svelte-preprocess-less)
* [modular-css](https://github.com/tivac/modular-css/tree/master/packages/svelte)
* [PostCSS](https://github.com/TehShrike/svelte-preprocess-postcss)
* [Sass](https://github.com/ls-age/svelte-preprocess-sass)
### Additional tools
* [svelte-dev-store](https://github.com/GarethOates/svelte-dev-store) - Use Redux tools to visualise Svelte store
* More to come!
## Example usage
```js
import * as svelte from 'svelte';
const { js, css, ast } = svelte.compile(source, {
// the target module format – defaults to 'es' (ES2015 modules), can
// also be 'amd', 'cjs', 'umd', 'iife' or 'eval'
format: 'umd',
// the filename of the source file, used in e.g. generating sourcemaps
filename: 'MyComponent.html',
// the name of the constructor. Required for 'iife' and 'umd' output,
// but otherwise mostly useful for debugging. Defaults to 'SvelteComponent'
name: 'MyComponent',
// for 'amd' and 'umd' output, you can optionally specify an AMD module ID
amd: {
id: 'my-component'
},
// custom error/warning handlers. By default, errors will throw, and
// warnings will be printed to the console. Where applicable, the
// error/warning object will have `pos`, `loc` and `frame` properties
onerror: err => {
console.error( err.message );
},
onwarn: warning => {
console.warn( warning.message );
}
});
```
## API
The Svelte compiler exposes the following API:
* `compile(source [, options]) => { js, css, ast }` - Compile the component with the given options (see below). Returns an object containing the compiled JavaScript, a sourcemap, an AST and transformed CSS.
* `create(source [, options]) => function` - Compile the component and return the component itself.
* `preprocess(source, options) => Promise` — Preprocess a source file, e.g. to use PostCSS or CoffeeScript
* `VERSION` - The version of this copy of the Svelte compiler as a string, `'x.x.x'`.
### Compiler options
The Svelte compiler optionally takes a second argument, an object of configuration options:
| | **Values** | **Description** | **Default** |
|---|---|---|---|
| `generate` | `'dom'`, `'ssr'`, `false` | Whether to generate JavaScript code intended for use on the client (`'dom'`), or for use in server-side rendering (`'ssr'`). If `false`, component will be parsed and validated but no code will be emitted | `'dom'` |
| `dev` | `true`, `false` | Whether to enable run-time checks in the compiled component. These are helpful during development, but slow your component down. | `false` |
| `css` | `true`, `false` | Whether to include code to inject your component's styles into the DOM. | `true` |
| `hydratable` | `true`, `false` | Whether to support hydration on the compiled component. | `false` |
| `customElement` | `true`, `false`, `{ tag, props }` | Whether to compile this component to a custom element. If `tag`/`props` are passed, compiles to a custom element and overrides the values exported by the component. | `false` |
| `bind` | `boolean` | If `false`, disallows `bind:` directives | `true` |
| | | |
| `shared` | `true`, `false`, `string` | Whether to import various helpers from a shared external library. When you have a project with multiple components, this reduces the overall size of your JavaScript bundle, at the expense of having immediately-usable component. You can pass a string of the module path to use, or `true` will import from `'svelte/shared.js'`. | `false` |
| `legacy` | `true`, `false` | Ensures compatibility with very old browsers, at the cost of some extra code. | `false` |
| | | |
| `format` | `'es'`, `'amd'`, `'cjs'`, `'umd'`, `'iife'`, `'eval'` | The format to output in the compiled component.<br>`'es'` - ES6/ES2015 module, suitable for consumption by a bundler<br>`'amd'` - AMD module<br>`'cjs'` - CommonJS module<br>`'umd'` - UMD module<br>`'iife'` - IIFE-wrapped function defining a global variable, suitable for use directly in browser<br>`'eval'` - standalone function, suitable for passing to `eval()` | `'es'` for `generate: 'dom'`<br>`'cjs'` for `generate: 'ssr'` |
| `name` | `string` | The name of the constructor in the compiled component. | `'SvelteComponent'` |
| `filename` | `string` | The filename to use in sourcemaps and compiler error and warning messages. | `'SvelteComponent.html'` |
| `amd`.`id` | `string` | The AMD module ID to use for the `'amd'` and `'umd'` output formats. | `undefined` |
| `globals` | `object`, `function` | When outputting to the `'umd'`, `'iife'` or `'eval'` formats, an object or function mapping the names of imported dependencies to the names of global variables. | `{}` |
| `preserveComments` | `boolean` | Include comments in rendering. Currently, only applies to SSR rendering | `false` |
| | | |
| `onwarn` | `function` | Specify a callback for when Svelte encounters a non-fatal warning while compiling the component. Passed two arguments: the warning object, and another function that is Svelte's default onwarn handling. | (warning is logged to console) |
### Preprocessor options
`svelte.preprocess` returns a Promise that resolves to an object with a `toString` method (other properties will be added in future). It takes an options object with `markup`, `style` or `script` properties:
```js
const processed = await svelte.preprocess(source, {
markup: ({ content }) => {
// `content` is the entire component string
return { code: '...', map: {...} };
},
style: ({ content, attributes }) => {
// `content` is what's inside the <style> element, if present
// `attributes` is a map of attributes on the element
if (attributes.type !== 'text/scss') return;
return { code: '...', map: {...} };
},
script: ({ content, attributes }) => {
// `content` is what's inside the <script> element, if present
// `attributes` is a map of attributes on the element
if (attributes.type !== 'text/coffeescript') return;
return { code: '...', map: {...} };
}
});
```
The `style` and `script` preprocessors will run *after* the `markup` preprocessor. Each preprocessor can return a) nothing (in which case no transformation takes place), b) a `{ code, map }` object, or c) a Promise that resolves to a) or b). Note that sourcemaps are currently discarded, but will be used in future versions of Svelte.
## Example/starter repos
* [sveltejs/template](https://github.com/sveltejs/template) — the 'official' starter template
* [sveltejs/template-webpack](https://github.com/sveltejs/template-webpack) — using webpack for bundling
* [charpeni/svelte-example](https://github.com/charpeni/svelte-example) - Some Svelte examples with configured Rollup, Babel, ESLint, directives, Two-Way binding, and nested components
* [EmilTholin/svelte-test](https://github.com/EmilTholin/svelte-test)
* [lukechinworth/codenames](https://github.com/lukechinworth/codenames/tree/svelte) – example integration with Redux
* [khtdr/svelte-redux-shopping-cart](https://github.com/khtdr/svelte-redux-shopping-cart) – Redux Shopping Cart example (with devtools and hot-reloading)
* [svelte-bazel-example](https://github.com/thelgevold/svelte-bazel-example) — Building Svelte with Bazel
## Development ## Development
@ -157,43 +22,46 @@ To install and work on Svelte locally:
git clone git@github.com:sveltejs/svelte.git git clone git@github.com:sveltejs/svelte.git
cd svelte cd svelte
npm install npm install
npm run dev
``` ```
The compiler is written in [TypeScript](https://www.typescriptlang.org/), but don't let that put you off — it's basically just JavaScript with type annotations. You'll pick it up in no time. If you're using an editor other than [VSCode](https://code.visualstudio.com/) you may need to install a plugin in order to get syntax highlighting and code hints etc. To build the compiler, and all the other modules included in the package:
### Linking to a Live Project
You can make changes locally to Svelte and test it against any Svelte project. You can also use a [default template](https://github.com/sveltejs/template) for development. Instruction on setup are found in that project repository. ```bash
npm run build
```
From your project: To watch for changes and continually rebuild the package (this is useful if you're using [npm link](https://docs.npmjs.com/cli/link.html) to test out changes in a project locally):
```bash ```bash
cd ~/path/to/your-svelte-project npm run dev
npm install ~/path/to/svelte
``` ```
And you should be good to test changes locally. The compiler is written in [TypeScript](https://www.typescriptlang.org/), but don't let that put you off — it's basically just JavaScript with type annotations. You'll pick it up in no time. If you're using an editor other than [VSCode](https://code.visualstudio.com/) you may need to install a plugin in order to get syntax highlighting and code hints etc.
To undo this and link to the official latest Svelte release, just run: ### Running Tests
```bash ```bash
npm install svelte@latest npm run test
``` ```
### Running Tests To filter tests, use `-g` (aka `--grep`). For example, to only run tests involving transitions:
```bash ```bash
npm run test npm run test -- -g transition
``` ```
For running single tests, you can use pattern matching:
## svelte.dev
The source code for https://svelte.dev, including all the documentation, lives in the [site](site) directory. The site is built with [Sapper](https://sapper.svelte.technology) To develop locally:
```bash ```bash
npm run test -- -g "includes AST in svelte.compile output" cd site
npm install
npm run dev
``` ```
Alternately, you can add `solo: true` to any given `test/../_config.js` file, but **remember never to commit that setting.**
## License ## License

BIN
banner.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

1
site/content/blog/2016-11-26-frameworks-without-the-framework.md
Unescape View File

@ -1,7 +1,6 @@
--- ---
title: Frameworks without the framework: why didn't we think of this sooner? title: Frameworks without the framework: why didn't we think of this sooner?
description: You can't write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you. description: You can't write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you.
pubdate: 2016-11-26
author: Rich Harris author: Rich Harris
authorURL: https://twitter.com/Rich_Harris authorURL: https://twitter.com/Rich_Harris
--- ---

1
site/content/blog/2017-08-07-the-easiest-way-to-get-started.md
Unescape View File

@ -1,7 +1,6 @@
--- ---
title: The easiest way to get started with Svelte title: The easiest way to get started with Svelte
description: This'll only take a minute. description: This'll only take a minute.
pubdate: 2017-08-07
author: Rich Harris author: Rich Harris
authorURL: https://twitter.com/Rich_Harris authorURL: https://twitter.com/Rich_Harris
--- ---

1
site/content/blog/2017-09-06-the-zen-of-just-writing-css.md
Unescape View File

@ -1,7 +1,6 @@
--- ---
title: The zen of Just Writing CSS title: The zen of Just Writing CSS
description: I would say this is the future, but we're already doing it. description: I would say this is the future, but we're already doing it.
pubdate: 2017-09-06
author: Rich Harris author: Rich Harris
authorURL: https://twitter.com/Rich_Harris authorURL: https://twitter.com/Rich_Harris
--- ---

1
site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
Unescape View File

@ -1,7 +1,6 @@
--- ---
title: Sapper: Towards the ideal web app framework title: Sapper: Towards the ideal web app framework
description: Taking the next-plus-one step description: Taking the next-plus-one step
pubdate: 2017-12-31
author: Rich Harris author: Rich Harris
authorURL: https://twitter.com/Rich_Harris authorURL: https://twitter.com/Rich_Harris
--- ---

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

@ -1,7 +1,6 @@
--- ---
title: Svelte v2 is out! title: Svelte v2 is out!
description: Here's what you need to know description: Here's what you need to know
pubdate: 2018-04-18
author: Rich Harris author: Rich Harris
authorURL: https://twitter.com/Rich_Harris authorURL: https://twitter.com/Rich_Harris
--- ---

3
site/content/blog/2018-12-26-svelte-css-in-js.md
Unescape View File

@ -1,7 +1,6 @@
--- ---
title: Using CSS-in-JS with Svelte title: Using CSS-in-JS with Svelte
description: You don't need to, but you can description: You don't need to, but you can
pubdate: 2018-12-26
author: Rich Harris author: Rich Harris
authorURL: https://twitter.com/Rich_Harris authorURL: https://twitter.com/Rich_Harris
--- ---
@ -17,11 +16,13 @@ But Svelte's style handling does have some limitations. It's too difficult to sh
Here, we're using [Emotion](https://emotion.sh) to generate scoped class names that can be used across multiple components: Here, we're using [Emotion](https://emotion.sh) to generate scoped class names that can be used across multiple components:
<div class="max">
<iframe <iframe
title="Aphrodite example" title="Aphrodite example"
src="/repl/embed?gist=ad495ff5ba9ceefe5984fe62c1f15e19" src="/repl/embed?gist=ad495ff5ba9ceefe5984fe62c1f15e19"
scrolling="no" scrolling="no"
></iframe> ></iframe>
</div>
It's important to note that most CSS-in-JS libraries have a runtime library, and many don't support statically extracting styles out into a separate <code>.css</code> file at build time (which is essential for the best performance). You should therefore only use CSS-in-JS if it's necessary for your application! It's important to note that most CSS-in-JS libraries have a runtime library, and many don't support statically extracting styles out into a separate <code>.css</code> file at build time (which is essential for the best performance). You should therefore only use CSS-in-JS if it's necessary for your application!

1
site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md
Unescape View File

@ -1,7 +1,6 @@
--- ---
title: Virtual DOM is pure overhead title: Virtual DOM is pure overhead
description: Let's retire the 'virtual DOM is fast' myth once and for all description: Let's retire the 'virtual DOM is fast' myth once and for all
pubdate: 2018-12-27
author: Rich Harris author: Rich Harris
authorURL: https://twitter.com/Rich_Harris authorURL: https://twitter.com/Rich_Harris
--- ---

1
site/content/blog/2019-01-31-svelte-on-the-changelog.md
Unescape View File

@ -1,7 +1,6 @@
--- ---
title: Svelte on The Changelog title: Svelte on The Changelog
description: Listen to the interview here description: Listen to the interview here
pubdate: 2019-01-31
author: Rich Harris author: Rich Harris
authorURL: https://twitter.com/Rich_Harris authorURL: https://twitter.com/Rich_Harris
--- ---

13
site/content/blog/2019-04-15-setting-up-your-editor.md
Unescape View File

@ -0,0 +1,13 @@
---
title: Setting up your editor
description: Instructions for configuring linting and syntax highlighting
author: Rich Harris
authorURL: https://twitter.com/Rich_Harris
draft: true
---
*Coming soon* This post will walk you through setting up your editor so that recognises Svelte files:
* eslint-plugin-svelte3
* svelte-vscode
* associating .svelte files with HTML in VSCode, Sublime, Atom, etc etc etc

9
site/content/blog/2019-04-16-svelte-for-new-developers.md
Unescape View File

@ -0,0 +1,9 @@
---
title: Svelte for new developers
description: Never used Node.js or the command line? No problem
author: Rich Harris
authorURL: https://twitter.com/Rich_Harris
draft: true
---
*Coming soon* This blog post will walk you through installing Node.js and git and using Terminal.app to clone a project template and start developing with Svelte

164
site/content/blog/2019-04-20-write-less-code.md
Unescape View File

@ -0,0 +1,164 @@
---
title: Write less code
description: The most important metric you're not paying attention to
author: Rich Harris
authorURL: https://twitter.com/Rich_Harris
---
All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be.
Writing more code also takes more time, leaving less time for other things like optimisation, nice-to-have features, or being outdoors instead of hunched over a laptop.
In fact it's widely acknowledged that [project development time](https://blog.codinghorror.com/diseconomies-of-scale-and-lines-of-code/) and [bug count](https://www.mayerdan.com/ruby/2012/11/11/bugs-per-line-of-code-ratio) grow *quadratically*, not linearly, with the size of a codebase. That tracks with our intuitions: a ten-line pull request will get a level of scrutiny rarely applied to a 100-line one. And once a given module becomes too big to fit on a single screen, the cognitive effort required to understand it increases significantly. We compensate by refactoring and adding comments — activities that almost always result in *more* code. It's a vicious cycle.
Yet while we obsess — rightly! — over performance numbers, bundle size and anything else we can measure, we rarely pay attention to the amount of code we're writing.
## Readability is important
I'm certainly not claiming that we should use clever tricks to scrunch our code into the most compact form possible at the expense of readability. Nor am I claiming that reducing *lines* of code is necessarily a worthwhile goal, since it encourages turning readable code like this...
```js
for (let i = 0; i <= 100; i += 1) {
if (i % 2 === 0) {
console.log(`${i} is even`);
}
}
```
...into something much harder to parse:
```js
for (let i = 0; i <= 100; i += 1) if (i % 2 === 0) console.log(`${i} is even`);
```
Instead, I'm claiming that we should favour languages and patterns that allow us to naturally write less code.
## Yes, I'm talking about Svelte
Reducing the amount of code you have to write is an explicit goal of Svelte. To illustrate, let's look at a very simple component implemented in React, Vue and Svelte. First, the Svelte version:
<div class="max">
<iframe
title="Simple component example"
src="/repl/embed?gist=6b573f1819d12defc441098236fb9abe"
scrolling="no"
></iframe>
</div>
How would we build this in React? It would probably look something like this:
```js
import React, { useState } from 'react';
export default () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
function handleChangeA(event) {
setA(+event.target.value);
}
function handleChangeB(event) {
setB(+event.target.value);
}
return (
<div>
<input type="number" value={a} onChange={handleChangeA}/>
<input type="number" value={b} onChange={handleChangeB}/>
<p>{a} + {b} = {a + b}</p>
</div>
);
};
```
Here's an equivalent component in Vue:
```html
<template>
<div>
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
<p>{{a}} + {{b}} = {{a + b}}</p>
</div>
</template>
<script>
export default {
data: function() {
return {
a: 1,
b: 2
};
}
};
</script>
```
<aside>
<p>I'm counting by copying the source code to the clipboard and running `pbpaste | wc -c` in my terminal</p>
</aside>
In other words, it takes 442 characters in React, and 263 characters in Vue, to achieve something that takes 145 characters in Svelte. The React version is literally three times larger!
It's unusual for the difference to be *quite* so obvious — in my experience, a React component is typically around 40% larger than its Svelte equivalent. Let's look at the features of Svelte's design that enable you to express ideas more concisely:
### Top-level elements
In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element — in React's case, trying to return two top-level elements from a component function would result in syntactically invalid code. (You can use a fragment — `<>` — instead of a `<div>`, but it's the same basic idea, and still results in an extra level of indentation).
In Vue, your markup must be wrapped in a `<template>` element, which I'd argue is redundant.
### Bindings
In React, we have to respond to input events ourselves:
```js
function handleChangeA(event) {
setA(+event.target.value);
}
```
This isn't just boring plumbing that takes up extra space on the screen, it's also extra surface area for bugs. Conceptually, the value of the input is bound to the value of `a` and vice versa, but that relationship isn't cleanly expressed — instead we have two tightly-coupled but physically separate chunks of code (the event handler and the `value={a}` prop). Not only that, but we have to remember to coerce the string value with the `+` operator, otherwise `2 + 2` will equal `22` instead of `4`.
Like Svelte, Vue does have a way of expressing the binding — the `v-model` attribute, though again we have to be careful to use `v-model.number` even though it's a numeric input.
### State
In Svelte, you update local component state with an assignment operator:
```js
let count = 0;
function increment() {
count += 1;
}
```
In React, we use the `useState` hook:
```js
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
```
This is much *noisier* — it expresses the exact same concept but with over 60% more characters. As you're reading the code, you have to do that much more work to understand the author's intent.
In Vue, meanwhile, we have a default export with a `data` function that returns an object literal with properties corresponding to our local state. Things like helper functions and child components can't simply be imported and used in the template, but must instead be 'registered' by attaching them to the correct part of the default export.
## Death to boilerplate
These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, [reactive declarations](https://svelte.dev/tutorial/reactive-declarations) essentially do the work of React's `useMemo`, `useCallback` and `useEffect` without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change).
How? By choosing a different set of constraints. Because [Svelte is a compiler](blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can *design* a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in *more* idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps.

2
site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md
Unescape View File

@ -17,7 +17,7 @@ But there's a more *idiomatic* solution:
```js ```js
function addNumber() { function addNumber() {
numbers = [...numbers, numbers.length + 1;] numbers = [...numbers, numbers.length + 1];
} }
``` ```

14
site/src/components/Repl/InputOutputToggle.svelte
Unescape View File

@ -15,17 +15,9 @@
border-top: 1px solid var(--second); border-top: 1px solid var(--second);
} }
input { input { display: block }
display: block; span { color: #ccc }
} .active { color: #555 }
span {
color: #ccc;
}
.active {
color: #555;
}
</style> </style>
<label class="input-output-toggle"> <label class="input-output-toggle">

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

@ -1,13 +1,18 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Icon from './Icon.svelte'; import Icon from './Icon.svelte';
import Logo from './Logo.svelte'; import { page } from '@sapper/app';
export let segment; export let segment;
let open = false; let open = false;
let visible = true; let visible = true;
// hide nav whenever we navigate
page.subscribe(() => {
open = false;
});
// TODO remove this post-https://github.com/sveltejs/svelte/issues/1914 // TODO remove this post-https://github.com/sveltejs/svelte/issues/1914
let ul; let ul;
onMount(() => { onMount(() => {
@ -78,17 +83,6 @@
box-shadow: none; box-shadow: none;
} }
h2 {
display: block;
text-transform: uppercase;
font-weight: 300;
font-size: 2.8rem;
letter-spacing: .12em;
line-height: 1;
margin: 0;
top: .1rem;
}
.primary { .primary {
list-style: none; list-style: none;
font-family: var(--font); font-family: var(--font);
@ -107,7 +101,7 @@
ul { ul {
position: relative; position: relative;
padding: 0 2em 0 0; padding: 0 3rem 0 0;
background: url(/icons/chevron.svg) calc(100% - 1em) 0.05em no-repeat; background: url(/icons/chevron.svg) calc(100% - 1em) 0.05em no-repeat;
background-size: 1em 1em; background-size: 1em 1em;
} }
@ -123,7 +117,7 @@
} }
ul.open { ul.open {
padding: 0 2em 1em 2em; padding: 0 0 1em 0;
background: white; background: white;
border-left: 1px solid #eee; border-left: 1px solid #eee;
border-right: 1px solid #eee; border-right: 1px solid #eee;
@ -142,15 +136,19 @@
} }
ul li a { ul li a {
font-size: var(--h6); font-size: var(--h5);
padding: 0 .8rem; padding: 0 .8rem;
} }
ul.open li a { ul.open li a {
padding: 2.3rem .7rem 0 .8rem; padding: 1.5rem 3.7rem 1.5rem 4rem;
display: block; display: block;
} }
ul.open li:first-child a {
padding-top: 2.3rem;
}
.primary :global(svg) { .primary :global(svg) {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
@ -158,21 +156,29 @@
.home { .home {
position: relative; position: relative;
top: 0; top: -.1rem;
width: 18rem; width: 18rem;
color: var(--second); height: 4.2rem;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; -webkit-touch-callout: none;
z-index: 11; background: url(/svelte-logo-horizontal.svg) 0 50% no-repeat;
padding: 0.5rem 0 0.3rem 4.2rem;
background: url(/logo.svg) 0 50% no-repeat;
background-size: auto 100%; background-size: auto 100%;
/* z-index: 11; */
} }
.active { .active {
color: var(--prime) color: var(--prime)
} }
.modal-background {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.9);
}
@media (min-width: 840px) { @media (min-width: 840px) {
ul { ul {
padding: 0; padding: 0;
@ -192,7 +198,7 @@
} }
ul.open li a { ul.open li a {
font-size: var(--h6); font-size: var(--h5);
padding: 0 .8rem; padding: 0 .8rem;
display: inline; display: inline;
} }
@ -211,13 +217,15 @@
} }
</style> </style>
<svelte:window on:click="{() => open = false}" on:scroll={handle_scroll}/> <svelte:window on:scroll={handle_scroll}/>
<header class:visible="{visible || open}"> <header class:visible="{visible || open}">
<nav> <nav>
<a rel="prefetch" href='.' class="home" title='Homepage'> <a rel="prefetch" href='.' class="home" title='Homepage'></a>
<h2>Svelte</h2>
</a> {#if open}
<div class="modal-background hide-if-desktop" on:click="{() => open = false}"></div>
{/if}
<ul <ul
bind:this={ul} bind:this={ul}

0
site/src/components/Logo.svelte → site/src/components/unused/Logo.svelte
Unescape View File

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

@ -32,21 +32,19 @@
font-size: var(--h5); font-size: var(--h5);
} }
.box a { .learn-more {
position: relative; position: relative;
text-align: right; text-align: right;
margin-top: auto; margin-top: auto;
padding: 0 1.2em 0 0; padding: 0 1.2em 0 0;
font-family: Roboto, sans-serif;
font-size: 1.6rem;
} }
.box a:hover { .box:hover .learn-more {
color: white; color: white;
text-decoration: underline; text-decoration: underline;
} }
.box a::after, .cta a::after { .learn-more::after, .cta a::after {
content: ''; content: '';
position: absolute; position: absolute;
display: block; display: block;
@ -121,26 +119,26 @@
</style> </style>
<section class='container'> <section class='container'>
<div class='box bg-prime white' style="grid-area: one"> <a href="blog/write-less-code" class='box bg-prime white' style="grid-area: one">
<h2 style='padding:2.4rem 0 0 0'>Write less code</h2> <h2>Write less code</h2>
<p>Build boilerplate-free components using languages you already know — HTML, CSS and JavaScript</p> <p>Build boilerplate-free components using languages you already know — HTML, CSS and JavaScript</p>
<a href="TODO-blog-post-on-loc">learn more</a> <a class="learn-more">learn more</a>
</div> </a>
<div class='box bg-flash white' style="grid-area: two"> <a href="blog/virtual-dom-is-pure-overhead" class='box bg-flash white' style="grid-area: two">
<h2 style='padding:2.4rem 0 0 0'>No virtual DOM</h2> <h2>No virtual DOM</h2>
<p>Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast</p> <p>Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast</p>
<a href="TODO-blog-post-on-vdom-overhead">learn more</a> <a class="learn-more">learn more</a>
</div> </a>
<div class='box bg-second white' style="grid-area: three"> <a href="TODO-blog-post-on-reactivity" class='box bg-second white' style="grid-area: three">
<h2 style='padding:2.4rem 0 0 0'>Truly reactive</h2> <h2>Truly reactive</h2>
<p>No more complex state management libraries — Svelte brings reactivity to JavaScript itself</p> <p>No more complex state management libraries — Svelte brings reactivity to JavaScript itself</p>
<a href="TODO-blog-post-on-reactivity">learn more</a> <a class="learn-more">learn more</a>
</div> </a>
<div class="linkify description" style="grid-area: what;"> <div class="linkify 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>
@ -150,8 +148,8 @@
<p><a href="TODO-svelte-3-blog-post">Read the introductory blog post</a> to learn more.</p> <p><a href="TODO-svelte-3-blog-post">Read the introductory blog post</a> to learn more.</p>
</div> </div>
<div style="grid-area: start; display: flex; flex-direction: column"> <div style="grid-area: start; display: flex; flex-direction: column; min-width: 0">
<pre class="language-bash" style="margin: 0 0 1em 0"> <pre class="language-bash" style="margin: 0 0 1em 0; min-width: 0; min-height: 0">
npx degit sveltejs/template my-svelte-project npx degit sveltejs/template my-svelte-project
cd my-svelte-project cd my-svelte-project

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

@ -19,7 +19,7 @@
height: 40px; height: 40px;
margin: 0 0.5em 0.5em 0; margin: 0 0.5em 0.5em 0;
text-decoration: none; text-decoration: none;
border: 1px solid #aaa; border: 2px solid var(--second);
padding: 5px 10px; padding: 5px 10px;
border-radius: 20px; border-radius: 20px;
} }
@ -27,7 +27,7 @@
.add-yourself { .add-yourself {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid #eee; border: 2px solid var(--second);
} }
img { img {

12
site/src/routes/_error.svelte
Unescape View File

@ -17,9 +17,7 @@
{/if} {/if}
<style> <style>
h1, p { h1, p { margin: 0 auto }
margin: 0 auto;
}
h1 { h1 {
font-size: 2.8em; font-size: 2.8em;
@ -27,13 +25,9 @@
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
} }
p { p { margin: 1em auto }
margin: 1em auto;
}
@media (min-width: 480px) { @media (min-width: 480px) {
h1 { h1 { font-size: 4em }
font-size: 4em;
}
} }
</style> </style>

3
site/src/routes/blog/[slug].json.js
Unescape View File

@ -16,5 +16,8 @@ export function get(req, res) {
'Cache-Control': `max-age=${5 * 60 * 1e3}` // 5 minutes 'Cache-Control': `max-age=${5 * 60 * 1e3}` // 5 minutes
}); });
res.end(lookup.get(req.params.slug)); res.end(lookup.get(req.params.slug));
} else {
res.statusCode = 404;
res.end(JSON.stringify({ message: 'not found' }));
} }
} }

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

@ -1,7 +1,7 @@
<script context="module"> <script context="module">
export async function preload({ params }) { export async function preload({ params }) {
const post = await this.fetch(`blog/${params.slug}.json`).then(r => r.json()); const res = await this.fetch(`blog/${params.slug}.json`);
return { post }; return res.ok ? { post: await res.json() } : this.error(404, 'Not found');
} }
</script> </script>
@ -24,33 +24,41 @@
<style> <style>
.post { .post {
padding: var(--top-offset) var(--side-nav) 0 var(--side-nav); padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
max-width: var(--main-width); max-width: var(--main-width);
margin: 0 auto; margin: 0 auto;
} }
.byline { .byline {
font-size: 0.8em; margin: 0 0 4rem 0;
border-bottom: 1px solid #eee; padding: 0 0 1.6rem 0;
padding: 0; border-bottom: var(--border-w) solid #6767785b;
font-size: var(--h6);
}
.byline a {
border-bottom: none;
font-weight: 600;
}
.byline a:hover {
border-bottom: 2px solid var(--prime);
} }
.post h1 { .post h1 {
color: var(--second); color: var(--second);
max-width: 20em; max-width: 20em;
margin: 0 0 1.2rem 0; margin: 0 0 .8rem 0;
} }
.post :global(h2) { .post :global(h2) {
margin: 2em 0 0.5em 0; margin: 2em 0 0.5em 0;
color: var(--second); /* color: var(--second); */
color: var(--text);
font-size: var(--h3);
font-weight: 300;
} }
/* .post p,
.post :global(p) {
max-width: var(--linemax)
} */
.post :global(figure) { .post :global(figure) {
margin: 1.6rem 0 3.2rem 0; margin: 1.6rem 0 3.2rem 0;
} }
@ -78,7 +86,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);
} }
.post :global(pre) :global(code) { .post :global(pre) :global(code) {
@ -102,6 +110,10 @@
z-index: 2; z-index: 2;
} }
.post :global(.max) {
width: 100%;
}
.post :global(iframe) { .post :global(iframe) {
width: 100%; width: 100%;
height: 420px; height: 420px;
@ -111,13 +123,20 @@
} }
@media (min-width: 910px) { @media (min-width: 910px) {
.post :global(iframe) { .post :global(.max) {
width: calc(100vw - 2 * var(--side-nav)); width: calc(100vw - 2 * var(--side-nav));
margin: 2em calc(400px + var(--side-nav) - 50vw); margin: 0 calc(var(--main-width) / 2 - 50vw);
text-align: center;
}
.post :global(iframe) {
width: 100%;
max-width: 1100px;
margin: 2em auto;
} }
} }
@media (min-width: 1460px) { /* @media (min-width: 1460px) {
.post :global(iframe) { .post :global(iframe) {
width: 1360px; width: 1360px;
margin: 2em -280px; margin: 2em -280px;
@ -128,5 +147,5 @@
.post :global(iframe) { .post :global(iframe) {
height: 640px; height: 640px;
} }
} } */
</style> </style>

12
site/src/routes/blog/_posts.js
Unescape View File

@ -5,17 +5,23 @@ import marked from 'marked';
import PrismJS from 'prismjs'; import PrismJS from 'prismjs';
import 'prismjs/components/prism-bash'; import 'prismjs/components/prism-bash';
export default function() { export default function get_posts() {
return fs return fs
.readdirSync('content/blog') .readdirSync('content/blog')
.map(file => { .map(file => {
if (path.extname(file) !== '.md') return; if (path.extname(file) !== '.md') return;
const match = /^(\d+-\d+-\d+)-(.+)\.md$/.exec(file);
if (!match) throw new Error(`Invalid filename '${file}'`);
const [, pubdate, slug] = match;
const markdown = fs.readFileSync(`content/blog/${file}`, 'utf-8'); const markdown = fs.readFileSync(`content/blog/${file}`, 'utf-8');
const { content, metadata } = extract_frontmatter(markdown); const { content, metadata } = extract_frontmatter(markdown);
const date = new Date(`${metadata.pubdate} EDT`); // cheeky hack const date = new Date(`${pubdate} EDT`); // cheeky hack
metadata.pubdate = pubdate;
metadata.dateString = date.toDateString(); metadata.dateString = date.toDateString();
const renderer = new marked.Renderer(); const renderer = new marked.Renderer();
@ -41,7 +47,7 @@ export default function() {
return { return {
html, html,
metadata, metadata,
slug: file.replace(/^[\d-]+/, '').replace(/\.md$/, ''), slug
}; };
}) })
.sort((a, b) => a.metadata.pubdate < b.metadata.pubdate ? 1 : -1); .sort((a, b) => a.metadata.pubdate < b.metadata.pubdate ? 1 : -1);

8
site/src/routes/blog/index.json.js
Unescape View File

@ -4,12 +4,16 @@ let json;
export function get(req, res) { export function get(req, res) {
if (!json || process.env.NODE_ENV !== 'production') { if (!json || process.env.NODE_ENV !== 'production') {
json = JSON.stringify(get_posts().map(post => { const posts = get_posts()
.filter(post => !post.metadata.draft)
.map(post => {
return { return {
slug: post.slug, slug: post.slug,
metadata: post.metadata metadata: post.metadata
}; };
})); });
json = JSON.stringify(posts);
} }
res.set({ res.set({

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

@ -30,40 +30,44 @@
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: 1em; grid-gap: 1em;
min-height: calc(100vh - var(--nav-h)); min-height: calc(100vh - var(--nav-h));
padding: var(--top-offset) var(--side-nav) 0 var(--side-nav); padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
max-width: var(--main-width); max-width: var(--main-width);
margin: 0 auto; margin: 0 auto;
} }
h2 { h2 {
display: inline-block; display: inline-block;
margin: 2rem 0 0.5rem 0; margin: 3.2rem 0 0.4rem 0;
color: var(--second); color: var(--text);
/* max-width: 18em; */ max-width: 18em;
font-size: 2rem; font-size: var(--h3);
font-weight: 300;
} }
.post:first-child { .post:first-child {
margin: 0 0 2em 0; margin: 0 0 2rem 0;
border-bottom: 1px solid #eee; padding: 0 0 4rem 0;
border-bottom: var(--border-w) solid #6767785b; /* based on --second */
} }
.post:first-child h2 { .post:first-child h2 {
font-size: 4rem; font-size: 4rem;
font-weight: 600;
color: var(--second);
} }
.post:first-child::before { .post:first-child::before,
.post:nth-child(2)::before {
content: 'Latest post • ' attr(data-pubdate); content: 'Latest post • ' attr(data-pubdate);
font-weight: 400; color: var(--flash);
color: #aaa; font-size: var(--h6);
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase; text-transform: uppercase;
} }
.post:nth-child(2)::before { .post:nth-child(2)::before {
content: 'Older posts'; content: 'Older posts';
font-weight: 400;
color: #aaa;
text-transform: uppercase;
} }
.post p { .post p {
@ -72,9 +76,7 @@
color: var(--second); color: var(--second);
} }
.post > a { .post > a { display: block }
display: block;
}
.posts a:hover, .posts a:hover,
.posts a:hover > h2 { .posts a:hover > h2 {

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>

85
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 4rem 0.2rem;
border-top: 2px solid var(--second); border-top: var(--border-w) solid #6767785b; /* based on --second */
color: var(--second); color: var(--text);
line-height: 1; line-height: 1;
font-size: var(--h3);
letter-spacing: .05em;
text-transform: uppercase; text-transform: uppercase;
} }
@ -260,18 +247,31 @@
.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: var(--text);
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;
} }
.content :global(h3):first-of-type {
border: none;
margin: 0;
}
/* 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 +289,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 +304,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 +319,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 +350,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>
@ -389,6 +375,7 @@
<Icon name='edit' /></a> <Icon name='edit' /></a>
</small> </small>
</h2> </h2>
{@html section.html} {@html section.html}
</section> </section>
{/each} {/each}

71
site/src/routes/examples/index.svelte
Unescape View File

@ -19,60 +19,57 @@
margin: 0 auto; margin: 0 auto;
} }
h1 { h1 { margin: 6rem 0 6rem -0.05em }
margin: 4rem 0 4rem -0.05em;
font-size: 4rem;
}
h2 { h2 {
margin: 0 0 1em 0; margin: 0 0 1em 0;
font-size: 18px; font: 600 var(--h4) var(--font);
border-bottom: 1px solid #eee; border-bottom: var(--border-w) solid #eee;
text-transform: uppercase; text-transform: uppercase;
padding: 0 0 0.5em 0; letter-spacing: .05em;
padding: 0 0 0.2em 0;
} }
section { section { margin: 0 0 4rem 0 }
margin: 0 0 2em 0;
}
.example { .example {
position: relative;
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
padding: 0 0 0 85px; justify-content: center;
min-height: 50px; text-align: center;
font-weight: 300; font: 300 var(--h5) var(--font);
} }
.grid { .thumbnail {
grid-template-columns: repeat(1, 1fr); position: relative;
grid-gap: 0.5em; background: white 50% 50% no-repeat;
background-size: contain;
width: 5rem;
height: 5rem;
margin: .8rem 33%;
border: 1px solid #ccc;
border-radius: var(--border-r);
box-shadow: 1px 1px 2px rgba(0,0,0,0.13);
} }
@media (min-width: 720px) { .e-grid {
.grid { display: grid;
/* grid-gap: 2.4rem; */
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} align-items: center;
} }
@media (min-width: 1080px) { @media (min-width: 720px) {
.grid { .e-grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(4, 1fr);
} }
} }
.thumbnail { @media (min-width: 1080px) {
position: absolute; .e-grid {
background: white 50% 50% no-repeat; grid-template-columns: repeat(6, 1fr);
background-size: contain; }
width: 75px;
height: 50px;
left: 0;
top: 0;
border: 1px solid #ccc;
border-radius: 2px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
} }
</style> </style>
@ -80,14 +77,14 @@
<h1>Examples</h1> <h1>Examples</h1>
{#each groups as group} {#each groups as group}
<section> <section class="">
<h2>{group.title}</h2> <h2>{group.title}</h2>
<div class="grid"> <div class="e-grid">
{#each group.examples as example} {#each group.examples as example}
<a class="example" href="repl?example={example.slug}"> <a class="example" href="repl?example={example.slug}">
<div class="thumbnail" style="background-image: url(examples/thumbnails/{example.slug}.png)"></div> <div class="thumbnail" style="background-image: url(examples/thumbnails/{example.slug}.png)"></div>
<span>{example.title}</span> <p>{example.title}</p>
</a> </a>
{/each} {/each}
</div> </div>

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

@ -1,6 +1,4 @@
<script> <script>
import Icon from '../components/Icon.svelte';
import Logo from '../components/Logo.svelte';
import Blurb from './_components/Blurb.svelte'; import Blurb from './_components/Blurb.svelte';
import WhosUsingSvelte from './_components/WhosUsingSvelte.svelte'; import WhosUsingSvelte from './_components/WhosUsingSvelte.svelte';
import IntersectionObserver from '../components/IntersectionObserver.svelte'; import IntersectionObserver from '../components/IntersectionObserver.svelte';
@ -25,9 +23,8 @@
max-width: 120rem; max-width: 120rem;
} }
.container ul { .container h3 { color: var(--text) }
list-style: none; .container ul { list-style: none }
}
/* max line-length ~60 chars */ /* max line-length ~60 chars */
li:not(.box) > p { li:not(.box) > p {
@ -39,65 +36,53 @@
--text: hsl(36, 3%, 44%); --text: hsl(36, 3%, 44%);
} }
.logo { .hero {
position: absolute; margin: 10rem auto;
left: -120px;
top: -120px;
width: 80vmin;
height: 80vmin;
opacity: 0.1;
will-change: transform;
} }
.hero h1 { .hero h3, .logotype {
text-align: center; position: relative;
margin: 2rem 0; left: 1.6rem;
font-size: 6rem;
color: var(--heading);
font-weight: 100;
letter-spacing: .12em;
text-transform: uppercase;
} }
.hero h2 { .hero h3 {
text-align: center; font-size: 2rem;
display: block; }
position: relative;
font-size: 3.2rem; .logotype {
text-align: center; height: 4rem;
width: 100%; }
text-transform: lowercase;
font-weight: 300; .logo {
opacity: 0.7; position: absolute;
top: -4rem;
right: 0rem;
width: 52rem;
will-change: transform;
display: none;
} }
.examples { .examples {
background: var(--second); background: var(--second);
color: white; color: white;
/* padding: 2em 0; */
overflow: hidden; overflow: hidden;
} }
.example { .example {
/* background: var(--second);
color: white;
padding: 0.8rem;
border-radius: var(--border-r); */
width: 100%; width: 100%;
height: 420px; }
.example > p {
margin: 4.4rem 2.4rem 2.4rem 0;
} }
.repl-container { .repl-container {
width: 100%; width: 100%;
height: 100%; height: 420px;
border-radius: var(--border-r); border-radius: var(--border-r);
overflow: hidden; overflow: hidden;
} }
.example > div:first-child {
/* padding: 0.8rem; */
}
.contributor { .contributor {
width: 2.4em; width: 2.4em;
height: 2.4em; height: 2.4em;
@ -107,48 +92,67 @@
background: no-repeat url(/contributors.jpg); background: no-repeat url(/contributors.jpg);
background-size: auto 102%; background-size: auto 102%;
margin: 0 0.5em 0.5em 0; margin: 0 0.5em 0.5em 0;
border: 1px solid var(--second); border: 2px solid var(--second);
}
@media (min-width: 640px) {
.logotype {
height: 6rem;
}
.hero h3 {
font-size: var(--h3);
}
}
@media (min-width: 800px) {
.logo {
display: block;
}
.hero {
margin: 15rem auto;
}
.hero h3, .logotype {
left: 3rem;
}
} }
@media (min-width: 920px) { @media (min-width: 920px) {
.example { .example {
display: grid; display: grid;
grid-template-columns: 1fr 4fr; grid-template-columns: 1fr 3fr;
grid-gap: 0.5em; grid-gap: 0.5em;
align-items: start; align-items: start;
} }
} }
@media screen and (min-width: 870px) { @media (min-width: 1200px) {
.hero h1 { .logo {
position: relative; right: calc(50vw - 60rem);
top: -.8rem;
font-size: 18rem;
margin: 2rem 2rem 0 1rem;
} }
} }
</style> </style>
<svelte:head> <svelte:head>
<title>Svelte • The magical disappearing UI framework</title> <title>Svelte • Cybernetically enhanced web apps</title>
</svelte:head> </svelte:head>
<svelte:window bind:scrollY={sy}/> <svelte:window bind:scrollY={sy}/>
<img alt="Svelte logo" class="logo" src="logo.svg" style="transform: translate(0,{sy * 0.2}px)"> <img alt="Svelte logo" class="logo" src="svelte-logo-outline.svg" style="transform: translate(0, {sy * .2}px)">
<section class="hero container"> <section class="hero container">
<h2>Cybernetically enhanced web apps</h2> <img alt="Svelte logotype" class="logotype" src="svelte-logotype.svg">
<h1>Svelte</h1> <h3>Cybernetically enhanced web apps</h3>
</section> </section>
<Blurb/> <Blurb/>
<div class="examples"> <div class="examples">
<section class="container example linkify"> <section class="container example linkify">
<div>
<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>
<div class="repl-container"> <div class="repl-container">
<IntersectionObserver once let:intersecting top={400}> <IntersectionObserver once let:intersecting top={400}>
@ -161,9 +165,7 @@
</section> </section>
<section class="container example linkify"> <section class="container example linkify">
<div>
<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>
<div class="repl-container"> <div class="repl-container">
<IntersectionObserver once let:intersecting top={400}> <IntersectionObserver once let:intersecting top={400}>
@ -176,9 +178,7 @@
</section> </section>
<section class="container example linkify"> <section class="container example linkify">
<div>
<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>
<div class="repl-container"> <div class="repl-container">
<IntersectionObserver once let:intersecting top={400}> <IntersectionObserver once let:intersecting top={400}>
@ -191,9 +191,7 @@
</section> </section>
<section class="container example linkify"> <section class="container example linkify">
<div>
<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>
<div class="repl-container"> <div class="repl-container">
<IntersectionObserver once let:intersecting top={400}> <IntersectionObserver once let:intersecting top={400}>

16
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 {

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

@ -28,7 +28,7 @@
a { a {
display: block; display: block;
padding: 0.75em 0; padding: 0.7em 0;
text-align: center; text-align: center;
opacity: 0.7; opacity: 0.7;
} }
@ -40,11 +40,11 @@
span { span {
white-space: nowrap; white-space: nowrap;
position: relative;
top: 0.3em;
} }
strong { strong { opacity: 0.7 }
opacity: 0.7;
}
select { select {
position: absolute; position: absolute;

47
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,51 @@
.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;
position: relative;
top: -0.1em;
} }
.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 {

2
site/src/template.html
Unescape View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta name='viewport' content='width=device-width'> <meta name='viewport' content='width=device-width'>
<meta name='theme-color' content='#aa1e1e'> <meta name='theme-color' content='#ff3e00'>
%sapper.base% %sapper.base%

BIN
site/static/fonts/overpass/overpass-latin-600.woff2
View File

Binary file not shown.

420
site/static/global.css
Unescape View File

@ -1,16 +1,76 @@
/* fonts */ /*
-----------------------------------------------
vars – css custom-properties
/* overpass-100normal - latin */ NOTE
@font-face { - some vars change inside media-queries!
font-family: 'Overpass'; - under normal conditions, there's no need to touch these
font-style: normal; -----------------------------------------------
font-weight: 100; */
src: :root {
local('Overpass Thin '), --nav-h: 6rem;
local('Overpass-Thin'), --top-offset: 6rem;
url('fonts/overpass/overpass-latin-100.woff2') format('woff2'); --sidebar-w: 30rem;
--main-width: 80rem;
--code-w: 72em;
--side-nav: 3.2rem;
--side-page: var(--side-nav);
/* easings */
--in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--inout-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
--out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--inout-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
} }
@media screen and (min-width: 768px) {
:root {
--side-page: 14vw;
--top-offset: 10rem;
--side-nav: 4.8rem;
}
}
/* theme vars */
.theme-default {
--back: #ffffff;
--back-light: #f6fafd;
--back-api: #eff8ff;
--prime: #ff3e00;
--second: #676778;
--flash: #40b3ff;
--heading: var(--second);
--text: #444;
--border-w: .3rem; /* border-width */
--border-r: .4rem; /* border-radius */
}
/* typo vars */
.typo-default {
--unit: .8rem;
--code-fs: 1.3rem;
--h6: 1.4rem;
--h5: 1.6rem;
--h4: 1.8rem; /* default font-size */
--h3: 2.6rem;
--h2: 3rem;
--h1: 3.2rem;
--linemax: 42em; /* max line-length */
--lh: 1.5; /* base line-height */
}
body {
--font: 'Overpass', sans-serif;
--font-mono: 'Fira Mono', monospace;
--font-ui: var(--font-mono);
--font-system: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
/* fonts ---------------------------------- */
/* overpass-300normal - latin */ /* overpass-300normal - latin */
@font-face { @font-face {
font-family: 'Overpass'; font-family: 'Overpass';
@ -22,26 +82,15 @@
url('fonts/overpass/overpass-latin-300.woff2') format('woff2'); url('fonts/overpass/overpass-latin-300.woff2') format('woff2');
} }
/* overpass-400normal - latin */ /* overpass-600normal - latin */
@font-face { @font-face {
font-family: 'Overpass'; font-family: 'Overpass';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 600;
src:
local('Overpass Light '),
local('Overpass-Light'),
url('fonts/overpass/overpass-latin-400.woff2') format('woff2');
}
/* overpass-700normal - latin */
@font-face {
font-family: 'Overpass';
font-style: normal;
font-weight: 700;
src: src:
local('Overpass Bold '), local('Overpass Bold '),
local('Overpass-Bold'), local('Overpass-Bold'),
url('fonts/overpass/overpass-latin-700.woff2') format('woff2'); url('fonts/overpass/overpass-latin-600.woff2') format('woff2');
} }
/* fira-mono-400normal - latin */ /* fira-mono-400normal - latin */
@ -55,65 +104,6 @@
url('fonts/fira-mono/fira-mono-latin-400.woff2') format('woff2'); url('fonts/fira-mono/fira-mono-latin-400.woff2') format('woff2');
} }
/* roboto-400normal - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-display: swap;
font-weight: 400;
src:
local('Roboto Regular '),
local('Roboto-Regular'),
url('fonts/roboto/roboto-latin-400.woff2') format('woff2');
}
/* roboto-400italic - latin */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-display: swap;
font-weight: 400;
src:
local('Roboto Regular italic'),
local('Roboto-Regularitalic'),
url('fonts/roboto/roboto-latin-400italic.woff2') format('woff2');
}
/* roboto-500normal - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-display: swap;
font-weight: 500;
src:
local('Roboto Medium '),
local('Roboto-Medium'),
url('fonts/roboto/roboto-latin-500.woff2') format('woff2');
}
/* roboto-500italic - latin */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-display: swap;
font-weight: 500;
src:
local('Roboto Medium italic'),
local('Roboto-Mediumitalic'),
url('fonts/roboto/roboto-latin-500italic.woff2') format('woff2');
}
body {
--font: 'Overpass', sans-serif;
/* --font: 'Roboto', 'sans-serif'; */
/* --font-mono: 'Overpass Mono', monospace; */
/* --font-mono: 'IBM Plex Mono'; */
--font-mono: 'Fira Mono', monospace;
--font-ui: var(--font-mono);
--font-system: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
/* base reset ----------------------------- */ /* base reset ----------------------------- */
html { html {
font-size: 62.5%; font-size: 62.5%;
@ -130,99 +120,39 @@ html {
padding: 0; padding: 0;
} }
/* links reset ---------------------------- */ /* link reset ----------------------------- */
a { a {
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
color: inherit; color: inherit;
} }
a:hover, a:hover, a:active { color: var(--flash) }
a:active { a:focus { outline: none }
color: var(--flash);
}
a:focus {
outline: none
}
/* /*
----------------------------------------------- -----------------------------------------------
global styles global styles
NOTE
– !important overrides class-definitions
- some vars change inside media-queries!
-----------------------------------------------
*/
/* constants and calc -----------------------
- commonly used values
- under normal conditions, there's no need to touch these
- look confusing/cluttering at first,
but they simplify life immensely
----------------------------------------------- -----------------------------------------------
*/ */
:root {
--nav-h: 6rem;
--top-offset: 6rem;
--sidebar-w: 30rem;
--main-width: 80rem;
--code-w: 72em;
--side-nav: 1.6rem;
--side-page: var(--side-nav);
/* easings */
--in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--inout-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
--out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--inout-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* theme vars ----------------------------- */
.theme-default {
--back: #ffffff;
--back-light: #fbfcfd;
--prime: #ff3e00;
--second: #676778;
--flash: #40b3ff;
--heading: var(--second);
--text: #333; /* hsl(36, 3%, 62%) */
--border-w: .3rem; /* border-width */
--border-r: .4rem; /* border-radius */
}
/* typo vars ------------------------------ */
.typo-default {
--unit: .8rem;
--code-fs: 1.3rem;
--h6: 1.6rem;
--h5: 1.6rem;
--h4: 1.8rem;
--h3: 2.4rem;
--h2: 3rem;
--h1: 3.2rem;
--linemax: 42em; /* max line-length */
--lh: calc(4/2.2); /* base line-height */
}
/* typography ----------------------------- */ /* typography ----------------------------- */
body { body {
font: 400 var(--h4)/var(--lh) var(--font); font: 300 var(--h4)/var(--lh) var(--font);
background-color: var(--back); background-color: var(--back);
color: var(--text); color: var(--text);
/* default spacing of Overpass is a bit too airy */
/* letter-spacing: -.013em; */
} }
h1, h2, h3, h4, h5, h6, blockquote { h1, h2, h3, h4, h5, h6, blockquote {
position: relative;
margin: 0; margin: 0;
color: var(--heading); color: var(--heading);
position: relative;
} }
h1, h2, h3, h4, h5, h6 { font-weight: 700 } /* h1, h2, h3, h4, h5, h6 { font-weight: 600 } */
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) }
@ -230,15 +160,18 @@ 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) }
h1, h2 {
font-family: var(--font);
line-height: 1.25;
}
h3 { font-weight: 300 }
p, ol, ul { p, ol, ul {
line-height: 1.5;
margin: 0 0 1em 0; margin: 0 0 1em 0;
font-family: Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
/* font-family: var(--font-system); */
} }
.b, b, strong { font-weight: 500 } .b, b, strong { font-weight: 600 }
tt, code, kbd, samp { tt, code, kbd, samp {
font: 400 var(--code-fs)/1.7 var(--font-mono); font: 400 var(--code-fs)/1.7 var(--font-mono);
@ -246,11 +179,8 @@ tt, code, kbd, samp {
code { code {
position: relative; position: relative;
border-radius: 0.3em; border-radius: .3em;
white-space: nowrap; white-space: nowrap;
/* border-top: .1rem solid #e5e5e9;
border-left: .1rem solid #e5e5e9; */
/* color: inherit; */
color: #444; color: #444;
-webkit-font-smoothing: initial; -webkit-font-smoothing: initial;
} }
@ -261,16 +191,17 @@ pre code {
background-color: none; background-color: none;
} }
/* sync CodeMirror with prism */
.CodeMirror {
font-size: var(--code-fs) !important;
}
::selection { ::selection {
background: var(--flash); background: var(--flash);
color: white; color: white;
} }
/* opinionated styles --------------------- */ /* opinionated styles --------------------- */
h1, h2 {
font-family: var(--font);
line-height: 1.2;
}
li:not(.white) > h2 { li:not(.white) > h2 {
color: var(--second) color: var(--second)
@ -293,7 +224,6 @@ blockquote :last-child {
margin: 0; margin: 0;
} }
/* buttons -------------------------------- */ /* buttons -------------------------------- */
button { button {
font-family: inherit; font-family: inherit;
@ -301,50 +231,78 @@ button {
background-color: transparent; background-color: transparent;
border: none; border: none;
color: currentColor; color: currentColor;
cursor: pointer;
} }
button:focus { outline: 0 } button:focus,
.btn:focus { outline: 0 }
button[disabled] { button[disabled],
.btn[disabled],
.btn:hover[disabled] {
opacity: .55; opacity: .55;
pointer-events: none; pointer-events: none;
} }
button > svg { button > svg,
.btn > svg {
position: relative; position: relative;
top: -.1rem; top: -.1rem;
width: 2rem !important; width: 2rem !important;
height: 2rem !important; height: 2rem !important;
stroke: currentColor !important;
} }
/* options */ /* reset ------- */
button[outline] { .btn {
min-height: var(--bttn-calc-h); --btn-h: 4rem;
line-height: var(--bttn-calc-h); --btn-outline: .2rem;
border: var(--bttn-outline) solid currentColor; --btn-font: var(--font);
background-color: white; --btn-calc-h: calc(var(--btn-h) - var(--btn-outline) * 2);
--btn-hover: linear-gradient(to top, rgba(0,0,0,.07), rgba(0,0,0,.07));
position: relative;
margin: 0 .8rem .8rem 0;
vertical-align: middle;
white-space: nowrap;
display: inline-block;
zoom: 1;
border: none transparent;
font: var(--h4) var(--btn-font);
border-radius: var(--border-r);
color: currentColor; color: currentColor;
cursor: pointer;
} }
/* links ------------------------------------- /* default */
- idea from https://up.docs.apex.sh .btn {
line-height: var(--btn-h);
height: var(--btn-h);
padding: 0 1.6rem;
transition: all .1s;
}
How can this be solved? .btn:hover {
Setup for all links is risky/tricky transform: scale(.98);
mix-blend-mode: multiply;
background-image: var(--btn-hover);
}
We need global <a>-styles and <ul>-styles inside markdown. /* optional */
These bleed into places, where not wanted (i.e. nav, homepage) .btn[outline] {
Same with lists - see below line-height: var(--btn-calc-h);
height: var(--btn-calc-h);
border: var(--btn-outline) solid currentColor;
background-color: white;
color: currentColor;
}
THIS WAY IS SHITTY!! /* links ------------------------------------- */
I'm too blind to see...
*/
.linkify a:not(.open-in-repl) { .linkify a:not(.open-in-repl) {
position: relative; position: relative;
padding: 0 0 .1rem 0; padding: 0 0 .1rem 0;
border-bottom: .1rem solid hsla(15, 100%, 50%, 0.5); /* muted --prime */ border-bottom: .1rem solid hsla(15, 100%, 50%, 0.5); /* muted --prime */
user-select: none; user-select: none;
/* white-space: nowrap; */
color: inherit; color: inherit;
transition: color .2s, border .2s, padding .2s; transition: color .2s, border .2s, padding .2s;
} }
@ -358,28 +316,6 @@ button[outline] {
border-bottom: .2rem solid hsla(15, 100%, 50%, 1); border-bottom: .2rem solid hsla(15, 100%, 50%, 1);
} }
/* .linkify a:not(.open-in-repl):before {
content: '';
position: absolute;
width: 100%;
height: .2rem;
bottom: -.2rem;
left: 0;
white-space: nowrap;
background: var(--prime);
border-radius: var(--border-r);
visibility: hidden;
transform: scaleX(0);
transform-origin: left center;
transition: all .15s var(--out-cubic);
z-index: -1;
}
.linkify a:not(.open-in-repl):hover:before {
visibility: visible;
transform: scaleX(1);
} */
a:hover:not(.disabled) > .icon { stroke: var(--flash) } a:hover:not(.disabled) > .icon { stroke: var(--flash) }
/* lists ---------------------------------- */ /* lists ---------------------------------- */
@ -405,8 +341,8 @@ a:hover:not(.disabled) > .icon { stroke: var(--flash) }
margin-top: 1.1rem; margin-top: 1.1rem;
margin-left: -1.8rem; margin-left: -1.8rem;
background-color: var(--second); background-color: var(--second);
width: .8rem; width: .6rem;
height: 0.8rem; height: .6rem;
border-radius: 2px; border-radius: 2px;
opacity: 0.7; opacity: 0.7;
} }
@ -425,14 +361,12 @@ td, th {
padding: 0.4rem 0.8rem 0.4rem 0; padding: 0.4rem 0.8rem 0.4rem 0;
} }
table code, table code, table span {
table span {
white-space: pre; white-space: pre;
} }
/* grid ----------------------------------- */ /* grid ----------------------------------- */
.grid, .grid, .grid.half {
.grid.half {
display: grid; display: grid;
grid-gap: 2.4rem; grid-gap: 2.4rem;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -444,6 +378,18 @@ table span {
.grid > .cols-2, .grid > .cols-2,
.grid > .cols-3 { grid-column: span 1 } .grid > .cols-3 { grid-column: span 1 }
@media screen and (min-width: 840px) {
.grid.half,
.grid { grid-template-columns: repeat(2, 1fr) }
.grid > .cols-2,
.grid > .cols-3 { grid-column: span 2 }
}
@media screen and (min-width: 1100px) {
.grid { grid-template-columns: repeat(3, 1fr) }
.grid > .cols-2 { grid-column: span 2 }
.grid > .cols-3 { grid-column: span 3 }
}
/* helper styles -------------------------- */ /* helper styles -------------------------- */
.flex-auto { flex: 1 0 auto } .flex-auto { flex: 1 0 auto }
@ -453,8 +399,7 @@ table span {
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
.legend, figcaption, .legend, figcaption, .post aside {
.post aside {
max-width: none; max-width: none;
margin: 0 auto; margin: 0 auto;
padding: 1.6rem 0 0 .8rem; padding: 1.6rem 0 0 .8rem;
@ -497,13 +442,7 @@ table span {
.bg-second { background-color: var(--second) !important } .bg-second { background-color: var(--second) !important }
.bg-flash { background-color: var(--flash) !important } .bg-flash { background-color: var(--flash) !important }
/* inputs --------------------------------- */
/*
-----------------------------------------------
inputs
-----------------------------------------------
*/
input[type="checkbox"] { input[type="checkbox"] {
/* display: block; */ /* display: block; */
position: relative; position: relative;
@ -523,13 +462,13 @@ input[type="checkbox"]::before {
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 2px;
border-radius: 1em; border-radius: 1em;
top: 0px; top: 0;
left: 0px; left: 0;
background: var(--second); background: var(--second);
box-sizing: border-box;
-webkit-transition: .25s ease-out; -webkit-transition: .25s ease-out;
padding: 2px; /* box-sizing: border-box; */
box-sizing: content-box; box-sizing: content-box;
} }
@ -554,30 +493,3 @@ input[type="checkbox"]::after {
input[type="checkbox"]:checked::after { input[type="checkbox"]:checked::after {
left: calc(100% - 9px); left: calc(100% - 9px);
} }
/*
-----------------------------------------------
media-queries
-----------------------------------------------
*/
@media screen and (min-width: 768px) {
:root {
--side-page: 14vw;
--top-offset: 10rem;
--side-nav: 4.8rem;
}
}
@media screen and (min-width: 840px) {
.grid.half,
.grid { grid-template-columns: repeat(2, 1fr) }
.grid > .cols-2,
.grid > .cols-3 { grid-column: span 2 }
}
@media screen and (min-width: 1100px) {
.grid { grid-template-columns: repeat(3, 1fr) }
.grid > .cols-2 { grid-column: span 2 }
.grid > .cols-3 { grid-column: span 3 }
}

BIN
site/static/images/twitter-card.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 20 KiB

5
site/static/logo.svg
Unescape View File

@ -1,5 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

2
site/static/prism.css
Unescape View File

@ -41,7 +41,7 @@ pre[class*='language-'] {
margin: .8rem 0 2.4rem; margin: .8rem 0 2.4rem;
/* max-width: var(--code-w); */ /* max-width: var(--code-w); */
border-radius: var(--border-r); border-radius: var(--border-r);
box-shadow: 1px 1px 0.1rem rgba(68, 68, 68, 0.05) inset; box-shadow: 1px 1px 1px rgba(68, 68, 68, .12) inset;
} }
:not(pre) > code[class*='language-'], :not(pre) > code[class*='language-'],

3
site/static/svelte-logo-horizontal.svg
Unescape View File

@ -0,0 +1,3 @@
<svg id="svelte" xmlns="http://www.w3.org/2000/svg" width="519" height="139" viewBox="0 0 519 139"><path id="logotype" fill="#4a4a55" d="M172.39,100.41a24.1,24.1,0,0,1-13.72-3.87,19.86,19.86,0,0,1-8-10.61L159,82.86a15.4,15.4,0,0,0,5.45,6.6,14.37,14.37,0,0,0,8.27,2.43,12.14,12.14,0,0,0,7.88-2.38,8.29,8.29,0,0,0,2.94-6.82,7.43,7.43,0,0,0-.81-3.45,10.32,10.32,0,0,0-1.83-2.6,12.36,12.36,0,0,0-3.16-2.09c-1.42-.71-2.59-1.25-3.53-1.62s-2.32-.87-4.13-1.49c-2.28-.8-4-1.42-5.12-1.88a37.86,37.86,0,0,1-4.47-2.25,16.37,16.37,0,0,1-4.18-3.16A15.43,15.43,0,0,1,153.81,60a14.77,14.77,0,0,1,4-16.79q5.12-4.51,13.89-4.51,7.34,0,12.06,3.23a15.63,15.63,0,0,1,6.35,8.61l-8.18,2.73a9.57,9.57,0,0,0-4-4.39A13.3,13.3,0,0,0,171,47.24a10.7,10.7,0,0,0-6.69,1.87,6.28,6.28,0,0,0-2.42,5.29,5.52,5.52,0,0,0,1.87,4.09,13,13,0,0,0,3.92,2.64c1.36.57,3.44,1.33,6.22,2.3,1.7.63,3,1.09,3.79,1.41s2,.83,3.62,1.57a25.79,25.79,0,0,1,3.67,2,34.36,34.36,0,0,1,3,2.43,12.86,12.86,0,0,1,2.6,3.11,17.06,17.06,0,0,1,1.53,3.84,17.42,17.42,0,0,1,.64,4.81q0,8.36-5.71,13.08T172.39,100.41Zm54.62-1L206.56,39.74h9.54l13.55,41.58a66.19,66.19,0,0,1,1.88,6.82,63.43,63.43,0,0,1,1.87-6.82l13.38-41.58h9.46L235.87,99.39Zm47.29,0V39.74h37v8.35H283.17V64.45h18.15V72.8H283.17V91h30v8.35Zm61.44,0V39.74h8.87V90.87h29.14v8.52Zm71.41-51.13V99.39h-8.86V48.26H381.42V39.74H424v8.52Zm35.2,51.13V39.74h37v8.35H451.21V64.45h18.15V72.8H451.21V91h30v8.35Z"/>
<path id="back" fill="#ff3e00" d="M110.23,28.39C99.83,13.51,79.29,9.1,64.44,18.56L38.36,35.18a29.9,29.9,0,0,0-13.52,20,31.53,31.53,0,0,0,3.1,20.24,29.94,29.94,0,0,0-4.47,11.18,31.86,31.86,0,0,0,5.45,24.12c10.4,14.88,30.94,19.29,45.79,9.83L100.79,104a30,30,0,0,0,13.52-20,31.52,31.52,0,0,0-3.11-20.23,30.13,30.13,0,0,0,4.48-11.18,31.9,31.9,0,0,0-5.45-24.12"/>
<path id="front" fill="#fff" d="M61.89,112.16a20.73,20.73,0,0,1-22.24-8.25,19.14,19.14,0,0,1-3.27-14.5A17,17,0,0,1,37,87l.49-1.5,1.34,1A33.78,33.78,0,0,0,49,91.56l1,.29-.09,1A5.9,5.9,0,0,0,51,96.7a6.25,6.25,0,0,0,6.7,2.48,5.85,5.85,0,0,0,1.6-.7L85.34,81.86a5.42,5.42,0,0,0,2.45-3.64,5.77,5.77,0,0,0-1-4.37,6.25,6.25,0,0,0-6.7-2.48,5.72,5.72,0,0,0-1.6.7l-10,6.35a19.1,19.1,0,0,1-5.29,2.32A20.72,20.72,0,0,1,41,72.5,19.16,19.16,0,0,1,37.75,58a18,18,0,0,1,8.13-12.06L72,29.32A19.05,19.05,0,0,1,77.26,27a20.71,20.71,0,0,1,22.23,8.25,19.14,19.14,0,0,1,3.28,14.5,20.15,20.15,0,0,1-.62,2.43l-.5,1.5-1.33-1a33.78,33.78,0,0,0-10.2-5.1l-1-.29.09-1a5.86,5.86,0,0,0-1.06-3.88A6.23,6.23,0,0,0,81.49,40a5.72,5.72,0,0,0-1.6.7L53.8,57.29a5.45,5.45,0,0,0-2.45,3.63,5.84,5.84,0,0,0,1,4.38A6.25,6.25,0,0,0,59,67.78a6,6,0,0,0,1.6-.7l10-6.34a18.61,18.61,0,0,1,5.3-2.33,20.7,20.7,0,0,1,22.23,8.24,19.16,19.16,0,0,1,3.28,14.5,18,18,0,0,1-8.13,12.06L67.19,109.83a19.18,19.18,0,0,1-5.3,2.33"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

3
site/static/logo-mask.svg → site/static/svelte-logo-mask.svg
Unescape View File

@ -1,6 +1,5 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
<path style="fill:black" 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 fill="black" 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
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' /> 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> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

5
site/static/svelte-logo-outline.svg
Unescape View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
<path fill="none" stroke="#ff3e00" stroke-width=".25" 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 fill="none" stroke="#ff3e00" stroke-width=".25" 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

4
site/static/svelte-logo-vertical.svg
Unescape View File

@ -0,0 +1,4 @@
<svg id="svelte" xmlns="http://www.w3.org/2000/svg" width="256" height="300" viewBox="0 0 256 300">
<path id="logotype" fill="#4a4a55" d="M44.41,265.87a14,14,0,0,1-8-2.26,11.53,11.53,0,0,1-4.66-6.18l4.86-1.78a9,9,0,0,0,3.18,3.84,8.31,8.31,0,0,0,4.81,1.42,7,7,0,0,0,4.59-1.39,4.83,4.83,0,0,0,1.71-4,4.25,4.25,0,0,0-.47-2A5.93,5.93,0,0,0,49.38,252a7,7,0,0,0-1.84-1.22c-.83-.41-1.51-.73-2.06-.94s-1.35-.51-2.41-.87c-1.32-.46-2.31-.83-3-1.09a23.69,23.69,0,0,1-2.61-1.32,9.63,9.63,0,0,1-2.43-1.83,8.76,8.76,0,0,1-1.46-2.41A8.11,8.11,0,0,1,33,239a8.29,8.29,0,0,1,3-6.45A11.79,11.79,0,0,1,44,229.94a12.16,12.16,0,0,1,7,1.89,9.11,9.11,0,0,1,3.69,5L50,238.43a5.53,5.53,0,0,0-2.31-2.56,7.77,7.77,0,0,0-4-1,6.23,6.23,0,0,0-3.9,1.09,3.66,3.66,0,0,0-1.41,3.07,3.22,3.22,0,0,0,1.09,2.39A7.61,7.61,0,0,0,41.68,243c.8.34,2,.78,3.63,1.34l2.2.82c.48.19,1.19.49,2.11.92a14.36,14.36,0,0,1,2.14,1.17,19.05,19.05,0,0,1,1.73,1.41A7.66,7.66,0,0,1,55,250.46a10.77,10.77,0,0,1,.89,2.24,10.13,10.13,0,0,1,.37,2.8A9.38,9.38,0,0,1,53,263.12,13,13,0,0,1,44.41,265.87Zm31.81-.6L64.31,230.54h5.56l7.89,24.21a39.48,39.48,0,0,1,1.09,4,39.48,39.48,0,0,1,1.09-4l7.79-24.21h5.51L81.38,265.27Zm27.54,0V230.54H125.3v4.86H108.92v9.53h10.57v4.86H108.92v10.62h17.47v4.86Zm35.78,0V230.54h5.16v29.77h17v5Zm41.58-29.77v29.77H176V235.5h-9.83v-5h24.81v5Zm20.49,29.77V230.54h21.54v4.86H206.77v9.53h10.57v4.86H206.77v10.62h17.47v4.86Z"/>
<path id="back" fill="#ff3e00" d="M191.87,52.11c-16.34-23.39-48.61-30.32-71.94-15.45L79,62.77A47,47,0,0,0,57.72,94.26,49.49,49.49,0,0,0,62.6,126a47.16,47.16,0,0,0-7,17.57,50.1,50.1,0,0,0,8.56,37.89c16.34,23.38,48.61,30.31,71.94,15.45l41-26.12a47,47,0,0,0,21.24-31.49,49.51,49.51,0,0,0-4.88-31.78,47.16,47.16,0,0,0,7-17.57,50.07,50.07,0,0,0-8.56-37.88"/>
<path id="front" fill="#fff" d="M115.93,183.7A32.55,32.55,0,0,1,81,170.75,30.11,30.11,0,0,1,75.85,148a29.12,29.12,0,0,1,1-3.83l.77-2.35,2.1,1.54a52.87,52.87,0,0,0,16,8l1.52.46-.14,1.52a9.17,9.17,0,0,0,1.65,6.09,9.79,9.79,0,0,0,10.52,3.9,9,9,0,0,0,2.52-1.1l41-26.11a8.53,8.53,0,0,0,3.85-5.71,9,9,0,0,0-1.55-6.87,9.82,9.82,0,0,0-10.52-3.9,9.08,9.08,0,0,0-2.51,1.1l-15.64,10a30.08,30.08,0,0,1-8.32,3.66A32.55,32.55,0,0,1,83.15,121.4,30.15,30.15,0,0,1,78,98.61,28.24,28.24,0,0,1,90.77,79.68l41-26.12a30,30,0,0,1,8.33-3.65,32.54,32.54,0,0,1,34.93,13,30.11,30.11,0,0,1,5.15,22.78,29.12,29.12,0,0,1-1,3.83l-.77,2.35-2.1-1.54a52.64,52.64,0,0,0-16-8l-1.52-.46.14-1.52a9.2,9.2,0,0,0-1.65-6.1,9.82,9.82,0,0,0-10.52-3.9,9,9,0,0,0-2.52,1.11l-41,26.11a8.49,8.49,0,0,0-3.85,5.7,9,9,0,0,0,1.55,6.87A9.81,9.81,0,0,0,111.45,114a9,9,0,0,0,2.52-1.11l15.63-10a29.5,29.5,0,0,1,8.32-3.66,32.54,32.54,0,0,1,34.93,12.95A30.11,30.11,0,0,1,178,135a28.26,28.26,0,0,1-12.77,18.94l-41,26.11a30.27,30.27,0,0,1-8.33,3.66"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

5
site/static/svelte-logo.svg
Unescape View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
<path 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 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

2
site/static/svelte-logotype.svg
Unescape View File

@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="37.72 38.72 330.55 61.698">
<path id="logotype" fill="#4a4a55" d="M59.44,100.41a24.12,24.12,0,0,1-13.72-3.87,20,20,0,0,1-8-10.61l8.35-3.07a15.42,15.42,0,0,0,5.46,6.6,14.34,14.34,0,0,0,8.26,2.43,12.12,12.12,0,0,0,7.88-2.38,8.29,8.29,0,0,0,3-6.82,7.56,7.56,0,0,0-.81-3.45A10.34,10.34,0,0,0,68,76.64a12.28,12.28,0,0,0-3.15-2.09q-2.13-1.06-3.54-1.62c-.93-.37-2.31-.87-4.13-1.49-2.27-.8-4-1.42-5.11-1.88a37.85,37.85,0,0,1-4.48-2.25,16.48,16.48,0,0,1-4.17-3.16A15.19,15.19,0,0,1,40.86,60a14.8,14.8,0,0,1,4-16.79Q50,38.72,58.76,38.72c4.89,0,8.9,1.08,12.06,3.23a15.68,15.68,0,0,1,6.35,8.61L69,53.29a9.54,9.54,0,0,0-4-4.39,13.26,13.26,0,0,0-6.94-1.66,10.7,10.7,0,0,0-6.69,1.87A6.29,6.29,0,0,0,49,54.4a5.52,5.52,0,0,0,1.87,4.09,13,13,0,0,0,3.92,2.64c1.37.57,3.44,1.33,6.23,2.3,1.7.63,3,1.09,3.79,1.41s2,.83,3.62,1.57a25.58,25.58,0,0,1,3.66,2,32.87,32.87,0,0,1,3,2.43A13.09,13.09,0,0,1,77.64,74a18.05,18.05,0,0,1,1.53,3.84,17.42,17.42,0,0,1,.64,4.81q0,8.36-5.71,13.08T59.44,100.41Zm54.62-1L93.61,39.74h9.55l13.55,41.58a65.86,65.86,0,0,1,1.87,6.82,63.74,63.74,0,0,1,1.88-6.82l13.37-41.58h9.46L122.93,99.39Zm47.3,0V39.74h37v8.35H170.22V64.45h18.15V72.8H170.22V91h30v8.35Zm61.44,0V39.74h8.86V90.87h29.15v8.52Zm71.41-51.13V99.39h-8.86V48.26H268.47V39.74h42.61v8.52ZM329.4,99.39V39.74h37v8.35H338.27V64.45h18.15V72.8H338.27V91h30v8.35Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

Write Preview
Loading…
Cancel
Save