Skip to content

Commit

Permalink
fix(font): use responsive font size
Browse files Browse the repository at this point in the history
  • Loading branch information
Dosugamea committed Jan 19, 2024
1 parent d2e179a commit a39efae
Showing 3 changed files with 26 additions and 9 deletions.
5 changes: 5 additions & 0 deletions src/components/content/ProseP.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<template>
<p class="responsive-text">
<slot />
</p>
</template>
26 changes: 17 additions & 9 deletions src/components/content/SparkleCharacter.vue
Original file line number Diff line number Diff line change
@@ -156,7 +156,7 @@ const _srcset = computed(() => {
/>
<v-icon :color="elementColor" :size="bigIconSize" :icon="mdiStarCircle" />
<v-icon color="pink" :icon="jobIcon" :size="bigIconSize" />
<span class="responsive-text" v-text="jobName" />
<span class="responsive-character-text" v-text="jobName" />
</div>
<v-row class="my-1">
<v-col cols="5">
@@ -175,18 +175,20 @@ const _srcset = computed(() => {
<div class="d-flex align-center ma-1">
<v-chip
:size="miniIconSize"
class="justify-center w-50 font-weight-bold responsive-text"
class="justify-center w-50 font-weight-bold responsive-character-text"
:text="kv.key"
/>
<span class="responsive-text" v-text="kv.value" />
<span class="responsive-character-text" v-text="kv.value" />
</div>
</v-col>
</v-row>
<p class="mt-4 text-center align-center">
<v-icon :size="miniIconSize" color="pink" :icon="mdiStar" />
<v-icon :size="miniIconSize" color="orange" :icon="mdiStar" />
<v-icon :size="miniIconSize" color="cyan" :icon="mdiStar" />
<span class="font-weight-bold responsive-text">とっておき</span>
<span class="font-weight-bold responsive-character-text"
>とっておき</span
>
<v-icon :size="miniIconSize" color="cyan" :icon="mdiStar" />
<v-icon :size="miniIconSize" color="orange" :icon="mdiStar" />
<v-icon :size="miniIconSize" color="pink" :icon="mdiStar" />
@@ -196,8 +198,11 @@ const _srcset = computed(() => {
<v-img max-height="50px" :src="skillInfos[0].iconImage" />
</v-col>
<v-col :cols="!mobile ? 9 : 12">
<p class="responsive-text" v-text="skillInfos[0].title" />
<p class="responsive-text" v-text="skillInfos[0].description" />
<p class="responsive-character-text" v-text="skillInfos[0].title" />
<p
class="responsive-character-text"
v-text="skillInfos[0].description"
/>
</v-col>
</v-row>
<v-divider />
@@ -211,8 +216,11 @@ const _srcset = computed(() => {
<v-img max-height="50px" :src="skillInfo.iconImage" />
</v-col>
<v-col :cols="!mobile ? 9 : 12">
<p class="responsive-text" v-text="skillInfo.title" />
<p class="responsive-text" v-text="skillInfo.description" />
<p class="responsive-character-text" v-text="skillInfo.title" />
<p
class="responsive-character-text"
v-text="skillInfo.description"
/>
</v-col>
</v-row>
</v-col>
@@ -226,7 +234,7 @@ const _srcset = computed(() => {
font-size: clamp(20px, 2vw, 32px);
}
.responsive-text {
.responsive-character-text {
font-size: clamp(11px, 1vw, 16px);
}
</style>
4 changes: 4 additions & 0 deletions src/styles/main.scss
Original file line number Diff line number Diff line change
@@ -22,3 +22,7 @@
.text-white {
color: #ffffff !important;
}

.responsive-text {
font-size: clamp(14px, 1vw, 24px);
}

0 comments on commit a39efae

Please sign in to comment.