@font-face {
font-family: "DM Sans";
font-weight: 400 500;
src: url("../assets/fonts/DMSans-VariableFont_opsz,wght.ttf");
}
@font-face {
font-family: "DM Sans";
font-style: italic;
font-weight: 400 500;
src: url("../assets/fonts/DMSans-Italic-VariableFont_opsz,wght.ttf");
}
:root {
--primary-subdued: hsl(254, 88%, 90%);
--primary-base: hsl(256, 67%, 59%);
--accent-subdued: hsl(31, 66%, 93%);
--accent-base: hsl(39, 100%, 71%);
--white: hsl(0, 0%, 100%);
--off-white: hsl(0, 0%, 96%);
--black: hsl(0, 0%, 7%);
--fs-reg: 1.25rem;
--fs-md: 2.25rem;
--fs-lg: 3rem;
--fs-xl: 4rem;
}
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
}
img {
max-width: 100%;
display: block;
}
}
@layer base {
html {
font-family: "DM Sans", sans-serif;
line-height: 1.3;
}
body {
margin: 32px;
color: var(--black);
font-size: var(--fs-reg);
background: var(--off-white);
}
h1,
h2 {
color: var(--heading-foreground, inherit);
font-size: var(--heading-font-size, var(--fs-md));
line-height: 1.1;
text-wrap: balance;
span {
display: var(--heading-span-display, inline);
color: var(--heading-span-foreground, var(--black));
font-size: var(--heading-span-font-size, inherit);
font-style: var(--heading-span-style, normal);
}
}
}
@layer layout {
.bento-grid {
display: grid;
gap: 24px;
max-inline-size: 1200px;
margin-inline: auto;
grid-template-areas:
"one"
"two"
"three"
"four"
"five"
"six"
"seven"
"eight";
@media (width > 660px) {
grid-template-areas:
"one one"
"two three"
"four six"
"four seven"
"five eight";
}
@media (width > 960px) {
grid-template-areas:
"seven one one four"
"seven two three four"
"eight two three four"
"eight six five five";
}
}
.bento-grid > * {
color: var(--bento-card-foreground, var(--black));
background-color: var(--bento-card-surface, var(--white));
padding: var(--bento-card-padding, 32px);
border-radius: var(--bento-card-border-radius, 21px);
overflow: clip;
display: grid;
gap: var(--bento-card-gap, 32px);
align-content: var(--bento-card-vertical-alignment, start);
align-items: var(--bento-card-vertical-alignment, start);
justify-items: var(--bento-card-horizontal-alignment, start);
text-align: var(--bento-card-horizontal-alignment, start);
}
.bento-grid img {
max-width: var(--bento-card-image-width, 100%);
width: var(--bento-card-image-width, 100%);
order: var(--bento-card-image-order);
}
.bento-grid > :nth-child(1) {
--heading-font-size: var(--fs-xl);
--heading-span-foreground: var(--accent-base);
--bento-card-foreground: var(--white);
--bento-card-surface: var(--primary-base);
--bento-card-padding: 48px;
--bento-card-horizontal-alignment: center;
--bento-card-image-width: 70%;
--bento-card-gap: 16px;
@media (width > 960px) {
--bento-card-image-width: 45%;
}
grid-area: one;
}
.bento-grid > :nth-child(2) {
--bento-card-image-order: -1;
grid-area: two;
@media (width > 960px) {
--bento-card-image-width: 150%;
}
/* fixing shadow issue in asset */
> img {
filter: drop-shadow(0 0 1rem hsl(0 0% 0% / 0.25));
border-radius: 100vw;
/* box-shadow: 0 0 1rem hsl(0 0% 0%); */
}
}
.bento-grid > :nth-child(3) {
--bento-card-surface: var(--accent-base);
grid-area: three;
> img {
--bento-card-image-width: 75%;
margin-bottom: -55px;
@media (width > 960px) {
--bento-card-image-width: 100%;
margin-bottom: -125px;
}
}
}
.bento-grid > :nth-child(4) {
--bento-card-horizontal-alignment: center;
--bento-card-surface: var(--primary-subdued);
grid-area: four;
@media (width > 960px) {
--bento-card-image-width: 180%;
--bento-card-horizontal-alignment: start;
--bento-card-vertical-alignment: center;
}
}
.bento-grid > :nth-child(5) {
--bento-card-horizontal-alignment: center;
--bento-card-foreground: var(--white);
--bento-card-surface: var(--primary-base);
--bento-card-image-width: 75%;
--bento-card-image-order: -1;
grid-area: five;
@media (width > 960px) {
--bento-card-gap: 16px;
--bento-card-image-width: 100%;
--bento-card-vertical-alignment: center;
--bento-card-horizontal-alignment: start;
grid-template-columns: 1fr 1fr;
}
}
.bento-grid > :nth-child(6) {
--heading-font-size: var(--fs-xl);
--heading-span-display: block;
--heading-span-font-size: var(--fs-reg);
--bento-card-image-width: 60%;
grid-area: six;
@media (width > 960px) {
--bento-card-image-width: 80%;
}
}
.bento-grid > :nth-child(7) {
--heading-span-foreground: var(--primary-base);
--heading-span-style: italic;
--bento-card-surface: var(--accent-subdued);
--bento-card-image-width: 60%;
grid-area: seven;
@media (width > 960px) {
--bento-card-image-width: 100%;
--bento-card-vertical-alignment: center;
}
}
.bento-grid > :nth-child(8) {
--bento-card-surface: var(--accent-base);
--bento-card-image-width: 60%;
grid-area: eight;
@media (width > 960px) {
--bento-card-image-width: 105%;
--bento-card-vertical-alignment: center;
}
}
}
@layer utilities {
.visually-first {
order: -1;
}
}
h2:not(:first-child) {
color: red;
}
h2:not(:last-child) {
margin-inline-end: 2px solid red;
}
.nav_link:hover:not(.selected){
background-color: blue;
}
ul:has(a:hover) a:not(:hover) {
background-color: red;
}
img:not([alt]),img[alt=""]{
outline: 2px solid red;
}
a:not([href]),a:not([class]){
outline: 2px solid red;
}
@media (hover: hover) {
.active {
background-color: blue;
}
}
@media (hover: none) {
.active {
background-color: yellow;
}
}