Merge pull request #207 from what1s1ove/wd-191-css-nesting

wd-191: add css nesting
what1s1ove · Nov 20, 2023 · 81f759f · 81f759f
2 parents 7622354 + 51760b6
commit 81f759f
Show file tree

Hide file tree

Showing 19 changed files with 621 additions and 621 deletions.
diff --git a/eleventy.config.cjs b/eleventy.config.cjs
@@ -97,7 +97,13 @@ let init = (config) => {
 
 			return async () => {
 				let { code, map } = await lightningcss.bundleAsync({
+					drafts: {
+						customMedia: true,
+					},
 					filename: url,
+					include:
+						lightningcss.Features.MediaQueries |
+						lightningcss.Features.Nesting,
 					minify: true,
 					sourceMap: isDevelopment,
 					targets: lightningcss.browserslistToTargets(

diff --git a/source/pages/index.njk b/source/pages/index.njk
@@ -144,7 +144,7 @@ permalink: 'index.html'
 					</div>
 				</dl>
 				<h3 class="intro__myself-title">A little bit about myself</h3>
-				<p class="intro__myself-desk">
+				<p class="intro__myself-desc">
 					With semantics, a11y and love
 					<span aria-hidden="true">&lt;3</span>
 				</p>

diff --git a/source/scripts/pages/home/libs/components/easter-egg/easter-egg.js b/source/scripts/pages/home/libs/components/easter-egg/easter-egg.js
@@ -68,7 +68,7 @@ class EasterEgg {
 		this.#handleSettingButtonClick =
 			this.#clickSettingButtonHandler.bind(this)
 		this.#handleWindowResize = initDebounce(
-			this.#resizeWindowHandler,
+			this.#resizeWindowHandler.bind(this),
 			RESIZE_DELAY,
 		)
 	}

diff --git a/source/styles/blocks/exp-filter.css b/source/styles/blocks/exp-filter.css
@@ -11,6 +11,21 @@
 	justify-content: space-between;
 	min-height: 60px;
 	padding: 5px 8px;
+
+	@media (width >= 350px) {
+		padding: 5px 28px 5px 23px;
+	}
+
+	@media (width >= 620px) {
+		align-items: center;
+		padding: 10px 8px;
+	}
+
+	@media (--width-desktop) {
+		max-width: 940px;
+		margin: 0 auto;
+		padding: 17px 8px;
+	}
 }
 
 .exp-filter__skills-type {
@@ -20,17 +35,6 @@
 	border: 0;
 }
 
-.exp-filter__skill-types {
-	margin: 0;
-	padding: 0;
-	border: 0;
-}
-
-.exp-filter__skill-title {
-	padding: 0 0 0 7px;
-	color: var(--color--secondary);
-}
-
 .exp-filter__list {
 	display: flex;
 	flex-direction: column;
@@ -39,51 +43,42 @@
 	list-style: none;
 }
 
-.exp-filter__skill-types .exp-filter__list {
-	flex-flow: row wrap;
-	align-items: center;
-}
-
 .exp-filter__item {
 	padding: 0 5px 0 0;
 }
 
-.exp-filter__skill-types .exp-filter__item {
-	width: 50%;
-}
-
-@media (width >= 350px) {
-	.exp-filter__wrapper {
-		padding: 5px 28px 5px 23px;
-	}
-}
-
-@media (width >= 500px) {
-	.exp-filter__skills-type {
-		width: unset;
-	}
+.exp-filter__skill-types {
+	margin: 0;
+	padding: 0;
+	border: 0;
 
-	.exp-filter__list {
+	& .exp-filter__list {
 		flex-flow: row wrap;
 		align-items: center;
 	}
-}
 
-@media (width >= 620px) {
-	.exp-filter__wrapper {
-		align-items: center;
-		padding: 10px 8px;
+	& .exp-filter__item {
+		width: 50%;
 	}
 
-	.exp-filter__skill-types {
-		max-width: unset;
+	@media (width >= 500px) {
+		width: unset;
 	}
 
-	.exp-filter__skill-types .exp-filter__item {
-		width: unset;
+	@media (width >= 620px) {
+		max-width: unset;
+
+		& .exp-filter__item {
+			width: unset;
+		}
 	}
+}
+
+.exp-filter__skill-title {
+	padding: 0 0 0 7px;
+	color: var(--color--secondary);
 
-	.exp-filter__skill-title {
+	@media (width >= 620px) {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -96,11 +91,3 @@
 		clip-path: inset(100%);
 	}
 }
-
-@media (width >= 940px) {
-	.exp-filter__wrapper {
-		max-width: 940px;
-		margin: 0 auto;
-		padding: 17px 8px;
-	}
-}
diff --git a/source/styles/blocks/favorites.css b/source/styles/blocks/favorites.css
@@ -1,27 +1,35 @@
 .favorites {
 	padding: 30px 0 0;
 	background-color: var(--color--secondary);
+
+	@media print {
+		display: none;
+	}
 }
 
 .favorites__wrapper {
 	position: relative;
 	background-color: var(--color--primary);
-}
 
-.favorites__wrapper::before {
-	position: absolute;
-	content: "";
-	inset: 0;
-	background: repeating-conic-gradient(
-			var(--color--secondary) 0% 25%,
-			var(--color--primary) 0% 50%
-		)
-		50%/ 50px 50px;
-	filter: var(--invert-icon--primary);
+	&::before {
+		position: absolute;
+		content: "";
+		inset: 0;
+		background: repeating-conic-gradient(
+				var(--color--secondary) 0% 25%,
+				var(--color--primary) 0% 50%
+			)
+			50%/ 50px 50px;
+		filter: var(--invert-icon--primary);
+	}
 }
 
 .favorites__header {
 	margin: 0 0 35px;
+
+	@media (--width-desktop) {
+		margin: 0 0 50px;
+	}
 }
 
 .favorites__list {
@@ -32,6 +40,14 @@
 	margin: 0;
 	padding: 45px 15px;
 	list-style: none;
+
+	@media (width >= 550px) {
+		padding: 50px 15px;
+	}
+
+	@media (width >= 810px) {
+		padding: 55px 15px;
+	}
 }
 
 .favorites__item {
@@ -77,27 +93,3 @@
 .favorites__item-text--js {
 	background-color: #ffe100;
 }
-
-@media print {
-	.favorites {
-		display: none;
-	}
-}
-
-@media (width >= 550px) {
-	.favorites__list {
-		padding: 50px 15px;
-	}
-}
-
-@media (width >= 810px) {
-	.favorites__list {
-		padding: 55px 15px;
-	}
-}
-
-@media (width >= 940px) {
-	.favorites__header {
-		margin: 0 0 50px;
-	}
-}
diff --git a/source/styles/blocks/footer.css b/source/styles/blocks/footer.css
@@ -4,6 +4,10 @@
 	gap: 15px 0;
 	padding: 30px 15px;
 	background-color: var(--color--secondary);
+
+	@media print {
+		display: none;
+	}
 }
 
 .footer__social-list {
@@ -14,17 +18,17 @@
 	position: relative;
 	width: 210px;
 	height: 47px;
-}
 
-.footer__routine-wrapper::before {
-	position: absolute;
-	top: 4px;
-	right: 30px;
-	z-index: var(--z-index--level-one);
-	content: "";
-	width: 42px;
-	height: 32px;
-	background-image: url("../images/routine-rose.bg.svg");
+	&::before {
+		position: absolute;
+		top: 4px;
+		right: 30px;
+		z-index: var(--z-index--level-one);
+		content: "";
+		width: 42px;
+		height: 32px;
+		background-image: url("../images/routine-rose.bg.svg");
+	}
 }
 
 .footer__routine {
@@ -34,9 +38,3 @@
 	background-image: url("../images/routine.bg.svg");
 	filter: var(--invert-icon--primary);
 }
-
-@media print {
-	.footer {
-		display: none;
-	}
-}
diff --git a/source/styles/blocks/form-control.css b/source/styles/blocks/form-control.css
@@ -25,23 +25,25 @@
 	background-color: var(--color--secondary);
 	border: 0;
 	border-radius: 0;
-}
 
-.form-control__input--checkbox::before {
-	position: absolute;
-	top: 10px;
-	left: 7px;
-	content: "";
-	width: 14px;
-	height: 6px;
-	border: 2px solid var(--color--primary);
-	border-top: 0;
-	border-right: 0;
-	transform: scale(0) rotate(-45deg);
-	transform-origin: bottom left;
-	transition: transform 0.1s ease-in 25ms;
-}
+	&::before {
+		position: absolute;
+		top: 10px;
+		left: 7px;
+		content: "";
+		width: 14px;
+		height: 6px;
+		border: 2px solid var(--color--primary);
+		border-top: 0;
+		border-right: 0;
+		transform: scale(0) rotate(-45deg);
+		transform-origin: bottom left;
+		transition: transform 0.1s ease-in 25ms;
+	}
 
-.form-control__input--checkbox:checked::before {
-	transform: scale(1) rotate(-45deg);
+	&:checked {
+		&::before {
+			transform: scale(1) rotate(-45deg);
+		}
+	}
 }