Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-04 01:05:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #417 from TwinProduction/fix-anchor-offset

Browse Source 
Offset anchor links while taking the fixed header into consideration
This commit is contained in:
Jean-Philippe Sirois
2021-09-02 06:48:13 -04:00
committed by GitHub
parent cc12aeb58f 7996be2587
commit 140970a6ac
2 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+4 -9
View File
@@ -1,12 +1,7 @@
<a href="https://discord.gg/programming"> [![](https://cdn.discordapp.com/banners/244230771232079873/776f2cfdddf58762e8c45382b02cf969.jpg?size=1024)](https://discord.gg/programming)
<img src="https://img.shields.io/discord/244230771232079873?color=%23dc1529&label=The%20Programmers%20Hangout" />
</a>
<a href="https://discord.gg/programming">
<img src="https://cdn.discordapp.com/banners/244230771232079873/776f2cfdddf58762e8c45382b02cf969.jpg?size=1024" />
</a>
# TPH Website # 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. 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 1. Clone the repo
2. `npm install` 2. `npm install`
3. `npm run develop` 3. `npm run develop`
4. Nagivate to http://localhost:8000 4. Navigate to http://localhost:8000
5. :tada: 5. :tada:
### Resources ### 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 An example frontmatter might look like this
```md ```markdown
--- ---
authors: authors:
- "Xetera#0001" - "Xetera#0001"
src/components/Container/styles.tsx
+10 -1
View File
@@ -4,10 +4,19 @@ export const ContainerWrapper = styled.div`
--padding: 64px; --padding: 64px;
width: 650px; width: 650px;
max-width: calc(100% - var(--padding) * 2); max-width: calc(100% - var(--padding) * 2);
padding: 0px var(--padding); padding: 0 var(--padding);
margin: 0 auto; margin: 0 auto;
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
--padding: 32px; --padding: 32px;
} }
// Offsets anchor links while taking the fixed header into consideration
[id]::before {
content: '';
display: block;
height: 80px;
margin-top: -80px;
visibility: hidden;
}
` `