icon minification

icons.config.js

@@ -16,6 +16,10 @@ export default {
     "warning",
     "cable",
     "person",
+    "sync",
+    "restart_alt",
+    "usb",
+    "rule_settings",
   ],
   codePoints: {
     speed: "e9e4",

package-lock.json

@@ -16,6 +16,7 @@
         "@theaninova/prettier-config": "^1.0.0",
         "@types/w3c-web-serial": "^1.0.3",
         "@vite-pwa/sveltekit": "^0.2.5",
+        "autoprefixer": "^10.4.14",
         "fontkit": "^2.0.2",
         "prettier": "^2.8.0",
         "prettier-plugin-svelte": "^2.10.1",
@@ -2623,6 +2624,39 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.14",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
+      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.21.5",
+        "caniuse-lite": "^1.0.30001464",
+        "fraction.js": "^4.2.0",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -3645,6 +3679,19 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/infusion"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -4974,6 +5021,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",

package.json

@@ -36,6 +36,7 @@
     "vite": "^4.3.6",
     "vite-plugin-pwa": "^0.16.4",
     "svelte-preprocess": "^5.0.4",
+    "autoprefixer": "^10.4.14",
     "sass": "^1.63.6"
   },
   "type": "module",

src/lib/assets/quater-ring.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <mask id="cross" maskUnits="userSpaceOnUse">
+        <rect x="0" y="0" width="32" height="32" fill="white" />
+        <path d="M0 0L32 32M0 32L32 0" stroke="black" stroke-width="3" />
+    </mask>
+    <circle cx="16" cy="16" r="11.5" fill="none" stroke="white" stroke-width="9" mask="url(#cross)" />
+</svg>

src/lib/components/LayoutCC1.svelte

@@ -0,0 +1,5 @@
+<script>
+  import RingInput from "$lib/components/RingInput.svelte"
+</script>
+
+<RingInput />

src/lib/components/RingInput.svelte

@@ -0,0 +1,125 @@
+<script>
+  export let activeLayer = 1
+  export let layers = 3
+
+  export let layout = [
+    ["a", "b", "c"],
+    ["d", "e", "f"],
+    ["g", "h", "i"],
+    ["j", "k", "l"],
+  ]
+
+  /**
+   * @param index {number}
+   * @returns number
+   */
+  function calcLayerPosition(index) {
+    return index - activeLayer
+  }
+</script>
+
+<div class="radial">
+  {#each Array.from({length: layers}) as _, i}
+    <!--suppress Stylelint -->
+    <div
+      class="layer"
+      style="translate: -50% -50% {((i - activeLayer + 1) % 2) - 1}px; filter: brightness({1 -
+        Math.log(1 + Math.abs(i - activeLayer))})"
+      class:active={activeLayer === i}
+    >
+      <button on:click={() => (activeLayer = (activeLayer + 1) % layers)}>{i}</button>
+      <button>{i}</button>
+      <button>{i}</button>
+      <button>{i}</button>
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  $border-width: 18px;
+  $gap: 6px;
+  $size: 96px;
+  $scale-difference: 0.2;
+
+  .radial {
+    position: relative;
+    width: 0;
+    height: 0;
+    perspective: 3px;
+  }
+
+  .layer {
+    pointer-events: none;
+
+    position: absolute;
+    z-index: -1;
+    transform-style: preserve-3d;
+    translate: -50% -50% 0;
+
+    container: radial / size;
+
+    width: $size;
+    height: $size;
+
+    transition: all 250ms ease;
+  }
+
+  .layer.active {
+    pointer-events: all;
+    z-index: 1;
+  }
+
+  button {
+    cursor: pointer;
+
+    position: absolute;
+
+    display: flex;
+
+    width: 100cqw;
+    height: 100cqh;
+    padding: 5px;
+
+    font-family: "Noto Sans Mono", monospace;
+    font-size: 16px;
+    font-weight: 900;
+    color: var(--md-sys-color-on-surface-variant);
+
+    background: var(--md-sys-color-surface-variant);
+    border: none;
+
+    transition: all 250ms ease;
+
+    mask-image: url("$lib/assets/quater-ring.svg");
+    mask-size: 100% 100%;
+
+    &:hover {
+      color: var(--md-sys-color-on-tertiary);
+      background: var(--md-sys-color-tertiary);
+    }
+
+    &:nth-child(1) {
+      align-items: flex-start;
+      justify-content: center;
+      clip-path: polygon(50% 50%, 0 0, 100% 0);
+    }
+
+    &:nth-child(2) {
+      align-items: center;
+      justify-content: flex-end;
+      clip-path: polygon(50% 50%, 100% 0, 100% 100%);
+    }
+
+    &:nth-child(3) {
+      align-items: flex-end;
+      justify-content: center;
+      clip-path: polygon(50% 50%, 0 100%, 100% 100%);
+    }
+
+    &:nth-child(4) {
+      align-items: center;
+      justify-content: flex-start;
+      clip-path: polygon(50% 50%, 0 0, 0 100%);
+    }
+  }
+</style>

src/routes/config/layout/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+  import LayoutCC1 from "$lib/components/LayoutCC1.svelte"
+</script>
+
+<LayoutCC1 />

svelte.config.js

@@ -1,9 +1,10 @@
 import adapter from "@sveltejs/adapter-static"
 import preprocess from "svelte-preprocess"
+import autoprefixer from "autoprefixer"
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  preprocess: [preprocess()],
+  preprocess: [preprocess({postcss: {plugins: autoprefixer()}})],
   kit: {
     adapter: adapter(),
   },