Improve styles (#30)
This commit is contained in:
Drew Powers
GitHub
parent
04a443a888
commit
11637df579
10 changed files with 141 additions and 70 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<style lang="scss">
|
||||
@use '../../public/css/var' as *;
|
||||
@use '../../public/css/animations' as *;
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
|
|
@ -83,6 +84,8 @@
|
|||
margin: 0 auto 0.75rem;
|
||||
font-weight: 900;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
font-family: $heading;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.045em;
|
||||
text-align: center;
|
||||
|
|
@ -99,6 +102,7 @@
|
|||
margin: 0;
|
||||
margin: auto;
|
||||
font-weight: 500;
|
||||
font-family: $heading;
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
letter-spacing: -1px;
|
||||
|
|
@ -108,6 +112,42 @@
|
|||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
min-width: 292px;
|
||||
padding: 0.75rem 1.25rem;
|
||||
padding-bottom: 0.75rem;
|
||||
font-size: 100%;
|
||||
font-family: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas,
|
||||
Liberation Mono, Courier New, monospace;
|
||||
line-height: 1.5rem;
|
||||
background-color: white;
|
||||
border: 1px solid #0006;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
@include animation-copy-button;
|
||||
|
||||
svg,
|
||||
.faded {
|
||||
color: #ccc;
|
||||
transition: color 0.1s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
// I don't think this is used
|
||||
.copy-button.active {
|
||||
animation: pulse 0.5s;
|
||||
animation-iteration-count: 1;
|
||||
|
||||
svg {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="hero">
|
||||
|
|
|
|||
|
|
@ -120,11 +120,11 @@
|
|||
</li>
|
||||
|
||||
<li class="section">
|
||||
<a class="link" href="/plugins"><span class="section-header">Plugin Catalog</span></a>
|
||||
<a class="link" href="/plugins"><span class="header">Plugin Catalog</span></a>
|
||||
</li>
|
||||
|
||||
<li class="section">
|
||||
<a class="link" href="/news"><span class="section-header">Community & News</span></a>
|
||||
<a class="link" href="/news"><span class="header">Community & News</span></a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@ export let version: string = '3.1.2';
|
|||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-area: logo;
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
|
|
@ -76,6 +77,22 @@ export let version: string = '3.1.2';
|
|||
}
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 0.25em;
|
||||
margin-bottom: 0.15rem;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.logo-type {
|
||||
font-weight: 700;
|
||||
font-family: $heading;
|
||||
letter-spacing: -0.03em;
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
|
||||
.mobile-open {
|
||||
display: flex;
|
||||
grid-area: mobile;
|
||||
|
|
@ -233,8 +250,8 @@ export let version: string = '3.1.2';
|
|||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
<a class="logo snow-logo" href="/">
|
||||
<svg class="snow-logo-icon" viewbox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
<a class="logo" href="/">
|
||||
<svg class="logo-icon" viewbox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g transform="translate(-1.000000, 0.000000)" fill-rule="nonzero">
|
||||
<path
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { h, Fragment } from 'preact';
|
||||
import { useEffect, useState } from 'preact/hooks';
|
||||
import * as Styles from './PluginSearchPage.module.css';
|
||||
import Styles from './PluginSearchPage.module.css';
|
||||
|
||||
async function searchPlugins(val) {
|
||||
const params3 = new URLSearchParams([
|
||||
|
|
|
|||
|
|
@ -4,6 +4,16 @@
|
|||
padding: 0.5rem 0.5rem 0.5rem 48px;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
display: flex;
|
||||
grid-column: span 1;
|
||||
overflow: hidden;
|
||||
font-family: Open Sans, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
|
||||
Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Segoe UI, Roboto,
|
||||
sans-serif;
|
||||
color: #1a202c;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.Card:nth-child(3n + 2) .Icon__Plugin {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ let description = 'Snowpack is a lightning-fast frontend build tool, designed fo
|
|||
<head>
|
||||
<style lang="scss">
|
||||
@use '../../public/css/var' as *;
|
||||
|
||||
|
||||
.top {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@ let description = 'Snowpack is a lightning-fast frontend build tool, designed fo
|
|||
padding: 0.1em !important;
|
||||
list-style: none;
|
||||
|
||||
h3 {
|
||||
.bullet-heading {
|
||||
margin: 0 0 0.25em 0;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
|
@ -78,7 +78,8 @@ let description = 'Snowpack is a lightning-fast frontend build tool, designed fo
|
|||
</a>
|
||||
|
||||
<div class="content markdown-body feature-list">
|
||||
<div class="feature-list-top">
|
||||
<div class="top">
|
||||
<h2 id="what-is-snowpack%3F">What is Snowpack?</h2>
|
||||
<p>
|
||||
<strong>Snowpack is a lightning-fast frontend build tool, designed
|
||||
for the modern web.</strong>
|
||||
|
|
@ -95,38 +96,38 @@ let description = 'Snowpack is a lightning-fast frontend build tool, designed fo
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list-bullets">
|
||||
<li class="feature-list-bullet">
|
||||
<h3>Instant startup</h3>
|
||||
<ul class="bullets">
|
||||
<li class="bullet">
|
||||
<h3 class="bullet-heading">Instant startup</h3>
|
||||
Snowpack's unbundled web development server
|
||||
<strong>starts up in 50ms or less</strong>
|
||||
and stays fast in large projects.
|
||||
</li>
|
||||
<li class="feature-list-bullet">
|
||||
<h3>Build once, cache forever</h3>
|
||||
<li class="bullet">
|
||||
<h3 class="bullet-heading">Build once, cache forever</h3>
|
||||
Snowpack never builds the same file twice. Powered by
|
||||
JavaScript’s native module system (ESM) in the browser.
|
||||
</li>
|
||||
<li class="feature-list-bullet">
|
||||
<h3>HMR feat. Fast Refresh</h3>
|
||||
<li class="bullet">
|
||||
<h3 class="bullet-heading">HMR feat. Fast Refresh</h3>
|
||||
No refresh required. See changes reflected instantly in the
|
||||
browser with
|
||||
<a href="/concepts/hot-module-replacement">HMR + Fast Refresh</a>
|
||||
for React, Preact & Svelte.
|
||||
</li>
|
||||
<li class="feature-list-bullet">
|
||||
<h3>Out-of-the-box support</h3>
|
||||
<li class="bullet">
|
||||
<h3 class="bullet-heading">Out-of-the-box support</h3>
|
||||
Enjoy Snowpack's built-in support for JSX, TypeScript, React,
|
||||
Preact, CSS Modules
|
||||
<a href="/reference/supported-files">and more.</a>
|
||||
</li>
|
||||
<li class="feature-list-bullet">
|
||||
<h3>Optimize for production</h3>
|
||||
<li class="bullet">
|
||||
<h3 class="bullet-heading">Optimize for production</h3>
|
||||
Build for production with built-in optimizations and plugin
|
||||
support for your favorite bundlers.
|
||||
</li>
|
||||
<li class="feature-list-bullet">
|
||||
<h3>Plugins? Plugins!</h3>
|
||||
<li class="bullet">
|
||||
<h3 class="bullet-heading">Plugins? Plugins!</h3>
|
||||
Babel? Sass? MDX? Browse the entire
|
||||
<a href="/plugins">Snowpack Plugin Catalog</a>
|
||||
to connect your favorite build tool (or
|
||||
|
|
@ -134,9 +135,9 @@ let description = 'Snowpack is a lightning-fast frontend build tool, designed fo
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="feature-list-buttons">
|
||||
<a href="/tutorials/quick-start" class="button button-primary feature-list-button">Get started</a>
|
||||
<a href="/concepts/how-snowpack-works" class="button feature-list-button">Learn more</a>
|
||||
<div class="buttons">
|
||||
<a href="/tutorials/quick-start" class="button button-primary feature-button">Get started</a>
|
||||
<a href="/concepts/how-snowpack-works" class="button feature-button">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -149,4 +150,4 @@ let description = 'Snowpack is a lightning-fast frontend build tool, designed fo
|
|||
<script async="async" defer="defer" src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -19,9 +19,6 @@ p {
|
|||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.header-logo,
|
||||
.header-snowpack,
|
||||
.header-snowpack-subtitle,
|
||||
.pretty-font,
|
||||
.version-number {
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
@use './components/card-grid';
|
||||
@use './components/container';
|
||||
@use './components/icon';
|
||||
@use './components/logo';
|
||||
@use './components/old';
|
||||
@use './components/view';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
@use '../var' as *;
|
||||
|
||||
/**
|
||||
* Snowpack Logo
|
||||
* That iconic mountain you know and love
|
||||
*/
|
||||
|
||||
.snow-logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
// -----------
|
||||
// Components
|
||||
// -----------
|
||||
|
||||
&-icon {
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 0.25em;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
&-type {
|
||||
font-weight: 700;
|
||||
font-family: $heading;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
}
|
||||
|
|
@ -126,6 +126,22 @@ export default function ({ filename, fileID }: { filename: string; fileID: strin
|
|||
html: {
|
||||
Element: {
|
||||
enter(node) {
|
||||
if (node.name === 'style') {
|
||||
// Same as ast.css (below)
|
||||
const code = Array.isArray(node.children) ? node.children.map(({ data }: any) => data).join('\n') : '';
|
||||
if (!code) return;
|
||||
const langAttr = (node.attributes || []).find(({ name }: any) => name === 'lang');
|
||||
styleNodes.push(node);
|
||||
styleTransformPromises.push(
|
||||
transformStyle(code, {
|
||||
type: (langAttr && langAttr.value[0] && langAttr.value[0].data) || undefined,
|
||||
filename,
|
||||
fileID,
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Find the root node to inject the <style> tag in later
|
||||
if (node.name === 'head') {
|
||||
rootNode = node; // If this is <head>, this is what we want. Always take this if found. However, this may not always exist (it won’t for Component subtrees).
|
||||
|
|
@ -144,10 +160,19 @@ export default function ({ filename, fileID }: { filename: string; fileID: strin
|
|||
css: {
|
||||
Style: {
|
||||
enter(node) {
|
||||
// Same as ast.html (above)
|
||||
// Note: this is duplicated from html because of the compiler we‘re using; in a future version we should combine these
|
||||
if (!node.content || !node.content.styles) return;
|
||||
const code = node.content.styles;
|
||||
const typeAttr = (node.attributes || []).find(({ name }: { name: string }) => name === 'lang');
|
||||
const langAttr = (node.attributes || []).find(({ name }: any) => name === 'lang');
|
||||
styleNodes.push(node);
|
||||
styleTransformPromises.push(transformStyle(code, { type: (typeAttr && typeAttr.value[0] && typeAttr.value[0].raw) || undefined, filename, fileID }));
|
||||
styleTransformPromises.push(
|
||||
transformStyle(code, {
|
||||
type: (langAttr && langAttr.value[0] && langAttr.value[0].data) || undefined,
|
||||
filename,
|
||||
fileID,
|
||||
})
|
||||
);
|
||||
|
||||
// TODO: we should delete the old untransformed <style> node after we’re done.
|
||||
// However, the svelte parser left it in ast.css, not ast.html. At the final step, this just gets ignored, so it will be deleted, in a sense.
|
||||
|
|
@ -167,21 +192,32 @@ export default function ({ filename, fileID }: { filename: string; fileID: strin
|
|||
// 1. transform <style> tags
|
||||
styleTransforms.forEach((result, n) => {
|
||||
if (styleNodes[n].attributes) {
|
||||
// Add to global CSS Module class list for step 2
|
||||
// 1a. Add to global CSS Module class list for step 2
|
||||
for (const [k, v] of result.cssModules) {
|
||||
allCssModules.set(k, v);
|
||||
}
|
||||
|
||||
// Update original <style> node with finished results
|
||||
styleNodes[n].attributes = styleNodes[n].attributes.map((attr: any) => {
|
||||
if (attr.name === 'type') {
|
||||
attr.value[0].raw = 'text/css';
|
||||
attr.value[0].data = 'text/css';
|
||||
}
|
||||
return attr;
|
||||
});
|
||||
// 1b. Inject final CSS
|
||||
const isHeadStyle = !styleNodes[n].content;
|
||||
if (isHeadStyle) {
|
||||
// Note: <style> tags in <head> have different attributes/rules, because of the parser. Unknown why
|
||||
(styleNodes[n].children as any) = [{ ...(styleNodes[n].children as any)[0], data: result.css }];
|
||||
} else {
|
||||
styleNodes[n].content.styles = result.css;
|
||||
}
|
||||
|
||||
// 3b. Update <style> attributes
|
||||
const styleTypeIndex = styleNodes[n].attributes.findIndex(({ name }: any) => name === 'type');
|
||||
if (styleTypeIndex !== -1) {
|
||||
console.log(styleNodes[n].attributes[styleTypeIndex]);
|
||||
styleNodes[n].attributes[styleTypeIndex].value[0].raw = 'text/css';
|
||||
styleNodes[n].attributes[styleTypeIndex].value[0].data = 'text/css';
|
||||
} else {
|
||||
styleNodes[n].attributes.push({ name: 'type', type: 'Attribute', value: [{ type: 'Text', raw: 'text/css', data: 'text/css' }] });
|
||||
}
|
||||
const styleLangIndex = styleNodes[n].attributes.findIndex(({ name }: any) => name === 'lang');
|
||||
if (styleLangIndex !== -1) styleNodes[n].attributes.splice(styleLangIndex, 1);
|
||||
}
|
||||
styleNodes[n].content.styles = result.css;
|
||||
});
|
||||
|
||||
// 2. inject finished <style> tags into root node
|
||||
|
|
|
|||
Loading…
Reference in a new issue