Skip to content

Commit

Permalink
[wip] Add styles to Snowpack app (#13)
Browse files Browse the repository at this point in the history 
* Add styles to Snowpack app

* Bubble up file build errors

* Fix merge error
  • Loading branch information
@drwpow
drwpow committed Mar 23, 2021
1 parent 9de1e8f commit 1fdc1c7
Show file tree
Hide file tree
Showing 25 changed files with 1,737 additions and 1,156 deletions.
2 changes: 1 addition & 1 deletion examples/snowpack/astro/components/Banner.hmx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@
</a>
</div>
</div>
</section>
</section>
112 changes: 112 additions & 0 deletions examples/snowpack/astro/components/Hero.hmx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,115 @@
<style type="text/scss">
@use '../../public/css/var' as *;

.hero {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
min-height: 20rem;
max-height: 30rem;
color: #111;
line-height: 1.5;
background: #2a85ca40;
background-image: url("data:image/svg+xml, %3Csvg xmlns='http:https://www.w3.org/2000/svg' viewBox='0 0 640 512' title='mountain' class='logo' fill='%23FFFB'%3E%3Cpath d='M634.92 462.7l-288-448C341.03 5.54 330.89 0 320 0s-21.03 5.54-26.92 14.7l-288 448a32.001 32.001 0 0 0-1.17 32.64A32.004 32.004 0 0 0 32 512h576c11.71 0 22.48-6.39 28.09-16.67a31.983 31.983 0 0 0-1.17-32.63zM320 91.18L405.39 224H320l-64 64-38.06-38.06L320 91.18z' /%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: calc(100% + 100px) calc(100% + 64px);
background-size: 50%;
border-bottom: 1px solid #0003;
//margin-top: $nav-height;

@media (min-width: $breakpoint-l) {
margin: 0;
}

a {
color: white;
}

> svg {
display: block;
margin: auto;
opacity: 0.9;
}

.logo {
position: absolute;
right: 0;
width: 100%;
}
.logo path {
fill: #fff;
}

.section {
padding: 1rem * 2;
}
}

.hero-cta {
display: flex;
justify-content: center;
margin: 1.5rem auto 0;
}

.header-link {
padding-left: 2px;
}

.header-logo {
display: flex;
align-items: center;
float: left;
margin: 0 -20px 0 0;
font-weight: bold;
font-size: 36px;
line-height: 1;

@media (min-width: $breakpoint-m) {
margin: 0 20px 0 0;
}

svg {
width: 31px;
height: 31px;
margin-right: 8px;
margin-left: 2px;
padding: 0;
color: #fff;
}
}

.header-snowpack {
margin: 0 auto 0.75rem;
font-weight: 900;
font-size: 3.5rem;
line-height: 1;
letter-spacing: -0.045em;
text-align: center;
opacity: 0.9;

@media (min-width: $breakpoint-m) {
max-width: none;
font-size: 5.75rem;
opacity: 1;
}
}

.header-snowpack-subtitle {
margin: 0;
margin: auto;
font-weight: 500;
font-size: 2rem;
line-height: 1;
letter-spacing: -1px;
text-align: center;

@media (min-width: $breakpoint-m) {
font-size: 3rem;
}
}
</style>

<div class="hero">
<div class="section">
<h1 class="header-snowpack">Snowpack</h1>
Expand Down
182 changes: 114 additions & 68 deletions examples/snowpack/astro/components/Menu.hmx
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,130 @@
<nav class="snow-toc">
<ol class="snow-toc-contents">
<li class="snow-toc-section">
<span class="snow-toc-section-header">Concepts</span>
<ol class="snow-toc-section-items">
<li>
<a class="snow-toc-link" href="/concepts/how-snowpack-works">How Snowpack Works</a>
</li>
<li>
<a class="snow-toc-link" href="/concepts/dev-server">The Dev Server</a>
</li>
<li>
<a class="snow-toc-link" href="/concepts/build-pipeline">The Build Pipeline</a>
</li>
<li>
<a class="snow-toc-link" href="/concepts/hot-module-replacement">Fast Refresh & HMR</a>
</li>
<style type="text/scss">
@use '../../public/css/var' as *;

.toc {
transition: padding 0.2s ease-out, opacity 0.2s ease-in-out;
}

.contents {
margin: 0;
padding: 0;
line-height: 1.8;
list-style: none;
}

.section {
+ .section {
margin-top: 1.5rem;
}
}

.header {
margin-top: 0;
margin-bottom: 8px;
color: rgba($white, 0.6);
font-weight: 600;
font-size: 20px;
font-family: $heading;
line-height: 1.2em;

@media (min-width: $breakpoint-m) {
color: $dark-grey;
}
}

.items {
margin: 0;
padding: 0;
list-style: none;
}

.link,
.subnav a {
position: relative;
display: block;
color: $white;
text-decoration: none;
border: none;
transition: color 0.3s;

@media (min-width: $breakpoint-m) {
color: $grey;
}

&::before {
position: absolute;
top: -2px;
left: -19px;
font-weight: 400;
font-size: 26px;
line-height: 1;
opacity: 0;
transition: left 0.14s ease-out;
content: '▸';
}

&:hover {
text-decoration: underline;
}

&.active {
color: #0c8cec;
text-decoration: underline;

&::before {
left: -17px;
opacity: 1;
}
}
}
</style>

<nav class="toc">
<ol class="contents">
<li class="section">
<span class="header">Concepts</span>
<ol class="items">
<li><a class="link" href="/concepts/how-snowpack-works">How Snowpack Works</a></li>
<li><a class="link" href="/concepts/dev-server">The Dev Server</a></li>
<li><a class="link" href="/concepts/build-pipeline">The Build Pipeline</a></li>
<li><a class="link" href="/concepts/hot-module-replacement">Fast Refresh & HMR</a></li>
</ol>
</li>

<li class="snow-toc-section">
<span class="snow-toc-section-header">Getting Started</span>
<ol class="snow-toc-section-items">
<li>
<a class="snow-toc-link" href="/tutorials/quick-start">Quick Start</a>
</li>
<li>
<a class="snow-toc-link" href="/tutorials/getting-started">Getting Started</a>
</li>
<li>
<a class="snow-toc-link" href="/tutorials/react">React</a>
</li>
<li>
<a class="snow-toc-link" href="/tutorials/svelte">Svelte</a>
</li>
<li class="section">
<span class="header">Getting Started</span>
<ol class="items">
<li><a class="link" href="/tutorials/quick-start">Quick Start</a></li>
<li><a class="link" href="/tutorials/getting-started">Getting Started</a></li>
<li><a class="link" href="/tutorials/react">React</a></li>
<li><a class="link" href="/tutorials/svelte">Svelte</a></li>
</ol>
</li>

<li class="snow-toc-section">
<a class="snow-toc-link" href="/guides">
<span class="snow-toc-section-header">Guides</span></a>
<li class="section">
<a class="link" href="/guides"><span class="header">Guides</span></a>
</li>

<li class="snow-toc-section">
<span class="snow-toc-section-header">Reference</span>
<ol class="snow-toc-section-items">
<li>
<a class="snow-toc-link" href="/reference/configuration">snowpack.config.js</a>
</li>
<li>
<a class="snow-toc-link" href="/reference/cli-command-line-interface">Command Line API</a>
</li>
<li>
<a class="snow-toc-link" href="/reference/javascript-interface">JavaScript API</a>
</li>
<li>
<a class="snow-toc-link" href="/reference/plugins">Plugin API</a>
</li>
<li>
<a class="snow-toc-link" href="/reference/environment-variables">Environment Variables</a>
</li>
<li>
<a class="snow-toc-link" href="/reference/hot-module-replacement">HMR API</a>
</li>
<li>
<a class="snow-toc-link" href="/reference/supported-files">Supported Files</a>
</li>
<li>
<a class="snow-toc-link" href="/reference/common-error-details">Common Errors</a>
</li>
<li class="section">
<span class="header">Reference</span>
<ol class="items">
<li><a class="link" href="/reference/configuration">snowpack.config.js</a></li>
<li><a class="link" href="/reference/cli-command-line-interface">Command Line API</a></li>
<li><a class="link" href="/reference/javascript-interface">JavaScript API</a></li>
<li><a class="link" href="/reference/plugins">Plugin API</a></li>
<li><a class="link" href="/reference/environment-variables">Environment Variables</a></li>
<li><a class="link" href="/reference/hot-module-replacement">HMR API</a></li>
<li><a class="link" href="/reference/supported-files">Supported Files</a></li>
<li><a class="link" href="/reference/common-error-details">Common Errors</a></li>
</ol>
</li>

<li class="snow-toc-section">
<a class="snow-toc-link" href="/plugins">
<span class="snow-toc-section-header">Plugin Catalog</span></a>
<li class="section">
<a class="link" href="/plugins"><span class="section-header">Plugin Catalog</span></a>
</li>

<li class="snow-toc-section">
<a class="snow-toc-link" href="/news">
<span class="snow-toc-section-header">Community & News</span></a>
<li class="section">
<a class="link" href="/news"><span class="section-header">Community & News</span></a>
</li>
</ol>
</nav>
Loading

0 comments on commit 1fdc1c7

Please sign in to comment.