Make window resizable

src/main/index.js

@@ -191,7 +191,7 @@ function createWindow() {
       process.platform === 'darwin'
         ? path.join(__static, 'icon--macos.png')
         : path.join(__static, 'icon.png'),
-    resizable: false,
+    resizable: true,
     useContentSize: true,
     width: 360,
     height: 478,
@@ -201,6 +201,7 @@ function createWindow() {
       enableRemoteModule: true
     }
   })
+  mainWindow.setAspectRatio(360 / 478)
 
   mainWindow.loadURL(winURL)
 

src/renderer/App.vue

@@ -60,6 +60,9 @@ export default {
 </script>
 
 <style lang="scss">
+:root {
+  font-size: 5vw;
+}
 #app {
   animation: fade-in 0.5s ease forwards;
   position: relative;

src/renderer/assets/stylesheets/_base.scss

@@ -14,13 +14,13 @@ p {
 }
 
 .Container {
-  padding: 0 18px;
+  padding: 0 5vw;
 }
 
 .Drawer-heading {
-  font-size: 14px;
+  font-size: 0.7rem;
   letter-spacing: 0.05rem;
-  padding-top: 10px;
+  padding-top: 2.8vw;
   text-align: center;
 }
 
@@ -34,20 +34,20 @@ p {
   align-items: center;
   display: flex;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 5.5vw;
+  height: 5.5vw;
 }
 
 .Icon-wrapper--double--right {
-  padding: 18px 18px 18px 9px;
+  padding: 5vw 5vw 5vw 2.5vw;
 }
 
 .Icon-wrapper--double--left {
-  padding: 18px 9px 18px 18px;
+  padding: 5vw 2.5vw 5vw 5vw;
 }
 
 .Icon-wrapper--single {
-  padding: 18px;
+  padding: 5vw;
 }
 
 .Icon {
@@ -56,9 +56,9 @@ p {
 
 .TextButton {
   color: var(--color-foreground-darker);
-  font-size: 14px;
-  letter-spacing: 0.05em;
-  margin-top: 12px;
+  font-size: 0.7rem;
+  letter-spacing: 0.05rem;
+  margin-top: 3.3vw;
   transition: $transitionDefault;
   &:hover {
     color: var(--color-accent);

src/renderer/assets/stylesheets/_slider.scss

@@ -16,15 +16,15 @@
   &::-webkit-slider-runnable-track {
     background-color: var(--color-background);
     width: 100%;
-    height: 3px;
+    height: 0.83vw;
   }
   &::-webkit-slider-thumb {
     background-color: var(--color-background-lightest);
     border: 2px solid var(--color-background-lightest);
     border-radius: 100%;
-    margin-top: -8px;
-    width: 18px;
-    height: 18px;
+    margin-top: -2.2vw;
+    width: 5vw;
+    height: 5vw;
     -webkit-appearance: none;
     -webkit-app-region: no-drag;
   }
@@ -56,8 +56,8 @@
 
 .Slider-bar {
   position: absolute;
-  top: calc(50% + 3px);
-  height: 3px;
+  top: calc(50% + 0.83vw);
+  height: 0.83vw;
 }
 
 .Slider-bar--blue {

src/renderer/components/Titlebar.vue

@@ -18,7 +18,7 @@
     <div class="Icon-group" style="position: absolute; top: 0; right: 0;">
       <div
         class="Icon-wrapper Icon-wrapper--titlebar Icon-wrapper--double--left"
-        style="padding-left: 18px"
+        style="padding-left: 5vw"
         @click="winMinimize"
       >
         <!-- minimize -->
@@ -32,8 +32,8 @@
           y="0px"
           viewBox="0 0 14 2"
           xml:space="preserve"
-          width="15px"
-          height="20px"
+          width="4.2vw"
+          height="5.5vw"
           class="Icon Icon--minimize"
         >
           <line
@@ -51,7 +51,7 @@
       </div>
       <div
         class="Icon-wrapper Icon-wrapper--titlebar Icon-wrapper--double--right"
-        style="padding-right: 18px"
+        style="padding-right: 5vw"
         @click="winClose"
       >
         <!-- close -->
@@ -65,7 +65,7 @@
           y="0px"
           viewBox="0 0 12.6 12.6"
           xml:space="preserve"
-          height="15px"
+          height="4.2vw"
           class="Icon Icon--close"
         >
           <line
@@ -145,10 +145,10 @@ export default {
   background-color: var(--color-background-lightest);
   display: inline-block;
   transition: $transitionDefault;
-  width: 20px;
-  height: 2px;
+  width: 5.5vw;
+  height: 0.5vw;
   &:last-child {
-    width: 10px;
+    width: 2.8vw;
   }
 }
 
@@ -160,11 +160,11 @@ export default {
   &.is-collapsed {
     & .Menu-line:first-child {
       transform: rotate(-45deg);
-      width: 12px;
+      width: 3.3vw;
     }
     & .Menu-line:last-child {
       transform: rotate(45deg);
-      width: 12px;
+      width: 3.3vw;
     }
   }
 }
@@ -173,15 +173,15 @@ export default {
   color: var(--color-short-round);
   font-size: 1rem;
   font-weight: 200;
-  padding-top: 18px;
+  padding-top: 5vw;
 }
 
 .Titlebar {
   letter-spacing: 0.05em;
-  margin-bottom: 18px;
+  margin-bottom: 5vw;
   position: relative;
   text-align: center;
-  height: 50px;
+  height: 13.9vw;
   -webkit-app-region: drag;
 }
 

src/renderer/components/drawer/Drawer-about.vue

@@ -10,8 +10,8 @@
         xmlns:xlink="http://www.w3.org/1999/xlink"
         x="0px"
         y="0px"
-        width="72px"
-        height="72px"
+        width="20vw"
+        height="20vw"
         viewBox="0 0 256 256"
         xml:space="preserve"
       >
@@ -74,21 +74,22 @@ export default {
 h2 {
   color: var(--color-short-round);
   font-weight: 400;
-  letter-spacing: 0.05em;
-  margin: 0.5em 0;
+  letter-spacing: 0.05rem;
+  margin: 0.5rem 0;
+  font-size: 1.5rem;
 }
 
 section {
   align-items: center;
   display: flex;
   flex-direction: column;
-  padding-top: 2em;
+  padding-top: 2rem;
   height: 100%;
 }
 
 .label {
-  font-size: 14px;
-  letter-spacing: 0.05em;
+  font-size: 0.7rem;
+  letter-spacing: 0.05rem;
   line-height: 2;
   & .link,
   &.link {

src/renderer/components/drawer/Drawer-menu.vue

@@ -18,7 +18,7 @@
             x="0px"
             y="0px"
             viewBox="0 0 20 20"
-            width="18"
+            width="5vw"
             xml:space="preserve"
           >
             <g>
@@ -53,7 +53,7 @@
           x="0px"
           y="0px"
           viewBox="0 0 19.5 20"
-          width="18"
+          width="5vw"
           xml:space="preserve"
         >
           <path
@@ -80,7 +80,7 @@
             xmlns="http://www.w3.org/2000/svg"
             height="24"
             viewBox="0 0 24 24"
-            width="24"
+            width="6.6vw"
             id="theme-icon"
             class="Icon"
           >
@@ -105,8 +105,8 @@
             xmlns="http://www.w3.org/2000/svg"
             id="about-icon"
             class="Icon"
-            width="24"
-            height="24"
+            width="6.6vw"
+            height="6.6vw"
             viewBox="0 0 24 24"
           >
             <path fill="none" d="M0 0h24v24H0V0z" />
@@ -151,7 +151,7 @@ export default {
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 36px;
+  height: 10vw;
 }
 
 .Drawer-menu-wrapper {
@@ -175,7 +175,7 @@ export default {
     left: 0;
     transition: $transitionSnappy;
     width: 0;
-    height: 2px;
+    height: 0.5vw;
   }
   &.is-active::after {
     width: 33%;
@@ -186,10 +186,10 @@ export default {
   align-items: center;
   display: flex;
   justify-content: center;
-  width: 45px;
+  width: 12.5vw;
   height: 100%;
   &.is-active {
-    border-bottom: 4px solid var(--color-accent);
+    border-bottom: 1.1vw solid var(--color-accent);
   }
 }
 </style>

src/renderer/components/drawer/Drawer-settings.vue

@@ -255,12 +255,12 @@ export default {
 <style lang="scss" scoped>
 .Checkbox {
   background-color: var(--color-background);
-  border: 2px solid var(--color-background-lightest);
+  border: 0.56vw solid var(--color-background-lightest);
   border-radius: 100%;
   display: inline-block;
   transition: $transitionDefault;
-  width: 16px;
-  height: 16px;
+  width: 4.4vw;
+  height: 4.4vw;
   &:hover {
     border-color: var(--color-accent);
   }
@@ -275,22 +275,22 @@ export default {
 }
 
 .Container {
-  max-height: calc(100% - 36px);
+  max-height: calc(100% - 10vw);
   overflow-y: auto;
 }
 
 .Setting-wrapper {
   background-color: var(--color-background);
-  border-radius: 4px;
+  border-radius: 1.1vw;
   display: flex;
   justify-content: space-between;
-  margin: 12px 0;
-  padding: 12px;
+  margin: 3.3vw 0;
+  padding: 3.3vw;
 }
 
 .Setting-title {
   color: var(--color-foreground-darker);
-  font-size: 14px;
+  font-size: 0.7rem;
   letter-spacing: 0.05em;
 }
 </style>

src/renderer/components/drawer/Drawer-theme.vue

@@ -28,9 +28,9 @@
         <svg
           v-if="theme === themer.getThemeName(t)"
           xmlns="http://www.w3.org/2000/svg"
-          height="24"
+          width="6.6vw"
+          height="6.6vw"
           viewBox="0 0 24 24"
-          width="24"
         >
           <path d="M0 0h24v24H0z" fill="none" />
           <path
@@ -73,23 +73,23 @@ export default {
 
 <style lang="scss" scoped>
 .Container {
-  max-height: calc(100% - 36px);
+  max-height: calc(100% - 10vw);
   overflow-y: auto;
 }
 
 .Setting-wrapper {
   align-items: center;
-  border-left: 3px solid;
-  border-radius: 0 4px 4px 0;
+  border-left: 0.83vw solid;
+  border-radius: 0 1.1vw 1.1vw 0;
   display: flex;
   justify-content: space-between;
-  margin: 12px 0;
-  min-height: 48px;
-  padding: 0 12px;
+  margin: 3.3vw 0;
+  min-height: 13.3vw;
+  padding: 0 3.3vw;
 }
 
 .Setting-title {
-  font-size: 14px;
-  letter-spacing: 0.05em;
+  font-size: 0.7rem;
+  letter-spacing: 0.05rem;
 }
 </style>