this one, not the first

src/index.py

@@ -440,6 +440,13 @@ def error502(error):
     return "unfortunately, a 502 error. this was likely due to website maintenance. usually it'll be back up before you finish reading this, but otherwise, I'll notice something's wrong soon! <a href=https://www.blessfrey.me/>return to blessfrey.me.</a>"
 
 
+# About Blessfrey Page
+@route('/about')
+def about():
+    """about"""
+    info = {'css': 'doc', 'title': 'about blessfrey', 'year': find_year()}
+    return template('about.tpl', info)
+
 # Art Gallery Page
 @route('/art')
 def art():
@@ -482,6 +489,9 @@ def demo():
     return template('demo.tpl', info)
 
 # Diary Page
+@route('/')
+def home():
+    return diary(0)
 @route('/diary') # Start on first Diary page if no page given
 def diary2():
     return diary(0)
@@ -525,12 +535,34 @@ def gddbf():
 @route('/gdd')
 def gdd():
     return gddbf()
+# Cast
+@route('/blessfrey-cast')
+def cast():
+    """Cast Page"""
+    return char3()
+# Credits
+@route('/blessfrey-credits')
+def creditsbf():
+    """Credits Page"""
+    return credits()
 # ID
 @route('/blessfrey-ids')
 def id():
     """ID Page"""
     info = {'css': 'doc', 'title': 'blessfrey gdd - IDs + keys', 'year': find_year()}
     return template('bf-id.tpl', info)
+# Jobs
+@route('/blessfrey-jobs')
+def jobs():
+    """Jobs Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - jobs', 'year': find_year()}
+    return template('bf-jobs.tpl', info)
+# Keywords
+@route('/blessfrey-keywords')
+def keywords():
+    """Keywords Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - keywords', 'year': find_year()}
+    return template('bf-keywords.tpl', info)
 # Blessfrey Mechanics
 @route('/blessfrey-mechanics')
 def mech():
@@ -542,46 +574,71 @@ def mech1():
     """inspect"""
     info = {'css': 'doc', 'title': 'blessfrey gdd - game mechanics', 'year': find_year()}
     return template('bf-mech-inspect.tpl', info)
-# Species Page
-@route('/race/') # if no species given
-def spec4():
-    return species("human")
-@route('/race/<species_name:path>')
-def spec3(species_name):
-    return species(species_name)
-@route('/species/') # if no species given
-def spec2():
-    return species("human")
-@route('/species/<species_name:path>')
-def spec(species_name):
-    """species page"""
-    loc = 'species/'
-    info = {'css': 'char', 'title': 'blessfrey - species | meet ' + species_name, 'year': find_year(), 'ocs': ["human","giant","serpent"], 'name': species_name, 'profile': prepare_profile(loc, species_name), 'gallery': find_gallery(species_name)}
-    abs_app_dir_path = os.path.dirname(os.path.realpath(__file__))
-    abs_views_path = os.path.join(abs_app_dir_path, 'views')
-    TEMPLATE_PATH.insert(0, abs_views_path )
-    return template(os.path.join(abs_views_path,'char.tpl'), info)
+# Mercur
+@route('/blessfrey-mercur')
+def mercur():
+    """Mercur Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - Mercur', 'year': find_year()}
+    return template('bf-mercur.tpl', info)
+# Setting
+@route('/blessfrey-setting')
+def setting():
+    """Setting Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - setting', 'year': find_year()}
+    return template('bf-setting.tpl', info)
+# Skills
+@route('/blessfrey-skills')
+def skills():
+    """Skills Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - skills', 'year': find_year()}
+    return template('bf-skills.tpl', info)
+# Story
+@route('/blessfrey-story')
+def story():
+    """Story Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - story', 'year': find_year()}
+    return template('bf-story.tpl', info)
 # Blessfrey Style Guide Page
+@route('/blessfrey-style-guide')
+def style3():
+    return style()
+@route('/blessfrey-style')
+def style2():
+    return style()
+@route('/style-guide')
+def style1():
+    return style()
 @route('/style')
 def style():
     """style guide"""
     info = {'css': 'doc', 'title': 'blessfrey style guide', 'year': find_year()}
     return template('style-guide.tpl', info)
+# Terms
+@route('/blessfrey-terms')
+def terms():
+    """Terms Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - dictionary of terms', 'year': find_year()}
+    return template('bf-terms.tpl', info)
 # Art Direction
-@route('/vibe')
+@route('/blessfrey-vibe')
 def vibe():
     """GDD Page"""
     info = {'css': 'doc', 'title': 'blessfrey gdd - vibe', 'year': find_year()}
     return template('bf-vibe.tpl', info)
-
+# Website
+@route('/website')
+def website():
+    """Website Page"""
+    info = {'css': 'doc', 'title': 'blessfrey gdd - website', 'year': find_year()}
+    return template('website.tpl', info)
 
 # Home Page - Index Template
-@route('/')
-def home():
-    """home"""
-    loc = 'diary/entries/'
-    info = {'css': 'index', 'title': 'blessfrey ~ action rpg by chimchooree', 'year': find_year(), 'news': list_headlines(sort_files(curate_files(gather_files(loc)))[0:10])}
-    return template('index.tpl', info)
+#@route('/')
+#def home():
+    #"""home"""
+#    loc = 'diary/entries/'
+#    info = {'css': 'index', 'title': 'blessfrey ~ action rpg by chimchooree', 'year': find_year(), 'news': list_headlines(sort_files(curate_files(gather_files(loc)))[0:10])}
+#    return template('index.tpl', info)
 
 # Location Page
 @route('/loc/') # if no location given
@@ -598,13 +655,16 @@ def loc(location_name):
     return template(os.path.join(abs_views_path,'char.tpl'), info)
 
 # Me Page
-@route('/me')
+@route('/dev')
 def me():
     """me"""
-    info = {'css': 'me', 'title': 'about me', 'year': find_year()}
+    info = {'css': 'me', 'title': 'about chimchooree (that\'s me)', 'year': find_year()}
     return template('me.tpl', info)
 
 # Blessfrey - Feature Requirements Page
+@route('/blessfrey-milestones')
+def milestones():
+    return milestones()
 @route('/milestones')
 def milestones():
     """feature requirements"""
@@ -625,6 +685,27 @@ def presskit():
     info = {'css': 'doc', 'title': 'blessfrey presskit', 'year': find_year()}
     return template('blessfrey-presskit.tpl', info)
 
+# Species Page
+@route('/race/') # if no species given
+def spec4():
+    return species("human")
+@route('/race/<species_name:path>')
+def spec3(species_name):
+    return species(species_name)
+@route('/species/') # if no species given
+def spec2():
+    return species("human")
+@route('/species/<species_name:path>')
+def spec(species_name):
+    """species page"""
+    loc = 'species/'
+    info = {'css': 'char', 'title': 'blessfrey - species | meet ' + species_name, 'year': find_year(), 'ocs': ["human","giant","serpent"], 'name': species_name, 'profile': prepare_profile(loc, species_name), 'gallery': find_gallery(species_name)}
+    abs_app_dir_path = os.path.dirname(os.path.realpath(__file__))
+    abs_views_path = os.path.join(abs_app_dir_path, 'views')
+    TEMPLATE_PATH.insert(0, abs_views_path )
+    return template(os.path.join(abs_views_path,'char.tpl'), info)
+
+
 # Search Diary by Tag
 @route('/diary/tag/<tagin>') # Start on first Diary tag page if no page given
 def tag2(tagin):
@@ -638,10 +719,6 @@ def tag(tagin, page):
     info = {'css': 'diary', 'title': 'blessfrey developer diary', 'year': find_year(), 'snippets': list_snippets(pull_tag(gather_and_sort(loc), tagin)), 'latest': list_headlines(gather_and_sort(loc)[0:5]), 'tags': fill_word_cloud(curate_files(gather_files(loc))), 'total': len(curate_files(gather_files(loc))), 'limit': 8, 'cluster': 3, 'page': page}
     return template('diary.tpl', info)
 
-# BlessFREY
-# play about diary dev
-# play system character story info date
-
 ## Main ##
 
 if __name__ == '__main__':

src/static/css/all.css

@@ -1,33 +1,43 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 14, 2022 */
 @font-face {
-    font-family: "pf_ronda_seven";
-    src: url('../font/pf_ronda_seven.ttf');
+    font-family: 'mitochondriaregular';
+    src: url('/static/font/mitochondria-webfont.woff2') format('woff2'),
+         url('/static/font/mitochondria-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
 }
 @font-face {
-    font-family: "pf_ronda_seven_bold";
-    src: url('../font/pf_ronda_seven_bold.ttf');
+    font-family: 'pf_ronda_sevenregular';
+    src: url('/static/font/pf_ronda_seven-webfont.woff2') format('woff2'),
+         url('/static/font/pf_ronda_seven-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
 }
 @font-face {
-    font-family: "Mitochondria";
-    src: url('../font/Mitochondria.ttf');
+    font-family: 'pf_ronda_sevenbold';
+    src: url('/static/font/pf_ronda_seven_bold-webfont.woff2') format('woff2'),
+         url('/static/font/pf_ronda_seven_bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
 }
+/* */
+
 * {
     padding:0;
     margin:0;
-    font-family: "pf_ronda_seven", sans-serif;
+    font-family: 'pf_ronda_sevenregular', sans-serif;
     background-color: black;
 }
 html, body {padding:0; margin:0; height:100%;}
 footer{
-    position: absolute; bottom: 0; right: 0;
-    color: #df85a5;
+    position: fixed; bottom: 0; left: 0;
+    color: #C0AAC0;
     background-color: transparent;
-    padding-top: 2em;
-    margin-right: 1em;
-    margin-bottom: 1em;
-    text-align: right;
-    overflow: hidden;
+    width: 100vw;
 }
-
 a, a:link, a:visited, a:hover, a:active, b, p {
     text-decoration: none;
     background-color: transparent; 
@@ -53,6 +63,9 @@ li {
 h1,h2,h3,h4,img,i {
     background-color: transparent;
 }
+h1 {
+    font-family: 'mitochondriaregular', sans-serif;
+}
 
 .mundane {color:#aca79e;}
 .common {color:#5576d1;}
@@ -76,174 +89,55 @@ pre,code {
 }
 
 .grid {
-    height: auto;
+    height: max(100vh,auto);
     width: 100vw;
     display: grid;
     position: relative;
-    grid-template-columns: 20% 60% 20%;
-    grid-template-rows: 2em 9.515625em auto 12.6875em;
+    grid-template-columns: 1fr;
+    grid-template-rows: 3em auto;
     grid-column-gap: 0px;
     grid-row-gap: 0px;
     box-sizing: border-box;
 }
 
-.top-row { 
-    grid-area: 1 / 1 / 2 / 4; 
-}
-.nav-row { 
-    grid-area: 2 / 1 / 3 / 4; 
-}
-.nav-grid { 
-    grid-area: 2 / 2 / 3 / 3;  
-    display: flex;
-    flex-direction: row;
-    display: grid;
-    grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);
-    grid-column-gap: 0px;
-    grid-row-gap: 0px; 
-    justify-items: center;
-    text-align: center;
-    margin: auto;
-}
-    .nav-left { 
+.top {
     grid-area: 1 / 1 / 2 / 2; 
-    } 
-    .nav-right { 
-        grid-area: 1 / 7 / 2 / 8;
-    }
-    .nav-home { 
-        grid-area: 1 / 2 / 2 / 3;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-blessfrey { 
-        grid-area: 1 / 3 / 2 / 4;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-fashion { grid-area: 1 / 4 / 2 / 5;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-art {
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-diary { grid-area: 1 / 5 / 2 / 6;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .nav-about { grid-area: 1 / 6 / 2 / 7;
-        display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
-        grid-column-gap: 0px;
-        grid-row-gap: 0px; 
-        flex-direction: column;
-    }
-    .navlink {
-        font-size: 110%;
+    color: #C0AAC0;
+    text-align: center;
+}
+.top a {
+    color: #C0AAC0;
     font-weight: bold;
-        color: #E6E8EF;
-    }
-    .navlink a:link {
-        color: #E6E8EF;
-    }
-    .navlink a:visited {
-        color: #E6E8EF;
-    }
-    .navlink a:hover {
-        color: #f463ad;
-    }
-    .navlink a:active {
-        color: #f463ad;
-    }
-    .nav-grid img {
-        height: 100%;
-        width: 100%;
-    }
-    .content-grid {
+}
+.top a:hover {
+    color: #A88AA8;
+}
+
+.content-grid { 
+    grid-area: 2 / 1 / 3 / 2; 
     min-height: 60vh;
     min-width: 50vw;
-    }
-
-
-.sidebar {
-    grid-area: 2 / 2 / 2 / 3;
+    padding-bottom: 33%;
+}
+.footer-grid {
     display: grid;
-    grid-template-columns: auto;
-    grid-template-rows: repeat(4, auto);
-    grid-column-gap: 0em;
-    grid-row-gap: 0em; 
-    align-content: start;
-    padding-left: 0em;
+    grid-template-columns: 100vw;
+    grid-template-rows: 76% 24%
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    background-color: transparent;
+    width: 100vw;
+    /*min-width: 636px;*/
 }
-
-.sidebar a:link {
-    font-weight: bold;
-}
-.sidebar a {
-    color: #1D1761;
-}
-.sidebar a:hover {
-    color: #3127A5;
-}
-.sidebar a:visited {
-    color: #1D1761;
-}
-.sidebar a:active {
-    color: #3B2FC6;
-}
-
-
-    .diary-box {
-        background-color: #A88AA8;  
-        text-align: center;
-        border-radius: 1em;
-        margin: 1em;
-        padding: .3em;
-        margin-top: 0em;
-        padding-bottom: 1em;
-    }
-
-    .about-box {
+.nav { 
     grid-area: 1 / 1 / 2 / 2;
-    }
-    .twitter-box {
-        grid-area: 2 / 1 / 3 / 2;
-    }
-    .latest {
-        grid-area: 3 / 1 / 4 / 2;
-    }
-    .latest-text {
-        text-align: left;
-        padding: 0em;
-        background-color: #A88AA8; 
-    }
-    .wordcloud {
-        grid-area: 4 / 1 / 5 / 2;
-    }
-    .disclosure {
-        grid-area: 5 / 1 / 6 / 2;
-    }
-
+    background-color: transparent;
+/*    width: 60vw;*/
+    display: grid;
+    grid-template-columns: 26% 51% 23%;
+    grid-template-rows: auto;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    margin: auto;
+/*    min-width: 636px;*/
+}

src/static/css/demo.css

@@ -1,47 +1,27 @@
 .content-grid {  
-    grid-area: 3 / 1 / 4 / 4; 
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto;
+    grid-template-rows:  repeat(3, auto);
     grid-column-gap: 0px;
     grid-row-gap: 0em;
-            height: 45em;
-}
-    .jump { 
-        grid-area: 1 / 1 / 2 / 2;
-        text-align: center;
-        margin: auto;
-        font-size: 1.5em;
-        
-    }
-        .jump img { width: 5em; }
-
-        .long { 
-            grid-area: grid-area: 2 / 1 / 3 / 2;
-            display: grid;
-            grid-template-columns: 1fr;
-            grid-template-rows: repeat(5, auto);
-            grid-row-gap: 95vh; 
-            height: 45em;
     color: white;
-            overflow: auto;
+}
+
+.edition { 
+    grid-area: 1 / 1 / 2 / 2; 
     }
 
-.demo-game iframe {
+.demo { grid-area: 2 / 1 / 3 / 2; } 
+   
+.demo iframe {
     border: 2px solid #df85a5;
     padding: 10px;
     display: block;
     margin: auto;
 }
-.demo-intro {
-    width: 40%;
-    padding: 10px;
+.guide {
+    grid-area: 3 / 1 / 4 / 2;
+    width: 80%;
+    padding: 2em;
     margin: auto;
 }
-            .demo { grid-area: 1 / 1 / 2 / 2;
-}
-            .system { grid-area: 2 / 1 / 3 / 2;}
-            .story { grid-area: 3 / 1 / 4 / 2;}
-            .characters { grid-area: 4 / 1 / 5 / 2;}
-            .info { grid-area: 5 / 1 / 6 / 2;
-                height: 50em;}

src/static/css/diary.css

@@ -1,5 +1,4 @@
 .content-grid {
-    grid-area: 3 / 1 / 4 / 4; 
     max-width: MAX(50em, 50%);
     display: grid;
     grid-template-columns: 2fr 1fr;
@@ -42,6 +41,10 @@
         padding-top: 0em;
         margin: auto;
     }
+    .diary-dir.bottom {
+        grid-area: 3 / 1 / 4 / 3;
+        margin: auto;
+    }
     .diary-dir-left {
         display: inline-block;
         vertical-align: middle;
@@ -68,6 +71,9 @@
         grid-area: 2 / 1 / 3 / 2;
         margin-right: 2em;
     }
+    .title {
+        color: white;
+    }
 
     .snippet {
         margin-top: 0em;
@@ -164,4 +170,4 @@
         height: 1em;
     }
 
-    .sidebar {grid-area: 2/2/2/3;}
+    .sidebar {grid-area: 2 / 2 / 2 / 3;}

src/static/css/entry.css

@@ -136,9 +136,11 @@ hr {
     color: #080410;
 }
 
-.rec-box { grid-area: 2 / 1 / 3 / 2;
+.rec-box { 
+    grid-area: 2 / 1 / 3 / 2;
     background-color: #A88AA8;
-    padding: 1em;  }
+    padding: 1em;  
+}
 
 .snippet-title {
     background-color: #A88AA8; 

src/static/css/me.css

@@ -1,14 +1,13 @@
 .content-grid { 
-    grid-area: 3 / 1 / 4 / 4;
     display: grid;
     grid-template-columns: 25% 75%;
-    grid-template-rows: 1fr;
+    grid-template-rows: 992px;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
 }
     .content-left {
         grid-area: 1 / 1 / 2 / 2;
-        background-image: url(../img/prom/guildwarsgirl.png);
+        background-image: url(../img/dev/guildwarsgirl.png);
         background-size: contain;
         background-repeat: no-repeat;
         background-position: right;
@@ -16,33 +15,14 @@
     }
     .content-right { 
         grid-area: 1 / 2 / 2 / 3;
+        background-image: url(../img/dev/collage.png);
+        background-size: cover;
+        background-repeat: no-repeat;
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: auto auto auto auto;
         grid-column-gap: 0px;
         grid-row-gap: 0px; 
-        margin-right: 25%;
-    }
-        .intro, .rpg, .fashion, .projects, .ocs {
-            background-color: #C0AAC0;
-            padding: 5%;
-            text-align: justify;
-        }
-        .intro { grid-area: 1 / 1 / 2 / 3;}
-        .rpg { grid-area: 2 / 1 / 3 / 2;}
-        .fashion { grid-area: 2 / 2 / 3 / 3;}
-        .projects { grid-area: 3 / 1 / 4 / 3;}
-        .ocs { grid-area: 4 / 1 / 5 / 3; text-align:left;} 
-            .ocs-nav {
-                display: grid;
-                grid-template-columns: repeat(auto-fit, 150px);
-                background-color: #C0AAC0;
-            }
-            .ocs-btn {
-                background-color: #C0AAC0;
-            }
-            .ocs img {
-                width: 150px;
     }
 
     .content-right h1, h2, ul, li, b, i, p, img, a {

src/static/css/nav.css

@@ -0,0 +1,108 @@
+/*set heart and star to 0px if viewport too small*/
+
+.heart { 
+    grid-area: 1 / 1 / 2 / 2;
+    background-color: transparent;
+    background-image: url(../img/nav/heart.png); 
+    background-repeat: no-repeat;
+    background-position: bottom right;
+    background-size: contain;
+}
+.nav-grid {
+    grid-area: 1 / 2 / 2 / 3;
+    background-color: transparent;
+    background-image: url(../img/nav/field.png);
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    background-size: contain;
+    display: grid;
+    grid-template-columns: auto; /*repeat(4, minmax(5ch,128px))*/
+    grid-template-rows: repeat(4, minmax(0px,auto));
+    /*grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);*/
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    align-items: center;
+    font-size: 2vw;
+    margin-bottom: 0px;
+}
+.star { 
+    grid-area: 1 / 3 / 2 / 4;
+    background-color: transparent;
+    background-image: url(../img/nav/star.png); 
+    background-repeat: no-repeat;
+    background-position: bottom left;
+    background-size: contain;
+} 
+
+.nav-diary { 
+    grid-area: 1 / 1 / 2 / 2;
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: 80% 20%;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    flex-direction: column;
+    /*min-width: 48px;*/
+}
+.nav-play { 
+    grid-area:  1 / 2 / 2 / 3;
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: 80% 20%;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    flex-direction: column;
+    /*min-width: 48px;*/
+}
+.nav-about {
+    grid-area: 1 / 3 / 2 / 4;
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: 80% 20%;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    flex-direction: column;
+    /*min-width: 48px;*/
+}
+.nav-dev {
+    grid-area: 1 / 4 / 2 / 5;
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: 80% 20%;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    flex-direction: column;
+    /*min-width: 48px;*/
+}
+.navlink {
+    font-size: 110%;
+    font-weight: bold;
+    color: #C0AAC0;
+    text-align: center;
+}
+.navlink a:link {
+}
+.navlink a:visited {
+}
+.navlink a:hover {
+    color: #f463ad;
+}
+.navlink a:active {
+    color: #C0AAC0;
+}
+.nav-grid img {
+    height: auto;
+    max-width:100%;
+    max-height:100%;
+}
+.links { 
+    grid-area: 2 / 1 / 3 / 2;
+    background-color: black; 
+    width: 100vw;
+    text-align: center;
+    padding-top: 0.5em;
+    padding-bottom: 1em;
+}
+.links a {
+    color: #C0AAC0;
+} 

src/static/css/sidebar.css

@@ -0,0 +1,59 @@
+.sidebar {
+    grid-area: 2 / 2 / 2 / 3;
+    display: row;
+/*    grid-template-columns: auto;
+    grid-template-rows: repeat(4, auto);*/
+    grid-column-gap: 0em;
+    grid-row-gap: 0em; 
+/*    align-content: start;
+    padding-left: 0em;*/
+}
+
+.sidebar a:link {
+    font-weight: bold;
+}
+.sidebar a {
+    color: #1D1761;
+}
+.sidebar a:hover {
+    color: #3127A5;
+}
+.sidebar a:visited {
+    color: #1D1761;
+}
+.sidebar a:active {
+    color: #3B2FC6;
+}
+
+
+    .diary-box {
+        background-color: #A88AA8;  
+        text-align: center;
+        border-radius: 1em;
+        margin: 1em;
+        padding: .3em;
+        margin-top: 0em;
+        padding-bottom: 1em;
+    }
+
+    .about-box {
+        grid-area: 1 / 1 / 2 / 2;
+    }
+    .twitter-box {
+        grid-area: 2 / 1 / 3 / 2;
+    }
+    .latest {
+        grid-area: 3 / 1 / 4 / 2;
+    }
+    .latest-text {
+        text-align: left;
+        padding: 0em;
+        background-color: #A88AA8; 
+    }
+    .wordcloud {
+        grid-area: 4 / 1 / 5 / 2;
+    }
+    .disclosure {
+        grid-area: 5 / 1 / 6 / 2;
+    }
+

src/static/font/generator_config.txt

@@ -0,0 +1,5 @@
+# Font Squirrel Font-face Generator Configuration File
+# Upload this file to the generator to recreate the settings
+# you used to create these fonts.
+
+{"mode":"optimal","formats":["woff","woff2"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}

src/static/font/mitochondria-demo.html

@@ -0,0 +1,586 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+    <script type="text/javascript">
+		(function($) {
+			$.fn.easyTabs = function(option) {
+				var param = jQuery.extend({ fadeSpeed: 'fast', defaultContent: 1, activeClass: 'active' }, option);
+				$(this).each(function() {
+					var thisId = '#' + this.id;
+					if ( param.defaultContent == '' )
+					{
+						param.defaultContent = 1;
+					}
+					if ( typeof param.defaultContent == 'number' )
+					{
+						var defaultTab = $(thisId + ' .tabs li:eq(' + (param.defaultContent - 1) + ') a').attr('href').substr(1);
+					}
+					else
+					{
+						var defaultTab = param.defaultContent;
+					}
+					$(thisId + ' .tabs li a').each(function() {
+						var tabToHide = $(this).attr('href').substr(1);
+						$('#' + tabToHide).addClass('easytabs-tab-content');
+					});
+					hideAll();
+					changeContent(defaultTab);
+
+					function hideAll() {$(thisId + ' .easytabs-tab-content').hide();}
+
+					function changeContent(tabId)
+					{
+						hideAll();
+						$(thisId + ' .tabs li').removeClass(param.activeClass);
+						$(thisId + ' .tabs li a[href=#' + tabId + ']').closest('li').addClass(param.activeClass);
+						if ( param.fadeSpeed != 'none' )
+						{
+							$(thisId + ' #' + tabId).fadeIn(param.fadeSpeed);
+						}
+						else
+						{
+							$(thisId + ' #' + tabId).show();
+						}
+					}
+
+					$(thisId + ' .tabs li').click(function() {
+						var tabId = $(this).find('a').attr('href').substr(1);
+						changeContent(tabId);
+						return false;
+					});
+				});
+			}
+		})(jQuery);
+    </script>
+    <link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8"/>
+    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8"/>
+
+    <style type="text/css">
+        		body {
+			font-family: 'mitochondriaregular';
+        		}
+
+            </style>
+
+    <title>Mitochondria Regular Specimen</title>
+
+
+    <script type="text/javascript" charset="utf-8">
+		$(document).ready(function() {
+			$('#container').easyTabs({ defaultContent: 1 });
+		});
+    </script>
+</head>
+
+<body>
+<div id="container">
+    <div id="header">
+		Mitochondria Regular    </div>
+    <ul class="tabs">
+        <li><a href="#specimen">Specimen</a></li>
+        <li><a href="#layout">Sample Layout</a></li>
+		        <li><a href="#glyphs">Glyphs &amp; Languages</a></li>
+        <li><a href="#installing">Installing Webfonts</a></li>
+
+    </ul>
+
+    <div id="main_content">
+
+
+        <div id="specimen">
+
+            <div class="section">
+                <div class="grid12 firstcol">
+                    <div class="huge">AaBb</div>
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="glyph_range">A&#x200B;B&#x200b;C&#x200b;D&#x200b;E&#x200b;F&#x200b;G&#x200b;H&#x200b;I&#x200b;J&#x200b;K&#x200b;L&#x200b;M&#x200b;N&#x200b;O&#x200b;P&#x200b;Q&#x200b;R&#x200b;S&#x200b;T&#x200b;U&#x200b;V&#x200b;W&#x200b;X&#x200b;Y&#x200b;Z&#x200b;a&#x200b;b&#x200b;c&#x200b;d&#x200b;e&#x200b;f&#x200b;g&#x200b;h&#x200b;i&#x200b;j&#x200b;k&#x200b;l&#x200b;m&#x200b;n&#x200b;o&#x200b;p&#x200b;q&#x200b;r&#x200b;s&#x200b;t&#x200b;u&#x200b;v&#x200b;w&#x200b;x&#x200b;y&#x200b;z&#x200b;1&#x200b;2&#x200b;3&#x200b;4&#x200b;5&#x200b;6&#x200b;7&#x200b;8&#x200b;9&#x200b;0&#x200b;&amp;&#x200b;.&#x200b;,&#x200b;?&#x200b;!&#x200b;&#64;&#x200b;(&#x200b;)&#x200b;#&#x200b;$&#x200b;%&#x200b;*&#x200b;+&#x200b;-&#x200b;=&#x200b;:&#x200b;;</div>
+            </div>
+            <div class="section">
+                <div class="grid12 firstcol">
+                    <table class="sample_table">
+                        <tr>
+                            <td>10</td>
+                            <td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>11</td>
+                            <td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>12</td>
+                            <td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>13</td>
+                            <td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>14</td>
+                            <td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>16</td>
+                            <td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>18</td>
+                            <td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>20</td>
+                            <td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>24</td>
+                            <td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>30</td>
+                            <td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>36</td>
+                            <td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>48</td>
+                            <td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>60</td>
+                            <td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>72</td>
+                            <td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>90</td>
+                            <td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                    </table>
+
+                </div>
+
+            </div>
+
+
+            <div class="section" id="bodycomparison">
+
+
+                <div id="xheight">
+                    <div class="fontbody">&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;body</div>
+                    <div class="arialbody">body</div>
+                    <div class="verdanabody">body</div>
+                    <div class="georgiabody">body</div>
+                </div>
+                <div class="fontbody" style="z-index:1">
+                    body<span>Mitochondria Regular</span>
+                </div>
+                <div class="arialbody" style="z-index:1">
+                    body<span>Arial</span>
+                </div>
+                <div class="verdanabody" style="z-index:1">
+                    body<span>Verdana</span>
+                </div>
+                <div class="georgiabody" style="z-index:1">
+                    body<span>Georgia</span>
+                </div>
+
+
+            </div>
+
+
+            <div class="section psample psample_row1" id="">
+
+                <div class="grid2 firstcol">
+                    <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="white_blend"></div>
+
+            </div>
+            <div class="section psample psample_row2" id="">
+                <div class="grid3 firstcol">
+                    <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid5">
+                    <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+
+                <div class="white_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row3" id="">
+                <div class="grid5 firstcol">
+                    <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="grid7">
+                    <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+
+                <div class="white_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row4" id="">
+                <div class="grid12 firstcol">
+                    <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="white_blend"></div>
+
+            </div>
+
+
+            <div class="section psample psample_row1 fullreverse">
+                <div class="grid2 firstcol">
+                    <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row2 fullreverse">
+                <div class="grid3 firstcol">
+                    <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid5">
+                    <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample fullreverse psample_row3" id="">
+                <div class="grid5 firstcol">
+                    <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="grid7">
+                    <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+                <div class="grid12 firstcol">
+                    <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+
+        </div>
+
+        <div id="layout">
+
+            <div class="section">
+
+                <div class="grid12 firstcol">
+                    <h1>Lorem Ipsum Dolor</h1>
+                    <h2>Etiam porta sem malesuada magna mollis euismod</h2>
+
+                    <p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+                </div>
+            </div>
+            <div class="section">
+                <div class="grid8 firstcol">
+                    <p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+                    <h3>Pellentesque ornare sem</h3>
+
+                    <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+                    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+                    <p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+                    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+                    <h3>Cras mattis consectetur</h3>
+
+                    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+                    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+                </div>
+
+                <div class="grid4 sidebar">
+
+                    <div class="box reverse">
+                        <p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+                    </div>
+
+                    <p class="caption">Maecenas sed diam eget risus varius.</p>
+
+                    <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+                </div>
+            </div>
+
+        </div>
+
+
+		
+
+        <div id="glyphs">
+            <div class="section">
+                <div class="grid12 firstcol">
+
+                    <h1>Language Support</h1>
+                    <p>The subset of Mitochondria Regular in this kit supports the following languages:<br/>
+
+						English, Arrernte, Bislama, Cebuano, Fijian, Gilbertese, Hmong, Ibanag, Iloko_ilokano, Interglossa_glosa, Interlingua, Lojban, Norfolk_pitcairnese, Oromo, Rotokas, Seychelles_creole, Shona, Somali, Southern_ndebele, Swahili, Swati_swazi, Tok_pisin, Warlpiri, Xhosa, Zulu, Latinbasic, Demo                    </p>
+                    <h1>Glyph Chart</h1>
+                    <p>The subset of Mitochondria Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+                    <div id="glyph_chart">
+
+																				                                <div><p>&amp;#32;</p>&#32;</div>
+																				                                <div><p>&amp;#33;</p>&#33;</div>
+																				                                <div><p>&amp;#34;</p>&#34;</div>
+																				                                <div><p>&amp;#35;</p>&#35;</div>
+																				                                <div><p>&amp;#36;</p>&#36;</div>
+																				                                <div><p>&amp;#37;</p>&#37;</div>
+																				                                <div><p>&amp;#38;</p>&#38;</div>
+																				                                <div><p>&amp;#39;</p>&#39;</div>
+																				                                <div><p>&amp;#40;</p>&#40;</div>
+																				                                <div><p>&amp;#41;</p>&#41;</div>
+																				                                <div><p>&amp;#42;</p>&#42;</div>
+																				                                <div><p>&amp;#43;</p>&#43;</div>
+																				                                <div><p>&amp;#44;</p>&#44;</div>
+																				                                <div><p>&amp;#45;</p>&#45;</div>
+																				                                <div><p>&amp;#46;</p>&#46;</div>
+																				                                <div><p>&amp;#47;</p>&#47;</div>
+																				                                <div><p>&amp;#48;</p>&#48;</div>
+																				                                <div><p>&amp;#49;</p>&#49;</div>
+																				                                <div><p>&amp;#50;</p>&#50;</div>
+																				                                <div><p>&amp;#51;</p>&#51;</div>
+																				                                <div><p>&amp;#52;</p>&#52;</div>
+																				                                <div><p>&amp;#53;</p>&#53;</div>
+																				                                <div><p>&amp;#54;</p>&#54;</div>
+																				                                <div><p>&amp;#55;</p>&#55;</div>
+																				                                <div><p>&amp;#56;</p>&#56;</div>
+																				                                <div><p>&amp;#57;</p>&#57;</div>
+																				                                <div><p>&amp;#58;</p>&#58;</div>
+																				                                <div><p>&amp;#59;</p>&#59;</div>
+																				                                <div><p>&amp;#60;</p>&#60;</div>
+																				                                <div><p>&amp;#61;</p>&#61;</div>
+																				                                <div><p>&amp;#62;</p>&#62;</div>
+																				                                <div><p>&amp;#63;</p>&#63;</div>
+																				                                <div><p>&amp;#64;</p>&#64;</div>
+																				                                <div><p>&amp;#65;</p>&#65;</div>
+																				                                <div><p>&amp;#66;</p>&#66;</div>
+																				                                <div><p>&amp;#67;</p>&#67;</div>
+																				                                <div><p>&amp;#68;</p>&#68;</div>
+																				                                <div><p>&amp;#69;</p>&#69;</div>
+																				                                <div><p>&amp;#70;</p>&#70;</div>
+																				                                <div><p>&amp;#71;</p>&#71;</div>
+																				                                <div><p>&amp;#72;</p>&#72;</div>
+																				                                <div><p>&amp;#73;</p>&#73;</div>
+																				                                <div><p>&amp;#74;</p>&#74;</div>
+																				                                <div><p>&amp;#75;</p>&#75;</div>
+																				                                <div><p>&amp;#76;</p>&#76;</div>
+																				                                <div><p>&amp;#77;</p>&#77;</div>
+																				                                <div><p>&amp;#78;</p>&#78;</div>
+																				                                <div><p>&amp;#79;</p>&#79;</div>
+																				                                <div><p>&amp;#80;</p>&#80;</div>
+																				                                <div><p>&amp;#81;</p>&#81;</div>
+																				                                <div><p>&amp;#82;</p>&#82;</div>
+																				                                <div><p>&amp;#83;</p>&#83;</div>
+																				                                <div><p>&amp;#84;</p>&#84;</div>
+																				                                <div><p>&amp;#85;</p>&#85;</div>
+																				                                <div><p>&amp;#86;</p>&#86;</div>
+																				                                <div><p>&amp;#87;</p>&#87;</div>
+																				                                <div><p>&amp;#88;</p>&#88;</div>
+																				                                <div><p>&amp;#89;</p>&#89;</div>
+																				                                <div><p>&amp;#90;</p>&#90;</div>
+																				                                <div><p>&amp;#91;</p>&#91;</div>
+																				                                <div><p>&amp;#92;</p>&#92;</div>
+																				                                <div><p>&amp;#93;</p>&#93;</div>
+																				                                <div><p>&amp;#94;</p>&#94;</div>
+																				                                <div><p>&amp;#95;</p>&#95;</div>
+																				                                <div><p>&amp;#97;</p>&#97;</div>
+																				                                <div><p>&amp;#98;</p>&#98;</div>
+																				                                <div><p>&amp;#99;</p>&#99;</div>
+																				                                <div><p>&amp;#100;</p>&#100;</div>
+																				                                <div><p>&amp;#101;</p>&#101;</div>
+																				                                <div><p>&amp;#102;</p>&#102;</div>
+																				                                <div><p>&amp;#103;</p>&#103;</div>
+																				                                <div><p>&amp;#104;</p>&#104;</div>
+																				                                <div><p>&amp;#105;</p>&#105;</div>
+																				                                <div><p>&amp;#106;</p>&#106;</div>
+																				                                <div><p>&amp;#107;</p>&#107;</div>
+																				                                <div><p>&amp;#108;</p>&#108;</div>
+																				                                <div><p>&amp;#109;</p>&#109;</div>
+																				                                <div><p>&amp;#110;</p>&#110;</div>
+																				                                <div><p>&amp;#111;</p>&#111;</div>
+																				                                <div><p>&amp;#112;</p>&#112;</div>
+																				                                <div><p>&amp;#113;</p>&#113;</div>
+																				                                <div><p>&amp;#114;</p>&#114;</div>
+																				                                <div><p>&amp;#115;</p>&#115;</div>
+																				                                <div><p>&amp;#116;</p>&#116;</div>
+																				                                <div><p>&amp;#117;</p>&#117;</div>
+																				                                <div><p>&amp;#118;</p>&#118;</div>
+																				                                <div><p>&amp;#119;</p>&#119;</div>
+																				                                <div><p>&amp;#120;</p>&#120;</div>
+																				                                <div><p>&amp;#121;</p>&#121;</div>
+																				                                <div><p>&amp;#122;</p>&#122;</div>
+																				                                <div><p>&amp;#126;</p>&#126;</div>
+																				                                <div><p>&amp;#160;</p>&#160;</div>
+																				                                <div><p>&amp;#173;</p>&#173;</div>
+																				                                <div><p>&amp;#8192;</p>&#8192;</div>
+																				                                <div><p>&amp;#8193;</p>&#8193;</div>
+																				                                <div><p>&amp;#8194;</p>&#8194;</div>
+																				                                <div><p>&amp;#8195;</p>&#8195;</div>
+																				                                <div><p>&amp;#8196;</p>&#8196;</div>
+																				                                <div><p>&amp;#8197;</p>&#8197;</div>
+																				                                <div><p>&amp;#8198;</p>&#8198;</div>
+																				                                <div><p>&amp;#8199;</p>&#8199;</div>
+																				                                <div><p>&amp;#8200;</p>&#8200;</div>
+																				                                <div><p>&amp;#8201;</p>&#8201;</div>
+																				                                <div><p>&amp;#8202;</p>&#8202;</div>
+																				                                <div><p>&amp;#8208;</p>&#8208;</div>
+																				                                <div><p>&amp;#8209;</p>&#8209;</div>
+																				                                <div><p>&amp;#8210;</p>&#8210;</div>
+																				                                <div><p>&amp;#8211;</p>&#8211;</div>
+																				                                <div><p>&amp;#8212;</p>&#8212;</div>
+																				                                <div><p>&amp;#8239;</p>&#8239;</div>
+																				                                <div><p>&amp;#8287;</p>&#8287;</div>
+																				                                <div><p>&amp;#9724;</p>&#9724;</div>
+																																																										                    </div>
+                </div>
+
+
+            </div>
+        </div>
+
+
+        <div id="specs">
+
+        </div>
+
+        <div id="installing">
+            <div class="section">
+                <div class="grid7 firstcol">
+                    <h1>Installing Webfonts</h1>
+
+                    <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+                    <h2>1. Upload your webfonts</h2>
+                    <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+                    <h2>2. Include the webfont stylesheet</h2>
+                    <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+                    <code>
+                        @font-face{
+                        font-family: 'MyWebFont';
+                        src: url('WebFont.eot');
+                        src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+                        url('WebFont.woff') format('woff'),
+                        url('WebFont.ttf') format('truetype'),
+                        url('WebFont.svg#webfont') format('svg');
+                        }
+                    </code>
+
+                    <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+                    <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+                    <h2>3. Modify your own stylesheet</h2>
+                    <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+                    <code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+                    <h2>4. Test</h2>
+                    <p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+                </div>
+
+                <div class="grid5 sidebar">
+                    <div class="box">
+                        <h2>Troubleshooting<br/>Font-Face Problems</h2>
+                        <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+                        <h3>Fonts not showing in any browser</h3>
+
+                        <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+                        <h3>Fonts not loading in iPhone or iPad</h3>
+
+                        <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+                        <h3>Fonts not loading in Firefox</h3>
+
+                        <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+                        <h3>Fonts not loading in IE</h3>
+
+                        <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+                        <h3>Fonts not loading in IE9</h3>
+
+                        <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+    <div id="footer">
+        <p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+    </div>
+</div>
+</body>
+</html>

src/static/font/pf_ronda_seven-demo.html

@@ -0,0 +1,703 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+    <script type="text/javascript">
+		(function($) {
+			$.fn.easyTabs = function(option) {
+				var param = jQuery.extend({ fadeSpeed: 'fast', defaultContent: 1, activeClass: 'active' }, option);
+				$(this).each(function() {
+					var thisId = '#' + this.id;
+					if ( param.defaultContent == '' )
+					{
+						param.defaultContent = 1;
+					}
+					if ( typeof param.defaultContent == 'number' )
+					{
+						var defaultTab = $(thisId + ' .tabs li:eq(' + (param.defaultContent - 1) + ') a').attr('href').substr(1);
+					}
+					else
+					{
+						var defaultTab = param.defaultContent;
+					}
+					$(thisId + ' .tabs li a').each(function() {
+						var tabToHide = $(this).attr('href').substr(1);
+						$('#' + tabToHide).addClass('easytabs-tab-content');
+					});
+					hideAll();
+					changeContent(defaultTab);
+
+					function hideAll() {$(thisId + ' .easytabs-tab-content').hide();}
+
+					function changeContent(tabId)
+					{
+						hideAll();
+						$(thisId + ' .tabs li').removeClass(param.activeClass);
+						$(thisId + ' .tabs li a[href=#' + tabId + ']').closest('li').addClass(param.activeClass);
+						if ( param.fadeSpeed != 'none' )
+						{
+							$(thisId + ' #' + tabId).fadeIn(param.fadeSpeed);
+						}
+						else
+						{
+							$(thisId + ' #' + tabId).show();
+						}
+					}
+
+					$(thisId + ' .tabs li').click(function() {
+						var tabId = $(this).find('a').attr('href').substr(1);
+						changeContent(tabId);
+						return false;
+					});
+				});
+			}
+		})(jQuery);
+    </script>
+    <link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8"/>
+    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8"/>
+
+    <style type="text/css">
+        		body {
+			font-family: 'pf_ronda_sevenregular';
+        		}
+
+            </style>
+
+    <title>PF Ronda Seven Regular Specimen</title>
+
+
+    <script type="text/javascript" charset="utf-8">
+		$(document).ready(function() {
+			$('#container').easyTabs({ defaultContent: 1 });
+		});
+    </script>
+</head>
+
+<body>
+<div id="container">
+    <div id="header">
+		PF Ronda Seven Regular    </div>
+    <ul class="tabs">
+        <li><a href="#specimen">Specimen</a></li>
+        <li><a href="#layout">Sample Layout</a></li>
+		        <li><a href="#glyphs">Glyphs &amp; Languages</a></li>
+        <li><a href="#installing">Installing Webfonts</a></li>
+
+    </ul>
+
+    <div id="main_content">
+
+
+        <div id="specimen">
+
+            <div class="section">
+                <div class="grid12 firstcol">
+                    <div class="huge">AaBb</div>
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="glyph_range">A&#x200B;B&#x200b;C&#x200b;D&#x200b;E&#x200b;F&#x200b;G&#x200b;H&#x200b;I&#x200b;J&#x200b;K&#x200b;L&#x200b;M&#x200b;N&#x200b;O&#x200b;P&#x200b;Q&#x200b;R&#x200b;S&#x200b;T&#x200b;U&#x200b;V&#x200b;W&#x200b;X&#x200b;Y&#x200b;Z&#x200b;a&#x200b;b&#x200b;c&#x200b;d&#x200b;e&#x200b;f&#x200b;g&#x200b;h&#x200b;i&#x200b;j&#x200b;k&#x200b;l&#x200b;m&#x200b;n&#x200b;o&#x200b;p&#x200b;q&#x200b;r&#x200b;s&#x200b;t&#x200b;u&#x200b;v&#x200b;w&#x200b;x&#x200b;y&#x200b;z&#x200b;1&#x200b;2&#x200b;3&#x200b;4&#x200b;5&#x200b;6&#x200b;7&#x200b;8&#x200b;9&#x200b;0&#x200b;&amp;&#x200b;.&#x200b;,&#x200b;?&#x200b;!&#x200b;&#64;&#x200b;(&#x200b;)&#x200b;#&#x200b;$&#x200b;%&#x200b;*&#x200b;+&#x200b;-&#x200b;=&#x200b;:&#x200b;;</div>
+            </div>
+            <div class="section">
+                <div class="grid12 firstcol">
+                    <table class="sample_table">
+                        <tr>
+                            <td>10</td>
+                            <td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>11</td>
+                            <td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>12</td>
+                            <td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>13</td>
+                            <td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>14</td>
+                            <td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>16</td>
+                            <td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>18</td>
+                            <td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>20</td>
+                            <td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>24</td>
+                            <td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>30</td>
+                            <td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>36</td>
+                            <td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>48</td>
+                            <td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>60</td>
+                            <td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>72</td>
+                            <td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>90</td>
+                            <td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                    </table>
+
+                </div>
+
+            </div>
+
+
+            <div class="section" id="bodycomparison">
+
+
+                <div id="xheight">
+                    <div class="fontbody">&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;body</div>
+                    <div class="arialbody">body</div>
+                    <div class="verdanabody">body</div>
+                    <div class="georgiabody">body</div>
+                </div>
+                <div class="fontbody" style="z-index:1">
+                    body<span>PF Ronda Seven Regular</span>
+                </div>
+                <div class="arialbody" style="z-index:1">
+                    body<span>Arial</span>
+                </div>
+                <div class="verdanabody" style="z-index:1">
+                    body<span>Verdana</span>
+                </div>
+                <div class="georgiabody" style="z-index:1">
+                    body<span>Georgia</span>
+                </div>
+
+
+            </div>
+
+
+            <div class="section psample psample_row1" id="">
+
+                <div class="grid2 firstcol">
+                    <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="white_blend"></div>
+
+            </div>
+            <div class="section psample psample_row2" id="">
+                <div class="grid3 firstcol">
+                    <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid5">
+                    <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+
+                <div class="white_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row3" id="">
+                <div class="grid5 firstcol">
+                    <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="grid7">
+                    <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+
+                <div class="white_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row4" id="">
+                <div class="grid12 firstcol">
+                    <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="white_blend"></div>
+
+            </div>
+
+
+            <div class="section psample psample_row1 fullreverse">
+                <div class="grid2 firstcol">
+                    <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row2 fullreverse">
+                <div class="grid3 firstcol">
+                    <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid5">
+                    <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample fullreverse psample_row3" id="">
+                <div class="grid5 firstcol">
+                    <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="grid7">
+                    <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+                <div class="grid12 firstcol">
+                    <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+
+        </div>
+
+        <div id="layout">
+
+            <div class="section">
+
+                <div class="grid12 firstcol">
+                    <h1>Lorem Ipsum Dolor</h1>
+                    <h2>Etiam porta sem malesuada magna mollis euismod</h2>
+
+                    <p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+                </div>
+            </div>
+            <div class="section">
+                <div class="grid8 firstcol">
+                    <p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+                    <h3>Pellentesque ornare sem</h3>
+
+                    <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+                    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+                    <p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+                    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+                    <h3>Cras mattis consectetur</h3>
+
+                    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+                    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+                </div>
+
+                <div class="grid4 sidebar">
+
+                    <div class="box reverse">
+                        <p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+                    </div>
+
+                    <p class="caption">Maecenas sed diam eget risus varius.</p>
+
+                    <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+                </div>
+            </div>
+
+        </div>
+
+
+		
+
+        <div id="glyphs">
+            <div class="section">
+                <div class="grid12 firstcol">
+
+                    <h1>Language Support</h1>
+                    <p>The subset of PF Ronda Seven Regular in this kit supports the following languages:<br/>
+
+						Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo                    </p>
+                    <h1>Glyph Chart</h1>
+                    <p>The subset of PF Ronda Seven Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+                    <div id="glyph_chart">
+
+																				                                <div><p>&amp;#32;</p>&#32;</div>
+																				                                <div><p>&amp;#33;</p>&#33;</div>
+																				                                <div><p>&amp;#34;</p>&#34;</div>
+																				                                <div><p>&amp;#35;</p>&#35;</div>
+																				                                <div><p>&amp;#36;</p>&#36;</div>
+																				                                <div><p>&amp;#37;</p>&#37;</div>
+																				                                <div><p>&amp;#38;</p>&#38;</div>
+																				                                <div><p>&amp;#39;</p>&#39;</div>
+																				                                <div><p>&amp;#40;</p>&#40;</div>
+																				                                <div><p>&amp;#41;</p>&#41;</div>
+																				                                <div><p>&amp;#42;</p>&#42;</div>
+																				                                <div><p>&amp;#43;</p>&#43;</div>
+																				                                <div><p>&amp;#44;</p>&#44;</div>
+																				                                <div><p>&amp;#45;</p>&#45;</div>
+																				                                <div><p>&amp;#46;</p>&#46;</div>
+																				                                <div><p>&amp;#47;</p>&#47;</div>
+																				                                <div><p>&amp;#48;</p>&#48;</div>
+																				                                <div><p>&amp;#49;</p>&#49;</div>
+																				                                <div><p>&amp;#50;</p>&#50;</div>
+																				                                <div><p>&amp;#51;</p>&#51;</div>
+																				                                <div><p>&amp;#52;</p>&#52;</div>
+																				                                <div><p>&amp;#53;</p>&#53;</div>
+																				                                <div><p>&amp;#54;</p>&#54;</div>
+																				                                <div><p>&amp;#55;</p>&#55;</div>
+																				                                <div><p>&amp;#56;</p>&#56;</div>
+																				                                <div><p>&amp;#57;</p>&#57;</div>
+																				                                <div><p>&amp;#58;</p>&#58;</div>
+																				                                <div><p>&amp;#59;</p>&#59;</div>
+																				                                <div><p>&amp;#60;</p>&#60;</div>
+																				                                <div><p>&amp;#61;</p>&#61;</div>
+																				                                <div><p>&amp;#62;</p>&#62;</div>
+																				                                <div><p>&amp;#63;</p>&#63;</div>
+																				                                <div><p>&amp;#64;</p>&#64;</div>
+																				                                <div><p>&amp;#65;</p>&#65;</div>
+																				                                <div><p>&amp;#66;</p>&#66;</div>
+																				                                <div><p>&amp;#67;</p>&#67;</div>
+																				                                <div><p>&amp;#68;</p>&#68;</div>
+																				                                <div><p>&amp;#69;</p>&#69;</div>
+																				                                <div><p>&amp;#70;</p>&#70;</div>
+																				                                <div><p>&amp;#71;</p>&#71;</div>
+																				                                <div><p>&amp;#72;</p>&#72;</div>
+																				                                <div><p>&amp;#73;</p>&#73;</div>
+																				                                <div><p>&amp;#74;</p>&#74;</div>
+																				                                <div><p>&amp;#75;</p>&#75;</div>
+																				                                <div><p>&amp;#76;</p>&#76;</div>
+																				                                <div><p>&amp;#77;</p>&#77;</div>
+																				                                <div><p>&amp;#78;</p>&#78;</div>
+																				                                <div><p>&amp;#79;</p>&#79;</div>
+																				                                <div><p>&amp;#80;</p>&#80;</div>
+																				                                <div><p>&amp;#81;</p>&#81;</div>
+																				                                <div><p>&amp;#82;</p>&#82;</div>
+																				                                <div><p>&amp;#83;</p>&#83;</div>
+																				                                <div><p>&amp;#84;</p>&#84;</div>
+																				                                <div><p>&amp;#85;</p>&#85;</div>
+																				                                <div><p>&amp;#86;</p>&#86;</div>
+																				                                <div><p>&amp;#87;</p>&#87;</div>
+																				                                <div><p>&amp;#88;</p>&#88;</div>
+																				                                <div><p>&amp;#89;</p>&#89;</div>
+																				                                <div><p>&amp;#90;</p>&#90;</div>
+																				                                <div><p>&amp;#91;</p>&#91;</div>
+																				                                <div><p>&amp;#92;</p>&#92;</div>
+																				                                <div><p>&amp;#93;</p>&#93;</div>
+																				                                <div><p>&amp;#94;</p>&#94;</div>
+																				                                <div><p>&amp;#95;</p>&#95;</div>
+																				                                <div><p>&amp;#96;</p>&#96;</div>
+																				                                <div><p>&amp;#97;</p>&#97;</div>
+																				                                <div><p>&amp;#98;</p>&#98;</div>
+																				                                <div><p>&amp;#99;</p>&#99;</div>
+																				                                <div><p>&amp;#100;</p>&#100;</div>
+																				                                <div><p>&amp;#101;</p>&#101;</div>
+																				                                <div><p>&amp;#102;</p>&#102;</div>
+																				                                <div><p>&amp;#103;</p>&#103;</div>
+																				                                <div><p>&amp;#104;</p>&#104;</div>
+																				                                <div><p>&amp;#105;</p>&#105;</div>
+																				                                <div><p>&amp;#106;</p>&#106;</div>
+																				                                <div><p>&amp;#107;</p>&#107;</div>
+																				                                <div><p>&amp;#108;</p>&#108;</div>
+																				                                <div><p>&amp;#109;</p>&#109;</div>
+																				                                <div><p>&amp;#110;</p>&#110;</div>
+																				                                <div><p>&amp;#111;</p>&#111;</div>
+																				                                <div><p>&amp;#112;</p>&#112;</div>
+																				                                <div><p>&amp;#113;</p>&#113;</div>
+																				                                <div><p>&amp;#114;</p>&#114;</div>
+																				                                <div><p>&amp;#115;</p>&#115;</div>
+																				                                <div><p>&amp;#116;</p>&#116;</div>
+																				                                <div><p>&amp;#117;</p>&#117;</div>
+																				                                <div><p>&amp;#118;</p>&#118;</div>
+																				                                <div><p>&amp;#119;</p>&#119;</div>
+																				                                <div><p>&amp;#120;</p>&#120;</div>
+																				                                <div><p>&amp;#121;</p>&#121;</div>
+																				                                <div><p>&amp;#122;</p>&#122;</div>
+																				                                <div><p>&amp;#123;</p>&#123;</div>
+																				                                <div><p>&amp;#124;</p>&#124;</div>
+																				                                <div><p>&amp;#125;</p>&#125;</div>
+																				                                <div><p>&amp;#126;</p>&#126;</div>
+																				                                <div><p>&amp;#160;</p>&#160;</div>
+																				                                <div><p>&amp;#161;</p>&#161;</div>
+																				                                <div><p>&amp;#162;</p>&#162;</div>
+																				                                <div><p>&amp;#163;</p>&#163;</div>
+																				                                <div><p>&amp;#164;</p>&#164;</div>
+																				                                <div><p>&amp;#165;</p>&#165;</div>
+																				                                <div><p>&amp;#166;</p>&#166;</div>
+																				                                <div><p>&amp;#167;</p>&#167;</div>
+																				                                <div><p>&amp;#168;</p>&#168;</div>
+																				                                <div><p>&amp;#169;</p>&#169;</div>
+																				                                <div><p>&amp;#170;</p>&#170;</div>
+																				                                <div><p>&amp;#171;</p>&#171;</div>
+																				                                <div><p>&amp;#172;</p>&#172;</div>
+																				                                <div><p>&amp;#173;</p>&#173;</div>
+																				                                <div><p>&amp;#174;</p>&#174;</div>
+																				                                <div><p>&amp;#175;</p>&#175;</div>
+																				                                <div><p>&amp;#176;</p>&#176;</div>
+																				                                <div><p>&amp;#177;</p>&#177;</div>
+																				                                <div><p>&amp;#178;</p>&#178;</div>
+																				                                <div><p>&amp;#179;</p>&#179;</div>
+																				                                <div><p>&amp;#180;</p>&#180;</div>
+																				                                <div><p>&amp;#181;</p>&#181;</div>
+																				                                <div><p>&amp;#182;</p>&#182;</div>
+																				                                <div><p>&amp;#183;</p>&#183;</div>
+																				                                <div><p>&amp;#184;</p>&#184;</div>
+																				                                <div><p>&amp;#185;</p>&#185;</div>
+																				                                <div><p>&amp;#186;</p>&#186;</div>
+																				                                <div><p>&amp;#187;</p>&#187;</div>
+																				                                <div><p>&amp;#188;</p>&#188;</div>
+																				                                <div><p>&amp;#189;</p>&#189;</div>
+																				                                <div><p>&amp;#190;</p>&#190;</div>
+																				                                <div><p>&amp;#191;</p>&#191;</div>
+																				                                <div><p>&amp;#192;</p>&#192;</div>
+																				                                <div><p>&amp;#193;</p>&#193;</div>
+																				                                <div><p>&amp;#194;</p>&#194;</div>
+																				                                <div><p>&amp;#195;</p>&#195;</div>
+																				                                <div><p>&amp;#196;</p>&#196;</div>
+																				                                <div><p>&amp;#197;</p>&#197;</div>
+																				                                <div><p>&amp;#198;</p>&#198;</div>
+																				                                <div><p>&amp;#199;</p>&#199;</div>
+																				                                <div><p>&amp;#200;</p>&#200;</div>
+																				                                <div><p>&amp;#201;</p>&#201;</div>
+																				                                <div><p>&amp;#202;</p>&#202;</div>
+																				                                <div><p>&amp;#203;</p>&#203;</div>
+																				                                <div><p>&amp;#204;</p>&#204;</div>
+																				                                <div><p>&amp;#205;</p>&#205;</div>
+																				                                <div><p>&amp;#206;</p>&#206;</div>
+																				                                <div><p>&amp;#207;</p>&#207;</div>
+																				                                <div><p>&amp;#208;</p>&#208;</div>
+																				                                <div><p>&amp;#209;</p>&#209;</div>
+																				                                <div><p>&amp;#210;</p>&#210;</div>
+																				                                <div><p>&amp;#211;</p>&#211;</div>
+																				                                <div><p>&amp;#212;</p>&#212;</div>
+																				                                <div><p>&amp;#213;</p>&#213;</div>
+																				                                <div><p>&amp;#214;</p>&#214;</div>
+																				                                <div><p>&amp;#215;</p>&#215;</div>
+																				                                <div><p>&amp;#216;</p>&#216;</div>
+																				                                <div><p>&amp;#217;</p>&#217;</div>
+																				                                <div><p>&amp;#218;</p>&#218;</div>
+																				                                <div><p>&amp;#219;</p>&#219;</div>
+																				                                <div><p>&amp;#220;</p>&#220;</div>
+																				                                <div><p>&amp;#221;</p>&#221;</div>
+																				                                <div><p>&amp;#222;</p>&#222;</div>
+																				                                <div><p>&amp;#223;</p>&#223;</div>
+																				                                <div><p>&amp;#224;</p>&#224;</div>
+																				                                <div><p>&amp;#225;</p>&#225;</div>
+																				                                <div><p>&amp;#226;</p>&#226;</div>
+																				                                <div><p>&amp;#227;</p>&#227;</div>
+																				                                <div><p>&amp;#228;</p>&#228;</div>
+																				                                <div><p>&amp;#229;</p>&#229;</div>
+																				                                <div><p>&amp;#230;</p>&#230;</div>
+																				                                <div><p>&amp;#231;</p>&#231;</div>
+																				                                <div><p>&amp;#232;</p>&#232;</div>
+																				                                <div><p>&amp;#233;</p>&#233;</div>
+																				                                <div><p>&amp;#234;</p>&#234;</div>
+																				                                <div><p>&amp;#235;</p>&#235;</div>
+																				                                <div><p>&amp;#236;</p>&#236;</div>
+																				                                <div><p>&amp;#237;</p>&#237;</div>
+																				                                <div><p>&amp;#238;</p>&#238;</div>
+																				                                <div><p>&amp;#239;</p>&#239;</div>
+																				                                <div><p>&amp;#240;</p>&#240;</div>
+																				                                <div><p>&amp;#241;</p>&#241;</div>
+																				                                <div><p>&amp;#242;</p>&#242;</div>
+																				                                <div><p>&amp;#243;</p>&#243;</div>
+																				                                <div><p>&amp;#244;</p>&#244;</div>
+																				                                <div><p>&amp;#245;</p>&#245;</div>
+																				                                <div><p>&amp;#246;</p>&#246;</div>
+																				                                <div><p>&amp;#247;</p>&#247;</div>
+																				                                <div><p>&amp;#248;</p>&#248;</div>
+																				                                <div><p>&amp;#249;</p>&#249;</div>
+																				                                <div><p>&amp;#250;</p>&#250;</div>
+																				                                <div><p>&amp;#251;</p>&#251;</div>
+																				                                <div><p>&amp;#252;</p>&#252;</div>
+																				                                <div><p>&amp;#253;</p>&#253;</div>
+																				                                <div><p>&amp;#254;</p>&#254;</div>
+																				                                <div><p>&amp;#255;</p>&#255;</div>
+																				                                <div><p>&amp;#338;</p>&#338;</div>
+																				                                <div><p>&amp;#339;</p>&#339;</div>
+																				                                <div><p>&amp;#376;</p>&#376;</div>
+																				                                <div><p>&amp;#710;</p>&#710;</div>
+																				                                <div><p>&amp;#732;</p>&#732;</div>
+																				                                <div><p>&amp;#8192;</p>&#8192;</div>
+																				                                <div><p>&amp;#8193;</p>&#8193;</div>
+																				                                <div><p>&amp;#8194;</p>&#8194;</div>
+																				                                <div><p>&amp;#8195;</p>&#8195;</div>
+																				                                <div><p>&amp;#8196;</p>&#8196;</div>
+																				                                <div><p>&amp;#8197;</p>&#8197;</div>
+																				                                <div><p>&amp;#8198;</p>&#8198;</div>
+																				                                <div><p>&amp;#8199;</p>&#8199;</div>
+																				                                <div><p>&amp;#8200;</p>&#8200;</div>
+																				                                <div><p>&amp;#8201;</p>&#8201;</div>
+																				                                <div><p>&amp;#8202;</p>&#8202;</div>
+																				                                <div><p>&amp;#8208;</p>&#8208;</div>
+																				                                <div><p>&amp;#8209;</p>&#8209;</div>
+																				                                <div><p>&amp;#8210;</p>&#8210;</div>
+																				                                <div><p>&amp;#8211;</p>&#8211;</div>
+																				                                <div><p>&amp;#8212;</p>&#8212;</div>
+																				                                <div><p>&amp;#8216;</p>&#8216;</div>
+																				                                <div><p>&amp;#8217;</p>&#8217;</div>
+																				                                <div><p>&amp;#8218;</p>&#8218;</div>
+																				                                <div><p>&amp;#8220;</p>&#8220;</div>
+																				                                <div><p>&amp;#8221;</p>&#8221;</div>
+																				                                <div><p>&amp;#8222;</p>&#8222;</div>
+																				                                <div><p>&amp;#8226;</p>&#8226;</div>
+																				                                <div><p>&amp;#8230;</p>&#8230;</div>
+																				                                <div><p>&amp;#8239;</p>&#8239;</div>
+																				                                <div><p>&amp;#8249;</p>&#8249;</div>
+																				                                <div><p>&amp;#8250;</p>&#8250;</div>
+																				                                <div><p>&amp;#8287;</p>&#8287;</div>
+																				                                <div><p>&amp;#8364;</p>&#8364;</div>
+																				                                <div><p>&amp;#8482;</p>&#8482;</div>
+																				                                <div><p>&amp;#9724;</p>&#9724;</div>
+																				                                <div><p>&amp;#64257;</p>&#64257;</div>
+																				                                <div><p>&amp;#64258;</p>&#64258;</div>
+																																																										                    </div>
+                </div>
+
+
+            </div>
+        </div>
+
+
+        <div id="specs">
+
+        </div>
+
+        <div id="installing">
+            <div class="section">
+                <div class="grid7 firstcol">
+                    <h1>Installing Webfonts</h1>
+
+                    <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+                    <h2>1. Upload your webfonts</h2>
+                    <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+                    <h2>2. Include the webfont stylesheet</h2>
+                    <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+                    <code>
+                        @font-face{
+                        font-family: 'MyWebFont';
+                        src: url('WebFont.eot');
+                        src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+                        url('WebFont.woff') format('woff'),
+                        url('WebFont.ttf') format('truetype'),
+                        url('WebFont.svg#webfont') format('svg');
+                        }
+                    </code>
+
+                    <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+                    <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+                    <h2>3. Modify your own stylesheet</h2>
+                    <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+                    <code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+                    <h2>4. Test</h2>
+                    <p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+                </div>
+
+                <div class="grid5 sidebar">
+                    <div class="box">
+                        <h2>Troubleshooting<br/>Font-Face Problems</h2>
+                        <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+                        <h3>Fonts not showing in any browser</h3>
+
+                        <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+                        <h3>Fonts not loading in iPhone or iPad</h3>
+
+                        <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+                        <h3>Fonts not loading in Firefox</h3>
+
+                        <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+                        <h3>Fonts not loading in IE</h3>
+
+                        <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+                        <h3>Fonts not loading in IE9</h3>
+
+                        <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+    <div id="footer">
+        <p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+    </div>
+</div>
+</body>
+</html>

src/static/font/pf_ronda_seven_bold-demo.html

@@ -0,0 +1,703 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+    <script type="text/javascript">
+		(function($) {
+			$.fn.easyTabs = function(option) {
+				var param = jQuery.extend({ fadeSpeed: 'fast', defaultContent: 1, activeClass: 'active' }, option);
+				$(this).each(function() {
+					var thisId = '#' + this.id;
+					if ( param.defaultContent == '' )
+					{
+						param.defaultContent = 1;
+					}
+					if ( typeof param.defaultContent == 'number' )
+					{
+						var defaultTab = $(thisId + ' .tabs li:eq(' + (param.defaultContent - 1) + ') a').attr('href').substr(1);
+					}
+					else
+					{
+						var defaultTab = param.defaultContent;
+					}
+					$(thisId + ' .tabs li a').each(function() {
+						var tabToHide = $(this).attr('href').substr(1);
+						$('#' + tabToHide).addClass('easytabs-tab-content');
+					});
+					hideAll();
+					changeContent(defaultTab);
+
+					function hideAll() {$(thisId + ' .easytabs-tab-content').hide();}
+
+					function changeContent(tabId)
+					{
+						hideAll();
+						$(thisId + ' .tabs li').removeClass(param.activeClass);
+						$(thisId + ' .tabs li a[href=#' + tabId + ']').closest('li').addClass(param.activeClass);
+						if ( param.fadeSpeed != 'none' )
+						{
+							$(thisId + ' #' + tabId).fadeIn(param.fadeSpeed);
+						}
+						else
+						{
+							$(thisId + ' #' + tabId).show();
+						}
+					}
+
+					$(thisId + ' .tabs li').click(function() {
+						var tabId = $(this).find('a').attr('href').substr(1);
+						changeContent(tabId);
+						return false;
+					});
+				});
+			}
+		})(jQuery);
+    </script>
+    <link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8"/>
+    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8"/>
+
+    <style type="text/css">
+        		body {
+			font-family: 'pf_ronda_sevenbold';
+        		}
+
+            </style>
+
+    <title>PF Ronda Seven Bold Specimen</title>
+
+
+    <script type="text/javascript" charset="utf-8">
+		$(document).ready(function() {
+			$('#container').easyTabs({ defaultContent: 1 });
+		});
+    </script>
+</head>
+
+<body>
+<div id="container">
+    <div id="header">
+		PF Ronda Seven Bold    </div>
+    <ul class="tabs">
+        <li><a href="#specimen">Specimen</a></li>
+        <li><a href="#layout">Sample Layout</a></li>
+		        <li><a href="#glyphs">Glyphs &amp; Languages</a></li>
+        <li><a href="#installing">Installing Webfonts</a></li>
+
+    </ul>
+
+    <div id="main_content">
+
+
+        <div id="specimen">
+
+            <div class="section">
+                <div class="grid12 firstcol">
+                    <div class="huge">AaBb</div>
+                </div>
+            </div>
+
+            <div class="section">
+                <div class="glyph_range">A&#x200B;B&#x200b;C&#x200b;D&#x200b;E&#x200b;F&#x200b;G&#x200b;H&#x200b;I&#x200b;J&#x200b;K&#x200b;L&#x200b;M&#x200b;N&#x200b;O&#x200b;P&#x200b;Q&#x200b;R&#x200b;S&#x200b;T&#x200b;U&#x200b;V&#x200b;W&#x200b;X&#x200b;Y&#x200b;Z&#x200b;a&#x200b;b&#x200b;c&#x200b;d&#x200b;e&#x200b;f&#x200b;g&#x200b;h&#x200b;i&#x200b;j&#x200b;k&#x200b;l&#x200b;m&#x200b;n&#x200b;o&#x200b;p&#x200b;q&#x200b;r&#x200b;s&#x200b;t&#x200b;u&#x200b;v&#x200b;w&#x200b;x&#x200b;y&#x200b;z&#x200b;1&#x200b;2&#x200b;3&#x200b;4&#x200b;5&#x200b;6&#x200b;7&#x200b;8&#x200b;9&#x200b;0&#x200b;&amp;&#x200b;.&#x200b;,&#x200b;?&#x200b;!&#x200b;&#64;&#x200b;(&#x200b;)&#x200b;#&#x200b;$&#x200b;%&#x200b;*&#x200b;+&#x200b;-&#x200b;=&#x200b;:&#x200b;;</div>
+            </div>
+            <div class="section">
+                <div class="grid12 firstcol">
+                    <table class="sample_table">
+                        <tr>
+                            <td>10</td>
+                            <td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>11</td>
+                            <td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>12</td>
+                            <td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>13</td>
+                            <td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>14</td>
+                            <td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>16</td>
+                            <td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>18</td>
+                            <td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>20</td>
+                            <td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>24</td>
+                            <td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>30</td>
+                            <td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>36</td>
+                            <td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>48</td>
+                            <td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>60</td>
+                            <td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>72</td>
+                            <td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                        <tr>
+                            <td>90</td>
+                            <td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td>
+                        </tr>
+                    </table>
+
+                </div>
+
+            </div>
+
+
+            <div class="section" id="bodycomparison">
+
+
+                <div id="xheight">
+                    <div class="fontbody">&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;body</div>
+                    <div class="arialbody">body</div>
+                    <div class="verdanabody">body</div>
+                    <div class="georgiabody">body</div>
+                </div>
+                <div class="fontbody" style="z-index:1">
+                    body<span>PF Ronda Seven Bold</span>
+                </div>
+                <div class="arialbody" style="z-index:1">
+                    body<span>Arial</span>
+                </div>
+                <div class="verdanabody" style="z-index:1">
+                    body<span>Verdana</span>
+                </div>
+                <div class="georgiabody" style="z-index:1">
+                    body<span>Georgia</span>
+                </div>
+
+
+            </div>
+
+
+            <div class="section psample psample_row1" id="">
+
+                <div class="grid2 firstcol">
+                    <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="white_blend"></div>
+
+            </div>
+            <div class="section psample psample_row2" id="">
+                <div class="grid3 firstcol">
+                    <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid5">
+                    <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+
+                <div class="white_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row3" id="">
+                <div class="grid5 firstcol">
+                    <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="grid7">
+                    <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+
+                <div class="white_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row4" id="">
+                <div class="grid12 firstcol">
+                    <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="white_blend"></div>
+
+            </div>
+
+
+            <div class="section psample psample_row1 fullreverse">
+                <div class="grid2 firstcol">
+                    <p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid3">
+                    <p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample psample_row2 fullreverse">
+                <div class="grid3 firstcol">
+                    <p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid4">
+                    <p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="grid5">
+                    <p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample fullreverse psample_row3" id="">
+                <div class="grid5 firstcol">
+                    <p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="grid7">
+                    <p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+
+                <div class="black_blend"></div>
+
+            </div>
+
+            <div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
+                <div class="grid12 firstcol">
+                    <p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
+                </div>
+                <div class="black_blend"></div>
+
+            </div>
+
+
+        </div>
+
+        <div id="layout">
+
+            <div class="section">
+
+                <div class="grid12 firstcol">
+                    <h1>Lorem Ipsum Dolor</h1>
+                    <h2>Etiam porta sem malesuada magna mollis euismod</h2>
+
+                    <p class="byline">By <a href="#link">Aenean Lacinia</a></p>
+                </div>
+            </div>
+            <div class="section">
+                <div class="grid8 firstcol">
+                    <p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+                    <h3>Pellentesque ornare sem</h3>
+
+                    <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+
+                    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
+
+                    <p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
+
+                    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
+
+                    <h3>Cras mattis consectetur</h3>
+
+                    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
+
+                    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
+                </div>
+
+                <div class="grid4 sidebar">
+
+                    <div class="box reverse">
+                        <p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+                    </div>
+
+                    <p class="caption">Maecenas sed diam eget risus varius.</p>
+
+                    <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+
+                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
+
+                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
+
+                </div>
+            </div>
+
+        </div>
+
+
+		
+
+        <div id="glyphs">
+            <div class="section">
+                <div class="grid12 firstcol">
+
+                    <h1>Language Support</h1>
+                    <p>The subset of PF Ronda Seven Bold in this kit supports the following languages:<br/>
+
+						Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo                    </p>
+                    <h1>Glyph Chart</h1>
+                    <p>The subset of PF Ronda Seven Bold in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
+                    <div id="glyph_chart">
+
+																				                                <div><p>&amp;#32;</p>&#32;</div>
+																				                                <div><p>&amp;#33;</p>&#33;</div>
+																				                                <div><p>&amp;#34;</p>&#34;</div>
+																				                                <div><p>&amp;#35;</p>&#35;</div>
+																				                                <div><p>&amp;#36;</p>&#36;</div>
+																				                                <div><p>&amp;#37;</p>&#37;</div>
+																				                                <div><p>&amp;#38;</p>&#38;</div>
+																				                                <div><p>&amp;#39;</p>&#39;</div>
+																				                                <div><p>&amp;#40;</p>&#40;</div>
+																				                                <div><p>&amp;#41;</p>&#41;</div>
+																				                                <div><p>&amp;#42;</p>&#42;</div>
+																				                                <div><p>&amp;#43;</p>&#43;</div>
+																				                                <div><p>&amp;#44;</p>&#44;</div>
+																				                                <div><p>&amp;#45;</p>&#45;</div>
+																				                                <div><p>&amp;#46;</p>&#46;</div>
+																				                                <div><p>&amp;#47;</p>&#47;</div>
+																				                                <div><p>&amp;#48;</p>&#48;</div>
+																				                                <div><p>&amp;#49;</p>&#49;</div>
+																				                                <div><p>&amp;#50;</p>&#50;</div>
+																				                                <div><p>&amp;#51;</p>&#51;</div>
+																				                                <div><p>&amp;#52;</p>&#52;</div>
+																				                                <div><p>&amp;#53;</p>&#53;</div>
+																				                                <div><p>&amp;#54;</p>&#54;</div>
+																				                                <div><p>&amp;#55;</p>&#55;</div>
+																				                                <div><p>&amp;#56;</p>&#56;</div>
+																				                                <div><p>&amp;#57;</p>&#57;</div>
+																				                                <div><p>&amp;#58;</p>&#58;</div>
+																				                                <div><p>&amp;#59;</p>&#59;</div>
+																				                                <div><p>&amp;#60;</p>&#60;</div>
+																				                                <div><p>&amp;#61;</p>&#61;</div>
+																				                                <div><p>&amp;#62;</p>&#62;</div>
+																				                                <div><p>&amp;#63;</p>&#63;</div>
+																				                                <div><p>&amp;#64;</p>&#64;</div>
+																				                                <div><p>&amp;#65;</p>&#65;</div>
+																				                                <div><p>&amp;#66;</p>&#66;</div>
+																				                                <div><p>&amp;#67;</p>&#67;</div>
+																				                                <div><p>&amp;#68;</p>&#68;</div>
+																				                                <div><p>&amp;#69;</p>&#69;</div>
+																				                                <div><p>&amp;#70;</p>&#70;</div>
+																				                                <div><p>&amp;#71;</p>&#71;</div>
+																				                                <div><p>&amp;#72;</p>&#72;</div>
+																				                                <div><p>&amp;#73;</p>&#73;</div>
+																				                                <div><p>&amp;#74;</p>&#74;</div>
+																				                                <div><p>&amp;#75;</p>&#75;</div>
+																				                                <div><p>&amp;#76;</p>&#76;</div>
+																				                                <div><p>&amp;#77;</p>&#77;</div>
+																				                                <div><p>&amp;#78;</p>&#78;</div>
+																				                                <div><p>&amp;#79;</p>&#79;</div>
+																				                                <div><p>&amp;#80;</p>&#80;</div>
+																				                                <div><p>&amp;#81;</p>&#81;</div>
+																				                                <div><p>&amp;#82;</p>&#82;</div>
+																				                                <div><p>&amp;#83;</p>&#83;</div>
+																				                                <div><p>&amp;#84;</p>&#84;</div>
+																				                                <div><p>&amp;#85;</p>&#85;</div>
+																				                                <div><p>&amp;#86;</p>&#86;</div>
+																				                                <div><p>&amp;#87;</p>&#87;</div>
+																				                                <div><p>&amp;#88;</p>&#88;</div>
+																				                                <div><p>&amp;#89;</p>&#89;</div>
+																				                                <div><p>&amp;#90;</p>&#90;</div>
+																				                                <div><p>&amp;#91;</p>&#91;</div>
+																				                                <div><p>&amp;#92;</p>&#92;</div>
+																				                                <div><p>&amp;#93;</p>&#93;</div>
+																				                                <div><p>&amp;#94;</p>&#94;</div>
+																				                                <div><p>&amp;#95;</p>&#95;</div>
+																				                                <div><p>&amp;#96;</p>&#96;</div>
+																				                                <div><p>&amp;#97;</p>&#97;</div>
+																				                                <div><p>&amp;#98;</p>&#98;</div>
+																				                                <div><p>&amp;#99;</p>&#99;</div>
+																				                                <div><p>&amp;#100;</p>&#100;</div>
+																				                                <div><p>&amp;#101;</p>&#101;</div>
+																				                                <div><p>&amp;#102;</p>&#102;</div>
+																				                                <div><p>&amp;#103;</p>&#103;</div>
+																				                                <div><p>&amp;#104;</p>&#104;</div>
+																				                                <div><p>&amp;#105;</p>&#105;</div>
+																				                                <div><p>&amp;#106;</p>&#106;</div>
+																				                                <div><p>&amp;#107;</p>&#107;</div>
+																				                                <div><p>&amp;#108;</p>&#108;</div>
+																				                                <div><p>&amp;#109;</p>&#109;</div>
+																				                                <div><p>&amp;#110;</p>&#110;</div>
+																				                                <div><p>&amp;#111;</p>&#111;</div>
+																				                                <div><p>&amp;#112;</p>&#112;</div>
+																				                                <div><p>&amp;#113;</p>&#113;</div>
+																				                                <div><p>&amp;#114;</p>&#114;</div>
+																				                                <div><p>&amp;#115;</p>&#115;</div>
+																				                                <div><p>&amp;#116;</p>&#116;</div>
+																				                                <div><p>&amp;#117;</p>&#117;</div>
+																				                                <div><p>&amp;#118;</p>&#118;</div>
+																				                                <div><p>&amp;#119;</p>&#119;</div>
+																				                                <div><p>&amp;#120;</p>&#120;</div>
+																				                                <div><p>&amp;#121;</p>&#121;</div>
+																				                                <div><p>&amp;#122;</p>&#122;</div>
+																				                                <div><p>&amp;#123;</p>&#123;</div>
+																				                                <div><p>&amp;#124;</p>&#124;</div>
+																				                                <div><p>&amp;#125;</p>&#125;</div>
+																				                                <div><p>&amp;#126;</p>&#126;</div>
+																				                                <div><p>&amp;#160;</p>&#160;</div>
+																				                                <div><p>&amp;#161;</p>&#161;</div>
+																				                                <div><p>&amp;#162;</p>&#162;</div>
+																				                                <div><p>&amp;#163;</p>&#163;</div>
+																				                                <div><p>&amp;#164;</p>&#164;</div>
+																				                                <div><p>&amp;#165;</p>&#165;</div>
+																				                                <div><p>&amp;#166;</p>&#166;</div>
+																				                                <div><p>&amp;#167;</p>&#167;</div>
+																				                                <div><p>&amp;#168;</p>&#168;</div>
+																				                                <div><p>&amp;#169;</p>&#169;</div>
+																				                                <div><p>&amp;#170;</p>&#170;</div>
+																				                                <div><p>&amp;#171;</p>&#171;</div>
+																				                                <div><p>&amp;#172;</p>&#172;</div>
+																				                                <div><p>&amp;#173;</p>&#173;</div>
+																				                                <div><p>&amp;#174;</p>&#174;</div>
+																				                                <div><p>&amp;#175;</p>&#175;</div>
+																				                                <div><p>&amp;#176;</p>&#176;</div>
+																				                                <div><p>&amp;#177;</p>&#177;</div>
+																				                                <div><p>&amp;#178;</p>&#178;</div>
+																				                                <div><p>&amp;#179;</p>&#179;</div>
+																				                                <div><p>&amp;#180;</p>&#180;</div>
+																				                                <div><p>&amp;#181;</p>&#181;</div>
+																				                                <div><p>&amp;#182;</p>&#182;</div>
+																				                                <div><p>&amp;#183;</p>&#183;</div>
+																				                                <div><p>&amp;#184;</p>&#184;</div>
+																				                                <div><p>&amp;#185;</p>&#185;</div>
+																				                                <div><p>&amp;#186;</p>&#186;</div>
+																				                                <div><p>&amp;#187;</p>&#187;</div>
+																				                                <div><p>&amp;#188;</p>&#188;</div>
+																				                                <div><p>&amp;#189;</p>&#189;</div>
+																				                                <div><p>&amp;#190;</p>&#190;</div>
+																				                                <div><p>&amp;#191;</p>&#191;</div>
+																				                                <div><p>&amp;#192;</p>&#192;</div>
+																				                                <div><p>&amp;#193;</p>&#193;</div>
+																				                                <div><p>&amp;#194;</p>&#194;</div>
+																				                                <div><p>&amp;#195;</p>&#195;</div>
+																				                                <div><p>&amp;#196;</p>&#196;</div>
+																				                                <div><p>&amp;#197;</p>&#197;</div>
+																				                                <div><p>&amp;#198;</p>&#198;</div>
+																				                                <div><p>&amp;#199;</p>&#199;</div>
+																				                                <div><p>&amp;#200;</p>&#200;</div>
+																				                                <div><p>&amp;#201;</p>&#201;</div>
+																				                                <div><p>&amp;#202;</p>&#202;</div>
+																				                                <div><p>&amp;#203;</p>&#203;</div>
+																				                                <div><p>&amp;#204;</p>&#204;</div>
+																				                                <div><p>&amp;#205;</p>&#205;</div>
+																				                                <div><p>&amp;#206;</p>&#206;</div>
+																				                                <div><p>&amp;#207;</p>&#207;</div>
+																				                                <div><p>&amp;#208;</p>&#208;</div>
+																				                                <div><p>&amp;#209;</p>&#209;</div>
+																				                                <div><p>&amp;#210;</p>&#210;</div>
+																				                                <div><p>&amp;#211;</p>&#211;</div>
+																				                                <div><p>&amp;#212;</p>&#212;</div>
+																				                                <div><p>&amp;#213;</p>&#213;</div>
+																				                                <div><p>&amp;#214;</p>&#214;</div>
+																				                                <div><p>&amp;#215;</p>&#215;</div>
+																				                                <div><p>&amp;#216;</p>&#216;</div>
+																				                                <div><p>&amp;#217;</p>&#217;</div>
+																				                                <div><p>&amp;#218;</p>&#218;</div>
+																				                                <div><p>&amp;#219;</p>&#219;</div>
+																				                                <div><p>&amp;#220;</p>&#220;</div>
+																				                                <div><p>&amp;#221;</p>&#221;</div>
+																				                                <div><p>&amp;#222;</p>&#222;</div>
+																				                                <div><p>&amp;#223;</p>&#223;</div>
+																				                                <div><p>&amp;#224;</p>&#224;</div>
+																				                                <div><p>&amp;#225;</p>&#225;</div>
+																				                                <div><p>&amp;#226;</p>&#226;</div>
+																				                                <div><p>&amp;#227;</p>&#227;</div>
+																				                                <div><p>&amp;#228;</p>&#228;</div>
+																				                                <div><p>&amp;#229;</p>&#229;</div>
+																				                                <div><p>&amp;#230;</p>&#230;</div>
+																				                                <div><p>&amp;#231;</p>&#231;</div>
+																				                                <div><p>&amp;#232;</p>&#232;</div>
+																				                                <div><p>&amp;#233;</p>&#233;</div>
+																				                                <div><p>&amp;#234;</p>&#234;</div>
+																				                                <div><p>&amp;#235;</p>&#235;</div>
+																				                                <div><p>&amp;#236;</p>&#236;</div>
+																				                                <div><p>&amp;#237;</p>&#237;</div>
+																				                                <div><p>&amp;#238;</p>&#238;</div>
+																				                                <div><p>&amp;#239;</p>&#239;</div>
+																				                                <div><p>&amp;#240;</p>&#240;</div>
+																				                                <div><p>&amp;#241;</p>&#241;</div>
+																				                                <div><p>&amp;#242;</p>&#242;</div>
+																				                                <div><p>&amp;#243;</p>&#243;</div>
+																				                                <div><p>&amp;#244;</p>&#244;</div>
+																				                                <div><p>&amp;#245;</p>&#245;</div>
+																				                                <div><p>&amp;#246;</p>&#246;</div>
+																				                                <div><p>&amp;#247;</p>&#247;</div>
+																				                                <div><p>&amp;#248;</p>&#248;</div>
+																				                                <div><p>&amp;#249;</p>&#249;</div>
+																				                                <div><p>&amp;#250;</p>&#250;</div>
+																				                                <div><p>&amp;#251;</p>&#251;</div>
+																				                                <div><p>&amp;#252;</p>&#252;</div>
+																				                                <div><p>&amp;#253;</p>&#253;</div>
+																				                                <div><p>&amp;#254;</p>&#254;</div>
+																				                                <div><p>&amp;#255;</p>&#255;</div>
+																				                                <div><p>&amp;#338;</p>&#338;</div>
+																				                                <div><p>&amp;#339;</p>&#339;</div>
+																				                                <div><p>&amp;#376;</p>&#376;</div>
+																				                                <div><p>&amp;#710;</p>&#710;</div>
+																				                                <div><p>&amp;#732;</p>&#732;</div>
+																				                                <div><p>&amp;#8192;</p>&#8192;</div>
+																				                                <div><p>&amp;#8193;</p>&#8193;</div>
+																				                                <div><p>&amp;#8194;</p>&#8194;</div>
+																				                                <div><p>&amp;#8195;</p>&#8195;</div>
+																				                                <div><p>&amp;#8196;</p>&#8196;</div>
+																				                                <div><p>&amp;#8197;</p>&#8197;</div>
+																				                                <div><p>&amp;#8198;</p>&#8198;</div>
+																				                                <div><p>&amp;#8199;</p>&#8199;</div>
+																				                                <div><p>&amp;#8200;</p>&#8200;</div>
+																				                                <div><p>&amp;#8201;</p>&#8201;</div>
+																				                                <div><p>&amp;#8202;</p>&#8202;</div>
+																				                                <div><p>&amp;#8208;</p>&#8208;</div>
+																				                                <div><p>&amp;#8209;</p>&#8209;</div>
+																				                                <div><p>&amp;#8210;</p>&#8210;</div>
+																				                                <div><p>&amp;#8211;</p>&#8211;</div>
+																				                                <div><p>&amp;#8212;</p>&#8212;</div>
+																				                                <div><p>&amp;#8216;</p>&#8216;</div>
+																				                                <div><p>&amp;#8217;</p>&#8217;</div>
+																				                                <div><p>&amp;#8218;</p>&#8218;</div>
+																				                                <div><p>&amp;#8220;</p>&#8220;</div>
+																				                                <div><p>&amp;#8221;</p>&#8221;</div>
+																				                                <div><p>&amp;#8222;</p>&#8222;</div>
+																				                                <div><p>&amp;#8226;</p>&#8226;</div>
+																				                                <div><p>&amp;#8230;</p>&#8230;</div>
+																				                                <div><p>&amp;#8239;</p>&#8239;</div>
+																				                                <div><p>&amp;#8249;</p>&#8249;</div>
+																				                                <div><p>&amp;#8250;</p>&#8250;</div>
+																				                                <div><p>&amp;#8287;</p>&#8287;</div>
+																				                                <div><p>&amp;#8364;</p>&#8364;</div>
+																				                                <div><p>&amp;#8482;</p>&#8482;</div>
+																				                                <div><p>&amp;#9724;</p>&#9724;</div>
+																				                                <div><p>&amp;#64257;</p>&#64257;</div>
+																				                                <div><p>&amp;#64258;</p>&#64258;</div>
+																																																										                    </div>
+                </div>
+
+
+            </div>
+        </div>
+
+
+        <div id="specs">
+
+        </div>
+
+        <div id="installing">
+            <div class="section">
+                <div class="grid7 firstcol">
+                    <h1>Installing Webfonts</h1>
+
+                    <p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
+
+                    <h2>1. Upload your webfonts</h2>
+                    <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
+
+                    <h2>2. Include the webfont stylesheet</h2>
+                    <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
+
+
+                    <code>
+                        @font-face{
+                        font-family: 'MyWebFont';
+                        src: url('WebFont.eot');
+                        src: url('WebFont.eot?#iefix') format('embedded-opentype'),
+                        url('WebFont.woff') format('woff'),
+                        url('WebFont.ttf') format('truetype'),
+                        url('WebFont.svg#webfont') format('svg');
+                        }
+                    </code>
+
+                    <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
+                    <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
+
+                    <h2>3. Modify your own stylesheet</h2>
+                    <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
+                    <code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
+
+                    <h2>4. Test</h2>
+                    <p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
+                </div>
+
+                <div class="grid5 sidebar">
+                    <div class="box">
+                        <h2>Troubleshooting<br/>Font-Face Problems</h2>
+                        <p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
+
+                        <h3>Fonts not showing in any browser</h3>
+
+                        <p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
+
+                        <h3>Fonts not loading in iPhone or iPad</h3>
+
+                        <p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
+
+                        <h3>Fonts not loading in Firefox</h3>
+
+                        <p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
+
+                        <h3>Fonts not loading in IE</h3>
+
+                        <p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
+
+                        <h3>Fonts not loading in IE9</h3>
+
+                        <p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+    <div id="footer">
+        <p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
+    </div>
+</div>
+</body>
+</html>

src/static/font/specimen_files/grid_12-825-55-15.css

@@ -0,0 +1,370 @@
+/*Notes about grid:
+Columns:      12
+Grid Width:   825px
+Column Width: 55px
+Gutter Width: 15px
+-------------------------------*/
+
+
+.section {
+	margin-bottom: 18px;
+}
+
+.section:after {
+	content:    '.';
+	display:    block;
+	height:     0;
+	clear:      both;
+	visibility: hidden;
+}
+
+.section {
+	*zoom: 1;
+}
+
+.section .firstcolumn,
+.section .firstcol {
+	margin-left: 0;
+}
+
+
+/* Border on left hand side of a column. */
+.border {
+	padding-left: 7px;
+	margin-left:  7px;
+	border-left:  1px solid #eee;
+}
+
+/* Border with more whitespace, spans one column. */
+.colborder {
+	padding-left: 42px;
+	margin-left:  42px;
+	border-left:  1px solid #eee;
+}
+
+
+/* The Grid Classes */
+.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 {
+	margin-left: 15px;
+	float:       left;
+	display:     inline;
+	overflow:    hidden;
+}
+
+
+.width1, .grid1, .span-1 {
+	width: 55px;
+}
+
+.width1_2cols, .grid1_2cols {
+	width: 20px;
+}
+
+.width1_3cols, .grid1_3cols {
+	width: 8px;
+}
+
+.width1_4cols, .grid1_4cols {
+	width: 2px;
+}
+
+.input_width1 {
+	width: 49px;
+}
+
+.width2, .grid2, .span-2 {
+	width: 125px;
+}
+
+.width2_3cols, .grid2_3cols {
+	width: 31px;
+}
+
+.width2_4cols, .grid2_4cols {
+	width: 20px;
+}
+
+.input_width2 {
+	width: 119px;
+}
+
+.width3, .grid3, .span-3 {
+	width: 195px;
+}
+
+.width3_2cols, .grid3_2cols {
+	width: 90px;
+}
+
+.width3_4cols, .grid3_4cols {
+	width: 37px;
+}
+
+.input_width3 {
+	width: 189px;
+}
+
+.width4, .grid4, .span-4 {
+	width: 265px;
+}
+
+.width4_3cols, .grid4_3cols {
+	width: 78px;
+}
+
+.input_width4 {
+	width: 259px;
+}
+
+.width5, .grid5, .span-5 {
+	width: 335px;
+}
+
+.width5_2cols, .grid5_2cols {
+	width: 160px;
+}
+
+.width5_3cols, .grid5_3cols {
+	width: 101px;
+}
+
+.width5_4cols, .grid5_4cols {
+	width: 72px;
+}
+
+.input_width5 {
+	width: 329px;
+}
+
+.width6, .grid6, .span-6 {
+	width: 405px;
+}
+
+.width6_4cols, .grid6_4cols {
+	width: 90px;
+}
+
+.input_width6 {
+	width: 399px;
+}
+
+.width7, .grid7, .span-7 {
+	width: 475px;
+}
+
+.width7_2cols, .grid7_2cols {
+	width: 230px;
+}
+
+.width7_3cols, .grid7_3cols {
+	width: 148px;
+}
+
+.width7_4cols, .grid7_4cols {
+	width: 107px;
+}
+
+.input_width7 {
+	width: 469px;
+}
+
+.width8, .grid8, .span-8 {
+	width: 545px;
+}
+
+.width8_3cols, .grid8_3cols {
+	width: 171px;
+}
+
+.input_width8 {
+	width: 539px;
+}
+
+.width9, .grid9, .span-9 {
+	width: 615px;
+}
+
+.width9_2cols, .grid9_2cols {
+	width: 300px;
+}
+
+.width9_4cols, .grid9_4cols {
+	width: 142px;
+}
+
+.input_width9 {
+	width: 609px;
+}
+
+.width10, .grid10, .span-10 {
+	width: 685px;
+}
+
+.width10_3cols, .grid10_3cols {
+	width: 218px;
+}
+
+.width10_4cols, .grid10_4cols {
+	width: 160px;
+}
+
+.input_width10 {
+	width: 679px;
+}
+
+.width11, .grid11, .span-11 {
+	width: 755px;
+}
+
+.width11_2cols, .grid11_2cols {
+	width: 370px;
+}
+
+.width11_3cols, .grid11_3cols {
+	width: 241px;
+}
+
+.width11_4cols, .grid11_4cols {
+	width: 177px;
+}
+
+.input_width11 {
+	width: 749px;
+}
+
+.width12, .grid12, .span-12 {
+	width: 825px;
+}
+
+.input_width12 {
+	width: 819px;
+}
+
+/* Subdivided grid spaces */
+.emptycols_left1, .prepend-1 {
+	padding-left: 70px;
+}
+
+.emptycols_right1, .append-1 {
+	padding-right: 70px;
+}
+
+.emptycols_left2, .prepend-2 {
+	padding-left: 140px;
+}
+
+.emptycols_right2, .append-2 {
+	padding-right: 140px;
+}
+
+.emptycols_left3, .prepend-3 {
+	padding-left: 210px;
+}
+
+.emptycols_right3, .append-3 {
+	padding-right: 210px;
+}
+
+.emptycols_left4, .prepend-4 {
+	padding-left: 280px;
+}
+
+.emptycols_right4, .append-4 {
+	padding-right: 280px;
+}
+
+.emptycols_left5, .prepend-5 {
+	padding-left: 350px;
+}
+
+.emptycols_right5, .append-5 {
+	padding-right: 350px;
+}
+
+.emptycols_left6, .prepend-6 {
+	padding-left: 420px;
+}
+
+.emptycols_right6, .append-6 {
+	padding-right: 420px;
+}
+
+.emptycols_left7, .prepend-7 {
+	padding-left: 490px;
+}
+
+.emptycols_right7, .append-7 {
+	padding-right: 490px;
+}
+
+.emptycols_left8, .prepend-8 {
+	padding-left: 560px;
+}
+
+.emptycols_right8, .append-8 {
+	padding-right: 560px;
+}
+
+.emptycols_left9, .prepend-9 {
+	padding-left: 630px;
+}
+
+.emptycols_right9, .append-9 {
+	padding-right: 630px;
+}
+
+.emptycols_left10, .prepend-10 {
+	padding-left: 700px;
+}
+
+.emptycols_right10, .append-10 {
+	padding-right: 700px;
+}
+
+.emptycols_left11, .prepend-11 {
+	padding-left: 770px;
+}
+
+.emptycols_right11, .append-11 {
+	padding-right: 770px;
+}
+
+.pull-1 {
+	margin-left: -70px;
+}
+
+.push-1 {
+	margin-right: -70px;
+	margin-left:  18px;
+	float:        right;
+}
+
+.pull-2 {
+	margin-left: -140px;
+}
+
+.push-2 {
+	margin-right: -140px;
+	margin-left:  18px;
+	float:        right;
+}
+
+.pull-3 {
+	margin-left: -210px;
+}
+
+.push-3 {
+	margin-right: -210px;
+	margin-left:  18px;
+	float:        right;
+}
+
+.pull-4 {
+	margin-left: -280px;
+}
+
+.push-4 {
+	margin-right: -280px;
+	margin-left:  18px;
+	float:        right;
+}

src/static/font/specimen_files/specimen_stylesheet.css

@@ -0,0 +1,502 @@
+@import url('grid_12-825-55-15.css');
+
+/*  
+	CSS Reset by Eric Meyer - Released under Public Domain
+    http://meyerweb.com/eric/tools/css/reset/
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend, table,
+caption, tbody, tfoot, thead, tr, th, td {
+	margin:         0;
+	padding:        0;
+	border:         0;
+	outline:        0;
+	font-size:      100%;
+	vertical-align: baseline;
+	background:     transparent;
+}
+
+body {
+	line-height: 1;
+}
+
+ol, ul {
+	list-style: none;
+}
+
+blockquote, q {
+	quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+
+:focus {
+	outline: 0;
+}
+
+ins {
+	text-decoration: none;
+}
+
+del {
+	text-decoration: line-through;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing:  0;
+}
+
+
+body {
+	color:            #000;
+	background-color: #dcdcdc;
+}
+
+a {
+	text-decoration: none;
+	color:           #1883ba;
+}
+
+h1 {
+	font-size:     32px;
+	font-weight:   normal;
+	font-style:    normal;
+	margin-bottom: 18px;
+}
+
+h2 {
+	font-size: 18px;
+}
+
+#container {
+	width:  865px;
+	margin: 0px auto;
+}
+
+
+#header {
+	padding:          20px;
+	font-size:        36px;
+	background-color: #000;
+	color:            #fff;
+}
+
+#header span {
+	color: #666;
+}
+
+#main_content {
+	background-color: #fff;
+	padding:          60px 20px 20px;
+}
+
+
+#footer p {
+	margin:         0;
+	padding-top:    10px;
+	padding-bottom: 50px;
+	color:          #333;
+	font:           10px Arial, sans-serif;
+}
+
+.tabs {
+	width:            100%;
+	height:           31px;
+	background-color: #444;
+}
+
+.tabs li {
+	float:            left;
+	margin:           0;
+	overflow:         hidden;
+	background-color: #444;
+}
+
+.tabs li a {
+	display:         block;
+	color:           #fff;
+	text-decoration: none;
+	font:            bold 11px/11px 'Arial';
+	text-transform:  uppercase;
+	padding:         10px 15px;
+	border-right:    1px solid #fff;
+}
+
+.tabs li a:hover {
+	background-color: #00b3ff;
+
+}
+
+.tabs li.active a {
+	color:            #000;
+	background-color: #fff;
+}
+
+
+div.huge {
+
+	font-size:      300px;
+	line-height:    1em;
+	padding:        0;
+	letter-spacing: -.02em;
+	overflow:       hidden;
+}
+
+div.glyph_range {
+	font-size:   72px;
+	line-height: 1.1em;
+}
+
+.size10 {
+	font-size: 10px;
+}
+
+.size11 {
+	font-size: 11px;
+}
+
+.size12 {
+	font-size: 12px;
+}
+
+.size13 {
+	font-size: 13px;
+}
+
+.size14 {
+	font-size: 14px;
+}
+
+.size16 {
+	font-size: 16px;
+}
+
+.size18 {
+	font-size: 18px;
+}
+
+.size20 {
+	font-size: 20px;
+}
+
+.size24 {
+	font-size: 24px;
+}
+
+.size30 {
+	font-size: 30px;
+}
+
+.size36 {
+	font-size: 36px;
+}
+
+.size48 {
+	font-size: 48px;
+}
+
+.size60 {
+	font-size: 60px;
+}
+
+.size72 {
+	font-size: 72px;
+}
+
+.size90 {
+	font-size: 90px;
+}
+
+
+.psample_row1 {
+	height: 120px;
+}
+
+.psample_row1 {
+	height: 120px;
+}
+
+.psample_row2 {
+	height: 160px;
+}
+
+.psample_row3 {
+	height: 160px;
+}
+
+.psample_row4 {
+	height: 160px;
+}
+
+.psample {
+	overflow: hidden;
+	position: relative;
+}
+
+.psample p {
+	line-height: 1.3em;
+	display:     block;
+	overflow:    hidden;
+	margin:      0;
+}
+
+.psample span {
+	margin-right: .5em;
+}
+
+.white_blend {
+	width:            100%;
+	height:           61px;
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
+	position:         absolute;
+	bottom:           0;
+}
+
+.black_blend {
+	width:            100%;
+	height:           61px;
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
+	position:         absolute;
+	bottom:           0;
+}
+
+.fullreverse {
+	background:    #000 !important;
+	color:         #fff !important;
+	margin-left:   -20px;
+	padding-left:  20px;
+	margin-right:  -20px;
+	padding-right: 20px;
+	padding:       20px;
+	margin-bottom: 0;
+}
+
+
+.sample_table td {
+	padding-top:    3px;
+	padding-bottom: 5px;
+	padding-left:   5px;
+	vertical-align: middle;
+	line-height:    1.2em;
+}
+
+.sample_table td:first-child {
+	background-color: #eee;
+	text-align:       right;
+	padding-right:    5px;
+	padding-left:     0;
+	padding:          5px;
+	font:             11px/12px 'Courier New', Courier, mono;
+}
+
+code {
+	white-space:      pre;
+	background-color: #eee;
+	display:          block;
+	padding:          10px;
+	margin-bottom:    18px;
+	overflow:         auto;
+}
+
+
+.bottom, .last {
+	margin-bottom:  0 !important;
+	padding-bottom: 0 !important;
+}
+
+.box {
+	padding:       18px;
+	margin-bottom: 18px;
+	background:    #eee;
+}
+
+.reverse, .reversed {
+	background: #000 !important;
+	color:      #fff !important;
+	border:     none !important;
+}
+
+#bodycomparison {
+	position:    relative;
+	overflow:    hidden;
+	font-size:   72px;
+	height:      90px;
+	white-space: nowrap;
+}
+
+#bodycomparison div {
+	font-size:   72px;
+	line-height: 90px;
+	display:     inline;
+	margin:      0 15px 0 0;
+	padding:     0;
+}
+
+#bodycomparison div span {
+	font:     10px Arial;
+	position: absolute;
+	left:     0;
+}
+
+#xheight {
+	float:       none;
+	position:    absolute;
+	color:       #d9f3ff;
+	font-size:   72px;
+	line-height: 90px;
+}
+
+.fontbody {
+	position: relative;
+}
+
+.arialbody {
+	font-family: Arial;
+	position:    relative;
+}
+
+.verdanabody {
+	font-family: Verdana;
+	position:    relative;
+}
+
+.georgiabody {
+	font-family: Georgia;
+	position:    relative;
+}
+
+/* @group Layout page
+ */
+
+#layout h1 {
+	font-size:   36px;
+	line-height: 42px;
+	font-weight: normal;
+	font-style:  normal;
+}
+
+#layout h2 {
+	font-size:   24px;
+	line-height: 23px;
+	font-weight: normal;
+	font-style:  normal;
+}
+
+#layout h3 {
+	font-size:   22px;
+	line-height: 1.4em;
+	margin-top:  1em;
+	font-weight: normal;
+	font-style:  normal;
+}
+
+
+#layout p.byline {
+	font-size:     12px;
+	margin-top:    18px;
+	line-height:   12px;
+	margin-bottom: 0;
+}
+
+#layout p {
+	font-size:     14px;
+	line-height:   21px;
+	margin-bottom: .5em;
+}
+
+#layout p.large {
+	font-size:   18px;
+	line-height: 26px;
+}
+
+#layout .sidebar p {
+	font-size:   12px;
+	line-height: 1.4em;
+}
+
+#layout p.caption {
+	font-size:     10px;
+	margin-top:    -16px;
+	margin-bottom: 18px;
+}
+
+/* @end */
+
+/* @group Glyphs */
+
+#glyph_chart div {
+	background-color: #d9f3ff;
+	color:            black;
+	float:            left;
+	font-size:        36px;
+	height:           1.2em;
+	line-height:      1.2em;
+	margin-bottom:    1px;
+	margin-right:     1px;
+	text-align:       center;
+	width:            1.2em;
+	position:         relative;
+	padding:          .6em .2em .2em;
+}
+
+#glyph_chart div p {
+	position:         absolute;
+	left:             0;
+	top:              0;
+	display:          block;
+	text-align:       center;
+	font:             bold 9px Arial, sans-serif;
+	background-color: #3a768f;
+	width:            100%;
+	color:            #fff;
+	padding:          2px 0;
+}
+
+
+#glyphs h1 {
+	font-family: Arial, sans-serif;
+}
+
+/* @end */
+
+/* @group Installing */
+
+#installing {
+	font: 13px Arial, sans-serif;
+}
+
+#installing p,
+#glyphs p {
+	line-height:   1.2em;
+	margin-bottom: 18px;
+	font:          13px Arial, sans-serif;
+}
+
+
+#installing h3 {
+	font-size:  15px;
+	margin-top: 18px;
+}
+
+/* @end */
+
+#rendering h1 {
+	font-family: Arial, sans-serif;
+}
+
+.render_table td {
+	font:           11px 'Courier New', Courier, mono;
+	vertical-align: middle;
+}
+
+

src/static/font/stylesheet.css

@@ -0,0 +1,36 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 14, 2022 */
+
+
+
+@font-face {
+    font-family: 'mitochondriaregular';
+    src: url('/static/font/mitochondria-webfont.woff2') format('woff2'),
+         url('/static/font/mitochondria-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'pf_ronda_sevenregular';
+    src: url('/static/font/pf_ronda_seven-webfont.woff2') format('woff2'),
+         url('/static/font/pf_ronda_seven-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'pf_ronda_sevenbold';
+    src: url('/static/font/pf_ronda_seven_bold-webfont.woff2') format('woff2'),
+         url('/static/font/pf_ronda_seven_bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}

src/views/about.tpl

@@ -0,0 +1,75 @@
+% rebase('frame.tpl')
+    <div class="content-grid"> 
+        <div class="center"><h1>about blessfrey</h1></div>
+        <div class="jump"><img src="/static/img/prom/BlessFREY_logo.png" alt="(link: BLESSFREY" class="logo">
+                <a href="#demo">play</a> • <a href="#system">system</a> • <a href="#story">story</a> • <a href="#characters">characters</a> • <a href="#info">info</a><br>
+        </div>
+
+        <div class="system" id="system">
+<div class="center"><h2>system</h2>
+<p>Blessfrey is a 2D action rpg with a dual-job system which will determine the skill pool from which you will build your skillbar. Your AI companions will have skillbars of their own to edit, so think in terms of teams in order to defeat bosses and solve puzzles. Barely any class progression decisions are permanent, so you can experiment and express your playstyle. <br></p>
+            <br>
+            <h3>jobs </h3>
+            <p>Blessfrey jobs are equivalent to RPG classes. Your first job is a permanent decision which you will make early in gameplay. You will be able to unlock the rest and more during gameplay as side gigs. You can only have one side gig at a time, but you can always swap it outside of combat areas. <br></p>
+            <br>
+            <p>Each job has its own skill pool. Each skill is assigned to a job trait (similar to an RPG attribute). Each character has a set number of trait points they can use to raise job traits and the effectiveness of their associated skills. You gain more trait points through leveling up, but traits can be raised or lowered at will. Experiment to find your specialization! <br></p>
+            <br>
+            <p>Your first job offers an exclusive trait called a job perk. It is not only tied to the effectiveness of related skills but also provides a constant buff. You can use the skills of your side gig's perk-related skills, but you cannot raise their effectiveness nor gain the buff. Perks are what distinguish characters from each other. <br></p>
+            <br>
+            <h3>skills</h3>
+            <p>Skills are individual powers that modify entities in the world of Blessfrey. They can launch fireballs, protect against incoming damage, spawn items or minions, teleport characters, reveal more UI details, and more. Your skillbar only has 8 skill slots and can only be edited in safe areas. The challenge comes from discovering effective strategies and synergies. Many of the same skills will be available to the player and enemy characters alike, so you must learn how to both use and counter each skill. <br></p>
+            <br>
+            <p>Skills are inspired by Magic: The Gathering keywords. There are a limited number of keywords that are quick to learn, but I will combine them with interesting conditions to create a wide arsenal of options. <br></p>
+            <br>
+            <p>Skills are gained during exploration. As you find new areas, encounter enemies, and interact with your surroundings, you will internalize those experiences as new skills. There are multiple paths to learning, so you are free to focus on your favorite parts of the game. <br></p>
+            <br>
+            <h3>team</h3>
+            <p>You will meet new friends and allies in the world, and they will join your team as customizable AI companions. Edit their skillbars to complement yours and keep their gear up-to-date. They will remember your responses and actions, so stay attentive to the flow of your relationship. There may be consequences - sweet or treacherous. <br></p></div>
+                </div>
+
+                <div class="story" id="story">
+<div class="center"><h2>story</h2>
+            <p>You play as Helia, a foreign transfer student living with her estranged uncle in a rural southern American town. You'll find an inexplicable amount of amenities, but none of them hold a candle to the haunted dungeon beneath the city. It's off-limits, but a dare's a dare. <br></p>
+            <br>
+            <p>There's a whole other world down there with multiple fantastical races. Once you've been down there once, it's hard to avoid getting tangled in its mysteries. <br></p>
+            <br>
+            <p>The town is strange in its own right. Lucrest flourished under it's remarkably young mayor and became an economic oasis in an expanse of farmlands and mining communities, drawing people from out-of-state to enjoy its attractions. Mayor Dia claims to have a magic wand that controls economy, and people aren't inclined to disagree. <br></p></div>
+                </div>
+
+                <div class="characters" id="characters">
+<div class="center"><h2>characters</h2>
+            <p><b><a href="/char/Helia">Helia</a></b> (?/?) - The player character! Where she comes from, combat training is unheard of, so pick a job for her. No one really knows why she had to move from the US so suddenly and all alone. <br></p>
+            <br>
+            <p><b><a href="/char/Angel">Angel</a></b> (Weaponmaster/Hacker) - Her real name's Miriam, but it sounds too frumpy, so please call her Angel. She is a naturally gifted with heavy blades and participates in a competitive swordsman league, but she usually comes across as friendly if not a little absent-minded. Computers interest her deeply, so she's always tinkering away with some new gadget or software. <br></p>
+            <br>
+            <p><b><a href="/char/Tessa">Tessa</a></b> (Tamer/Streetfighter) - She actually has a foreign background, too. Her mom and late father moved with her from France when she was really little. She loves the outdoors, animals, and fashion and is always sticking her nose in everyone's business. She's all fun all the time, so she doesn't always know where the boundary is between playful teasing and outright bullying. <br></p>
+            <br>
+            <p><b><a href="/char/Chloe">Chloe</a></b> (Disciple/Weaponmaster) - She's an orphan girl who was taken in by the church, and she spends a lot of her time serving there. She's reticent and deeply introverted but very sweet to those who get to know her. <br></p>
+            <br>
+            <p><b><a href="/char/Aries">Aries</a></b> (Weaponsmaster/Tamer) - Angel's twin brother, though he's her opposite in many ways. He's more attentive, but his frankness and disregard for etiquette makes him seem boorish. He also takes things with more gravity, fully committing himself to his studies and training. He prefers light weapons, light armor, and practical survival skills. <br></p>
+            <br>
+            <p><b><a href="/char/Night">Night</a></b> (Chemist/Weaponsmaster) - Despite not being much older than the other teens, he's completed a few years of apprenticeships at the leading research hospitals in the capital. The deterioration and death of his grandparents forced his return to close the final paperwork and figure out how to support his baby brother in the meantime. He runs a local pharmacy for now. <br></p>
+            <br>
+            <p><b><a href="/char/Rune">Rune</a></b> (?/?) - A startlingly tall and listless horned boy discovered in the local dungeon, surrounded by dinosaurs and other abyssal beasts. He doesn't trust people from the surface at first. <br></p>
+            <br>
+            <p>More characters are over on the <a href="/characters">characters page</a>. <br></p></div>
+                </div>
+
+                <div class="info" id="info">
+<div class="center"><h2>info</h2>
+            <p>Blessfrey is a singleplayer action RPG game that will be playable in at least Windows, Linux, and HTML5. I'm going to sell it on Steam and wherever else lets me list it. It's being developed by me (chimchooree) in Godot Engine with original writing and art, though I'll need help with music and SFX eventually. (Unless I am an audio savant and don't yet know it?) My husband also helps sometimes, especially with writing plug-ins for the engine.♡ The full credits are available on the <a href="/credits">credits page</a>.<br></p>
+            <br>
+            <h2>timeline</h2>
+            <p>Legless the Cat is the first demo. It has nothing to do with the game, but it's an important exercise for exporting and embedding an HTML5 game. I'd hate to make a sophisticated game over multiple years and be too inexperienced to actually share it with anyone. It also lets my kitty be in his own videogame! So cute. <br></p>
+            <br>
+            <p>As for the first real demo, I am currently creating a vertical slice of the game, focusing on a robust presentation of the skill system. This demo will be more of a tech demo than a game. It will feature 3 demo areas, and you will receive a bingo card directing you to try a smattering of what the full game will have to offer. <br></p>
+            <br>
+            <p>The next demo will demonstrate the game's faction system and AI, presenting more as a cutscene with unpredictable outcomes. A couple of different AI groups will wander around a map, intersect, then attack or aid according to affiliation. The faction system is rather complex, so I need to isolate it for testing purposes. <br></p>
+            <br>
+            <p>I think at this point, I will be able to put out a real demo. Demo #3 is going to be a level from the full game, introducing Rune and his multiphase boss fight. <br></p>
+            <br>
+            <p>If I can do that, I'll definitely be ready to make chunks of the game until the entire thing is complete. <br></p>
+            <br>
+            <p>No hard timeline, though! <br></p></div>
+                </div>
+    </div>

src/views/bf-Mercur.tpl

@@ -0,0 +1,6 @@
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1><a href="/gdd">blessfrey gdd</a> - Mercur</h1>
+    <p>All acts of god are attributed to him. His steed is the MessageBus. He is technically an entity. <br></p>
+</div>

src/views/bf-gdd.tpl

@@ -5,7 +5,7 @@
     <p>The vision for Blessfrey <br></p>
     <br>
     <ul>
-        % for i in [["art direction","blessfrey-art"],["characters","blessfrey-cast"],["credits","blessfrey-credits"],["game mechanics","blessfrey-mechanics"],["IDs","blessfrey-ids"],["inspect","blessfrey-inspect"],["jobs","blessfrey-jobs"],["keywords","blessfrey-keywords"],["milestones","blessfrey-milestones"],["setting","blessfrey-setting"],["skills","blessfrey-skills"],["sound","blessfrey-sound"],["story","blessfrey-story"],["style guide","style-guide"],["terms","blessfrey-terms"],["tweaks","tweaks"],["vibe","blessfrey-vibe"]]:
+        % for i in [["cast","blessfrey-cast"],["credits","blessfrey-credits"],["game mechanics","blessfrey-mechanics"],["IDs","blessfrey-ids"],["jobs","blessfrey-jobs"],["keywords","blessfrey-keywords"],["Mercur","blessfrey-Mercur"],["milestones","blessfrey-milestones"],["setting","blessfrey-setting"],["skills","blessfrey-skills"],["story","blessfrey-story"],["style guide","style-guide"],["terms","blessfrey-terms"],["vibe","blessfrey-vibe"],["website","website"]]:
         <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<a href=/{{i[1]}}>{{i[0]}}</a></li>
         % end
     </ul>

src/views/bf-id.tpl

@@ -39,62 +39,69 @@
         <li>wo - unsorted words, includes game title </li>
     </ul>
     <br>
-    <h3>entity ID </h3>
-    <p>IDs apply to a few other things, but it's virtually only for entities. They are 6-character hexadecimal strings (favoring numbers). I like that they correspond to color hex codes, so I can find out everyone's secret color. Generally, a category's earliest and most representative entities are the purest in hue. <br></p>
+    <h3>base ID </h3>
+    <p>Base IDs apply to a few other things, but it's virtually only for entities. They identify a specific type of entity, not a particular instance of that entity. They are 6-character hexadecimal strings (favoring numbers). I like that they correspond to color hex codes, so I can find out everyone's secret color. Generally, a category's earliest and most representative entities are the purest in hue. <br></p>
     <br>
     <p>The first three digits represent categorization, while the last increment by one for each member within that group. Commons start at 000 and increment numerically, while elites and bosses start at aaa and increment alphabetically. <br></p>
     <ul>
         <li>0 - default </li>
         <li>1 - skill </li>
         <ul>
-            <li>0 - common </li>
+            <li>0 - common 
                 <ul>
                     <li>0 - roleplay </li>
                     <li>1 - linguist </li>
                 </ul>
-            <li>1 - armsman </li>
+            </li>
+            <li>1 - armsman
                 <ul>
                     <li>0 - fitness </li>
                     <li>1 - power </li>
                     <li>2 - artistry </li>
                     <li>3 - tactics </li>
                 </ul>
-            <li>2 - disciple </li>
+            </li>
+            <li>2 - disciple
                 <ul>
                     <li>0 - santification </li>
                     <li>1 - power over nature </li>
                     <li>2 - spiritual healing </li>
                     <li>3 - divine protection </li>
                 </ul>
-            <li>3 - tamer </li>
+            </li>
+            <li>3 - tamer
                 <ul>
                     <li>0 - mimicry </li>
                     <li>1 - husbandry </li>
                     <li>2 - empathy </li>
                     <li>3 - survival </li>
                 </ul>
-            <li>4 - brawler </li>
+            </li>
+            <li>4 - brawler
                 <ul>
                     <li>0 - critical eye </li>
                     <li>1 - dirty fighting </li>
                     <li>2 - improvisation </li>
                     <li>3 - street smarts </li>
                 </ul>
-            <li>5 - chemist </li>
+            </li>
+            <li>5 - chemist
                 <ul>
                     <li>0 - cognate sciences </li>
                     <li>1 - pharmacology </li>
                     <li>2 - toxicology </li>
                     <li>3 - materials engineering </li>
                 </ul>
-            <li>6 - hacker </li>
+            </li>
+            <li>6 - hacker
                 <ul>
                     <li>0 - social engineering </li>
                     <li>1 - surveillance </li>
                     <li>2 - robotics </li>
                     <li>3 - gadgetry </li>
                 </ul>
-            <li>7 - Mercur </li>
+            </li>
+            <li>7 - Mercur
                 <ul>
                     <li>0 - supernal </li>
                     <li>1 - projectile </li>
@@ -102,33 +109,37 @@
                     <li>3 - unlearnable </li>
                     <li>4 - job perk </li>
                 </ul>
-            <li>a - tycoon </li>
+            </li>
+            <li>a - tycoon
                 <ul>
                     <li>0 - perpetuity/diversified portfolio </li>
                     <li>1 - negotiation </li>
                     <li>2 - deceptive marketing </li>
                     <li>3 - invisible hand </li>
                 </ul>
-            <li>b - traffic control </li>
+            </li>
+            <li>b - traffic control
                 <ul>
                     <li>0 - extraplanar refuge </li>
                     <li>1 - footwork </li>
                     <li>2 - alteration/landscaping </li>
                     <li>3 - networking </li>
                 </ul>
+            </li>
         </ul>
-        <li>2 - character (next digits indicate job and whether it offers a service) </li>
+        <li>2 - character (next digits indicate job and whether it offers a service)
             <ul>
                 <li>0 - dungeon girls </li>
-                <li>1 - boss </li>
+                <li>1 - boss
                     <ul>
                         <li>the second digit is its species then the other stuff </li>
                     </ul>
+                </li>
                 <li>2 - human </li>
                 <li>3 - Canaanite </li>
-                <li>4 - beast </li>
+                <li>4 - beast
                     <ul>
-                        <li>0 - mammal </li>
+                        <li>0 - mammal
                             <ul>
                                 <li>0 - unsorted </li>
                                 <li>1 - rodent/bat/eulipotyphian </li>
@@ -137,48 +148,56 @@
                                 <li>4 - bear </li>
                                 <li>5 - ungulate </li>
                             </ul>
+                        </li>
                         <li>1 - bird </li>
                         <li>2 - reptile </li>
                         <li>3 - amphibian </li>
-                        <li>0 - fish </li>
-                        <li>4 - bug </li>
+                        <li>4 - fish </li>
+                        <li>5 - bug </li>
                     </ul>
+                </li>
                 <li>5 - slime </li>
                 <li>6 - construct </li>
-                <li>7 - Mercurians </li>
+                <li>7 - Mercurians
                     <ul>
                         <li>0 - avatar </li>
                         <li>1 - projectile </li>
                     </ul>
+                </li>
                 <li>8 - machine </li>
             </ul>
-        <li>3 - item </li>
+        </li>
+        <li>3 - item
             <ul>
                 <li>0 - currency </li>
                 <li>1 - quest item </li>
-                <li>2 - equipment </li>
+                <li>2 - equipment
                     <ul>
                         <li>0 - weapon </li>
                         <li>1 - gear </li>
-                    <ul>
-                <li>3 - consumable </li>
+                    </ul>
+                </li>
+                <li>3 - consumable
                     <ul>
                         <li>0 - food/medicine </li>
                         <li>1 - item generator </li>
                     <ul>
+                </li>
                 <li>4 - flyer/book </li>
                 <li>5 - container </li>
                 <li>6 - upgrade/constant code/automatic effect </li>
                 <li>7 - key </li>
                 <li>8 - trinket </li>
             </ul>
-        <li>4 - location (followed by 0 - safe zone, 1 - combat zone) </li>
+        </li>
+        <li>4 - location (followed by 0 - safe zone, 1 - combat zone)
             <ul>
-                <li>0 - nowhere </li>
+                <li>0 - nowhere
                     <ul>
                         <li>0 - test </li>
                         <li>1 - bingo demo </li>
                     <ul>
+                </li>
                 <li>1 - subdivision </li>
                 <li>2 - school </li>
                 <li>3 - commercial district </li>
@@ -193,18 +212,21 @@
                 <li>c - serpent city </li>
                 <li>d - firewall </li>
             </ul>
-        <li>5 - app </li>
+        </li>
+        <li>5 - app
             <ul>
                 <li>0 - stock </li>
                 <li>1 - optional </li>
             </ul>
-        <li>6 - activator </li>
+        </li>
+        <li>6 - activator
             <ul>
                 <li>0 - chest </li>
                 <li>1 - button/switch </li>
                 <li>2 - sign/lectern </li>
             </ul>
-        <li>7 - job/ </li>
+        </li>
+        <li>7 - job
             <ul>
                 <li>0aaaa - idle </li>
                 <li>1aaaa - armsman </li>
@@ -217,16 +239,23 @@
                 <li>a0000 - tycoon </li>
                 <li>b0000 - traffic control </li>
             </ul>
-        <li>8 - perk/attribute </li>
+        </li>
+        <li>8 - perk/attribute
             <ul>
                 <li>matches the skill section's job & attribute values </li>
             </ul>
-        <li>9 - keyword </li>
+        </li>
+        <li>9 - keyword
             <ul>
                 <li>0 - primitive </li>
                 <li>1 - status effect </li>
                 <li>2 - unsorted </li>
             </ul>
+        </li>
     </ul>
+    <br>
+    <h3>ref ID </h3>
+    <p>Every entity with the base.gd script has a ref ID. It identifies a specific instance of an entity. The MessageBus assigns them sequentially as integers starting at 0 during the <span class="code">_ready</div> stage of each entity. The earlier the ref ID, the older the entity. <br></p>
+    <br>
 </div>
 

src/views/bf-jobs.tpl

@@ -0,0 +1,7 @@
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1><a href="/gdd">blessfrey gdd</a> - jobs</h1>
+    <p>There are six standard jobs available to the player, but more can be discovered in the Abyss. <br></p>
+</div>
+

src/views/bf-keywords.tpl

@@ -0,0 +1,7 @@
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1><a href="/gdd">blessfrey gdd</a> - keywords</h1>
+    <p>Keywords are the building blocks of skills. <br></p>
+</div>
+

src/views/bf-mechanics.tpl

@@ -5,6 +5,8 @@
     <p>documenting Blessfrey game mechanics<br></p>
     <br>
     <ul>
-        <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<a href=/blessfrey-inspect>inspect menu</a></li>
+        % for i in [["inspect menu","blessfrey-inspect"],["jobs","blessfrey-jobs"],["keywords","blessfrey-keywords"],["skills","blessfrey-skills"]]:
+        <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<a href=/{{i[1]}}>{{i[0]}}</a></li>
+        % end
     </ul>
     </div></div>

src/views/bf-setting.tpl

@@ -0,0 +1,7 @@
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1><a href="/gdd">blessfrey gdd</a> - setting</h1>
+    <p>Blessfrey takes place in Lucrest, Nickajack, a small town unknowingly situated over an abyssal dungeon. <br></p>
+</div>
+

src/views/bf-skills.tpl

@@ -0,0 +1,7 @@
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1><a href="/gdd">blessfrey gdd</a> - skills</h1>
+    <p>Skills are individual powers usable by entities. They can take 8 at a time on their skillbar. They can be used for combat, puzzle-solving, and roleplaying. They are acquired through exploring. <br></p>
+</div>
+

src/views/bf-story.tpl

@@ -0,0 +1,7 @@
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1><a href="/gdd">blessfrey gdd</a> - story</h1>
+    <p>Helia explores the Abyss with her friends. <br></p>
+</div>
+

src/views/bf-terms.tpl

@@ -0,0 +1,6 @@
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1>blessfrey gdd - dictionary of terms</h1>
+	<p>Definitions of technical terms will go here. </p>
+</div>
+

src/views/bf-vibe.tpl

@@ -15,7 +15,7 @@
     </ul>
     <br>
     <p>The other goofiest place I've seen this juxtaposition pop up is that frame of some Avengers movie where the heroes are just hanging out at a normal restaurant. Some Quora guy claims the scene was popular, and I'll take his word for it. The overly dramatic, max stakes stuff isn't always as interesting as seeing what these fantasy people do during their down-time. My husband always thinks it's really funny to imagine the big bad of various series doing something really normal like eating ice cream. <br></p>
-    <img src="/static/img/gdd/avengers.jpeg" alt="(stolen screenshot of the Avengers eating at a casual restaurant in full costumes: fun fact #2815: Marvel's The Avengers movie caused shawarma sales to SKYROCKET nationwide)"><br>
+    <!--<img src="/static/img/gdd/avengers.jpeg" alt="(stolen screenshot of the Avengers eating at a casual restaurant in full costumes: fun fact #2815: Marvel's The Avengers movie caused shawarma sales to SKYROCKET nationwide)"><br>-->
     <br>
 <h2>socializing </h2>
     <p>I like those 'group of kids save the world' shows like Code Lyoko, Winx Club, and W.I.T.C.H and would like to emulate that balance of otherworld exploration and heroics against hanging out and maintaining responsibilities at school and home. <br></p>

src/views/credits.tpl

@@ -20,75 +20,87 @@ license: <a href="https://github.com/nathanhoad/godot_dialogue_manager/blob/main
 <h2>music </h2>
 background music: "straight" <br>
 Benjamin "Bensound" Tissot<br>
-https://www.bensound.com/royalty-free-music/track/straight<br>
+<a href="https://www.bensound.com/royalty-free-music/track/straight">https://www.bensound.com/royalty-free-music/track/straight</a><br>
 license: Creative Commons License<br>
 <br>
 background music: "energy" <br>
 Benjamin "Bensound" Tissot<br>
-https://www.bensound.com/royalty-free-music/track/energy<br>
+<a href="https://www.bensound.com/royalty-free-music/track/energy">https://www.bensound.com/royalty-free-music/track/energy</a><br>
 license: Creative Commons License<br>
 <br>
 <h2>sound effects </h2>
 background music: "save"<br>
 LokiF<br>
-https://opengameart.org/content/gui-sound-effects<br>
+<a href="https://opengameart.org/content/gui-sound-effects">https://opengameart.org/content/gui-sound-effects</a><br>
 license: Public Domain CC0<br>
 <br>
 door sound: "Abandoned Villa- Thailand! Door Knocker & Door Knocking Sound Effects"<br>
-freetousesounds https://freetousesounds.bandcamp.com/album/abandoned-villa-thailand-door-knocker-door-knocking-sound-effects<br>
+freetousesounds <br>
+<a href="https://freetousesounds.bandcamp.com/album/abandoned-villa-thailand-door-knocker-door-knocking-sound-effects">https://freetousesounds.bandcamp.com/album/abandoned-villa-thailand-door-knocker-door-knocking-sound-effects</a><br>
 license: Attribution 3.0 Unported (CC BY 3.0) <br>
 <br>
 click sound: "Click 1" from the UI SFX set<br>
 Kenney Vleugels<br>
-https://www.kenney.nl/assets/ui-audio<br>
+<a href="https://www.kenney.nl/assets/ui-audio">https://www.kenney.nl/assets/ui-audio</a><br>
 license: Public Domain CC0<br>
 <br>
 wrong sound: "Wrong 02"<br>
-https://www.noiseforfun.com/2012-sound-effects/wrong-02/<br>
+<a href="https://www.noiseforfun.com/2012-sound-effects/wrong-02/">https://www.noiseforfun.com/2012-sound-effects/wrong-02/</a><br>
 license: CC-BY-ND 3.0 Attribution license<br>
 <br>
 skill failure sound: "Negative" from the GUI Sound Effects set<br>
 LokiF<br>
-https://opengameart.org/content/gui-sound-effects<br>
+<a href="https://opengameart.org/content/gui-sound-effects">https://opengameart.org/content/gui-sound-effects</a><br>
 license: Public Domain CC0<br>
 <br>
 appraise sound: "Shimmer Glimmer Magic"<br>
 The Berklee College of Music <br>
 submitted to Open Game Art by qubodup<br>
-https://opengameart.org/content/shimmer-glitter-magic<br>
+<a href="https://opengameart.org/content/shimmer-glitter-magic">https://opengameart.org/content/shimmer-glitter-magic</a><br>
 license: CC-BY 3.0<br>
 <br>
 summon sound: "Elemental Spell"<br>
 Iwan "qubodup" Gabovitch<br>
-https://opengameart.org/content/elemental-spell<br>
+<a href="https://opengameart.org/content/elemental-spell">https://opengameart.org/content/elemental-spell</a><br>
 license: CC Attribution-ShareAlike 3.0 Unported<br>
-Copyright 2012 Iwan 'qubodup' Gabovitch http://qubodup.net qubodup@gmail.com | License: CC Attribution-ShareAlike 3.0 Unported http://creativecommons.org/licenses/by-sa/3.0/<br>
+Copyright 2012 Iwan 'qubodup' Gabovitch <a href="http://qubodup.net">http://qubodup.net</a> qubodup@gmail.com | License: <a href="http://creativecommons.org/licenses/by-sa/3.0/">CC Attribution-ShareAlike 3.0 Unported http://creativecommons.org/licenses/by-sa/3.0/</a><br>
 <br>
 bingo win sound: "Positive"<br>
 Lokif<br>
-https://opengameart.org/content/gui-sound-effects<br>
+<a href="https://opengameart.org/content/gui-sound-effects">https://opengameart.org/content/gui-sound-effects</a><br>
 license: Public Domain CC0<br>
 <br>
 <h2>fonts </h2>
 font: JFドットjiskan16 (JF Dot Jiskan16)<br>
 Sony Corp<br>
-http://jikasei.me/font/jf-dotfont/<br>
+<a href="http://jikasei.me/font/jf-dotfont/">http://jikasei.me/font/jf-dotfont/</a><br>
 license: Public Domain, stored in art/Fonts/Documentation/JF Dot Jiskan16/readme.txt<br>
 <br>
 font: pixel joy<br>
 chimchooree<br>
-https://fontstruct.com/fontstructions/show/1596262/pixel-joy <br>
+<a href="https://fontstruct.com/fontstructions/show/1596262/pixel-joy">https://fontstruct.com/fontstructions/show/1596262/pixel-joy</a> <br>
 license: Public Domain<br>
 <br>
 font: pixel sparrow<br>
 chimchooree<br>
+<a href="https://fontstruct.com/fontstructions/show/1491726/pixel-sparrow">https://fontstruct.com/fontstructions/show/1491726/pixel-sparrow</a> <br>
 license: Public Domain<br>
 <br>
-<h2>website </h3>
-business card texture (dev page) <br>
-photo: Free Texture Image <br>
-Pawel Czerwinski <br>
-https://unsplash.com/photos/dgJT71cXlC4 <br>
-license : https://unsplash.com/license <br>
+<h2>website </h2>
+<a href="https://bottlepy.org/docs/dev/">web framework: Bottle</a> <br>
+Marcel Hellkamp <br>
+license : <a href="https://bottlepy.org/docs/dev/">MIT License</a> <br>
+<br>
+Embedded applications are probably hosted through <a href="https://itch.io/">itch.io</a>. <br>
+<br>
+font: Mitochondria<br>
+Dino Raz<br>
+<a href="https://www.dafont.com/mitochondria.font">https://www.dafont.com/mitochondria.font</a> <br>
+license: 100% Free<br>
+<br>
+font: PF Ronda Seven<br>
+Yusuke Kamiyamane<br>
+<a href="https://p.yusukekamiyamane.com/fonts/">https://p.yusukekamiyamane.com/fonts/</a> <br>
+license: Free for any personal or commercial projects<br>
 </div>
 </div>

src/views/demo.tpl

@@ -1,91 +1,11 @@
 % rebase('frame.tpl')
     <div class="content-grid"> 
-        <div class="jump"><img src="/static/img/prom/BlessFREY_logo.png" alt="(link: BLESSFREY" class="logo">
-                <a href="#demo">play</a> • <a href="#system">system</a> • <a href="#story">story</a> • <a href="#characters">characters</a> • <a href="#info">info</a><br>
-        </div>
-
-        <div class="long">
-
-            <div class="demo" id="demo">
-            <div class="center"><h2>no-legs the cat</h2></div>
-
-            <div class="demo-game">
+        <div class="edition"><div class="center"><h1>no-legs the cat</h1></div></div>
+        <div class="demo">
             <iframe src="https://itch.io/embed-upload/6141043?color=333333" allowfullscreen="" width="1024" height="620" frameborder="0"><a href="https://chimchooree.itch.io/legless-the-cat">Play Legless the Cat on itch.io</a></iframe><br>
         </div>
-            <div class="demo-intro"><p>Poltics Cat lost his legs!! Push him around using WASD to find them. Eat any breakfasts you can find along the way! <br></p>
+        <div class="guide"><p>Poltics Cat lost his legs!! Push him around using WASD to find them. Eat any breakfasts you can find along the way! <br></p>
             <br>
             <p>(In case it isn't obvious, this is a crude maze constructed from the infamous 'godot heads'. Click the game to make it active then control kitty using W A S D or arrow keys to find all three breakfasts and his missing legs. His breakfast counter is in the top-right corner. After you win, you can continue to wander the maze aimlessly. Refresh the page to start over.) <br></p>
         </div>
     </div>
-
-                <div class="system" id="system">
-<div class="center"><h2>system</h2>
-<p>Blessfrey is a 2D action rpg with a dual-job system which will determine the skill pool from which you will build your skillbar. Your AI companions will have skillbars of their own to edit, so think in terms of teams in order to defeat bosses and solve puzzles. Barely any class progression decisions are permanent, so you can experiment and express your playstyle. <br></p>
-            <br>
-            <h3>jobs </h2>
-            <p>Blessfrey jobs are equivalent to RPG classes. Your first job is a permanent decision which you will make early in gameplay. You will be able to unlock the rest and more during gameplay as side gigs. You can only have one side gig at a time, but you can always swap it outside of combat areas. <br></p>
-            <br>
-            <p>Each job has its own skill pool. Each skill is assigned to a job trait (similar to an RPG attribute). Each character has a set number of trait points they can use to raise job traits and the effectiveness of their associated skills. You gain more trait points through leveling up, but traits can be raised or lowered at will. Experiment to find your specialization! <br></p>
-            <br>
-            <p>Your first job offers an exclusive trait called a job perk. It is not only tied to the effectiveness of related skills but also provides a constant buff. You can use the skills of your side gig's perk-related skills, but you cannot raise their effectiveness nor gain the buff. Perks are what distinguish characters from each other. <br></p>
-            <br>
-            <h3>skills</h2>
-            <p>Skills are individual powers that modify entities in the world of Blessfrey. They can launch fireballs, protect against incoming damage, spawn items or minions, teleport characters, reveal more UI details, and more. Your skillbar only has 8 skill slots and can only be edited in safe areas. The challenge comes from discovering effective strategies and synergies. Many of the same skills will be available to the player and enemy characters alike, so you must learn how to both use and counter each skill. <br></p>
-            <br>
-            <p>Skills are inspired by Magic: The Gathering keywords. There are a limited number of keywords that are quick to learn, but I will combine them with interesting conditions to create a wide arsenal of options. <br></p>
-            <br>
-            <p>Skills are gained during exploration. As you find new areas, encounter enemies, and interact with your surroundings, you will internalize those experiences as new skills. There are multiple paths to learning, so you are free to focus on your favorite parts of the game. <br></p>
-            <br>
-            <h3>team</h2>
-            <p>You will meet new friends and allies in the world, and they will join your team as customizable AI companions. Edit their skillbars to complement yours and keep their gear up-to-date. They will remember your responses and actions, so stay attentive to the flow of your relationship. There may be consequences - sweet or treacherous. <br></p></div>
-                </div>
-
-                <div class="story" id="story">
-<div class="center"><h2>story</h2>
-            <p>You play as Helia, a foreign transfer student living with her estranged uncle in a rural southern American town. You'll find an inexplicable amount of amenities, but none of them hold a candle to the haunted dungeon beneath the city. It's off-limits, but a dare's a dare. <br></p>
-            <br>
-            <p>There's a whole other world down there with multiple fantastical races. Once you've been down there once, it's hard to avoid getting tangled in its mysteries. <br></p>
-            <br>
-            <p>The town is strange in its own right. Lucrest flourished under it's remarkably young mayor and became an economic oasis in an expanse of farmlands and mining communities, drawing people from out-of-state to enjoy its attractions. Mayor Dia claims to have a magic wand that controls economy, and people aren't inclined to disagree. <br></p></div>
-                </div>
-
-                <div class="characters" id="characters">
-<div class="center"><h2>characters</h2>
-            <p><b><a href="/char/Helia">Helia</a></b> (?/?) - The player character! Almost every job is available to her. Where she comes from, combat training is unheard of, so she's a blank slate. Her reasons for suddenly moving countries by herself at the end of a schoolyear are filled with holes, so rumors spread ahead of her arrival. Barely anyone moves to Lucrest, though, so most people are excited to meet the new girl. <br></p>
-            <br>
-            <p><b><a href="/char/Angel">Angel</a></b> (Weaponmaster/Hacker) - Her real name's Miriam, but it sounds too frumpy, so please call her Angel. She is a naturally gifted with heavy blades and participates in a competitive swordsman league, but she usually comes across as friendly if not a little absent-minded. Computers interest her deeply, so she always has tinkering away with some new gadget or software. <br></p>
-            <br>
-            <p><b><a href="/char/Tessa">Tessa</a></b> (Tamer/Streetfighter) - She actually has a foreign background, too. Her mom and late father moved with her from France when she was really little. She loves the outdoors, animals, and fashion and is always sticking her nose in everyone's business. She's all fun all the time, so she doesn't always know where the boundary is between playful teasing and outright bullying. <br></p>
-            <br>
-            <p><b><a href="/char/Chloe">Chloe</a></b> (Disciple/Weaponmaster) - She's an orphan girl who was taken in by the church, and she spends a lot of her time serving there. She's reticent and deeply introverted but very sweet to those who get to know her. <br></p>
-            <br>
-            <p><b><a href="/char/Aries">Aries</a></b> (Weaponsmaster/Tamer) - Angel's twin brother, though he's her opposite in many ways. He's more attentive, but his frankness and disregard for etiquette makes him seem boorish. He also takes things with more gravity, fully committing himself to his studies and training. He prefers light weapons, light armor, and practical survival skills. <br></p>
-            <br>
-            <p><b><a href="/char/Night">Night</a></b> (Chemist/Weaponsmaster) - Despite not being much older than the other teens, he's completed a few years of apprenticeships at the leading research hospitals in the capital. The deterioration and death of his grandparents forced his return to close the final paperwork and figure out how to support his baby brother in the meantime. He runs a local pharmacy for now. <br></p>
-            <br>
-            <p><b><a href="/char/Rune">Rune</a></b> (?/?) - A startlingly tall and listless horned boy discovered in the local dungeon, surrounded by dinosaurs and other abyssal beasts. He doesn't trust people from the surface at first. <br></p>
-            <br>
-            <p>More characters are over on the <a href="/characters">characters page</a>. <br></p></div>
-                </div>
-
-                <div class="info" id="info">
-<div class="center"><h2>info</h2>
-            <p>Blessfrey is a singleplayer action RPG game that will be playable in at least Windows, Linux, and HTML5. I'm going to sell it on Steam and wherever else lets me list it. It's being developed by me (chimchooree) in Godot Engine with original writing and art, though I'll need help with music and SFX eventually. My husband also helps sometimes, especially with writing plug-ins for the engine.♡ The full credits are available on the <a href="/credits">credits page</a>.<br></p>
-            <br>
-            <h2>timeline</h2>
-            <p>Legless the Cat is the first demo. It has nothing to do with the game, but it's an important exercise for exporting and embedding an HTML5 game. I'd hate to make a sophisticated game over multiple years and be too inexperienced to actually share it with anyone. It also lets my kitty be in his own videogame! So cute. <br></p>
-            <br>
-            <p>As for the first real demo, I am currently creating a vertical slice of the game, focusing on a robust presentation of the skill system. This demo will be more of a tech demo than a game. It will feature 3 demo areas, and you will receive a bingo card directing you to try a smattering of what the full game will have to offer. <br></p>
-            <br>
-            <p>The next demo will demonstrate the game's faction system and AI, presenting more as a cutscene with unpredictable outcomes. A couple of different AI groups will wander around a map, intersect, then attack or aid according to affiliation. The faction system is rather complex, so I need to isolate it for testing purposes. <br></p>
-            <br>
-            <p>I think at this point, I will be able to put out a real demo. Demo #3 is going to be a level from the full game, introducing Rune and his multiphase boss fight. <br></p>
-            <br>
-            <p>If I can do that, I'll definitely be ready to make chunks of the game until the entire thing is complete. <br></p>
-            <br>
-            <p>No hard timeline on this, though! I've been working for years and finally am about ready to have something to show for it. Gamedev has been a deep learning experience, and I'm looking forward to sharing my results with you. <br></p></div>
-                </div>
-        </div>
-
-    </div>
-

src/views/diary.tpl

@@ -89,7 +89,7 @@
 
             <div class="diary-pages">
 
-    <h1>chimchooree's diary</h2>
+    <span class=title><h1>diary</h1></span>
                 % for s in snippets[page * limit:page * limit + limit]:
                 <div class="snippet">
                     <div class="snippet-title">

src/views/footer.tpl

@@ -1,5 +1,35 @@
 % import random
-<!--Footer-->
-    <footer>
-        <a href=/milestones>milestones</a> {{random.choice(['.','•','☆','★'])}} <a href=/gdd>game design document</a> {{random.choice(['.','•','☆','★'])}} <a href=/blessfrey-presskit>presskit</a> {{random.choice(['.','•','☆','★'])}} &#169; chimchooree 2020-{{year}}<br>
-    </footer>
+<footer><div class="footer-grid">
+    <div class="nav"><div class="heart"></div><div class="nav-grid">
+        <div class="nav-diary">
+            <a href="/diary">
+            <div class="navbutton"><img src="/static/img/nav/diary.png" alt="(link: diary)"></div>
+            <div class="navlink">diary</div>
+            </a>
+        </div>
+
+        <div class="nav-play">
+            <a href="/demo">
+            <div class="navbutton"><img src="/static/img/nav/play.png" alt="(link: play)"></div>
+            <div class="navlink">play</div>
+            </a>
+        </div>
+
+        <div class="nav-about">
+            <a href="/about">
+            <div class="navbutton"><img src="/static/img/nav/about.png" alt="(link: about)"></div>
+            <div class="navlink">about</div>
+            </a>
+        </div>
+
+        <div class="nav-dev">
+            <a href="/dev">
+            <div class="navbutton"><img src="/static/img/nav/dev.png" alt="(link: dev)"></div>
+            <div class="navlink">dev</div>
+            </a>
+        </div>
+    </div><div class="star"></div></div>
+    <div class="links">
+        .      •        . <a href=/milestones>milestones</a> {{random.choice(['.','•','☆','★'])}} <a href=/gdd>game design document</a> {{random.choice(['.','•','☆','★'])}} <a href=/blessfrey-presskit>presskit</a> {{random.choice(['.','•','☆','★'])}} &#169; chimchooree 2020-{{year}} ☆            ..   .  <br>
+    </div>
+</div></footer>

src/views/frame.tpl

@@ -8,9 +8,7 @@
 <body>
 
 <div class="grid">
-    <div class="top-row"> </div>
-
-% include('nav.tpl')
+    <div class="top">.            ★.        . <a href="/">blessfrey.me</a> ..             ☆           .</div>
 
 {{!base}}
 

src/views/header.tpl

@@ -1,5 +1,7 @@
     <title>{{title or 'blessfrey.me'}}</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="/static/css/all.css"/>
-    <link rel="stylesheet" type="text/css" href="/static/css/{{css}}.css"/>
+    <link rel="stylesheet" type="text/css" href="/static/css/all.css">
+    <link rel="stylesheet" type="text/css" href="/static/css/nav.css">
+    <link rel="stylesheet" type="text/css" href="/static/css/sidebar.css">
+    <link rel="stylesheet" type="text/css" href="/static/css/{{css}}.css">

src/views/me.tpl

@@ -4,11 +4,12 @@
         </div>
         <div class="content-right">
 
+        </div>
+    </div>
+
+
+<!--
             <div class="intro">
-                <h1>my page</h1>
-                <i>weeping may tarry for the night,
-                    but joy comes with the morning.</i><br>
-                <br>
                 <p><b>hello</b>, call me chimchooree. <br></p>
                 <br>
                 <p>I'm a developer from the USA and like to show off my projects here. I dabble in Python, Java, Angular, Godot Engine, and HTML5+CSS, but I sew clothes, draw, and write, too. <br></p>
@@ -53,6 +54,4 @@
             <div class="ocs">
                 <h2>characters</h2>
                 <p>View my characters from gamedev projects, creative writing, and elsewhere on the <a href="/characters">characters page</a><br></p>
-            </div>
-        </div>
-    </div>
+            </div>-->

src/views/milestones.tpl

@@ -23,6 +23,7 @@
     <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=unusual>basic obstructions - walls</span> </li>
     <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=unusual>basic AI - states, transitions</span> </li>
     <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=unusual>basic combat - life, spirit, attacks, skills, hitbox, aggro</span> </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=rare>base id, ref id</span> </li>
     <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=unusual>basic UI - start screen, controls screen, credits screen</span> </li>
     <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=unusual>basic audio - BGM, attack SFX, skill SFX, ambience</span> </li>
     <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=unusual>basic audio adjustments - volume slider, mute button</span> </li>
@@ -177,7 +178,7 @@
 <h2><span class=mundane>0.98 - involve other people (obv review after every milestone)</span> </h2>
 <ul>
     <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=mundane>feature: improvements based on suggestions</span> </li>
-    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=unusual>playtesting - diverse playtesters like colorblind, French keyboard users, different res/older computers, etc</span> </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=mundane>playtesting - diverse playtesters like colorblind, French keyboard users, different res/older computers, etc</span> </li>
     <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=mundane>maintain my community - forums, Discord, Twitter, any forums tied to store platforms, etc</span> </li>
     <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=mundane>press - YouTubers, Twitch streamers, bloggers, game journalists, local news, etc. I'll def reach out to Godot's showcase. </span> </li>
     <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=mundane>festivals/contests - local conventions, Godot con, Indie Games Expo, PAX, GDC. I'll probably do a booth/panel at the cons in my town because why not. </span> </li>
@@ -225,6 +226,9 @@
     <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=mundane>holidays</span> </li>
     <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=mundane>fishing minigame</span> </li>
     <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=mundane>hide UI for screenshots optionally</span> </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=mundane>support touchscreen for click</span> </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=mundane>consider on-screen keyboard for name/word input during gameplay for touchscreen, Steam Deck, etc</span> </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9;<span class=mundane>if I ever do full voiceacting, downloading and installing all the GB of voiceacting should be optional, and the game should work fine voiceless</span> </li>
 </ul>
 </div>
 

src/views/nav.tpl

@@ -1,47 +0,0 @@
-<!--Navigation Bar-->
-    <div class="nav-row"></div>
-    <div class="nav-grid">
-        <div class="nav-left"></div>
-        <div class="nav-home">
-            <a href="/">
-            <div class="navbutton"><img src="/static/img/nav/home.png" alt="(link: home)"></div>
-            <div class="navlink">home</div>
-            </a>
-        </div>
-
-        <div class="nav-blessfrey">
-            <a href="/demo">
-            <div class="navbutton"><img src="/static/img/nav/blessfrey.png" alt="(link: blessfrey demo)"></div>
-            <div class="navlink">game</div>
-            </a>
-        </div>
-
-        <div class="nav-fashion">
-            <a href="/fashion">
-            <div class="navbutton"><img src="/static/img/nav/fashion.png" alt="(link: fashion blog)"></div>
-            <div class="navlink">fashion</div>
-            </a>
-        </div>
-
-        <!--<div class="nav-art">
-            <a href="/art">
-            <div class="navbutton"><img src="/static/img/nav/art.png" alt="(link: art gallery)"></div>
-            <div class="navlink">art</div>
-            </a>
-        </div>-->
-
-        <div class="nav-diary">
-            <a href="/diary">
-            <div class="navbutton"><img src="/static/img/nav/diary.png" alt="(link: diary)"></div>
-            <div class="navlink">diary</div>
-            </a>
-        </div>
-
-        <div class="nav-about">
-            <a href="/me">
-            <div class="navbutton"><img src="/static/img/nav/about.png" alt="(link: about me)"></div>
-            <div class="navlink">about</div>
-            </a>
-        </div>
-        <div class="nav-right"></div>
-    </div>

src/views/tweaks.tpl

@@ -1,13 +0,0 @@
-% rebase('frame.tpl')
-    <div class="content-grid">
-<h1>blessfrey gdd - tweaks</h1>
-	<p>Don't forget the random ideas and concerns you have. Store them here! <br></p>
-    <br>
-    <ul>
-        <li>support touchscreen for click  </li>
-        <li>consider on-screen keyboard for name/word input during gameplay for touchscreen, Steam Deck, etc  </li>
-        <li>if I ever do full voiceacting, downloading and installing all the GB of voiceacting should be optional, and the game should work fine voiceless  </li>
-    </ul>
-    <br>
-</div>
-

src/views/website.tpl

@@ -0,0 +1,41 @@
+% import random
+% rebase('frame.tpl')
+    <div class="content-grid">
+<h1>website to-do </h1>
+    <p>It'd be cool to add a few more things... <br></p>
+    <br>
+<h2>general </h2>
+<ul>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; site map </li>
+</ul>
+<h2>play page </h2>
+<ul>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; link to previous demos </li>
+</ul>
+<h2>about page </h2>
+<ul>    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; some cute presentation of links. maybe nice promo art with table of contents over a long page. click on what you want or scroll around. I had one of those old myspace css boxes with links, but I can't imagine that working on mobile, etc. </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; artwork: 6 panels of Helia with each job </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; screenshots and diagrams of skills, skill library, skillbar </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; screenshots and diagrams of team window, team member editing window </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; slideshow, 3-panel comic, etc of gist of the story with a sentence or two describing each part. </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; cute character section with image links - panels, animated sprites, something
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; info section - genre, list platforms, engine, dev. link to presskit, credits, game design document. </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; timeline/roadmap - list all the beats. link to milestones. </li>
+</ul>
+<h2>dev page </h2>
+<ul>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; make it like Barbie's old room on her website - hover over stuff, it animates, opens up new window or takes you to new page. </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; add picture links for GitLab, itch, Twitter, Discord, Bible verse, OCs, artwork, etc. </li>
+</ul>
+<h2>toolbox </h2>
+<ul>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; <a href="https://cssgrid-generator.netlify.app/">CSS Grid Generator</a> for easy CSS grid design and coding </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; <a href="https://validator.w3.org/nu/">Nu Html Checker</a> for HTML checking </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; <a href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> for CSS checking </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; <a href="https://caniuse.com/">caniuse</a> for checking browser compatibility </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; <a href="https://webaim.org/resources/contrastchecker/">WebAIM contrast checker</a> for font/background contrast colors </li>
+    <li class="latest">{{random.choice(['.','•','☆','★'])}}&#9; <a href="https://www.fontsquirrel.com/tools/webfont-generator">Font Squirrel Webfont Generator</a> for creating @font-face kits </li>
+
+</ul>
+    </div>
+