alexander.lyall/computing-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

Binary simulator is feature complete.

Browse Source 
Known issues:
- Formatting of the navbar across the site is broken
- Formatting of the Binary simulator is broken

Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
Alexander Lyall
2025-12-16 22:46:29 +00:00
parent 8b3c58c8d9
commit ce6c2298a1
8 changed files with 1200 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/layouts/BaseLayout.astro
View File

@@ -1,7 +1,5 @@
---
const {
title = "Computing:Box",
} = Astro.props;
const { title = "Computing:Box" } = Astro.props;
---
<!doctype html>
@@ -10,41 +8,10 @@ const {
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>{title}</title>
<meta name="color-scheme" content="dark" />
</head>
<body>
<header class="siteHeader">
<div class="siteHeaderInner">
<a class="brand" href="/">
<!-- Put your logo file here -->
<img
class="brandLogo"
src="../images/computing-box-logo.svg"
alt="Computing:Box logo"
width="28"
height="28"
/>
<span class="brandName">Computing:Box</span>
</a>
<nav class="siteNav" aria-label="Main navigation">
<a href="/about">About</a>
<a href="/binary">Binary</a>
<a href="/hexadecimal">Hexadecimal</a>
<a href="/hex-colours">Hex Colours</a>
<a href="/logic-gates">Logic Gates</a>
</nav>
</div>
</header>
<slot />
<style>
:root{
/* 3× navbar height */
--nav-height: 96px;
--nav-pad-x: 22px;
--nav-h: 108px; /* 3x-ish height */
--bg: #1f2027;
--text: #e8e8ee;
--muted: #a9acb8;
@@ -53,81 +20,99 @@ const {
body{
margin:0;
background: var(--bg);
color: var(--text);
background:var(--bg);
color:var(--text);
}
.siteHeader{
.siteNav{
position: sticky;
top: 0;
z-index: 1000;
height: var(--nav-height);
display:flex;
align-items:center;
background: rgba(0,0,0,.15);
z-index: 50;
height: var(--nav-h);
background: rgba(0,0,0,.10);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(10px);
backdrop-filter: blur(8px);
}
.siteHeaderInner{
width: 100%;
.navInner{
height: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--nav-pad-x);
display:flex;
align-items:center;
justify-content:space-between;
gap: 18px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand{
display:flex;
align-items:center;
gap: 10px;
gap:12px;
text-decoration:none;
color: var(--text);
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color:var(--text);
}
.brandLogo{
display:block;
width: 28px;
height: 28px;
width: 2em;
height: 2em;
image-rendering: pixelated;
}
.brandName{
font-size: 14px;
opacity: .95;
}
.siteNav{
display:flex;
gap: 18px;
align-items:center;
}
.siteNav a{
color: var(--muted);
text-decoration:none;
font-weight: 700;
letter-spacing: .08em;
letter-spacing: .12em;
font-weight: 900;
text-transform: uppercase;
font-size: 11px;
padding: 10px 8px;
border-radius: 10px;
font-size: 18px;
}
.siteNav a:hover{
.navLinks{
display:flex;
align-items:center;
gap:18px;
flex-wrap:wrap;
}
.navLinks a{
color: var(--muted);
text-decoration: none;
font-weight: 800;
letter-spacing: .12em;
font-size: 16px;
text-transform: uppercase;
}
.navLinks a:hover{
color: var(--text);
background: rgba(255,255,255,.06);
}
@media (max-width: 860px){
.siteNav{ gap: 10px; }
.siteNav a{ font-size: 10px; padding: 8px 6px; }
.pageWrap{
max-width: 1400px;
margin: 0 auto;
}
</style>
</head>
<body>
<header class="siteNav">
<div class="navInner">
<a class="brand" href="/">
<img class="brandLogo" src="/images/computing-box-logo.svg" alt="Computing:Box logo" />
<span class="brandName">COMPUTING:BOX</span>
</a>
<nav class="navLinks" aria-label="Site navigation">
<a href="/about">ABOUT</a>
<a href="/binary">BINARY</a>
<a href="/hexadecimal">HEXADECIMAL</a>
<a href="/hex-colours">HEX COLOURS</a>
<a href="/logic-gates">LOGIC GATES</a>
</nav>
</div>
</header>
<main class="pageWrap">
<slot />
</main>
</body>
</html>