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
-    article
+    .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
-                        - var x = 0;
+                            span.month= data.full_month
-                        - for (x; x < data.pages.length; x++)
+                            - var x = 0;
-                            -var page = data.pages[x];
+                            - for (x; x < data.pages.length; x++)
-                            a(href='/'+archives[index].year+"/"+data.month+"/"+page.metadata.slug)= page.metadata.title
+                                -var page = data.pages[x];
-                            br
+                                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
+      style.
+        header { background: url(!{default_bg}); background-size: cover; }
+      header
+        nav
+          .left
+            a.logo-link(href='/') 
+              img#logo(src='/assets/images/global/the-logo.svg')
+          .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
       .container#main-content
         block main-content
-      <!-- Hacky Brown, but it's here so parallax images can be set dynamically -->
+      footer
-      style.
+        .inner
-        header::before { background: url(!{default_bg}); background-size: cover; }
+          a(href='/archives') Archives
-      header
+          br
-        .menu
+          | © 2020 Fipamo by PV 
-          a(href='/') 
-            img#logo(src='/assets/images/global/the-logo.svg')
-            br
-          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
       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,22 +2,21 @@ extends frame
 
 block main-content
   section
-      article
+    .page-title
-        .page
+      span= title
-          p !{content}
+  article
-          .meta
+    .page
-            | !{meta.who}
+      p !{content}
-            
+      .meta
-            | dropped this 
+        | !{meta.who}
-            
+        
-            | !{meta.when}
+        | dropped this 
-            br
+        
+        | !{meta.when}
+        br
 
-            | tags: 
+        | tags: 
-            - var i = 0;
+        - var i = 0;
-            - for (i; i < meta.tags.length; i++)
+        - for (i; i < meta.tags.length; i++)
-              - var tag = meta.tags[i]
+          - var tag = meta.tags[i]
-                a(href="/tags/"+tag.slug)= tag.label
+            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
-      article
+    .page-title
-        .page
+      span= title
-            - var index = 0;			
+  article
-            - for ( index; index < tag_list.length; index++)
+    .page
-                a(href='/'+tag_list[index].path+'/'+tag_list[index].slug) !{tag_list[index].title}
+        - var index = 0;			
-                br
+        - for ( index; index < tag_list.length; index++)
-
+            a(href='/'+tag_list[index].path+'/'+tag_list[index].slug) !{tag_list[index].title}
-  footer
+            br
-     | © 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
+    color $primary
-    border-top 5px $primary solid
+    .left,.right
-    span
+      width 50%
-        margin 0
+      display inline-block
-        position absolute
+      vertical-align top
-        top 50%
+    .left
-        left 50%
+      a.logo-link
-        transform translate(-50%, -50%)
+        border-bottom none
-        font-weight: 600
+        margin 0 0 20px 0 
-        padding 15px 20px 10px 20px
+        display block
-        font-size 3em
+        #logo
-        line-height 1
+          width 50px
-        color $white
+          border-bottom none
-        text-drop-shadow($black, .9, 1px, 1px, 1px)
+    .right
-    .menu
+      text-align right
-      padding 20px
-      width: 200px
-      text-align: left
-      color $primary
       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 
+  footer 
-      background $black
+    background $white - 5%
-      padding 10px
+    padding 10px
-      color $white
+    color $primary
-      text-align center
+    font-size 0.8em
-      font-size 0.8em
+    font-weight 600
-      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
-    p
+      .index, .page
-      font 400 0.8em/1.3em $bodyTypeSans
+        margin 0
-    .recent, .featured
+        p
-      width 100% !important
+          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