page: txp5

Core SASS

form: txp5_scss

_typeset.scss modified 47 days ago


    
      // Major Third type scale for headings: https://type-scale.com
:root {
  --h1: 3.052rem;
  --h2: 2.441rem;
  --h3: 1.953rem;
  --h4: 1.563rem;
  --h5: 1.25rem;
  --h6: 1rem;
}


// Consistent baselines assuming 1.5rem baseline
.b_typeset,
.txp-layout-textbox,
.ui-dialog-content {
  h1 {
    font-size: var(--h1 );
    line-height: 3.75rem;
    margin-bottom: 1.5rem;
  }

  h2 {
    font-size: var(--h2);
    line-height: 3rem;
    margin-bottom: 1.5rem;
  }

  h3 {
    font-size: var(--h3 );
    line-height: 2.25rem;
    margin-bottom: 1.5rem;
  }

  h4 {
    font-size: var(--h4 );
    line-height: 2.25rem;
    margin-bottom: 1.5rem;
  }

  h5 {
    font-size: var(--h5 );
    line-height: 1.5rem;
    margin-bottom: 1.5rem;
  }

  h6 {
    font-size: var(--h6 );
    // line-height: 1.5;
    margin-bottom: 1.5rem;
    font-weight: var(--font-heavy);
  }

  p {
    max-width: var(--type-measure);
    margin-bottom: var(--base-unit);
  }

  ul,
  ol,
  dl {
    margin-bottom: var(--base-unit);
  }

  ul {
    list-style-position: outside;
    list-style-type: square;
  }

  ol {
    list-style-position: outside;
  }

  li {
    max-width: var(--type-measure);
  }

  dd {
    margin-inline-start: var(--base-unit);
  }

  blockquote p {
    margin: var(--base-unit--b) var(--base-unit);
    font-family: var(--serif);

    &:before,
    &:after {
      display: inline-block;
      transform: scale(1.5);
    }

    &:before {
      content: '“';
      margin-inline-end: calc(var(--base-unit--ss)/2);
    }

    &:after {
      content: '”';
    }
  }

// Hoz rules
  hr {
     margin: var(--base-unit--b) 0;
  }

  // a {
  //   &:hover {
  //
  //   }
  // }

  p>img {
    float: left;
    width: 66%;
    //min-width: min-content;
    margin-right: var(--base-unit);
    margin-top: var(--base-unit--ss);
  }

  p:has(> img) {
    overflow: auto;
  }

  figure,
  table,
  pre {
    margin-bottom: var(--base-unit);
  }



  pre {
    font-family: var(--mono);
   // background-color: var(--clr-brand);
    padding: var(--base-unit--s) var(--base-unit);
  }
}
    

  

Source html

        
          <div class="txp-layout-textbox">

<h1>h1 Title</h1>

<h2>h2 Title</h2>

<h3>h3 Title</h3>

<h4>h4 Title</h4>

<h5>h5 Title</h5>

<h6>h6 Title</h6>

<p><a href="">Modernipsum</a> dolor sit amet postminimalism, art deco nouveau realisme art nouveau mail art fluxus, <em>social realism</em> stuckism post-painterly abstraction.</p>

<p>Formalism <small>post modern</small> baroque relational art ottonian russian <strong>symbolism</strong> monumentalism realism neue slowenische kunst, synchromism carolingian bauhaus superflat art deco carolingian<sup class="footnote" id="fnrev172963506367aa887ac9943-1"><a href="#fn172963506367aa887ac9943-1">1</a></sup>.</p>

<p class="footnote" id="fn172963506367aa887ac9943-1"><sup>1</sup> <a href="">Fluxus painting tachism caravaggisti</a>.</p>

<ul>
	<li>Abstract expressionism</li>
	<li>Op art</li>
	<li>Superflat</li>
</ul>

<ol>
	<li>Cloisonnism</li>
	<li>Neo-classicism</li>
	<li>Geometric abstraction</li>
</ol>

<blockquote>
	<p>Vorticism, impressionism intervention art suprematism lettrism hudson river school.</p>
</blockquote>

<dl>
	<dt>Neo-expressionism</dt>
	<dd>Outsider art</dd>
	<dd>Hyperrealism</dd>
	<dt>Symbolism</dt>
	<dt>Neo-impressionism</dt>
	<dt>Scuola</dt>
</dl>

<hr />

<p>Secularism stuckism international, neoclassicism. Art nouveau <img alt="landscape image" src="/images/1.svg" title="landscape image"> Post-impressionism cobra modernism, immagine poesia biedermeier aestheticism.</p>

<figure>
  <img alt="landscape image" src="/images/1.svg" title="landscape image">
  <figcaption>
    Landscape image with figcaption
  </figcaption>
</figure>

<table>
		<tr>
			<th>video </th>
			<th>art </th>
			<th>monumentalism </th>
		</tr>
		<tr>
			<td> russian </td>
			<td> futurism </td>
			<td> post-structuralism </td>
		</tr>
		<tr>
			<td> video art </td>
			<td> cubism </td>
			<td> neo-expressionism </td>
		</tr>
</table>

<pre><code>&lt;txp5:romana color field  /&gt;</code></pre>

<p>      pre-raphaelites hudson river school neo-expressionism.</p>

</div>