Overall improvements, updated pages
This commit is contained in:
parent
099b876032
commit
a39ad3b464
17
app.vue
17
app.vue
|
|
@ -9,20 +9,15 @@ useHead({
|
|||
<template>
|
||||
<div
|
||||
id="ender-layout"
|
||||
class="d-flex flex-column align-items-center pt-sm-5 h-100"
|
||||
class="d-flex flex-column align-items-center pt-sm-5 h-100 animate__animated-sm animate__delay-1-5s animate__fadeInDown"
|
||||
>
|
||||
<Transition name="page">
|
||||
<Card />
|
||||
</Transition>
|
||||
<Card
|
||||
id="pogger"
|
||||
class="dimensions background rounded-1 overflow-auto d-flex flex-column gap-4 gap-sm-2 px-4 pt-4 pb-3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Portal
|
||||
layout="#ender-layout"
|
||||
directory="/images/portal"
|
||||
animate
|
||||
randomize
|
||||
fade
|
||||
/>
|
||||
<Portal layout="#ender-layout" animate randomize fade />
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
@counter-style enjoy {
|
||||
system: fixed;
|
||||
symbols: "\2728" "\1F4A1" "\1F4D5" "\1F30D" "\2615" "\26C4";
|
||||
symbols: "\2728" "\1F4A1" "\1F4BE" "\1F3A5" "\1F4D5" "\1F30D" "\2615" "\26C4";
|
||||
suffix: " ";
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15563,13 +15563,23 @@ textarea.form-control-lg {
|
|||
}
|
||||
|
||||
.page-enter-active, .page-leave-active {
|
||||
transition: all 0.4s;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.page-enter-from, .page-leave-to {
|
||||
opacity: 0;
|
||||
filter: blur(1em);
|
||||
}
|
||||
|
||||
.expand-enter-active,
|
||||
.expand-leave-active {
|
||||
transition-property: opacity, height;
|
||||
}
|
||||
|
||||
.expand-enter,
|
||||
.expand-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@counter-style do {
|
||||
system: fixed;
|
||||
symbols: "💻" "📌" "👻" "📷";
|
||||
|
|
@ -15577,7 +15587,7 @@ textarea.form-control-lg {
|
|||
}
|
||||
@counter-style enjoy {
|
||||
system: fixed;
|
||||
symbols: "✨" "💡" "📕" "🌍" "☕" "⛄";
|
||||
symbols: "✨" "💡" "💾" "🎥" "📕" "🌍" "☕" "⛄";
|
||||
suffix: " ";
|
||||
}
|
||||
.list-style-type-none {
|
||||
|
|
@ -15610,6 +15620,8 @@ body {
|
|||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: pixelated;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: white;
|
||||
font-family: "Lato", sans-serif;
|
||||
font-size: 18px;
|
||||
|
|
@ -15646,6 +15658,10 @@ body {
|
|||
font-family: "Alexandria", sans-serif;
|
||||
}
|
||||
|
||||
.smooth-glide {
|
||||
transition: height 0.4s linear;
|
||||
}
|
||||
|
||||
.background {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
|
@ -15680,31 +15696,25 @@ body {
|
|||
background: radial-gradient(circle at left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
@property --scrollbar {
|
||||
syntax: "<color>";
|
||||
inherits: true;
|
||||
initial-value: rgba(255, 255, 255, 0.15);
|
||||
#pogger {
|
||||
transition: min-height 0.5s linear;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
min-height: 128px;
|
||||
transition: --scrollbar 0.15s ease;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.scrollbar:hover {
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.3);
|
||||
--scrollbar: rgba(255, 255, 255, 0.3);
|
||||
scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.scrollbar::-webkit-scrollbar-track {
|
||||
border-radius: 8px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.scrollbar::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
background-color: var(--scrollbar);
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
|
|
@ -15712,14 +15722,14 @@ body {
|
|||
color: black;
|
||||
}
|
||||
.scrollbar {
|
||||
scrollbar-color: rgba(0, 0, 0, 0.15) rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.scrollbar:hover {
|
||||
scrollbar-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.3);
|
||||
--scrollbar: rgba(0, 0, 0, 0.3);
|
||||
scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.scrollbar::-webkit-scrollbar-track {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.scrollbar::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.background {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
|
|
@ -15746,13 +15756,13 @@ body {
|
|||
}
|
||||
.dimensions {
|
||||
width: 80%;
|
||||
min-height: auto;
|
||||
min-height: fit-content;
|
||||
max-height: 90%;
|
||||
}
|
||||
.fade-mask {
|
||||
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, rgba(0, 0, 0, 0));
|
||||
}
|
||||
.rounded-card {
|
||||
.rounded-1 {
|
||||
border-radius: 1em;
|
||||
}
|
||||
.display-xs-none {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -43,9 +43,12 @@ body {
|
|||
background-repeat: no-repeat;
|
||||
|
||||
image-rendering: pixelated;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
color: white;
|
||||
font-family: 'Lato', sans-serif;
|
||||
|
||||
font-size: 18px;
|
||||
|
||||
height: 100%;
|
||||
|
|
@ -83,6 +86,10 @@ body {
|
|||
font-family: 'Alexandria', sans-serif;
|
||||
}
|
||||
|
||||
.smooth-glide {
|
||||
transition: height 0.4s linear;
|
||||
}
|
||||
|
||||
// Query-overridable classes.
|
||||
.background {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
|
|
@ -131,24 +138,15 @@ body {
|
|||
);
|
||||
}
|
||||
|
||||
@property --scrollbar {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: rgba(255, 255, 255, 0.15);
|
||||
#pogger {
|
||||
transition: min-height 0.5s linear;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
min-height: 128px;
|
||||
|
||||
transition: --scrollbar 0.15s ease;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.3);
|
||||
|
||||
&:hover {
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.3);
|
||||
--scrollbar: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.2);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
|
|
@ -156,12 +154,12 @@ body {
|
|||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 8px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
background-color: var(--scrollbar);
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -171,16 +169,16 @@ body {
|
|||
}
|
||||
|
||||
.scrollbar {
|
||||
scrollbar-color: rgba(0, 0, 0, 0.15) rgba(255, 255, 255, 0.3);
|
||||
|
||||
&:hover {
|
||||
scrollbar-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.3);
|
||||
--scrollbar: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.2);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
|
|
@ -223,7 +221,7 @@ body {
|
|||
|
||||
.dimensions {
|
||||
width: 80%;
|
||||
min-height: auto;
|
||||
min-height: fit-content;
|
||||
|
||||
max-height: 90%;
|
||||
}
|
||||
|
|
@ -232,7 +230,7 @@ body {
|
|||
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.rounded-card {
|
||||
.rounded-1 {
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.page {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 0.4s;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
&-enter-from,
|
||||
|
|
@ -10,3 +10,13 @@
|
|||
filter: blur(1em);
|
||||
}
|
||||
}
|
||||
|
||||
.expand-enter-active,
|
||||
.expand-leave-active {
|
||||
transition-property: opacity, height;
|
||||
}
|
||||
|
||||
.expand-enter,
|
||||
.expand-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<main
|
||||
class="dimensions background overflow-auto d-flex flex-column rounded-card gap-4 gap-sm-2 px-4 pt-4 pb-3 animate__animated-sm animate__delay-1-5s animate__fadeInDown"
|
||||
>
|
||||
<main>
|
||||
<Navigation />
|
||||
<NuxtPage
|
||||
class="scrollbar overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3 fade-mask"
|
||||
/>
|
||||
<NuxtLoadingIndicator />
|
||||
<NuxtLayout>
|
||||
<NuxtPage
|
||||
class="scrollbar fade-mask overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3"
|
||||
>
|
||||
</NuxtPage>
|
||||
</NuxtLayout>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,10 +15,7 @@ const mailTemplate = `I've just found a bug on https://enderman.ch and would lik
|
|||
<footer
|
||||
class="float user-select-none mb-2 animate__animated animate__delay-1s animate__fadeInUpBig animate__slow text-align-center line-height-1-5"
|
||||
>
|
||||
<span class="transpaque font-small text-shadow">
|
||||
© 2018-{{ currentYear }},
|
||||
<a class="link-hi-force-dark" href="https://enderman.ch">Enderman</a>. All
|
||||
rights reserved. •
|
||||
<span class="transpaque font-small text-shadow px-2">
|
||||
<EMail
|
||||
class="link-hi-force-dark"
|
||||
address="contact@enderman.ch"
|
||||
|
|
@ -28,8 +25,12 @@ const mailTemplate = `I've just found a bug on https://enderman.ch and would lik
|
|||
>
|
||||
<strong>Report a bug</strong>
|
||||
</EMail>
|
||||
<br />
|
||||
© 2018-{{ currentYear }},
|
||||
<a class="link-hi-force-dark" href="https://enderman.ch">Enderman</a>. All
|
||||
rights reserved.
|
||||
<sub>
|
||||
β{{ config.public.version ? config.public.version : '0.0.0' }} ({{
|
||||
β{{ config.public.version ? config.public.version : '?.?.?' }} ({{
|
||||
config.public.buildDate ? config.public.buildDate : '1970-01-01'
|
||||
}})
|
||||
</sub>
|
||||
|
|
|
|||
|
|
@ -611,7 +611,7 @@ onMounted(() => {
|
|||
const portal = new Portal(
|
||||
props.directory,
|
||||
props.create,
|
||||
props.animate,
|
||||
props.animate && window.innerWidth > 600,
|
||||
props.randomize,
|
||||
props.fade,
|
||||
props.speed,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
<script setup>
|
||||
console.log('Transition started')
|
||||
function enter(el, done) {
|
||||
const width = getComputedStyle(el).width
|
||||
console.log('@enter')
|
||||
el.style.width = width
|
||||
el.style.position = 'absolute'
|
||||
el.style.visibility = 'hidden'
|
||||
el.style.height = 'auto'
|
||||
|
||||
const height = getComputedStyle(el).height
|
||||
|
||||
el.style.width = ''
|
||||
el.style.position = ''
|
||||
el.style.visibility = ''
|
||||
el.style.height = '0'
|
||||
|
||||
// Force repaint to make sure the
|
||||
// animation is triggered correctly.
|
||||
getComputedStyle(el).height
|
||||
|
||||
// Trigger the animation.
|
||||
// We use `requestAnimationFrame` because we need
|
||||
// to make sure the browser has finished
|
||||
// painting after setting the `height`
|
||||
// to `0` in the line above.
|
||||
requestAnimationFrame(() => {
|
||||
el.style.height = height
|
||||
})
|
||||
|
||||
done()
|
||||
}
|
||||
|
||||
function afterEnter(element) {
|
||||
console.log('@after-enter')
|
||||
element.style.height = 'auto'
|
||||
}
|
||||
|
||||
function leave(element) {
|
||||
console.log('@leave')
|
||||
const height = getComputedStyle(element).height
|
||||
|
||||
element.style.height = height
|
||||
|
||||
// Force repaint to make sure the
|
||||
// animation is triggered correctly.
|
||||
getComputedStyle(element).height
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
element.style.height = '0'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Transition
|
||||
name="expand"
|
||||
@enter="enter"
|
||||
@after-enter="afterEnter"
|
||||
@leave="leave"
|
||||
>
|
||||
<slot />
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
will-change: height;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -41,7 +41,12 @@ useHead({
|
|||
|
||||
<template>
|
||||
<section>
|
||||
<p>This page shall be added in a future release.</p>
|
||||
<h3 class="alex">About me</h3>
|
||||
<p>
|
||||
This page is currently under construction, however, I can tell you I'm
|
||||
Andrew and I'm {{ age }} years old. The page will be updated as time goes
|
||||
on.
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -81,6 +81,8 @@ useHead({
|
|||
<ul class="list-style-type-enjoy">
|
||||
<li>Teaching</li>
|
||||
<li>Mathematics</li>
|
||||
<li>Technology</li>
|
||||
<li>Video Production</li>
|
||||
<li>Philosophy</li>
|
||||
<li>Geopolitics</li>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,15 @@ useHead({
|
|||
|
||||
<template>
|
||||
<section>
|
||||
<p>This page shall be added in a future release.</p>
|
||||
<h3 class="alex">Projects</h3>
|
||||
<p>This page is under construction. My current projects are:</p>
|
||||
<ul>
|
||||
<li>MalwareWatch</li>
|
||||
<li>You Are an Idiot! (dot cc)</li>
|
||||
<li>HURR-DURR (dot cc)</li>
|
||||
<li>ClickSword</li>
|
||||
<li>Windows XP Keygen / UMSKT</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -87,19 +87,23 @@ useHead({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<section>
|
||||
<h3 class="alex">Social media</h3>
|
||||
<ul class="list-style-type-none p-0">
|
||||
<li v-for="(page, index) in socials" :key="index">
|
||||
<FontAwesomeIcon :icon="`fa-brands fa-${page.icon}`" />
|
||||
<a class="link-hi" target="_blank" rel="noopener" :href="page.url">{{
|
||||
page.name
|
||||
}}</a>
|
||||
<div class="d-flex flex-row align-items-center gap-1">
|
||||
<ClientOnly>
|
||||
<FontAwesomeIcon :icon="`fa-brands fa-${page.icon}`" fixed-width />
|
||||
</ClientOnly>
|
||||
<a class="link-hi" target="_blank" rel="noopener" :href="page.url">
|
||||
{{ page.name }}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 class="alex">Contact me</h3>
|
||||
<p>
|
||||
Fanmail:
|
||||
Personal:
|
||||
<EMail
|
||||
class="link-hi"
|
||||
address="contact@enderman.ch"
|
||||
|
|
@ -108,7 +112,7 @@ useHead({
|
|||
Manager: <EMail class="link-hi" address="manager@enderman.ch" /><br />
|
||||
Abuse: <EMail class="link-hi" address="abuse@enderman.ch" />
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
import type { Router } from 'vue-router'
|
||||
|
||||
interface CustomRouter extends Router {
|
||||
running?: boolean
|
||||
nextRoute?: string | null
|
||||
}
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
const customRouter: CustomRouter = useRouter()
|
||||
|
||||
nuxtApp.hook('page:start', () => {
|
||||
customRouter.running = false
|
||||
customRouter.beforeEach((to, _from, next) => {
|
||||
if (customRouter.running) {
|
||||
next(true)
|
||||
} else {
|
||||
customRouter.nextRoute = to.fullPath
|
||||
next(false)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
nuxtApp.hook('page:transition:finish', () => {
|
||||
customRouter.running = true
|
||||
if (customRouter.nextRoute) {
|
||||
customRouter
|
||||
.push(customRouter.nextRoute)
|
||||
.then(() => (customRouter.nextRoute = null))
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
User-agent: *
|
||||
Disallow: /images
|
||||
Sitemap: https://enderman.ch/sitemap.xml
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http:www.w3.org/1999/xhtml">
|
||||
<url>
|
||||
<loc>https://enderman.ch/</loc>
|
||||
<lastmod>2023-11-19</lastmod>
|
||||
<changefreq>never</changefreq>
|
||||
<priority>1</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://enderman.ch/about</loc>
|
||||
<lastmod>2023-11-19</lastmod>
|
||||
<changefreq>yearly</changefreq>
|
||||
<priority>0.6</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://enderman.ch/projects</loc>
|
||||
<lastmod>2023-11-19</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://enderman.ch/socials</loc>
|
||||
<lastmod>2023-11-19</lastmod>
|
||||
<changefreq>yearly</changefreq>
|
||||
<priority>0.75</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
Loading…
Reference in New Issue