clean up landing page
This commit is contained in:
Fred K. Schott
parent
4ff1822bb9
commit
ae8840bf8f
4 changed files with 120 additions and 224 deletions
|
|
@ -1,81 +1,115 @@
|
|||
---
|
||||
let title = 'Snowpack';
|
||||
let description = 'Snowpack is a lightning-fast frontend build tool, designed for the modern web.';
|
||||
let title = 'Astro';
|
||||
let description = 'A better way to build a (static) site.';
|
||||
let permalink = 'https://astro.build/';
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap" rel="stylesheet">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<!-- <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" /> -->
|
||||
<!-- <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" /> -->
|
||||
<!-- <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" /> -->
|
||||
<!-- <link rel="manifest" href="/favicon/site.webmanifest" /> -->
|
||||
|
||||
<style lang="scss">
|
||||
body {
|
||||
background-color: #111;
|
||||
background-image: url("/cswbd0.svg");
|
||||
text-align: center;
|
||||
}
|
||||
.centered-logo {
|
||||
margin: 5rem auto;
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
background: #222C;
|
||||
display: inline-block;
|
||||
border: 2px solid #666;
|
||||
}
|
||||
.header {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: white;
|
||||
font-size: 52pt;
|
||||
margin-left: -3rem;
|
||||
}
|
||||
.wait-list-input {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
display: block;
|
||||
margin: 0rem auto;
|
||||
box-sizing: inherit;
|
||||
font-size: 100%;
|
||||
width: 344px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 6px;
|
||||
padding: 0 12px;
|
||||
background: #EEE;
|
||||
color: #222;
|
||||
height: 42px;
|
||||
line-height: normal;
|
||||
order: 1;
|
||||
outline: none;
|
||||
transition: border-color .15s ease;
|
||||
}
|
||||
.wait-list-text {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
display: block;
|
||||
margin: 1rem auto 0;
|
||||
box-sizing: inherit;
|
||||
font-size: 100%;
|
||||
width: 344px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 6px;
|
||||
padding: 0 12px;
|
||||
color: #EEE;
|
||||
height: 42px;
|
||||
line-height: normal;
|
||||
order: 1;
|
||||
outline: none;
|
||||
transition: border-color .15s ease;
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>{title}</title>
|
||||
<meta name="title" content={title} />
|
||||
<meta name="description" content="{description}" />
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="centered-logo">
|
||||
<svg width="344" height="340" viewBox="0 0 86 85" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="43.0005" cy="42.4265" r="40" transform="rotate(45 43.0005 42.4265)" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M54.572 20.0569L65.4131 30.8979L47.754 64.0134C46.5495 60.183 44.7599 56.4968 42.3852 53.0949L53.3315 32.9475L52.4685 32.0845L32.3842 43.0781C28.971 40.6874 25.2703 38.8867 21.4241 37.676L54.572 20.0569Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.9733 57.684C35.1799 58.4766 32.0514 57.7734 29.8524 55.5744C27.6534 53.3754 26.9502 50.2471 27.7427 47.4537C27.3662 47.71 27.0083 48.0052 26.6744 48.3391C22.1409 52.8725 22.4943 62.9325 22.4943 62.9325C22.4943 62.9325 32.5239 63.3164 37.0878 58.7525C37.4217 58.4186 37.7169 58.0605 37.9733 57.684Z" fill="white"/>
|
||||
</svg>
|
||||
<!-- <p class="wait-list-text">join the waitlist</p> -->
|
||||
<!-- <input class="wait-list-input" type="text" placeholder="enter your email" /> -->
|
||||
<!-- <h1 class="header" placeholder="">.astro</h1> -->
|
||||
</div>
|
||||
</body>
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={permalink} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content="https://astro.build/social.png" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={permalink} />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content="https://astro.build/social.png" />
|
||||
|
||||
<!-- Fonts -->
|
||||
<!-- <link rel="preconnect" href="https://fonts.gstatic.com"> -->
|
||||
<!-- <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap" rel="stylesheet"> -->
|
||||
|
||||
<!-- Styles -->
|
||||
<style lang="scss">
|
||||
body {
|
||||
background-color: #111;
|
||||
background-image: url("/cswbd0.svg");
|
||||
text-align: center;
|
||||
}
|
||||
.centered-logo {
|
||||
text-align: center;
|
||||
background: #FFFC;
|
||||
display: inline-block;
|
||||
border: 2px solid #666;
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 340px;
|
||||
height: 340px;
|
||||
transition: transform 200ms ease-in-out;
|
||||
}
|
||||
.centered-logo:hover {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.header {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: white;
|
||||
font-size: 52pt;
|
||||
margin-left: -3rem;
|
||||
}
|
||||
.wait-list-input {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
display: block;
|
||||
margin: 0rem auto;
|
||||
box-sizing: inherit;
|
||||
font-size: 100%;
|
||||
width: 344px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 6px;
|
||||
padding: 0 12px;
|
||||
background: #EEE;
|
||||
color: #222;
|
||||
height: 42px;
|
||||
line-height: normal;
|
||||
order: 1;
|
||||
outline: none;
|
||||
transition: border-color .15s ease;
|
||||
}
|
||||
.wait-list-text {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
display: block;
|
||||
box-sizing: inherit;
|
||||
font-size: 16pt;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 6px;
|
||||
padding: 0 12px;
|
||||
color: #EEE;
|
||||
line-height: normal;
|
||||
order: 1;
|
||||
outline: none;
|
||||
transition: border-color .15s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="centered-logo">
|
||||
<svg width="344" height="340" viewBox="0 0 86 85" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="43.0005" cy="42.4265" r="40" transform="rotate(45 43.0005 42.4265)" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M54.572 20.0569L65.4131 30.8979L47.754 64.0134C46.5495 60.183 44.7599 56.4968 42.3852 53.0949L53.3315 32.9475L52.4685 32.0845L32.3842 43.0781C28.971 40.6874 25.2703 38.8867 21.4241 37.676L54.572 20.0569Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.9733 57.684C35.1799 58.4766 32.0514 57.7734 29.8524 55.5744C27.6534 53.3754 26.9502 50.2471 27.7427 47.4537C27.3662 47.71 27.0083 48.0052 26.6744 48.3391C22.1409 52.8725 22.4943 62.9325 22.4943 62.9325C22.4943 62.9325 32.5239 63.3164 37.0878 58.7525C37.4217 58.4186 37.7169 58.0605 37.9733 57.684Z" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -40,15 +40,15 @@ viewBox="0 0 256 256" width="64px" height="64px">
|
|||
|
||||
<g>
|
||||
|
||||
<line fill="none" stroke="#666" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="192" y1="168" x2="192" y2="216"/>
|
||||
<line fill="none" stroke="#555" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="192" y1="168" x2="192" y2="216"/>
|
||||
|
||||
<line fill="none" stroke="#666" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="168" y1="192" x2="216" y2="192"/>
|
||||
<line fill="none" stroke="#555" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="168" y1="192" x2="216" y2="192"/>
|
||||
</g>
|
||||
<g>
|
||||
|
||||
<line fill="none" stroke="#EEE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6" x1="64" y1="40" x2="64" y2="88"/>
|
||||
<line fill="none" stroke="#999" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6" x1="64" y1="40" x2="64" y2="88"/>
|
||||
|
||||
<line fill="none" stroke="#EEE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6" x1="40" y1="64" x2="88" y2="64"/>
|
||||
<line fill="none" stroke="#999" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="6" x1="40" y1="64" x2="88" y2="64"/>
|
||||
</g>
|
||||
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
BIN
examples/landing-page/public/social.png
Normal file
BIN
examples/landing-page/public/social.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
|
|
@ -1,153 +1,15 @@
|
|||
---
|
||||
import Menu from '../components/Menu.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import BaseHead from '../components/BaseHead.astro';
|
||||
import BaseLayout from '../components/BaseLayout.astro';
|
||||
|
||||
let title = 'Snowpack';
|
||||
let description = 'Snowpack is a lightning-fast frontend build tool, designed for the modern web.';
|
||||
let title = 'Astro';
|
||||
let description = 'A better way to build a (static) site.';
|
||||
---
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style lang="scss">
|
||||
@use '../../public/css/var' as *;
|
||||
|
||||
.top {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bullets {
|
||||
display: grid;
|
||||
grid-row-gap: 1em;
|
||||
grid-column-gap: 2em;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
margin: 2.5em 0 !important;
|
||||
padding: 0.1em !important;
|
||||
list-style: none;
|
||||
|
||||
.bullet-heading {
|
||||
margin: 0 0 0.25em 0;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.bullet {
|
||||
display: list-item;
|
||||
padding: 0.25em;
|
||||
border-radius: 4px;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 6px;
|
||||
color: green !important;
|
||||
content: '✅';
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin: 2em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-button {
|
||||
display: inline-block;
|
||||
margin: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<BaseHead title={title} description={description} permalink="TODO" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<BaseLayout>
|
||||
<Hero bar="{title}" />
|
||||
<div foo="{title}" class="container" style="margin: 0 auto">
|
||||
<section class="snow-view__docs is-full is-home">
|
||||
<aside id="nav-primary" class="snow-view-nav">
|
||||
<Menu></Menu>
|
||||
</aside>
|
||||
|
||||
<article class="snow-view-main">
|
||||
<div class="content">
|
||||
<article class="grid-body">
|
||||
<a class="img-banner" href="https://osawards.com/javascript/2020" target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<img src="/img/JSAwardWinner.png" alt="2020 JavaScript Open Source Award Winner banner" />
|
||||
</a>
|
||||
|
||||
<div class="content markdown-body feature-list">
|
||||
<div class={'t' + 'o' + 'p'}>
|
||||
<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>
|
||||
It is an alternative to heavier, more complex bundlers like
|
||||
webpack or Parcel in your development workflow. Snowpack
|
||||
leverages JavaScript's native module system (<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">known
|
||||
as
|
||||
ESM</a>) to avoid unnecessary work and stay fast no matter how big
|
||||
your project grows.
|
||||
</p>
|
||||
<p>
|
||||
Once you try it, it's impossible to go back to anything else.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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="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="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="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="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="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
|
||||
<a href="/reference/plugins">create your own!</a>)
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
<!-- Place this tag in your head or just before your close body tag. -->
|
||||
<script async="async" defer="defer" src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
|
||||
<head>
|
||||
<BaseHead title={title} description={description} />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Site body... -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue