ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-08 02:33:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

use demo box component

Browse Source
This commit is contained in:
Oliver Bryan
2025-09-29 20:58:23 +01:00
parent c09ede18f8
commit 9281df3658
4 changed files with 55 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/pages/projects/factor-e.astro
View File

@@ -1,5 +1,6 @@
--- ---
import ProjectPage from "../../components/ProjectPage.astro"; import ProjectPage from "../../components/ProjectPage.astro";
import Demo from "../../components/Demo.astro";
export const metadata = { export const metadata = {
title: "factor-e", title: "factor-e",
@@ -75,29 +76,13 @@ export const metadata = {
</div> </div>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2> <h2 class="text-2xl text-ayu-accent mb-3">Demo</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<img <Demo image="/images/factor-e/world-gen.gif" title="World generation" type="boxed" />
src="/images/factor-e/world-gen.gif" <Demo image="/images/factor-e/pixel-art.png" title="Pixel art" type="boxed" />
alt="World gen (GIF)" <Demo image="/images/factor-e/place-destroy.gif" title="Place/destroy loop" type="boxed" />
class="w-full h-full object-cover demo-border" <Demo image="/images/factor-e/debug-overlay.gif" title="Dev/debug overlay" type="boxed" />
/> </div>
<img </div>
src="/images/factor-e/pixel-art.png"
alt="Pixel art"
class="w-full h-full object-cover demo-border"
/>
<img
src="/images/factor-e/place-destroy.gif"
alt="Place/destroy loop (GIF)"
class="w-full h-full object-cover demo-border"
/>
<img
src="/images/factor-e/debug-overlay.gif"
alt="Dev/debug overlay"
class="w-full h-full object-cover demo-border"
/>
</div>
</div>
</ProjectPage> </ProjectPage>

49
src/pages/projects/glimpse.astro
View File

@@ -1,5 +1,6 @@
--- ---
import ProjectPage from "../../components/ProjectPage.astro"; import ProjectPage from "../../components/ProjectPage.astro";
import Demo from "../../components/Demo.astro";
export const metadata = { export const metadata = {
title: "glimpse", title: "glimpse",
@@ -54,35 +55,35 @@ export const metadata = {
<div <div
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
> >
<img <Demo
src="/images/glimpse/feed.png" image="/images/glimpse/feed.png"
alt="Feed view" title="Feed view"
class="w-full h-full object-cover demo-border" type="boxed"
/> />
<img <Demo
src="/images/glimpse/crop.png" image="/images/glimpse/crop.png"
alt="Composer + cropping" title="Share - write a caption + crop"
class="w-full h-full object-cover demo-border" type="boxed"
/> />
<img <Demo
src="/images/glimpse/profile.png" image="/images/glimpse/comments.png"
alt="Profile (custom colours)" title="Comments & interactions"
class="w-full h-full object-cover demo-border" type="boxed"
/> />
<img <Demo
src="/images/glimpse/settings.png" image="/images/glimpse/profile.png"
alt="Settings" title="Profile (custom colours)"
class="w-full h-full object-cover demo-border" type="boxed"
/> />
<img <Demo
src="/images/glimpse/comments.png" image="/images/glimpse/settings.png"
alt="Comments & interactions" title="Settings"
class="w-full h-full object-cover demo-border" type="boxed"
/> />
<img <Demo
src="/images/glimpse/search.png" image="/images/glimpse/search.png"
alt="User search/discovery" title="User search/discovery"
class="w-full h-full object-cover demo-border" type="boxed"
/> />
</div> </div>
</div> </div>

37
src/pages/projects/watercooler.astro
View File

@@ -1,5 +1,6 @@
--- ---
import ProjectPage from "../../components/ProjectPage.astro"; import ProjectPage from "../../components/ProjectPage.astro";
import Demo from "../../components/Demo.astro";
export const metadata = { export const metadata = {
title: "Watercooler", title: "Watercooler",
@@ -58,29 +59,13 @@ export const metadata = {
</div> </div>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2> <h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<img <Demo image="/images/watercooler/office.png" title="Office space" />
src="/images/watercooler/office.png" <Demo image="/images/watercooler/idk.png" title="idk" />
alt="Office space" <Demo image="/images/watercooler/idk.png" title="idk" />
class="w-full h-full object-cover demo-border" <Demo image="/images/watercooler/idk.png" title="idk" />
/> </div>
<img </div>
src="/images/watercooler/idk.png"
alt="idk"
class="w-full h-full object-cover demo-border"
/>
<img
src="/images/watercooler/idk.png"
alt="idk"
class="w-full h-full object-cover demo-border"
/>
<img
src="/images/watercooler/idk.png"
alt="idk"
class="w-full h-full object-cover demo-border"
/>
</div>
</div>
</ProjectPage> </ProjectPage>

8
src/styles/global.css
View File

@@ -236,4 +236,12 @@ body {
.demo-border { .demo-border {
border: 2px dotted var(--ayu-gutter); border: 2px dotted var(--ayu-gutter);
border-radius: 15px; border-radius: 15px;
overflow: hidden;
}
.demo-border span {
display: block;
background-color: var(--ayu-popup);
padding: 5px;
text-align: center;
} }