form: txp5_scss
// Box sizing rules
*,
*::before,
*::after {
box-sizing: border-box;
}
// Set core root defaults
html {
font-size: 100%;
&:focus-within {
scroll-behavior: smooth;
}
}
// Remove default margin
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ul,
ol,
li,
dl,
dd,
code,
pre {
margin: 0;
font-weight: inherit;
font-size: inherit;
line-height: var(--base-line-height);
}
// Default list styles on ul, ol
ul,
ol {
margin: 0;
padding-inline-start: var(--base-unit);
}
// bold
dt,
strong,
th{
font-weight: var(--font-heavy);
}
// links
a {
color: currentcolor;
text-decoration: underline;
}
// Hoz rules
hr {
border: 0;
height: var(--border-width);
background: var(--clr-text);
}
// Make images easier to work with
img,
picture {
max-width: 100%;
display: inline-block;
}
// Inherit fonts for inputs and buttons
input,
button,
textarea,
select {
font: inherit;
background: transparent;
border: 0;
}
iframe,video {
width: 100%;
border: 0;
}
::selection {
background-color: var(--clr-brand);
}
pre {
overflow: auto;
max-width: var(--type-measure);
}
pre>code {
-webkit-hyphens: none;
hyphens: none;
font-size: smaller;
}
// Remove all animations, transitions and smooth scroll for people that prefer not to see them
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
Source html
<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="fnrev4469118567aa887b0a1d1-1"><a href="#fn4469118567aa887b0a1d1-1">1</a></sup>.</p>
<p class="footnote" id="fn4469118567aa887b0a1d1-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><txp5:romana color field /></code></pre>
<p> pre-raphaelites hudson river school neo-expressionism.</p>