luiz

import * as sass from 'node-sass';
import * as svelte from 'svelte/compiler';
import * as fs from 'fs';
import { promisify } from 'util';

const renderSass = promisify(sass.render);
const readFile = promisify(fs.readFile);

const preprocessSass = async (data: string) => {
	const result = await renderSass({ data });

luiz

<article>
	<h1>Using the correct tags in HTML</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et iaculis
risus. Quisque quis magna diam. Suspendisse aliquet urna eu erat pretium, et
scelerisque odio pulvinar. Nullam fermentum diam nibh, vel eleifend ipsum
tempus ut. Nunc accumsan ligula eget tellus vestibulum, sit amet euismod quam
molestie. Integer feugiat urna sed enim hendrerit vestibulum. Suspendisse
ullamcorper, nisi non mollis eleifend, est nunc sagittis augue, nec convallis
eros est ultrices sem. Curabitur pretium condimentum nulla. Sed convallis augue
vitae metus interdum commodo nec in nulla. Vivamus vulputate eleifend semper.

luiz

/* CSS text balloon using variables, calc and transform */

@import url(http://fonts.googleapis.com/css?family=Chewy);

div {
	--balloon-color: #FFF;
	--balloon-border: 3px;
	position: relative;
	top: 1em;
	left: 1em;

luiz

/* Pulsating multiple borders with box-shadow & var */
body {
	--bg: #6495ED;
	background-color: var(--bg);
}
div {
	--border-size: 4px;
	width: 50%;
	height: 10em;
	background-color: white;

luiz

/* transform order test */
html,body {
	height: 100%;
	margin: 0;
	padding: 0;
}
div {
	width: 100px;
	height: 100px;
	background: red;

luiz

/*
    AMD-compatible async 'define' modularization by sergiolopes and luiz:
    https://gist.github.com/luiz/d71c99cf1cda53190e70

    Contains the 'define' module syntax compatible with the official API and
    support for injecting the 'export' variable and a flexible dependency
    resolver with no restrictions on how you load your files.

    This implementation doesn't load your JS files so you have to do it. You
    can bundle one big file, load multiple files, load them asynchronously, out

luiz

/* :lang pseudoclass tests */
:lang(fr) > p {
	background-color: yellow;
}
:lang(fr) > strong {
	font-style: italic;
}
strong:lang(pt) {
	color: red;
}

luiz

html,body {
	height: 100%;
}
body:before {
	content: '';
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}
meter {

luiz

.container {
	border: 2px solid black;
	text-align-last: justify;
	margin: 0;
	padding: 0;
}
.content {
	width: 20%;
	display: inline-block;
	height: 100px;

luiz

body { overflow-y: scroll; }
.caixas {
	background-color: #ffc;
	margin: 0;
	padding: 0;
}
.caixa {
	list-style: none;
	border: .4vw solid;
	width: 20vw;