Stylament 0.28.3

Grouping Content

These are elements for block-level text content.

Related

Spec [external]

MDN [external]

Definition lists

dd

scss 
dd {
  
}

Related

Spec [external]

MDN [external]

dl

scss 
dl {
  
}

Related

Spec [external]

MDN [external]

dt

scss 
dt {
  
}

Related

Spec [external]

MDN [external]

Figures

figcaption

scss 
figcaption {
  
}

Figure caption.

Related

Spec [external]

MDN [external]

figure

scss 
figure {
  
}

Self-contained figure.

Related

Spec [external]

MDN [external]

Generic

div

scss 
div {
  // Don’t style the generic block!
}

Division (generic block).

Related

Spec [external]

MDN [external]

Lists

li

scss 
li {
  &::marker {
    @if map.get(cfg.$merged, coloring, color, logical, list-marker) {
      @include coloring.set-colors("list-marker");
      @include coloring.use-colors;
    }
  }
}

List item.

Related

Spec [external]

MDN [external]

menu

scss 
menu {
  padding: 0;
  margin: 0;
  list-style: none;

  & > li {
    block-size: var(---item-block-size, 2em);
    line-height: var(---item-line-height, 1em);
    padding: 0;
    margin: 0;

    & > a {
      // Let the link area cover the whole height.
      display: inline-grid;
      align-content: center;
      block-size: 100%;
      padding-inline: var(---item-padding, 1em);
    }
  }
}

Menu list.

Related

Spec [external]

MDN [external]

ol

scss 
ol {
  
}

Ordered list.

Related

Spec [external]

MDN [external]

ul

scss 
ul {
  
}

Unordered list.

Related

Spec [external]

MDN [external]

Paragraphs

p

scss 
p {
  
}

Paragraph.

Related

Spec [external]

MDN [external]

Preformatted

pre

scss 
pre {
  
}

Preformatted text.

Related

Spec [external]

MDN [external]

Quotations

blockquote

scss 
blockquote {
  ---stroke-width: #{svar(stroke-width-4)};
  ---stroke-color: currentcolor;
  ---marker: "“";
  ---marker-size: 2;
  ---marker-outdent: 0.45ch;
  padding-inline: var(---indent);
  border-inline-start: var(---no-stroke, var(---stroke-width)) var(---stroke-color) solid;
  margin-inline-start: var(---no-stroke, calc(-1 * var(---stroke-width)));

  &::before {
    content: var(---marker);
    font-size: calc(var(---marker-size) * 1em);
    // Same line height as content:
    line-height: calc(svar(line-root) / var(---marker-size));
    // Take out of flow but keep static position:
    position: absolute;
    // Outdent:
    margin-inline-start: calc(-0.5 * var(---stroke-width) - var(---marker-outdent) - var(---indent, 0ch) / var(---marker-size));
    // Cover a small piece of the border with background color:
    block-size: calc(0.75em / var(---marker-size));
    background-color: var(---clr-bg);
  }
}

Extended quotation.

Custom properties:

  • ---indent {Number}: Customize the indent.
  • ---stroke-width {Number<rem|em>}: Customize the width of the stroke.
  • ---stroke-color {Color} [currentcolor]: Customize the color of the stroke.
  • ---marker {String} [““”]: Customize the marker. Set to "" to remove it.
  • ---marker-size {Number} [2]: Customize the size of the marker.
  • ---marker-outdent {Number} [0.5ch]: Customize the outdent of the marker.
  • ---no-stroke {unset|any} [unset]: Set to anything to remove the stroke.

Related

Spec [external]

MDN [external]

Thematic breaks

hr

scss 
hr {
  border: none;
  block-size: 0;
  inline-size: 100%;
  outline-style: svar(stroke-style-hr, svar(stroke-style-default, solid));
  outline-width: calc(0.5 * svar(stroke-width-hr, svar(stroke-width-default, 0.125rem)));
  margin-inline: auto;
  color: svar(color-hr);
}

Thematic break (horizontal rule).

Make hr line-height neutral, i. e. 0px high, by using outline rather than border.

Related

Spec [external]

MDN [external]