adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Hide sidebar images on screens narrower than 1200px
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 23s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Adam French
2026-03-26 11:17:14 +00:00
parent f1750a8b3e
commit 619692687f
1 changed files with 98 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
vue/src/views/home/Home.vue
View File

@@ -25,68 +25,76 @@ import Steam from "./Steam.vue";
<template> <template>
<main class="halftone justify-center flex flex-row w-full h-full"> <main class="halftone justify-center flex flex-row w-full h-full">
<div class="outerWrap flex flex-row" style="height: 310mm"> <div class="outerWrap flex flex-row">
<div class="sidebar flex-1 flex flex-col m-10 w-60 gap-2"> <div class="sidebar">
<div <Time class="sidebar-cell" />
class="flex-1 flex flex-col min-h-0 background-children border-children gap-2" <Timer class="sidebar-cell" />
> <Radio class="sidebar-cell" />
<Chat class="flex-1 min-h-0" /> <CommitHistory class="flex-1 sidebar-cell" />
<Steam />
</div>
<div class="sidebar-image">
<Miku class="border-tertiary border bg-bg_secondary h-60" />
</div>
</div>
<div
class="a4page-portrait homeGrid relative background-children border-children bdr-1"
>
<!-- <Intro class="intro" /> -->
<Intro2 class="intro" />
<!-- <BadApple class="intro" /> -->
<Listening class="listening" />
<Stamps class="stamps" />
<Feed class="feed" />
<Links class="links" />
<Collage class="collage" />
<Consumption class="consumption" />
<Favorites class="favorites" />
<!-- <Gym class="gym" /> -->
<Gym2 class="gym" />
</div>
<div class="sidebar flex-1 flex flex-col m-10 w-60 gap-2">
<div
class="flex-1 flex flex-col min-h-0 background-children border-children gap-2"
>
<Time />
<Timer />
<Radio />
<CommitHistory class="flex-1" />
<!-- <Elle class="flex-1" /> --> <!-- <Elle class="flex-1" /> -->
<!-- <MusicPlayer /> --> <!-- <MusicPlayer /> -->
</div> <img
<div class="sidebar-image"> src="/img/memes/fire-woman.gif"
<img alt=""
src="/img/memes/fire-woman.gif" width="178"
alt="" height="178"
width="178" class="border-tertiary border-2 sidebar-image box-border w-full bg-tertiary"
height="178" loading="lazy"
class="border-tertiary border" />
loading="lazy" </div>
/> <div class="a4page-portrait homeGrid relative">
</div> <!-- <Intro class="intro" /> -->
<Intro2 class="intro grid-cell" />
<!-- <BadApple class="intro" /> -->
<Listening class="listening grid-cell" />
<Stamps class="stamps grid-cell" />
<Feed class="feed grid-cell" />
<Links class="links grid-cell" />
<Collage class="collage grid-cell" />
<Consumption class="consumption grid-cell" />
<Favorites class="favorites grid-cell" />
<!-- <Gym class="gym" /> -->
<Gym2 class="gym grid-cell" />
</div>
<div class="sidebar">
<Steam class="sidebar-cell" />
<Chat class="flex-1 min-h-0 chat-home grid-cell" />
<Miku
class="sidebar-image miku-image box-border border-tertiary border-2 bg-bg_primary"
/>
</div> </div>
</div> </div>
</main> </main>
</template> </template>
<style scoped> <style scoped>
.border-children > * { .grid-cell {
border: 2px solid var(--quaternary); background-color: var(--bg_primary);
border-width: 2px;
border-style: solid;
border-color: var(--quaternary);
} }
.background-children > * { .sidebar-cell {
background-color: var(--bg_primary); background-color: var(--bg_quaternary);
border-width: 2px;
border-style: solid;
border-color: var(--quaternary);
}
.sidebar {
flex: 1;
display: flex;
flex-direction: column;
margin: 2.5rem;
width: 15rem;
min-height: 0;
gap: 0.5rem;
}
.outerWrap {
height: 310mm;
} }
.homeGrid { .homeGrid {
@@ -96,16 +104,26 @@ import Steam from "./Steam.vue";
grid-template-rows: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr);
} }
.chat-home {
max-height: 800px;
}
.miku-image {
height: 15rem;
}
@media (max-width: 1200px) { @media (max-width: 1200px) {
.outerWrap { .outerWrap {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
height: auto;
} }
.homeGrid { .homeGrid {
order: -1; order: -1;
width: 100%; width: 100%;
height: 350mm; height: auto;
min-height: 400mm;
margin-inline: 0; margin-inline: 0;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -113,10 +131,27 @@ import Steam from "./Steam.vue";
.sidebar { .sidebar {
width: 100%; width: 100%;
margin: 5px 10px; margin: 5px 10px;
flex-direction: column; flex-direction: row;
align-items: center;
gap: 8px; gap: 8px;
} }
.sidebar > * {
min-height: 80px;
}
.sidebar-image {
max-height: 150px;
max-width: 150px;
object-fit: contain;
}
.sidebar-image {
display: none;
}
.miku-image {
display: none;
}
} }
@media (max-width: 850px) { @media (max-width: 850px) {
@@ -124,6 +159,7 @@ import Steam from "./Steam.vue";
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: auto; height: auto;
min-height: 0;
} }
.stamps { .stamps {
@@ -140,18 +176,13 @@ import Steam from "./Steam.vue";
.sidebar > * { .sidebar > * {
max-width: none; max-width: none;
width: auto; width: auto;
min-height: 80px;
} }
.sidebar-image { .chat-home {
max-height: 200px; max-height: none;
overflow: hidden; min-height: 350px;
} height: 400px;
.sidebar-image :deep(img) {
max-height: 200px;
object-fit: contain;
display: block;
margin-inline: auto;
} }
} }
@@ -167,6 +198,7 @@ import Steam from "./Steam.vue";
.sidebar { .sidebar {
margin: 5px 0; margin: 5px 0;
} }
} }
.intro { .intro {