style: improve and fix

src/App.vue

@@ -279,42 +279,45 @@ function handleAction(actionType: ActionType) {
   }
 }
 
-.gradient-bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
+@supports (filter: blur(4rem)) or (-webkit-filter: blur(4rem)) or
+  (-moz-filter: blur(4rem)) {
+  .gradient-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
 
-  @mixin gradient-style($color) {
-    position: absolute;
-    width: 100vh;
-    height: 100vh;
-    background-image: radial-gradient(
-      rgba($color, 0.8) 20%,
-      rgba($color, 0.6) 40%,
-      rgba($color, 0.4) 60%,
-      rgba($color, 0.2) 80%,
-      transparent 100%
-    );
-    border-radius: 50%;
-    opacity: 0.2;
-    filter: blur(4rem);
-  }
+    @mixin gradient-style($color) {
+      position: absolute;
+      width: 100vh;
+      height: 100vh;
+      background-image: radial-gradient(
+        rgba($color, 0.8) 20%,
+        rgba($color, 0.6) 40%,
+        rgba($color, 0.4) 60%,
+        rgba($color, 0.2) 80%,
+        transparent 100%
+      );
+      border-radius: 50%;
+      opacity: 0.2;
+      filter: blur(4rem);
+    }
 
-  .gradient-top {
-    @include gradient-style($color-secondary);
+    .gradient-top {
+      @include gradient-style($color-secondary);
 
-    top: -50%;
-    right: -20%;
-  }
+      top: -50%;
+      right: -20%;
+    }
 
-  .gradient-bottom {
-    @include gradient-style($color-accent);
+    .gradient-bottom {
+      @include gradient-style($color-accent);
 
-    bottom: -50%;
-    left: -20%;
+      bottom: -50%;
+      left: -20%;
+    }
   }
 }
 </style>

src/assets/preview/glasses/round.svg

@@ -11,25 +11,21 @@
       cx="123.5"
       cy="28"
       r="26"
-      stroke="#aaa"
+      stroke="hsl(211, 19%, 70%)"
       stroke-width="4"
     />
     <circle
       cx="56.5"
       cy="37"
       r="26"
-      stroke="#aaa"
+      stroke="hsl(211, 19%, 70%)"
       stroke-width="4"
     />
     <path
       d="M98.5 35C98.5 32.8783 97.6571 30.8434 96.1569 29.3431C94.6566 27.8429 92.6217 27 90.5 27C88.3783 27 86.3434 27.8429 84.8431 29.3431C83.3429 30.8434 82.5 32.8783 82.5 35"
-      stroke="#aaa"
-      stroke-width="4"
-    />
-    <path
-      d="M31 39L1 44.5"
-      stroke="#aaa"
+      stroke="hsl(211, 19%, 70%)"
       stroke-width="4"
     />
+    <path d="M31 39L1 44.5" stroke="hsl(211, 19%, 70%)" stroke-width="4" />
   </g>
-</svg>
+</svg>

src/components/CodeModal.vue

@@ -96,16 +96,23 @@ onUnmounted(() => {
   padding: 2rem 0;
   overflow: hidden;
   transform: translate(-50%, 0);
+
+  @supports (backdrop-filter: blur(0.1rem)) {
+    backdrop-filter: blur(0.1rem);
+  }
 }
 
 .code-box {
   $code-header-height: 4rem;
+  $code-box-side-padding-normal: 2rem;
+  $code-box-side-padding-small: 1rem;
   position: relative;
   width: 75%;
   max-width: 800px;
   height: 100%;
   margin: 0 auto;
-  padding: $code-header-height 2rem 2.5rem 2rem;
+  padding: $code-header-height $code-box-side-padding-normal 2.5rem
+    $code-box-side-padding-normal;
   background-color: lighten($color-dark, 3);
   border-radius: 1rem;
   transition: width 0.2s;
@@ -120,6 +127,12 @@ onUnmounted(() => {
 
   @media screen and (max-width: $screen-sm) {
     width: 90%;
+    padding: $code-header-height $code-box-side-padding-small 2.5rem
+      $code-box-side-padding-small;
+
+    .code-header {
+      padding: 0 $code-box-side-padding-small;
+    }
   }
 
   .code-header {
@@ -130,7 +143,7 @@ onUnmounted(() => {
     align-items: center;
     width: 100%;
     height: $code-header-height;
-    padding: 0 2rem;
+    padding: 0 $code-box-side-padding-normal;
 
     .title {
       font-weight: bold;
@@ -219,6 +232,11 @@ onUnmounted(() => {
   font-family: 'Ubuntu Mono', Fallback;
   line-height: 1.4;
 
+  @media screen and (max-width: $screen-sm) {
+    padding: 0 1rem;
+    font-size: 1rem;
+  }
+
   & > .token {
     &.key {
       color: #ffcb6b;

src/components/Configurator.vue

@@ -290,7 +290,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
       }
 
       & :deep(path) {
-        stroke: #aaa !important;
+        stroke: $color-stroke !important;
       }
     }
   }

src/styles/variables.scss

@@ -6,6 +6,7 @@ $color-dark: hsl(216, 14%, 14%);
 $color-gray: lighten($color-dark, 5);
 $color-page-bg: darken($color-dark, 5);
 $color-configurator: $color-dark;
+$color-stroke: $color-text;
 
 $layout-header-height: 6rem;
 $layout-sider-width: 20rem;