getting the initial stuff in there until I sort out the defaults

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.cache
+.DS_Store
+assets

frame.pug

@@ -0,0 +1,19 @@
+doctype html
+html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
+    head
+        title= title
+        meta(name='viewport', content='width=device-width, initial-scale=1.0')
+        meta(name="keywords" content="creative technoglogist, graphic design, web development, designer developer, social thought, political discussion, music producer, creative culture, black creative, black geek")
+        meta(name="description" content="The home site of Creative Technologist, music maker, and social philoshoper, Ro. Ha, I know. Me too.")
+        meta(http-equiv="content-type", content="text/html; charset=utf-8")
+        meta(property="og:image" content=image)
+        meta(name="twitter:image" content=image)
+        link(rel='stylesheet', href='/assets/css/base.css', type='text/css')
+    body
+      #loader
+        i.fa.fa-cog.fa-spin.fa-4x.fa-fw
+      .main-container#main-content
+        block main-content
+      script(src='/assets/scripts/start.min.js' type="text/javascript")
+              
+          

index.pug

@@ -0,0 +1,35 @@
+extends frame
+
+block main-content
+  section#index-content
+      header.columns#header
+        #float-bg
+            img(src='/assets/images/eye-beamz.png')
+        #header-one.column
+        #header-two.column
+            label#the-title 
+                a(href="/") thetwelfthhouse
+            #the-intro
+                | I'm Ro. I am a 
+                a(href='/work') freelancer
+                |, 
+                a(href='/blog/page/1') thinker
+                |, 
+                a(href='https://playvicious.social' target="_blank") masto admin
+                |, 
+                a(href='/fipamo') a pack rat
+                |,  and I'm kinda trying to 
+                a(href="https://www.patreon.com/Are0h" target="_blank") save the world. 
+      #index-display
+        #recent-title.index-block
+          | "Boards do not hit back" © Bruce Lee
+          //svg(viewBox="0 0 20 20" class="icons")
+            use(xlink:href='/assets/images/sprite.svg#entypo-air')
+        #index-content
+          div !{content_index}
+          span Shit. I think I just made a theme kit for Fipamo
+          br
+          | Not perfect, but it's workable... 
+          -var count = bucket[2].item
+            p= count
+        

package.json

@@ -0,0 +1,11 @@
+
+
+{"scripts":{
+  "dev": "stylus -w -m -o assets/css src/styles/base.styl & parcel watch src/com/Start.jsx --out-dir assets/scripts --out-file start.min.js & parcel index.pug page.pug"
+},
+  "devDependencies": {
+    "cssnano": "^4.1.10",
+    "pug": "^2.0.4",
+    "stylus": "^0.54.7"
+  }
+}

page.pug

@@ -0,0 +1,10 @@
+extends frame
+
+block main-content
+  section#index-content
+      #index-display
+        #recent-title.index-block
+          
+        #index-content
+          div !{content_page}
+          span YAAAAAAAHS KHAALEEEEESI

pug.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    locals: {
+        title: "Fipamo Theme Kit",
+        content_index: "This is some page content... for your broke ass",
+        content_page: "This is some page content... for your broke ass",
+        bucket: [{item: "one"}, {item: "two"}, {item: "three"}]
+    }
+  };

src/com/Base.jsx

@@ -0,0 +1,25 @@
+
+
+export default class Base {
+    //--------------------------
+    // constructor
+    //--------------------------
+    
+    //TODO: Flip to unified structure defined in BMG, brah
+    constructor() {
+        
+        this.start();        
+    }
+    start() {
+       console.log("I knoooooooow you see it... ");
+    }
+    //--------------------------
+    // methods
+    //--------------------------
+    
+
+    //--------------------------
+    // event handlers
+    //--------------------------
+
+}

src/com/Start.jsx

@@ -0,0 +1,6 @@
+import Base from './Base.jsx'
+
+document.addEventListener('DOMContentLoaded', function() {
+
+    var base = new Base();
+}, false);

src/styles/base.styl

@@ -0,0 +1,95 @@
+/**
+-------------------------------
+-- Bulma
+-------------------------------
+**/
+//@import '/../../node_modules/bulma.styl/bulma.styl'
+//@import "../../../../node_modules/bulma.styl/stylus/utilities/_all"
+//@import "../../../../node_modules/bulma.styl/stylus/grid/columns"
+    
+/**
+-------------------------------
+-- Typography
+-------------------------------
+**/
+
+@import "main/_typography"
+
+/**
+-------------------------------
+-- Colors
+-------------------------------
+**/
+
+@import "main/_colors"
+
+/**
+-------------------------------
+-- Mixins
+-------------------------------
+**/
+
+@import 'main/_mixins'
+
+/**
+-------------------------------
+-- Normalize
+-------------------------------
+**/
+@import 'main/_normalize'
+
+/**
+-------------------------------
+-- Main Structure
+-------------------------------
+**/
+
+@import "main/_structure"
+
+/**
+-------------------------------
+-- Index
+-------------------------------
+**/
+
+@import "main/_index"
+
+/**
+-------------------------------
+-- Fipamo
+-------------------------------
+**/
+
+@import "main/_fipamo"
+
+/**
+-------------------------------
+-- Folio
+-------------------------------
+**/
+
+@import 'main/_folio'
+
+/**
+-------------------------------
+-- Admin
+-------------------------------
+**/
+
+@import 'main/_admin'
+
+/**
+-------------------------------
+-- Forms
+-------------------------------
+**/
+
+@import 'main/_forms'
+
+/**
+-------------------------------
+-- Blog
+-------------------------------
+**/
+
+@import 'main/_blog'

src/styles/main/_admin.styl

@@ -0,0 +1,197 @@
+#admin-index-content
+    width 100%
+    max-width 1024px
+    margin 0 auto
+            
+    #admin-index-display
+        padding 20px
+        width 100%
+        max-width 1024px
+        z-index 10
+        position relative
+        #admin-login
+            width 300px
+        #admin-index-title
+            color $white
+            font 400 2em $titleType
+            vertical-align top
+        .admin-menu-main
+            .admin-nav
+                span
+                    display inline-block
+                    padding 0 0 0 5px
+        .index-block
+            width 50%
+            display inline-block
+            vertical-align top
+            margin-bottom 50px
+            
+        #blog-edit
+            label
+                font 600 1em $titleType
+                color $white
+            textarea#entry_title
+                width 100%
+                background none
+                color $tertiary
+                font 500 2em $titleType
+            textarea#entry_text
+                width 100%
+                height 600px
+                padding 10px   
+
+        #blog-meta
+            label
+                font 600 1em $titleType
+                color $white
+            input, button
+                width 100%
+            input
+                color $secondary
+                background $black
+            #featured-click
+                display none
+
+#blog-index-content
+    width 100%
+    max-width 1024px
+    margin 0 auto
+    #blog-hub-display
+        #blog-hub-title
+            font 400 2em $titleType
+            color $white
+
+#saved-index-content
+    width 100%
+    max-width 1024px
+    margin 0 auto
+    #saved-hub-display
+        #saved-hub-title, #saved-hub-main
+            label
+                font 400 2em $titleType
+                color $white
+            textarea
+                width 90%
+            button
+                padding 5px
+
+                
+                
+#post-edit-content
+    width 100%
+    max-width 1024px
+    margin 0 auto
+    header#header
+        #header-one
+            #blog-edit
+                margin 100px 0 0 0
+                position relative
+                label
+                    font 600 1em $titleType
+                    color $white
+                    display block
+                #entry_title
+                    width 90%
+                    background none
+                    font 400 2em $titleType
+                    color $tertiary
+                #entry_text
+                    width 90%
+                    height 500px
+                    padding 10px
+                pre
+                    background $black
+                    code
+                        white-space pre-wrap
+                        color $tertiary
+        #header-two
+            label
+                font 600 1em $titleType
+                color $white
+            #featured-image-drop
+                border-radius 3px
+                border 1px dashed $white
+                width 100%
+                font 600 .5em $titleType
+                height 100px
+                text-align center
+                vertical-align middle
+                line-height 100px
+                overflow hidden
+                img
+                    width 100%
+            
+            #blog-meta
+                margin 100px 0 0 0
+                position relative
+                #featured-click
+                    display none
+                #entry_tags, button
+                    width 100%
+            
+
+.folio-project-form
+    display inline-block
+    width 56%
+
+    input[type=email], input[type=password], input[type=text], select
+        width 400px
+    select
+        margin: 10px 0 0 0
+
+    textarea
+        width 400px
+        height 133px
+
+.folio-hub
+    padding 20px
+
+    span
+        margin 10px 10px 0 0
+    .btn-add-project span
+        font 20px $bodyType
+        margin: -35px 0 0 40px;
+        display block
+        height: 50px
+
+    .project-list
+        width 95%
+        span.drag-handle
+            padding: 10px;
+            color $tertiary
+            cursor pointer
+        .project-item
+            width: 100%;
+            display: inline-block
+            background lightness($primary, 20%)
+            padding: 5px
+            margin-bottom 10px
+            border-radius: 5px;
+            object-transitions(.3s)
+        .project-item:hover
+            background lightness($primary, 30%)
+
+.upload-list
+    color lightness($primary, 80%)
+    display inline-block
+    vertical-align top
+    width 260px
+    height 330px
+    margin 45px 0 0
+
+.thumb
+    height 50px
+    overflow hidden
+    border-radius 3px
+    margin 10px 5px 0 0
+
+.upload-drop
+    width 400px
+    height 70px
+    background $form-background
+    color lightness($primary, 80%)
+    text-align center
+    padding 40px 0 0
+    font-size 12px
+    text-transform uppercase
+    border-radius 3px

src/styles/main/_blog.styl

@@ -0,0 +1,65 @@
+#blog-content
+    
+    #blog-display
+        #blog-list
+            .blog-entry
+                display inline-block
+                height 500px;
+                width 50%
+                background-size cover
+                background $black
+                position relative
+                text-align: center;
+                vertical-align: middle;
+                line-height: 250px;
+                label
+                    background $secondary
+                    padding 5px
+                    border-radius 3px
+                    
+                    
+#post-content
+    width 100%
+    margin -10px 0 0 0
+    #header-post
+        width 100%
+        min-height 350px
+        background $black
+        position relative
+        padding 0
+        margin 0
+        img
+            padding 0
+            margin 0
+            position relative
+            display block
+            width 100%
+        #header-one
+            position relative
+            width 80%
+            margin 0 auto
+            padding 30px 0 0 0
+            
+            label#the-title a
+                font 500 2em $titleType
+                width 97px
+                height 115px
+                color $secondary
+                text-decoration none
+                display block
+                word-break: break-all
+                margin 10px  0 0 10px
+            span#post-title
+                font 200 4.5em/1em $titleType
+                color $white
+                margin 20px  0 0 10px
+                padding 20px 0 80px 0
+                display block
+                
+    
+    #post-display
+        color $tertiary
+        width 80%
+        margin 50px auto
+        font 400 1.5em $bodyType
+        padding-bottom 50px

src/styles/main/_colors.styl

@@ -0,0 +1,8 @@
+$primary = #2B8CAF;
+$secondary = #EB6B99;
+$tertiary = #EBDFCE;
+$highlight = #BAF273;
+$white = #eee;
+$black = #32302f;
+
+//Bulma overrides

src/styles/main/_fipamo.styl

@@ -0,0 +1,71 @@
+#bm-content
+    width 100%
+    max-width 1024px
+    margin 0 auto
+    #header-one, #header-two
+        label#the-title 
+            a(href="/") thetwelfthhouse
+    #header-two
+        font 400 1.5em $bodyType
+    #bookmark-display
+        padding 0
+        .bookmark-list
+            .bookmark-entry
+              background lightness($primary, 15%)
+              width 50%
+              height 500px
+              background-size cover
+              overflow hidden
+              display inline-block
+              vertical-align top
+              //border-radius 3px
+              padding 10px      
+              .bookmark-info
+                display flex
+                align-items center
+                justify-content center
+                width 100%
+                height 100%
+                label
+                  display block
+                  font-size .5em
+                  padding 10px
+                  background $primary
+                  border-radius 5px
+            #paginate-control
+                width 100%
+                height 300px
+                background lightness($primary, 30%)
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                
+                #paginate
+
+                    margin 0 auto 
+                    a, label
+                        display inline-block
+                        vertical-align top
+                    label
+                        padding 5px
+                        color $tertiary
+                        font-size 2.2em
+                    a
+                        padding 20px
+                        margin-top 4px
+                        
+
+/**
+-------------------------------
+-- Responsive
+-------------------------------
+**/
+
+@media only screen and (max-width: 768px)
+  #bm-content
+    #bookmark-display
+        .bookmark-list
+            .bookmark-entry
+                width 100%
+        
+

src/styles/main/_folio.styl

@@ -0,0 +1,96 @@
+#work-content
+  width 100%
+  max-width 1024px
+  margin 0 auto
+  #header
+      #header-two
+          p
+              font 400 1.5em $bodyType
+              span
+                  color $secondary
+  #work-display
+    padding 0
+    margin 0 0 40px 0
+    opacity 0
+    
+            
+   #work-list
+    
+        .work-item
+            width 50%
+            height 300px
+            display inline-block
+            vertical-align top
+            background-size cover
+            background-color $tertiary
+            color $tertiary
+            span
+                font 600 .7em $titleType
+                
+   #work-contact
+        #contact-form
+            opacity 1
+            label 
+                font 600 .8em $titleType
+                color $highlight
+                margin 0 0 15px 0
+                display block
+            #request-form
+              input[type=email], input[type=password], input[type=text]
+                  width 100%
+                  margin 0 10px 10px 0
+
+              select
+                  width 100%
+                  margin-bottom: 10px;
+
+              textarea
+                width: 100%
+        #contact-info
+            label#request-status
+                font 600 .8em $titleType
+                color $highlight
+                margin 0 0 15px 0
+                display block
+                text-transform uppercase
+            p
+                font 400 1em $bodyType
+                color $tertiary
+                i 
+                    color $highlight
+                    
+            
+#project-content
+    width 100%
+    max-width 1024px
+    margin 0 auto
+    #project-display
+        padding: 0 20px 20px 20px
+    
+        #project-info
+            span
+                font 400 2em $titleType
+                color $white
+        #project-desc
+            font 300 1.2em $bodyType
+            color $tertiary
+    #project-images
+      margin 10px 0 0 0
+      opacity 1
+      .folio-image
+        width 100%
+        margin 0 0 50px 0
+        opacity 0
+  
+/**
+-------------------------------
+-- Responsive
+-------------------------------
+**/
+
+@media screen and (max-width: 768px)
+    #work-content
+        #work-list
+            .work-item
+                width 100%
+    

src/styles/main/_forms.styl

@@ -0,0 +1,54 @@
+form
+    display inline-block
+
+input[type=email], input[type=password], input[type=text]
+    border 0
+    border-radius 5px
+    padding 5px
+    margin 10px 5px 0 0
+    font 15px 'RobotoMono'
+    display inline-block
+
+textarea
+    border 0
+    border-radius 3px
+    color $type02
+    font 15px 'RobotoMono'
+
+button, input[type=submit]
+    background $highlight
+    color $primary
+    font 14px 'RobotoMono'
+    border-radius 5px
+    position relative
+    cursor pointer
+    border 0
+
+select
+    font 14px 'RobotoMono'
+    border 1px solid $secondary
+    -webkit-appearance none
+    -moz-appearance none
+    appearance none
+    // background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #000;
+    color $primary
+
+::-webkit-input-placeholder
+    font 14px 'RobotoMono'
+    color lightness($black, 50%)
+
+:-moz-placeholder
+    /* Firefox 18- */
+    font 14px 'RobotoMono'
+    color lightness($black, 50%)
+
+::-moz-placeholder
+    /* Firefox 19+ */
+    font 14px 'RobotoMono'
+    color lightness($black, 50%)
+
+:-ms-input-placeholder
+    font 14px 'RobotoMono'
+    color lightness($black, 50%)
+
+

src/styles/main/_index.styl

@@ -0,0 +1,25 @@
+#index-content
+      width 100%
+      max-width 1024px
+      margin 0 auto;
+    header
+        #header-one
+        #header-two
+            #the-intro
+                margin 80px 0 0 0
+    #index-display
+      padding 20px
+      width 100%
+      max-width 1024px
+      font-size 1em
+      z-index 10
+      position relative
+      #recent-title
+        color $white
+        font 400 2em $titleType
+        vertical-align top
+      .index-block
+          width 50%
+          display inline-block
+          vertical-align top
+          margin-bottom 50px

src/styles/main/_mixins.styl

@@ -0,0 +1,12 @@
+text-drop-shadow(rgb-value, opacity, offsetX, offsetY, blur)
+  text-shadow: offsetX offsetY blur rgba(rgb-value, opacity);
+
+
+object-transitions(rate)
+	-moz-transition:all rate linear;
+	-webkit-transition:all rate linear;
+	-o-transition:all rate linear;
+	transition:all rate linear;
+
+background-opacity(rgb-value, opacity)
+  background: rgba(rgb-value, opacity);

src/styles/main/_normalize.styl

@@ -0,0 +1,196 @@
+html
+    line-height 1.15
+    -ms-text-size-adjust 100%
+    -webkit-text-size-adjust 100%
+
+body
+    margin 0
+
+article,
+aside,
+footer,
+header,
+nav,
+section
+    display block
+
+h1
+    font-size 2em
+    margin 0.67em 0
+
+figcaption,
+figure,
+main
+    display block
+
+figure
+    margin 1em 40px
+
+hr
+    box-sizing content-box
+    height 0
+    overflow visible
+
+pre
+    font-family monospace, monospace
+    font-size 1em
+a
+    background-color transparent
+    -webkit-text-decoration-skip objects
+
+a:active,
+a:hover
+    outline-width 0
+
+abbr[title]
+    border-bottom none
+    text-decoration underline
+    text-decoration underline dotted
+
+b,
+strong
+    font-weight inherit
+    font-weight bolder
+
+code,
+kbd,
+samp
+    font-family monospace, monospace
+    font-size 1em
+
+dfn
+    font-style italic
+
+mark
+    background-color #ff0
+    color #000
+
+small
+    font-size 80%
+
+sub,
+sup
+    font-size 60%
+    line-height 0
+    position relative
+    vertical-align baseline
+
+sub
+    bottom -0.25em
+
+sup
+    top -0.55em
+    background lightness($primary, 80%)
+    color $primary
+    border-radius: 2px;
+    padding 0 2px 0 2px
+    margin: 0 2px 0 0
+
+audio,
+video
+    display inline-block
+
+audio
+    &:not([controls])
+        display none
+        height 0
+
+img
+    border-style none
+
+svg
+    &:not(:root)
+        overflow hidden
+
+button,
+input,
+optgroup,
+select,
+textarea
+    font-family sans-serif
+    font-size 100%
+    line-height 1.15
+    margin 0
+
+button,
+input
+    overflow visible
+
+button,
+select
+    text-transform none
+
+button, html [type="button"],
+[type="reset"],
+[type="submit"]
+    -webkit-appearance button
+
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner,
+button::-moz-focus-inner
+    border-style none
+    padding 0
+
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring,
+button:-moz-focusring
+    outline 1px dotted ButtonText
+
+fieldset
+    border 1px solid #c0c0c0
+    margin 0 2px
+    padding 0.35em 0.625em 0.75em
+
+legend
+    box-sizing border-box
+    color inherit
+    display table
+    max-width 100%
+    padding 0
+    white-space normal
+
+progress
+    display inline-block
+    vertical-align baseline
+
+textarea
+    overflow auto
+
+[type="checkbox"],
+[type="radio"]
+    box-sizing border-box
+    padding 0
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button
+    height auto
+
+[type="search"]
+    -webkit-appearance textfield
+    outline-offset -2px
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration
+    -webkit-appearance none
+
+::-webkit-file-upload-button
+    -webkit-appearance button
+    font inherit
+
+details,
+menu
+    display block
+
+summary
+    display list-item
+
+canvas
+    display inline-block
+
+template
+    display none
+
+[hidden]
+    display none

src/styles/main/_structure.styl

@@ -0,0 +1,163 @@
+html
+  background url('../images/bg-teal-pattern.png')
+  font 300  1em $bodyType
+  color $tertiary
+
+a
+  font 300 1em $titleType
+  color $highlight
+  text-decoration underline
+  object-transitions(.1s)
+
+a:hover
+    color lightness($highlight, 90%)
+    background $primary
+
+svg.icons
+  width 20px
+  fill $secondary
+  
+h1, h2, h3, h4, h5, h6
+    color $secondary !important
+    font-weight 600 !important
+
+#loader
+  position fixed
+  z-index 2000
+  height 100%
+  width 100%
+  display flex
+  align-items center
+  justify-content center
+  i
+    color $tertiary 
+    
+.blog-container
+  width 100%
+.main-container
+  margin 0 auto
+  z-index 10
+  position relative
+  section
+      header
+        width 100%
+        max-width 1024px
+        #float-bg
+          background url('../images/bg-teal-pattern.png')
+          position absolute
+          z-index 5
+          //height 100%
+          //width 100%
+          //display flex
+          //align-items center
+          //justify-content center
+          isolation isolate
+          opacity 0
+          left 20%
+          img
+            width 250px
+            mix-blend-mode multiply
+
+
+
+        position relative
+        width 100%
+        font-size 1em
+        padding 20px
+        opacity 0
+        color $tertiary
+
+        #header-one, #header-two
+            z-index 10
+            position relative
+            label#the-title a
+                font 500 2em $titleType
+                width 97px
+                height 100px;
+                color $secondary
+                text-decoration none
+                display block
+                word-break: break-all;
+            
+
+        
+
+/**
+-------------------------------
+-- Responsive
+-------------------------------
+**/
+
+@media only screen and (max-width: 640px)
+  .main-container
+    .content
+      #the-intro
+        font-size: 31px;
+        line-height: 35px;
+
+@media only screen and (max-width: 480px)
+  .main-container
+    .content
+      #the-intro
+        font-size: 25px;
+        line-height: 33px;
+      #index-display
+          span, a
+             font 400 1.2em $bodyType
+
+
+@media only screen and (max-width: 375px)
+    
+  .main-container
+    .header
+      width 90%
+      .header-desc
+        h1
+          line-height: 1rem;
+          font-size: 3.3rem;
+        span a
+            color $white
+            width 250px
+            font-weight 300
+            display inline-block
+            word-break: break-all;
+            font 300 7em/1em $titleType
+            text-decoration none
+            margin 0 0 50px 0
+        #the-intro
+            color $secondary
+            opacity 0
+            font 400 1.8em $titleType
+            display inline-block
+            width 95%
+        #item-intro
+            width 95%
+            label
+              font-size 2em
+
+    .content
+      #the-intro
+        font-size: 24px;
+        line-height: 33px;
+      #index-display 
+        label
+          font-size 7em
+        #recent-work, #recent-blog
+            float none
+            display block
+            margin 0 auto
+            text-align left
+            padding-bottom 30px
+
+@media only screen and (max-width: 320px)
+  .main-container
+    .header
+      .header-desc
+        h1
+          line-height: 1rem;
+          font-size: 2.9rem;
+
+    .content
+      #the-intro
+        font-size: 19px;
+        line-height: 28px;

src/styles/main/_typography.styl

@@ -0,0 +1,70 @@
+@font-face
+    font-weight 400
+    font-style normal
+    font-family 'AlteHaasGrotesk'
+    src url('fonts/app/AlteHaasGroteskRegular.eot'),
+    url('fonts/app/AlteHaasGroteskRegular.eot?#iefix') format('embedded-opentype'), 
+    url('fonts/app/AlteHaasGroteskRegular.woff2') format('woff2'), 
+    url('fonts/app/AlteHaasGroteskRegular.woff') format('woff'), 
+    url('fonts/app/AlteHaasGroteskRegular.ttf') format('truetype'), 
+    url('fonts/app/AlteHaasGroteskRegular.svg?#AlteHaasGrotesk') format('svg')
+
+@font-face
+    font-weight 600
+    font-style normal
+    font-family 'AlteHaasGrotesk'
+    src url('fonts/app/AlteHaasGroteskBold.eot'),
+    url('fonts/app/AlteHaasGroteskBold.eot?#iefix') format('embedded-opentype'), 
+    url('fonts/app/AlteHaasGroteskBold.woff2') format('woff2'), 
+    url('fonts/app/AlteHaasGroteskBold.woff') format('woff'), 
+    url('fonts/app/AlteHaasGroteskBold.ttf') format('truetype'), 
+    url('fonts/app/AlteHaasGroteskBold.svg?#AlteHaasGrotesk') format('svg')
+
+@font-face
+    font-family 'RobotoMono'
+    src url('fonts/app/RobotoMono-Thin.eot'),
+    url('fonts/app/RobotoMono-Thin.eot?#iefix') format('embedded-opentype'), 
+    url('fonts/app/RobotoMono-Thin.woff2') format('woff2'), 
+    url('fonts/app/RobotoMono-Thin.woff') format('woff'), 
+    url('fonts/app/RobotoMono-Thin.ttf') format('truetype'), 
+    url('fonts/app/RobotoMono-Thin.svg?#RobotoMono') format('svg');
+    font-weight 200;
+    font-style normal;
+    
+@font-face
+    font-family 'RobotoMono'
+    src url('fonts/app/RobotoMono-Light.eot'),
+    url('fonts/app/RobotoMono-Light.eot?#iefix') format('embedded-opentype'), 
+    url('fonts/app/RobotoMono-Light.woff2') format('woff2'), 
+    url('fonts/app/RobotoMono-Light.woff') format('woff'), 
+    url('fonts/app/RobotoMono-Light.ttf') format('truetype'), 
+    url('fonts/app/RobotoMono-Light.svg?#RobotoMono') format('svg');
+    font-weight 300;
+    font-style normal;
+
+@font-face
+    font-family 'RobotoMono'
+    src url('fonts/app/RobotoMono-Regular.eot'),
+    url('fonts/app/RobotoMono-Regular.eot?#iefix') format('embedded-opentype'), 
+    url('fonts/app/RobotoMono-Regular.woff2') format('woff2'), 
+    url('fonts/app/RobotoMono-Regular.woff') format('woff'), 
+    url('fonts/app/RobotoMono-Regular.ttf') format('truetype'), 
+    url('fonts/app/RobotoMono-Regular.svg?#RobotoMono') format('svg');
+    font-weight 400;
+    font-style normal;
+    
+@font-face
+    font-family 'RobotoMono'
+    src url('fonts/app/RobotoMono-Bold.eot'),
+    url('fonts/app/RobotoMono-Bold.eot?#iefix') format('embedded-opentype'), 
+    url('fonts/app/RobotoMono-Bold.woff2') format('woff2'), 
+    url('fonts/app/RobotoMono-Bold.woff') format('woff'), 
+    url('fonts/app/RobotoMono-Bold.ttf') format('truetype'), 
+    url('fonts/app/RobotoMono-Bold.svg?#RobotoMono') format('svg');
+    font-weight 600;
+    font-style normal;
+
+
+$titleType = 'RobotoMono', Helvetica, Arial, sans-serif;
+$bodyType = 'AlteHaasGrotesk', Helvetica, Arial, sans-serif;
+

theme.json

@@ -0,0 +1,7 @@
+{
+    "name": "default-light",
+    "display-name":"Fipamo Oh Won Light",
+    "author": "Are0h",
+    "description": "The most dangerous default theme in the known universe.",
+    "version": "1.0.0"
+}