deploy: 8fdf6a8

marcantondahmen · Nov 15, 2023 · 9713c0f · 9713c0f
1 parent 9712f7d
commit 9713c0f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 23 deletions.
diff --git a/demo.css b/demo.css
@@ -247,18 +247,19 @@ body {
   background-color: #0e1115;
   overflow: hidden;
   font-family: 'Inter';
-  font-size: 18px;
-  font-weight: 540;
+  font-size: 17px;
+  font-weight: 480;
   line-height: 1.45;
 }
 @media (max-width: 500px) {
   html,
   body {
-    font-size: 16px;
+    font-size: 15px;
   }
 }
 canvas {
   background-color: #0e1115;
+  object-fit: cover !important;
 }
 .wrapper {
   position: relative;
@@ -268,44 +269,57 @@ canvas {
   height: 100vh;
 }
 image-refractor {
-  width: 94vmin;
-  height: 94vmin;
-  border-radius: 15px;
-  overflow: hidden;
+  width: 100vmax;
+  height: 100vmax;
 }
 main {
   position: absolute;
   display: flex;
   flex-direction: column;
+  align-items: start;
   gap: 2rem;
-  inset: 0;
-  padding: 1.7rem 2rem;
+  inset: 0.5rem auto auto 0.5rem;
+  padding: 0.8rem 1.5rem 0.8rem 1rem;
+  border-radius: 0.5rem;
+  background-color: hsla(215, 20%, 7%, 0.2);
+  backdrop-filter: blur(20px);
 }
 main * {
   user-select: none;
 }
 h1 {
   margin: 0;
-  margin-left: -2px;
-  font-size: 2.65rem;
-  font-weight: 760;
-  letter-spacing: -0.035em;
-  line-height: 1;
+  margin-left: -1px;
+  font-size: 2.05rem;
+  font-weight: 680;
+  letter-spacing: -0.02em;
+  line-height: 1.05;
 }
 p {
   margin: 0;
 }
 a {
   color: inherit;
   text-decoration: none;
-  transition: color 0.2s;
+  opacity: 1;
+  transition: opacity 0.2s;
 }
 a:hover {
-  color: hsl(215, 12%, 30%);
+  opacity: 0.4;
 }
 summary {
+  display: inline-flex;
+  align-items: center;
   cursor: pointer;
 }
+summary:before {
+  content: '';
+  font-size: 0.8em;
+  padding-right: 0.6em;
+}
+[open] summary:before {
+  content: '';
+}
 details > div {
   display: flex;
   flex-direction: column;
@@ -322,26 +336,33 @@ label {
 }
 swap-image,
 refractor-preset {
-  color: hsl(215, 12%, 30%);
+  display: inline-flex;
+  align-items: center;
+  opacity: 0.35;
   cursor: pointer;
-  transition: color 0.2s;
+  transition: opacity 0.2s;
 }
 swap-image:before,
 refractor-preset:before {
   content: '○';
-  padding-right: 0.5em;
+  font-size: 0.8em;
+  padding-right: 0.7em;
+}
+swap-image:hover,
+refractor-preset:hover {
+  opacity: 0.7;
 }
 swap-image.active,
 refractor-preset.active {
-  color: #ffffff;
+  opacity: 1;
 }
 swap-image.active:before,
 refractor-preset.active:before {
   content: '●';
 }
 .github {
   position: fixed;
-  top: 2rem;
-  right: 2rem;
+  top: 1.5rem;
+  right: 1.5rem;
 }
 
diff --git a/index.html b/index.html
@@ -25,7 +25,7 @@
 			property="og:image"
 			content="https://raw.githubusercontent.com/marcantondahmen/image-refractor/master/assets/readme.png"
 		/>
-	<link rel="icon" href="favicon.svg?a383f9d2b38ce9479fb5"><script defer src="demo.js?a383f9d2b38ce9479fb5"></script><link href="demo.css?a383f9d2b38ce9479fb5" rel="stylesheet"></head>
+	<link rel="icon" href="favicon.svg?eb01bdf643a51042b8db"><script defer src="demo.js?eb01bdf643a51042b8db"></script><link href="demo.css?eb01bdf643a51042b8db" rel="stylesheet"></head>
 	<body>
 		<div class="wrapper">
 			<image-refractor