aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/PostPreview/PostPreview.module.scss38
-rw-r--r--src/components/PostsList/PostsList.module.scss10
-rw-r--r--src/components/Sidebar/Sidebar.module.scss2
-rw-r--r--src/pages/blog/index.tsx24
-rw-r--r--src/pages/recherche/index.tsx12
-rw-r--r--src/styles/pages/Listing.module.scss52
-rw-r--r--src/styles/pages/Page.module.scss3
7 files changed, 66 insertions, 75 deletions
diff --git a/src/components/PostPreview/PostPreview.module.scss b/src/components/PostPreview/PostPreview.module.scss
index b275d63..8039a87 100644
--- a/src/components/PostPreview/PostPreview.module.scss
+++ b/src/components/PostPreview/PostPreview.module.scss
@@ -4,18 +4,25 @@
.wrapper {
--icon-size: #{fun.convert-px(20)};
- padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
- border: fun.convert-px(1) solid var(--color-border);
- border-radius: fun.convert-px(3);
- box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow-light),
- fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
- var(--color-shadow-light),
- fun.convert-px(4) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-2)
- var(--color-shadow-light);
+ padding: var(--spacing-2xs) 0 var(--spacing-lg);
transition: all 0.3s ease-in-out 0s, border 0s;
&:hover {
--icon-size: #{fun.convert-px(25)};
+
+ a {
+ > svg {
+ :global {
+ animation: pulse 1.5s ease-in-out 0.5s infinite;
+ }
+ }
+
+ &:hover {
+ > svg {
+ animation: none;
+ }
+ }
+ }
}
&:active {
@@ -28,7 +35,7 @@
height: fun.convert-px(100);
margin: 0 auto var(--spacing-sm);
position: relative;
- border: fun.convert-px(1) solid var(--color-border);
+ border: fun.convert-px(1) solid var(--color-border-light);
}
h2.title {
@@ -38,6 +45,19 @@ h2.title {
@include mix.media("screen") {
@include mix.dimensions("xs") {
+ .wrapper {
+ margin: 0;
+ padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
+ border: fun.convert-px(1) solid var(--color-border-light);
+ border-radius: fun.convert-px(3);
+ box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
+ var(--color-shadow-light),
+ fun.convert-px(3) fun.convert-px(3) fun.convert-px(3) fun.convert-px(-1)
+ var(--color-shadow-lighter),
+ fun.convert-px(5) fun.convert-px(5) fun.convert-px(7) fun.convert-px(-1)
+ var(--color-shadow-lighter);
+ }
+
.read-more {
font-size: var(--font-size-sm);
}
diff --git a/src/components/PostsList/PostsList.module.scss b/src/components/PostsList/PostsList.module.scss
index d427ce7..c0f8062 100644
--- a/src/components/PostsList/PostsList.module.scss
+++ b/src/components/PostsList/PostsList.module.scss
@@ -1,3 +1,4 @@
+@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/mixins" as mix;
@use "@styles/abstracts/placeholders";
@@ -32,9 +33,16 @@
}
li.item {
- margin: var(--spacing-md) 0;
+ margin: 0 0 var(--spacing-md) 0;
+ border-bottom: fun.convert-px(1) solid var(--color-border-light);
&:first-of-type {
margin-top: var(--spacing-sm);
+
+ @include mix.media("screen") {
+ @include mix.dimensions("md") {
+ margin-top: 0;
+ }
+ }
}
}
diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
index 544a733..83c1024 100644
--- a/src/components/Sidebar/Sidebar.module.scss
+++ b/src/components/Sidebar/Sidebar.module.scss
@@ -2,6 +2,7 @@
.wrapper {
grid-column: 2;
+ margin-top: var(--spacing-lg);
@include mix.media("screen") {
@include mix.dimensions("md") {
@@ -10,6 +11,7 @@
align-self: stretch;
display: flex;
flex-flow: column nowrap;
+ margin-top: 0;
position: relative;
visibility: hidden;
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index bee0522..faadd6f 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -12,9 +12,9 @@ import useSWRInfinite from 'swr/infinite';
import { Button } from '@components/Buttons';
import { getPublishedPosts } from '@services/graphql/queries';
import PostHeader from '@components/PostHeader/PostHeader';
-import styles from '@styles/pages/Listing.module.scss';
import { ThematicsList, TopicsList } from '@components/Widget';
import Sidebar from '@components/Sidebar/Sidebar';
+import styles from '@styles/pages/Page.module.scss';
const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
const getKey = (pageIndex: number, previousData: PostsListData) => {
@@ -50,16 +50,20 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
<title>{seo.blog.title}</title>
<meta name="description" content={seo.blog.description} />
</Head>
- <article className={styles.wrapper}>
+ <article
+ className={`${styles.article} ${styles['article--no-comments']}`}
+ >
<PostHeader title={t`Blog`} />
- <PostsList data={data} showYears={true} />
- {hasNextPage && (
- <Button
- isDisabled={isLoadingMore}
- clickHandler={() => setSize(size + 1)}
- position="center"
- >{t`Load more?`}</Button>
- )}
+ <div className={styles.body}>
+ <PostsList data={data} showYears={true} />
+ {hasNextPage && (
+ <Button
+ isDisabled={isLoadingMore}
+ clickHandler={() => setSize(size + 1)}
+ position="center"
+ >{t`Load more?`}</Button>
+ )}
+ </div>
<Sidebar>
<ThematicsList title={t`Thematics`} />
<TopicsList title={t`Topics`} />
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index ece76eb..c8a7b9b 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -13,7 +13,9 @@ import Head from 'next/head';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import useSWRInfinite from 'swr/infinite';
-import styles from '@styles/pages/Listing.module.scss';
+import Sidebar from '@components/Sidebar/Sidebar';
+import { ThematicsList, TopicsList } from '@components/Widget';
+import styles from '@styles/pages/Page.module.scss';
const Search: NextPageWithLayout = () => {
const [query, setQuery] = useState('');
@@ -73,7 +75,9 @@ const Search: NextPageWithLayout = () => {
<title>{head.title}</title>
<meta name="description" content={head.description} />
</Head>
- <article className={styles.wrapper}>
+ <article
+ className={`${styles.article} ${styles['article--no-comments']}`}
+ >
<PostHeader title={title} />
<div className={styles.body}>
<PostsList data={data} showYears={false} />
@@ -84,6 +88,10 @@ const Search: NextPageWithLayout = () => {
>{t`Load more?`}</Button>
)}
</div>
+ <Sidebar>
+ <ThematicsList title={t`Thematics`} />
+ <TopicsList title={t`Topics`} />
+ </Sidebar>
</article>
</>
);
diff --git a/src/styles/pages/Listing.module.scss b/src/styles/pages/Listing.module.scss
deleted file mode 100644
index db826d7..0000000
--- a/src/styles/pages/Listing.module.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.wrapper {
- composes: grid from "@styles/layout/_grid.scss";
- align-items: first baseline;
- padding-bottom: var(--spacing-xl);
-
- > header {
- grid-column: 1 / -1;
- }
-
- > div {
- grid-column: 1 / 3;
- }
-
- > button {
- grid-column: 2;
- }
-
- > aside > div {
- max-height: 100vh;
- overflow: auto;
- }
-}
-
-.body {
- --column-3: 0;
- --grid-gap: 0;
-
- grid-column: 2;
- composes: grid from "@styles/layout/_grid.scss";
- align-items: first baseline;
-
- @include mix.media("screen") {
- @include mix.dimensions("md") {
- grid-row: 2;
- }
- }
-
- > * {
- grid-column: 2;
- }
-}
-
-.list {
- @extend %reset-ordered-list;
-}
-
-li.item {
- margin: 0 0 var(--spacing-md) 0;
-}
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
index 3ce46d0..69b25c0 100644
--- a/src/styles/pages/Page.module.scss
+++ b/src/styles/pages/Page.module.scss
@@ -4,6 +4,7 @@
.article {
composes: grid from "@styles/layout/_grid.scss";
+ align-items: start;
> header {
grid-column: 1 / -1;
@@ -44,6 +45,7 @@
li.item {
margin: 0 0 var(--spacing-md) 0;
+ border-bottom: fun.convert-px(1) solid var(--color-border-light);
}
.comments {
@@ -60,7 +62,6 @@ li.item {
}
.aside {
- align-self: start;
max-height: 100vh;
position: sticky;
top: 0;
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 04:25:42 +0000