diff --git a/README.md b/README.md index 8749a34..0f1aa92 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,7 @@ - - - - - - - +[![](https://cdn.discordapp.com/banners/244230771232079873/776f2cfdddf58762e8c45382b02cf969.jpg?size=1024)](https://discord.gg/programming) # TPH Website +[![](https://img.shields.io/discord/244230771232079873?color=%23dc1529&label=The%20Programmers%20Hangout)](https://discord.gg/programming) The official website for The Programmer's Hangout ([join us!](https://discord.gg/programming)), a programming community on Discord. See the website here: https://theprogrammershangout.com. @@ -22,7 +17,7 @@ allowing for static asset generation along with improved SEO. 1. Clone the repo 2. `npm install` 3. `npm run develop` -4. Nagivate to http://localhost:8000 +4. Navigate to http://localhost:8000 5. :tada: ### Resources @@ -48,7 +43,7 @@ Frontmatter is the optional metadata attached to every markdown file, like the l An example frontmatter might look like this -```md +```markdown --- authors: - "Xetera#0001" diff --git a/src/components/Container/styles.tsx b/src/components/Container/styles.tsx index c402798..66a1b62 100644 --- a/src/components/Container/styles.tsx +++ b/src/components/Container/styles.tsx @@ -4,10 +4,19 @@ export const ContainerWrapper = styled.div` --padding: 64px; width: 650px; max-width: calc(100% - var(--padding) * 2); - padding: 0px var(--padding); + padding: 0 var(--padding); margin: 0 auto; @media screen and (max-width: 767px) { --padding: 32px; } + + // Offsets anchor links while taking the fixed header into consideration + [id]::before { + content: ''; + display: block; + height: 80px; + margin-top: -80px; + visibility: hidden; + } `