this repo has no description
📱 Fix blog articles on mobile
+9
-6
+9
-6
src/pages/blog/[entry].astro
+9
-6
src/pages/blog/[entry].astro
···
30
30
back="/blog"
31
31
editButton={`~/projects.local/portfolio/blog/${Astro.params.entry}.md`}
32
32
>
33
-
<p>
33
+
<p class="intro">
34
34
<span i18n>published on</span>
35
35
<time datetime={date.toISOString()}>
36
36
{dateFormatter.format(date)}
···
51
51
</Layout>
52
52
53
53
<style>
54
+
main,
55
+
p.intro {
56
+
line-height: 1.5;
57
+
}
58
+
54
59
main {
55
60
font-size: 1.2rem;
56
-
line-height: 1.5;
57
-
max-width: 80ch;
61
+
max-width: min(80ch, 100%);
58
62
margin: 0 auto;
59
63
}
60
64
···
64
68
65
69
main :global(p:not(:has(img)), ul, dl, ol) {
66
70
margin-bottom: 0.5em;
67
-
max-width: 60ch;
71
+
max-width: min(60ch, 100%);
68
72
margin: 0 auto;
69
73
}
70
74
71
75
main :global(p:has(img), pre.astro-code) {
72
-
width: 100%;
73
-
max-width: 80ch;
76
+
width: min(80ch, calc(100% - 2rem));
74
77
margin: 2em auto;
75
78
}
76
79