Skip to content

Commit

Permalink
404 page.
Browse files Browse the repository at this point in the history
  • Loading branch information
eugenchio committed Dec 25, 2024
1 parent b8af2bb commit 37af30b
Show file tree
Hide file tree
Showing 3 changed files with 159 additions and 0 deletions.
81 changes: 81 additions & 0 deletions assets/sass/404.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
@import './vars';
@import './mixins';
@import './typography';

.page-not-found {
.wrapper {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
min-height: 100vh;
}

.logo {
margin-top: 2rem;
@include media-up(md) {
margin-top: 3rem;
}
}

h1 {
color: $primary-violet;
font-size: 3rem;
font-weight: $font-weight-bold;
line-height: 1;
margin-top: auto;
position: relative;
@include media-up(sm) {
font-size: 6.375rem;
}
@include media-up(md) {
font-size: 12rem;
}

&::before,
&::after {
background-color: $primary-orange;
content: '';
display: block;
height: 2px;
position: absolute;
top: 50%;
width: 30px;
@include media-up(md) {
width: 100px;
}
}

&::before {
right: calc(100% + 1rem);
@include media-up(md) {
right: calc(100% + 2.5rem);
}
}

&::after {
left: calc(100% + 1rem);
@include media-up(md) {
left: calc(100% + 2.5rem);
}
}
}

h2 {
margin-top: 0.5rem;
font-size: 1.5rem;
@include media-up(sm) {
font-size: 2rem;
}
}

.link {
margin-bottom: auto;
margin-top: 4rem;

a:hover {
color: $primary-orange;
}
}

}
1 change: 1 addition & 0 deletions assets/sass/main.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import './about';
@import './404';
@import './article';
@import './blog';
@import './blog-navigation';
Expand Down
77 changes: 77 additions & 0 deletions layouts/404.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>{{ .Title }}</title>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/img/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/img/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/img/favicon/favicon-16x16.png"
/>
<link rel="manifest" href="/img/favicon/site.webmanifest" />
<script type="importmap">
{
"imports": {
"@sentry/browser": "/vendor/@[email protected]",
"alpinejs": "/vendor/[email protected]",
"autosize": "/vendor/[email protected]",
"scroll-lock": "/vendor/[email protected]",
"swiper": "/vendor/[email protected]",
"swiper/css": "/vendor/[email protected]",
"swiper/css/pagination": "/vendor/[email protected]",
"swiper/modules/pagination": "/vendor/[email protected]",
"/npm/": "https://cdn.jsdelivr.net/npm/"
{{- /* @sentry/browser loads some more modules from jsdelivr */}}
}
}
</script>
{{- with resources.Get "sass/main.scss" }}
{{- $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }}
{{- with . | toCSS $opts }}
{{- if hugo.IsDevelopment }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{- else }}
{{- with . | minify | fingerprint }}
<link
rel="stylesheet"
href="{{ .RelPermalink }}"
integrity="{{ .Data.Integrity }}"
crossorigin="anonymous"
>
{{- end }}
{{- end }}
{{- end }}
{{- end }}
</head>
<body>

<div class="page-not-found">
<div class="wrapper">
<a
class="footer--logo logo"
href="/"
>
{{ (resources.Get "img/logo.svg").Content | strings.TrimSpace | safeHTML }}
</a>
<h1>404</h1>
<h2>Page not found</h2>
<div class="link">
<a href="/">Go back to the beginning</a>
</div>
</div>
</div>
</body>
</html>

0 comments on commit 37af30b

Please sign in to comment.