test page added

Luko248 · Feb 7, 2023 · 2cbd92e · 2cbd92e
1 parent 146974a
commit 2cbd92e
Show file tree

Hide file tree

Showing 10 changed files with 342 additions and 41 deletions.
diff --git a/Resources/.stylelintrc.json b/Resources/.stylelintrc.json
@@ -6,64 +6,128 @@
   "rules": {
     "order/order": [
       "custom-properties",
-      "declarations" 
+      "declarations"
     ],
     "order/properties-order": [
       [
+        "@property",
         "@include",
         "all",
+        "container-type",
+        "container-name",
+        "container",
         "position",
+        "inset",
+        "inset-block",
+        "inset-inline",
         "top",
         "right",
         "bottom",
         "left",
         "display",
         "content",
+        "grid-template-columns",
+        "grid-template-rows",
+        "grid-template-areas",
         "flex",
         "flex-grow",
         "flex-shrink",
         "flex-basis",
         "flex-flow",
         "flex-direction",
         "flex-wrap",
+        "place-items",
         "align-items",
         "align-content",
         "align-self",
         "order",
         "justify-content",
+        "inline-size",
+        "min-inline-size",
+        "max-inline-size",
         "width",
         "min-width",
         "max-width",
+        "block-size",
+        "min-block-size",
+        "max-block-size",
         "height",
         "min-height",
         "max-height",
+        "gap",
+        "column-gap",
+        "row-gap",
+        "aspect-ratio",
+        "scroll-margin",
+        "scroll-margin-top",
+        "scroll-margin-right",
+        "scroll-margin-bottom",
+        "scroll-margin-left",
+        "scroll-margin-margin",
+        "scroll-margin-block-start",
+        "scroll-margin-block-end",
+        "scroll-margin-inline",
+        "scroll-margin-inline-start",
+        "scroll-margin-inline-end",
+        "scroll-padding",
+        "scroll-padding-top",
+        "scroll-padding-right",
+        "scroll-padding-bottom",
+        "scroll-padding-left",
+        "scroll-padding-block",
+        "scroll-padding-block-start",
+        "scroll-padding-block-end",
+        "scroll-padding-inline",
+        "scroll-padding-inline-start",
+        "scroll-padding-inline-end",
+        "scroll-snap-type",
+        "scroll-snap-align",
         "float",
         "box-sizing",
         "padding",
         "padding-top",
         "padding-right",
         "padding-bottom",
         "padding-left",
+        "padding-block",
+        "padding-block-start",
+        "padding-block-end",
+        "padding-inline",
+        "padding-inline-start",
+        "padding-inline-end",
         "margin",
         "margin-top",
         "margin-right",
         "margin-bottom",
         "margin-left",
+        "margin-block",
+        "margin-block-start",
+        "margin-block-end",
+        "margin-inline",
+        "margin-inline-start",
+        "margin-inline-end",
         "background",
         "background-image",
         "background-clip",
         "background-repeat",
         "background-position",
+        "background-size",
         "background-origin",
         "background-color",
         "background-attachment",
         "backface-visibility",
         "opacity",
         "filter",
         "border",
+        "border-inline",
+        "border-block",
         "border-style",
         "border-width",
         "border-radius",
+        "border-start-start-radius",
+        "border-start-end-radius",
+        "border-ens-start-radius",
+        "border-end-end-radius",
         "border-color",
         "border-image",
         "border-image-outset",
@@ -105,12 +169,17 @@
         "list-style-image",
         "list-style-position",
         "color",
+        "accent-color",
+        "accent-color",
+        "scrollbar-color",
         "text-align",
         "text-decoration",
         "text-transform",
         "text-indent",
         "text-justify",
+        "text-orientation",
         "text-shadow",
+        "writing-mode",
         "vertical-align",
         "white-space",
         "word-break",
@@ -125,6 +194,9 @@
         "animation-iteration-count",
         "animation-play-state",
         "animation-timing-function",
+        "translate",
+        "scale",
+        "rotate",
         "transform",
         "transform-origin",
         "transform-style",
@@ -133,13 +205,22 @@
         "transition-duration",
         "transition-property",
         "transition-timing-function",
+        "columns",
         "overflow",
+        "overflow-x",
+        "overflow-y",
+        "overscroll-behavior",
+        "overscroll-behavior-x",
+        "overscroll-behavior-y",
+        "isolation",
         "z-index",
         "visibility",
-        "backface-visibility",
         "cursor",
         "user-select",
-        "direction"
+        "direction",
+        "syntax",
+        "inherits",
+        "initial-value"
       ],
       { "unspecified": "bottomAlphabetical" }
     ]

diff --git a/Resources/Stylesheets/SCSS/Base/default.scss b/Resources/Stylesheets/SCSS/Base/default.scss
@@ -18,9 +18,9 @@ body {
     background-image: url("./wwwroot/images/backgrounds/background.webp");
     background-repeat: no-repeat;
     background-position: center;
+    background-size: cover;
     background-color: var(--color-bg);
     font-family: var(--font-family--text);
-    background-size: cover;
 
     @include res-max-laptop-l {
         background-image: url("./wwwroot/images/backgrounds/background_1920.webp");

diff --git a/Resources/Stylesheets/SCSS/Components/link.scss b/Resources/Stylesheets/SCSS/Components/link.scss
@@ -1,12 +1,12 @@
 @import "../Base/global";
 
 .link {
+    backface-visibility: hidden;
     font-family: var(--font-family--link);
     font-size: 5.6vh;
     color: var(--color-primary);
     transform: rotate(0deg) translateZ(0);
     transition: transform var(--trans-time) ease-in-out;
-    backface-visibility: hidden;
     -webkit-font-smoothing: antialiased;
     text-decoration-color: var(--color-primary);
 
@@ -35,8 +35,8 @@
             width: 100%;
             height: .09em;
             background: linear-gradient(135deg, var(--color-secondary--darken) 15%, var(--color-secondary) 100%);
-            transform: translateX(-50%);
             backface-visibility: hidden;
+            transform: translateX(-50%);
         }
     }
 }

diff --git a/Resources/Stylesheets/SCSS/Views/contact.scss b/Resources/Stylesheets/SCSS/Views/contact.scss
@@ -2,14 +2,14 @@
 
 .contact {
     display: grid;
+    grid-template-columns: 8fr 5fr;
     align-items: stretch;
     justify-content: space-between;
     grid-gap: 4vw;
-    grid-template-columns: 8fr 5fr;
 
     @include res-max-laptop-l {
-        grid-gap: 8rem;
         grid-template-columns: 1fr;
+        grid-gap: 8rem;
     }
 
     >div:first-of-type {
@@ -21,9 +21,9 @@
 
     &__social {
         display: grid;
+        grid-template-columns: repeat(5, minmax(3.2rem, 4vh));
         margin: 3.2vh 0 7.2vh 0;
         grid-gap: var(--gap-l);
-        grid-template-columns: repeat(5, minmax(3.2rem, 4vh));
 
         >a {
             position: relative;

diff --git a/package.json b/package.json
@@ -1,25 +1,28 @@
 {
   "version": "2.0.0",
   "name": "lukas_chylik_portfolio",
-  "description": "NPM confiwg with stylelint. Updated on 4.5.2021",
+  "description": "NPM confiwg with stylelint. Updated on 7.2.2023",
   "private": true,
   "main": "./postcss.config.js",
   "author": "Lukáš Chylík",
   "license": "ISC",
   "devDependencies": {
-    "autoprefixer": "^10.2.5",
-    "browser-sync": "^2.26.14",
-    "clean-css-cli": "^5.3.0",
-    "node-sass": "^5.0.0",
-    "nunjucks": "^3.2.1",
-    "postcss": "^8.2.13",
-    "postcss-cli": "^8.3.1",
-    "postcss-value-parser": "^4.1.0",
-    "stylelint": "^13.12.0",
-    "stylelint-order": "^4.1.0",
-    "typescript": "^4.2.4",
-    "uglify-js": "^3.13.5",
-    "watch": "1.0.2"
+    "autoprefixer": "^10.4.13",
+    "browser-sync": "^2.27.11",
+    "clean-css-cli": "^5.6.2",
+    "node-sass": "^8.0.0",
+    "nunjucks": "^3.2.3",
+    "postcss": "^8.4.21",
+    "postcss-cli": "^10.1.0",
+    "postcss-loader": "^7.0.2",
+    "postcss-scss": "^4.0.6",
+    "postcss-value-parser": "^4.2.0",
+    "stylelint": "^14.16.1",
+    "stylelint-order": "^6.0.1",
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.5",
+    "uglify-js": "^3.17.4",
+    "watch": "^1.0.2"
   },
   "browserslist": {
     "production": [
@@ -37,17 +40,15 @@
     "fileExtensions": "scss"
   },
   "scripts": {
-    "version": "npm --version && node --version",
     "bundle": "npm run bundle:css && npm run bundle:js",
     "postcss": "npm run compile:scss && postcss wwwroot/CSS/style.css --config ./postcss.config.js -o wwwroot/CSS/style.css",
     "bundle:css": "npm run stylelint && npm run compile:scss && postcss wwwroot/CSS/style.css --config ./postcss.config.js | cleancss -o wwwroot/CSS/style.min.css",
     "bundle:js": "npm run compile:ts && uglifyjs -o wwwroot/JS/app.min.js -c -m -- wwwroot/JS/app.js",
     "compile:scss": "node-sass --source-map=true Resources/Stylesheets/SCSS/style.scss wwwroot/CSS/style.css",
     "compile:ts": "tsc -p Resources",
-    "stylelint": "stylelint --fix Resources/Stylesheets/SCSS/**/*.scss",
+    "stylelint": "stylelint --fix Resources/Stylesheets/SCSS/**/*.scss --custom-syntax postcss-scss",
     "watch": "npm run watch:scss",
     "watch:scss": "npm run bundle:css & watch \"npm run bundle:css\" Resources/Stylesheets/SCSS",
-    "watch:ts": "npm run compile:ts -- -w && npm run bundle:js",
-    "browser-sync": "browser-sync start --proxy https://localhost:44302/ --files=\"wwwroot/css/*.css\" \"wwwroot/js/*.js\""
+    "watch:ts": "npm run compile:ts -- -w && npm run bundle:js"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -2,6 +2,9 @@
     map: context.options.map,
     parser: context.options.parser,
     plugins: [
-        require('autoprefixer')({ grid: true, flex: true })
+        require('autoprefixer')({
+            grid: true,
+            flex: true
+        })
     ]
 })