fix: style

README.md

@@ -4,6 +4,12 @@ A logo generater using canvas & Vanilla js.
 
 ## Used Fonts
 
-[RoG2サンセリフStd B](https://www.morisawa.co.jp/fonts/specimen/1646) (Made some modifications.)
+* [RoG2サンセリフStd B](https://www.morisawa.co.jp/fonts/specimen/1646) (Modded)
 
-[Wêlai Glow Sans Heavy](https://github.com/welai/glow-sans)
+* [Wêlai Glow Sans Heavy](https://github.com/welai/glow-sans)
+
+## Todo
+
+* Support Hangul
+
+* Slice font

index.html

@@ -14,7 +14,7 @@
     <h1 class="i18n mt-24 mb-20 text-center font-bold" data-i18n="title">BlueArchive-Style Logo Generater</h1>
   </header>
   <section class="canvas-wrapper flex place-content-center">
-    <div class="relative">
+    <div class="relative my-auto">
       <canvas id="canvas" height="250" width="900"></canvas>
       <div id='loading' class="absolute w-full h-full top-0 left-0 backdrop-blur-sm bg-slate-400/5 z-50 hidden">
         <div class="flex place-content-center h-full">
@@ -44,7 +44,7 @@
         <div class="collapse-content">
           <div class="i18n" data-i18n="halo-cross">Halo & Cross position</div>
           <div class="flex justify-evenly my-4">
-            <span class="flex-1"><span class="mr-2">X</span><input type="number" placeholder="Type here" value="-18"
+            <span class="flex-1"><span class="mr-2">X</span><input type="number" placeholder="Type here" value="-15"
                 class="input input-bordered input-sm input-primary w-32 mr-2" id="graphX" /></span>
             <span class="flex-1"><span class="mr-2">Y</span><input type="number" placeholder="Type here" value="0"
                 class="input input-bordered input-sm input-primary w-32" id="graphY" /></span>

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "author": "nulla",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

script/export-CJK.js

@@ -18,7 +18,7 @@ const result = font
   .find({
     filter: (glyf) =>
       !(glyf.xMin === 408 && glyf.xMax === 592 && glyf.yMin === 452 && glyf.yMax === 636),
-  })
+  }) //remove dot glyph
   .reduce((p, c) => {
     if (!c.unicode) {
       return p;
@@ -28,7 +28,7 @@ const result = font
     }
     return p;
   }, []);
-const fontmin = new Fontmin()
+new Fontmin()
   .src('../public/RoGSanSrfStd-Bd.otf')
   .use(Fontmin.otf2ttf())
   .use(

src/canvas.ts

@@ -98,10 +98,16 @@ export default class LogoCanvas {
       Y: this.graphOffset.Y,
     };
     c.beginPath();
-    c.moveTo(graph.X + hollowPath[0][0] / 2, graph.Y + hollowPath[0][1] / 2);
-    c.lineTo(graph.X + hollowPath[1][0] / 2, graph.Y + hollowPath[1][1] / 2);
-    c.lineTo(graph.X + hollowPath[2][0] / 2, graph.Y + hollowPath[2][1] / 2);
-    c.lineTo(graph.X + hollowPath[3][0] / 2, graph.Y + hollowPath[3][1] / 2);
+    c.moveTo(
+      graph.X + (hollowPath[0][0] / 500) * canvasHeight,
+      graph.Y + (hollowPath[0][1] / 500) * canvasHeight
+    );
+    for (let i = 1; i < 4; i++) {
+      c.lineTo(
+        graph.X + (hollowPath[i][0] / 500) * canvasHeight,
+        graph.Y + (hollowPath[i][1] / 500) * canvasHeight
+      );
+    }
     c.closePath();
     if (this.transparentBg) {
       c.globalCompositeOperation = 'destination-out';

src/style.css

@@ -38,7 +38,7 @@ h1 {
 
 #canvas {
   border-radius: 8px;
-  border: 1px solid #ccc;
+  border: 1px solid #bbb;
   max-width: 100%;
 }