Adaptive layout improved

app.vue

@@ -23,7 +23,7 @@ useHead({
     randomize
     fade
   />
-  <Copyright />
+  <Footer />
 </template>
 
 <style></style>

assets/styles/list-types.css

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+@counter-style do {
+  system: cyclic;
+  symbols: "💻" "📌" "👻" "📷";
+  suffix: " ";
+}
+@counter-style enjoy {
+  system: cyclic;
+  symbols: "💻" "📌" "👻" "📷" "♟" "⛄";
+  suffix: " ";
+}
+.list-style-type-none {
+  list-style-type: none;
+}
+.list-style-type-do {
+  list-style-type: do;
+}
+.list-style-type-enjoy {
+  list-style-type: enjoy;
+}
+
+/*# sourceMappingURL=list-types.css.map */

assets/styles/list-types.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["list-types.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE;;AAGF;EACE;;AAGF;EACE","file":"list-types.css"}

assets/styles/list-types.scss

@@ -0,0 +1,25 @@
+@counter-style do {
+  system: fixed;
+  symbols: "\1F4BB" "\1F4CC" "\1F47B" "\1F4F7";
+  suffix: " ";
+}
+
+@counter-style enjoy {
+  system: fixed;
+  symbols: "\2728" "\1F4A1" "\1F4D5" "\1F30D" "\2615" "\26C4";
+  suffix: " ";
+}
+
+.list-style-type {
+  &-none {
+    list-style-type: none;
+  }
+
+  &-do {
+    list-style-type: do;
+  }
+
+  &-enjoy {
+    list-style-type: enjoy;
+  }
+}

assets/styles/main.css

@@ -15570,6 +15570,26 @@ textarea.form-control-lg {
   filter: blur(1em);
 }
 
+@counter-style do {
+  system: fixed;
+  symbols: "💻" "📌" "👻" "📷";
+  suffix: " ";
+}
+@counter-style enjoy {
+  system: fixed;
+  symbols: "✨" "💡" "📕" "🌍" "☕" "⛄";
+  suffix: " ";
+}
+.list-style-type-none {
+  list-style-type: none;
+}
+.list-style-type-do {
+  list-style-type: do;
+}
+.list-style-type-enjoy {
+  list-style-type: enjoy;
+}
+
 :root {
   --animate-duration: 1s;
   --animate-delay: 0.75s;
@@ -15581,6 +15601,8 @@ html {
 }
 
 body {
+  display: flex;
+  flex-direction: column;
   background-color: rgb(6, 25, 28);
   background-image: url("~/assets/images/sky.png");
   background-attachment: fixed;
@@ -15595,7 +15617,7 @@ body {
 }
 
 #ender-app {
-  height: 100%;
+  flex: 1;
   image-rendering: auto;
 }
 
@@ -15604,10 +15626,6 @@ body {
   color: inherit;
 }
 
-.list-style-type-none {
-  list-style-type: none;
-}
-
 .text-align-center {
   text-align: center;
 }
@@ -15634,7 +15652,7 @@ body {
 
 .dimensions {
   width: 100%;
-  height: 100%;
+  min-height: 100%;
 }
 
 .link, .link-hi {
@@ -15664,7 +15682,6 @@ body {
 .scrollbar {
   min-height: 128px;
   transition: --scrollbar 0.15s ease;
-  scrollbar-gutter: stable;
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.3);
 }
@@ -15684,11 +15701,7 @@ body {
   background-color: var(--scrollbar);
 }
 
-.fade-mask {
+@media (prefers-color-scheme: dark) {
-  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));
-}
-
-@media (prefers-color-scheme: light) {
   body {
     color: black;
   }
@@ -15703,7 +15716,7 @@ body {
     background-color: rgba(255, 255, 255, 0.3);
   }
   .background {
-    background-color: rgba(255, 255, 255, 0.75);
+    background-color: rgba(255, 255, 255, 0.8);
   }
   .link:hover, .link-hi:hover {
     color: royalblue;
@@ -15719,11 +15732,20 @@ body {
   }
 }
 @media (min-width: 601px) {
+  #ender-app {
+    height: 100%;
+  }
+  .scrollbar {
+    scrollbar-gutter: stable;
+  }
   .dimensions {
     width: 80%;
-    height: auto;
+    min-height: auto;
     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 {
     border-radius: 1em;
   }

assets/styles/main.scss

@@ -15,6 +15,7 @@ $grid-breakpoints: (
 @import '../../node_modules/bootstrap/scss/bootstrap';
 @import '../../node_modules/animate.css/animate';
 @import 'transitions';
+@import 'list-types';
 
 // CSS Variables.
 :root {
@@ -30,6 +31,9 @@ html {
 
 // The body element.
 body {
+  display: flex;
+  flex-direction: column;
+
   background-color: rgb(6, 25, 28);
   background-image: url('~/assets/images/sky.png');
 
@@ -49,8 +53,7 @@ body {
 
 // Entry point (Vue mount).
 #ender-app {
-  height: 100%;
+  flex: 1;
-
   image-rendering: auto;
 }
 
@@ -60,10 +63,6 @@ body {
   color: inherit;
 }
 
-.list-style-type-none {
-  list-style-type: none;
-}
-
 .text-align-center {
   text-align: center;
 }
@@ -91,7 +90,7 @@ body {
 
 .dimensions {
   width: 100%;
-  height: 100%;
+  min-height: 100%;
 }
 
 .link {
@@ -133,7 +132,6 @@ body {
 
   transition: --scrollbar 0.15s ease;
 
-  scrollbar-gutter: stable;
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.3);
 
@@ -157,11 +155,7 @@ body {
   }
 }
 
-.fade-mask {
+@media (prefers-color-scheme: dark) {
-  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));
-}
-
-@media (prefers-color-scheme: light) {
   body {
     color: black;
   }
@@ -180,7 +174,7 @@ body {
   }
 
   .background {
-    background-color: rgba(255, 255, 255, 0.75);
+    background-color: rgba(255, 255, 255, 0.8);
   }
 
   .link {
@@ -209,13 +203,25 @@ body {
 
 // Dynamic classes.
 @include media-breakpoint-up(sm) {
+  #ender-app {
+    height: 100%;
+  }
+
+  .scrollbar {
+    scrollbar-gutter: stable;
+  }
+
   .dimensions {
     width: 80%;
-    height: auto;
+    min-height: auto;
 
     max-height: 90%;
   }
 
+  .fade-mask {
+    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 {
     border-radius: 1em;
   }

components/Card.vue

@@ -2,11 +2,11 @@
 
 <template>
   <main
-    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"
+    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"
   >
     <Navigation />
     <NuxtPage
-      class="scrollbar overflow-y-auto mb-3 mb-sm-0 py-4 pe-3 fade-mask"
+      class="scrollbar overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3 fade-mask"
     />
   </main>
 </template>

components/Footer.vue

@@ -8,7 +8,7 @@ const currentYear = new Date().getFullYear()
   >
     <span class="transpaque font-small text-shadow">
       © 2018-{{ currentYear }}, <a href="https://enderman.ch">Enderman</a>. All
-      rights reserved.
+      rights reserved. • v1.1
     </span>
   </footer>
 </template>

nuxt.config.ts

@@ -1,3 +1,5 @@
+import packageJSON from './package.json'
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   app: {
@@ -56,4 +58,9 @@ export default defineNuxtConfig({
   typescript: {
     typeCheck: true,
   },
+  vite: {
+    define: {
+      'import.meta.env.PACKAGE_VERSION': JSON.stringify(packageJSON.version),
+    },
+  },
 })

pages/index.vue

@@ -51,7 +51,7 @@ useHead({
     <div class="row g-3">
       <div class="col-12 col-md-8">
         <h5 class="alex">What I do</h5>
-        <ul>
+        <ul class="list-style-type-do">
           <li>
             I develop cross-platform software. My language of choice is usually
             <strong>C/C++</strong> for desktop applications and any common
@@ -78,7 +78,7 @@ useHead({
       </div>
       <div class="col-12 col-md-4">
         <h5 class="alex">What I enjoy</h5>
-        <ul>
+        <ul class="list-style-type-enjoy">
           <li>Teaching</li>
           <li>Mathematics</li>
           <li>Philosophy</li>