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 %}">
|
||||
{% 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/fonts/noto-sans/noto-sans.css' | url | safe}}">
|
||||
|
||||
{# JavaScript #}
|
||||
<script rel="preload" src="/assets/js/redirect.js" as="script"></script>
|
||||
|
||||
{# Favicon #}
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||
|
|
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue