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

Mobile responsive thanks ai slop
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 28s
Details

Browse Source
This commit is contained in:
BinarySandia04
2026-06-10 17:47:15 +02:00
parent 3f88315fef
commit 2cdc857b9a
14 changed files with 233 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/app/app.vue
View File

@@ -1,9 +1,6 @@
<template> <template>
<head>
<title>Aran Roig — Developer, Artist & Designer</title>
</head>
<div> <div>
<NuxtRouteAnnouncer /> <NuxtRouteAnnouncer />
<div class="container"> <div class="container">
@@ -43,4 +40,11 @@ onMounted(() => {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
@media screen and (max-width: 600px) {
.container {
padding-left: 12px;
padding-right: 12px;
}
}
</style> </style>

23
frontend/app/assets/css/main.scss
View File

@@ -1,6 +1,11 @@
*, *::before, *::after {
box-sizing: border-box;
}
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
scroll-padding-top: 60px; scroll-padding-top: 60px;
-webkit-text-size-adjust: 100%;
} }
body { body {
@@ -134,3 +139,21 @@ hr {
background-color: var(--color-link); background-color: var(--color-link);
color: var(--color-background-fore); color: var(--color-background-fore);
} }
@media screen and (max-width: 600px) {
html {
scroll-padding-top: 50px;
}
}
@media screen and (max-width: 400px) {
html {
scroll-padding-top: 40px;
}
}
@media (hover: none) and (pointer: coarse) {
a, button, [role="button"], .project-card, .tui-tab {
cursor: pointer;
}
}

15
frontend/app/components/layouts/FixedLayout.vue
View File

@@ -5,15 +5,20 @@
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.fixed-layout {
width: 100%;
}
@media screen and (min-width: 1200px){ @media screen and (min-width: 1200px){
.fixed-layout { .fixed-layout {
width: 1150px; max-width: 1150px;
margin: 0 auto;
} }
} }
@media screen and (max-width: 1200px){ @media screen and (max-width: 600px) {
.fixed-layout { .fixed-layout {
max-width: 1150px; margin: 0;
} }
} }
</style> </style>

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

@@ -115,11 +115,24 @@ function getToPath(targetKey: string): string {
.tui-tab { .tui-tab {
padding: 3px 5px; padding: 3px 5px;
font-size: 0.7rem; font-size: 0.7rem;
.tab-sep { .tab-sep {
margin-right: 3px; margin-right: 3px;
} }
} }
} }
@media screen and (max-width: 480px) {
.tui-tabs {
flex-wrap: wrap;
}
.tui-tab {
flex: 1;
justify-content: center;
min-height: 36px;
padding: 6px 8px;
}
}
</style> </style>

9
frontend/app/components/parts/StickyHeader.vue
View File

@@ -98,6 +98,15 @@ onUnmounted(() => window.removeEventListener('scroll', onScroll));
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
font-size: 0.75rem; font-size: 0.75rem;
} }
@media screen and (max-width: 480px) {
display: none;
}
} }
.site-options {
display: flex;
gap: 8px;
align-items: center;
}
</style> </style>

46
frontend/app/components/parts/site_options/LanguageSelector.vue
View File

@@ -75,27 +75,30 @@ border: 1px solid var(--color-border-color);
} }
.dropdown { .dropdown {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 50px; top: 50px;
right: 110px; right: 0;
margin-right: 10px; margin-right: 10px;
max-width: calc(100vw - 32px);
width: auto;
min-width: 140px;
background: var(--color-background-fore); background: var(--color-background-fore);
border: 1px solid var(--color-border-color); border: 1px solid var(--color-border-color);
border-radius: 0; border-radius: 0;
padding: 8px 0; padding: 8px 0;
box-shadow: 4px -4px 0px 0px rgba(0,0,0,0.3); box-shadow: 4px -4px 0px 0px rgba(0,0,0,0.3);
border-left: 2px solid var(--color-border-color); border-left: 2px solid var(--color-border-color);
&::before { &::before {
content: "▸"; content: "▸";
display: block; display: block;
position: absolute; position: absolute;
left: -16px; left: -16px;
top: -2px; top: -2px;
font-size: 14px; font-size: 14px;
color: var(--color-border-color); color: var(--color-border-color);
} }
} }
/* Items */ /* Items */
@@ -106,6 +109,7 @@ border: 1px solid var(--color-border-color);
display: flex; display: flex;
gap: 10px; gap: 10px;
align-items: center; align-items: center;
min-height: 36px;
&.active { &.active {
background: var(--color-selected); background: var(--color-selected);
@@ -115,4 +119,14 @@ border: 1px solid var(--color-border-color);
.menu-item:hover { .menu-item:hover {
background: var(--color-hover); background: var(--color-hover);
} }
@media (max-width: 480px) {
.dropdown {
top: 42px;
}
.menu-item {
padding: 10px 12px;
}
}
</style> </style>

7
frontend/app/components/parts/site_options/SiteOptions.vue
View File

@@ -14,10 +14,15 @@ import ThemeSelector from './ThemeSelector.vue';
.site-options { .site-options {
display: flex; display: flex;
justify-content: right; justify-content: right;
width: 400px; width: auto;
@media screen and (max-width: 900px) {
gap: 8px;
}
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
margin-top: -10px; margin-top: -10px;
gap: 4px;
} }
} }
</style> </style>

72
frontend/app/components/parts/site_options/ThemeSelector.vue
View File

@@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref, onMounted, onUnmounted } from 'vue'
import { theme, accent, setTheme, setAccent } from '~/composables/theme' import { theme, accent, setTheme, setAccent } from '~/composables/theme'
// ref for dropdown visibility // ref for dropdown visibility
@@ -19,22 +19,31 @@ const handleClickOutside = (e) => {
} }
} }
const isNarrow = ref(false)
const checkWidth = () => {
isNarrow.value = window.innerWidth < 480
}
onMounted(() => { onMounted(() => {
document.addEventListener('click', handleClickOutside) document.addEventListener('click', handleClickOutside)
checkWidth()
window.addEventListener('resize', checkWidth)
}) })
onUnmounted(() => { onUnmounted(() => {
document.removeEventListener('click', handleClickOutside) document.removeEventListener('click', handleClickOutside)
window.removeEventListener('resize', checkWidth)
}) })
</script> </script>
<template> <template>
<div class="menu-container" ref="menuContainer"> <div class="menu-container" ref="menuContainer">
<button class="menu-button" @click="toggleDropdown">{{ $t('site_options.theme_selector.dropdown') }} ▾</button> <button class="menu-button" @click="toggleDropdown">{{ $t('site_options.theme_selector.dropdown') }} ▾</button>
<Transition name="dropdown"> <Transition name="dropdown">
<div class="dropdown" v-show="dropdownVisible"> <div class="dropdown" v-show="dropdownVisible">
<div class="two-columns"> <div class="two-columns" :class="{ 'stacked': isNarrow }">
<div class="section"> <div class="section">
<div class="menu-section"> <div class="menu-section">
<div class="menu-header"> <div class="menu-header">
@@ -180,16 +189,18 @@ border: 1px solid var(--color-border-color);
/* Dropdown */ /* Dropdown */
.dropdown { .dropdown {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 50px; top: 50px;
right: 0; right: 0;
margin-right: 10px; margin-right: 10px;
width: 320px; max-width: calc(100vw - 32px);
background: var(--color-background-fore); width: auto;
border: 1px solid var(--color-border-color); min-width: 260px;
border-radius: 0; background: var(--color-background-fore);
padding: 8px 0; border: 1px solid var(--color-border-color);
box-shadow: 4px -4px 0px 0px rgba(0,0,0,0.3); border-radius: 0;
padding: 8px 0;
box-shadow: 4px -4px 0px 0px rgba(0,0,0,0.3);
} }
/* Sections */ /* Sections */
@@ -207,6 +218,7 @@ border: 1px solid var(--color-border-color);
gap: 10px; gap: 10px;
margin: 8px; margin: 8px;
align-items: center; align-items: center;
min-height: 36px;
&.active { &.active {
background: var(--color-selected); background: var(--color-selected);
@@ -241,4 +253,38 @@ border: 1px solid var(--color-border-color);
content: "═══════════"; content: "═══════════";
} }
} }
.two-columns {
display: flex;
flex-grow: 1;
flex-direction: row;
}
.section {
flex-grow: 1;
}
.stacked {
flex-direction: column;
}
@media (max-width: 480px) {
.dropdown {
top: 42px;
padding: 6px 0;
}
.menu-item {
margin: 4px;
padding: 10px 12px;
}
.menu-header {
padding: 6px 12px;
}
.divider {
margin: 4px 12px;
}
}
</style> </style>

40
frontend/app/pages/art/[slug].vue
View File

@@ -55,12 +55,12 @@ useSeo({
a { a {
text-decoration: none; text-decoration: none;
color: var(--color-text); color: var(--color-text);
} }
} }
img { img {
margin: auto; margin: auto;
display: flex; display: block;
max-height: 77vh; max-height: 77vh;
max-width: 100%; max-width: 100%;
} }
@@ -73,39 +73,21 @@ useSeo({
margin-bottom: 16px; margin-bottom: 16px;
line-height: 1.3; line-height: 1.3;
} }
</style>
<style lang="scss"> @media screen and (max-width: 600px) {
.no-sprite .undertable-wrapper { .extended-container {
display: none; margin-top: 16px;
}
</style>
<style lang="scss">
.extended-container {
width: 100%;
margin: auto;
margin-top: 32px;
}
.art {
h2 {
a {
text-decoration: none;
color: var(--color-text);
}
} }
img { .art img {
margin: auto; max-height: 50vh;
display: flex; }
max-height: 77vh;
max-width: 100%; .art-title {
font-size: 1.4rem;
} }
} }
</style>
<style lang="scss">
.no-sprite .undertable-wrapper { .no-sprite .undertable-wrapper {
display: none; display: none;
} }

17
frontend/app/pages/art/index.vue
View File

@@ -248,18 +248,25 @@ const displayedArt = computed(() => {
} }
} }
@media (max-width: 640px) { @media (max-width: 600px) {
.section-title { .section-title {
font-size: 1rem; font-size: 1rem;
} }
.grid { .grid {
grid-template-columns: repeat(1, minmax(200px, 1fr)); grid-template-columns: 1fr;
padding: 16px 0; padding: 16px 0;
} }
.selector { .selector {
height: 180px; height: 200px;
}
}
@media (max-width: 400px) {
.section-title {
font-size: 1rem;
padding-left: 0;
} }
} }
</style> </style>

33
frontend/app/pages/blog/[slug].vue
View File

@@ -60,13 +60,15 @@ useSeo({
a { a {
text-decoration: none; text-decoration: none;
color: var(--color-text); color: var(--color-text);
} }
} }
img { img {
margin: auto; margin: auto;
display: flex; display: block;
max-height: 400px; max-height: 400px;
width: 100%;
object-fit: contain;
} }
} }
@@ -77,32 +79,19 @@ useSeo({
margin-bottom: 16px; margin-bottom: 16px;
line-height: 1.3; line-height: 1.3;
} }
</style>
<style lang="scss"> @media screen and (max-width: 600px) {
.no-sprite .undertable-wrapper { .blog {
display: none; img {
} max-height: 250px;
</style> }
<style lang="scss">
.blog {
h2 {
a {
text-decoration: none;
color: var(--color-text);
}
} }
img { .blog-post-title {
margin: auto; font-size: 1.4rem;
display: flex;
max-height: 400px;
} }
} }
</style>
<style lang="scss">
.no-sprite .undertable-wrapper { .no-sprite .undertable-wrapper {
display: none; display: none;
} }

16
frontend/app/pages/contact/index.vue
View File

@@ -50,17 +50,29 @@ const { data: markdown } = await useAsyncData(`fixed`, async () =>
<style lang="scss" scoped> <style lang="scss" scoped>
h2 { h2 {
margin-left: 20px; padding-left: 20px;
margin-left: 0;
} }
p { p {
margin-left: 30px; padding-left: 30px;
margin-left: 0;
} }
.two-columns { .two-columns {
display: flex; display: flex;
width: 100%; width: 100%;
} }
@media screen and (max-width: 600px) {
h2 {
padding-left: 12px;
}
p {
padding-left: 18px;
}
}
</style> </style>
<style lang="scss"> <style lang="scss">

33
frontend/app/pages/index.vue
View File

@@ -835,11 +835,11 @@ const sectionTargets = {
} }
} }
@media (max-width: 640px) { @media (max-width: 600px) {
.section-title { .section-title {
font-size: 1.1rem; font-size: 1.1rem;
} }
.project-card { .project-card {
padding: 8px 12px; padding: 8px 12px;
} }
@@ -853,11 +853,11 @@ const sectionTargets = {
min-width: auto !important; min-width: auto !important;
height: 160px !important; height: 160px !important;
} }
.project-title { .project-title {
font-size: 0.95rem; font-size: 0.95rem;
} }
.project-description { .project-description {
font-size: 0.82rem; font-size: 0.82rem;
} }
@@ -888,14 +888,33 @@ const sectionTargets = {
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
.grid { .grid {
grid-template-columns: repeat(1, minmax(200px, 1fr)); grid-template-columns: 1fr;
padding: 16px 0; padding: 16px 0;
} }
.selector { .selector {
height: 180px; height: 180px;
} }
} }
@media (max-width: 400px) {
.stats-grid {
grid-template-columns: 1fr;
}
.section-title {
font-size: 1rem;
padding-left: 0;
}
.grid {
grid-template-columns: 1fr;
}
.selector {
height: 200px;
}
}
</style> </style>

2
frontend/nuxt.config.ts
View File

@@ -34,7 +34,7 @@ export default defineNuxtConfig({
title: 'Aran Roig — Developer, Artist & Designer', title: 'Aran Roig — Developer, Artist & Designer',
meta: [ meta: [
{ charset: 'utf-8' }, { charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }, { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' },
{ name: 'description', content: 'Personal website of Aran Roig — developer, artist, and designer. Explore projects, blog posts, art gallery, and more.' }, { name: 'description', content: 'Personal website of Aran Roig — developer, artist, and designer. Explore projects, blog posts, art gallery, and more.' },
{ name: 'author', content: 'Aran Roig' }, { name: 'author', content: 'Aran Roig' },
{ name: 'robots', content: 'index, follow' } { name: 'robots', content: 'index, follow' }