justinzeus/handin-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

styling fixes

Browse source
This commit is contained in:
Justin Visser 2026-03-03 18:37:35 +01:00
parent 84f1d1585c
commit 220e428f5b
3 changed files with 10 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/components/layout/AppShell.vue
View file

@ -84,7 +84,7 @@ onMounted(async () => {
<template> <template>
<div class="flex h-screen flex-col overflow-hidden bg-white dark:bg-gray-900"> <div class="flex h-screen flex-col overflow-hidden bg-white dark:bg-gray-900">
<!-- Full-width yellow header --> <!-- Full-width yellow header -->
<header class="sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-primary-400 bg-primary-300 px-4"> <header class="sticky top-0 z-30 flex h-16 shrink-0 items-center gap-3 border-b border-primary-400 bg-primary-300 px-4">
<!-- Hamburger (mobile only) --> <!-- Hamburger (mobile only) -->
<button <button
class="shrink-0 rounded p-1.5 text-gray-700 transition-colors hover:bg-primary-400 md:hidden" class="shrink-0 rounded p-1.5 text-gray-700 transition-colors hover:bg-primary-400 md:hidden"
@ -97,7 +97,7 @@ onMounted(async () => {
</button> </button>
<!-- Logo --> <!-- Logo -->
<img :src="logoUrl" alt="Logo" class="h-8 w-auto shrink-0" /> <img :src="logoUrl" alt="Logo" class="h-10 w-auto shrink-0" />
<!-- Site title --> <!-- Site title -->
<form v-if="editingSiteTitle" @submit.prevent="saveSiteTitle"> <form v-if="editingSiteTitle" @submit.prevent="saveSiteTitle">
@ -117,7 +117,7 @@ onMounted(async () => {
:title="isAdmin ? 'Click to rename' : undefined" :title="isAdmin ? 'Click to rename' : undefined"
@click="startEditTitle" @click="startEditTitle"
> >
<span class="truncate text-base font-bold text-gray-900">{{ siteTitle }}</span> <span class="truncate text-lg font-bold text-gray-900">{{ siteTitle }}</span>
<svg <svg
v-if="isAdmin" v-if="isAdmin"
class="h-3 w-3 shrink-0 text-gray-600 opacity-0 transition-opacity group-hover:opacity-100" class="h-3 w-3 shrink-0 text-gray-600 opacity-0 transition-opacity group-hover:opacity-100"
@ -156,7 +156,7 @@ onMounted(async () => {
<!-- Scrollable content --> <!-- Scrollable content -->
<main ref="mainEl" class="flex-1 overflow-y-auto" @scroll="handleScroll"> <main ref="mainEl" class="flex-1 overflow-y-auto" @scroll="handleScroll">
<div class="mx-auto max-w-4xl px-6 py-10"> <div class="mx-auto max-w-5xl px-6 py-10">
<slot /> <slot />
</div> </div>
</main> </main>

2
frontend/src/components/layout/Sidebar.vue
View file

@ -107,7 +107,7 @@ async function handleLogin() {
</script> </script>
<template> <template>
<nav class="flex h-full w-60 flex-col border-r border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-700"> <nav class="flex h-full w-52 flex-col border-r border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-700">
<!-- Pages list (scrollable) --> <!-- Pages list (scrollable) -->
<div class="flex-1 overflow-y-auto py-2"> <div class="flex-1 overflow-y-auto py-2">
<!-- Pinned Home page (always at top, no actions) --> <!-- Pinned Home page (always at top, no actions) -->

5
frontend/src/style.css
View file

@ -1,6 +1,11 @@
@import "tailwindcss"; @import "tailwindcss";
@plugin "@tailwindcss/typography"; @plugin "@tailwindcss/typography";
/* Fluid base font: 15px on small screens, scales to 18px at ~1800px wide */
:root {
font-size: clamp(15px, 1vw, 18px);
}
@custom-variant dark (&:where(.dark, .dark *)); @custom-variant dark (&:where(.dark, .dark *));
@theme { @theme {