fix: styling for article header link box

kalecream · Jan 16, 2024 · 5ad78a4 · 5ad78a4
1 parent 8d9b448
commit 5ad78a4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/frontend/src/components/blog/articles.module.scss b/frontend/src/components/blog/articles.module.scss
@@ -33,16 +33,18 @@
 		color: var(--primary);
 	}
 
-	@media (max-width: 768px) {
+	@include breakpoint-range($from: mobile) {
 		display: none;
 	}
 
-	@media (min-width: 1024px) {
-		width: 360px;
+	@include breakpoint-range($from: desktopLarge) {
+		display: block;
+		width: 450px;
 		position: fixed;
 		left: 0;
-		top: 40%;
-		padding: 0 2rem;
+		top: 45%;
+		padding: 0 1rem;
+		font-size: 0.8rem;
 	}
 }
 

diff --git a/frontend/src/pages/posts/[slug].tsx b/frontend/src/pages/posts/[slug].tsx
@@ -18,7 +18,7 @@ import rehypeSlug from 'rehype-slug';
 import { useHeadsObserver } from '@hooks/useObserver';
 import getReadTime from '@utils/read-time';
 import { ReactNode } from '@mdx-js/react/lib';
-
+import article from '@components/blog/articles.module.scss';
 
 type PostPageProps = {
 	source: MDXRemoteSerializeResult;
@@ -79,7 +79,7 @@ const PostPage = ({ source, frontMatter }: PostPageProps): JSX.Element => {
 					</div>
 				</div>
 
-				<aside className="table-of-contents">
+				<aside className={article['table-of-contents']}>
 					<ul>
 						{headings.map((heading) => {
 							const activeHeader = document.querySelector(`#${heading.id}`) ?? headings[0].id;