style-forge.media/src/mobile/text.css

Style-Forge.Media: comprehensive CSS media query helpers for responsive web design.

@media only screen and (max-width: 600px) {
  .\@mob\:ff\:sans { font-family: var(--sf-ff-sans) }
  .\@mob\:ff\:serif { font-family: var(--sf-ff-serif) }
  .\@mob\:ff\:monospace { font-family: var(--sf-ff-monospace) }
  .\@mob\:ff\:cursive { font-family: var(--sf-ff-cursive) }
  .\@mob\:ff\:fantasy { font-family: var(--sf-ff-fantasy) }
  .\@mob\:ff\:emoji { font-family: var(--sf-ff-emoji) }
  .\@mob\:ff\:math { font-family: var(--sf-ff-math) }
  .\@mob\:ff\:fangsong { font-family: var(--sf-ff-fangsong) }

  .\@mob\:fw { font-weight: var(--sf-fw) }
  .\@mob\:fw\:i { font-weight: inherit }
  .\@mob\:fw\:ii { font-weight: initial }
  .\@mob\:fw\:bold { font-weight: var(--sf-fw-bold) }
  .\@mob\:fw\:small { font-weight: var(--sf-fw-small) }

  .\@mob\:fw\:h1 { font-weight: var(--sf-fw-h1) }
  .\@mob\:fw\:h2 { font-weight: var(--sf-fw-h2) }
  .\@mob\:fw\:h3 { font-weight: var(--sf-fw-h3) }
  .\@mob\:fw\:h4 { font-weight: var(--sf-fw-h4) }
  .\@mob\:fw\:h5 { font-weight: var(--sf-fw-h5) }
  .\@mob\:fw\:h6 { font-weight: var(--sf-fw-h6) }

  .\@mob\:fw\:1 { font-weight: 100 }
  .\@mob\:fw\:2 { font-weight: 200 }
  .\@mob\:fw\:3 { font-weight: 300 }
  .\@mob\:fw\:4 { font-weight: 400 }
  .\@mob\:fw\:5 { font-weight: 500 }
  .\@mob\:fw\:6 { font-weight: 600 }
  .\@mob\:fw\:7 { font-weight: 700 }
  .\@mob\:fw\:8 { font-weight: 800 }
  .\@mob\:fw\:9 { font-weight: 900 }

  .\@mob\:fw\:thin { font-weight: 100 }
  .\@mob\:fw\:light { font-weight: 300 }
  .\@mob\:fw, .\@mob\:fw\:normal { font-weight: 400 }
  .\@mob\:fw\:medium { font-weight: 500 }
  .\@mob\:fw\:bold { font-weight: 700 }

  .\@mob\:fw\:extra-light,
  .\@mob\:fw\:ultra-light
  { font-weight: 200 }

  .\@mob\:fw\:semi-bold,
  .\@mob\:fw\:demi-bold
  { font-weight: 600 }

  .\@mob\:fw\:extra-bold,
  .\@mob\:fw\:ultra-bold
  { font-weight: 800 }

  .\@mob\:fw\:black,
  .\@mob\:fw\:heavy
  { font-weight: 900 }

  .\@mob\:fz\:h1 { font-size: var(--sf-fz-h1) }
  .\@mob\:fz\:h2 { font-size: var(--sf-fz-h2) }
  .\@mob\:fz\:h3 { font-size: var(--sf-fz-h3) }
  .\@mob\:fz\:h4 { font-size: var(--sf-fz-h4) }
  .\@mob\:fz\:h5 { font-size: var(--sf-fz-h5) }
  .\@mob\:fz\:h6 { font-size: var(--sf-fz-h6) }

  .\@mob\:fz { font-size: var(--sf-fz) }
  .\@mob\:fz\:0 { font-size: var(--sf-fz-0) }
  .\@mob\:fz\:i { font-size: inherit }
  .\@mob\:fz\:ii { font-size: initial }
  .\@mob\:fz\:bold { font-size: var(--sf-fz-bold) }

  .\@mob\:fz\:small { font-size: var(--sf-fz-small) }

  .\@mob\:fz\:xxxs { font-size: var(--sf-rem-xxxs) }   /* 1px */
  .\@mob\:fz\:xxs  { font-size: var(--sf-rem-xxs) }    /* 2px */
  .\@mob\:fz\:xxss { font-size: var(--sf-rem-xxss) }   /* 3px */
  .\@mob\:fz\:xs   { font-size: var(--sf-rem-xs) }     /* 4px */
  .\@mob\:fz\:xss  { font-size: var(--sf-rem-xss) }    /* 5px */
  .\@mob\:fz\:xsss { font-size: var(--sf-rem-xsss) }   /* 6px */
  .\@mob\:fz\:3xs  { font-size: var(--sf-rem-3xs) }    /* 7px */
  .\@mob\:fz\:sm   { font-size: var(--sf-rem-sm) }     /* 8px */
  .\@mob\:fz\:smm  { font-size: var(--sf-rem-smm) }    /* 9px */
  .\@mob\:fz\:s    { font-size: var(--sf-rem-s) }      /* 10px */
  .\@mob\:fz\:ss   { font-size: var(--sf-rem-ss) }     /* 11px */
  .\@mob\:fz\:ms   { font-size: var(--sf-rem-ms) }     /* 12px */
  .\@mob\:fz\:mss  { font-size: var(--sf-rem-mss) }    /* 13px */
  .\@mob\:fz\:ls   { font-size: var(--sf-rem-ls) }     /* 14px */
  .\@mob\:fz\:lss  { font-size: var(--sf-rem-lss) }    /* 15px */
  .\@mob\:fz\:md   { font-size: var(--sf-rem-md) }     /* 16px */
  .\@mob\:fz\:mdd  { font-size: var(--sf-rem-mdd) }    /* 17px */
  .\@mob\:fz\:lg   { font-size: var(--sf-rem-lg) }     /* 18px */
  .\@mob\:fz\:lgg  { font-size: var(--sf-rem-lgg) }    /* 19px */
  .\@mob\:fz\:xl   { font-size: var(--sf-rem-xl) }     /* 20px */
  .\@mob\:fz\:2xl  { font-size: var(--sf-rem-2xl) }    /* 24px */
  .\@mob\:fz\:3xl  { font-size: var(--sf-rem-3xl) }    /* 32px */
  .\@mob\:fz\:4xl  { font-size: var(--sf-rem-4xl) }    /* 40px */
  .\@mob\:fz\:5xl  { font-size: var(--sf-rem-5xl) }    /* 48px */
  .\@mob\:fz\:6xl  { font-size: var(--sf-rem-6xl) }    /* 56px */
  .\@mob\:fz\:7xl  { font-size: var(--sf-rem-7xl) }    /* 64px */
  .\@mob\:fz\:8xl  { font-size: var(--sf-rem-8xl) }    /* 72px */
  .\@mob\:fz\:9xl  { font-size: var(--sf-rem-9xl) }    /* 80px */
  .\@mob\:fz\:10xl { font-size: var(--sf-rem-10xl) }   /* 88px */
  .\@mob\:fz\:11xl { font-size: var(--sf-rem-11xl) }   /* 96px */
  .\@mob\:fz\:12xl { font-size: var(--sf-rem-12xl) }   /* 104px */

  .\@mob\:ta\:i, .\@mob\:\$ta\:i > * { text-align: inherit }
  .\@mob\:ta\:ii, .\@mob\:\$ta\:ii > * { text-align: inherit }
  .\@mob\:ta\:l, .\@mob\:\$ta\:l > * { text-align: start }
  .\@mob\:ta\:c, .\@mob\:\$ta\:c > * { text-align: center }
  .\@mob\:ta\:r, .\@mob\:\$ta\:r > * { text-align: end }
  .\@mob\:ta\:j, .\@mob\:\$ta\:j > * { text-align: justify }

  .\@mob\:whs, .\@mob\:\$whs > * { white-space: normal }
  .\@mob\:whs\:i, .\@mob\:\$whs\:i > * { white-space: inherit }
  .\@mob\:whs\:ii, .\@mob\:\$whs\:ii > * { white-space: initial }
  .\@mob\:whs\:nowrap, .\@mob\:\$whs\:nowrap > * { white-space: nowrap }
  .\@mob\:whs\:p, .\@mob\:\$whs\:p > * { white-space: pre }
  .\@mob\:whs\:pl, .\@mob\:\$whs\:pl > * { white-space: pre-line }
  .\@mob\:whs\:pw, .\@mob\:\$whs\:pw > * { white-space: pre-wrap }

  .\@mob\:lh, .\@mob\:\$lh > * { line-height: var(--sf-lh-normal) }
  .\@mob\:lh\:base, .\@mob\:\$lh\:base > * { line-height: var(--sf-lh) }
  .\@mob\:lh\:i, .\@mob\:\$lh\:i > * { line-height: inherit }
  .\@mob\:lh\:ii, .\@mob\:\$lh\:ii > * { line-height: initial }
  .\@mob\:lh\:n, .\@mob\:\$lh\:n > * { line-height: normal }
  .\@mob\:lh\:1, .\@mob\:\$lh\:1 > * { line-height: 1 }
  .\@mob\:lh\:0, .\@mob\:\$lh\:0 > * { line-height: 0 }

  /* https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align */
  .\@mob\:va\:i, .\@mob\:\$va\:i > * { vertical-align: inherit }
  .\@mob\:va\:ii, .\@mob\:\$va\:ii > * { vertical-align: initial }
  .\@mob\:va\:bl, .\@mob\:\$va\:bl > * { vertical-align: baseline }
  .\@mob\:va\:a, .\@mob\:\$va\:a > * { vertical-align: auto }
  .\@mob\:va\:m, .\@mob\:\$va\:m > * { vertical-align: middle }
  .\@mob\:va\:t, .\@mob\:\$va\:t > * { vertical-align: top }
  .\@mob\:va\:b, .\@mob\:\$va\:b > * { vertical-align: bottom }
  .\@mob\:va\:tt, .\@mob\:\$va\:tt > * { vertical-align: text-top }
  .\@mob\:va\:tb, .\@mob\:\$va\:tb > * { vertical-align: text-bottom }
  .\@mob\:va\:sub, .\@mob\:\$va\:sub > * { vertical-align: sub }
  .\@mob\:va\:sup, .\@mob\:\$va\:sup > * { vertical-align: super }

  .\@mob\:rtl { direction: rtl }
  .\@mob\:ltr { direction: ltr }

  /* https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode */
  .\@mob\:wm\:lr { writing-mode: lr }
  .\@mob\:wm\:rl { writing-mode: rl }
  .\@mob\:wm\:tb { writing-mode: tb }

  .\@mob\:wm\:btl { writing-mode: bt-lr }
  .\@mob\:wm\:btr { writing-mode: bt-rl }
  .\@mob\:wm\:lrb { writing-mode: lr-bt }
  .\@mob\:wm\:lrt { writing-mode: lr-tb }
  .\@mob\:wm\:rlb { writing-mode: rl-bt }
  .\@mob\:wm\:rlt { writing-mode: rl-tb }
  .\@mob\:wm\:tbl { writing-mode: tb-lr }
  .\@mob\:wm\:tbr { writing-mode: tb-rl }

  .\@mob\:wm\:i { writing-mode: inherit }
  .\@mob\:wm\:ii { writing-mode: initial }

  .\@mob\:wm\:horizontal-tb { writing-mode: horizontal-tb }
  .\@mob\:wm\:sideways-lr { writing-mode: sideways-lr }
  .\@mob\:wm\:sideways-rl { writing-mode: sideways-rl }
  .\@mob\:wm\:vertical-lr { writing-mode: vertical-lr }
  .\@mob\:wm\:vertical-rl { writing-mode: vertical-rl }

  .\@mob\:tt\:i { text-transform: inherit }
  .\@mob\:tt\:ii { text-transform: initial }
  .\@mob\:tt\:n { text-transform: none }
  .\@mob\:tt\:ca { text-transform: capitalize }
  .\@mob\:tt\:fsk { text-transform: full-size-kana }
  .\@mob\:tt\:fw { text-transform: full-width }
  .\@mob\:tt\:ma { text-transform: math-auto }
  .\@mob\:tt\:lo { text-transform: lowercase }
  .\@mob\:tt\:up { text-transform: uppercase }

  /* /// */

  html.var .\@mob\:ff\:sans { font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' }
  html.var .\@mob\:ff\:serif { font-family: Times, 'Times New Roman', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' }
  html.var .\@mob\:ff\:monospace { font-family: 'Lucida Console', Courier, monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' }
  html.var .\@mob\:ff\:cursive { font-family: cursive }
  html.var .\@mob\:ff\:fantasy { font-family: fantasy }
  html.var .\@mob\:ff\:emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', emoji }
  html.var .\@mob\:ff\:math { font-family: math }
  html.var .\@mob\:ff\:fangsong { font-family: fangsong }

  html.var .\@mob\:fw { font-weight: 400 }
  html.var .\@mob\:fw\:i { font-weight: inherit }
  html.var .\@mob\:fw\:ii { font-weight: initial }
  html.var .\@mob\:fw\:bold { font-weight: 600 }
  html.var .\@mob\:fw\:small { font-weight: 300 }

  html.var .\@mob\:fw\:h1 { font-weight: 700 }
  html.var .\@mob\:fw\:h2 { font-weight: 700 }
  html.var .\@mob\:fw\:h3 { font-weight: 700 }
  html.var .\@mob\:fw\:h4 { font-weight: 600 }
  html.var .\@mob\:fw\:h5 { font-weight: 600 }
  html.var .\@mob\:fw\:h6 { font-weight: 600 }

  html.var .\@mob\:fz\:h1 { font-size: 48px }
  html.var .\@mob\:fz\:h2 { font-size: 40px }
  html.var .\@mob\:fz\:h3 { font-size: 32px }
  html.var .\@mob\:fz\:h4 { font-size: 24px }
  html.var .\@mob\:fz\:h5 { font-size: 20px }
  html.var .\@mob\:fz\:h6 { font-size: 16px }

  html.var .\@mob\:fz { font-size: 16px }
  html.var .\@mob\:fz\:0 { font-size: 0 }
  html.var .\@mob\:fz\:i { font-size: inherit }
  html.var .\@mob\:fz\:ii { font-size: initial }
  html.var .\@mob\:fz\:bold { font-size: 16px }

  html.var .\@mob\:fz\:small { font-size: 12px }

  html.var .\@mob\:fz\:xxxs { font-size: 1px }
  html.var .\@mob\:fz\:xxs  { font-size: 2px }
  html.var .\@mob\:fz\:xxss { font-size: 3px }
  html.var .\@mob\:fz\:xs   { font-size: 4px }
  html.var .\@mob\:fz\:xss  { font-size: 5px }
  html.var .\@mob\:fz\:xsss { font-size: 6px }
  html.var .\@mob\:fz\:3xs  { font-size: 7px }
  html.var .\@mob\:fz\:sm   { font-size: 8px }
  html.var .\@mob\:fz\:smm  { font-size: 9px }
  html.var .\@mob\:fz\:s    { font-size: 10px }
  html.var .\@mob\:fz\:ss   { font-size: 11px }
  html.var .\@mob\:fz\:ms   { font-size: 12px }
  html.var .\@mob\:fz\:mss  { font-size: 13px }
  html.var .\@mob\:fz\:ls   { font-size: 14px }
  html.var .\@mob\:fz\:lss  { font-size: 15px }
  html.var .\@mob\:fz\:md   { font-size: 16px }
  html.var .\@mob\:fz\:mdd  { font-size: 17px }
  html.var .\@mob\:fz\:lg   { font-size: 18px }
  html.var .\@mob\:fz\:lgg  { font-size: 19px }
  html.var .\@mob\:fz\:xl   { font-size: 20px }
  html.var .\@mob\:fz\:2xl  { font-size: 24px }
  html.var .\@mob\:fz\:3xl  { font-size: 32px }
  html.var .\@mob\:fz\:4xl  { font-size: 40px }
  html.var .\@mob\:fz\:5xl  { font-size: 48px }
  html.var .\@mob\:fz\:6xl  { font-size: 56px }
  html.var .\@mob\:fz\:7xl  { font-size: 64px }
  html.var .\@mob\:fz\:8xl  { font-size: 72px }
  html.var .\@mob\:fz\:9xl  { font-size: 80px }
  html.var .\@mob\:fz\:10xl { font-size: 88px }
  html.var .\@mob\:fz\:11xl { font-size: 96px }
  html.var .\@mob\:fz\:12xl { font-size: 104px }

  html.var .\@mob\:lh, html.var .\@mob\:\$lh > * { line-height: 1.1875 }
  html.var .\@mob\:lh\:base, html.var .\@mob\:\$lh\:base > * { line-height: 0.8 }
  html.var .\@mob\:lh\:i, html.var .\@mob\:\$lh\:i > * { line-height: inherit }
  html.var .\@mob\:lh\:ii, html.var .\@mob\:\$lh\:ii > * { line-height: initial }
  html.var .\@mob\:lh\:n, html.var .\@mob\:\$lh\:n > * { line-height: normal }
  html.var .\@mob\:lh\:1, html.var .\@mob\:\$lh\:1 > * { line-height: 1 }
  html.var .\@mob\:lh\:0, html.var .\@mob\:\$lh\:0 > * { line-height: 0 }

  html.ta .\@mob\:ta\:i, html.ta .\@mob\:\$ta\:i > * { text-align: inherit }
  html.ta .\@mob\:ta\:ii, html.ta .\@mob\:\$ta\:ii > * { text-align: initial }
  html.ta .\@mob\:ta\:l, html.ta .\@mob\:\$ta\:l > * { text-align: left }
  html.ta .\@mob\:ta\:c, html.ta .\@mob\:\$ta\:c > * { text-align: center }
  html.ta .\@mob\:ta\:r, html.ta .\@mob\:\$ta\:r > * { text-align: right }
  html.ta .\@mob\:ta\:j, html.ta .\@mob\:\$ta\:j > * { text-align: justify }

  html.flex .\@mob\:va\:bl, html.flex .\@mob\:\$va\:bl > * { vertical-align: baseline }
  html.flex .\@mob\:va\:a, html.flex .\@mob\:\$va\:a > * { vertical-align: auto }
  html.flex .\@mob\:va\:m, html.flex .\@mob\:\$va\:m > * { vertical-align: middle }
  html.flex .\@mob\:va\:t, html.flex .\@mob\:\$va\:t > * { vertical-align: top }
  html.flex .\@mob\:va\:b, html.flex .\@mob\:\$va\:b > * { vertical-align: bottom }
  html.flex .\@mob\:va\:tt, html.flex .\@mob\:\$va\:tt > * { vertical-align: text-top }
  html.flex .\@mob\:va\:tb, html.flex .\@mob\:\$va\:tb > * { vertical-align: text-bottom }
  html.flex .\@mob\:va\:sub, html.flex .\@mob\:\$va\:sub > * { vertical-align: sub }
  html.flex .\@mob\:va\:sup, html.flex .\@mob\:\$va\:sup > * { vertical-align: super }
}