2082001ff8
* Initial tests set up
This adds tests using uvu (we can switch if people want) and restructures things a bit so that it's easier to test.
Like in snowpack you set up a little project. In our tests you can say:
```js
const result = await runtime.load('/blog/hello-world')
```
And analyze the result. I included a `test-helpers.js` which has a function that will turn HTML into a cheerio instance, for inspecting the result HTML.
* Bring snowpack example in
* Formatting
108 lines
2.1 KiB
SCSS
108 lines
2.1 KiB
SCSS
@use '../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://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;
|
|
}
|
|
}
|