|
|
@@ -1,6 +1,8 @@
|
|
|
<template>
|
|
|
<v-app dark>
|
|
|
- <v-app-bar app flat class="topBar fly-in-from-top my-4 mx-auto" >
|
|
|
+
|
|
|
+ <!-- height = 4rem, margin-y = 1rem -->
|
|
|
+ <v-app-bar app flat class="topBar fly-in-from-top my-4 mx-auto">
|
|
|
<v-tabs centered center-active color="primary" router show-arrows>
|
|
|
<v-tab v-for="link in links" :key="link.path" :to="link.path">
|
|
|
{{ link.name }}
|
|
|
@@ -8,29 +10,33 @@
|
|
|
</v-tabs>
|
|
|
</v-app-bar>
|
|
|
|
|
|
+ <!-- abstract background -->
|
|
|
<v-img src="/ui/abstract.svg" style="position: absolute; left: 0; right: 0; width: 100%; height: 100%;" />
|
|
|
|
|
|
- <v-main class="pt-4">
|
|
|
-
|
|
|
- <section class="hidden-chrome-scrollbar" style="height: calc(100vh - 1rem); padding-top: 5rem; padding-bottom: 5rem; overflow-y: auto;">
|
|
|
- <center
|
|
|
- class="mx-auto d-flex flex-column justify-center items-center"
|
|
|
- style="width: 90vw; min-height: 100%;">
|
|
|
- <nuxt />
|
|
|
- </center>
|
|
|
- </section>
|
|
|
-
|
|
|
+ <v-main style="padding-top: 4rem !important;">
|
|
|
+ <!-- min-height helps keep content centered, use .debug to to see it -->
|
|
|
+ <center
|
|
|
+ class="py-8 mx-auto d-flex flex-column justify-center items-center"
|
|
|
+ style="width: 90vw; min-height: calc(100vh - 8rem);">
|
|
|
+ <nuxt />
|
|
|
+ </center>
|
|
|
</v-main>
|
|
|
</v-app>
|
|
|
</template>
|
|
|
|
|
|
<style>
|
|
|
html, body {
|
|
|
- overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ height: -webkit-fill-available;
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
|
|
|
-.title-text {
|
|
|
- font-size: 3rem;
|
|
|
+.debug { /* usage: add class="debug" to the element */
|
|
|
+ outline: 2px solid red;
|
|
|
+}
|
|
|
+
|
|
|
+.mainAltButton {
|
|
|
+ margin: 0.25em;
|
|
|
}
|
|
|
|
|
|
.topBar {
|
|
|
@@ -41,25 +47,19 @@ html, body {
|
|
|
border-radius: .75rem;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
-
|
|
|
+.title-text {
|
|
|
+ font-size: 3rem;
|
|
|
+}
|
|
|
@media (max-width: 768px) { /* mobile */
|
|
|
.title-text {
|
|
|
font-size: 2rem;
|
|
|
}
|
|
|
.topBar {
|
|
|
- width: calc(100vw - 2rem) !important; /* (2rem = mx-4) */
|
|
|
+ width: calc(100vw - 2rem) !important; /* (2rem = mx-4) 1rem on left, 1rem on right */
|
|
|
padding: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.mainAltButton {
|
|
|
- margin: 0.25em;
|
|
|
-}
|
|
|
-
|
|
|
-.hidden-chrome-scrollbar::-webkit-scrollbar {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-
|
|
|
/* animations and all that */
|
|
|
.swoop-in-enter-active,
|
|
|
.swoop-in-leave-active,
|
|
|
@@ -71,7 +71,7 @@ html, body {
|
|
|
.swoop-right-leave-active {
|
|
|
transition-duration: 0.1s;
|
|
|
transition-property: opacity, transform;
|
|
|
- overflow: hidden;
|
|
|
+ /* overflow: hidden; */
|
|
|
}
|
|
|
|
|
|
.swoop-left-enter,
|
|
|
@@ -100,14 +100,14 @@ html, body {
|
|
|
|
|
|
.fly-in-from-top {
|
|
|
opacity: 0;
|
|
|
- transform: scale(0.8) translateY(-200%);
|
|
|
+ transform: scale(0.8) translateY(-12rem);
|
|
|
animation: fly-in-from-top 0.5s .3s ease forwards;
|
|
|
}
|
|
|
|
|
|
@keyframes fly-in-from-top {
|
|
|
0% {
|
|
|
opacity: 0;
|
|
|
- transform: scale(0.8) translateY(-200%);
|
|
|
+ transform: scale(0.8) translateY(-12rem);
|
|
|
}
|
|
|
100% {
|
|
|
opacity: 1;
|
Nikita Krupin
