Skip to content

Commit

Permalink
refactor to use cascade layers
Browse files Browse the repository at this point in the history
  • Loading branch information
@argyleink
argyleink committed Oct 30, 2024
1 parent 0ae74e0 commit 2a0d127
Show file tree
Hide file tree
Showing 14 changed files with 661 additions and 621 deletions.
52 changes: 27 additions & 25 deletions src/components/biome.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,36 +23,38 @@ const { title, description, features } = Astro.props;
</section>

<style>
section {
display: grid;
gap: var(--size-3);
grid-column: main-features;

> header {
margin-block-end: var(--size-8);
padding-block-end: var(--size-10);
background: var(--surface-1);
border-image: conic-gradient(var(--surface-document) 0 0) fill 0
//0 100vw;;

> h2 {
font-family: "Jersey10", sans-serif;
font-weight: normal;
font-size: var(--font-size-8);
@layer components.biome {
section {
display: grid;
gap: var(--size-3);
grid-column: main-features;

> header {
margin-block-end: var(--size-8);
padding-block-end: var(--size-10);
background: var(--surface-1);
border-image: conic-gradient(var(--surface-document) 0 0) fill 0
//0 100vw;;

> h2 {
font-family: "Jersey10", sans-serif;
font-weight: normal;
font-size: var(--font-size-8);
}
}
}

> .features-list {
grid-column: 1;
> .features-list {
grid-column: 1;

&:not(:first-of-type) {
margin-block-start: var(--size-11);
&:not(:first-of-type) {
margin-block-start: var(--size-11);
}
}
}
}

.features-list {
display: grid;
gap: var(--size-10);
.features-list {
display: grid;
gap: var(--size-10);
}
}
</style>
73 changes: 37 additions & 36 deletions src/components/feature.filmstrip.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,9 @@ import shuffle from "./../util/shuffle";
const { biomes } = Astro.props;
// Flatten all Biome features to one flat array
const features = biomes.reduce(
(features, biome) => [...features, ...biome.features],
[]
).map((feature) => feature.title);
const features = biomes
.reduce((features, biome) => [...features, ...biome.features], [])
.map((feature) => feature.title);
---

<div class="feature-grid">
Expand Down Expand Up @@ -38,46 +37,48 @@ const features = biomes.reduce(
}
}

.feature-grid {
display: grid;
place-content: center;
gap: var(--size-3);
padding-block: var(--size-10) var(--size-13);
max-inline-size: 100vw;
overflow: clip;

> .row {
@layer components.feature-filmstrip {
.feature-grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max(10vw, 15ch);
place-content: center;
gap: var(--size-3);
padding-block: var(--size-10) var(--size-13);
max-inline-size: 100vw;
overflow: clip;

> .row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max(10vw, 15ch);
gap: var(--size-3);

@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
animation: pan-x linear both;
animation-timeline: view(block);
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
animation: pan-x linear both;
animation-timeline: view(block);
}
}
}

&:first-of-type {
animation-direction: reverse;
}
&:first-of-type {
animation-direction: reverse;
}

> .card {
aspect-ratio: 3/4;
padding: var(--size-3);
background: var(--surface-3);
border-radius: var(--radius-3);
box-shadow: var(--shadow-1);
> .card {
aspect-ratio: 3/4;
padding: var(--size-3);
background: var(--surface-3);
border-radius: var(--radius-3);
box-shadow: var(--shadow-1);

display: grid;
place-content: center;
place-items: center;
text-align: center;
overflow: clip;
display: grid;
place-content: center;
place-items: center;
text-align: center;
overflow: clip;

font-size: var(--font-size-4);
font-weight: 100;
font-size: var(--font-size-4);
font-weight: 100;
}
}
}
}
Expand Down
17 changes: 10 additions & 7 deletions src/components/footer.astro
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
---
---

<footer id="outro">
<h3>It's a good time to be a front-end dev.</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</footer>

<style>
footer {
block-size: 75vh;
display: grid;
place-content: center;
text-align: center;
@layer components.footer {
footer {
block-size: 75vh;
display: grid;
place-content: center;
text-align: center;
}
}
</style>
</style>
54 changes: 28 additions & 26 deletions src/components/header.primary.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,38 +20,40 @@ import ThemeSwitch from "./theme.switch.astro";
</header>

<style>
header {
display: flex;
place-items: center;
justify-content: space-between;
padding-block: var(--size-3);
padding-inline: var(--size-5);
background: var(--surface-document);

@media (width <= 960px) {
position: sticky;
top: 0;
z-index: 1;
}

> .page-controls {
@layer components.primary-header {
header {
display: flex;
place-items: center;
gap: var(--size-3);
}
}
justify-content: space-between;
padding-block: var(--size-3);
padding-inline: var(--size-5);
background: var(--surface-document);

.hamburger {
color: var(--text-2);
border-radius: var(--radius-round);
aspect-ratio: var(--ratio-square);
@media (width <= 960px) {
position: sticky;
top: 0;
z-index: 1;
}

&:is(:hover, :focus-visible) {
color: var(--text-1);
> .page-controls {
display: flex;
place-items: center;
gap: var(--size-3);
}
}

@media (width >= 960px) {
display: none;
.hamburger {
color: var(--text-2);
border-radius: var(--radius-round);
aspect-ratio: var(--ratio-square);

&:is(:hover, :focus-visible) {
color: var(--text-1);
}

@media (width >= 960px) {
display: none;
}
}
}
</style>
94 changes: 48 additions & 46 deletions src/components/hero.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,64 +16,66 @@ import NavBento from "./nav.bento.astro";
</section>

<style>
.hero {
margin-block: var(--size-12);
max-inline-size: 1024px;
margin-inline: auto;
padding-inline: var(--size-5);
display: grid;
gap: var(--size-8);
@layer components.hero {
.hero {
margin-block: var(--size-12);
max-inline-size: 1024px;
margin-inline: auto;
padding-inline: var(--size-5);
display: grid;
gap: var(--size-8);

> h1 {
font-family: "Jersey10", sans-serif;
font-size: var(--font-size-6);
font-weight: normal;
text-align: center;
max-inline-size: 100%;
> h1 {
font-family: "Jersey10", sans-serif;
font-size: var(--font-size-6);
font-weight: normal;
text-align: center;
max-inline-size: 100%;

> span {
border-radius: var(--radius-2);
margin-inline-start: var(--size-2);
padding-inline: var(--size-2);
padding-block: var(--size-1);
box-shadow: 0 0 0 var(--border-size-2);
> span {
border-radius: var(--radius-2);
margin-inline-start: var(--size-2);
padding-inline: var(--size-2);
padding-block: var(--size-1);
box-shadow: 0 0 0 var(--border-size-2);
}
}
}

p {
text-align: center;
max-inline-size: max-content;
margin-inline: auto;
}
p {
text-align: center;
max-inline-size: max-content;
margin-inline: auto;
}

.hero-title {
font-family: "Jersey10", sans-serif;
font-weight: normal;
margin-block-start: var(--size-12);
font-size: var(--font-size-8);
.hero-title {
font-family: "Jersey10", sans-serif;
font-weight: normal;
margin-block-start: var(--size-12);
font-size: var(--font-size-8);
}
}
}

.video {
aspect-ratio: 16/9;
background: var(--surface-3);
border-radius: var(--radius-3);
.video {
aspect-ratio: 16/9;
background: var(--surface-3);
border-radius: var(--radius-3);

display: grid;
place-content: center;
display: grid;
place-content: center;

@media (prefers-reduced-motion: no-preference) {
transition: clip-path 3s var(--ease-2);
clip-path: inset(0 0 0 0 round 30px);
@media (prefers-reduced-motion: no-preference) {
transition: clip-path 3s var(--ease-2);
clip-path: inset(0 0 0 0 round 30px);

@starting-style {
clip-path: inset(100px 100px 100px 100px round 30px);
@starting-style {
clip-path: inset(100px 100px 100px 100px round 30px);
}
}
}

> svg {
block-size: 5rem;
inline-size: 5rem;
> svg {
block-size: 5rem;
inline-size: 5rem;
}
}
}
</style>
Loading

0 comments on commit 2a0d127

Please sign in to comment.