fix lines for lower resolution screens

meodai · Jun 11, 2024 · b194275 · b194275
1 parent f707f5f
commit b194275
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 6 deletions.
diff --git a/site/src/App.svelte b/site/src/App.svelte
@@ -6,6 +6,7 @@
   import Cube from './lib/Cube.svelte';
   import NamedSwatches from './lib/NamedSwatches.svelte';
   import Sphere from './lib/Sphere.svelte';
+  import Donut from './lib/Donut.svelte';
 
   import { getColorsHSL } from './lib/fn/getColorsHSL';
   import { colorsToGradient } from './lib/fn/colorsToGradient';
@@ -111,7 +112,7 @@
         title="Presets"
       >
         <svg class="navicon" viewBox="0 0 100 100">
-          <g stroke="currentColor" transform-origin="50 50" transform="rotate(-22.5)">
+          <g stroke="var(--line, currentColor)" transform-origin="50 50" transform="rotate(-22.5)">
             <circle cx="50" cy="50" r="50" vector-effect="non-scaling-stroke" />
             <line x1="0" y1="50" x2="100" y2="50" transform="rotate(-45)" transform-origin="50 50" vector-effect="non-scaling-stroke"/>
             <line x1="0" y1="50" x2="100" y2="50" transform="rotate(45)" transform-origin="50 50" vector-effect="non-scaling-stroke"/>
@@ -267,6 +268,8 @@
             </g>
           </svg>
         </a>
+
+        <Donut />
 
         <!--h2>Current Colors</h2-->
         <code><pre>{cubeString}</pre></code>
@@ -290,7 +293,8 @@
   .layout {
     --bg: var(--white);
     --onBg: var(--black);
-    --line: var(--onBg);
+
+    --line: color-mix(in srgb, var(--onBg) 40%, var(--bg));
     --lineInverse: var(--bg);
 
     height: 100dvh;
@@ -304,6 +308,13 @@
     color: var(--onBg);
   }
 
+  @media (min-resolution: 2dppx) {
+    .layout {
+      --line: var(--onBg);
+    }
+  }
+
+
 
   .layout--dev {
     --bg: var(--black);
@@ -682,7 +693,7 @@
   .navicon g,
   .navicon line,
   .navicon circle {
-    stroke: currentColor;
+    stroke: var(--line, currentColor);
     stroke-width: calc(var(--lineWidth) * .6);
     fill: none;
   }

diff --git a/site/src/app.css b/site/src/app.css
@@ -114,7 +114,13 @@ h6 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  --lineWidth: min(.51px, 0.05rem);
+  --lineWidth: 1px;
+}
+
+@media (min-resolution: 2dppx) {
+  :root {
+    --lineWidth: min(.51px, 0.05rem);
+  }
 }
 
 h1, h2, h3, h4, h5, h6 {

diff --git a/site/src/lib/Cube.svelte b/site/src/lib/Cube.svelte
@@ -418,7 +418,7 @@
 }
 
 .cube g {
-  stroke: currentColor;
+  stroke: var(--line, currentColor);
   stroke-width: var(--lineWidth);
   fill: none;
 }
@@ -429,7 +429,7 @@
 
 .cube__coverline {
   fill: none;
-  stroke: var(--black);
+  stroke: var(--line);
   stroke-dasharray: 1.5 1.5;
 }
 </style>
diff --git a/site/src/lib/Donut.svelte b/site/src/lib/Donut.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  export let hasPerspective = true;
+</script>
+
+<div class="donut{ hasPerspective ? ' donut--perspective' : ''}">
+  <div class="donut__segments">
+  </div>
+</div>
+
+<style>
+  .donut {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1;
+  }
+
+  .donut--perspective {
+    perspective: 10000px;
+  }
+
+  .donut__segments {
+    position: absolute;
+    inset: 0;
+    background: conic-gradient(var(--stops-48));
+    border-radius: 50%;
+  }
+
+  .donut--perspective .donut__segments {
+    transform-style: preserve-3d;
+    transform: rotateX(45deg);
+  }
+
+
+  .donut__segments::after {
+    content: '';
+    inset: 0;
+    position: absolute;
+    background: var(--bg);
+    transform: scale(.7);
+    border-radius: 50%;
+    transition: 200ms transform cubic-bezier(0.3, 0.7, 0, 1);
+  }
+
+  .donut__segments:hover::after {
+    transform: scale(.35);
+  }
+</style>