chore: project refresh (#53)

Author: kptdobe

README.md

@@ -1,6 +1,6 @@
 # Block Collection
 
-This project contains code that is featured in the [AEM Block Collection](https://www.aem.live/developer/block-collection#block-collection-1) documentation.
+This project contains code that is featured in the [AEM Block Collection](https://www.aem.live/developer/block-collection#bslock-collection-1) documentation.
 
 ## Environments
 - Preview: https://main--aem-block-collection--adobe.hlx.page/
@@ -12,10 +12,16 @@ This project contains code that is featured in the [AEM Block Collection](https:
 npm i
 ```
 
+## Linting
+
+```sh
+npm run lint
+```
+
 ## Local development
 
 1. Create a new repository based on the `aem-block-collection` template and add a mountpoint in the `fstab.yaml`
-1. Add the [helix-bot](https://github.com/apps/helix-bot) to the repository
-1. Install the [Helix CLI](https://github.com/adobe/helix-cli): `npm install -g @adobe/helix-cli`
-1. Start Helix Pages Proxy: `hlx up` (opens your browser at `http://localhost:3000`)
+1. Add the [AEM Code Sync GitHub App](https://github.com/apps/aem-code-sync) to the repository
+1. Install the [AEM CLI](https://github.com/adobe/helix-cli): `npm install -g @adobe/aem-cli`
+1. Start AEM Proxy: `aem up` (opens your browser at `http://localhost:3000`)
 1. Open the `{repo}` directory in your favorite IDE and start coding :)

blocks/carousel/carousel.css

@@ -13,8 +13,7 @@
   display: flex;
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
-  overflow-x: scroll;
-  overflow-y: clip;
+  overflow: scroll clip;
 }
 
 .carousel .carousel-slides::-webkit-scrollbar {
@@ -143,7 +142,7 @@
   left: calc(50% - 3px);
 }
 
-@media (min-width: 600px) {
+@media (width >= 600px) {
   .carousel .carousel-navigation-buttons {
     left: 1rem;
     right: 1rem;

blocks/form/form.css

@@ -13,7 +13,7 @@
   padding: 0;
 }
 
-@media (min-width: 900px) {
+@media (width >= 900px) {
   .form fieldset {
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
@@ -104,10 +104,7 @@
 .form .toggle-wrapper .slider {
   position: absolute;
   cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   background-color: var(--dark-color);
   transition: 0.4s;
   border-radius: 30px;

blocks/header/header.css

@@ -329,7 +329,7 @@ header .breadcrumbs ol li:last-of-type {
   opacity: 1;
 }
 
-@media screen and (min-width: 900px) {
+@media screen and (width >= 900px) {
   header .breadcrumbs {
     display: block;
   }