style: upgrade devDependencies

Stylelint added many new default rules

Added some temp rule exclusions until code can be refactored

Ran ESlint and Stylelint auto-fixer to fix any new errors which can be auto-fixed

.stylelintignore

@@ -1,6 +1,7 @@
 **/*.min.css
 **/vendor/
 **/_vendor/
+**/libs/
 public/
 
 wowchemy/assets/scss/main.scss

.stylelintrc.yaml

@@ -3,10 +3,17 @@ plugins:
 extends:
   - stylelint-config-standard
   - stylelint-config-prettier
+  - stylelint-config-standard-scss
+  - stylelint-config-prettier-scss
 rules:
   at-rule-no-unknown: null # Use SCSS "at" rules
   scss/at-rule-no-unknown: true # Use SCSS "at" rules
   no-descending-specificity: null # Todo: remove once investigated/resolved
+  color-function-notation: null # Todo: refactor code
+  alpha-value-notation: null # Todo: refactor code
+  number-max-precision: null # Todo: refactor code
+  property-no-vendor-prefix: null # Necessary unless postcss prefix
+  value-no-vendor-prefix: null # Necessary unless postcss prefix
   font-family-no-missing-generic-family-keyword:
     - true
     - ignoreFontFamilies:

package.json

@@ -22,14 +22,16 @@
     "medium-zoom": "^1.0.6"
   },
   "devDependencies": {
-    "eslint": "7.20.0",
+    "eslint": "~8.15.0",
-    "eslint-config-prettier": "^7.1.0",
+    "eslint-config-prettier": "~8.5.0",
-    "prettier": "2.2.1",
+    "prettier": "~2.6.2",
-    "prettier-plugin-go-template": "0.0.11-beta.4",
+    "prettier-plugin-go-template": "~0.0.12",
-    "stylelint": "13.10.0",
+    "stylelint": "14.8.2",
-    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-prettier": "~9.0.3",
-    "stylelint-config-standard": "^20.0.0",
+    "stylelint-config-prettier-scss": "^0.0.1",
-    "stylelint-scss": "3.19.0"
+    "stylelint-config-standard": "~25.0.0",
+    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint-scss": "~4.2.0"
   },
   "scripts": {
     "view": "scripts/view-starter.sh",
@@ -39,6 +41,7 @@
     "lint:js": "eslint '*/**/*.{js,ts,tsx}'",
     "lint:js:fix": "eslint '*/**/*.{js,ts,tsx}' --fix",
     "lint:style": "stylelint '*/**/*.{css,scss}'",
+    "lint:style:fix": "stylelint '*/**/*.{css,scss}' --fix",
     "format": "prettier --write \"*.{css,js,json,md,scss}\" \"./**/*.{css,js,json,md,scss}\"",
     "stylelint-conflict-check": "stylelint-config-prettier-check",
     "update:starters": "hugo mod get -u ./..."

starters/blog/assets/scss/template.scss

@@ -9,6 +9,7 @@ body {
   background-color: #fff;
   border-radius: 15px;
 }
+
 .dark .article-container {
   background-color: rgb(31, 39, 51);
 }
@@ -17,6 +18,7 @@ body {
 .page-footer {
   background-color: rgb(247, 250, 252);
 }
+
 .dark .page-footer {
   background-color: rgb(26, 32, 44);
 }
@@ -26,6 +28,7 @@ body {
   margin-top: 1.8rem;
   border-radius: 15px;
 }
+
 .dark .card-simple {
   background: rgb(31, 39, 51);
 }
@@ -37,11 +40,11 @@ body {
 
 // custom section padding
 .home-section {
-  padding: 1rem 0 1rem 0;
+  padding: 1rem 0;
 }
 
 .home-section.wg-about-avatar {
-  padding: 0 0 0 0;
+  padding: 0;
 }
 
 #profile .network-icon {

starters/course/assets/scss/template.scss

@@ -10,7 +10,7 @@
 
 // Custom section spacing
 .home-section {
-  padding: 1.5rem 0 1.5rem 0;
+  padding: 1.5rem 0;
 }
 
 .section-heading {

starters/course/content/course/data-science/_index.md

@@ -5,7 +5,7 @@ summary: An example of using Wowchemy's Book layout for publishing online course
 date: '2021-01-24'
 type: book
 tags:
-- current
+  - current
 ---
 
 {{< figure src="featured.jpg" >}}

starters/course/content/course/robotics/_index.md

@@ -5,7 +5,7 @@ summary: An example of using Wowchemy's Book layout for publishing online course
 date: '2021-01-24'
 type: book
 tags:
-- previous
+  - previous
 ---
 
 {{< figure src="featured.jpg" >}}

starters/portfolio/assets/scss/template.scss

@@ -9,6 +9,7 @@ body {
   background-color: #fff;
   border-radius: 15px;
 }
+
 .dark .article-container {
   background-color: rgb(31, 39, 51);
 }
@@ -17,6 +18,7 @@ body {
 .page-footer {
   background-color: rgb(247, 250, 252);
 }
+
 .dark .page-footer {
   background-color: rgb(26, 32, 44);
 }
@@ -26,6 +28,7 @@ body {
   margin-top: 1.8rem;
   border-radius: 15px;
 }
+
 .dark .card-simple {
   background: rgb(31, 39, 51);
 }
@@ -37,11 +40,11 @@ body {
 
 // custom section padding
 .home-section {
-  padding: 1rem 0 1rem 0;
+  padding: 1rem 0;
 }
 
 .home-section.wg-about-avatar {
-  padding: 0 0 0 0;
+  padding: 0;
 }
 
 #profile .network-icon {

wowchemy/assets/scss/bootstrap_variables.scss

@@ -12,11 +12,9 @@ $container-max-widths: (
   // wider default: 1140 -> 1290
   xl: 1290px,
 );
-
 $navbar-toggler-padding-x: 0;
 $navbar-toggler-font-size: 18px;
 $navbar-brand-font-size: 1.2rem;
-
 $navbar-light-color: $sta-menu-text;
 $navbar-light-active-color: $sta-menu-text-active;
 $navbar-light-brand-color: $sta-menu-title;

wowchemy/assets/scss/wowchemy/_base.scss

@@ -42,6 +42,7 @@ body {
     margin-top: 50px;
   }
 }
+
 body.no-navbar {
   margin-top: 0 !important;
   scroll-padding-top: 0 !important;
@@ -62,6 +63,7 @@ body.no-navbar {
     min-height: calc(100vh - 50px);
   }
 }
+
 .page-wrapper.no-navbar {
   min-height: 100vh;
 }
@@ -130,7 +132,7 @@ ul.task-list li input[type='checkbox'] {
   font-family: $sta-font-nav, sans-serif;
   font-weight: 400;
   line-height: 1.25;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 
 /* Headings */
@@ -146,7 +148,7 @@ h6 {
   margin-bottom: 0.5rem;
   line-height: 1.25;
   color: #313131;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 
   /* Ensure long words do not overflow into content. */
   overflow-wrap: break-word;
@@ -158,18 +160,22 @@ h6 {
   -ms-hyphens: manual;
   hyphens: manual;
 }
+
 h1 {
   font-size: 2.25rem;
 }
+
 h2 {
   margin-top: 1rem;
   font-size: 1.5rem;
 }
+
 h3 {
   font-weight: 700;
   margin-top: 1.5rem;
   font-size: 1.25rem;
 }
+
 h4,
 h5,
 h6 {
@@ -205,21 +211,22 @@ code {
   font-family: $sta-font-mono, monospace;
 }
 
-pre,
+//pre,
-code:not(.hljs) {
+//code:not(.hljs) {
-  color: #c7254e;
+//  color: #c7254e;
-
+//
-  /* Match bg of default highlight theme. */
+//  /* Match bg of default highlight theme. */
-  background-color: rgb(248, 248, 248);
+//  background-color: rgb(248, 248, 248);
-}
+//}
 
 pre {
-  margin: 0 0 1rem 0;
+  margin: 0 0 1rem;
 
   /* Match bg of default highlight theme. */
   border-color: rgb(248, 248, 248);
   font-size: 0.7rem;
   border-radius: 4px;
+  padding: 5px;
 }
 
 pre code {
@@ -241,6 +248,7 @@ blockquote {
   color: #7a7a7a;
   border-left: 0.25rem solid #e5e5e5;
 }
+
 blockquote p:last-child {
   margin-bottom: 0;
 }

wowchemy/assets/scss/wowchemy/_dark.scss

@@ -28,6 +28,7 @@ body.dark,
     color: #fff;
     opacity: 1;
   }
+
   &:focus {
     background-color: rgb(68, 71, 90);
     border-color: $sta-primary;

wowchemy/assets/scss/wowchemy/_integrations.scss

@@ -11,6 +11,7 @@ div.chart {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 1rem;
+
   // Add horizontal scroll on mobile since Plotly
   overflow-x: auto;
 }

wowchemy/assets/scss/wowchemy/components/_card.scss

@@ -8,7 +8,7 @@
   border: 1px solid rgba(0, 0, 0, 0.09);
   border-radius: 3px;
   margin-top: 20px;
-  padding: 15px 20px 15px 20px;
+  padding: 15px 20px;
 }
 
 .card-simple:first-of-type {
@@ -65,7 +65,7 @@ a.summary-link {
 }
 
 .card .card-text {
-  padding: 0.75rem 1rem 0.75rem;
+  padding: 0.75rem 1rem;
 }
 
 .card .card-text p {

wowchemy/assets/scss/wowchemy/components/_nav.scss

@@ -6,9 +6,11 @@
   will-change: transform;
   transition: transform 200ms linear;
 }
+
 .headroom--pinned {
   transform: translateY(0%);
 }
+
 .headroom--unpinned {
   transform: translateY(-100%);
 }
@@ -90,6 +92,7 @@
 .dark .navbar {
   background: $sta-dark-menu-primary;
   box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 255, 255, 0.11);
+
   .navbar-nav {
     .nav-link {
       color: rgba($sta-dark-menu-text, 0.85);
@@ -106,6 +109,7 @@
       }
     }
   }
+
   .dropdown-item.active,
   .dropdown-item-active {
     color: $sta-dark-menu-text-active !important;
@@ -199,20 +203,25 @@
     left: 0;
     right: 0;
   }
+
   .navbar-brand {
     // Center logo in mobile navbar.
     margin: 0 auto;
   }
+
   .navbar-brand img {
     max-height: 40px; // 40px height + 10px v-padding = 50px.
   }
+
   .navbar-toggler {
     border-color: transparent; // Remove Bootstrap's border from Toggle button.
   }
+
   #navbar-main .main-menu-item {
     text-align: left !important;
     padding-left: 0;
   }
+
   .navbar-collapse {
     z-index: 1031 !important; // Appear just over navbar.
     position: absolute;
@@ -222,12 +231,15 @@
     background-color: $sta-menu-primary;
     text-align: center !important;
   }
+
   .dark .navbar-collapse {
     background-color: $sta-dark-menu-primary;
   }
+
   #navbar-main .main-menu-item .nav-item {
     padding: 10px 15px !important;
   }
+
   #navbar-main .main-menu-item .nav-item .nav-link {
     padding: 5px 15px !important;
   }
@@ -236,7 +248,7 @@
 ul.nav-icons {
   list-style-type: none;
   font-size: 18px;
-  padding: 0.5rem 0 0.5rem 0;
+  padding: 0.5rem 0;
   margin: 0;
 }
 

wowchemy/assets/scss/wowchemy/elements/_button.scss

@@ -10,12 +10,12 @@
 }
 
 .btn-links .btn {
-  padding: 5px 0.5rem 5px 0.5rem;
+  padding: 5px 0.5rem;
   line-height: 1;
 }
 
 .btn.btn-sm {
-  padding: 5px 0.4rem 5px 0.4rem;
+  padding: 5px 0.4rem;
   font-size: 14px;
   border-radius: 0.2rem;
 }

wowchemy/assets/scss/wowchemy/elements/_callout.scss

@@ -47,9 +47,9 @@ div.alert-warning > div:first-child::before {
 
 .article-style aside a,
 div.alert a {
-  color: currentColor;
+  color: currentcolor;
   text-decoration: none;
-  border-bottom: solid 1px currentColor;
+  border-bottom: solid 1px currentcolor;
 }
 
 .article-style aside,

wowchemy/assets/scss/wowchemy/elements/_content.scss

@@ -4,8 +4,8 @@
 
 .article-container {
   max-width: 760px;
-  padding: 0 20px 0 20px;
+  padding: 0 20px;
-  margin: 0 auto 0 auto;
+  margin: 0 auto;
 }
 
 .page-subtitle {
@@ -53,7 +53,7 @@
   text-align: right;
   z-index: 5;
   opacity: 0.65;
-  border-radius: 5px 0 0 0;
+  border-radius: 5px 0 0;
 }
 @media (min-width: 64em) {
   .article-header-caption {
@@ -86,7 +86,7 @@
   overflow: hidden;
 
   // Word wrap text content.
-  @include word-wrap();
+  @include word-wrap;
 
   // Underline links if they are a similar color to the body text.
   a {
@@ -136,13 +136,16 @@
   a {
     color: rgba(0, 0, 0, 0.54);
   }
+
   a:hover {
     color: $sta-primary;
   }
+
   .author-notes {
     cursor: help;
     padding-left: 3px;
   }
+
   .author-highlighted {
     font-weight: bold;
   }

wowchemy/assets/scss/wowchemy/elements/_icon.scss

@@ -4,6 +4,7 @@
   height: 0.9em;
   width: 0.9em;
 }
+
 .svg-icon.svg-baseline {
   bottom: 0.1em;
   line-height: 1;

wowchemy/assets/scss/wowchemy/elements/_table.scss

@@ -9,6 +9,7 @@ table {
   overflow-x: scroll;
   margin-bottom: 1rem;
   font-size: 0.8rem;
+
   // Override `article-style`'s `break-word` wrapping to make wide tables scrollable.
   overflow-wrap: normal;
   word-wrap: normal;

wowchemy/assets/scss/wowchemy/helpers/_word-wrap.scss

@@ -2,6 +2,7 @@
   // Break very long words such as pasted URL strings.
   overflow-wrap: break-word;
   word-wrap: break-word;
+
   //-ms-word-break: break-all;
   //word-break: break-all;
   word-break: break-word;

wowchemy/assets/scss/wowchemy/layouts/_search.scss

@@ -174,6 +174,7 @@
 .sidebar-search-text {
   flex-grow: 1;
   text-align: left;
+
   // Multilingual safe option to prevent long placeholders overflowing search box.
   overflow: hidden;
   font-size: 0.8rem;
@@ -221,6 +222,7 @@
 .dark .ais-search-box--input {
   background-color: $sta-dark-background;
 }
+
 // Hide body scrollbars whilst searching in modal
 .searching {
   overflow: hidden;

wowchemy/assets/scss/wowchemy/widgets/_about.scss

@@ -35,14 +35,14 @@
   font-size: 1.75em;
   font-weight: 300;
   color: #000;
-  margin: 20px 0 10px 0;
+  margin: 20px 0 10px;
 }
 
 .portrait-title h3 {
   font-size: 1rem;
   font-weight: 300;
   color: rgba(0, 0, 0, 0.54);
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
 }
 
 ul.network-icon {
@@ -124,6 +124,7 @@ ul.ul-edu li .description p.institution {
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
   }
 }
+
 .dark .avatar-emoji {
   background-color: #000;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04), 0 0 1px rgba(255, 255, 255, 0.96);

wowchemy/assets/scss/wowchemy/widgets/_base.scss

@@ -6,7 +6,7 @@
   // Use `background` rather than `background-color` so it can support gradients in theme packs.
   background: $sta-home-section-odd;
   position: relative; // Required for component positioning within section.
-  padding: 110px 0 110px 0;
+  padding: 110px 0;
   z-index: 0; // Explicit z-order otherwise `.home-section-bg` can be hidden by any `.home-section` background.
 }
 
@@ -22,6 +22,7 @@
     min-height: calc(100vh - 50px);
   }
 }
+
 .no-navbar .home-section.fullscreen,
 .no-navbar .fullscreen {
   min-height: 100vh;
@@ -112,6 +113,7 @@
 .parallax {
   background-attachment: fixed;
 }
+
 // Workaround issue with mobile browser support for fixed parallax background.
 @include media-breakpoint-down(md) {
   .parallax {
@@ -137,15 +139,16 @@
 
 @media screen and (max-width: 768px) {
   .home-section {
-    padding: 60px 0 60px 0;
+    padding: 60px 0;
   }
+
   .home-section:first-of-type {
     padding-top: 40px;
   }
 }
 
 .section-heading h1 {
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
 }
 
 .section-subheading {

wowchemy/assets/scss/wowchemy/widgets/_portfolio.scss

@@ -55,7 +55,7 @@
 }
 
 .project-card.project-item {
-  margin: 0 0 20px 0; /* Set to Isotope's gutter size */
+  margin: 0 0 20px; /* Set to Isotope's gutter size */
 }
 
 .project-card .card {