added prettier and stylelint

stepancar-web-programming · Mar 14, 2024 · 73a7522 · 73a7522
1 parent e9cdd83
commit 73a7522
Show file tree

Hide file tree

Showing 9 changed files with 1,290 additions and 48 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,12 +1,11 @@
 {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": "google",
-    "parserOptions": {
-        "ecmaVersion": "latest"
-    },
-    "rules": {
-    }
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": "google",
+  "parserOptions": {
+    "ecmaVersion": "latest"
+  },
+  "rules": {}
 }
diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
@@ -4,21 +4,25 @@ on:
   push:
     branches:
       - dev
+  pull_request:
+    branches:
+      - main
 
 jobs:
-  eslint:
+  lint:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
         uses: actions/checkout@v2
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: 20.11.0
-
       - name: Install dependencies
         run: npm install
 
-      - name: Run ESLint
-        run: npm run lint
+      - name: Lint JS
+        run: npm run lint:js
+
+      - name: Lint CSS
+        run: npm run lint:css
+
+      - name: Lint HTML
+        run: npm run lint:html
diff --git a/.prettierrc.yaml b/.prettierrc.yaml
@@ -0,0 +1,8 @@
+printWidth: 80
+tabWidth: 2
+useTabs: false
+semi: true
+singleQuote: false
+trailingComma: none
+bracketSpacing: true
+arrowParens: avoid
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1 @@
+{ "extends": ["stylelint-config-standard"] }
diff --git a/about.html b/about.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/css/style.css b/css/style.css
@@ -8,7 +8,7 @@
 }
 
 body {
-  font-family: "Arial", sans-serif;
+  font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -24,6 +24,7 @@ header {
   text-align: center;
   padding: 0.5em 0;
 }
+
 main {
   margin-left: 10px;
   padding: 1em;
@@ -39,11 +40,13 @@ section {
   padding: 1em;
   margin-bottom: 1em;
   border-radius: 8px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 10px rgb(0 0 0 / 10%);
 }
+
 section:hover {
   transform: scale(1.02);
 }
+
 footer {
   text-align: center;
 }
@@ -126,9 +129,10 @@ li {
   background-color: #fff;
   padding: 1em;
   border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
   transition: transform 0.3s ease-in-out;
 }
+
 li:hover {
   transform: scale(1.02);
 }
@@ -144,26 +148,27 @@ body.dark-mode li {
   background-color: #fff;
   padding: 0.5em 1em;
   border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
   transition: transform 0.3s ease-in-out, background-color 0.3s, color 0.3s;
 }
 
+.social-media-link:hover {
+  transform: scale(1.05);
+  background-color: #eee;
+}
+
 body.dark-mode .social-media-link {
   color: #fff;
   background-color: #333;
 }
 
-.social-media-link:hover {
-  transform: scale(1.05);
-  background-color: #eee;
-}
 
 #toggle-dark-mode-nav {
   margin-top: 90px;
   display: none;
 }
 
-@media screen and (min-width: 600px) {
+@media screen and (width >= 600px) {
   main {
     margin-left: 10px;
     margin-right: 10px;
@@ -175,34 +180,37 @@ body.dark-mode .social-media-link {
   }
 }
 
-@media screen and (min-width: 1100px) {
+@media screen and (width >= 1100px) {
   /* Adjust styles for screens with a minimum width of 800px */
   main {
     margin-left: 2%;
     margin-right: 2%;
     justify-content: space-between;
   }
+
   section {
     flex-basis: 38%; /* Three columns on even larger screens */
   }
 }
 
-@media screen and (min-width: 1300px) {
+@media screen and (width >= 1300px) {
   /* Adjust styles for screens with a minimum width of 800px */
   main {
     margin-left: 10%;
     margin-right: 10%;
     justify-content: space-between;
   }
+
   section {
     flex-basis: 38%; /* Three columns on even larger screens */
   }
 }
 
-@media screen and (max-width: 500px) {
+@media screen and (width <= 500px) {
   #toggle-dark-mode {
     display: none;
   }
+
   #toggle-dark-mode-nav {
     display: flex;
   }

diff --git a/index.html b/index.html
@@ -1,5 +1,4 @@
-<!-- index.html -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -9,15 +8,14 @@
   </head>
   <body>
     <header>
-      <button id="toggle-menu">&#9776;</button>      
+      <button id="toggle-menu">&#9776;</button>
       <button id="toggle-dark-mode">🌙</button>
       <h1>Cristiano Ronaldo</h1>
       <nav>
         <a href="/index.html" class="nav-link">Home</a>
         <a href="about.html" class="nav-link">About</a>
         <button id="toggle-dark-mode-nav">🌙</button>
       </nav>
-
     </header>
     <main class="page-wrapper">
       <section>