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

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

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

No more Container

CodePen

The solution is named lines.

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

Lego2012

Modern CSS can make a lot of impossible things possible, but it also simplifies some things as well.

One use case that I have on pretty much every project these days is setting up a container/wrapper width with min() and margin-inline.

.old-container {
    width: 100%;
    max-width: 70rem;
    padding: 2rem;
 margin: 0 auto;

Lego2012

{
  "extends": "astro/tsconfigs/base",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@data/*": ["src/data/*"],
      "@images/*": ["src/images/*"],
      "@layouts/*": ["src/layouts/*"],

Lego2012

/* 
*   Kevin Powell
*   https://youtu.be/cCAtD_BAHNw 
*/

*, *::before, *::after {
  box-sizing: border-box;
}

* {

Lego2012

/* Antiflesh */
#FAFAFA

/* OFF White */
#FBFBFB

/* Alice Blue */
#F0F8FF

/* Ivory */