Skip to content

Instantly share code, notes, and snippets.

View Wolfr's full-sized avatar

Wolfr Wolfr

View GitHub Profile
@Wolfr
Wolfr / input.scss
Created April 17, 2024 12:01
Generated by SassMeister.com.
@mixin dark-mode {
:global(html[data-theme='system']) {
@media (prefers-color-scheme: dark) {
@content;
}
}
:global(html[data-theme='dark']) {
@content;
{
"add": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 4C12.5523 4 13 4.44772 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44772 11.4477 4 12 4Z\" fill=\"#3F545B\"/></svg>",
"archive": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V7C22 7.74708 21.5904 8.39848 20.9835 8.74188C20.9944 8.82638 21 8.91253 21 9V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V9C3 8.91253 3.00561 8.82638 3.0165 8.74188C2.40961 8.39848 2 7.74707 2 7V5ZM20 7V5H4V7H20ZM5 9V19H19V9H5ZM8 12C8 11.4477 8.44772 11 9 11H15C15.5523 11 16 11.4477 16 12C16 12.5523 15.5523 13 15 13H9C8.44772 13 8 12.5523 8 12Z\" fill=\"#3F545B\"/></svg>",
"arrow-down": "<svg width=\"24\" height=\"24\"
{
"apiVersion": "2023-02-28-preview",
"modelId": "prebuilt-layout",
"stringIndexType": "textElements",
"content": "You must be the change you wish to see in the world!\nEverything has its beauty, but\nnot everyone sees it!",
"pages": [
{
"pageNumber": 1,
"angle": -1.1024999618530273,
"width": 1000,
@Wolfr
Wolfr / framer-x-with-css.tsx
Created August 24, 2018 18:44
Using CSS in Framer X component
// Here is a basic Framer X component where we use CSS directly
import * as React from "react";
import { PropertyControls, ControlType } from "framer";
// Define type of property
interface Props {
width: number
height: number
}
@Wolfr
Wolfr / svelte-resources.md
Last active April 29, 2023 07:13
Svelte resources list
@Wolfr
Wolfr / input.scss
Created March 22, 2023 19:01
Generated by SassMeister.com.
$html-font-size: 16px;
$enable-rem: true;
@function stripUnit($value) {
@return $value / ($value * 0 + 1);
}
@function rem($value) {
@if $enable-rem {
@return #{$value/stripUnit($html-font-size)}rem;
const ConnectionCardList = ({ data }) => js
const listItems = connections.map((item) => (
<ConnectionCard title={item.name} desc={item.receiver} />
));
return <Flex flexWrap="wrap">{listItems}</Flex>;
};
tree .
.
|-- CONTRIBUTING.md
|-- LICENSE.md
|-- README.md
|-- addon
| |-- components
| | |-- alert.hbs
| | |-- alert.js
| | |-- avatar.hbs
@Wolfr
Wolfr / abstraction-level-code-reusable-mixins.md
Last active August 10, 2021 15:26
Discussion - abstraction level code - reusable mixins

This document to help drive the discussion about the abstraction level of code and reusable mixins forward.

Basically the discussion is twofold:

  • whether we should use more mixins
  • how to define local data to a component in an elegant way

Example

Imagine a card component, documented in the styleguide:

import pMemoize from 'p-memoize'
import { LanguageKey, TextNodePlainObject } from './types.js'
export const translateAsync = pMemoize(async function (
{ characters, id }: TextNodePlainObject,
languageKey: LanguageKey
) {
// Old Google API