filipe/personal-website
1
1
Fork 0
Code Issues Pull requests Activity

fix: styling

Browse source 
Signed-off-by: Filipe Medeiros <hello@filipesm.eu>
This commit is contained in:
Filipe Medeiros 2023-05-01 13:19:52 +01:00
parent 332e987139
commit ee3d9e5dae
Signed by: filipe
GPG key ID: 9533BD5467CC1E78
11 changed files with 39 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/PageTitle.astro
View file

@ -5,7 +5,7 @@ export type Props = HTMLAttributes<'h1'>;
---
<h1
class:list={['text-primary-800 font-bold text-4xl', Astro.props.class]}
class:list={['text-primary-800 font-bold text-2xl sm:text-4xl', Astro.props.class]}
{...Astro.props}
>
<slot />

2
frontend/src/components/portableText/BlogPostSubtitle.astro
View file

@ -17,6 +17,6 @@ const components = {
const { content } = Astro.props;
---
<h2 class="mb-2 text-green-800 text-justify text-lg">
<h2 class="mb-2 text-green-800 text-justify sm:text-lg">
<PortableText components={components} value={content} />
</h2>

1
frontend/src/lib/cms/queries/blogPosts.ts
View file

@ -17,6 +17,7 @@ export const forBlogPostPage = groq`
_type != 'image' => @
},
headerImage,
readTime,
publishDate,
linkPreviewImage,
linkPreviewDescription,

6
frontend/src/pages/biblioteca/index.astro
View file

@ -36,7 +36,7 @@ const libraryItems: {
{
libraryItems.map(({ title, description, link, checkedOut }) => (
<CardLink link={link}>
<span class="text-lg md:text-xl font-medium break-words text-primary-700 block mb-3">
<span class="text-lg sm:text-xl font-medium break-words text-primary-700 block mb-3">
{title}
</span>
<p class="mb-5">{description}</p>
@ -49,13 +49,13 @@ const libraryItems: {
<nav class="flex gap-4">
<ButtonLink
href="/blogue"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Blog
</ButtonLink>
<ButtonLink
href="/"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Início
</ButtonLink>

14
frontend/src/pages/blog/[slug]/index.astro
View file

@ -18,6 +18,7 @@ export interface Props {
publishDate: string;
headerImage: ImageObject;
summary: string;
readTime: string;
twitterCardType: 'summary' | 'summary_large_image' | 'player' | 'app';
linkPreviewDescription: string;
linkPreviewImage: ImageObject;
@ -46,6 +47,7 @@ const {
publishDate,
headerImage,
summary,
readTime,
twitterCardType,
linkPreviewDescription,
linkPreviewImage,
@ -67,11 +69,15 @@ const { slug } = Astro.params;
image={linkPreviewImage ?? headerImage}
twitterCardType={twitterCardType}
/>
<article class="max-w-prose m-auto">
<article class="max-w-prose m-auto pt-8">
<header class="mb-5">
<PageTitle class="mb-2 break-words">{title}</PageTitle>
<BlogPostSubtitle content={subtitle} />
<time datetime={publishDate} class="text-xl">{publishDate}</time>
<span class="text-lg sm:text-xl">
<time datetime={publishDate}>{publishDate}</time>
&bull;
{readTime}
</span>
</header>
<BlogPostContent content={content} />
<hr class="my-5 border-t border-primary-700" />
@ -81,13 +87,13 @@ const { slug } = Astro.params;
<nav class="flex gap-4">
<ButtonLink
href="/blog"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Blog
</ButtonLink>
<ButtonLink
href="/library"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Library
</ButtonLink>

6
frontend/src/pages/blog/index.astro
View file

@ -28,7 +28,7 @@ const posts: {
posts.map(({ title, slug, publishDate, summary }) => (
<CardLink link={`/blog/${slug}`}>
<article class="flex flex-col">
<span class="text-lg md:text-xl font-medium break-words text-primary-700">
<span class="text-lg sm:text-xl font-medium break-words text-primary-700">
{title}
</span>
<time datetime={publishDate} class="text-sm text-primary-800">
@ -44,13 +44,13 @@ const posts: {
<nav class="flex gap-4">
<ButtonLink
href="/home"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Home
</ButtonLink>
<ButtonLink
href="/library"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Library
</ButtonLink>

14
frontend/src/pages/blogue/[slug]/index.astro
View file

@ -18,6 +18,7 @@ export interface Props {
publishDate: string;
headerImage: ImageObject;
summary: string;
readTime: string;
twitterCardType: 'summary' | 'summary_large_image' | 'player' | 'app';
linkPreviewDescription: string;
linkPreviewImage: ImageObject;
@ -46,6 +47,7 @@ const {
publishDate,
headerImage,
summary,
readTime,
twitterCardType,
linkPreviewDescription,
linkPreviewImage,
@ -67,11 +69,15 @@ const { slug } = Astro.params;
image={linkPreviewImage ?? headerImage}
twitterCardType={twitterCardType}
/>
<article class="max-w-prose m-auto">
<article class="max-w-prose m-auto pt-8">
<header class="mb-5">
<PageTitle class="mb-2 break-words">{title}</PageTitle>
<BlogPostSubtitle content={subtitle} />
<time datetime={publishDate} class="text-xl">{publishDate}</time>
<span class="text-lg sm:text-xl">
<time datetime={publishDate}>{publishDate}</time>
&bull;
{readTime}
</span>
</header>
<BlogPostContent content={content} />
<hr class="my-5 border-t border-primary-700" />
@ -81,13 +87,13 @@ const { slug } = Astro.params;
<nav class="flex gap-4">
<ButtonLink
href="/blogue"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Blog
</ButtonLink>
<ButtonLink
href="/biblioteca"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Biblioteca
</ButtonLink>

6
frontend/src/pages/blogue/index.astro
View file

@ -27,7 +27,7 @@ const posts: {
posts.map(({ title, slug, publishDate, summary }) => (
<CardLink link={`/blogue/${slug}`}>
<article class="flex flex-col">
<span class="text-lg md:text-xl font-medium break-words text-primary-700">
<span class="text-lg sm:text-xl font-medium break-words text-primary-700">
{title}
</span>
<time datetime={publishDate} class="text-sm text-primary-800">
@ -43,13 +43,13 @@ const posts: {
<nav class="flex gap-4">
<ButtonLink
href="/"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Início
</ButtonLink>
<ButtonLink
href="/biblioteca"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Biblioteca
</ButtonLink>

4
frontend/src/pages/home.astro
View file

@ -73,13 +73,13 @@ import Layout from '../layouts/Layout.astro';
<nav class="flex gap-4">
<ButtonLink
href="/blog"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Blog
</ButtonLink>
<ButtonLink
href="/library"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Library
</ButtonLink>

4
frontend/src/pages/index.astro
View file

@ -79,13 +79,13 @@ import Layout from '../layouts/Layout.astro';
<nav class="flex gap-4">
<ButtonLink
href="/blogue"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Blogue
</ButtonLink>
<ButtonLink
href="/biblioteca"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Biblioteca
</ButtonLink>

6
frontend/src/pages/library/index.astro
View file

@ -37,7 +37,7 @@ const libraryItems: {
{
libraryItems.map(({ title, description, link, checkedOut }) => (
<CardLink link={link}>
<span class="text-lg md:text-xl font-medium break-words text-primary-700 block mb-3">
<span class="text-lg sm:text-xl font-medium break-words text-primary-700 block mb-3">
{title}
</span>
<p class="mb-5">{description}</p>
@ -50,13 +50,13 @@ const libraryItems: {
<nav class="flex gap-4">
<ButtonLink
href="/blog"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Blog
</ButtonLink>
<ButtonLink
href="/home"
class="text-3xl flex-1 py-2 flex justify-center px-2"
class="text-xl sm:text-3xl flex-1 py-1 sm:py-2 flex justify-center px-2"
>
Home
</ButtonLink>