updated footer style

updated project view
updated buttons
2022-07-24 15:52:57 +02:00 · 2022-07-24 15:48:27 +02:00 · 2022-07-24 15:02:20 +02:00 · 2022-07-24 15:01:57 +02:00 · 2022-07-24 11:11:32 +02:00 · 2022-07-14 00:33:28 +02:00
17 changed files with 711 additions and 722 deletions
--- a/css/index.css
+++ b/css/index.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --color-kamilcraft-green: 162 207 0;
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,10 +26,13 @@
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
+        "autoprefixer": "^10.4.7",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.0.3",
+        "postcss": "^8.4.14",
        "sass": "^1.53.0",
-        "sass-loader": "^13.0.2"
+        "sass-loader": "^13.0.2",
+        "tailwindcss": "^3.1.6"
      }
    },
    "node_modules/@achrinza/node-ipc": {
@@ -3227,6 +3230,38 @@
        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
      }
    },
+    "node_modules/acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      }
+    },
+    "node_modules/acorn-node/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-node/node_modules/acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/acorn-walk": {
      "version": "8.2.0",
      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
@@ -3399,6 +3434,12 @@
        }
      ]
    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
    "node_modules/argparse": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -3830,6 +3871,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/caniuse-api": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -4826,6 +4876,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
+      "dev": true
+    },
    "node_modules/depd": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -4851,6 +4907,29 @@
      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
      "dev": true
    },
+    "node_modules/detective": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
+      "dev": true,
+      "dependencies": {
+        "acorn-node": "^1.8.2",
+        "defined": "^1.0.0",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "detective": "bin/detective.js"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
    "node_modules/dir-glob": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -4863,6 +4942,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
    "node_modules/dns-equal": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -7888,6 +7973,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/object-inspect": {
      "version": "1.12.2",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
@@ -8314,6 +8408,15 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/pkg-dir": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -8467,6 +8570,71 @@
        "postcss": "^8.2.15"
      }
    },
+    "node_modules/postcss-import": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "dev": true,
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/postcss-loader": {
      "version": "6.2.1",
      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
@@ -8661,6 +8829,25 @@
        "postcss": "^8.1.0"
      }
    },
+    "node_modules/postcss-nested": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.6"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
    "node_modules/postcss-normalize-charset": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
@@ -9041,6 +9228,18 @@
        }
      ]
    },
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -9083,6 +9282,15 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
    "node_modules/read-pkg": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -10130,6 +10338,52 @@
      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
      "dev": true
    },
+    "node_modules/tailwindcss": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.6.tgz",
+      "integrity": "sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==",
+      "dev": true,
+      "dependencies": {
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "color-name": "^1.1.4",
+        "detective": "^5.2.1",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.11",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "lilconfig": "^2.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.14",
+        "postcss-import": "^14.1.0",
+        "postcss-js": "^4.0.0",
+        "postcss-load-config": "^3.1.4",
+        "postcss-nested": "5.0.6",
+        "postcss-selector-parser": "^6.0.10",
+        "postcss-value-parser": "^4.2.0",
+        "quick-lru": "^5.1.1",
+        "resolve": "^1.22.1"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
    "node_modules/tapable": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -11402,6 +11656,15 @@
        }
      }
    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
    "node_modules/y18n": {
      "version": "5.0.8",
      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -12812,8 +13075,7 @@
    "@fortawesome/vue-fontawesome": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.1.tgz",
-      "integrity": "sha512-CdXZJoCS+aEPec26ZP7hWWU3SaJlQPZSCGdgpQ2qGl2HUmtUUNrI3zC4XWdn1JUmh3t5OuDeRG1qB4eGRNSD4A==",
-      "requires": {}
+      "integrity": "sha512-CdXZJoCS+aEPec26ZP7hWWU3SaJlQPZSCGdgpQ2qGl2HUmtUUNrI3zC4XWdn1JUmh3t5OuDeRG1qB4eGRNSD4A=="
    },
    "@hapi/hoek": {
      "version": "9.3.0",
@@ -13475,8 +13737,7 @@
      "version": "5.0.8",
      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
      "integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "@vue/cli-service": {
      "version": "5.0.8",
@@ -13987,15 +14248,38 @@
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "acorn-jsx": {
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true
+    },
+    "acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
      "dev": true,
-      "requires": {}
+      "requires": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        },
+        "acorn-walk": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+          "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+          "dev": true
+        }
+      }
    },
    "acorn-walk": {
      "version": "8.2.0",
@@ -14054,8 +14338,7 @@
      "version": "3.5.2",
      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "ansi-colors": {
      "version": "4.1.3",
@@ -14112,6 +14395,12 @@
      "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
      "dev": true
    },
+    "arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
    "argparse": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -14425,6 +14714,12 @@
      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
      "dev": true
    },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true
+    },
    "caniuse-api": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -14856,8 +15151,7 @@
      "version": "6.3.0",
      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz",
      "integrity": "sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "css-loader": {
      "version": "6.7.1",
@@ -15028,8 +15322,7 @@
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "csso": {
      "version": "4.2.0",
@@ -15139,6 +15432,12 @@
        "object-keys": "^1.1.1"
      }
    },
+    "defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
+      "dev": true
+    },
    "depd": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -15157,6 +15456,23 @@
      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
      "dev": true
    },
+    "detective": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
+      "dev": true,
+      "requires": {
+        "acorn-node": "^1.8.2",
+        "defined": "^1.0.0",
+        "minimist": "^1.2.6"
+      }
+    },
+    "didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
    "dir-glob": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -15166,6 +15482,12 @@
        "path-type": "^4.0.0"
      }
    },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
    "dns-equal": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -16455,8 +16777,7 @@
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "ieee754": {
      "version": "1.2.1",
@@ -17446,6 +17767,12 @@
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
      "dev": true
    },
+    "object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true
+    },
    "object-inspect": {
      "version": "1.12.2",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
@@ -17765,6 +18092,12 @@
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
      "dev": true
    },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true
+    },
    "pkg-dir": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -17842,29 +18175,55 @@
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "postcss-discard-duplicates": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "postcss-discard-empty": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "postcss-discard-overridden": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+      "dev": true
+    },
+    "postcss-import": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
      "dev": true,
-      "requires": {}
+      "requires": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      }
+    },
+    "postcss-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "dev": true,
+      "requires": {
+        "camelcase-css": "^2.0.1"
+      }
+    },
+    "postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "dev": true,
+      "requires": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      }
    },
    "postcss-loader": {
      "version": "6.2.1",
@@ -17954,8 +18313,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "postcss-modules-local-by-default": {
      "version": "4.0.0",
@@ -17986,12 +18344,20 @@
        "icss-utils": "^5.0.0"
      }
    },
+    "postcss-nested": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.6"
+      }
+    },
    "postcss-normalize-charset": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
    },
    "postcss-normalize-display-values": {
      "version": "5.1.0",
@@ -18232,6 +18598,12 @@
      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
      "dev": true
    },
+    "quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true
+    },
    "randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -18267,6 +18639,15 @@
        }
      }
    },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "requires": {
+        "pify": "^2.3.0"
+      }
+    },
    "read-pkg": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -19068,6 +19449,44 @@
        }
      }
    },
+    "tailwindcss": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.6.tgz",
+      "integrity": "sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==",
+      "dev": true,
+      "requires": {
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "color-name": "^1.1.4",
+        "detective": "^5.2.1",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.11",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "lilconfig": "^2.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.14",
+        "postcss-import": "^14.1.0",
+        "postcss-js": "^4.0.0",
+        "postcss-load-config": "^3.1.4",
+        "postcss-nested": "5.0.6",
+        "postcss-selector-parser": "^6.0.10",
+        "postcss-value-parser": "^4.2.0",
+        "quick-lru": "^5.1.1",
+        "resolve": "^1.22.1"
+      },
+      "dependencies": {
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        }
+      }
+    },
    "tapable": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -19865,8 +20284,7 @@
          "version": "8.8.0",
          "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
          "integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==",
-          "dev": true,
-          "requires": {}
+          "dev": true
        }
      }
    },
@@ -19993,8 +20411,13 @@
      "version": "7.5.8",
      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.8.tgz",
      "integrity": "sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
+    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true
    },
    "y18n": {
      "version": "5.0.8",
--- a/package.json
+++ b/package.json
@@ -26,10 +26,13 @@
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
+    "autoprefixer": "^10.4.7",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
+    "postcss": "^8.4.14",
    "sass": "^1.53.0",
-    "sass-loader": "^13.0.2"
+    "sass-loader": "^13.0.2",
+    "tailwindcss": "^3.1.6"
  },
  "eslintConfig": {
    "root": true,
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/scss/_btn.scss
+++ b/scss/_btn.scss
@@ -20,8 +20,7 @@ $btn-colors: (
  min-width: 270px;
  padding: 8px 10px;

-  border-radius: 3px;
-  border-width: 3px;
+  @apply border-4 rounded-md;
  border-style: solid;
  border-color: $default-color;

--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -1,122 +1,47 @@
 <template>
-  <footer class="footer">
-    <div class="footer_container">
-      <div class="container_logo">
-        Kamil<span class="logo_element">Craft</span>
+  <footer class="bg-neutral-800 py-8">
+    <div class="flex items-center justify-between max-w-screen-xl mx-auto">
+      <div class="bg-neutral-600 text-white pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith">
+        Kamil<span class="text-kamilcraft-green">Craft</span>
      </div>
-      <ul class="socials">
+      <ul class="flex gap-5 pr-3 text-lg">
        <li
          v-for="link in socialLinks"
          :key="link.title.slug"
-          class="social_link"
        >
          <a
-            class="link"
+            class="text-neutral-400 hover:text-neutral-500"
            :href="link.link"
            :title="link.title"
            target="_blank"
            rel="noopener nofollow noreferrer"
          >
-            <font-awesome-icon
-              class="icon"
+            <FontAwesomeIcon
+              class="mr-1"
              :icon="['fab', link.icon]"
            />
-            <span class="social_title">{{ link.title }}</span>
-            <span class="social_shortcut">{{ link.shortcut }}</span>
+            <span class="hidden md:inline-block">{{ link.title }}</span>
+            <span class="hidden sm:inline-block md:hidden">{{ link.shortcut }}</span>
          </a>
        </li>
      </ul>
    </div>
-    <div class="container" />
  </footer>
 </template>

 <script setup>
 const socialLinks = [
-  { link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
-  { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
+  {
+    link: 'https://www.youtube.com/user/kamilniemczycki',
+    icon: 'youtube',
+    title: 'Oglądaj mnie na YouTube',
+    shortcut: 'YouTube'
+  },
+  {
+    link: 'https://www.facebook.com/nikcamii',
+    icon: 'facebook',
+    title: 'Znajdź mnie na Facebooku',
+    shortcut: 'Facebook'
+  }
 ]
 </script>
-
-<style lang="scss" scoped>
-@import "scss/default";
-
-.footer {
-  background-color: #323232;
-  padding: 35px 0;
-
-  &_container {
-    @extend .container;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .container_logo {
-      padding: 14px 20px 14px 40px;
-      font-family: 'Thasadith', sans-serif;
-      font-size: 2.5em;
-      color: #D4D4D4;
-      background-color: #5B5B5B;
-
-      .logo_element {
-        color: #A2CF00;
-      }
-    }
-
-    .socials {
-      display: flex;
-      list-style: none;
-
-      .social_link {
-        margin-right: 25px;
-        padding-right: 15px;
-        font-size: 1.1em;
-
-        a {
-          color: #A3A3A3;
-
-          .icon {
-            margin-right: 5px;
-          }
-
-          .social_shortcut {
-            display: none;
-          }
-
-          @include media-tablet {
-            .social_title {
-              display: none;
-            }
-
-            .social_shortcut {
-              display: inline-block;
-            }
-          }
-
-          @include media-mobile {
-            .social_shortcut {
-              display: none;
-            }
-          }
-        }
-
-        @include media-mobile {
-          padding-right: 0;
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
-
-    @include media-tablet {
-      padding: 0;
-    }
-  }
-
-  @include media-mobile {
-    padding: 15px 0;
-  }
-}
-</style>
--- a/src/components/HomePageElement.vue
+++ b/src/components/HomePageElement.vue
@@ -1,29 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ route.meta.title }}</h1>
-    <p>Witam na mojej stronie głównej. Wszystkich zainteresowanych oczywiście 😁</p>
-  </div>
-</template>
-
-<script setup>
-import { useRoute } from 'vue-router'
-
-const route = useRoute()
-</script>
-
-<style scoped lang="scss">
-  h1 {
-    margin: 30px 0 20px;
-  }
-  ul {
-    list-style-type: none;
-    padding: 0;
-  }
-  li {
-    display: inline-block;
-    margin: 0 10px;
-  }
-  a {
-    color: #42b983;
-  }
-</style>
--- a/src/components/NavigationHeader.vue
+++ b/src/components/NavigationHeader.vue
@@ -1,19 +1,22 @@
 <template>
  <div
-    class="container"
-    :class="{ 'container-menu-active': isClicked }"
+    class="flex relative items-center justify-between md:justify-start max-w-screen-xl mx-auto gap-5"
+    :class="{ 'clicked-menu': isClicked }"
  >
-    <router-link to="/">
+    <RouterLink to="/">
      <div
-        class="logo"
+        class="bg-white text-gray-800 pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith"
+        :class="{ 'clicked-logo': isClicked }"
        @click="linkClicked"
      >
-        Kamil<span class="logo-element">Craft</span>
+        Kamil<span class="text-kamilcraft-green">Craft</span>
      </div>
-    </router-link>
-    <nav class="nav">
+    </RouterLink>
+    <nav>
      <button
-        class="nav-btn"
+        class="md:hidden text-3xl mx-5"
+        :class="[ (isHomePage && !isClicked) ? 'text-white' : 'text-gray-600' ]"
+        title="Menu"
        @click="clickMenu"
      >
        <font-awesome-icon
@@ -26,17 +29,27 @@
        />
      </button>
      <ul
-        class="site-menu"
-        :class="{ 'menu-clicked': isClicked }"
+        :class="[ isClicked ? 'absolute top-20 left-0 w-full z-10 text-3xl text-right bg-white shadow-lg' : 'hidden md:flex md:flex-row md:gap-9' ]"
      >
        <li
          v-for="menuItem in menuItems"
          :key="menuItem.slug"
-          class="menu-element"
+          :class="{ 'py-5 px-3 leading-6': isClicked }"
          @click="linkClicked"
        >
-          <RouterLink :to="menuItem.uri">
-            {{ menuItem.title }}
+          <RouterLink
+            v-slot="{ href, navigate, isActive }"
+            :to="menuItem.uri"
+            custom
+          >
+            <a
+              :href="href"
+              class="hover:text-kamilcraft-green"
+              :class="[ (!isActive && isHomePage && !isClicked) ? 'text-white' : (isActive ? 'text-kamilcraft-green' : 'text-gray-500') ]"
+              @click="navigate"
+            >
+              {{ menuItem.title }}
+            </a>
          </RouterLink>
        </li>
      </ul>
@@ -45,7 +58,14 @@
 </template>

 <script setup>
-import { ref, computed } from 'vue'
+import { defineProps, ref, computed } from 'vue'
+
+defineProps({
+  isHomePage: {
+    type: Boolean,
+    default: false
+  }
+})

 const menuItems = [
  {
@@ -88,127 +108,16 @@ function linkClicked() {
 }
 </script>

-<style lang="scss" scoped>
-@import "scss/media";
-
-.sub-page > .container {
-  .nav-btn {
-    color: #8D8D8D;
-  }
-
-  .nav .site-menu .menu-element {
-    a:not([class|=router-link]) {
-      color: #8D8D8D;
-
-      &:hover {
-        color: #A2CF00;
-      }
-    }
-  }
+<style lang="scss">
+.clicked-menu {
+  animation: bg-menu-animation 500ms forwards ease-in-out;
 }
-.container {
-  display: flex;
-  height: 80px;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0;

-  div.logo {
-    padding: 14px 20px 14px 40px;
-    font-family: 'Thasadith', sans-serif;
-    font-size: 2.5em;
-    color: #5C5C5C;
-    background-color: white;
-
-    .logo-element {
-      color: #A2CF00;
-    }
-  }
-
-  &-menu-active {
-    color: #8D8D8D;
-    animation: container-active-menu 500ms forwards ease-in-out;
-
-    div.logo {
-      animation: logo-active-menu 500ms forwards ease-in-out;
-    }
-    .nav {
-      .nav-btn {
-        color: #8D8D8D;
-      }
-      .site-menu .menu-element a {
-        color: #8D8D8D;
-      }
-    }
-  }
+.clicked-logo {
+  animation: bg-logo-animation 500ms forwards ease-in-out;
 }
-.nav {
-  margin-left: 20px;
-  z-index: 10;
-  .nav-btn {
-    display: none;
-    margin: 10px 25px;
-    font-size: 2em;
-    color: white;
-    background: transparent !important;
-    border: none;
-  }
-  .site-menu {
-    display: flex;
-    list-style: none;

-    .menu-element {
-      margin-right: 30px;
-
-      a {
-        color: #EBEBEB;
-
-        &.router-link-exact-active, &:hover {
-          color: #A2CF00;
-        }
-      }
-
-      &:last-child {
-        margin-right: unset;
-      }
-    }
-  }
-  @include media-tablet {
-    margin-left: 0;
-
-    .nav-btn {
-      display: block;
-    }
-
-    .site-menu {
-      display: none;
-      width: 100%;
-      position: absolute;
-      top: 80px;
-      left: 0;
-      background-color: white;
-      box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
-
-      .menu-element {
-        width: 100%;
-        padding: 5px 20px;
-        text-align: right;
-        font-size: 1.8em;
-        line-height: 2em;
-      }
-    }
-
-    .menu-clicked {
-      display: block;
-    }
-  }
-}
-@include media-tablet {
-  .container {
-    justify-content: space-between;
-  }
-}
-@keyframes container-active-menu {
+@keyframes bg-menu-animation {
  0% {
    background-color: transparent;
  }
@@ -216,7 +125,7 @@ function linkClicked() {
    background-color: #EFEFEF;
  }
 }
-@keyframes logo-active-menu {
+@keyframes bg-logo-animation {
  0% {
    background-color: white;
  }
--- a/src/components/SelectedProjects.vue
+++ b/src/components/SelectedProjects.vue
@@ -1,42 +1,47 @@
 <template>
-  <div class="projects">
+  <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10">
    <slot />
-    <div class="container">
+    <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
      <div
        v-for="project in projects"
        :key="project.title.slug"
-        class="project"
+        class="flex flex-col lg:grid grid-project relative bg-neutral-100 border border-gray-200 rounded-md"
      >
        <img
          v-if="project.images.small"
-          class="project_image"
+          class="project-image w-full h-[16rem] lg:w-[12.5rem] lg:h-[12.5rem] object-cover object-top rounded-t-md lg:rounded-bl-md lg:rounded-tr-none"
          :src="project.images.small"
          :alt="project.title"
        >
        <img
          v-else-if="project.images.large"
-          class="project_image"
+          class="project-image w-[12.5rem] h-[12.5rem] object-cover"
          :src="project.images.large"
          :alt="project.title"
        >
-        <div class="project_content">
-          <h3 class="project_title">
-            {{ project.title }}
-          </h3>
-          <div class="project_release">
-            {{ project.version }}
-          </div>
-          <div
-            class="project_description"
+        <div class="project-content relative p-3 h-[12.5rem] overflow-y-hidden after:absolute after:left-0 after:top-0 after:w-full after:h-full">
+          <header class="pb-2">
+            <h3 class="text-lg font-bold">
+              {{ project.title }}
+            </h3>
+            <p class="text-sm">
+              {{ project.project_version }}
+            </p>
+          </header>
+          <p
+            class="text-sm"
            v-html="markdownToText(project)"
          />
        </div>
-        <div class="more-button">
+        <div
+          class="project-button lg:flex lg:absolute lg:justify-center lg:items-center lg:left-0 lg:top-0 lg:w-full lg:h-full"
+        >
          <BaseButton
            has-icon
            icon="eye"
            is-reverse
-            class="btn"
+            class="w-full lg:w-80 rounded-t-none lg:rounded-t-md"
+            title="Pokaż więcej"
            @click="router.push({ name: 'Project', params: { id: project.id } })"
          >
            O projekcie
@@ -83,134 +88,44 @@ function markdownToText (project) {
 }
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
@import "scss/media";

-.projects {
-  padding-top: 45px;
-  padding-bottom: 45px;
+.grid-project {
+  animation: load-project 2s forwards;

-  .container {
-    display: grid;
-    align-items: flex-start;
-    grid-template-columns: 1fr 1fr;
-    grid-auto-rows: minmax(80px, auto);
-    column-gap: 25px;
-    row-gap: 20px;
+  .project-image, .project-content {
+    object-position: top center;
+  }

-    .project {
-      display: grid;
-      position: relative;
-      grid-template-areas: 'image content';
-      grid-template-columns: 200px 1fr;
-      background-color: #fafafa;
-      border: 1px solid rgba(0, 0, 0, .025);
-      border-radius: 5px;
-      animation: load-project 2s forwards;
+  .project-image {
+    grid-area: image;
+  }

-      .project_image {
-        grid-area: image;
-        width: 200px;
-        height: 200px;
-        object-fit: cover;
-        object-position: top center;
-      }
+  .project-content {
+    grid-area: content;

-      .project_content {
-        grid-area: content;
-        padding: 10px 15px;
-        height: 200px;
-        overflow-y: hidden;
-        position: relative;
-
-        .project_title {
-          font-size: 1.3em;
-          font-weight: normal;
-          line-height: 1.5em;
-        }
-
-        .project_release {
-          font-size: .9em;
-          font-weight: bold;
-          padding: 5px 0;
-        }
-
-        &::after {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
-          background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #fafafa 100%);
-        }
-      }
-
-      p {
-        font-size: .9em;
-      }
+    &::after {
+      background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 60%, #fafafa);
    }
+  }
+}

-    @include media-tablet(true) {
-      .project {
-        .more-button {
+@screen lg {
+  .grid-project {
+    grid-template-areas: 'image content';
+    grid-template-columns: 200px 1fr;
+
+    .project-button {
+      .btn {
+        display: none;
+      }
+      &:hover {
+        background: rgba(0, 0, 0, .3);
+        border-radius: 5px;
+
+        .btn {
          display: flex;
-          justify-content: center;
-          align-items: center;
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
-
-          .btn {
-            display: none;
-          }
-
-          &:hover {
-            background: rgba(0, 0, 0, .3);
-            border-radius: 5px;
-
-            .btn {
-              display: flex;
-              color: white;
-              border-style: none;
-              &:hover {
-                background-color: #385c8a;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    @include media-small {
-      .project {
-        display: block;
-
-        .project_image {
-          width: 100%;
-          height: 250px;
-        }
-
-        .project_content {
-          height: 125px;
-        }
-
-        .more-button {
-          display: block;
-          position: unset;
-          margin-top: 8px;
-          height: auto;
-          left: unset;
-          top: unset;
-
-          .btn {
-            display: flex;
-            width: 100%;
-            border-radius: 0;
-            border-style: solid;
-          }
        }
      }
    }
@@ -227,13 +142,4 @@ function markdownToText (project) {
    opacity: 1;
  }
 }
-
-@include media-tablet {
-  .projects .container {
-    grid-template-columns: 1fr;
-    padding: 25px;
-    column-gap: 0;
-    row-gap: 20px;
-  }
-}
 </style>
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -1,12 +1,14 @@
 <template>
  <header :class="thisClass">
-    <navigation />
+    <Navigation :is-home-page="isHome" />
    <div
      v-if="isTitle"
-      class="header-info"
-      :class="{ 'header-info-home': isHome }"
+      class="max-w-screen-header-content mx-auto text-center px-2.5 py-10"
+      :class="{ 'text-white': isHome }"
    >
-      <h1>{{ getTitle }}</h1>
+      <h1 class="mb-6 relative font-light text-[2.5rem] leading-[3.5rem] after:block after:absolute after:w-24 after:h-0.5 after:bg-kamilcraft-green after:left-1/2 after:-ml-12">
+        {{ getTitle }}
+      </h1>
      <p v-if="isDescription && descriptionType === 'string'">
        {{ getDescription }}
      </p>
@@ -42,38 +44,11 @@ const descriptionType = computed(() => {
 })
 </script>

-<style lang="scss">
+<style scoped>
 .home-page {
  background: linear-gradient(237.74deg, #1199A5 0%, #436DA7 83%);
 }
 .sub-page {
  background-color: #EFEFEF;
 }
-.header-info {
-  text-align: center;
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 40px 10px;
-  h1 {
-    position: relative;
-    font-weight: lighter;
-    font-size: 2.5em;
-    line-height: 1.5em;
-    margin-bottom: 25px;
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      width: 100px;
-      height: 2px;
-      background-color: #A2CF00;
-      left: 50%;
-      margin-left: -50px;
-    }
-  }
-  &-home {
-    color: white;
-  }
-}
 </style>
--- a/src/components/buttons/BaseButton.vue
+++ b/src/components/buttons/BaseButton.vue
@@ -32,7 +32,7 @@ defineProps({
 })
 </script>

-<style lang="scss" scoped>
+<style lang="scss">
@import "../../../scss/btn";

 .btn {
--- a/src/components/sections/AboutSection.vue
+++ b/src/components/sections/AboutSection.vue
@@ -1,19 +1,22 @@
 <template>
-  <div class="about">
-    <div class="container">
-      <div id="grid">
-        <div id="grid-text">
-          <h2 class="name">
+  <div class="bg-neutral-50">
+    <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+      <div
+        id="grid-columns"
+        class="flex flex-col md:grid items-center"
+      >
+        <div id="grid-content">
+          <h2 class="text-[2rem]">
            Kamil Niemczycki
          </h2>
-          <div class="tagline">
+          <div class="mb-2 text-[1.5rem]">
            Web Developer
          </div>
          <p>
            Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
            W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
          </p>
-          <div class="buttons">
+          <div class="flex flex-col sm:flex-row justify-center md:justify-start py-6 gap-5">
            <BaseButton
              has-icon
              icon="portrait"
@@ -32,9 +35,10 @@
          </div>
        </div>
        <div id="grid-photo">
-          <figure id="about-photo">
+          <figure>
            <img
              :src="`${publicPath}assets/me.jpg`"
+              class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]"
              alt="Moje zdjęcie"
            >
          </figure>
@@ -59,97 +63,17 @@ function scrollTo(id) {
 </script>

 <style lang="scss">
-@import "scss/media";
+#grid-columns {
+  grid-template-columns: 1fr 1fr .8fr;
+  grid-template-areas:
+    'text text photo';
+}

-.about {
-  background-color: var(--gray-color) !important;
+#grid-content {
+  grid-area: text;
+}

-  .container {
-    padding-top: 45px;
-    padding-bottom: 45px;
-  }
-  h2.name {
-    font-size: 2.1em;
-    margin-bottom: 5px;
-  }
-  div.tagline {
-    font-size: 1.6em;
-    margin-bottom: .7em;
-  }
-  #grid {
-     display: grid;
-     grid-template-columns: 1fr 1fr .8fr;
-     grid-template-areas:
-       'text text photo';
-     align-items: center;
-
-     #grid-text {
-       grid-area: text;
-       text-align: left;
-
-       .buttons {
-         display: flex;
-         justify-content: flex-start;
-         padding: 25px 0;
-
-         .btn {
-           margin-right: 20px;
-
-           &:last-child {
-             margin-right: 0;
-           }
-
-           @include media-tablet {
-             margin: 0 auto 15px;
-
-             &:last-child {
-               margin: 0 auto;
-             }
-           }
-         }
-
-         @include media-small {
-           justify-content: center;
-           margin-bottom: 25px;
-         }
-
-         @include media-tablet {
-           display: block;
-           margin-bottom: 25px;
-         }
-       }
-
-       @include media-mobile() {
-         .buttons .btn,
-         .buttons a {
-           min-width: unset;
-           width: 100%;
-         }
-       }
-     }
-     #grid-photo {
-       grid-area: photo;
-
-       #about-photo img {
-         border-radius: 50%;
-       }
-     }
-     figure {
-       text-align: center;
-       img {
-         object-fit: cover;
-         width: 200px;
-         height: 200px;
-       }
-     }
-  }
-  @include media-small {
-    #grid {
-      grid-template-columns: 1fr 1fr;
-      grid-template-areas:
-    'text text'
-    'photo photo';
-    }
-  }
+#grid-photo {
+  grid-area: photo;
 }
 </style>
--- a/src/components/sections/ExperiencesSection.vue
+++ b/src/components/sections/ExperiencesSection.vue
@@ -1,20 +1,22 @@
 <template>
-  <div class="experiences">
-    <div class="container">
-      <h2>Wykorzystywane technologie</h2>
-      <p>
+  <div>
+    <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
+      <h2 class="text-[2rem] mb-2">
+        Wykorzystywane technologie
+      </h2>
+      <p class="mb-5">
        Programowaniem stron internetowych zajmuję się najmłodszych lat, czyli od 2011 roku. Pierwsze projekty były
        proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
        technologie, które wspomagają pisanie i rozwijanie oprogramowania.
      </p>
-      <div class="skills">
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
        <div
          v-for="(skill, skillKey) in list"
          :key="skillKey"
-          class="skill-group"
+          class="p-4 bg-neutral-50 rounded-lg"
        >
-          <header class="skill-header">
-            <div class="tech-icons">
+          <header>
+            <div class="flex gap-2 text-3xl mb-2">
              <font-awesome-icon
                v-for="(icon, iconKey) in skill.icons"
                :key="iconKey"
@@ -24,13 +26,25 @@
                :title="icon.title"
              />
            </div>
-            <h3>{{ skill.header }}</h3>
+            <h3 class="text-lg font-bold">
+              {{ skill.header }}
+            </h3>
          </header>
-          <p v-if="skill.showMore.value || skill.description.length < 200">
+          <p
+            v-if="skill.showMore.value || skill.description.length < 200"
+            class="text-sm"
+          >
            {{ skill.description }}
          </p>
-          <p v-else>
-            {{ parseText(skill.description) }}... <a @click="changeMoreStatus(skill)">Więcej</a>
+          <p
+            v-else
+            class="text-sm"
+          >
+            {{ parseText(skill.description) }}...
+            <a
+              class="text-neutral-500 hover:text-neutral-700 hover:underline cursor-pointer"
+              @click="changeMoreStatus(skill)"
+            >Więcej</a>
          </p>
        </div>
      </div>
@@ -160,74 +174,7 @@ function changeMoreStatus(skill) {
 }
 </script>

-<style lang="scss">
-@import "scss/media";
-
-.experiences {
-  .container {
-    padding-top: 45px;
-    padding-bottom: 45px;
-
-    .skills {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      column-gap: 20px;
-      row-gap: 20px;
-      margin-top: 15px;
-
-      .skill-group {
-        background-color: #fafafa;
-        padding: 15px;
-        border-radius: 5px;
-
-        .tech-icons {
-          font-size: 1.8em;
-          margin-bottom: 3px;
-
-          & > svg[class*='icon'] {
-            margin-right: 10px;
-
-            &:last-child {
-              margin-right: 0;
-            }
-          }
-        }
-        h3 {
-          font-size: 1.2em;
-          line-height: 1.6em;
-          font-weight: bold;
-        }
-        .skill-list {
-          margin-block: auto;
-          padding-inline: inherit;
-          margin-left: 5px;
-          list-style-type: initial;
-        }
-        p {
-          font-size: .9em;
-
-          a {
-            color: #8D8D8D;
-            cursor: pointer;
-          }
-        }
-        &:hover {
-          background-color: rgba(0, 0, 0, .03);
-        }
-      }
-
-      @include media-small {
-        grid-template-columns: repeat(3, 1fr);
-      }
-      @include media-tablet {
-        grid-template-columns: repeat(2, 1fr);
-      }
-      @include media-mobile {
-        grid-template-columns: repeat(1, 1fr);
-      }
-    }
-  }
-}
+<style scoped>
 .icon-js {
  color: #F1DE4F;
 }
--- a/src/components/sections/FavoriteProjects.vue
+++ b/src/components/sections/FavoriteProjects.vue
@@ -1,13 +1,20 @@
 <template>
-  <section class="selected-projects">
+  <section class="bg-neutral-50">
    <projects :projects="select_projects">
-      <div class="header-container">
-        <h2>Wybrane projekty</h2>
-        <p>Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.</p>
-      </div>
+      <header>
+        <h2 class="text-[2rem] mb-2">
+          Wybrane projekty
+        </h2>
+        <p class="mb-5">
+          Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.
+        </p>
+      </header>
    </projects>
-    <div class="more-button">
-      <GhostButton @click="router.push('projects')">
+    <div class="w-full -translate-y-5 pb-5 more-button">
+      <GhostButton
+        class="mx-auto"
+        @click="router.push('projects')"
+      >
        ZOBACZ WIĘCEJ
      </GhostButton>
    </div>
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,7 @@ import { store } from './store'
 // import VueMeta from 'vue-meta'

 import '../scss/default.scss'
+import '../css/index.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import { fab } from '@fortawesome/free-brands-svg-icons'
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -1,38 +1,38 @@
 <template>
-  <div>
-    <div class="project_categories">
-      <ul class="categories">
+  <SelectedProjects :projects="projects">
+    <div class="pb-9">
+      <ul class="flex justify-center list-none">
        <li
          v-for="category in getCategories"
          :key="category.slug"
-          class="categories_element"
-          :class="{ 'categories_element-active': categories.active === category.slug }"
+          class="relative cursor-pointer mr-3 md:mr-5 last:mr-0 after:translate-y-2"
+          :class="{ 'category-active': selectedCategory(category.slug) }"
          @click="changeCategory(category.slug)"
        >
-          <a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
+          <a
+            class="text-gray-500 hover:text-black"
+            :title="`Kategoria ${category.name}`"
+          >{{ category.name }}</a>
        </li>
      </ul>
    </div>
-    <SelectedProjects :projects="projects" />
-    <div
-      v-if="projects.length === 0"
-      class="loading"
-    >
-      <div class="loading_animation" />
-    </div>
+  </SelectedProjects>
+  <div
+    v-if="projects.length === 0"
+    class="loading"
+  >
+    <div class="loading_animation" />
  </div>
 </template>

 <script setup>
-import { reactive, computed, onMounted, onUnmounted } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
 import SelectedProjects from '../components/SelectedProjects'

 const store = useStore()

-const categories = reactive({
-  active: 'all'
-})
+const activeCategory = ref('all')
 const projects = reactive([])

 const getCategories = computed(() => store.getters.getCategories)
@@ -72,64 +72,22 @@ function loadListWhereCategory(category) {
 }

 function changeCategory(category) {
-  categories.active = category
+  activeCategory.value = category
  loadListWhereCategory(category)
 }
+
+function selectedCategory(categorySlug) {
+  return activeCategory.value === categorySlug
+}
 </script>

 <style lang="scss">
@import "scss/media";

-.project_categories {
-  padding-top: 45px;
-
-  .categories {
-    display: flex;
-    justify-content: center;
-    list-style: none;
-
-    .categories_element {
-      position: relative;
-      cursor: pointer;
-      margin-right: 25px;
-
-      a {
-        color: var(--text-color);
-        &:hover {
-          color: black;
-        }
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-
-      &-active {
-        &::after {
-          content: '';
-          position: absolute;
-          margin: 0 auto;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          width: 0;
-          height: 2px;
-          background-color: #A2CF00;
-          transform: translateY(8px);
-          animation: load-underline 300ms forwards;
-        }
-      }
-
-      @include media-mobile {
-        margin-right: 15px;
-      }
-    }
-  }
-}
-
-.projects {
-  padding-top: 25px;
-  padding-bottom: 25px;
+.category-active::after {
+  @apply absolute mx-auto left-0 right-0 bottom-0 h-0.5;
+  background-color: #A2CF00;
+  animation: load-underline 300ms forwards;
 }

@keyframes loading-animation {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{vue,js}",
+  ],
+  darkMode: true,
+  theme: {
+    extend: {
+      fontFamily: {
+        'arial': ['Arial', 'sans-serif'],
+        'roboto': ['Roboto', 'sans-serif'],
+        'thasadith': ['Thasadith', 'sans-serif']
+      },
+      fontSize: {
+        'logo-size': '2.5rem',
+      },
+      screens: {
+        'header-content': '900px'
+      },
+      colors: {
+        'kamilcraft-green': 'rgb(var(--color-kamilcraft-green) / <alpha-value>)'
+      }
+    },
+  },
+  plugins: [],
+}
Author	SHA1	Message	Date
Kamil Niemczycki	01bac7e579	updated footer style	2022-07-24 15:52:57 +02:00
Kamil Niemczycki	15073c9d79	updated project view	2022-07-24 15:48:27 +02:00
Kamil Niemczycki	5de10940d9	updated buttons	2022-07-24 15:02:20 +02:00
Kamil Niemczycki	8e9d3f138c	updated favorite projects	2022-07-24 15:01:57 +02:00
Kamil Niemczycki	412bc5fca1	improved responsiveness	2022-07-24 11:11:32 +02:00
Kamil Niemczycki	11c72a9389	WIP	2022-07-14 00:33:28 +02:00
Kamil Niemczycki	cc9a4af7d0	updated experiences style - tailwind	2022-07-13 23:13:31 +02:00
Kamil Niemczycki	90cdb2bf30	updated about section - tailwind	2022-07-13 22:13:11 +02:00
Kamil Niemczycki	8ddbfe6598	updated colors	2022-07-13 21:27:59 +02:00
Kamil Niemczycki	1ea49ec0e5	updated header style - tailwind	2022-07-13 21:27:23 +02:00
Kamil Niemczycki	661c408a18	updated footer style - tailwind	2022-07-13 20:36:56 +02:00
Kamil Niemczycki	cbfb67945a	updated container size for navigation	2022-07-13 20:36:24 +02:00
Kamil Niemczycki	401f4e1b3c	removed old style	2022-07-13 19:55:59 +02:00
Kamil Niemczycki	d726af2639	updated menu - tailwind	2022-07-13 13:42:27 +02:00
Kamil Niemczycki	087a638589	installed tailwind	2022-07-13 09:58:17 +02:00