[READ-ONLY] Mirror of https://github.com/hacknug/romi-project.
romi-project.vercel.app
Improve responsive text styles
Nestor Vera
(Aug 3, 2022, 3:44 PM +0200)
ea8674ac
948a34f6
+13
-12
+2
-2
components/content/BaseCard.vue
+2
-2
components/content/BaseCard.vue
···
8
8
<slot name="media" />
9
9
10
10
<div v-if="(title || $slots.title) || (description || $slots.default) || (buttons || $slots.buttons)" class="grid gap-4 content-start p-8">
11
-
<div v-if="title || $slots.title" class="flex justify-between items-baseline space-x-2">
12
-
<slot name="title" v-bind="{ className: 'text-xl font-bold' }">{{ title }}</slot>
11
+
<div v-if="title || $slots.title" class="flex justify-between items-baseline space-x-2" :class="['text-xl md:text-2xl font-semibold']">
12
+
<slot name="title" v-bind="{ className: ['text-xl md:text-2xl font-semibold'] }">{{ title }}</slot>
13
13
</div>
14
14
<BaseProse v-if="description || $slots.default">
15
15
<slot name="default">{{ description }}</slot>
+3
-3
components/content/SectionCover.vue
+3
-3
components/content/SectionCover.vue
···
1
1
<template>
2
2
<div class="w-full grid gap-16 mb-8">
3
-
<div v-if="$slots.title || $slots.default" class="grid gap-8 w-full max-w-7xl">
4
-
<div v-if="$slots.title" class="max-w-5xl">
3
+
<div v-if="$slots.title || $slots.default" class="grid gap-8 w-full max-w-4xl">
4
+
<div v-if="$slots.title">
5
5
<slot name="title" />
6
6
</div>
7
-
<div v-if="$slots.default" class="text-primary-900/75 text-xl xl:text-3xl font-medium max-w-4xl">
7
+
<div v-if="$slots.default" class="text-xl md:text-2xl xl:text-3xl">
8
8
<slot name="default" />
9
9
</div>
10
10
</div>
+8
-7
layouts/default.vue
+8
-7
layouts/default.vue
···
14
14
</script>
15
15
16
16
<style lang="postcss" scoped>
17
-
:deep(:is(h1, h2, h3, h4, h5, h6)) { @apply text-primary-400 font-bold; }
18
-
:deep(:is(h1)) { @apply text-4xl xl:text-6xl; }
19
-
:deep(:is(h2)) { @apply text-3xl xl:text-5xl; }
20
-
:deep(:is(h3)) { @apply text-2xl xl:text-4xl; }
21
-
:deep(:is(h4)) { @apply text-xl xl:text-3xl; }
22
-
:deep(:is(h5)) { @apply text-lg xl:text-2xl; }
23
-
:deep(:is(h6)) { @apply text-base xl:text-xl; }
17
+
:deep(:is(h1, h2)) { @apply text-primary-400 font-bold; }
18
+
:deep(:is(h3, h4, h5, h6)) { @apply text-primary-400 font-semibold; }
19
+
:deep(:is(h1)) { @apply text-4xl md:text-5xl xl:text-6xl; }
20
+
:deep(:is(h2)) { @apply text-3xl md:text-4xl xl:text-5xl; }
21
+
:deep(:is(h3)) { @apply text-2xl md:text-3xl xl:text-4xl; }
22
+
:deep(:is(h4)) { @apply text-xl md:text-2xl xl:text-3xl; }
23
+
:deep(:is(h5)) { @apply text-lg md:text-xl xl:text-2xl; }
24
+
:deep(:is(h6)) { @apply text-base md:text-lg xl:text-xl; }
24
25
25
26
article > * > :deep(:is(h1, h2, h3, h4, h5, h6)) { @apply mt-[1em]; }
26
27
article > * > :deep(:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6)) { @apply mt-0; }