Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: error — revamping the design to follows contact.njk #175

Merged
merged 8 commits into from
Aug 27, 2023
Merged

feat: error — revamping the design to follows contact.njk #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6230dd8
update: `_error.scss` — follows design from `_contact.scss`
EmptyWork Aug 26, 2023
7e0c7ab
update: `_contact.scss` — link more brighter
EmptyWork Aug 27, 2023
b199e46
update: `primary.njk` — new front-matter variable
EmptyWork Aug 27, 2023
c2e779a
update: `secondary.njk` — new front-matter variable
EmptyWork Aug 27, 2023
f6e7710
update: `_vars.scss` — more specific hsl color
EmptyWork Aug 27, 2023
edb89b7
create: `error.njk` — localized styling for `error.njk`
EmptyWork Aug 27, 2023
ed3c8bf
update: `package.json` — support multi-files `scss` converter
EmptyWork Aug 27, 2023
4da4b6d
update: `error.njk` — new styling as the `contact.njk`
EmptyWork Aug 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 6 additions & 3 deletions src/_includes/layouts/primary.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,13 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap"
rel="stylesheet" />

{% if style %}
<link rel="stylesheet" href="/css/{{ style }}" />
{% else %}
<link rel="stylesheet" href="/css/style.css" />
<script src="/js/loadTheme.js"></script>
<script src="/js/redirect.js"></script>
{% endif %}
<script src="/js/loadTheme.js" defer></script>
<script src="/js/redirect.js" defer></script>
</head>

<body class="t-all not-loaded">
Expand Down
76 changes: 34 additions & 42 deletions src/_includes/layouts/secondary.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,37 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
{% include 'components/meta.njk' %}

<title>{{ title }}</title>

<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>

<link rel="stylesheet" href="/css/style.css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">

<script src="/js/loadTheme.js"></script>
<script src="/js/redirect.js"></script>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body class="t-all not-loaded">
{% include 'sections/preload.njk' %}

{% include 'components/nav.njk' %}

{{ content | safe }}

{% include 'sections/footer.njk' %}

<script src="/js/main.js"></script>
<script>
if (window.netlifyIdentity) {
window
.netlifyIdentity
.on("init", user => {
if (!user) {
window
.netlifyIdentity
.on("login", () => {
document.location.href = "/admin/";
});
}
});
}
</script>
</body>

<head>
{% include 'components/meta.njk' %}

<title>{{ title }}</title>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet" />

{% if style %}
<link rel="stylesheet" href="/css/{{ style }}" />
{% else %}
<link rel="stylesheet" href="/css/style.css" />
{% endif %}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">

<script src="/js/loadTheme.js" defer></script>
<script src="/js/redirect.js" defer></script>
</head>

<body class="t-all not-loaded">
{% include 'sections/preload.njk' %}

{% include 'components/nav.njk' %}

{{ content | safe }}

{% include 'sections/footer.njk' %}

<script src="/js/main.js"></script>
</body>

</html>
14 changes: 14 additions & 0 deletions src/assets/scss/error.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
135 changes: 68 additions & 67 deletions src/assets/scss/modules/_vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%);
}
}
2 changes: 1 addition & 1 deletion src/assets/scss/modules/component/_contact.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading