morten/morten-olsen.github.io
1
0
Fork 0
mirror of https://github.com/morten-olsen/morten-olsen.github.io.git synced 2026-02-08 01:46:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: smaller margins on articles

Browse Source
This commit is contained in:
Morten Olsen
2023-01-28 21:56:49 +01:00
parent e3f56dbe47
commit 7ae92c5420
3 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
webpage/package.json
View File

@@ -16,6 +16,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-markdown": "^8.0.4", "react-markdown": "^8.0.4",
"react-wrap-balancer": "^0.4.0",
"styled-components": "^5.3.6", "styled-components": "^5.3.6",
"three": "^0.147.0" "three": "^0.147.0"
}, },

5
webpage/src/pages/articles/[slug].tsx
View File

@@ -3,6 +3,7 @@ import { GetStaticPaths, GetStaticProps } from 'next';
import styled from 'styled-components'; import styled from 'styled-components';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { ReactMarkdown } from 'react-markdown/lib/react-markdown'; import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
import Balancer from 'react-wrap-balancer';
import { Jumbo, Overline } from 'typography'; import { Jumbo, Overline } from 'typography';
import { ThemeProvider } from 'theme/provider'; import { ThemeProvider } from 'theme/provider';
import { createTheme } from 'theme/create'; import { createTheme } from 'theme/create';
@@ -30,7 +31,7 @@ const ArticleWrapper = styled.article`
const ArticleContent = styled.div` const ArticleContent = styled.div`
max-width: 900px; max-width: 900px;
padding: 50px; padding: 50px 30px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
line-height: 2.1rem; line-height: 2.1rem;
color: ${({ theme }) => theme.colors.foreground}; color: ${({ theme }) => theme.colors.foreground};
@@ -148,9 +149,11 @@ const Article: React.FC<Props> = ({ article }) => {
<Wrapper> <Wrapper>
<ArticleWrapper> <ArticleWrapper>
<ArticleContent> <ArticleContent>
<Balancer>
{article.title.split(' ').map((word, index) => ( {article.title.split(' ').map((word, index) => (
<Title key={index}>{word}</Title> <Title key={index}>{word}</Title>
))} ))}
</Balancer>
<div> <div>
<Meta> <Meta>
By Morten Olsen - {article.stats.text}{' '} By Morten Olsen - {article.stats.text}{' '}

10
yarn.lock
View File

@@ -1244,6 +1244,7 @@ __metadata:
react: ^18.2.0 react: ^18.2.0
react-dom: ^18.2.0 react-dom: ^18.2.0
react-markdown: ^8.0.4 react-markdown: ^8.0.4
react-wrap-balancer: ^0.4.0
styled-components: ^5.3.6 styled-components: ^5.3.6
three: ^0.147.0 three: ^0.147.0
languageName: unknown languageName: unknown
@@ -8344,6 +8345,15 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"react-wrap-balancer@npm:^0.4.0":
version: 0.4.0
resolution: "react-wrap-balancer@npm:0.4.0"
peerDependencies:
react: ^18.0.0
checksum: c43e9ecc5737ecd67a5f38f4ed928a489dd20bf63b24bb31abc94c6e8605e1df7302196b74e5805528c7044864ac7ea1eea64117b74b8a91066f781e3239e9cc
languageName: node
linkType: hard
"react@npm:^18.2.0": "react@npm:^18.2.0":
version: 18.2.0 version: 18.2.0
resolution: "react@npm:18.2.0" resolution: "react@npm:18.2.0"