Adjust style of 404 page
This commit is contained in:
parent
f6ece97b18
commit
2ea3f59bec
|
@ -9,12 +9,9 @@
|
||||||
<meta property="og:title" content="{% if title %}{{ title }}{% else %}{{ sitemeta.siteName }}{% endif %}">
|
<meta property="og:title" content="{% if title %}{{ title }}{% else %}{{ sitemeta.siteName }}{% endif %}">
|
||||||
{% include "global/metagen.njk" %}
|
{% include "global/metagen.njk" %}
|
||||||
|
|
||||||
{# CSS #}
|
{# Style #}
|
||||||
|
{% include "global/defaultfont.njk" %}
|
||||||
<link rel="stylesheet" href="{{'/assets/css/misc.css' | url | safe}}">
|
<link rel="stylesheet" href="{{'/assets/css/misc.css' | url | safe}}">
|
||||||
<link rel="stylesheet" href="{{'/assets/fonts/noto-sans/noto-sans.css' | url | safe}}">
|
|
||||||
|
|
||||||
{# JavaScript #}
|
|
||||||
<script rel="preload" src="/assets/js/redirect.js" as="script"></script>
|
|
||||||
|
|
||||||
{# Favicon #}
|
{# Favicon #}
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||||
|
|
|
@ -2,29 +2,22 @@
|
||||||
/* Custom Properties */
|
/* Custom Properties */
|
||||||
/* ------------------- */
|
/* ------------------- */
|
||||||
:root {
|
:root {
|
||||||
--clr-body-bg: #000000;
|
--clr-body-bg: #08031A;
|
||||||
--clr-body-txt: #ffffff;
|
--clr-body-txt: #fceaff;
|
||||||
--clr-h1: #BA6FE8;
|
--clr-h1: #BA6FE8;
|
||||||
--clr-link-btn-bg: #7A37A3;
|
--clr-link-btn-bg: #7A37A3;
|
||||||
--clr-link-btn-hover: #BA6FE8;
|
--clr-link-btn-hover: #BA6FE8;
|
||||||
|
|
||||||
--ff-default: 'Noto Sans';
|
--ff-default: 'Lexend';
|
||||||
|
|
||||||
--fs-h1: 3.1rem;
|
--fs-h1: clamp(2rem, 1.5rem + 5vw, 3.5rem);
|
||||||
--fs-body: 1rem;
|
--fs-p: 1.25rem;
|
||||||
--fs-link-btn: 2rem;
|
--fs-link-btn: clamp(1.55rem, 1rem + 3vw, 2.15rem);
|
||||||
|
|
||||||
--fw-reg: 400;
|
--fw-reg: 400;
|
||||||
--fw-link-btn: 600;
|
--fw-link-btn: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tablet screen size */
|
|
||||||
@media only screen and (min-width: 43.75rem) {
|
|
||||||
:root {
|
|
||||||
--fs-h1: 4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ------------------- */
|
/* ------------------- */
|
||||||
/* CSS Reset */
|
/* CSS Reset */
|
||||||
/* ------------------- */
|
/* ------------------- */
|
||||||
|
@ -108,8 +101,8 @@ textarea:not([rows]) {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-size: var(--clr-body-bg);
|
font-size: var(--clr-body-bg);
|
||||||
font-family: var(--ff-default), Arial, Helvetica, sans-serif;
|
font-family: var(--ff-default), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
color: #FFFFFF;
|
color: var(--clr-body-txt);
|
||||||
background: var(--clr-body-bg);
|
background: var(--clr-body-bg);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -136,7 +129,7 @@ h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 1.5rem;
|
font-size: var(--fs-p);
|
||||||
}
|
}
|
||||||
|
|
||||||
.index__btn-wrapper {
|
.index__btn-wrapper {
|
||||||
|
@ -151,8 +144,8 @@ p {
|
||||||
font-size: var(--fs-link-btn);
|
font-size: var(--fs-link-btn);
|
||||||
font-weight: var(--fw-link-btn);
|
font-weight: var(--fw-link-btn);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0.6rem;
|
border-radius: 0.4em;
|
||||||
padding: 1rem 1.25rem;
|
padding: 0.4em 0.75em;
|
||||||
margin: 0.5rem;
|
margin: 0.5rem;
|
||||||
background: var(--clr-link-btn-bg);
|
background: var(--clr-link-btn-bg);
|
||||||
color: var(--clr-body-txt);
|
color: var(--clr-body-txt);
|
||||||
|
@ -162,14 +155,10 @@ p {
|
||||||
.index__link:hover {
|
.index__link:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: var(--clr-link-btn-hover);
|
background: var(--clr-link-btn-hover);
|
||||||
transition: 0.5s;
|
transition: 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index__link:focus {
|
.index__link:focus {
|
||||||
outline-offset: 0.15em;
|
|
||||||
outline: 0.1em solid var(--clr-body-txt);
|
outline: 0.1em solid var(--clr-body-txt);
|
||||||
}
|
outline-offset: -0.15em;
|
||||||
|
|
||||||
a:focus img {
|
|
||||||
outline: 0.2em solid var(--clr-body-txt);
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue