Skip to content

Instantly share code, notes, and snippets.

@evdama
evdama / .eslintrc.js
Last active August 2, 2019 02:10
including svelte settings via plugin
module.exports = {
extends: [
'airbnb-base',
'eslint:recommended',
'plugin:import/errors',
'plugin:import/typescript',
'plugin:import/warnings',
'prettier'
],
parser: 'babel-eslint',
@evdama
evdama / template.html
Last active July 29, 2019 11:59
tailwind container usage
<!DOCTYPE html>
<html lang="en" class="min-h-full text-one antialiased font-family-one text-sm md:text-base bg-one" data-theme="light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="theme-color" content="#ffffff" />
%sapper.base%
@evdama
evdama / .eslintrc.json
Created July 29, 2019 04:53
not running in vscode, show output channel from command palette says: not running but it is switched on so...?
{
"autoFixOnSave": "true",
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": ["eslint:recommended"],
"globals": {
"Atomics": "readonly",
@evdama
evdama / _favicon.svelte
Last active July 28, 2019 16:56
have a dynamic favicon showing the number of unread messages (same as discord)
<script>
import { onMount } from 'svelte';
// TODO: use numberMessages dynamically at some point
let numberMessages = '4';
onMount(() => {
window.onload = function() {
var favicon = document.getElementById('favicon');
var faviconSize = 16;
@evdama
evdama / tailwind.config.js
Last active July 27, 2019 02:59
would be great to be able to use hex based values with elevation plugin
function hexToRGB( h ) {
let r = 0,
g = 0,
b = 0;
// 3 digits
if ( h.length == 4 ) {
r = "0x" + h[ 1 ] + h[ 1 ];
g = "0x" + h[ 2 ] + h[ 2 ];
b = "0x" + h[ 3 ] + h[ 3 ];
@evdama
evdama / edm-utilities.css
Last active July 26, 2019 14:51
use .scale-grow like this on e.g. hover: hover:scale-grow
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
h3 {
@apply text-lg;
<!DOCTYPE html>
<html lang="en" class="min-h-full text-one antialiased font-family-one text-sm md:text-base bg-one" data-theme="light">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<meta name="theme-color" content="#ffffff">
%sapper.base%
@import "tailwindcss/base";
@import "tailwindcss/components";
@import './components';
@import "tailwindcss/utilities";
@import './edm-utilities';
:root {
--font-family-one: Montserrat, sans-serif;
--font-family-two: Roboto, sans-serif;
@evdama
evdama / template.html
Last active July 25, 2019 06:10
how to best toggle the data-theme attributes value between 'light' and 'dark'?
<!DOCTYPE html>
<html id="edm-html-root" lang="en" class="min-h-full text-one antialiased font-family-one text-sm md:text-base bg-one" data-theme="light">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<meta name="theme-color" content="#ffffff">
%sapper.base%
{
"arrowParens": "avoid",
"bracketSpacing": true,
"endOfLine": "lf",
"printWidth": 80,
"semi": true,
"singleQuote": true,
"svelteBracketNewLine": true,
"svelteSortOrder": "scripts-styles-markup",
"svelteStrictMode": true,