b9e8821b17
The home hero image overlapped the hero title on phones: the default theme pulls the stacked image up with negative margins (-76px -24px -48px), which only works because it normally sits absolutely positioned inside a fixed 320px box. custom.css lets the image flow to enlarge it, so those margins made it bleed off-screen and collide with the title. Reset them below 960px, and hide the image entirely under 640px -- at phone size it is a wall of unreadable logos that pushes the title, tagline and call-to-action buttons below the fold. Also fixes, found while sweeping every page at 360/400/900px: - Nav bar: the shared Theengs nav has seven top-level entries and the theme swaps to the desktop nav bar at 768px, where it does not fit. From 768px to ~1180px, Shop, Sponsor, the appearance switch and the GitHub link were clipped or off-screen and the page scrolled sideways. Keep the hamburger + full-screen menu until the full menu genuinely fits. - upload/binaries: indented (non-fenced) code blocks render as a bare <pre>, which the theme only makes scrollable inside a language-* wrapper, so the long esptool.py commands pushed the page sideways. - use/lora: the YouTube embed is raw HTML with width="560", wider than a phone. Make video embeds fluid at a 16/9 ratio. - OmgPipeline: stack below a 680px container instead of 480px -- in between, the "OpenMQTTGateway" label spilled out of its node and over the arrows. Drop the media query in index.md that meant to do this: it was scoped to index.md and could never match an element inside the child component. No horizontal overflow remains on any of the 50 pages at 360px, 400px or 900px; desktop is unchanged. Claude-Session: https://claude.ai/code/session_01Nj6xa5Mk5wi8XWtgJG7w5D Co-authored-by: Florian <1technophile@users.noreply.github.com> Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
125 lines
2.6 KiB
Vue
125 lines
2.6 KiB
Vue
<template>
|
|
<div class="omg-pipeline-wrap">
|
|
<div class="omg-pipeline">
|
|
<div class="omg-node">
|
|
<span class="omg-node-icon">🌡️</span>
|
|
<strong>Your devices</strong>
|
|
<span class="omg-node-sub">BLE · RF · IR · LoRa</span>
|
|
</div>
|
|
<span class="omg-arrow">⇄</span>
|
|
<div class="omg-node omg-node-brand">
|
|
<span class="omg-node-icon">📟</span>
|
|
<strong>OpenMQTTGateway</strong>
|
|
<span class="omg-node-sub">ESP32 / ESP8266</span>
|
|
</div>
|
|
<span class="omg-arrow">⇄</span>
|
|
<div class="omg-node">
|
|
<span class="omg-node-icon">🔀</span>
|
|
<strong>MQTT broker</strong>
|
|
<span class="omg-node-sub">Mosquitto...</span>
|
|
</div>
|
|
<span class="omg-arrow">⇄</span>
|
|
<div class="omg-node">
|
|
<span class="omg-node-icon">🏠</span>
|
|
<strong>Your controller</strong>
|
|
<span class="omg-node-sub">Home Assistant, OpenHAB...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.omg-pipeline-wrap {
|
|
container-type: inline-size;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.omg-pipeline {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 8px;
|
|
}
|
|
|
|
.omg-node {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
gap: 4px;
|
|
background: var(--vp-c-bg-soft);
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: 12px;
|
|
padding: 20px 10px;
|
|
}
|
|
|
|
.omg-node-brand {
|
|
border-color: var(--vp-c-brand-1);
|
|
box-shadow: 0 0 0 1px var(--vp-c-brand-1);
|
|
}
|
|
|
|
.omg-node-icon {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.omg-node strong {
|
|
font-size: 15px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.omg-node-sub {
|
|
color: var(--vp-c-text-2);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.omg-arrow {
|
|
align-self: center;
|
|
flex-shrink: 0;
|
|
color: var(--vp-c-brand-1);
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Narrow containers (doc column, tablets): tighten the nodes, keep one row */
|
|
@container (max-width: 760px) {
|
|
.omg-pipeline {
|
|
gap: 6px;
|
|
}
|
|
.omg-node {
|
|
padding: 12px 6px;
|
|
}
|
|
.omg-node strong {
|
|
font-size: 13px;
|
|
}
|
|
.omg-node-sub {
|
|
font-size: 11px;
|
|
}
|
|
.omg-node-icon {
|
|
font-size: 22px;
|
|
}
|
|
.omg-arrow {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
/* Narrow (phones, small tablets): stack vertically. Below ~680px the four nodes
|
|
no longer leave room for the longest label ("OpenMQTTGateway"), which spilled
|
|
out of its box and over the arrows. */
|
|
@container (max-width: 680px) {
|
|
.omg-pipeline {
|
|
flex-direction: column;
|
|
}
|
|
.omg-arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
.omg-node strong {
|
|
font-size: 15px;
|
|
}
|
|
.omg-node-sub {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
</style>
|