Migrate Rose's Dev Pack (#67)

* pull in raw html, fix mismatched closing tags

* extract templates to own files

* extract headings into own file, split heading files

* primary nav is more block than element and should be unique

* rename headings to group by set rather than level

* pull in raw css

* remove units on 0 length, add missing un-prefixed declarations

* update formatting of css section headings

* put heading back in raw html

not ready for extraction

* update heading directories for better clarity and grouping

* (re-)extract headings

actually complete this time

* rearrange content-templates directories for clarity and grouping like items

contents of files didn't change

* update post template internal labels to match new directory structure

* extract drabble templates

* extract thread trackers into own files

dist/content-templates/general/galleries/gallery-2-double-color.html

@@ -0,0 +1,10 @@
+<rosedev class="gradient"
+    ><devline></devline><devtop>optional heading</devtop>
+    <div class="dev two">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-2-double-dark.html

@@ -0,0 +1,10 @@
+<rosedev class="black"
+    ><devline></devline><devtop>optional heading</devtop>
+    <div class="dev two">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-2-double-light.html

@@ -0,0 +1,10 @@
+<rosedev class="white"
+    ><devline></devline><devtop>optional heading</devtop>
+    <div class="dev two">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-2-single-color.html

@@ -0,0 +1,7 @@
+<rosedev class="gradient"
+    ><devline></devline><devtop>optional heading</devtop>
+    <div class="dev one">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-2-single-dark.html

@@ -0,0 +1,7 @@
+<rosedev class="black"
+    ><devline></devline><devtop>optional heading</devtop>
+    <div class="dev one">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-2-single-light.html

@@ -0,0 +1,7 @@
+<rosedev class="white"
+    ><devline></devline><devtop>optional heading</devtop>
+    <div class="dev one">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-2-triple-color.html

@@ -0,0 +1,13 @@
+<rosedev class="gradient"
+    ><devline></devline><devtop>optional heading</devtop>
+    <div class="dev three">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-2-triple-dark.html

@@ -0,0 +1,13 @@
+<rosedev class="black"
+    ><devline></devline><devtop>optional heading</devtop>
+    <div class="dev three">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-2-triple-light.html

@@ -0,0 +1,13 @@
+<rosedev class="white"
+    ><devline></devline><devtop>optional heading</devtop>
+    <div class="dev three">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-3-double-color.html

@@ -0,0 +1,10 @@
+<rosedev class="gradient"
+    ><devline></devline><devtop><b>heading style two</b></devtop>
+    <div class="dev2 two">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-3-double-dark.html

@@ -0,0 +1,10 @@
+<rosedev class="black"
+    ><devline></devline><devtop><b>heading style two</b></devtop>
+    <div class="dev2 two">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-3-double-light.html

@@ -0,0 +1,10 @@
+<rosedev class="white"
+    ><devline></devline><devtop><b>heading style two</b></devtop>
+    <div class="dev2 two">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-3-single-color.html

@@ -0,0 +1,7 @@
+<rosedev class="gradient"
+    ><devline></devline><devtop><b>heading style two</b></devtop>
+    <div class="dev2 one">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-3-single-dark.html

@@ -0,0 +1,7 @@
+<rosedev class="black"
+    ><devline></devline><devtop><b>heading style two</b></devtop>
+    <div class="dev2 one">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-3-single-light.html

@@ -0,0 +1,7 @@
+<rosedev class="white"
+    ><devline></devline><devtop><b>heading style two</b></devtop>
+    <div class="dev2 one">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-3-triple-color.html

@@ -0,0 +1,13 @@
+<rosedev class="gradient"
+    ><devline></devline><devtop><b>heading style two</b></devtop>
+    <div class="dev2 three">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-3-triple-dark.html

@@ -0,0 +1,13 @@
+<rosedev class="black"
+    ><devline></devline><devtop><b>heading style two</b></devtop>
+    <div class="dev2 three">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/galleries/gallery-3-triple-light.html

@@ -0,0 +1,13 @@
+<rosedev class="white"
+    ><devline></devline><devtop><b>heading style two</b></devtop>
+    <div class="dev2 three">
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        />
+        <img
+            src="https://i.pinimg.com/originals/f3/7c/d3/f37cd30f0e1739c23f29f9fe61387af2.jpg"
+        /></div
+></rosedev>

dist/content-templates/general/headings/headings-a.html

@@ -0,0 +1,3 @@
+<h2 class="block-heading-a-1">heading A-1</h2>
+<h3 class="block-heading-a-2">heading A-2</h3>
+<h4 class="block-heading-a-3">heading A-3</h4>

dist/content-templates/general/headings/headings-b.html

@@ -0,0 +1,3 @@
+<h2 class="block-heading-b-1">heading B-1</h2>
+<h3 class="block-heading-b-2">heading B-2</h3>
+<h4 class="block-heading-b-3">heading B-3</h4>

dist/content-templates/general/headings/headings.html

@@ -0,0 +1,15 @@
+<h2 class="block-heading-c">heading C</h2>
+<div class="utility-bg-dark" style="padding: 1em">
+    <h2 class="block-heading-c" data-bg="dark">
+        heading C variant for dark backgrounds
+    </h2>
+</div>
+<h2 class="block-heading-d">heading D</h2>
+<h2 class="block-heading-e">heading E</h2>
+<h2 class="block-heading-f">heading F</h2>
+<h2 class="block-heading-g">heading G</h2>
+<div class="utility-bg-gradient-1" style="padding: 1em">
+    <h2 class="block-heading-g" data-bg="gradient">
+        heading G variant for gradient backgrounds
+    </h2>
+</div>

dist/content-templates/out-of-character/general/general-1-bw-title.html → dist/content-templates/general/posts/post-1-bw-title.html

@@ -2,7 +2,7 @@
     <div class="title">thread/section title</div>
     <div class="text">
         <p>
-            <b>This is General Template 1, in black and white, with a title.</b>
+            <b>This is Post Template 1, in black and white, with a title.</b>
         </p>
 
         <p>

dist/content-templates/out-of-character/general/general-1-bw.html → dist/content-templates/general/posts/post-1-bw.html

@@ -1,10 +1,7 @@
 <div class="cc-gen">
     <div class="text">
         <p>
-            <b
-                >This is General Template 1, in black and white, without a
-                title.</b
-            >
+            <b>This is Post Template 1, in black and white, without a title.</b>
         </p>
 
         <p>

dist/content-templates/out-of-character/general/general-1-color-title.html → dist/content-templates/general/posts/post-1-color-title.html

@@ -1,7 +1,7 @@
 <div class="cc-gen color">
     <div class="title">thread/section title</div>
     <div class="text">
-        <p><b>This is General Template 1, in color, with a title.</b></p>
+        <p><b>This is Post Template 1, in color, with a title.</b></p>
 
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

dist/content-templates/out-of-character/general/general-1-color.html → dist/content-templates/general/posts/post-1-color.html

@@ -1,6 +1,6 @@
 <div class="cc-gen color">
     <div class="text">
-        <p><b>This is General Template 1, in color, without a title.</b></p>
+        <p><b>This is Post Template 1, in color, without a title.</b></p>
 
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

dist/content-templates/out-of-character/general/general-2-bw.html → dist/content-templates/general/posts/post-2-bw.html

@@ -1,7 +1,7 @@
 <div class="cc-gen2">
     <div class="title">section title</div>
     <div class="text">
-        <p><b>This is General Template 2, in black and white.</b></p>
+        <p><b>This is Post Template 2, in black and white.</b></p>
 
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

dist/content-templates/out-of-character/general/general-2-color.html → dist/content-templates/general/posts/post-2-color.html

@@ -1,7 +1,7 @@
 <div class="cc-gen2 color">
     <div class="title">section title</div>
     <div class="text">
-        <p><b>This is General Template 2, in color.</b></p>
+        <p><b>This is Post Template 2, in color.</b></p>
 
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

dist/content-templates/in-character/post/post-1.html → dist/content-templates/general/posts/post-3.html

@@ -8,6 +8,8 @@
         </svg>
     </div>
     <div class="post-1-post">
+        <p><b>This is Post Template 3.</b></p>
+
         simple post icon can be changed based on membergroup, if desired. this
         is a general post that can become a [post][/post] bbcode really easily
         and be used for everyday, simple replies on requests, games, raffles,

dist/content-templates/in-character/post/post-2.html → dist/content-templates/general/posts/post-4.html

@@ -1,5 +1,7 @@
 <div class="post-2">
     <div class="post-2-post">
+        <p><b>This is Post Template 4.</b></p>
+
         <i>italics here</i> Lorem ipsum dolor sit amet, consectetur adipiscing
         elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         <b>bold here</b> Ut enim ad minim veniam, quis nostrud exercitation

dist/content-templates/in-character/post/post-3.html → dist/content-templates/general/posts/post-5.html

@@ -6,6 +6,8 @@
         />
     </div>
     <div class="post-3-post">
+        <p><b>This is Post Template 5.</b></p>
+
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua.
         <i>italics here</i> Ut enim ad minim veniam, quis nostrud exercitation

dist/content-templates/in-character/post/post-4.html → dist/content-templates/general/posts/post-6.html

@@ -1,6 +1,8 @@
 <div class="post-4">
     <div class="post-4-title">title or lyrics go here</div>
     <div class="post-4-post">
+        <p><b>This is Post Template 6.</b></p>
+
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. <b>bold here</b> Ut
         enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

dist/content-templates/in-character/post/post-5.html → dist/content-templates/general/posts/post-7.html

@@ -1,4 +1,6 @@
 <jaspost>
+    <p><b>This is Post Template 7.</b></p>
+
     this is a simple post template <b>bold looks like this</b>
     <i>italics look like this</i>
 </jaspost>

dist/content-templates/in-character/post/post-6-img.html → dist/content-templates/general/posts/post-8-img.html

@@ -10,7 +10,7 @@
     </div>
 
     <div class="jasthreadbody">
-        <p><b>This is Post Template 6, with an image.</b></p>
+        <p><b>This is Post Template 8, with an image.</b></p>
 
         <p>
             <b>Lorem Ipsum</b> Lorem Ipsum is simply dummy text of the printing

dist/content-templates/in-character/post/post-6.html → dist/content-templates/general/posts/post-8.html

@@ -4,7 +4,7 @@
     </div>
 
     <div class="jasthreadbody">
-        <p><b>This is Post Template 6, without an image.</b></p>
+        <p><b>This is Post Template 8, without an image.</b></p>
 
         <p>
             <b>Lorem Ipsum</b> is simply dummy text of the printing and

dist/content-templates/general/posts/post-9-color.html

@@ -0,0 +1,15 @@
+<rosedev class="gradient"
+    ><devline></devline><devtop>optional heading</devtop>
+    <div class="dev drabble">
+        <p><b>This is Post Template 9, color variant.</b></p>
+
+        lines regular font and <b>this is bold</b> and
+        <i>this is italics</i> and <u>this is underline</u> and
+        <bb>this is a second bold style</bb> and
+        <ii>this is a second italics style</ii> and
+        <uu>this is a second underline style</uu>
+        <bubble>bubble text style </bubble>
+        <lines>lines text style</lines>
+        <quote>quote text style goes here</quote>
+    </div></rosedev
+>

dist/content-templates/general/posts/post-9-dark.html

@@ -0,0 +1,15 @@
+<rosedev class="black"
+    ><devline></devline><devtop>optional heading</devtop>
+    <div class="dev drabble">
+        <p><b>This is Post Template 9, dark variant.</b></p>
+
+        lines regular font and <b>this is bold</b> and
+        <i>this is italics</i> and <u>this is underline</u> and
+        <bb>this is a second bold style</bb> and
+        <ii>this is a second italics style</ii> and
+        <uu>this is a second underline style</uu>
+        <bubble>bubble text style </bubble>
+        <lines>lines text style</lines>
+        <quote>quote text style goes here</quote>
+    </div></rosedev
+>

dist/content-templates/general/posts/post-9-light.html

@@ -0,0 +1,15 @@
+<rosedev class="white"
+    ><devline></devline><devtop>optional heading</devtop>
+    <div class="dev drabble">
+        <p><b>This is Post Template 9, light variant.</b></p>
+
+        lines regular font and <b>this is bold</b> and
+        <i>this is italics</i> and <u>this is underline</u> and
+        <bb>this is a second bold style</bb> and
+        <ii>this is a second italics style</ii> and
+        <uu>this is a second underline style</uu>
+        <bubble>bubble text style </bubble>
+        <lines>lines text style</lines>
+        <quote>quote text style goes here</quote>
+    </div></rosedev
+>

dist/content-templates/general/quotes/quote-2-color.html

@@ -0,0 +1,8 @@
+<rosedev class="gradient"
+    ><devline></devline><devtop>optional heading</devtop>
+    <div class="dev quote">
+        <x>quote style one <b>bold</b> and <i>italics</i> here</x>
+        <br /><y>quote style two <b>bold</b> and <i>italics</i></y>
+        <author>— quote author</author>
+    </div></rosedev
+>