feat: reorganize FontChange layout and resize header icons

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/FontChange.vue

@@ -16,10 +16,10 @@ const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
 
 <template>
   <div class="font-change" v-if="sortedFontFamilies.length > 0">
-    <theme-swap />
+    <div>
-
+      <label for="title-font" class="font-label">t</label>
-    <label class="font-label">t</label>
       <select
+        id="title-font"
         class="select"
         :value="store.userSettings?.chosenTitleFont"
         @change="store.setTitleFont(($event.target as HTMLSelectElement).value)"
@@ -29,8 +29,9 @@ const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
         </option>
       </select>
 
-    <label class="font-label">p</label>
+      <label for="body-font" class="font-label">p</label>
       <select
+        id="body-font"
         class="select"
         :value="store.userSettings?.chosenBodyFont"
         @change="store.setBodyFont(($event.target as HTMLSelectElement).value)"
@@ -39,8 +40,13 @@ const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
           {{ font }}
         </option>
       </select>
+    </div>
+    <div>
+      <theme-swap />
 
+      <label for="font-size" class="font-label">s</label>
       <select
+        id="font-size"
         class="select"
         :value="store.userSettings?.chosenFontSize"
         @change="store.setFontSize(($event.target as HTMLSelectElement).value)"
@@ -50,20 +56,23 @@ const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
         </option>
       </select>
     </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .font-change {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem;
-
   select {
     flex: 1;
     display: flex;
   }
+
+  div {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin: 1rem;
+  }
 }
 
 .font-label {

src/components/HeaderNote.vue

@@ -36,8 +36,8 @@ defineProps<{ user: string; repo: string }>()
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="icon icon-tabler icons-tabler-outline icon-tabler-typography"
-        width="24"
+        width="30"
-        height="24"
+        height="30"
         viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"
@@ -58,8 +58,8 @@ defineProps<{ user: string; repo: string }>()
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="24"
+        width="30"
-        height="24"
+        height="30"
         viewBox="0 0 24 24"
         stroke="currentColor"
         fill="none"
@@ -79,8 +79,8 @@ defineProps<{ user: string; repo: string }>()
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="icon icon-tabler icon-tabler-notes"
-        width="24"
+        width="30"
-        height="24"
+        height="30"
         viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"
@@ -100,8 +100,8 @@ defineProps<{ user: string; repo: string }>()
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="24"
+        width="30"
-        height="24"
+        height="30"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -126,8 +126,8 @@ defineProps<{ user: string; repo: string }>()
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="icon icon-tabler icon-tabler-mailbox"
-        width="24"
+        width="30"
-        height="24"
+        height="30"
         viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"