remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: reorganize FontChange layout and resize header icons

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Julien Calixte
2026-03-28 20:37:58 +01:00
parent 982f3070a1
commit ac68c68f8a
3 changed files with 60 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/FontChange.vue
View File

@@ -16,54 +16,63 @@ 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>
<select
id="title-font"
class="select"
:value="store.userSettings?.chosenTitleFont"
@change="store.setTitleFont(($event.target as HTMLSelectElement).value)"
>
<option v-for="font in sortedFontFamilies" :key="font" :value="font">
{{ font }}
</option>
</select>
<label class="font-label">t</label>
<select
class="select"
:value="store.userSettings?.chosenTitleFont"
@change="store.setTitleFont(($event.target as HTMLSelectElement).value)"
>
<option v-for="font in sortedFontFamilies" :key="font" :value="font">
{{ font }}
</option>
</select>
<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)"
>
<option v-for="font in sortedFontFamilies" :key="font" :value="font">
{{ font }}
</option>
</select>
</div>
<div>
<theme-swap />
<label class="font-label">p</label>
<select
class="select"
:value="store.userSettings?.chosenBodyFont"
@change="store.setBodyFont(($event.target as HTMLSelectElement).value)"
>
<option v-for="font in sortedFontFamilies" :key="font" :value="font">
{{ font }}
</option>
</select>
<select
class="select"
:value="store.userSettings?.chosenFontSize"
@change="store.setFontSize(($event.target as HTMLSelectElement).value)"
>
<option v-for="size in fontSizes" :key="size" :value="size">
{{ size }}
</option>
</select>
<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)"
>
<option v-for="size in fontSizes" :key="size" :value="size">
{{ size }}
</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 {

20
src/components/HeaderNote.vue
View File

@@ -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"
height="24"
width="30"
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"
height="24"
width="30"
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"
height="24"
width="30"
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"
height="24"
width="30"
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"
height="24"
width="30"
height="30"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"

6
src/components/WelcomeWorld.vue
View File

@@ -39,12 +39,14 @@ const { userInput, repoInput, submit } = useForm()
type="text"
placeholder="repo"
/>
<button type="submit" class="btn btn-primary" @click="submit">go</button>
<button type="submit" class="btn btn-sm btn-primary" @click="submit">
go
</button>
</form>
<footer>
<theme-swap />
Made with
made with
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-heart"