Migrate Abi's Webpages (#71)

* pull in raw html

* extract start, end, and pages to own files. prettierignore start and end

* pull in raw css

* linter fix: remove units from 0 lengths

* add missing wrapper div

which got lost in copy/paste

.prettierignore

@@ -0,0 +1,4 @@
+# guidebook-end closes guidebook-start
+# they won't format correctly because they're intentionally incomplete
+dist/webpages/guidebook-end.html
+dist/webpages/guidebook-start.html

dist/assets/stylesheet.css

@@ -4027,6 +4027,97 @@ rosedev.black .drabble quote {
     color: var(--black-hex);
 }
 
+/*
+-----
+ABI'S WEBPAGES
+-----
+*/
+
+.webpage {
+    display: block;
+    width: 100%;
+    margin: 75px 0;
+}
+
+.webpage .webpagebox {
+    padding: 15px;
+    background: var(--white-hex);
+    box-shadow: 3px 3px 6px rgba(var(--black), 0.1);
+    font: var(--body-font);
+    width: 100%;
+}
+
+.webpage .webpagebox .webpageboxborder {
+    height: 100%;
+    border: var(--black-hex) solid 2px;
+}
+
+.webpagecont {
+    display: grid;
+    grid-template-columns: 275px 2px 1fr;
+}
+
+.webpagesidebar {
+    padding: 25px;
+}
+
+.webpagesidebar .webpagesidebarcont {
+    position: sticky;
+    top: 25px;
+}
+
+.webpagesidebar .webpagesidebarcont a {
+    text-decoration: none;
+    color: inherit;
+    padding-left: 10px;
+    padding-right: 10px;
+    line-height: 2.5;
+    transition: 1s ease;
+    text-transform: uppercase;
+}
+
+.webpagesidebar .webpagesidebarcont a:hover {
+    letter-spacing: 2px;
+    transition: 1s ease;
+}
+
+.webpagesidebar .webpagesidebarcont .sidebarheader {
+    font: 0.9rem/1.8 var(--display);
+    text-transform: uppercase;
+    border-bottom: solid 2px var(--black-hex);
+    width: 275px;
+    margin-left: -25px;
+    padding-left: 25px;
+    padding-right: 7px;
+    margin-bottom: 7px;
+    margin-top: 7px;
+}
+
+.webpageborder {
+    margin-top: -17px;
+    width: 2px;
+    background: var(--black-hex);
+    height: calc(100% + 34px);
+}
+
+.webpagemaincontent {
+    padding: 50px;
+    text-align: justify;
+}
+
+.webpagemaincontent h1 {
+    font: 1.4rem/1.8 var(--display);
+    margin: 0;
+    text-transform: uppercase;
+}
+
+.webpagemaincontent h2 {
+    font: 1.2rem/1.8 var(--display);
+    margin: 0;
+    color: var(--clear);
+    -webkit-text-stroke: 1px var(--black-hex);
+}
+
 /*
 -----
 UTILITIES

dist/webpages/guidebook-end.html

@@ -0,0 +1,5 @@
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

dist/webpages/guidebook-page-1.html

@@ -0,0 +1,69 @@
+<% cp1-start %>
+<h1>Example Page 1</h1>
+
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Vitae suscipit tellus
+    mauris a diam maecenas sed enim ut. Tincidunt id aliquet risus feugiat in
+    ante. Malesuada pellentesque elit eget gravida cum. Nulla porttitor massa id
+    neque. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Lectus
+    nulla at volutpat diam ut venenatis tellus. Id diam maecenas ultricies mi.
+    Eu mi bibendum neque egestas. Neque volutpat ac tincidunt vitae semper.
+</p>
+
+<h2>Example Subheading</h2>
+<p>
+    Adipiscing vitae proin sagittis nisl rhoncus. Ut venenatis tellus in metus
+    vulputate eu. Rutrum tellus pellentesque eu tincidunt. Erat velit
+    scelerisque in dictum non. Id consectetur purus ut faucibus pulvinar
+    elementum integer enim neque. Nullam non nisi est sit amet facilisis magna.
+    Donec enim diam vulputate ut pharetra sit. Libero id faucibus nisl tincidunt
+    eget nullam non. Varius morbi enim nunc faucibus. Dolor sit amet consectetur
+    adipiscing elit duis tristique sollicitudin. A scelerisque purus semper eget
+    duis at tellus at urna. Volutpat est velit egestas dui id ornare arcu odio
+    ut. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing.
+</p>
+
+<p>
+    Purus gravida quis blandit turpis cursus in hac habitasse. Ut tristique et
+    egestas quis. Imperdiet sed euismod nisi porta lorem mollis aliquam.
+    Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien.
+    Feugiat vivamus at augue eget arcu dictum. Gravida quis blandit turpis
+    cursus. Turpis in eu mi bibendum. Mi proin sed libero enim sed faucibus
+    turpis in. Elit ut aliquam purus sit. Non curabitur gravida arcu ac tortor
+    dignissim convallis aenean et. Vitae congue eu consequat ac felis donec et.
+    Felis donec et odio pellentesque diam volutpat commodo. Urna molestie at
+    elementum eu facilisis. Bibendum arcu vitae elementum curabitur vitae nunc
+    sed velit. Egestas integer eget aliquet nibh praesent tristique. Ac turpis
+    egestas maecenas pharetra convallis posuere morbi leo urna. Enim tortor at
+    auctor urna nunc id cursus metus. Ac feugiat sed lectus vestibulum mattis
+    ullamcorper. Tristique risus nec feugiat in fermentum posuere.
+</p>
+
+<p>
+    Leo integer malesuada nunc vel risus. Et magnis dis parturient montes
+    nascetur ridiculus. Nibh tellus molestie nunc non blandit massa enim nec.
+    Mattis aliquam faucibus purus in massa. Mauris pellentesque pulvinar
+    pellentesque habitant morbi tristique. Nisl rhoncus mattis rhoncus urna
+    neque viverra justo nec ultrices. Sit amet facilisis magna etiam tempor
+    orci. Enim facilisis gravida neque convallis a. Neque sodales ut etiam sit
+    amet. Quis imperdiet massa tincidunt nunc pulvinar. Donec pretium vulputate
+    sapien nec sagittis. Fermentum et sollicitudin ac orci phasellus egestas. Id
+    leo in vitae turpis. Lectus nulla at volutpat diam ut. Cras sed felis eget
+    velit aliquet sagittis id. Odio euismod lacinia at quis risus sed vulputate.
+    Nulla aliquet enim tortor at auctor urna nunc id.
+</p>
+
+<p>
+    Morbi quis commodo odio aenean sed. Ipsum consequat nisl vel pretium lectus
+    quam id leo. Fermentum iaculis eu non diam phasellus vestibulum lorem.
+    Bibendum est ultricies integer quis auctor elit sed vulputate. Consequat
+    semper viverra nam libero justo laoreet. Rhoncus mattis rhoncus urna neque
+    viverra justo nec ultrices dui. Feugiat vivamus at augue eget. Etiam tempor
+    orci eu lobortis elementum. Vitae suscipit tellus mauris a diam. Purus in
+    massa tempor nec feugiat nisl pretium fusce id. Tellus mauris a diam
+    maecenas sed. Turpis nunc eget lorem dolor sed viverra ipsum nunc aliquet.
+    Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Ac turpis
+    egestas integer eget aliquet nibh praesent.
+</p>
+<% cp1-end %>

dist/webpages/guidebook-page-2.html

@@ -0,0 +1,13 @@
+<% cp1-start %>
+<h1>Example Page 2</h1>
+
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Vitae suscipit tellus
+    mauris a diam maecenas sed enim ut. Tincidunt id aliquet risus feugiat in
+    ante. Malesuada pellentesque elit eget gravida cum. Nulla porttitor massa id
+    neque. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Lectus
+    nulla at volutpat diam ut venenatis tellus. Id diam maecenas ultricies mi.
+    Eu mi bibendum neque egestas. Neque volutpat ac tincidunt vitae semper.
+</p>
+<% cp1-end %>

dist/webpages/guidebook-start.html

@@ -0,0 +1,18 @@
+<div class="webpage">
+    <div class="webpagebox">
+        <div class="webpageboxborder">
+            <div class="webpagecont">
+                <div class="webpagesidebar">
+                    <div class="webpagesidebarcont">
+                        <div class="sidebarheader">section one</div>
+                        <a href="/index.php?act=Pages&kid=cp1-pg1">Page 1</a><br />
+                        <a href="/index.php?act=Pages&kid=cp1-pg2">Page 2</a>
+                        <div class="sidebarheader">section two</div>
+                        <a href="">placeholder</a><br />
+                        <a href="">placeholder</a><br />
+                        <a href="">placeholder</a><br />
+                        <a href="">placeholder</a>
+                    </div>
+                </div>
+                <div class="webpageborder"></div>
+                <div class="webpagemaincontent">