aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/molecules/meta-list/meta-item/meta-item.module.scss1
-rw-r--r--src/components/organisms/forms/search-form/search-form.module.scss55
-rw-r--r--src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss4
-rw-r--r--src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx5
-rw-r--r--src/components/organisms/navbar/navbar-item/navbar-item.module.scss200
-rw-r--r--src/components/templates/page/page.module.scss12
-rw-r--r--src/pages/cv.tsx14
-rw-r--r--src/pages/index.tsx66
-rw-r--r--src/styles/pages/home.module.scss3
9 files changed, 183 insertions, 177 deletions
diff --git a/src/components/molecules/meta-list/meta-item/meta-item.module.scss b/src/components/molecules/meta-list/meta-item/meta-item.module.scss
index a1c2d47..263a5dc 100644
--- a/src/components/molecules/meta-list/meta-item/meta-item.module.scss
+++ b/src/components/molecules/meta-list/meta-item/meta-item.module.scss
@@ -31,6 +31,7 @@
.value {
width: fit-content;
height: fit-content;
+ padding-block: fun.convert-px(2);
color: var(--color-fg);
font-weight: 400;
}
diff --git a/src/components/organisms/forms/search-form/search-form.module.scss b/src/components/organisms/forms/search-form/search-form.module.scss
index f6570ce..1a440f0 100644
--- a/src/components/organisms/forms/search-form/search-form.module.scss
+++ b/src/components/organisms/forms/search-form/search-form.module.scss
@@ -10,52 +10,53 @@
transition: all 0.3s ease-in-out 0s;
}
-.btn {
- background: var(--color-bg-tertiary);
- border: fun.convert-px(2) solid var(--color-border);
- box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
- transition: all 0.25s linear 0s;
+.form {
+ display: flex;
+ flex-flow: row nowrap;
+
+ /* It needs to be nested because of wrong CSS ordering on production build. */
+ .btn {
+ background: var(--color-bg-tertiary);
+ border: fun.convert-px(2) solid var(--color-border);
+ box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
+ transition: all 0.25s linear 0s;
+ }
+
+ &--no-label {
+ .btn {
+ align-self: stretch;
+ }
+ }
+
+ &--has-label {
+ .btn {
+ align-self: flex-end;
+ height: fun.convert-px(52);
+ }
+ }
- &:hover,
- &:focus {
+ .btn:hover,
+ .btn:focus {
.icon {
transform: scale(0.85) rotate(20deg) translateX(#{fun.convert-px(2)})
translateY(#{fun.convert-px(3)});
}
}
- &:focus {
+ .btn:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0
var(--color-primary-dark);
}
- &:active {
+ .btn:active {
.icon {
transform: scale(0.7);
}
}
}
-.form {
- display: flex;
- flex-flow: row nowrap;
-
- &--no-label {
- .btn {
- align-self: stretch;
- }
- }
-
- &--has-label {
- .btn {
- align-self: flex-end;
- height: fun.convert-px(52);
- }
- }
-}
-
.field {
min-width: 0;
diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss b/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss
index 1be81c4..b1b2302 100644
--- a/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss
+++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss
@@ -1,7 +1,3 @@
-.wrapper {
- width: fit-content;
-}
-
.sep {
margin-inline-start: var(--spacing-xs);
}
diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx b/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx
index 13434e1..fd29f90 100644
--- a/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx
+++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx
@@ -28,12 +28,11 @@ export type BreadcrumbsProps = Omit<NavProps, 'children'> & {
const BreadcrumbsWithRef: ForwardRefRenderFunction<
HTMLElement,
BreadcrumbsProps
-> = ({ className = '', items, ...props }, ref) => {
- const wrapperClass = `${styles.wrapper} ${className}`;
+> = ({ items, ...props }, ref) => {
const sep = '>';
return (
- <Nav {...props} className={wrapperClass} ref={ref}>
+ <Nav {...props} ref={ref}>
<NavList
isInline
isOrdered
diff --git a/src/components/organisms/navbar/navbar-item/navbar-item.module.scss b/src/components/organisms/navbar/navbar-item/navbar-item.module.scss
index f8249ba..a9a19de 100644
--- a/src/components/organisms/navbar/navbar-item/navbar-item.module.scss
+++ b/src/components/organisms/navbar/navbar-item/navbar-item.module.scss
@@ -2,23 +2,6 @@
@use "../../../../styles/abstracts/mixins" as mix;
@use "../../../../styles/abstracts/placeholders";
-.overlay {
- @include mix.media("screen") {
- @include mix.dimensions(null, "sm") {
- bottom: var(--modal-pos, var(--btn-size, --default-btn-size));
- display: flex;
- flex-flow: row wrap;
- place-content: flex-end;
- }
-
- @include mix.dimensions("sm") {
- position: absolute;
- inset: calc(100% + var(--spacing-2xs)) auto;
- background: transparent;
- }
- }
-}
-
.modal {
transition:
all 0.8s ease-in-out 0s,
@@ -58,88 +41,6 @@
}
}
-.checkbox {
- position: absolute;
-
- /* 6px = checkbox approximate size */
- inset: calc(50% - 6px) calc(50% - 6px);
- opacity: 0;
- cursor: pointer;
-
- &:hover,
- &:focus {
- &,
- + .label {
- @extend %draw-borders;
- }
- }
-
- &:checked {
- + .label {
- --draw-border-color1: var(--color-primary-dark);
- --draw-border-color2: var(--color-primary-light);
-
- .icon--hamburger {
- > span {
- background: transparent;
- border: transparent;
-
- &::before {
- top: 40%;
- transform-origin: 50% 50%;
- transform: rotate(-45deg);
- }
-
- &::after {
- bottom: 40%;
- transform-origin: 50% 50%;
- transform: rotate(45deg);
- }
- }
- }
- }
-
- ~ .overlay {
- opacity: 1;
- visibility: visible;
- }
- }
-
- &:not(:checked) {
- + .label {
- --draw-border-color1: var(--color-primary-light);
- --draw-border-color2: var(--color-primary-lighter);
- }
-
- ~ .overlay {
- opacity: 0;
- overflow: hidden;
- visibility: hidden;
-
- @include mix.media("screen") {
- @include mix.dimensions("sm") {
- overflow: visible;
- transition: all 0.3s ease-in-out 0.8s;
- }
- }
-
- > .modal {
- @include mix.media("screen") {
- @include mix.dimensions(null, "sm") {
- transform: translateX(-100vw);
- }
-
- @include mix.dimensions("sm") {
- transform: scale(0) perspective(#{fun.convert-px(250)})
- translate3d(0, 0, #{fun.convert-px(-250)});
- transform-origin: var(--transform-origin, 15% -15%);
- }
- }
- }
- }
- }
-}
-
@mixin modal-visible {
> .checkbox,
> .label {
@@ -166,6 +67,107 @@
position: relative;
+ /* It needs to be nested because of wrong CSS ordering on production build. */
+ .overlay {
+ @include mix.media("screen") {
+ @include mix.dimensions(null, "sm") {
+ bottom: var(--modal-pos, var(--btn-size, --default-btn-size));
+ display: flex;
+ flex-flow: row wrap;
+ place-content: flex-end;
+ }
+
+ @include mix.dimensions("sm") {
+ position: absolute;
+ inset: calc(100% + var(--spacing-2xs)) auto;
+ background: transparent;
+ }
+ }
+ }
+
+ /* It needs to be nested because of wrong CSS ordering on production build. */
+ .checkbox {
+ position: absolute;
+
+ /* 6px = checkbox approximate size */
+ inset: calc(50% - 6px) calc(50% - 6px);
+ opacity: 0;
+ cursor: pointer;
+
+ &:hover,
+ &:focus {
+ &,
+ + .label {
+ @extend %draw-borders;
+ }
+ }
+
+ &:checked {
+ + .label {
+ --draw-border-color1: var(--color-primary-dark);
+ --draw-border-color2: var(--color-primary-light);
+
+ .icon--hamburger {
+ > span {
+ background: transparent;
+ border: transparent;
+
+ &::before {
+ top: 40%;
+ transform-origin: 50% 50%;
+ transform: rotate(-45deg);
+ }
+
+ &::after {
+ bottom: 40%;
+ transform-origin: 50% 50%;
+ transform: rotate(45deg);
+ }
+ }
+ }
+ }
+
+ ~ .overlay {
+ opacity: 1;
+ visibility: visible;
+ }
+ }
+
+ &:not(:checked) {
+ + .label {
+ --draw-border-color1: var(--color-primary-light);
+ --draw-border-color2: var(--color-primary-lighter);
+ }
+
+ ~ .overlay {
+ opacity: 0;
+ overflow: hidden;
+ visibility: hidden;
+
+ @include mix.media("screen") {
+ @include mix.dimensions("sm") {
+ overflow: visible;
+ transition: all 0.3s ease-in-out 0.8s;
+ }
+ }
+
+ > .modal {
+ @include mix.media("screen") {
+ @include mix.dimensions(null, "sm") {
+ transform: translateX(-100vw);
+ }
+
+ @include mix.dimensions("sm") {
+ transform: scale(0) perspective(#{fun.convert-px(250)})
+ translate3d(0, 0, #{fun.convert-px(-250)});
+ transform-origin: var(--transform-origin, 15% -15%);
+ }
+ }
+ }
+ }
+ }
+ }
+
&--hidden-controller-sm {
@include mix.media("screen") {
@include mix.dimensions("sm") {
diff --git a/src/components/templates/page/page.module.scss b/src/components/templates/page/page.module.scss
index 91a1b58..fd1fac9 100644
--- a/src/components/templates/page/page.module.scss
+++ b/src/components/templates/page/page.module.scss
@@ -204,6 +204,13 @@
&__body {
grid-column: 2;
}
+
+ /* Without nesting, Nextjs does not override margin: the CSS is bundle in the
+ * wrong order. */
+ .heading {
+ width: fit-content;
+ margin: var(--spacing-md) auto;
+ }
}
.spinner {
@@ -211,11 +218,6 @@
}
:where(.comments) {
- .heading {
- width: fit-content;
- margin: var(--spacing-md) auto;
- }
-
.form {
max-width: 40ch;
margin-inline: auto;
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index f0e1e8b..cc24ca3 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -141,7 +141,7 @@ const CVPage: NextPageWithLayout = () => {
/>
<PageSidebar>
<Toc
- heading={<Heading level={3}>{messages.toc.title}</Heading>}
+ heading={<Heading level={2}>{messages.toc.title}</Heading>}
tree={tree}
/>
</PageSidebar>
@@ -151,19 +151,11 @@ const CVPage: NextPageWithLayout = () => {
<PageSidebar>
<ImageWidget
description={messages.image.caption}
- heading={
- <Heading isFake level={3}>
- {messages.image.title}
- </Heading>
- }
+ heading={<Heading level={2}>{messages.image.title}</Heading>}
img={<NextImage {...data.image} />}
/>
<SocialMediaWidget
- heading={
- <Heading isFake level={3}>
- {messages.socialMedia.title}
- </Heading>
- }
+ heading={<Heading level={2}>{messages.socialMedia.title}</Heading>}
media={[
{
icon: 'Github',
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0e6bb23..7a45477 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -16,6 +16,7 @@ import {
Time,
MetaItem,
Page,
+ GridItem,
} from '../components';
import { mdxComponents } from '../components/mdx';
import HomePageContent, { meta } from '../content/pages/homepage.mdx';
@@ -23,6 +24,7 @@ import {
convertRecentPostToRecentArticle,
fetchRecentPosts,
} from '../services/graphql';
+import styles from '../styles/pages/home.module.scss';
import type { NextPageWithLayout, RecentArticle } from '../types';
import { CONFIG } from '../utils/config';
import { ROUTES } from '../utils/constants';
@@ -82,34 +84,42 @@ const RecentPosts: FC<RecentPostsProps> = ({ posts }): JSX.Element => {
);
return (
- <Card
- aria-label={cardLabel}
- cover={
- post.cover ? (
- <CardCover aria-label={coverLabel} hasBorders>
- <NextImage {...post.cover} />
- </CardCover>
- ) : undefined
- }
- key={post.id}
- meta={
- <CardMeta isCentered>
- <MetaItem
- hasBorderedValues
- isCentered
- label={publicationDate}
- value={<Time date={post.publicationDate} />}
- />
- </CardMeta>
- }
- isCentered
- linkTo={postUrl}
- >
- <CardHeader>
- <CardTitle level={3}>{post.title}</CardTitle>
- </CardHeader>
- <CardFooter />
- </Card>
+ <GridItem key={post.id}>
+ <Card
+ aria-label={cardLabel}
+ className={styles.card}
+ cover={
+ post.cover ? (
+ <CardCover aria-label={coverLabel} hasBorders>
+ <NextImage
+ {...post.cover}
+ // eslint-disable-next-line react/jsx-no-literals
+ alt=""
+ // eslint-disable-next-line react/jsx-no-literals
+ title=""
+ />
+ </CardCover>
+ ) : undefined
+ }
+ meta={
+ <CardMeta isCentered>
+ <MetaItem
+ hasBorderedValues
+ isCentered
+ label={publicationDate}
+ value={<Time date={post.publicationDate} />}
+ />
+ </CardMeta>
+ }
+ isCentered
+ linkTo={postUrl}
+ >
+ <CardHeader>
+ <CardTitle level={3}>{post.title}</CardTitle>
+ </CardHeader>
+ <CardFooter />
+ </Card>
+ </GridItem>
);
})}
</Grid>
diff --git a/src/styles/pages/home.module.scss b/src/styles/pages/home.module.scss
new file mode 100644
index 0000000..be54abf
--- /dev/null
+++ b/src/styles/pages/home.module.scss
@@ -0,0 +1,3 @@
+.card {
+ height: 100%;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-26 23:06:46 +0000