Refactor portfolio

src/page/header/header.html.ts

@@ -1,4 +1,4 @@
-import './about.scss';
+import './header.scss';
 import { Header } from '../../types/portfolio';
 import { html } from '../../types/html';
 

src/page/header/header.ts

@@ -1,6 +1,6 @@
 import { PageContent } from '../content/content';
 import { Header } from '../../types/portfolio';
-import { generate } from './about.html';
+import { generate } from './header.html';
 import { createElement } from '../../helper/create-element';
 import { PageThemeSwitcher } from '../theme-switcher/theme-switcher';
 import { PageElement } from '../page-element';

src/page/theme-switcher/theme-switcher.scss

@@ -1,6 +1,6 @@
 @use '../../style/mixins' as *;
 
-input[type='checkbox']#theme-switcher {
+#theme-switcher {
   @include on-large-screen {
     position: absolute;
     top: calc(-1 * var(--small-margin));
@@ -13,10 +13,6 @@ input[type='checkbox']#theme-switcher {
     margin-top: var(--normal-margin);
   }
 
-  &::-ms-check {
-    display: none;
-  }
-
   background-color: var(--accent-color);
   cursor: pointer;
   -webkit-appearance: none;
@@ -29,8 +25,7 @@ input[type='checkbox']#theme-switcher {
   $margin: calc((#{$size} - #{$icon-size}) / 2);
 
   border-radius: 1000px;
-  box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175),
-    inset 0 0 1px rgba(0, 0, 0, 0.4);
+  box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175), inset 0 0 1px rgba(0, 0, 0, 0.4);
 
   &:before {
     // moon + sun
@@ -52,14 +47,12 @@ input[type='checkbox']#theme-switcher {
     top: 50%;
     transform: translateY(-50%);
 
-    transition: transform var(--transition-time),
-      background-color var(--transition-time);
+    transition: transform var(--transition-time), background-color var(--transition-time);
   }
 
   &:not(:checked) {
     &:before {
-      transform: translateY(-50%)
-        translateX(calc(3 * #{$margin} + #{$icon-size}));
+      transform: translateY(-50%) translateX(calc(3 * #{$margin} + #{$icon-size}));
 
       animation: shine 3s linear alternate infinite;
       background-color: var(--sun-color);
@@ -90,8 +83,7 @@ input[type='checkbox']#theme-switcher {
 
     &:after {
       background-color: var(--accent-color);
-      transform: translateY(-50%)
-        translateX(calc(#{$margin} + #{$icon-size} * 0.33));
+      transform: translateY(-50%) translateX(calc(#{$margin} + #{$icon-size} * 0.33));
     }
   }
 }