hypothetical/resources/sass/pages/_error.scss

.error-page-component {
    display: flex;
    padding: $grid-gutter-width $half-gutter-width;
    flex-grow: 1;
    align-items: center;

    h1 {
        @include font-sans-bold;
        width: 100%;
        font-size: pxrem(22);
        text-align: center;
        text-transform: uppercase;

        @include media-breakpoint-up(sm) {
            font-size: pxrem(32);
        }

        @include media-breakpoint-up(lg) {
            font-size: pxrem(48);
        }
    }
}
Give the vue-based error page some basic styles 2018-04-15 22:02:06 -04:00			`.error-page-component {`
			`display: flex;`
Upgrade to the latest sass, mr hope's gulp-sass, the bootstrap 5.2 beta and the latest font awesome, update other dependencies, organize styles a bit better, and use pxrem on the error page 2022-07-06 13:44:25 -04:00			`padding: $grid-gutter-width $half-gutter-width;`
Give the vue-based error page some basic styles 2018-04-15 22:02:06 -04:00			`flex-grow: 1;`
			`align-items: center;`

			`h1 {`
			`@include font-sans-bold;`
			`width: 100%;`
Rename px2rem to pxrem so it's easier to type frequently, add comments to both sass functions explaining what they do and how to use them, and don't include units where it's used so it's understood that it's not expected elsewhere (hopefully this makes it a bit less of a pain to type out) 2019-05-12 21:27:55 -04:00			`font-size: pxrem(22);`
Give the vue-based error page some basic styles 2018-04-15 22:02:06 -04:00			`text-align: center;`
			`text-transform: uppercase;`

			`@include media-breakpoint-up(sm) {`
Rename px2rem to pxrem so it's easier to type frequently, add comments to both sass functions explaining what they do and how to use them, and don't include units where it's used so it's understood that it's not expected elsewhere (hopefully this makes it a bit less of a pain to type out) 2019-05-12 21:27:55 -04:00			`font-size: pxrem(32);`
Give the vue-based error page some basic styles 2018-04-15 22:02:06 -04:00			`}`

			`@include media-breakpoint-up(lg) {`
Rename px2rem to pxrem so it's easier to type frequently, add comments to both sass functions explaining what they do and how to use them, and don't include units where it's used so it's understood that it's not expected elsewhere (hopefully this makes it a bit less of a pain to type out) 2019-05-12 21:27:55 -04:00			`font-size: pxrem(48);`
Give the vue-based error page some basic styles 2018-04-15 22:02:06 -04:00			`}`
			`}`
			`}`