ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-07 18:23:04 +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

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

@@ -1,5 +1,6 @@
---
import ProjectPage from "../../components/ProjectPage.astro";
import Demo from "../../components/Demo.astro";
export const metadata = {
title: "factor-e",
@@ -76,28 +77,12 @@ export const metadata = {
</div>
<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">
<img
src="/images/factor-e/world-gen.gif"
alt="World gen (GIF)"
class="w-full h-full object-cover demo-border"
/>
<img
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"
/>
<Demo image="/images/factor-e/world-gen.gif" title="World generation" type="boxed" />
<Demo image="/images/factor-e/pixel-art.png" title="Pixel art" type="boxed" />
<Demo image="/images/factor-e/place-destroy.gif" title="Place/destroy loop" type="boxed" />
<Demo image="/images/factor-e/debug-overlay.gif" title="Dev/debug overlay" type="boxed" />
</div>
</div>
</ProjectPage>

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

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

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

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

8
src/styles/global.css
View File

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