Markus evdama
evdama
/ tailwind.config.js
Last active
July 22, 2019 04:22
using CSS variables for theming with tailwind
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const colors = { | |
| transparent: 'transparent', | |
| black: '#000000', | |
| white: '#FFFFFF', | |
| 'red-50': '#FFEBEE', | |
| 'red-100': '#FFCDD2', | |
| 'red-200': '#EF9A9A', | |
| 'red-300': '#E57373', | |
| 'red-400': '#EF5350', |
evdama
/ .prettierrc
Created
July 23, 2019 22:59
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "arrowParens": "avoid", | |
| "bracketSpacing": true, | |
| "endOfLine": "lf", | |
| "printWidth": 80, | |
| "semi": true, | |
| "singleQuote": true, | |
| "svelteBracketNewLine": true, | |
| "svelteSortOrder": "scripts-styles-markup", | |
| "svelteStrictMode": true, |
evdama
/ template.html
Last active
July 25, 2019 06:10
how to best toggle the data-theme attributes value between 'light' and 'dark'?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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% |
evdama
/ tailwind.css
Last active
July 25, 2019 12:10
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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
/ template.html
Last active
July 25, 2019 12:21
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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
/ edm-utilities.css
Last active
July 26, 2019 14:51
use .scale-grow like this on e.g. hover: hover:scale-grow
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| h1 { | |
| @apply text-2xl; | |
| } | |
| h2 { | |
| @apply text-xl; | |
| } | |
| h3 { | |
| @apply text-lg; |
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
/ _favicon.svelte
Last active
July 28, 2019 16:56
have a dynamic favicon showing the number of unread messages (same as discord)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
/ .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...?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
| { | |
| "autoFixOnSave": "true", | |
| "env": { | |
| "browser": true, | |
| "es6": true, | |
| "node": true | |
| }, | |
| "extends": ["eslint:recommended"], | |
| "globals": { | |
| "Atomics": "readonly", |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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% |