Merge pull request #73 from bstaruk/develop

3.5.1
bstaruk · Apr 9, 2022 · 739a2d9 · 739a2d9
2 parents b322e29 + 61e44c4
commit 739a2d9
Show file tree

Hide file tree

Showing 16 changed files with 878 additions and 1,144 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "starbase",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "author": "Brian Staruk <[email protected]>",
   "contributors": [
     {
@@ -42,38 +42,38 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.17.9",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^8.2.4",
     "clean-webpack-plugin": "^4.0.0",
-    "css-loader": "^6.6.0",
-    "eslint": "^8.10.0",
+    "css-loader": "^6.7.1",
+    "eslint": "^8.13.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.4.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-webpack": "^0.13.2",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-webpack-plugin": "^3.1.1",
     "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
-    "lint-staged": "^12.3.4",
-    "mini-css-extract-plugin": "^2.5.3",
+    "lint-staged": "^12.3.7",
+    "mini-css-extract-plugin": "^2.6.0",
     "path": "^0.12.7",
-    "prettier": "^2.5.1",
-    "sass": "^1.49.9",
+    "prettier": "^2.6.2",
+    "sass": "^1.50.0",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.5.3",
+    "stylelint": "^14.6.1",
     "stylelint-config-recommended": "^7.0.0",
     "stylelint-config-sass-guidelines": "^9.0.1",
     "stylelint-config-standard": "^25.0.0",
-    "stylelint-scss": "^4.1.0",
-    "stylelint-webpack-plugin": "^3.1.1",
-    "webpack": "^5.69.1",
+    "stylelint-scss": "^4.2.0",
+    "stylelint-webpack-plugin": "^3.2.0",
+    "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.0",
+    "webpack-dev-server": "^4.8.1",
     "webpack-merge": "^5.8.0"
   }
 }
diff --git a/src/app.scss b/src/app.scss
@@ -1,11 +1,9 @@
 /* Ordered Imports */
-@import 'styles/utils/variables';
-@import 'styles/utils/mixins';
-@import 'styles/base/fonts';
-@import 'styles/base/reset';
-@import 'styles/base/root';
+@use 'styles/base/fonts';
+@use 'styles/base/reset';
+@use 'styles/base/root';
 
 /* Unordered Imports */
-@import 'styles/layouts/footer';
-@import 'styles/layouts/header';
-@import 'styles/layouts/main';
+@use 'styles/layouts/footer';
+@use 'styles/layouts/header';
+@use 'styles/layouts/main';
diff --git a/src/index.html b/src/index.html
@@ -13,8 +13,10 @@
 <body>
   <!-- header -->
   <header role="banner" class="header">
-    <img src="assets/starbase.png" alt="starbase logo" class="header__image" />
-    <h1 class="header__title">starbase</h1>
+    <div class="header__title">
+      <img src="assets/starbase.png" alt="starbase logo" class="header__title-image" />
+      <h1 class="header__title-label">starbase</h1>
+    </div>
     <a class="header__link link link--comment stargazers" href="https://github.com/bstaruk/starbase"
       title="learn more about starbase on GitHub" data-owner="bstaruk" data-repo="starbase">GitHub</a>
   </header>
@@ -27,11 +29,13 @@ <h1 class="header__title">starbase</h1>
       minutes using some of the most powerful front-end tools available in
       2022:</p>
     <ul>
-      <li><a href="https://github.com/nodejs/node">Node.js</a>, <a href="https://github.com/webpack/webpack">webpack 5</a>
+      <li><a href="https://github.com/nodejs/node">Node.js</a>, <a href="https://github.com/webpack/webpack">webpack
+          5</a>
         &amp; <a href="https://github.com/webpack/webpack-dev-server">webpack-dev-server</a></li>
       <li><a href="https://github.com/babel/babel">Babel 7</a> w/ <a href="https://github.com/eslint/eslint">ESLint</a>
         &amp; <a href="https://github.com/prettier/prettier">Prettier</a></li>
-      <li><a href="https://github.com/sass">Sass</a> w/ <a href="https://github.com/stylelint/stylelint">stylelint</a></li>
+      <li><a href="https://github.com/sass">Sass</a> w/ <a href="https://github.com/stylelint/stylelint">stylelint</a>
+      </li>
     </ul>
     <p>The primary mission is to be small in scope so that it may be easily
       extended and customized, or used as a learning tool for developers who
@@ -77,7 +81,8 @@ <h3 id="js-sass-linting">JS &amp; Sass Linting</h3>
       respectively) include a solid foundation to build upon, utilizing the
       most popular industry-standardized plugins such as <a
         href="https://www.npmjs.com/package/eslint-config-airbnb">eslint-config-airbnb</a>
-      and <a href="https://github.com/bjankord/stylelint-config-sass-guidelines">stylelint-config-sass-guidelines</a>.</p>
+      and <a href="https://github.com/bjankord/stylelint-config-sass-guidelines">stylelint-config-sass-guidelines</a>.
+    </p>
     <h3 id="prettier-formatting">Prettier Formatting</h3>
     <p>starbase uses <a href="https://github.com/prettier/prettier">Prettier</a> to enforce and
       simplify code consistency. If you use VS Code, check out the <a

diff --git a/src/styles/base/_root.scss b/src/styles/base/_root.scss
@@ -1,3 +1,5 @@
+@use 'styles/utils' as *;
+
 * {
   box-sizing: border-box;
 }
@@ -12,8 +14,12 @@ body {
   max-width: $dm-body-max-width;
   padding: 16px;
 
-  @include respond-to('medium') {
+  @include respond-to('small') {
     font-size: 17px;
+  }
+
+  @include respond-to('medium') {
+    font-size: 18px;
     padding-top: 32px;
   }
 }
diff --git a/src/styles/components/_code.scss b/src/styles/components/_code.scss
@@ -1,3 +1,5 @@
+@use 'styles/utils' as *;
+
 .code,
 .pre {
   background-color: $color-selection;

diff --git a/src/styles/components/_heading.scss b/src/styles/components/_heading.scss
@@ -1,20 +1,22 @@
+@use 'styles/utils' as *;
+
 .heading {
   font-family: $font-serif;
   font-weight: normal;
 
   &--h1 {
-    font-size: 32px;
+    font-size: 1.875em;
   }
 
   &--h2 {
-    font-size: 28px;
+    font-size: 1.75em;
   }
 
   &--h3 {
-    font-size: 24px;
+    font-size: 1.5em;
   }
 
   &--h4 {
-    font-size: 20px;
+    font-size: 1.25em;
   }
 }
diff --git a/src/styles/components/_link.scss b/src/styles/components/_link.scss
@@ -1,3 +1,5 @@
+@use 'styles/utils' as *;
+
 .link {
   text-decoration: underline;
 

diff --git a/src/styles/components/_list.scss b/src/styles/components/_list.scss
@@ -1,3 +1,5 @@
+@use 'styles/utils' as *;
+
 .list {
   &--ordered {
     list-style-type: decimal;

diff --git a/src/styles/layouts/_footer.scss b/src/styles/layouts/_footer.scss
@@ -1,3 +1,5 @@
+@use 'styles/utils' as *;
+
 .footer {
   border-top: 2px solid $color-comment;
   color: $color-comment;

diff --git a/src/styles/layouts/_header.scss b/src/styles/layouts/_header.scss
@@ -1,32 +1,44 @@
-@import 'styles/components/link';
-@import 'styles/components/list';
+@use 'styles/utils' as *;
+@use 'styles/components/link';
+@use 'styles/components/list';
 
 .header {
-  align-items: center;
-  display: flex;
-  justify-content: flex-start;
+  @include respond-to('small') {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__title {
+    align-items: center;
+    display: flex;
 
-  &__image {
-    flex-shrink: 0;
-    height: 32px;
-    margin-right: 12px;
+    &-image {
+      flex-shrink: 0;
+      height: 32px;
+      margin-right: 12px;
 
-    @include respond-to('medium') {
-      height: 40px;
+      @include respond-to('medium') {
+        height: 40px;
+      }
     }
-  }
 
-  &__title {
-    flex-grow: 1;
-    font-family: $font-serif;
-    font-size: 36px;
-    font-weight: normal;
-    letter-spacing: normal;
-    margin: 0;
+    &-label {
+      font-family: $font-serif;
+      font-size: 2em;
+      font-weight: normal;
+      letter-spacing: normal;
+      margin: 0;
+    }
   }
 
   &__link {
-    flex-shrink: 0;
-    margin-left: 16px;
+    display: block;
+    margin-top: 8px;
+
+    @include respond-to('small') {
+      flex-shrink: 0;
+      margin: 0 0 0 16px;
+    }
   }
 }
diff --git a/src/styles/layouts/_main.scss b/src/styles/layouts/_main.scss
@@ -1,7 +1,8 @@
-@import 'styles/components/code';
-@import 'styles/components/heading';
-@import 'styles/components/link';
-@import 'styles/components/list';
+@use 'styles/utils' as *;
+@use 'styles/components/code';
+@use 'styles/components/heading';
+@use 'styles/components/link';
+@use 'styles/components/list';
 
 /* Allow extending of classes for WYSIWYG wrapper */
 /* stylelint-disable scss/at-extend-no-missing-placeholder */

diff --git a/src/styles/utils/_index.scss b/src/styles/utils/_index.scss
@@ -0,0 +1,2 @@
+@forward './mixins';
+@forward './variables';
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 /**
   Mixin to manage responsive breakpoints
   @author Kitty Giraudel

diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss
@@ -17,9 +17,11 @@ $font-serif: 'PT Serif', 'Palatino', 'Palatino Linotype', 'Palatino LT STD',
   'Book Antiqua', 'Georgia', serif;
 
 /* Dimensions */
-$dm-body-max-width: 768px;
+$dm-body-max-width: 960px;
 
 /* Breakpoints */
 $breakpoints: (
+  'small': ( min-width: 420px ),
   'medium': ( min-width: 768px ),
+  'max': ( min-width: $dm-body-max-width ),
 ) !default;
diff --git a/webpack/webpack.config.dev.js b/webpack/webpack.config.dev.js
@@ -10,6 +10,7 @@ module.exports = merge(webpackConfigBase, {
   },
   devtool: 'eval-source-map',
   devServer: {
+    open: true,
     port: 8080,
   },
   module: {