example.md

Example markdown

Testing 1

<h3 style="
margin: 10gu;
padding: 5gu;
width: 1/5;">...</h3>

Testing 2

<h3 style="
@media (--tablet) {
margin: 10gu;
padding: 5gu;
width: 1/5; }">...</h3>

Testing 3

<!--
@media (--tablet) {
    margin: 10gu;
    padding: 5gu;
    width: 1/5;
}-->
<h3>...</h3>

Testing 4

<h3 m(10gu) p(5gu) w(1/5)>...</h3>

Testing 5

<h3 style="margin: 10gu; padding: 5gu; width: 1/5">...</h3>
<h3 style="span: 2@md 4@lg 8@xl">...</h3>

Testing 6

<h3 style="m:10gu; p:5gu; w:1/5">...</h3>
<h3 style="sp:2@md 4@lg 8@xl">...</h3>

Testing 7

<h3 m:10gu p:5gu w:1/5>...</h3>
<h3 sp:2@md-4@lg-8@xl>...</h3>

Testing 8

<h3 m=10gu p=5gu w=1/5>...</h3>
<h3 mt=14gu:md>...</h3>

Testing 9

<h3 margin=10gu padding=5gu width=1/5>...</h3>
<h3 margin-top=md:14gu>...</h3>

Testing 10

<h3 style="margin: 10gu; padding: 5gu; width: 1/5;">...</h3>
<h3 style="margin-top: 14gu^md">...</h3>
<h3 style="sp:2^md 4^lg 8^xl">...</h3>

Testing 11

<h3 style="margin: 10gu; padding: 5gu; width: 1/5;">...</h3>
<h3 style="margin-top: 14gu^md">...</h3>
<h3 style="sp:2^md 4^lg 8^xl">...</h3>
<h3 style="sp:2^md, 4^lg, 8^xl">...</h3>
<h3 style="span: 2 ^md, 4 ^lg, 8 ^xl">...</h3>

Testing 12

<style>
.class {
    width: @lg 4, @xl 8;;
    padding: 2gu 4gu, @xl 3gu 8gu;
}
</style>

<h3 style="width: @lg 4, @xl 8; span: @lg 3, @xl 8">...</h3>

Testing 13

<style>
.class {
    width: @lg 4, @xl 8;;
    padding: 2gu 4gu, @xl 3gu 8gu;
    hidden: @sm true, @md false;
}
</style>

<h3 width="@lg 4, @xl 8" hidden>...</h3>

<h3 text="underline uppecase, @md lowercase" width="@lg 4, @xl 8" hidden="@sm">...</h3>
<!-- don't think that will work because it does not how attributes traddionally work, with comma diliminations. -->

Testing 14

<style>
.class {
    width: @lg 4, @xl 8;;
    padding: 2gu 4gu, @xl 3gu 8gu;
    hidden;
}
</style>

<h3 width="@lg 4, @xl 8" hidden>...</h3>

<h3 text="underline uppecase lowercase@md" width="4@lg 8@xl" hidden="@sm">...</h3>

Testing 15

<style>
.class {
    width: >lg 4, @xl 8;;
    padding: 2gu 4gu, >xl 3gu 8gu;
}
</style>

<h3 style="width: >lg 4, >xl 8; span: >lg 3, >xl 8">...</h3>

Testing 16

<style>
.class {
    width: >lg 4, @xl 8;
    padding: 2gu 4gu, >xl 3gu 8gu;
}
</style>

<h3 style="width >lg 4, >xl 8; span >lg 3, >xl 8">...</h3>

<h3 style="hidden sm; span lg 3, xl 8">...</h3>

Testing 17

<style>
.class {
    width: >lg 4, @xl 8;
    padding: 2gu 4gu, >xl 3gu 8gu;
}
</style>

<h3 style="width >lg 4, >xl 8; span >lg 3, >xl 8">...</h3>

<h3 style="hidden sm; span lg 3, xl 8">...</h3>

<h3 style="hidden -sm; span -lg 3, -xl 8">...</h3>

<style>
.class {
    width: 1/1 | 1/5^md;
    padding: 2gu 4gu, 'md' 3gu 8gu; 
}

.class {
    width: 1/1 | desktop: 1/5;
    padding: 2gu 4gu | tablet: 3gu 8gu;
}

.class {
    width: [1/1, , 1/5];
    padding: [2gu 4gu, 3gu 8gu];
}

.class {
    width: [1/1, desktop: 1/5];
    padding: [2gu 4gu, 3gu 8gu];
}

.class {
    width: 1/1 desktop[1/5];
    padding: 2gu 4gu tablet[3gu 8gu];
}

.class {
    width: 1 1/5^desktop;
    padding: 2gu 4gu [3gu 8gu]^tablet;
}

.class {
    width: 1/1 xl[1/5];
    padding: 2gu 4gu md[3gu 8gu];
}

.class {
    width: 1/1, md 1/5;
    padding: 2gu 4gu, xl 3gu 8gu;
}

.class {
    width: 1, md 1/5;
    padding: 2gu 4gu, xl 3gu 8gu;
}

.class {
    width: @md 1/5;
    padding: 2gu 4gu, @xl 3gu 8gu;
}

.class {
    width: @md 1/5;
    padding: 2gu 4gu @xl 3gu 8gu;
}

.class {
    width: @md 1/5;
    padding: 2gu 4gu, @xl 3gu 8gu;
}

</style>

<div hidden^xs width="1/2+md 1/4+lg">...</div>

<div class="hidden^xs width(1/2+md 1/4+lg)">...</div>

<div class="hidden^xs width-1/2+md width-1/4+lg">...</div>

<div class="width: 1/2^md 1/4^lg; hidden=xs" >...</div>

<div class="extent-1/2^md 1/4^lg" hidden=xs >...</div>

<div stylup="width 1/2^md 1/4^md 1/8^lg; text bold underline; padding-top 10gu^xl; text 2x^xl" >...</div>


<div class="width-1/2-md width-1/4-md width-1/8^lg text-bold text-underline padding-top-10gu-xl text-2fs-xl" >...</div>

<p class="text underline uppercase | width 1/2^md 1/4^lg"></p>

example2.md

<style>
    @media (md) {
        .picture_icon {
            float: left;
        }
        .picture_heading {
            float: right;
        }
    }
</style>