Beta version

components/Card.vue

@@ -2,11 +2,12 @@
 
 <template>
   <main
-    class="enderesque d-flex flex-column rounded-card gap-2 p-4 animate__animated animate__fadeInDown animate__delay-1s"
+    class="dimensions scrollbar background overflow-auto d-flex flex-column rounded-card gap-2 p-4 animate__animated-sm animate__delay-1-5s animate__fadeInDown"
   >
     <Navigation />
-    <h3>Welcome!</h3>
-    <NuxtPage class="ender-card-body" />
+    <NuxtPage
+      class="scrollbar overflow-y-auto mb-3 mb-sm-0 py-4 pe-3 fade-mask"
+    />
   </main>
 </template>
 

components/Copyright.vue

@@ -4,7 +4,7 @@ const currentYear = new Date().getFullYear()
 
 <template>
   <footer
-    class="float user-select-none mb-2 animate__animated animate__fadeInUpBig animate__slow text-align-center line-height-1-5"
+    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 href="https://enderman.ch">Enderman</a>. All

components/EMail.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const props = defineProps({
+  address: {
+    type: String,
+    required: true,
+  },
+  subject: {
+    type: String,
+    default: '',
+  },
+  body: {
+    type: String,
+    default: '',
+  },
+  cc: {
+    type: String,
+    default: '',
+  },
+  bcc: {
+    type: String,
+    default: '',
+  },
+})
+
+const href =
+  `mailto:${props.address}` +
+  (props.body ? `&body=${props.body}` : '') +
+  (props.subject ? `${props.body ? '&' : '?'}subject=${props.subject}` : '') +
+  (props.cc ? `${props.body || props.subject ? '&' : '?'}cc=${props.cc}` : '') +
+  (props.bcc
+    ? `${props.body || props.subject || props.cc ? '&' : '?'}bcc=${props.bcc}`
+    : '')
+</script>
+
+<template>
+  <a class="link-hi" target="_blank" rel="noopener" :href="href">
+    <slot>
+      {{ props.address }}
+    </slot>
+  </a>
+</template>
+
+<style scoped lang="scss"></style>

components/LinkButton.vue

@@ -22,8 +22,8 @@ const props = defineProps({
 
 <template>
   <NuxtLink
-    class="icon link d-flex flex-row align-items-center gap-2 user-select-none no-decoration"
-    active-class="icon-active px-3"
+    class="link d-flex flex-row align-items-center gap-2 user-select-none no-decoration"
+    active-class="icon-active px-sm-3"
     :to="!props.external ? props.path : undefined"
     :href="props.external ? props.path : undefined"
   >
@@ -33,14 +33,16 @@ const props = defineProps({
       :src="props.icon"
       :alt="props.alt"
     />
-    <strong>{{ props.name }}</strong>
+    <span class="display-xs-none">
+      <strong>
+        {{ props.name }}
+      </strong>
+    </span>
   </NuxtLink>
 </template>
 
 <style scoped lang="scss">
 .icon {
-  transition: 0.3s ease;
-
   &-active {
     transform: translate(2px, 2px) rotate3d(1, 1, 1, 5deg) scale(1.25);
   }

components/Logo.vue

@@ -41,7 +41,7 @@ const props = defineProps({
         :alt="props.alt"
       />
       <div>
-        <h1 class="phat mb-0">{{ props.title }}</h1>
+        <h1 class="alex mb-0">{{ props.title }}</h1>
         <Separator />
         <p class="mb-0">{{ props.description }}</p>
       </div>
@@ -50,10 +50,6 @@ const props = defineProps({
 </template>
 
 <style scoped lang="scss">
-.phat {
-  font-family: 'Alexandria', sans-serif;
-}
-
 .logo {
   > img.logo-image {
     transition: ease 0.3s;

components/Navigation.vue

@@ -15,7 +15,7 @@ const icons = [aboutIcon, projectIcon, socialIcon]
 
 <template>
   <nav
-    class="d-flex flex-column flex-lg-row justify-content-lg-between gap-sm-2 gap-lg-3"
+    class="d-flex flex-row flex-wrap flex-sm-column flex-lg-row justify-content-around justify-content-sm-start justify-content-lg-between gap-2 gap-lg-3"
   >
     <Logo
       :src="logo"
@@ -24,7 +24,7 @@ const icons = [aboutIcon, projectIcon, socialIcon]
       description="official website"
     />
     <ul
-      class="navbar-nav flex-sm-row align-items-lg-center justify-content-sm-center gap-sm-3 mx-2"
+      class="navbar-nav flex-row align-items-center align-items-sm-start align-items-lg-center justify-content-center gap-3 m-2 m-sm-0 mx-lg-2 my-sm-2 my-lg-0"
     >
       <li v-for="(page, index) in pages" :key="index" class="nav-item">
         <LinkButton

components/Portal.vue

@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import sky from '~/assets/images/portal/sky.png'
+import particles from '~/assets/images/portal/particles.png'
+
+const resources: string[] = [sky, particles]
+
 const props = defineProps({
   layout: {
     default: '#ender-app',
@@ -79,8 +84,8 @@ class Canvas {
   }
 
   fill() {
-    this.element.width = window.innerWidth
-    this.element.height = window.innerHeight
+    this.element.width = window.innerWidth * window.devicePixelRatio
+    this.element.height = window.innerHeight * window.devicePixelRatio
   }
 
   full(): boolean {
@@ -235,7 +240,7 @@ class Portal {
     if (directory.at(-1) !== '/') directory += '/'
 
     // Images to load.
-    const images = [`${directory}sky.png`, `${directory}particles.png`]
+    const images = resources // [`${directory}sky.png`, `${directory}particles.png`]
 
     // Notice.
     this.notice()
@@ -498,7 +503,7 @@ class Portal {
 
     if (this.animate) {
       // Speed up the animation if the user has clicked.
-      if (this.clickTime !== null) {
+      if (this.clickTime !== 0) {
         this.speed =
           this.dv * this.initialSpeed -
           Math.min(