Adaptive layout improved
This commit is contained in:
parent
f16d54aa46
commit
432010e656
2
app.vue
2
app.vue
|
|
@ -23,7 +23,7 @@ useHead({
|
|||
randomize
|
||||
fade
|
||||
/>
|
||||
<Copyright />
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
@ -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"}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
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) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
||||
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) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue