Add stylelint

.github/workflows/main.yml

@@ -0,0 +1,20 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+      - name: Install dependencies
+        run: npm install
+      - name: Lint CSS
+        run: npm run lint:css

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+    "extends": ["stylelint-config-standard"]
+}

content.css

@@ -3,20 +3,24 @@
   padding: 0;
   box-sizing: border-box;
 }
+
 body {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   background: #f1f4fd;
 }
+
 .container {
   max-width: 1200px;
   width: 95%;
 }
+
 .slider-wrapper {
   position: relative;
 }
+
 .slider-wrapper .slide-button {
   position: absolute;
   top: 50%;
@@ -35,16 +39,20 @@ body {
   border-radius: 50%;
   transform: translateY(-50%);
 }
+
 .slider-wrapper .slide-button:hover {
   background: #404040;
 }
+
 .slider-wrapper .slide-button#prev-slide {
   left: -25px;
   display: none;
 }
+
 .slider-wrapper .slide-button#next-slide {
   right: -25px;
 }
+
 .slider-wrapper .image-list {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
@@ -56,20 +64,24 @@ body {
   overflow-x: auto;
   scrollbar-width: none;
 }
+
 .slider-wrapper .image-list::-webkit-scrollbar {
   display: none;
 }
+
 .slider-wrapper .image-list .image-item {
   width: 325px;
   height: 400px;
   object-fit: cover;
 }
+
 .container .slider-scrollbar {
   height: 24px;
   width: 100%;
   display: flex;
   align-items: center;
 }
+
 .slider-scrollbar .scrollbar-track {
   background: #ccc;
   width: 100%;
@@ -79,9 +91,11 @@ body {
   border-radius: 4px;
   position: relative;
 }
+
 .slider-scrollbar:hover .scrollbar-track {
   height: 4px;
 }
+
 .slider-scrollbar .scrollbar-thumb {
   position: absolute;
   background: #000;
@@ -92,78 +106,81 @@ body {
   cursor: grab;
   border-radius: inherit;
 }
+
 .slider-scrollbar .scrollbar-thumb:active {
   cursor: grabbing;
   height: 8px;
   top: -2px;
 }
+
 .slider-scrollbar .scrollbar-thumb::after {
   content: "";
   position: absolute;
-  left: 0;
-  right: 0;
-  top: -10px;
-  bottom: -10px;
+  inset: -10px 0;
 }
 
 .return-btn {
   position: fixed;
-  top: 20px; 
-  left: 20px; 
-  z-index: 1000; 
+  top: 20px;
+  left: 20px;
+  z-index: 1000;
 }
 
 .return-btn img {
-  width: 50px; 
-  height: auto; 
-  border: none; 
+  width: 50px;
+  height: auto;
+  border: none;
 }
 
 #scrollButton {
-  position: absolute; 
-  bottom: 20px; 
-  left: 50%; 
-  transform: translateX(-50%); 
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
   background-color: transparent;
   border: none;
   cursor: pointer;
 }
 
 #scrollButton img {
-  width: 50px; 
+  width: 50px;
 }
 
 .video-container {
   display: flex;
   justify-content: center;
-  margin-top: 150px; 
+  margin-top: 150px;
   margin-bottom: 70px;
 }
 
 video {
-  width: 80%; 
-  max-width: 100%; 
+  width: 80%;
+  max-width: 100%;
   height: auto;
 }
 
-@media only screen and (max-width: 1023px) {
+@media only screen and (width <= 1023px) {
   .slider-wrapper .slide-button {
     display: none !important;
   }
+
   .slider-wrapper .image-list {
     gap: 10px;
     margin-bottom: 15px;
     scroll-snap-type: x mandatory;
   }
+
   .slider-wrapper .image-list .image-item {
     width: 280px;
     height: 380px;
   }
+
   .slider-scrollbar .scrollbar-thumb {
     width: 20%;
   }
+
   .video-container {
-    margin-top: 150px; 
+    margin-top: 150px;
     margin-bottom: 70px;
   }
 

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "visit",
+  "version": "1.0.0",
+  "description": "[Ссылка на сайт](http://kolbaser.ru/)",
+  "main": "script.js",
+  "scripts": {
+    "lint:css": "stylelint --fix --ignore-path .gitignore *.css"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "stylelint": "^16.2.1",
+    "stylelint-config-standard": "^36.0.0"
+  }
+}

style.css

@@ -6,7 +6,7 @@
 
 body {
   margin: 0;
-  font-family: "Montserrat", sans-serif;
+  font-family: Montserrat, sans-serif;
 }
 
 img {
@@ -62,7 +62,6 @@ h3 {
 .hero__title {
   font-size: 48px;
   line-height: 1.1;
-
   margin-bottom: 20px;
 }
 
@@ -94,11 +93,9 @@ h3 {
   justify-self: center;
   overflow: hidden;
   border: 10px solid #fff;
-
   background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
-
   animation: ava-animate 5s infinite alternate;
-  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
+  box-shadow: 2px 5px 10px rgb(0 0 0 / 50%);
 }
 
 .hero__box-img {
@@ -132,14 +129,15 @@ h3 {
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
 }
+
 .slider .next {
   right: 0;
   border-radius: 3px 0 0 3px;
 }
 
 .slider .previous:hover,
 .slider .next:hover {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgb(0 0 0 / 20%);
 }
 
 /* Анимация слайдов: */
@@ -152,12 +150,13 @@ h3 {
   from {
     opacity: 0.4;
   }
+
   to {
     opacity: 1;
   }
 }
 
-@media screen and (max-width: 978px) {
+@media screen and (width <= 978px) {
   .hero {
     padding-top: 30px;
   }