search

Annevd / choices-choices-the-tech-stack

Kies een andere tech-stack voor het ontwerpen en bouwen van een website voor een opdrachtgever
https://bieb-in-bloei-astro.netlify.app/stekjes
0 stars 0 forks source link

Styling met Astro #9

Closed Annevd closed 5 days ago

Annevd commented 5 days ago

Styling met Astro

Net zoals in Sveltekit kan je in Astro ook gebruik maken van het <style> element in je componenten en pagina's. Ook kan je in de global.css in de styles folder je globale styling toevoegen.

In de BaseLayout.astro staat deze global.css geïmporteerd, zodat je op alle pagina's die die layout gebruiken de global css kunt aanpassen:

---
import '../styles/global.css'; // <------
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/BiebInBloei-icon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="generator" content={Astro.generator} />
    <title>Bieb in Bloei</title>
  </head>
  <body>
    <Menu />
    <slot />
  </body>
</html>

Voorbeeld scoped styling (binnen een page of component):

---
const { heroInfo } = Astro.props;
---
<section>
    <p>{heroInfo.description}</p>
</section>

<style>

    section{
        display: flex;
        justify-content: center;
        position: relative;
        gap: 1.5em;
        margin: -2em auto;
        padding: .5em;
        width: 80vw;
        background-color: var(--main-color-beige);
        font-weight: 500;
        font-size: 1em;
        border-radius: var(--border-card);

    }
    section::before{
        content: url('/assets/Circle-Orange.svg');
        display: inline-flex;

    }

    @media (min-width: 48rem){
        section{
            margin:-2em auto;
            align-items: center;
            width: 60vw;
            padding: 1em 2em;
        } 
    }
</style>

Bronnen

Commits