summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/Breadcrumb/Breadcrumb.module.scss6
-rw-r--r--src/components/Header/Header.module.scss2
-rw-r--r--src/components/PostHeader/PostHeader.module.scss6
-rw-r--r--src/components/PostsList/PostsList.module.scss8
-rw-r--r--src/pages/blog/index.tsx18
-rw-r--r--src/styles/layout/_grid.scss27
-rw-r--r--src/styles/pages/Home.module.scss5
-rw-r--r--src/styles/pages/Listing.module.scss19
-rw-r--r--src/styles/pages/Page.module.scss52
9 files changed, 59 insertions, 84 deletions
diff --git a/src/components/Breadcrumb/Breadcrumb.module.scss b/src/components/Breadcrumb/Breadcrumb.module.scss
index 98a11a4..b8fadf8 100644
--- a/src/components/Breadcrumb/Breadcrumb.module.scss
+++ b/src/components/Breadcrumb/Breadcrumb.module.scss
@@ -3,11 +3,7 @@
@use "@styles/abstracts/placeholders";
.wrapper {
- display: grid;
- grid-template-columns:
- minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
- minmax(0, 1fr);
- align-items: center;
+ composes: grid from "@styles/layout/_grid.scss";
padding: var(--spacing-md) 0;
}
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
index 4ad4ae5..96b8642 100644
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/Header.module.scss
@@ -3,7 +3,7 @@
.wrapper {
display: grid;
grid-template-columns:
- minmax(0, 1fr) min(calc(100vw - var(--spacing-md) * 2), 100ch)
+ minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 100ch)
minmax(0, 1fr);
align-items: center;
padding: var(--spacing-sm) 0 var(--spacing-md);
diff --git a/src/components/PostHeader/PostHeader.module.scss b/src/components/PostHeader/PostHeader.module.scss
index 9997ec3..c5a818c 100644
--- a/src/components/PostHeader/PostHeader.module.scss
+++ b/src/components/PostHeader/PostHeader.module.scss
@@ -2,11 +2,7 @@
@use "@styles/abstracts/mixins" as mix;
.wrapper {
- display: grid;
- grid-template-columns:
- minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
- minmax(0, 1fr);
- align-items: center;
+ composes: grid from "@styles/layout/_grid.scss";
max-width: 100%;
margin-bottom: var(--spacing-md);
background: var(--color-bg-secondary);
diff --git a/src/components/PostsList/PostsList.module.scss b/src/components/PostsList/PostsList.module.scss
index 8a6c083..d427ce7 100644
--- a/src/components/PostsList/PostsList.module.scss
+++ b/src/components/PostsList/PostsList.module.scss
@@ -2,10 +2,10 @@
@use "@styles/abstracts/placeholders";
.section {
- display: grid;
- grid-template-columns:
- minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
- minmax(0, 1fr);
+ --column-3: 0;
+ --grid-gap: 0;
+
+ composes: grid from "@styles/layout/_grid.scss";
align-items: first baseline;
}
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 855e6ce..db4b7a8 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -51,16 +51,14 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
</Head>
<article className={styles.wrapper}>
<PostHeader title={t`Blog`} />
- <div className={styles.body}>
- <PostsList data={data} showYears={true} />
- {hasNextPage && (
- <Button
- isDisabled={isLoadingMore}
- clickHandler={() => setSize(size + 1)}
- position="center"
- >{t`Load more?`}</Button>
- )}
- </div>
+ <PostsList data={data} showYears={true} />
+ {hasNextPage && (
+ <Button
+ isDisabled={isLoadingMore}
+ clickHandler={() => setSize(size + 1)}
+ position="center"
+ >{t`Load more?`}</Button>
+ )}
<aside className={styles.aside}>
<ThematicsList />
<TopicsList />
diff --git a/src/styles/layout/_grid.scss b/src/styles/layout/_grid.scss
new file mode 100644
index 0000000..9efea72
--- /dev/null
+++ b/src/styles/layout/_grid.scss
@@ -0,0 +1,27 @@
+@use "@styles/abstracts/mixins" as mix;
+
+.grid {
+ --grid-gap: var(--spacing-md);
+
+ display: grid;
+ align-items: center;
+ grid-template-columns:
+ minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+ var(--column-3, minmax(0, 1fr));
+ column-gap: var(--grid-gap);
+
+ @include mix.media("screen") {
+ @include mix.dimensions("md") {
+ --grid-gap: var(--spacing-lg);
+ grid-template-columns:
+ minmax(0, 1fr) clamp(60ch, 60vw, 80ch)
+ var(--column-3, minmax(0, 3fr));
+ }
+
+ @include mix.dimensions("lg") {
+ grid-template-columns:
+ minmax(0, 1fr) clamp(50ch, 50vw, 80ch)
+ var(--column-3, minmax(0, 1fr));
+ }
+ }
+}
diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss
index 4cbc9b1..79ba251 100644
--- a/src/styles/pages/Home.module.scss
+++ b/src/styles/pages/Home.module.scss
@@ -9,10 +9,7 @@
}
.section {
- display: grid;
- grid-template-columns:
- minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
- minmax(0, 1fr);
+ composes: grid from "@styles/layout/_grid.scss";
padding: var(--spacing-md) 0;
background: var(--color-bg-secondary);
diff --git a/src/styles/pages/Listing.module.scss b/src/styles/pages/Listing.module.scss
index 3d1ee9c..fdad3f5 100644
--- a/src/styles/pages/Listing.module.scss
+++ b/src/styles/pages/Listing.module.scss
@@ -2,23 +2,28 @@
@use "@styles/abstracts/placeholders";
.wrapper {
- display: grid;
- grid-template-columns:
- minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
- minmax(0, 1fr);
+ composes: grid from "@styles/layout/_grid.scss";
align-items: first baseline;
padding-bottom: var(--spacing-xl);
> header {
grid-column: 1 / -1;
}
+
+ > section {
+ grid-column: 1 / 3;
+ }
+
+ > button {
+ grid-column: 2;
+ }
}
.body {
grid-column: 2;
@include mix.media("screen") {
- @include mix.dimensions("lg") {
+ @include mix.dimensions("md") {
grid-row: 2;
}
}
@@ -37,10 +42,10 @@ li.item {
margin-top: var(--spacing-lg);
@include mix.media("screen") {
- @include mix.dimensions("lg") {
+ @include mix.dimensions("md") {
grid-column: 3;
grid-row: 2;
- margin-left: var(--spacing-lg);
+ max-height: 100vh;
position: sticky;
top: 0;
overflow-y: auto;
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
index cbb9ed1..b3615f6 100644
--- a/src/styles/pages/Page.module.scss
+++ b/src/styles/pages/Page.module.scss
@@ -2,29 +2,7 @@
@use "@styles/abstracts/mixins" as mix;
.article {
- display: grid;
- grid-template-columns:
- minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
- minmax(0, 1fr);
- align-items: center;
-
- @include mix.media("screen") {
- @include mix.dimensions("md") {
- grid-template-columns:
- minmax(0, var(--spacing-xl)) min(
- calc(100vw - calc(var(--spacing-md) * 2)),
- 80ch
- )
- minmax(0, 1fr);
- }
-
- @include mix.dimensions("lg") {
- grid-template-columns:
- minmax(0, 1fr) clamp(50ch, 50vw, 80ch)
- minmax(0, 1fr);
- column-gap: var(--spacing-2xl);
- }
- }
+ composes: grid from "@styles/layout/_grid.scss";
> header {
grid-column: 1 / -1;
@@ -49,7 +27,7 @@
grid-row: 2 / 4;
align-self: stretch;
justify-self: end;
- padding: 0 0 0 var(--spacing-lg);
+ padding: 0 var(--spacing-sm);
ol:first-of-type {
font-size: var(--font-size-sm);
@@ -68,45 +46,23 @@
grid-row: 2 / 5;
align-self: stretch;
max-width: min-content;
- margin-left: var(--spacing-2xl);
+ padding: 0 var(--spacing-sm);
}
@include mix.dimensions("lg") {
grid-row: 2 / 4;
- margin-left: 0;
}
}
}
.comments {
grid-column: 1 / -1;
- display: grid;
- grid-template-columns:
- minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
- minmax(0, 1fr);
- align-items: center;
+ composes: grid from "@styles/layout/_grid.scss";
margin: var(--spacing-md) 0 0;
padding: var(--spacing-md) 0 var(--spacing-lg);
background: var(--color-bg-secondary);
border-top: fun.convert-px(3) solid var(--color-border-lighter);
- @include mix.media("screen") {
- @include mix.dimensions("md") {
- grid-template-columns:
- minmax(0, var(--spacing-xl)) min(
- calc(100vw - calc(var(--spacing-md) * 2)),
- 80ch
- )
- minmax(0, 1fr);
- }
-
- @include mix.dimensions("lg") {
- grid-template-columns:
- minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
- minmax(0, 1fr);
- }
- }
-
> * {
grid-column: 2;
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 18:33:56 +0000