💄 Some styling changes

Sergei Orlow · Sergei Orlow · commit 678982e3c443 · 2021-03-23T01:11:51.000+10:00
diff --git a/content/meeting-notes/dayne-topkin-remote.jpg b/content/meeting-notes/dayne-topkin-remote.jpg
diff --git a/content/meeting-notes/index.md b/content/meeting-notes/index.md
diff --git a/content/meeting-notes/og-image.png b/content/meeting-notes/og-image.png
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -19,6 +19,7 @@ const InternalLink = styled(Link)`
 `
 
 const FooterLinks = styled.ol`
+	list-style: none;
 	margin: 0;
 `
 
diff --git a/src/components/header.js b/src/components/header.js
@@ -9,6 +9,12 @@ import { ExternalRoutes } from '../routes'
 import { Link } from 'gatsby'
 
 const StyledHeader = styled.header`
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	background: #fff;
+	z-index: 2000;
 	display: flex;
 	justify-content: space-between;
 	padding: 1rem;
diff --git a/src/components/post-preview-small.js b/src/components/post-preview-small.js
@@ -59,15 +59,15 @@ export const PostPreviewSmall = ({ post }) => {
 				/>
 			</Link>
 			<Column>
-				<h4>
+				<h3>
 					<PostLink itemProp='url' to={post.fields.slug}>
 						<span itemProp='name headline'>{post.frontmatter.title}</span>
 						<PostDate>
 							{' '}
 							- <span itemProp='datePublished'>{post.frontmatter.date}</span>
 						</PostDate>
 					</PostLink>
-				</h4>
+				</h3>
 
 				<meta itemProp='headline' content={post.frontmatter.title} />
 				<meta itemProp='url' content={pageUrl} />
diff --git a/src/components/post-preview.js b/src/components/post-preview.js
@@ -47,7 +47,7 @@ const PostPreviewSection = styled.section`
 const Column = styled.div`
 	display: flex;
 	flex-direction: column;
-	max-width: calc(1000px - 5rem - 300px);
+	max-width: calc(1000px - 2rem - 300px);
 `
 
 export const PostPreview = ({ post }) => {
@@ -66,15 +66,15 @@ export const PostPreview = ({ post }) => {
 				/>
 			</Link>
 			<Column>
-				<h3>
+				<h2>
 					<PostLink itemProp='url' to={post.fields.slug}>
 						<span itemProp='name headline'>{post.frontmatter.title}</span>
 						<PostDate>
 							{' '}
 							- <span itemProp='datePublished'>{post.frontmatter.date}</span>
 						</PostDate>
 					</PostLink>
-				</h3>
+				</h2>
 
 				<meta itemProp='headline' content={post.frontmatter.title} />
 				<meta itemProp='url' content={pageUrl} />
diff --git a/src/components/top-tags.js b/src/components/top-tags.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import { Labels } from './labels'
+import { graphql, useStaticQuery } from 'gatsby'
+
+const Tags = styled.div`
+	align-self: flex-end;
+	text-align: center;
+	max-width: 500px;
+	margin-left: 1rem;
+`
+
+export const TopTags = () => {
+	const data = useStaticQuery(graphql`
+		query TopTagsQuery {
+			tagsGroup: allMarkdownRemark {
+				group(field: frontmatter___tags) {
+					fieldValue
+					totalCount
+				}
+			}
+		}
+	`)
+
+	return (
+		<Tags>
+			<h3>
+				<span role='img' aria-label='High fives'>
+					🙌
+				</span>{' '}
+				Top Tags
+			</h3>
+			<Labels
+				from={data.tagsGroup.group
+					.sort((a, b) => b.totalCount - a.totalCount)
+					.slice(0, 5)
+					.map((tag) => `${tag.fieldValue} (${tag.totalCount})`)}
+			/>
+		</Tags>
+	)
+}
diff --git a/src/layout.js b/src/layout.js
@@ -10,6 +10,7 @@ const Main = styled.main`
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
+	margin-top: 3.5rem;
 `
 
 const GlobalStyles = () => (
@@ -36,6 +37,20 @@ const GlobalStyles = () => (
 				background-color: #fafafa;
 			}
 
+			h1 {
+				font-size: 2.5rem;
+				padding: 1rem 0;
+				text-align: center;
+			}
+
+			h2 {
+				font-size: 1.8rem;
+			}
+
+			h3 {
+				font-size: 1.6rem;
+			}
+
 			a {
 				color: #333;
 
diff --git a/src/pages/404.js b/src/pages/404.js
@@ -17,7 +17,12 @@ const FourOhFour = () => (
 			]}
 		/>
 		<Centralise css={{ textAlign: 'center', marginTop: '10rem' }}>
-			<h1>Found Nothing</h1>
+			<h1>
+				<span role='img' aria-label='Looking'>
+					👀
+				</span>{' '}
+				Found Nothing
+			</h1>
 			<Link to='/'>Try again?</Link>
 		</Centralise>
 	</Layout>
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -7,8 +7,8 @@ import { Layout } from '../layout'
 import { PostPreview } from '../components/post-preview'
 import Seo from '../components/seo'
 import SubscriptionForm from '../components/subscription-form'
-import { Labels } from '../components/labels'
 import { PostPreviewSmall } from '../components/post-preview-small'
+import { TopTags } from '../components/top-tags'
 
 const List = styled.ul`
 	list-style: none;
@@ -18,17 +18,14 @@ const List = styled.ul`
 const Index = ({ data }) => (
 	<Layout>
 		<Seo />
+
 		<Centralise>
-			<div>
-				<h2>Top Tags</h2>
-				<Labels
-					from={data.tagsGroup.group
-						.sort((a, b) => b.totalCount - a.totalCount)
-						.slice(0, 5)
-						.map((tag) => tag.fieldValue)}
-				/>
-			</div>
-			<h2 itemProp='name headline'>Recent Posts</h2>
+			<h1 itemProp='name headline'>
+				<span role='img' aria-label='Full hourglass'>
+					⏳
+				</span>{' '}
+				Recent Posts
+			</h1>
 			<List itemScope itemType='https://schema.org/ItemList'>
 				{data.allMarkdownRemark.edges.slice(0, 3).map(({ node }, i) => (
 					<li
@@ -43,8 +40,12 @@ const Index = ({ data }) => (
 					</li>
 				))}
 			</List>
-
-			<h2>More Posts</h2>
+			<h1>
+				<span role='img' aria-label='Empty hourglass'>
+					⌛️
+				</span>{' '}
+				More Posts
+			</h1>
 
 			<List itemScope itemType='https://schema.org/ItemList'>
 				{data.smallPreview.edges.slice(3).map(({ node }, i) => (
@@ -63,6 +64,7 @@ const Index = ({ data }) => (
 
 			<SubscriptionForm />
 		</Centralise>
+		<TopTags />
 	</Layout>
 )
 
@@ -94,11 +96,5 @@ export const query = graphql`
 				}
 			}
 		}
-		tagsGroup: allMarkdownRemark {
-			group(field: frontmatter___tags) {
-				fieldValue
-				totalCount
-			}
-		}
 	}
 `
diff --git a/src/templates/tag-template.js b/src/templates/tag-template.js
@@ -7,7 +7,6 @@ import styled from '@emotion/styled'
 import { PostPreview } from '../components/post-preview'
 import { SmallText } from '../components/small-text'
 import Seo from '../components/seo'
-import SubscriptionForm from '../components/subscription-form'
 
 const List = styled.ul`
 	list-style: none;
@@ -39,8 +38,6 @@ const TagTemplate = ({ pageContext, data }) => {
 					))}
 				</List>
 
-				<SubscriptionForm />
-
 				<SmallText>
 					This page contains all articles tagged with #{pageContext.tag}. Currently there are
 					<strong> {data.allMarkdownRemark.edges.length}</strong>.
@@ -69,5 +66,11 @@ export const query = graphql`
 				}
 			}
 		}
+		tagsGroup: allMarkdownRemark {
+			group(field: frontmatter___tags) {
+				fieldValue
+				totalCount
+			}
+		}
 	}
 `

Original file line number	Diff line number	Diff line change
@@ -19,6 +19,7 @@ const InternalLink = styled(Link)`
`19`	`19`	`
`20`	`20`
`21`	`21`	const FooterLinks = styled.ol`
	`22`	`+ list-style: none;`
`22`	`23`	`margin: 0;`
`23`	`24`	`
`24`	`25`