import live www.sillylaird.ca webrootHEADmain

1 files changed, 102 insertions, 0 deletions

diff --git a/assets/css/pages/computers.css b/assets/css/pages/computers.css
new file mode 100644
index 0000000..2b0ff38
--- /dev/null
+++ b/assets/css/pages/computers.css
@@ -0,0 +1,102 @@
+.machine{
+  border: 1px solid var(--ink);
+  padding: var(--space-md);
+  margin-top: var(--space-md);
+  background: var(--bg);
+}
+
+.machine-info{ font-size: var(--fs-base); }
+
+.machine-title{
+  color: var(--gold);
+  font-weight: 700;
+  font-size: var(--fs-lg);
+  margin-bottom: var(--space-xs);
+}
+
+.machine--notes {
+  border-color: color-mix(in srgb, var(--accent-cyan) 42%, var(--border));
+  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-cyan) 7%, var(--bg)), var(--bg) 45%);
+}
+
+.colon-nav {
+  font-size: var(--fs-base);
+  margin-top: var(--space-sm);
+}
+
+.colon-nav strong {
+  color: var(--gold);
+}
+
+.machine-row {
+  display: flex;
+  gap: var(--space-md);
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.machine-row .machine-thumb {
+  flex: 0 0 auto;
+  width: 96px;
+  height: 96px;
+  object-fit: contain;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  padding: var(--space-xs);
+}
+
+.machine-row .machine-facts {
+  flex: 1 1 240px;
+}
+
+.machine-title--sub {
+  margin-top: var(--space-sm);
+}
+
+.placeholder-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: var(--space-md);
+}
+
+.placeholder-box {
+  border: 1px dashed var(--border);
+  border-radius: var(--r);
+  padding: var(--space-md);
+  text-align: center;
+  color: var(--muted);
+  font-size: var(--fs-sm);
+  min-height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rs-shot {
+  margin: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  overflow: hidden;
+  background: var(--bg);
+}
+
+.rs-shot img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.rs-shot figcaption {
+  padding: var(--space-xs) var(--space-sm);
+  font-size: var(--fs-sm);
+}
+
+.rs-era-banner {
+  display: block;
+  width: 100%;
+  max-height: 220px;
+  object-fit: cover;
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  margin: var(--space-sm) 0 var(--space-md);
+}