Lego2012

The Setup

Before you can sync, you need to add a remote that points to the upstream repository. You may have done this when you originally forked.

Tip: Syncing your fork only updates your local copy of the repository; it does not update your repository on GitHub.

$ git remote -v
## List the current remotes
origin  https://github.com/user/repo.git (fetch)
origin https://github.com/user/repo.git (push)

Lego2012

/* The user setting decides about the mode */
html {
   color-scheme: light dark;
}

body {
   font-family: system-ui;
   font-size: 1.125rem;
 line-height: 1.6;

Lego2012

---
---

<footer>
    <small>
        Copyright &copy; <span id="copyright"></span>
        All rights reserved
    </small>

Lego2012

Method to quickly define variables:

---
const foregroundColor = "hsl(20, 50%, 50%)";
const backgroundColor = "hsl(200, 50%, 50%)";
---

<style define:vars={{ foregroundColor, backgroundColor }}>
 p {

Lego2012

If visible, show:

---
const isVisible = false;
---

{
    isVisible &&
 {obj.favorites[1].toUpperCase()}

Lego2012

---
const obj = {
    name: str,
    number: num,
    favorites: ["astro", "css", "js"]
}
---
<h1>{obj.favorites[1].toUpperCase()}</h1>

Lego2012

If you want to see them in action, the first two are looked at in this video and the second two are looked at in this video.

If you’re still struggling with grid, I’d suggest checkout out this video that looks at what I think are the easiest ways to get going with it.

Lego2012

No more Container

CodePen

The solution is named lines.

.content-grid {
   display: grid;
 grid-template-columns: 1fr [content-start] 1fr [content-end] 1fr;

Lego2012

Kevin Powell: A better image reset for your CSS

img {
   font-style: italic;

   background-repeat: no-repeat;
   background-size: cover;

 shape-margin: 1rem;

Lego2012

h1 {
   max-inline-size: var(--size-header-3);
   margin-inline: auto;
}