diff --git a/package.json b/package.json index 788581f..d0fae63 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,8 @@ "description": "These are the template used by [Emptywork](https://emptywork.github.io)", "main": "index.js", "scripts": { - "sass": "sass --no-source-map src/assets/scss/style.scss public/css/style.css", - "sass:compressed": "sass --style=compressed --no-source-map src/assets/scss/style.scss public/css/style.css", + "sass": "sass --no-source-map src/assets/scss/:public/css/", + "sass:compressed": "sass --style=compressed --no-source-map src/assets/scss:public/css/", "watch": "npm-run-all --parallel watch:*", "watch:eleventy": "eleventy --serve", "watch:sass": "npm run sass:compressed -- --watch", diff --git a/src/_includes/layouts/primary.njk b/src/_includes/layouts/primary.njk index cb497c5..33ed0e3 100644 --- a/src/_includes/layouts/primary.njk +++ b/src/_includes/layouts/primary.njk @@ -11,10 +11,13 @@ - + {% if style %} + + {% else %} - - + {% endif %} + + diff --git a/src/_includes/layouts/secondary.njk b/src/_includes/layouts/secondary.njk index 4d28107..ebe7679 100644 --- a/src/_includes/layouts/secondary.njk +++ b/src/_includes/layouts/secondary.njk @@ -1,45 +1,37 @@ - - {% include 'components/meta.njk' %} - - {{ title }} - - - - - - - - - - - - - - {% include 'sections/preload.njk' %} - - {% include 'components/nav.njk' %} - - {{ content | safe }} - - {% include 'sections/footer.njk' %} - - - - + + + {% include 'components/meta.njk' %} + + {{ title }} + + + + + + {% if style %} + + {% else %} + + {% endif %} + + + + + + + + {% include 'sections/preload.njk' %} + + {% include 'components/nav.njk' %} + + {{ content | safe }} + + {% include 'sections/footer.njk' %} + + + + \ No newline at end of file diff --git a/src/assets/scss/error.scss b/src/assets/scss/error.scss new file mode 100644 index 0000000..9780e4e --- /dev/null +++ b/src/assets/scss/error.scss @@ -0,0 +1,14 @@ +@import './modules/vars'; +@import './modules/mixin'; +@import './modules/global'; + +@import './modules/component/preload'; + +@import './modules/header'; +@import './modules/component/nav'; +@import './modules/component/title'; +@import './modules/main'; +@import './modules/footer'; + +@import './modules/component/contact'; +@import './modules/component/error'; diff --git a/src/assets/scss/modules/_vars.scss b/src/assets/scss/modules/_vars.scss index b55150a..08adf7e 100644 --- a/src/assets/scss/modules/_vars.scss +++ b/src/assets/scss/modules/_vars.scss @@ -1,67 +1,68 @@ -html:root { - --clr-accent: hsl(270, 50%, 40%); - --clr-accent-light: hsl(270, 84%, 72%); - --clr-accent-dark: hsl(270, 71%, 22%); - - --clr-href: hsl(270, 80%, 50%); - --clr-href-visited: hsl(270, 70%, 22%); - - --clr-background: hsl(0, 0%, 95%); - --clr-background-900: hsl(0, 0%, 88%); - --clr-background-800: hsl(0, 0%, 75%); - --clr-background-700: hsl(0, 0%, 63%); - --clr-foreground: hsl(0, 0%, 10%); - --clr-foreground-900: hsl(0, 0%, 13%); - --clr-foreground-800: hsl(0, 0%, 25%); - --clr-foreground-700: hsl(0, 0%, 38%); - - --clr-disabled-text: hsl(0, 0%, 50%); - --clr-white: hsl(0, 0%, 100%); - --clr-black: hsl(0, 0%, 0%); - --clr-black-light: hsl(0, 0%, 13%); - - --clr-red: hsl(357, 70%, 41%); - --clr-red-dark: hsl(357, 70%, 30%); - - --bx-shadow-two-side: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.2), - -0.3125rem -0.3125rem 0.625rem hsla(0, 0%, 100%, 0.8); - - &.sunglow { - --clr-accent: hsl(40, 56%, 40%); - --clr-accent-light: hsl(40, 56%, 72%); - --clr-accent-dark: hsl(40, 56%, 22%); - - --clr-href: hsl(40, 56%, 72%); - --clr-href-visited: hsl(40, 56%, 22%); - - --clr-background: hsl(40, 56%, 95%); - --clr-background-900: hsl(40, 56%, 88%); - --clr-background-800: hsl(40, 56%, 75%); - --clr-background-700: hsl(40, 56%, 63%); - --clr-foreground: hsl(40, 56%, 10%); - --clr-foreground-900: hsl(40, 56%, 13%); - --clr-foreground-800: hsl(40, 56%, 25%); - --clr-foreground-700: hsl(40, 56%, 38%); - - &.dark { - --clr-href: hsl(40, 56%, 72%); - --clr-href-visited: hsl(40, 56%, 40%); - } - } - - &.dark { - --clr-href: hsl(270, 84%, 72%); - --clr-href-visited: hsl(270, 50%, 40%); - --clr-background: hsl(0, 0%, 10%); - --clr-background-900: hsl(0, 0%, 13%); - --clr-background-800: hsl(0, 0%, 25%); - --clr-background-700: hsl(0, 0%, 38%); - --clr-foreground: hsl(0, 0%, 95%); - --clr-foreground-900: hsl(0, 0%, 88%); - --clr-foreground-800: hsl(0, 0%, 75%); - --clr-foreground-700: hsl(0, 0%, 63%); - - --bx-shadow-two-side: 0 0.3125rem 0.625rem rgb(0 0 0 / 20%), - -0.3125rem -0.3125rem 0.625rem rgb(58 58 58 / 63%); - } -} +html:root { + --hsl-main: 270; + --clr-accent: hsl(var(--hsl-main), 50%, 40%); + --clr-accent-light: hsl(var(--hsl-main), 84%, 72%); + --clr-accent-dark: hsl(var(--hsl-main), 71%, 22%); + + --clr-href: hsl(var(--hsl-main), 80%, 50%); + --clr-href-visited: hsl(var(--hsl-main), 70%, 22%); + + --clr-background: hsl(0, 0%, 95%); + --clr-background-900: hsl(0, 0%, 88%); + --clr-background-800: hsl(0, 0%, 75%); + --clr-background-700: hsl(0, 0%, 63%); + --clr-foreground: hsl(0, 0%, 10%); + --clr-foreground-900: hsl(0, 0%, 13%); + --clr-foreground-800: hsl(0, 0%, 25%); + --clr-foreground-700: hsl(0, 0%, 38%); + + --clr-disabled-text: hsl(0, 0%, 50%); + --clr-white: hsl(0, 0%, 100%); + --clr-black: hsl(0, 0%, 0%); + --clr-black-light: hsl(0, 0%, 13%); + + --clr-red: hsl(357, 70%, 41%); + --clr-red-dark: hsl(357, 70%, 30%); + + --bx-shadow-two-side: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.2), + -0.3125rem -0.3125rem 0.625rem hsla(0, 0%, 100%, 0.8); + + &.sunglow { + --clr-accent: hsl(40, 56%, 40%); + --clr-accent-light: hsl(40, 56%, 72%); + --clr-accent-dark: hsl(40, 56%, 22%); + + --clr-href: hsl(40, 56%, 72%); + --clr-href-visited: hsl(40, 56%, 22%); + + --clr-background: hsl(40, 56%, 95%); + --clr-background-900: hsl(40, 56%, 88%); + --clr-background-800: hsl(40, 56%, 75%); + --clr-background-700: hsl(40, 56%, 63%); + --clr-foreground: hsl(40, 56%, 10%); + --clr-foreground-900: hsl(40, 56%, 13%); + --clr-foreground-800: hsl(40, 56%, 25%); + --clr-foreground-700: hsl(40, 56%, 38%); + + &.dark { + --clr-href: hsl(40, 56%, 72%); + --clr-href-visited: hsl(40, 56%, 40%); + } + } + + &.dark { + --clr-href: hsl(270, 84%, 72%); + --clr-href-visited: hsl(270, 50%, 40%); + --clr-background: hsl(0, 0%, 10%); + --clr-background-900: hsl(0, 0%, 13%); + --clr-background-800: hsl(0, 0%, 25%); + --clr-background-700: hsl(0, 0%, 38%); + --clr-foreground: hsl(0, 0%, 95%); + --clr-foreground-900: hsl(0, 0%, 88%); + --clr-foreground-800: hsl(0, 0%, 75%); + --clr-foreground-700: hsl(0, 0%, 63%); + + --bx-shadow-two-side: 0 0.3125rem 0.625rem rgb(0 0 0 / 20%), + -0.3125rem -0.3125rem 0.625rem rgb(58 58 58 / 63%); + } +} diff --git a/src/assets/scss/modules/component/_contact.scss b/src/assets/scss/modules/component/_contact.scss index d867435..17389b8 100644 --- a/src/assets/scss/modules/component/_contact.scss +++ b/src/assets/scss/modules/component/_contact.scss @@ -48,7 +48,7 @@ } a { - color: var(--clr-accent); + color: var(--clr-accent-light); text-decoration: underline; text-underline-offset: 0.2em; font-weight: 500; diff --git a/src/assets/scss/modules/component/_error.scss b/src/assets/scss/modules/component/_error.scss index 112f1cd..fd23b3d 100644 --- a/src/assets/scss/modules/component/_error.scss +++ b/src/assets/scss/modules/component/_error.scss @@ -1,42 +1,120 @@ .error { - &-notice { - max-width: 40em; - border-radius: 1em; - padding: 1.5em 1.5em; - transition-delay: 200ms; - position: relative; - margin-top: 2em; + &-container { + @extend .contact-container; + } - * { - position: relative; - z-index: 1; + &-summary { + @extend .contact-summary; + + h2 { + line-height: 1; + font-size: 1.8rem; + font-variant: all-small-caps; + margin-bottom: 1rem; } + } - &::after { + &-decorative { + aspect-ratio: 10/1; + width: 100%; + margin-bottom: 1em; + border-radius: 0.7em; + background-image: linear-gradient(-45deg, var(--clr-accent) 2%, transparent var(--_transparent-limit), var(--clr-accent)); + position: relative; + box-shadow: inset 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.5); + + .decorative { + user-select: none; position: absolute; - content: ""; - background-color: var(--clr-background); - z-index: 0; - border-radius: 1em; - width: 100%; - height: 100%; - left: 50%; - top: 50%; - z-index: 0; - translate: -50% -50%; + filter: drop-shadow(0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.5)); + + &-left { + position: absolute; + font-size: 9rem; + font-variant: all-small-caps; + font-weight: 900; + height: 100%; + + animation: bounce-up-down 1.5s infinite forwards; + + @include breakpoint-down('small') { + font-size: 7rem; + } + } + + &-exclamation { + top: 50%; + translate: 0% -50%; + rotate: -20deg; + } + + &-question { + top: 0%; + left: 0.2em; + translate: 0% -50%; + rotate: 15deg; + } } - &::before { + svg { position: absolute; - content: ""; - background-color: red; - background-image: linear-gradient(90deg, var(--clr-background-900), var(--clr-accent-light)); - border-radius: 1em; - width: calc(100% + 1em); - height: calc(100% + 2em); - left: 50%; + aspect-ratio: 1/1; + height: 120%; + width: auto; + rotate: -20deg; top: 50%; - translate: -50% -51%; + right: 0; + translate: 0% -50%; + animation: svg-move 4s infinite forwards; + + filter: drop-shadow(0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.5)); + } + + @include breakpoint-down('small') { + aspect-ratio: 4/1; } + + @keyframes svg-move { + 40% { + rotate: 30deg; + } + + 50% { + rotate: 20deg; + } + + 90% { + rotate: -30deg; + } + + 100% { + rotate: -20deg; + } + } + + @keyframes bounce-up-down { + 50% { + margin-top: -0.6rem; + rotate: 2deg; + } + + 100% { + margin-top: 0; + rotate: 0; + } + } + } + + &-button { + @extend .social-container; + @extend .social-container__small; + + li:first-of-type .error-link:first-of-type:after { + background-image: linear-gradient(-45deg, var(--clr-accent) 2%, transparent var(--_transparent-limit), var(--clr-accent)); + } + } + + &-link { + @extend .social-item; } -} +} \ No newline at end of file diff --git a/src/error.njk b/src/error.njk index 2aeb09f..07569b6 100644 --- a/src/error.njk +++ b/src/error.njk @@ -1,7 +1,8 @@ --- title : 'Page not Found | EmptyWork' -description: "The page that you are looking for is not exist, please check for any miss typed words or make sure you are accessing the right url." +description: "The page that you are looking for does not exist" layout: 'layouts/secondary.njk' +style: 'error.css' ---
@@ -11,7 +12,7 @@ layout: 'layouts/secondary.njk' Home › Page Not Found -

+

Link to heading "Error" @@ -19,9 +20,33 @@ layout: 'layouts/secondary.njk' Page Not Found

-
-

The page that you are looking for is not exist, please check for any miss typed words or make sure you are accessing the right url.

- Go Back +
+
+
+ {% include "components/svg/logo.njk" %} +
+

!

+

?

+
+
+

404 — The page that you + are looking for + does not exist

+

Please make sure that the URL you + typed are + correct, if you think that the + URL is correct but you still cannot seems to access it please contact me via email +

+
+