style: improve and fix

src/App.vue

@@ -279,7 +279,9 @@ function handleAction(actionType: ActionType) {
   }
 }
 
-.gradient-bg {
+@supports (filter: blur(4rem)) or (-webkit-filter: blur(4rem)) or
+  (-moz-filter: blur(4rem)) {
+  .gradient-bg {
     position: fixed;
     top: 0;
     left: 0;
@@ -316,5 +318,6 @@ function handleAction(actionType: ActionType) {
       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="hsl(211, 19%, 70%)"
-      stroke-width="4"
-    />
-    <path
-      d="M31 39L1 44.5"
-      stroke="#aaa"
       stroke-width="4"
     />
+    <path d="M31 39L1 44.5" stroke="hsl(211, 19%, 70%)" stroke-width="4" />
   </g>
 </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;