back to parceljs for compiling, updated package.json scripts

.gitignore

@@ -1,8 +1,8 @@
 node_modules
+.parcel-cache
 dist
 .nova
 .cache
 .DS_Store
 assets
 vendor
-config.codekit3

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "fipamo-theme-kit",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "parcel": "^2.2.1",
+    "sass": "^1.49.0"
+  },
+  "scripts": {
+    "watch": "npx parcel watch $npm_package_config_theme_path/styles/base.sass --dist-dir $npm_package_config_theme_dir/assets/css --public-url /assets/css & npx parcel watch $npm_package_config_theme_path/com/Start.js --dist-dir $npm_package_config_theme_dir/assets/scripts --public-url /assets/scripts",
+    "build": "sass src/styles:public/assets/css & npx parcel build src/com/Start.js --dist-dir public/assets/scripts --public-url /assets/scripts",
+    "dev": "php -S localhost:$npm_package_config_port"
+  },
+  "license": "UNLICENSED",
+  "config": {
+    "port": "1414",
+    "current_theme": "fipamo-default",
+    "theme_path": "src/themes/theme-$npm_package_config_current_theme",
+    "theme_dir": "src/themes/theme-$npm_package_config_current_theme/$npm_package_config_current_theme"
+  },
+  "devDependencies": {
+    "@parcel/transformer-sass": "^2.2.1"
+  }
+}

src/themes/theme-fipamo-default/com/Base.js

@@ -1,18 +1,18 @@
 export default class Base {
-	//--------------------------
+  //--------------------------
-	// constructor
+  // constructor
-	//--------------------------
+  //--------------------------
-	constructor() {
+  constructor() {
-		this.start();
+    this.start();
-	}
+  }
-	start() {
+  start() {
-		console.log('Connected like F.E.');
+    console.log("Connected like F.E.");
-	}
+  }
-	//--------------------------
+  //--------------------------
-	// methods
+  // methods
-	//--------------------------
+  //--------------------------
 
-	//--------------------------
+  //--------------------------
-	// event handlers
+  // event handlers
-	//--------------------------
+  //--------------------------
 }

src/themes/theme-fipamo-default/styles/_colors.sass

@@ -0,0 +1,6 @@
+$primary: #151d26
+$secondary : #FC6399
+$tertiary : #e8c33e
+$highlight : #7ED07E
+$white : #ebe5d4
+$black : #32302f

src/themes/theme-fipamo-default/styles/_colors.styl

@@ -1,5 +0,0 @@
-$primary = #151d26;
-$secondary = #FC6399;
-$highlight = #7ED07E;
-$white = #ebe5d4;
-$black = #32302f;

src/themes/theme-fipamo-default/styles/_forms.sass

@@ -0,0 +1,67 @@
+form
+    display: inline-block
+    a
+        color: $primary
+    p 
+        background: $tertiary
+        color: $primary
+        padding: 5px
+        display: block
+        border-radius: 5px
+        text-align: left
+
+input[type=email], input[type=password], input[type=text]
+    border: 0
+    border-radius: 5px
+    padding: 5px
+    margin: 10px 5px 0 0
+    font: 18px $baseType
+    display: inline-block
+    background: $primary
+    color: $tertiary
+
+textarea
+    border: 0
+    border-radius: 3px
+    color: $white
+    font: 15px $baseType
+    background: $primary
+
+button, input[type=submit]
+    background: $highlight
+    color: $primary
+    font: 20px $baseType
+    border-radius: 5px
+    position: relative
+    cursor: pointer
+    border: 0
+    padding: 10px 0 5px 0
+    @include object_transitions(.3s)
+
+select
+    font: 14px $baseType
+    border: 1px solid $secondary
+    -webkit-appearance: none
+    -moz-appearance: none
+    appearance: none
+    color: $primary
+
+::-webkit-input-placeholder
+    font: 25px $baseType
+    color: $white
+
+:-moz-placeholder
+    /* Firefox 18- */
+    font: 25px $baseType
+    color: $white
+
+::-moz-placeholder
+    /* Firefox 19+ */
+    font: 15px $baseType
+    color: $white
+
+:-ms-input-placeholder
+    font: 25px $baseType
+    color: $white
+
+

src/themes/theme-fipamo-default/styles/_forms.styl

@@ -1,58 +0,0 @@
-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 $secondary
-    color $white
-    font 14px $bodyTypeSans
-    border-radius 5px
-    position relative
-    cursor pointer
-    border 0
-    padding 5px 5px 0 5px
-    object-transitions(.3s)
-    &:hover
-        background lighten($secondary, 5)
-
-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/themes/theme-fipamo-default/styles/_mixins.sass

@@ -0,0 +1,16 @@
+@mixin text-drop-shadow($rgb_value, $opacity, $offsetX, $offsetY, $blur)
+	text-shadow: $offsetX $offsetY $blur rgba($rgb_value, $opacity)
+  
+@mixin object-transitions($rate)
+	-moz-transition: all $rate linear
+	-webkit-transition: all $rate linear
+	-o-transition: all $rate linear
+	transition: all $rate linear
+	
+
+@mixin background-opacity($rgb_value, $opacity)
+	background: rgba($rgb_value, $opacity)
+
+@mixin custom-header($weight, $size, $line_height, $color)
+	font: $weight $size/$line_height $bodyTypeSans
+	color: $color

src/themes/theme-fipamo-default/styles/_mixins.styl

@@ -1,16 +0,0 @@
-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);
-
-custom-header(weight, size, line-height, color)
-	font: weight size/line-height $bodyTypeSans
-	color: color

src/themes/theme-fipamo-default/styles/_normalize.sass

@@ -0,0 +1,197 @@
+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
+    line-height: 1em
+
+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: $primary
+    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/themes/theme-fipamo-default/styles/_normalize.styl

@@ -1,197 +0,0 @@
-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
-    line-height 1em
-
-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/themes/theme-fipamo-default/styles/_structure.sass

@@ -0,0 +1,184 @@
+html, body
+  font: 400 1em $baseType
+  height: 100%
+body
+  background: $primary
+a
+  text-decoration: none
+  color: $tertiary
+  border-bottom: 1px $secondary solid
+  &:hover
+    color: $secondary
+    border-bottom: 1px $tertiary solid
+
+#main
+  width: 100%
+  height: 100%
+  background: $primary
+  header
+    width: 100%
+    height: 100%
+    background-size: cover
+    background: $black
+    border-top: 2px $tertiary solid
+    #cover
+      position: relative
+      height: 100%
+      width: 100%
+    .that-logo
+      width: 300px
+      height: 300px
+      display: block
+      position: absolute
+      z-index: 1000
+      margin: -50px 0 0 -50px
+      cursor: pointer
+  .wrapper
+    width: 100%
+    max-width: 1024px
+    min-height: 400px
+    margin: 0 auto
+    article.index
+      padding: 20px
+      div
+        span
+          color: #fff
+          display: inline-block
+          vertical-align: top
+          width: 15%
+          font-family: $monoType
+          font-size: .8em
+        div
+          width: 80%
+          color: $white
+          font-weight: 800
+          font-size: 2em
+          margin: -5px 0 0 0
+          padding: 0
+          display: inline-block
+          overflow: hidden
+          p
+            padding: 0
+            margin: 0
+      #recent-links
+        a
+          font-size: 2em
+          font-weight: 800
+          display: inline-block
+          margin: -8px 0 10px 0
+      label
+        color: $secondary
+        font-weight: 800
+        font-size: 3.5em
+        display: block
+        margin: 60px 0 20px 15%
+    article.page
+      width: 100%
+      #title
+        background: $secondary
+        color: $tertiary
+        padding: 40px
+        font-size: 3em
+        font-weight: 800
+        
+      #page_desc
+        padding: 40px
+        color: $secondary
+        font-size: 1.5em
+      img
+        width: 90%
+        margin: 0 auto
+        display: block
+    article#archive
+      .archive-item
+        width: 50%
+        display: inline-block
+        vertical-align: top
+        margin-bottom: 100px
+        span.year 
+          width: 100%
+          font-size: 2em
+        .archive-month
+          margin: 0 0 20px 0
+          font-size: 1em
+          span.month
+            width: 100%
+            font-size: 1.5em
+            display: block
+          a 
+            font-size: .8em
+            font-weight: 400
+        
+      
+  footer
+    background: $secondary
+    overflow: hidden
+    .inner
+      width: 80%
+      max-width: 964px
+      margin: 0 auto
+      padding: 20px
+      color: $white
+      
+//Responsive
+@media only screen and (max-width: 768px)
+  #main
+    .wrapper
+      article.index
+        div
+          span
+            font-size: .64em
+            width: 14%
+          div
+            font-size: 1.7em
+        #recent-links
+          a
+            font-size: 1.7em
+        label
+          font-size: 3em
+          margin: 50px 0 20px 14%
+      article.page
+        #title
+          font-size: 2.5em
+        #page_desc
+          padding: 30px
+          color: $secondary
+          font-size: 1.4em
+        img
+          width: 100%
+          margin: 0 auto
+          display: block
+        
+          
+  @media only screen and (max-width: 480px)
+    #main
+      .wrapper
+        article.index
+          div
+            span
+              font-size: .64em
+              width: 100%
+            div
+              font-size: 1.6em
+              width: 100%
+          #recent-links
+            a
+              font-size: 1.5em
+          label
+            font-size: 3em
+            margin: 40px 0 20px 0
+        article.page
+          #title
+            font-size: 1.8em
+          #page_desc
+            padding: 30px
+            color: $secondary
+            font-size: 1.2em
+          img
+            width: 100%
+            margin: 0 auto
+            display: block
+        
+    
+
+  

src/themes/theme-fipamo-default/styles/_structure.styl

@@ -1,228 +0,0 @@
-html
-    margin 0
-    padding 0
-    width 100%
-    height 100%
-    overflow hidden
-    font 400 1.2em/1.4em $bodyTypeSans
-
-body
-    background $white
-    margin 0
-    padding 0
-    perspective 1px
-    transform-style preserve-3d
-    height 100%
-    width 100%
-    overflow-y scroll
-    overflow-x hidden
-
-a
-  color $primary
-  text-decoration none
-  border-bottom 1px solid $highlight
-  object-transitions(.2s)
-  &:hover
-    border-bottom 1px solid $secondary
-
-code
-  background $black
-  color $highlight
-  border-radius 3px
-  padding 3px
-
-pre
-  background $black
-  color $highlight
-  border-radius 3px
-  padding 3px
-  code
-    color $secondary
-    background none
-
-svg.icons
-  width 25px
-  fill $white
-
-header
-  background $primary
-  height 90%
-  width 100%
-  border-top $white 3px solid
-  nav
-    width 97%
-    margin 10px auto
-    color $primary
-    .left,.right
-      width 50%
-      display inline-block
-      vertical-align top
-    .left
-      a.logo-link
-        border-bottom none
-        margin 0 0 20px 0 
-        display block
-        #logo
-          width 50px
-          border-bottom none
-    .right
-      text-align right
-      a.menu-link
-        background $secondary
-        margin-bottom 4px
-        padding 3px
-        border-radius 2px
-        display inline-block
-        font-size 0.8em
-        border-bottom none
-        &:hover
-          background $secondary + 50%
-      
-
-
-.container
-    z-index 2
-    background $white
-    line-height 30px
-    font-weight lighter
-    width 100%
-    //padding 40px
-    color $black
-    article
-      position relative
-      width: 80%
-      height 80%
-      max-width 840px
-      //min-height 500px
-      background $white 
-      vertical-align top
-      color $black
-      margin 0 auto
-      //.index, .page
-        //margin 30px
-      .index, .page
-        padding 0 0 15px 0
-        img 
-          display block
-          width 100%
-        h1
-          color $primary
-        p
-          font 300 1.25em/1.6em $bodyTypeSans
-        //meta datea for page
-        .meta
-            font 500 0.8em/1.3em $bodyTypeSans
-            padding 5px 0 0 0
-            border-top 1px solid $primary
-            background $white + 10%
-            a
-              font-size: 0.8em
-              font-weight 400
-        //archive styling
-        .archive-item
-          padding 15px 0 20px 0
-          span.year
-            font-size 1.5em
-            font-weight 500
-            padding 5px
-            display block
-            color $primary
-          .archive-month
-            display inline-block
-            vertical-align top
-            width 30%
-            padding 5px
-            span.month
-              color $secondary
-              font-size 1.5em
-              font-weight 300
-              padding 5px
-              display block
-    section
-      padding 0 0 20px 0
-      background $primary
-      a
-        color $white
-      .index-lists, .page-title
-        max-width 840px
-        span
-          custom-header(600, 2em, 1.5, $white)
-        width 80%
-        margin 0 auto
-        padding 20px 0 0 0
-        .recent, .featured
-          display inline-block
-          width 50%
-          vertical-align top
-        label 
-          background $black
-          color $white
-          font-size 1.5em
-          line-height 1.3
-          
-   
-        
-          
-  footer 
-    background $white - 5%
-    padding 10px
-    color $primary
-    font-size 0.8em
-    font-weight 600
-    height 100px
-    .inner
-      margin 20px auto
-      width 80%
-      max-width 840px
-      a
-        color $secondary
-       
-
-/**
--------------------------------
--- Responsive
--------------------------------
-**/
-
-@media only screen and (max-width: 640px)
-  header
-    nav
-        width 98%
-    span
-      font-size 2.5em
-  .container
-    article
-      .index, .page
-        .archive-item
-          .archive-month
-            width 45%
-
-@media only screen and (max-width: 480px)
-  header
-    nav
-        width 96%
-  .container
-    article
-      .index, .page
-        margin 0
-        p
-          font 300 1em/1.6em $bodyTypeSans
-    section 
-      .index-lists
-        .recent, .featured
-          width 100% !important
-
-
-@media only screen and (max-width: 375px)
-    header
-      nav
-        width 95%
-    .container
-      article
-        .index, .page
-          margin 0
-          p
-            font 300 0.9em/1.7em $bodyTypeSans
-          .archive-item
-            .archive-month
-              width 95%

src/themes/theme-fipamo-default/styles/_typography.sass

@@ -0,0 +1,18 @@
+$baseType: Helvetica, Arial, sans-serif
+$monoType: "Lucida Console", Monaco, monospace
+
+h1, h2, h3
+    color: $white
+
+h1 
+    font-size: 2em
+    font-weight: 400
+
+h2
+    font-size: 1.75em
+    font-weight: 400
+
+h3 
+    font-size: 1.5em
+    font-weight: 300
+

src/themes/theme-fipamo-default/styles/_typography.styl

@@ -1,4 +0,0 @@
-$bodyTypeSans = Helvetica, Arial, sans-serif;
-$bodyTypeSerif = Georgia, Times, serif;
-    
-

src/themes/theme-fipamo-default/styles/base.sass

@@ -0,0 +1,10 @@
+@use "sass:color"
+
+//type
+
+@import "_colors"
+@import "_mixins"
+@import "_typography"
+@import "_normalize"
+@import "_forms"
+@import "_structure"

src/themes/theme-fipamo-default/styles/base.styl

@@ -1,48 +0,0 @@
-
-/**
--------------------------------
--- Typography
--------------------------------
-**/
-
-@import "_typography"
-
-/**
--------------------------------
--- Colors
--------------------------------
-**/
-
-@import "_colors"
-
-/**
--------------------------------
--- Mixins
--------------------------------
-**/
-
-@import '_mixins'
-
-/**
--------------------------------
--- Normalize
--------------------------------
-**/
-@import '_normalize'
-
-/**
--------------------------------
--- Main Structure
--------------------------------
-**/
-
-@import "_structure"
-
-/**
--------------------------------
--- Forms
--------------------------------
-**/
-
-@import '_forms'
-