chore: .css -> .less

src/renderer/src/App.less

@@ -0,0 +1,66 @@
+.App {
+  text-align: center;
+}
+
+.logos {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  padding: 0 5vw;
+  width: 100%;
+}
+
+.logos .img-box {
+  width: 33.33%;
+}
+
+.App-logo {
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+button {
+  font-size: calc(10px + 2vmin);
+}
+
+.static-public {
+  display: flex;
+  align-items: center;
+
+  code {
+    padding: 4px 7px;
+    margin: 0 4px;
+    border-radius: 4px;
+    background-color: rgb(30, 30, 30, .7);
+    font-size: 13px;
+  }
+}

src/renderer/src/App.tsx

@@ -3,7 +3,7 @@ import { Button } from 'antd'
 import vite from './assets/vite.svg'
 import react from './assets/react.svg'
 import electron from './assets/electron.png'
-import './App.css'
+import './App.less'
 
 function App() {
   const [count, setCount] = useState(0)
@@ -49,9 +49,9 @@ function App() {
           >
             Vite Docs
           </a>
-          <div>
-            Place static files into the public folder
-            <img style={{ width: 100 }} src="./img/node.png" />
+          <div className="static-public">
+            Place static files into the <code>src/renderer/public</code> folder
+            <img style={{ width: 90 }} src="./images/node.png" />
           </div>
         </div>
       </header>