m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-01-05 11:25:07 +01:00
Code

front tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2021-02-28 23:13:31 +01:00
parent 029c1972fe
commit 5ca1b75e2f
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 9 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.js
View File

@ -19,7 +19,7 @@ module.exports = {
rss: '/feed.xml', rss: '/feed.xml',
jsonfeed: '/feed.json', jsonfeed: '/feed.json',
typekitID: 'msu4qap', typekitID: 'msu4qap',
itemsPerPage: 26, itemsPerPage: 24,
repoContentPath: 'https://github.com/kremalicious/blog/tree/main/content', repoContentPath: 'https://github.com/kremalicious/blog/tree/main/content',
menu: [ menu: [
{ {

3
src/components/molecules/PostTeaser.module.scss
View File

@ -4,10 +4,11 @@
.title { .title {
padding-left: 0.2rem; padding-left: 0.2rem;
padding-right: 0.2rem; padding-right: 0.2rem;
margin-top: $spacer / 3; margin-top: $spacer / 2;
margin-bottom: 0; margin-bottom: 0;
font-size: $font-size-base; font-size: $font-size-base;
transition: color 0.2s ease-out; transition: color 0.2s ease-out;
color: $text-color-light;
} }
.post { .post {

11
src/pages/index.module.scss
View File

@ -45,14 +45,3 @@
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
} }
} }
.title {
composes: pagetitle from '../components/templates/Page.module.scss';
margin-left: 0;
margin-right: 0;
a {
margin: 0;
color: $text-color-light;
}
}

16
src/pages/index.tsx
View File

@ -12,36 +12,32 @@ export default function Home({ data }: PageProps): ReactElement {
<> <>
<SEO /> <SEO />
<section className={styles.section}> <section className={styles.section}>
<h2 className={styles.title}>
Latest Articles <PostMore to="/archive">All Articles</PostMore>
</h2>
<div className={styles.articles}> <div className={styles.articles}>
{(data as any).latestArticles.edges {(data as any).latestArticles.edges
.slice(0, 2) .slice(0, 4)
.map(({ node }: { node: Post }) => ( .map(({ node }: { node: Post }) => (
<PostTeaser key={node.id} post={node} hideDate /> <PostTeaser key={node.id} post={node} hideDate />
))} ))}
</div> </div>
<div className={`${styles.articles} ${styles.articlesLast}`}> <div className={`${styles.articles} ${styles.articlesLast}`}>
{(data as any).latestArticles.edges {(data as any).latestArticles.edges
.slice(2, 8) .slice(4, 7)
.map(({ node }: { node: Post }) => ( .map(({ node }: { node: Post }) => (
<PostTeaser key={node.id} post={node} hideDate /> <PostTeaser key={node.id} post={node} hideDate />
))} ))}
</div> </div>
<PostMore to="/archive">All Articles</PostMore>
</section> </section>
<section className={styles.section}> <section className={styles.section}>
<h2 className={styles.title}>
Latest Photos <PostMore to="/photos">All Photos</PostMore>
</h2>
<div className={styles.photos}> <div className={styles.photos}>
{(data as any).latestPhotos.edges.map(({ node }: { node: Post }) => ( {(data as any).latestPhotos.edges.map(({ node }: { node: Post }) => (
<PhotoThumb key={node.id} photo={node} /> <PhotoThumb key={node.id} photo={node} />
))} ))}
</div> </div>
<PostMore to="/photos">All Photos</PostMore>
</section> </section>
</> </>
) )