From 2ea3f59bec6a17cc7f5f6a527cf27a8fc6f326d5 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Mon, 10 Jun 2024 18:14:34 +0800
Subject: [PATCH] Adjust style of 404 page
---
src/_includes/misc/base.njk | 7 ++-----
src/assets/css/misc.css | 37 +++++++++++++------------------------
2 files changed, 15 insertions(+), 29 deletions(-)
diff --git a/src/_includes/misc/base.njk b/src/_includes/misc/base.njk
index c296fd4f..66060a22 100644
--- a/src/_includes/misc/base.njk
+++ b/src/_includes/misc/base.njk
@@ -9,12 +9,9 @@
{% include "global/metagen.njk" %}
- {# CSS #}
+ {# Style #}
+ {% include "global/defaultfont.njk" %}
-
-
- {# JavaScript #}
-
{# Favicon #}
diff --git a/src/assets/css/misc.css b/src/assets/css/misc.css
index 61db2d2e..e081d30e 100644
--- a/src/assets/css/misc.css
+++ b/src/assets/css/misc.css
@@ -2,29 +2,22 @@
/* Custom Properties */
/* ------------------- */
:root {
- --clr-body-bg: #000000;
- --clr-body-txt: #ffffff;
+ --clr-body-bg: #08031A;
+ --clr-body-txt: #fceaff;
--clr-h1: #BA6FE8;
--clr-link-btn-bg: #7A37A3;
--clr-link-btn-hover: #BA6FE8;
- --ff-default: 'Noto Sans';
+ --ff-default: 'Lexend';
- --fs-h1: 3.1rem;
- --fs-body: 1rem;
- --fs-link-btn: 2rem;
+ --fs-h1: clamp(2rem, 1.5rem + 5vw, 3.5rem);
+ --fs-p: 1.25rem;
+ --fs-link-btn: clamp(1.55rem, 1rem + 3vw, 2.15rem);
--fw-reg: 400;
--fw-link-btn: 600;
}
-/* Tablet screen size */
-@media only screen and (min-width: 43.75rem) {
- :root {
- --fs-h1: 4rem;
- }
-}
-
/* ------------------- */
/* CSS Reset */
/* ------------------- */
@@ -108,8 +101,8 @@ textarea:not([rows]) {
body {
font-size: var(--clr-body-bg);
- font-family: var(--ff-default), Arial, Helvetica, sans-serif;
- color: #FFFFFF;
+ font-family: var(--ff-default), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ color: var(--clr-body-txt);
background: var(--clr-body-bg);
text-align: center;
}
@@ -136,7 +129,7 @@ h1 {
}
p {
- font-size: 1.5rem;
+ font-size: var(--fs-p);
}
.index__btn-wrapper {
@@ -151,8 +144,8 @@ p {
font-size: var(--fs-link-btn);
font-weight: var(--fw-link-btn);
border: none;
- border-radius: 0.6rem;
- padding: 1rem 1.25rem;
+ border-radius: 0.4em;
+ padding: 0.4em 0.75em;
margin: 0.5rem;
background: var(--clr-link-btn-bg);
color: var(--clr-body-txt);
@@ -162,14 +155,10 @@ p {
.index__link:hover {
cursor: pointer;
background: var(--clr-link-btn-hover);
- transition: 0.5s;
+ transition: 0.3s;
}
.index__link:focus {
- outline-offset: 0.15em;
outline: 0.1em solid var(--clr-body-txt);
-}
-
-a:focus img {
- outline: 0.2em solid var(--clr-body-txt);
+ outline-offset: -0.15em;
}
\ No newline at end of file