Amiga-Z Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Prevue Guide Channel - CSS / Theme Notes ======

This page tracks “how to make it look more like Prevue”:
  * box sizes
  * fonts
  * rectangular program blocks
  * layout tuning

----

===== Program Grid Boxes =====
Program cells were rounded at first; change to rectangular:

In <code>player.css</code>:

<code>
.cell{
  border-radius: 0;   /* rectangles (Prevue-like) */
}
</code>

You can also tighten spacing:
<code>
.cells{ gap: 6px; }
.cell{ padding: 8px 10px; }
</code>

----

===== Video Slot Stability =====
To avoid the video “resizing” during playback, the video/iframe are forced to fill the slot:

<code>
.top-left-slot video,
.top-left-slot iframe{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* or contain */
  object-position: center;
  display: block;
  background: #000;
  border: 0;
}
</code>

If you want **no cropping** (letterbox instead), use:
  * <code>object-fit: contain;</code>

----

===== Aspect Ratio / Layout =====
We stabilized the left slot with an aspect ratio:

<code>
.top-left-slot{
  aspect-ratio: 16 / 9;
  width: 100%;
}
</code>

If the left panel becomes too tall, cap it (more space for the channel grid below):

<code>
.top-left-slot{
  max-height: 34vh;   /* tweak 30–36vh */
  height: auto;
}
.top{ align-items: stretch; }
</code>

----

===== Fonts =====
Goal: optionally use the Prevue-style font later.

Approach:
  * Add <code>@font-face</code> in <code>player.css</code>
  * Apply the font to specific UI areas first (grid, channel numbers, header)
  * Adjust letter spacing to match the era

Example structure:
<code>
@font-face{
  font-family: "Prevue";
  src: url("/prevue/assets/fonts/prevue.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
body{ font-family: Prevue, ui-sans-serif, system-ui; }
</code>

----

===== Color / Style Direction =====
Possible target looks:
  * Classic 90s Prevue
  * “AmigaZ Cablevision” brand variant
  * Retro-futuristic take (Amiga-inspired palette)

</code>