cleaned up base theme structure, color tweaks

package.json

@@ -5,7 +5,7 @@
   "description": "Theming tool pack for Fipamo",
   "repository": "https://code.playvicio.us/Are0h/Fipamo",
   "scripts": {
-    "dev-default-theme": "stylus -w -m -o src/themes/theme-fipamo-default/default-light/assets/css src/themes/theme-fipamo-default/styles/base.styl & parcel watch src/themes/theme-fipamo-default/com/Start.mjs --out-dir src/themes/theme-fipamo-default/default-light/assets/scripts --out-file start.min.js & parcel src/themes/theme-fipamo-default/fipamo-default/*.pug"
+    "dev-default-theme": "stylus -w -m -o src/themes/theme-fipamo-default/fipamo-default/assets/css src/themes/theme-fipamo-default/styles/base.styl & parcel watch src/themes/theme-fipamo-default/com/Start.mjs --out-dir src/themes/theme-fipamo-default/fipamo-default/assets/scripts --out-file start.min.js & parcel src/themes/theme-fipamo-default/fipamo-default/*.pug"
   },
   "engines": {
     "node": ">=10.16.0"

pug.config.js

@@ -10,7 +10,7 @@ module.exports = {
 		default_bg: '/assets/images/global/default-bg.jpg',
 		default_avi: '/assets/images/global/default-avi.png',
 		content:
-			"The path of the <a href='#'>righteous</a> man is beset on ALL sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.",
+			"<img src='/assets/images/global/default-avi.png'><br>The path of the <a href='#'>righteous</a> man is beset on ALL sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.",
 		bucket: [{ item: 'one' }, { item: 'two' }, { item: 'three' }],
 		tag_list: [{ title: 'Swaggy Disgust', slug: 'swaggy-disgust', path: '2020/06' }],
 		meta: {

src/themes/theme-fipamo-default/fipamo-default/archive.pug

@@ -2,20 +2,21 @@ extends frame
 
 block main-content
   section
+    .page-title
+        span Archive
   article
+    .page
         - var index = 0;			
         - for ( index; index < archives.length; index++)
             .archive-item
-                h1= archives[index].year
+                span.year= archives[index].year
                 - var i = 0;
                 - for (i; i < archives[index].year_data.length; i++)
                     - var data = archives[index].year_data[i];
-                        p= data.full_month
+                        .archive-month
+                            span.month= data.full_month
                             - var x = 0;
                             - for (x; x < data.pages.length; x++)
                                 -var page = data.pages[x];
                                 a(href='/'+archives[index].year+"/"+data.month+"/"+page.metadata.slug)= page.metadata.title
                                 br
-        
-  footer
-     | © 2020 Fipamo by PV 

src/themes/theme-fipamo-default/fipamo-default/frame.pug

@@ -10,22 +10,27 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
         meta(name="twitter:image" content=image)
         link(rel='stylesheet', href='/assets/css/base.css', type='text/css')
     body
-      .container#main-content
-        block main-content
-      <!-- Hacky Brown, but it's here so parallax images can be set dynamically -->
       style.
-        header::before { background: url(!{default_bg}); background-size: cover; }
+        header { background: url(!{default_bg}); background-size: cover; }
       header
-        .menu
+        nav
-          a(href='/') 
+          .left
+            a.logo-link(href='/') 
               img#logo(src='/assets/images/global/the-logo.svg')
-            br
+          .right
             if menu
               - var index = 0;			
               - for ( index; index < menu.length; index++)
                 a.menu-link(href="/"+menu[index].path+"/"+menu[index].slug)= menu[index].slug
                 br
-        span= welcome_message
+          
+          
+        //span= welcome_message
+      .container#main-content
+        block main-content
+      footer
+        .inner
+          a(href='/archives') Archives
+          br
+          | © 2020 Fipamo by PV 
       script(src='/assets/scripts/start.min.js' type="text/javascript")
-              
-          

src/themes/theme-fipamo-default/fipamo-default/index.pug

@@ -3,7 +3,10 @@ extends frame
 block main-content
   article
     .index
+      h2= title
       p !{content}
+  section
+    .index-lists
       .recent
         span Recent
         br
@@ -20,9 +23,5 @@ block main-content
         - for ( index; index < featured_posts.length; index++)
           a(href="/"+featured_posts[index].metadata.path+"/"+featured_posts[index].metadata.slug)= featured_posts[index].metadata.title
           br
-      br
+      
-      br
-      a(href='/archives') The Archives
-  footer
-    | © 2020 Fipamo by PV 
         

src/themes/theme-fipamo-default/fipamo-default/page.pug

@@ -2,6 +2,8 @@ extends frame
 
 block main-content
   section
+    .page-title
+      span= title
   article
     .page
       p !{content}
@@ -18,6 +20,3 @@ block main-content
         - for (i; i < meta.tags.length; i++)
           - var tag = meta.tags[i]
             a(href="/tags/"+tag.slug)= tag.label
-
-  footer
-     | © 2020 Fipamo by PV 

src/themes/theme-fipamo-default/fipamo-default/tags.pug

@@ -2,12 +2,11 @@ extends frame
 
 block main-content
   section
+    .page-title
+      span= title
   article
     .page
         - var index = 0;			
         - for ( index; index < tag_list.length; index++)
             a(href='/'+tag_list[index].path+'/'+tag_list[index].slug) !{tag_list[index].title}
             br
-
-  footer
-     | © 2020 Fipamo by PV 

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

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

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

@@ -4,10 +4,10 @@ html
     width 100%
     height 100%
     overflow hidden
-    font 400 1.3em/1.1em $bodyTypeSans
+    font 400 1.2em/1.4em $bodyTypeSans
 
 body
-    color white
+    background $white
     margin 0
     padding 0
     perspective 1px
@@ -30,64 +30,43 @@ svg.icons
   fill $white
 
 header
-    box-sizing border-box
+  background $primary
-    min-height 100vh
+  height 90%
-    position relative
+  width 100%
-    transform-style inherit
+  border-top $white 3px solid
-    width 100vw
+  nav
-    //text-align center
+    width 97%
-    color $white
+    margin 10px auto
-    border-bottom 1px $black solid
-    border-top 5px $primary solid
-    span
-        margin 0
-        position absolute
-        top 50%
-        left 50%
-        transform translate(-50%, -50%)
-        font-weight: 600
-        padding 15px 20px 10px 20px
-        font-size 3em
-        line-height 1
-        color $white
-        text-drop-shadow($black, .9, 1px, 1px, 1px)
-    .menu
-      padding 20px
-      width: 200px
-      text-align: left
     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 3px
+        border-radius 2px
         display inline-block
         font-size 0.8em
+        border-bottom none
         &:hover
-          background $secondary + 20%
+          background $secondary + 50%
-      #logo
+      
-        width 30px
-header,header:before
-    background 50% 50% / cover
 
-header::before
-        content ""
-        position absolute
-        top 0
-        left 0
-        right 0
-        bottom 0
-        display block
-        background-size cover
-        transform-origin center center 0
-        transform translateZ(-1px) scale(2)
-        z-index -1
-        min-height 100vh
 
 .container
     z-index 2
-    position absolute
-    top 100vh
     background $white
     line-height 30px
     font-weight lighter
@@ -99,16 +78,62 @@ header::before
       width: 80%
       height 80%
       max-width 840px
-      min-height 500px
+      //min-height 500px
       background $white 
       vertical-align top
       color $black
       margin 0 auto
-      span
+      //.index, .page
-        custom-header(600, 2em, 1.5, $primary)
+        //margin 30px
       .index, .page
-        margin 30px
+        padding 0 0 15px 0
-      .index
+        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%
+            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%
@@ -118,26 +143,23 @@ header::before
           color $white
           font-size 1.5em
           line-height 1.3
-          .meta
+          
-            label
+   
-              font-size: 0.8em
-            a
-              font-size: 0.8em
-    section 
-      color $white
-      .archive-item
-        display inline-block
-        width 30%
-        vertical-align top
         
           
   footer 
-      background $black
+    background $white - 5%
     padding 10px
-      color $white
+    color $primary
-      text-align center
     font-size 0.8em
     font-weight 600
+    height 100px
+    .inner
+      margin 20px auto
+      width 80%
+      max-width 840px
+      a
+        color $secondary
        
 
 /**
@@ -148,23 +170,34 @@ header::before
 
 @media only screen and (max-width: 640px)
   header
+    .menu
+        width 98%
     span
       font-size 2.5em
 
 @media only screen and (max-width: 480px)
   header
-    span
+    .menu
-      font-size 2em
+        width 96%
-      width 60%
+  .container
-  .index
+    article
+      .index, .page
+        margin 0
         p
-      font 400 0.8em/1.3em $bodyTypeSans
+          font 300 1em/1.6em $bodyTypeSans
+    section 
+      .index-lists
         .recent, .featured
           width 100% !important
 
 
 @media only screen and (max-width: 375px)
     header
-      span
+      .menu
-        font-size 1.5em
+        width 95%
-        width 75%
+    .container
+      article
+        .index, .page
+          margin 0
+          p
+            font 300 0.9em/1.7em $bodyTypeSans