Syndria98/aranroig.com
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Big commit
Some checks failed
Build and Deploy Nuxt / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Aran Roig
2026-04-13 01:27:19 +02:00
parent 9748de4286
commit a6197137c0
35 changed files with 486 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/app/components/Footer.vue
View File

@@ -1,5 +1,7 @@
<template>
<div class="footer">
<span>{{ $t('prefooter') }}</span>
<br>
<span>{{ $t('footer') }}</span>
</div>
</template>
@@ -8,6 +10,7 @@
.footer {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 60px;
}

10
frontend/app/components/content/ArtColumns.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<div style="display: flex; gap: 1rem; max-height: calc(100vh - 130px);">
<div style="flex: 4; overflow-y: auto; text-align: center;">
<slot name="left" />
</div>
<div style="flex: 2; overflow-y: auto; margin-left: 25px;">
<slot name="right" />
</div>
</div>
</template>

19
frontend/app/components/layouts/FixedLayout.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<div class="fixed-layout">
<slot></slot>
</div>
</template>
<style lang="scss" scoped>
@media screen and (min-width: 1200px){
.fixed-layout {
width: 1100px;
}
}
@media screen and (max-width: 1200px){
.fixed-layout {
max-width: 1100px;
}
}
</style>

7
frontend/app/components/parts/HeaderLinks.vue
View File

@@ -7,6 +7,7 @@ const localePath = useLocalePath()
<NuxtLink :to="localePath('index')">/</NuxtLink>
<NuxtLink :to="localePath('blog')">/{{ $t('header.links.blog') }}</NuxtLink>
<NuxtLink :to="localePath('contact')">/{{ $t('header.links.contact') }}</NuxtLink>
<NuxtLink :to="localePath('art')">/{{ $t('header.links.art') }}</NuxtLink>
<!-- <NuxtLink class="disabled">Drawings</NuxtLink> -->
</div>
</template>
@@ -20,6 +21,12 @@ const localePath = useLocalePath()
text-shadow: 0 0 1px var(--color-link);
}
.menus > a.router-link-exact-active {
color: var(--color-link);
text-shadow: 0 0 8px var(--color-link);
}
.disabled {
color: #aaaaaa77;
}

56
frontend/app/components/parts/MinimalHeader.vue Normal file
View File

@@ -0,0 +1,56 @@
<script lang="js" setup>
import HeaderLinks from './HeaderLinks.vue';
import SiteOptions from './site_options/SiteOptions.vue';
</script>
<template>
<div class="sticky-header">
<div class="container">
<div class="sticky-header-inner">
<div class="left">
<h1>ARANROIG.COM</h1>
<HeaderLinks />
</div>
<SiteOptions />
</div>
</div>
</div>
<div style="height: 80px"></div>
</template>
<style lang="scss" scoped>
.sticky-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--color-sticky-header-bg, #fff);
border-bottom: 1px solid var(--color-sticky-header-border, rgba(0, 0, 0, 0.08));
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
backdrop-filter: blur(10px);
}
.sticky-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 10px 0;
h1 {
margin: 0;
font-size: inherit;
white-space: nowrap;
font-weight: normal;
}
}
.left {
display: flex;
align-items: center;
gap: 1rem;
margin-left: 30px;
}
</style>

2
frontend/app/components/parts/PageHeader.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import HeaderLinks from './HeaderLinks.vue';
import SiteOptions from './site_options/SiteOptions.vue';
import StickyHeader from './StickyHeader.vue';
</script>
<template>
@@ -17,6 +18,7 @@ import SiteOptions from './site_options/SiteOptions.vue';
<SiteOptions></SiteOptions>
</div>
</div>
<StickyHeader></StickyHeader>
</template>
<style lang="scss" scoped>

84
frontend/app/components/parts/StickyHeader.vue Normal file
View File

@@ -0,0 +1,84 @@
<script lang="js" setup>
import HeaderLinks from './HeaderLinks.vue';
import SiteOptions from './site_options/SiteOptions.vue';
import { ref, onMounted, onUnmounted } from 'vue';
const SCROLL_THRESHOLD = 120; // px scrolled before sticky header appears
const isVisible = ref(false);
function onScroll() {
isVisible.value = window.scrollY > SCROLL_THRESHOLD;
}
onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }));
onUnmounted(() => window.removeEventListener('scroll', onScroll));
</script>
<template>
<div class="sticky-header" :class="{ visible: isVisible }">
<div class="container">
<div class="sticky-header-inner">
<div class="left">
<h1>ARANROIG.COM</h1>
<HeaderLinks />
</div>
<SiteOptions />
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.sticky-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--color-sticky-header-bg, #fff);
border-bottom: 1px solid var(--color-sticky-header-border, rgba(0, 0, 0, 0.08));
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
backdrop-filter: blur(10px);
// Hidden state — translated up and invisible
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
transition:
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease;
&.visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
}
.sticky-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 10px 0;
h1 {
margin: 0;
font-size: inherit; // inherit from your existing h1 styles
white-space: nowrap;
font-weight: normal;
}
}
.left {
display: flex;
align-items: center;
gap: 1rem;
margin-left: 30px;
}
</style>

4
frontend/app/components/parts/TableHeader.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import HeaderLinks from './HeaderLinks.vue';
import SiteOptions from './site_options/SiteOptions.vue';
import StickyHeader from './StickyHeader.vue';
import { accent } from '~/composables/theme'
const spritePath = computed(() => {
@@ -44,12 +45,13 @@ onBeforeUnmount(() => {
<HeaderLinks></HeaderLinks>
</div>
<div class="undertable">
<Sprite :path="spritePath" bottom="-141px" left="-75px"></Sprite>
<Sprite :path="spritePath" bottom="-60px" left="-75px"></Sprite>
</div>
<div class="header-container">
<SiteOptions></SiteOptions>
</div>
</div>
<StickyHeader></StickyHeader>
</template>
<style lang="scss" scoped>