Graham McIntire
2097dbc018
Rewrite the NLOS post to reflect what microwaveprop has learned: M-refractivity and dM/dh as the actual duct discriminant, the four duct taxonomy with radiation ducts as the North Texas mechanism, binary duct detection as a coin flip, low pressure beating high, shallow boundary layer winning, PWAT sweet spot, seasonal pattern (spring worst, summer best), troposcatter as the floor, and real numbers for the 65 km QTH-to-W5HN/B path. New interactive scenes: N vs M side-by-side refractivity profile, pressure/HPBL/binary-duct bar chart, band-vs-dawn enhancement, PWAT sweet spot with draggable cursor, monthly ducting probability, and a 10 GHz link-budget decomposition showing how the 36 dB diffraction gap gets closed. Polish pass across all scenes: softer palette, rounded stroke caps/joins, prettier slider styling in scene.css and nlos.css, signal-pulse animations on NF cascade / single-stage / LNA placement, trail persistence on the ray-trace scene, animated glints along trapped rays in the duct scene, and animated TCP sequence diagrams. Add local-serve preview mode so future-dated posts show up on zola serve but stay hidden on the deployed build.
183 lines
4.4 KiB
CSS
183 lines
4.4 KiB
CSS
/* Styles for the NLOS propagation post, polished. */
|
|
|
|
.nlos {
|
|
--nlos-bg: #1a1d24;
|
|
--nlos-bg-2: #232831;
|
|
--nlos-panel: #242932;
|
|
--nlos-fg: #d8dce4;
|
|
--nlos-dim: #8189a0;
|
|
--nlos-grid: #2d323d;
|
|
--nlos-grid-strong: #3a414e;
|
|
--nlos-blue: #78b5f3;
|
|
--nlos-cyan: #6dc5d3;
|
|
--nlos-green: #9dca83;
|
|
--nlos-orange: #d6a86a;
|
|
--nlos-red: #e58089;
|
|
--nlos-yellow: #e2c37d;
|
|
--nlos-magenta: #c78de0;
|
|
--nlos-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.nlos-scene {
|
|
margin: 2.75rem 0;
|
|
background:
|
|
radial-gradient(ellipse at top left, rgba(120, 181, 243, 0.035) 0%, transparent 55%),
|
|
radial-gradient(ellipse at bottom right, rgba(199, 141, 224, 0.025) 0%, transparent 55%),
|
|
linear-gradient(180deg, var(--nlos-bg) 0%, var(--nlos-bg-2) 100%);
|
|
border: 1px solid var(--nlos-grid);
|
|
border-radius: 10px;
|
|
padding: 0.85rem 0.85rem 1.1rem;
|
|
box-shadow: var(--nlos-shadow);
|
|
}
|
|
|
|
.nlos-scene canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
touch-action: none;
|
|
cursor: grab;
|
|
background: transparent;
|
|
}
|
|
|
|
.nlos-scene canvas:active { cursor: grabbing; }
|
|
|
|
.nlos-controls {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 0.65rem 0.9rem;
|
|
margin-top: 0.85rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.nlos-controls { grid-template-columns: repeat(2, 1fr); }
|
|
.nlos-controls.nlos-controls--three { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
|
|
.nlos-control { display: flex; flex-direction: column; gap: 0.3rem; }
|
|
|
|
.nlos-control label {
|
|
color: var(--nlos-dim);
|
|
font-size: 0.8rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.nlos-control label .nlos-value {
|
|
color: var(--nlos-fg);
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nlos-control input[type="range"] {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 20px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.nlos-control input[type="range"]::-webkit-slider-runnable-track {
|
|
height: 4px;
|
|
border-radius: 4px;
|
|
background: linear-gradient(90deg, var(--nlos-grid-strong), var(--nlos-grid));
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.nlos-control input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--nlos-cyan);
|
|
border: 2px solid var(--nlos-bg);
|
|
margin-top: -5px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
|
|
transition: box-shadow 160ms ease;
|
|
}
|
|
|
|
.nlos-control input[type="range"]:hover::-webkit-slider-thumb,
|
|
.nlos-control input[type="range"]:focus::-webkit-slider-thumb {
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(109, 197, 211, 0.12);
|
|
}
|
|
|
|
.nlos-control input[type="range"]::-moz-range-track {
|
|
height: 4px;
|
|
border-radius: 4px;
|
|
background: var(--nlos-grid-strong);
|
|
}
|
|
.nlos-control input[type="range"]::-moz-range-thumb {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--nlos-cyan);
|
|
border: 2px solid var(--nlos-bg);
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
|
|
transition: box-shadow 160ms ease;
|
|
}
|
|
.nlos-control input[type="range"]:focus { outline: none; }
|
|
|
|
.nlos-scene .nlos-caption {
|
|
margin-top: 0.65rem;
|
|
font-size: 0.85rem;
|
|
color: var(--nlos-dim);
|
|
line-height: 1.55;
|
|
max-width: 62em;
|
|
}
|
|
|
|
.nlos-scene .nlos-readout {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem 1.4rem;
|
|
padding: 0.45rem 0.1rem 0.3rem;
|
|
margin-top: 0.15rem;
|
|
color: var(--nlos-fg);
|
|
font-size: 0.82rem;
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: 0.01em;
|
|
border-bottom: 1px dashed var(--nlos-grid);
|
|
}
|
|
|
|
.nlos-scene .nlos-readout .nlos-readout-item span:first-child {
|
|
color: var(--nlos-dim);
|
|
margin-right: 0.35rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.nlos-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 0.6rem;
|
|
}
|
|
|
|
.nlos-buttons button {
|
|
background: var(--nlos-panel);
|
|
color: var(--nlos-fg);
|
|
border: 1px solid var(--nlos-grid-strong);
|
|
border-radius: 8px;
|
|
padding: 0.4rem 0.8rem;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
|
|
}
|
|
|
|
.nlos-buttons button:hover {
|
|
border-color: var(--nlos-cyan);
|
|
color: #fff;
|
|
}
|
|
|
|
.nlos-buttons button[aria-pressed="true"] {
|
|
background: var(--nlos-cyan);
|
|
color: #131720;
|
|
border-color: var(--nlos-cyan);
|
|
}
|