Scaffold sample post

This post exists so the scaffold can prove two things. It has a Turkish sibling in the same folder, so /posts/scaffold-sample and /tr/posts/scaffold-sample both exist, each declares the other with hreflang, and the language switcher moves between them without touching the home page. And it contains one of every element a post can contain, so the type scale, the prose rhythm and the code block are rendered against real material rather than against nothing.

A real post opens with the behaviour, not with an introduction to the introduction.

What a heading has to do

A heading is a landmark, not an ornament. It has to be findable when the reader is scrolling for the part they half-remember, and it has to sit far enough from the paragraph above that the eye stops. Both of those are spacing, not size.

And a subheading under it

Three levels are enough for a post. A fourth means the page wanted to be two pages.

The three values

Everything on this site that carries a value carries it twice: once in colour, once in something colour cannot take away.

Value	Wire	Printed
0	thin, grey	`0` in ink, regular
1	double width, blue	`1` in blue, bold
X	dashed, red, hatched band	`X` in red, bold

The redundancy is the point. --sig-hi against --sig-lo is about 2:1 in luminance, which is nowhere near enough on its own — so width does the work and hue confirms it.

Figure 1. The three values, drawn in the pen the figures use. Width carries the difference before colour does: cover the hues and a 1 is still the heavy line.

Let the reader operate the figure within ten seconds, then read comfortably for ten minutes.

That line from the design brief is the whole argument for the measure, the line height and the size of a tap target, and it is worth re-reading whenever a page starts to look clever.

Code

Code is typed as written. Ligatures are off everywhere, so <= is two characters and a signal name looks the same in a sentence, in a schematic and in a trace. The block below is not pasted into this page: it is snippets/rising-edge-detector/rising_edge_detector.sv, included by the fence's file=, so the code a reader sees is the same text the linter and the simulator read. The gutter carries the file's own line numbers, so the washed lines are 15 to 21 and 24 on this page and 15 to 21 and 24 in the file — which is also how Verilator would name them.

rising_edge_detector.sv

// One rising edge of sig_in produces one clock period of pulse.
//
// Reset style for this module: asynchronous, active low. One style per page,
// stated up front, so nothing on the page has to be read twice.
module rising_edge_detector (
    input  logic clk,
    input  logic rst_n,
    input  logic sig_in,
    output logic pulse
);

  // The value sig_in had one clock period ago.
  logic sig_d;

  always_ff @(posedge clk or negedge rst_n) begin
    if (!rst_n) begin
      sig_d <= 1'b0;
    end else begin
      sig_d <= sig_in;
    end
  end

  // High for exactly one clock period, on the cycle after sig_in rises.
  assign pulse = sig_in & ~sig_d;

endmodule

Three things are worth noticing in that block, and all three are typography rather than logic:

always_ff and logic are keywords and take one hue; 1'b0 is a literal and takes another.
The comment is muted and upright. Italic comments would pull a mono italic file onto every page that shows code, which is 43 KB for a slant.
Nothing is hyphenated. rising_edge_detector would be unreadable broken across a line, so hyphens is manual site-wide.

The gutter is drawn only where it is read: on an include, whose numbers are the file's own, on a block with a highlight= range, on any fence that asks with numbers, and in a diff, where the same column holds the + or the − instead. Outside those, a fence written by hand has none, and its first character sits on the same left edge as this paragraph — the gutter is about a tenth of the line on a phone, and a line number means nothing when there is no file to count into:

npm run lint:sv

Highlighting is written in the meta string rather than as // [!code highlight] comments in the file, because the .sv on disk has to stay exactly what Verilator, Icarus and Yosys read. A fence written by hand can still use the comment form, and a diff puts its marker where the number would be:

logic pulse_q;            
logic pulse_d, pulse_q;

Maths

A formula is set with KaTeX, whose stylesheet is loaded only on a page that has one. Inline, the maximum clock frequency of a path is $f_{\max} = 1/T_{\mathrm{clk}}$ , and the slack on that path is what is left of the period after everything on it has taken its share:

t_{\mathrm{slack}} = T_{\mathrm{clk}} - \left( t_{\mathrm{cq}} + t_{\mathrm{logic}} + t_{\mathrm{setup}} + t_{\mathrm{skew}} \right)

That is a definition, not a measurement: what any of those terms is worth on a real part comes from a timing report, and no number on this site is written without one. A display equation sits in a box that scrolls sideways, for the same reason a table and a code line do — one long formula must not set the width of the page on a phone.

Links and emphasis

A link in prose takes the accent and an underline, because the accent has exactly one job: marking what the reader can act on. Nothing else on the page may borrow it — not a heading, not a figure, not a wire. The about page says who writes this and why.

Emphasis is italic for a word and semibold for a phrase, and neither is a colour.