diff options
Diffstat (limited to 'src/pages/projects.astro')
| -rw-r--r-- | src/pages/projects.astro | 49 |
1 files changed, 31 insertions, 18 deletions
diff --git a/src/pages/projects.astro b/src/pages/projects.astro index b6da87a..70eeb08 100644 --- a/src/pages/projects.astro +++ b/src/pages/projects.astro @@ -3,31 +3,38 @@ import Page from "../layouts/Page.astro"; import projects from "../components/projects.json"; --- <Page title="Projects" description="Things that I have been working on in the past, and present"> - { - projects.map((project) => { - return ( - <div class="cards"> - <h1>{project.name}</h1> - <p>{project.description}</p> - {project.links.map((link) => { - return ( - <a href={link.url}>{link.name}</a> - ) - })} - </div> - ) - }) - } + <main> + { + projects.map((project) => { + return ( + <div class="cards"> + <h1>{project.name}</h1> + <p>{project.description}</p> + {project.links.map((link) => { + return ( + <a href={link.url}>{link.name}</a> + ) + })} + </div> + ) + }) + } + </main> </Page> <style> + main { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + .cards { display: flex; flex-direction: column; - gap: 1em; background-color: #3B513B; padding: 1.2em; border-radius: 20px; - margin: 1em; + gap: 0.5em; + margin: 0.5em; } .cards h1 { @@ -43,7 +50,13 @@ import projects from "../components/projects.json"; .cards a { text-align: right; display: inline-block; + } + /* Mobile view */ + @media (max-width: 992px) { + main { + grid-template-columns: 1fr; + } } -</style>
\ No newline at end of file +</style> |