finazling overall index design, added pug assets folder to ignore, added menu and recent post array to local variables for testing and set up

.gitignore

@@ -2,3 +2,4 @@ node_modules
 dist
 .cache
 .DS_Store
+assets

package.json

@@ -12,7 +12,6 @@
   "node": ">=10.16.0"
 },
   "devDependencies": {
-    "cssnano": "^4.1.10",
     "pug": "^2.0.4",
     "stylus": "^0.54.7"
   }

pug.config.js

@@ -1,11 +1,12 @@
 module.exports = {
 	locals: {
 		title: 'This is Fipamo',
+		welcome_message: 'Hey there',
 		keywords:
 			'creative technoglogist, graphic design, web development, designer developer, social thought, political discussion, music producer, creative culture, black creative, black geek',
 		description:
 			'The home site of Creative Technologist, music maker, and social philoshoper, Ro. Ha, I know. Me too.',
-		base_path: '',
+		base_path: '/src/front/',
 		default_bg: '/assets/images/global/default-bg.jpg',
 		default_avi: '/assets/images/global/default-avi.png',
 		content_index:
@@ -31,6 +32,38 @@ module.exports = {
 				slug: 'page-three',
 				uuid: 'b60d6843-e957-43ac-8425-65145142236d'
 			}
+		],
+		recent_posts: [
+			{
+				title: 'Teyonah Parris',
+				slug: 'teyonah-parris',
+				feature: 'content/blog-images/2018/11/chi-raq.jpg',
+				created: '2018 Nov 11th'
+			},
+			{
+				title: 'Aja Naomi-King',
+				slug: 'aja-naomi-king',
+				feature: 'content/blog-images/2018/11/chi-raq.jpg',
+				created: '2018 Nov 11th'
+			},
+			{
+				title: 'Sonequa Martin-Green',
+				slug: 'sonequa-martin-green',
+				feature: 'content/blog-images/2018/11/chi-raq.jpg',
+				created: '2018 Nov 11th'
+			},
+			{
+				title: 'Jameela Jamil',
+				slug: 'jameela-jamil',
+				feature: 'content/blog-images/2018/11/chi-raq.jpg',
+				created: '2018 Nov 11th'
+			},
+			{
+				title: "I'm so behind",
+				slug: 'im-so-behind',
+				feature: 'content/blog-images/2018/11/chi-raq.jpg',
+				created: '2018 Nov 11th'
+			}
 		]
 	}
 };

src/front/assets/css/base.css

@@ -227,7 +227,7 @@ html {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  font: 400 1.1em/1.1em Helvetica, Arial, sans-serif;
+  font: 400 1.3em/1.1em Helvetica, Arial, sans-serif;
 }
 body {
   color: #fff;
@@ -240,6 +240,18 @@ body {
   overflow-y: scroll;
   overflow-x: hidden;
 }
+a {
+  color: #7ed07e;
+  text-decoration: none;
+  border-bottom: 1px solid #d5cfba;
+  -moz-transition: all 0.2s linear;
+  -webkit-transition: all 0.2s linear;
+  -o-transition: all 0.2s linear;
+  transition: all 0.2s linear;
+}
+a:hover {
+  border-bottom: 1px solid #fc6399;
+}
 svg.icons {
   width: 25px;
   fill: #d5cfba;
@@ -250,20 +262,21 @@ header {
   position: relative;
   transform-style: inherit;
   width: 100vw;
-  text-align: center;
   color: #d5cfba;
-  border-bottom: 1px #7ed07e solid;
+  border-bottom: 1px #d5cfba solid;
   border-top: 5px #7ed07e solid;
 }
-header h1 {
+header span {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: #34495e;
+  font-weight: 100;
-  border-radius: 40px;
   padding: 15px 20px 10px 20px;
+  font-size: 14em;
+  line-height: 1;
+  color: #7ed07e;
 }
 header .menu {
   width: 100%;
@@ -298,30 +311,37 @@ header::before {
   width: 100%;
   color: #32302f;
 }
-.container article .right,
+.container article {
-.container article .left {
-  width: 49.9%;
-  display: inline-flex;
-  vertical-align: top;
-  justify-content: center;
-  background: #32302f;
-}
-.container article .left {
-  border-right: 1px #7ed07e solid;
-}
-.container article .inner {
   position: relative;
   width: 80%;
   height: 80%;
-  margin: 30px 0 30px 0;
+  max-width: 840px;
+  min-height: 500px;
   background: #32302f;
   vertical-align: top;
   color: #d5cfba;
+  margin: 0 auto;
 }
-.container article .inner span {
+.container article span {
-  font: 600 1.5em/2 Helvetica, Arial, sans-serif;
+  font: 600 2em/1.5 Helvetica, Arial, sans-serif;
   color: #fc6399;
 }
+.container article .index {
+  margin: 30px;
+}
+.container article .index label {
+  background: #32302f;
+  color: #d5cfba;
+  font-size: 1.5em;
+  line-height: 1.3;
+}
+.container article .index a {
+  font-size: 1.5em;
+  line-height: 1.3;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  font-weight: 400;
+}
 .container section {
   color: #d5cfba;
 }

src/front/assets/scripts/start.min.js

@@ -198,7 +198,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "52397" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "64438" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

src/front/frame.pug

@@ -20,7 +20,7 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
           | LINKZ
           br
           | LINKZ
-        h1 Hello There
+        span= welcome_message
       script(src='/assets/scripts/start.min.js' type="text/javascript")
               
           

src/front/index.pug

@@ -2,16 +2,19 @@ extends frame
 
 block main-content
   article
-    .left
+    .index
-      .inner
       span= title
-        div !{content_index}
+      p !{content_index}
-    .right
-      .inner
       span Recent
-      //button
+      br
-        svg(viewBox="0 0 20 20" class="icons")
+      - var index = 0;			
-          use(xlink:href='/assets/images/global/sprite.svg#entypo-plus' data-action='')
+      - for ( index; index < recent_posts.length; index++)
+        a(href="/"+recent_posts[index].slug)= recent_posts[index].title
+        label= recent_posts[index].created
+        br
+        br
+      a(href='/archives') Post Archive
+      label The whole dirty.
   footer
     | © 2020 Fipamo by PV 
         

src/styles/_structure.styl

@@ -4,7 +4,7 @@ html
     width 100%
     height 100%
     overflow hidden
-    font 400 1.1em/1.1em $bodyTypeSans
+    font 400 1.3em/1.1em $bodyTypeSans
 
 body
     color white
@@ -17,6 +17,14 @@ body
     overflow-y scroll
     overflow-x hidden
 
+a
+  color $highlight
+  text-decoration none
+  border-bottom 1px solid $white
+  object-transitions(.2s)
+  &:hover
+    border-bottom 1px solid $secondary
+
 svg.icons
   width 25px
   fill $white
@@ -27,19 +35,21 @@ header
     position relative
     transform-style inherit
     width 100vw
-    text-align center
+    //text-align center
     color $white
-    border-bottom 1px $highlight solid
+    border-bottom 1px $white solid
     border-top 5px $highlight solid
-    h1
+    span
         margin 0
         position absolute
         top 50%
         left 50%
         transform translate(-50%, -50%)
-        background $primary
+        font-weight: 100
-        border-radius 40px
         padding 15px 20px 10px 20px
+        font-size 14em
+        line-height 1
+        color $highlight
     .menu
       width: 100%
       text-align: left
@@ -55,7 +65,6 @@ header::before
         right 0
         bottom 0
         display block
-        //background url('/assets/images/global/default-bg.jpg')
         background-size cover
         transform-origin center center 0
         transform translateZ(-1px) scale(2)
@@ -73,27 +82,31 @@ header::before
     //padding 40px
     color $black
     article
-      .right, .left
-        //min-height 500px;
-        width 49.9%
-        display inline-flex
-        vertical-align: top
-        //align-items center
-        justify-content center
-        background $black
-      .left
-          border-right 1px $highlight solid
-
-        .inner
       position relative
       width: 80%
       height 80%
-          margin 30px 0 30px 0
+      max-width 840px
+      min-height 500px
       background $black 
       vertical-align top
       color $white
+      margin 0 auto
       span
-            custom-header(600, 1.5em, 2, $secondary)
+        custom-header(600, 2em, 1.5, $secondary)
+      .index
+        margin 30px
+        label 
+          background $black
+          color $white
+          font-size 1.5em
+          line-height 1.3
+        a
+          font-size 1.5em
+          line-height 1.3
+          margin-bottom 10px
+          margin-right 10px
+          font-weight 400
+          
     section 
       color $white