Merge branch 'hotfix/3.5.4'

* hotfix/3.5.4:
  fix(package): update project version number from `3.5.3` to `3.5.4`
  refactor(sass): apply reset of standard styles for consistency with other projects
  refactor(sass): rename title from `PARTIALS SCSS` to `PARTIALS SASS`
  refactor(sass): fix `Helvetica` font style in `$font-brand-2`
  refactor(sass): move imports of fonts from `App.vue` to the partial sass `base`
  refactor(sass): separate the sections of sass variables by comments
  fix(sass): ensure @use rules are declared before any other styles
  feat(sass): add reset styles to the `base` sass partial
  refactor(sass): move `App.vue` global styles to `base`, `components` and `animations` sass partials

package.json

@@ -1,5 +1,5 @@
 {
-	"version": "3.5.3",
+	"version": "3.5.4",
 	"private": true,
 	"name": "vue-users",
 	"description": "Vue app that get/set a list of random users from an API.",

src/App.vue

@@ -102,84 +102,20 @@
 </script>
 
 <style lang="scss">
-	@import "./assets/fonts/DauphinPlain/font.css";
-	@import "https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap";
-	@import "https://use.fontawesome.com/releases/v5.8.2/css/all.css";
-
-	// RESET
-	// -----------------------------------------
-
-	[v-cloak] {
-		display: none;
-	}
-
-	*,
-	*:after,
-	*:before {
-		box-sizing: border-box;
-		margin: 0;
-		padding: 0;
-	}
-
-	a {
-		text-decoration: none;
-	}
-
-	button {
-		appearance: none;
-		outline: none;
-	}
-
-	// PAGE
-	// -----------------------------------------
-
-	.page {
-		font-size: 62.5%;
-	}
-
-	.page-body {
-		padding: 7.2rem 0 0;
-		background-color: $color-light;
-		color: $color-gray;
-		font-family: $font-brand-2;
-		font-size: 1.6rem;
-		-webkit-font-smoothing: antialiased;
-	}
-
-	.page-main {
-		padding: 6.4rem 0;
-
-		@include media("md") {
-			padding: 4rem 0;
-		}
-
-		&__inner {
-			width: 100%;
-		}
-	}
-
-	.page-inner {
-		width: 100%;
-		padding: 0 3rem;
-	}
-
-	// VUE TRANSITIONS
-	// -----------------------------------------
-
-	/* default animation if don't use a name in the tag transition/transition-group (WITHOUT NAME) */
-	.v-enter {
-		opacity: 0;
-	}
-
-	.v-enter-active {
-		transition: opacity 1s;
-	}
-
-	.v-leave-to {
-		opacity: 0;
-	}
-
-	.v-leave-active {
-		transition: opacity 0.5s linear 0.5s;
-	}
+	// PARTIALS SASS
+	// ===============================================================================
+
+	// BASE
+	// ----------------------------------------------------------------------
+	@use "@/assets/scss/base/base-reset";
+	@use "@/assets/scss/base/base-global";
+	@use "@/assets/scss/base/base-fonts";
+
+	// COMPONENTS
+	// ----------------------------------------------------------------------
+	@use "@/assets/scss/components/components-page";
+
+	// ANIMATIONS
+	// ----------------------------------------------------------------------
+	@use "@/assets/scss/animations/animations-vue-transitions";
 </style>

src/assets/scss/abstracts/variables/_abstracts-variables-fonts.scss

@@ -5,4 +5,4 @@
 // BRAND
 // ----------------------------------------------------------------------
 $font-brand-1: "Dauphin", "Bradley Hand", sans-serif;
-$font-brand-2: "Oxygen", helvetica, cursive;
+$font-brand-2: "Oxygen", "Helvetica", cursive;

src/assets/scss/animations/_animations-vue-transitions.scss

@@ -0,0 +1,20 @@
+// ANIMATIONS
+// VUE-TRANSITIONS
+// =================================================
+// default animation if don't use a name in the tag transition/transition-group (WITHOUT NAME)
+
+.v-enter {
+	opacity: 0;
+}
+
+.v-enter-active {
+	transition: opacity 1s;
+}
+
+.v-leave-to {
+	opacity: 0;
+}
+
+.v-leave-active {
+	transition: opacity 0.5s linear 0.5s;
+}

src/assets/scss/base/_base-fonts.scss

@@ -0,0 +1,7 @@
+// BASE
+// FONTS
+// =================================================
+
+@import url("@/assets/fonts/DauphinPlain/font.css");
+@import url("https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap");
+@import url("https://use.fontawesome.com/releases/v5.8.2/css/all.css");

src/assets/scss/base/_base-global.scss

@@ -0,0 +1,24 @@
+// BASE
+// GLOBAL
+// =================================================
+
+*,
+*:after,
+*:before {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+a {
+	text-decoration: none;
+}
+
+button {
+	appearance: none;
+	outline: none;
+}
+
+[v-cloak] {
+	display: none;
+}

src/assets/scss/base/_base-reset.scss

@@ -0,0 +1,137 @@
+// BASE
+// RESET
+// =================================================
+// http://meyerweb.com/eric/tools/css/reset/
+// v2.0 | 20110126
+// License: none (public domain)
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+// HTML5 display-role reset for older browsers
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+	display: block;
+}
+
+body {
+	line-height: 1;
+}
+
+ol,
+ul {
+	list-style: none;
+}
+
+blockquote,
+q {
+	quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+	content: '';
+	content: none;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

src/assets/scss/components/_components-page.scss

@@ -0,0 +1,36 @@
+// COMPONENTS
+// PAGE
+// =================================================
+@use "../abstracts/mixins/abstracts-mixins-media" as *;
+@use "../abstracts/variables/abstracts-variables-colors" as *;
+@use "../abstracts/variables/abstracts-variables-fonts" as *;
+
+.page {
+	font-size: 62.5%;
+}
+
+.page-body {
+	padding: 7.2rem 0 0;
+	background-color: $color-light;
+	color: $color-gray;
+	font-family: $font-brand-2;
+	font-size: 1.6rem;
+	-webkit-font-smoothing: antialiased;
+}
+
+.page-main {
+	padding: 6.4rem 0;
+
+	@include media("md") {
+		padding: 4rem 0;
+	}
+
+	&__inner {
+		width: 100%;
+	}
+}
+
+.page-inner {
+	width: 100%;
+	padding: 0 3rem;
+}

src/assets/scss/styles.scss

@@ -4,9 +4,9 @@
 // ABSTRACTS
 // ----------------------------------------------------------------------
 @forward "abstracts/functions/abstracts-functions-contains";
-// -------------------
+// ------------------
 @forward "abstracts/mixins/abstracts-mixins-media";
-// -------------------
+// ------------------
 @forward "abstracts/variables/abstracts-variables-breakpoints";
 @forward "abstracts/variables/abstracts-variables-colors";
 @forward "abstracts/variables/abstracts-variables-fonts";