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

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

@@ -1,6 +1,11 @@
*, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 60px;
-webkit-text-size-adjust: 100%;
}
body {
@@ -134,3 +139,21 @@ hr {
background-color: var(--color-link);
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>
<style lang="scss" scoped>
.fixed-layout {
width: 100%;
}
@media screen and (min-width: 1200px){
.fixed-layout {
width: 1150px;
max-width: 1150px;
margin: 0 auto;
}
}
@media screen and (max-width: 1200px){
.fixed-layout {
max-width: 1150px;
}
@media screen and (max-width: 600px) {
.fixed-layout {
margin: 0;
}
}
</style>

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

@@ -122,4 +122,17 @@ function getToPath(targetKey: string): string {
}
}
@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>

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

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

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

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

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

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

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

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

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

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

13
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 {
font-size: 1rem;
}
.grid {
grid-template-columns: repeat(1, minmax(200px, 1fr));
grid-template-columns: 1fr;
padding: 16px 0;
}
.selector {
height: 180px;
height: 200px;
}
}
@media (max-width: 400px) {
.section-title {
font-size: 1rem;
padding-left: 0;
}
}
</style>

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

@@ -65,8 +65,10 @@ useSeo({
img {
margin: auto;
display: flex;
display: block;
max-height: 400px;
width: 100%;
object-fit: contain;
}
}
@@ -77,32 +79,19 @@ useSeo({
margin-bottom: 16px;
line-height: 1.3;
}
</style>
<style lang="scss">
.no-sprite .undertable-wrapper {
display: none;
}
</style>
<style lang="scss">
.blog {
h2 {
a {
text-decoration: none;
color: var(--color-text);
@media screen and (max-width: 600px) {
.blog {
img {
max-height: 250px;
}
}
img {
margin: auto;
display: flex;
max-height: 400px;
.blog-post-title {
font-size: 1.4rem;
}
}
</style>
<style lang="scss">
.no-sprite .undertable-wrapper {
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>
h2 {
margin-left: 20px;
padding-left: 20px;
margin-left: 0;
}
p {
margin-left: 30px;
padding-left: 30px;
margin-left: 0;
}
.two-columns {
display: flex;
width: 100%;
}
@media screen and (max-width: 600px) {
h2 {
padding-left: 12px;
}
p {
padding-left: 18px;
}
}
</style>
<style lang="scss">

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

@@ -835,7 +835,7 @@ const sectionTargets = {
}
}
@media (max-width: 640px) {
@media (max-width: 600px) {
.section-title {
font-size: 1.1rem;
}
@@ -890,7 +890,7 @@ const sectionTargets = {
}
.grid {
grid-template-columns: repeat(1, minmax(200px, 1fr));
grid-template-columns: 1fr;
padding: 16px 0;
}
@@ -898,4 +898,23 @@ const sectionTargets = {
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>

2
frontend/nuxt.config.ts
View File

@@ -34,7 +34,7 @@ export default defineNuxtConfig({
title: 'Aran Roig — Developer, Artist & Designer',
meta: [
{ 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: 'author', content: 'Aran Roig' },
{ name: 'robots', content: 'index, follow' }