Page Spacing & FireFox

_Firefox doesn't like mixing justify-self as a child of a Grid css object, so Justify-self only works on display:grid objects, this seems wrong.... But firefox is the new Internet Explorer of CSS + JS
_AboutMe and Init didn't have any width with the page content

WhatAmI CSS & Skill Columns

_WhatAmI skills were fitting to a single column once in a while, auto-fit instead
_Reordered my skills some / added to

Author: ProcStack

docs/js/pxlRooms/CampfireEnvironment/CampfireEnvironment.js

@@ -263,9 +263,11 @@ export class CampfireEnvironment extends RoomEnvironment{
 
     eWisps.setAtlasPath( "sprite_dustLiquid_rgb.jpg", "sprite_dustLiquid_alpha.jpg" );
 
+    particleSourcePos = particleSourcePos.clone();
+    particleSourcePos.y += -2.0; // Raise the ember wisps above the campfire
 
     let emberSettings = eWisps.getSettings();
-    emberSettings["vertCount"] = 30;
+    emberSettings["vertCount"] = 17;
     emberSettings["pScale"] = 10;
     emberSettings["offsetPos"] = particleSourcePos; // Offset center of the system
     //emberSettings["fadeOutScalar"] = opacityRolloff;
@@ -277,6 +279,11 @@ export class CampfireEnvironment extends RoomEnvironment{
     //emberSettings["offsetPos"] = particleSourcePos;
     //emberSettings["wanderInf"] = wanderInfluence;
     //emberSettings["wanderFrequency"] = wanderFrequency;
+    
+    emberSettings["EmberSpread"] = 9.0;
+    emberSettings["EmberFadeDistance"] = 0.052;
+    emberSettings["ShiftFromZero"] = 0.65;
+    emberSettings["MultPosXZ"] = 0.650;
 
     //
     let emberAtlasPicks=eWisps.elementDuplicator([ [0.0,0.75], [0.0,0.5], [0.25,0.75], [0.25,0.5] ],4);

docs/pages/aboutMe.js

@@ -25,7 +25,7 @@ const pageContentObject = {
   'subHeader' : '',
   'pageStyles' : {
     'block' : ['procPagesContentStyle', 'gitAboutMePageStyle'],
-    'before' : [ 'procPagesInnerBefore' ],
+    'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
     'parent' : [ 'procPagesParentStyle', 'gitAboutMePageParentStyle', 'procPagesLockVertical' ],
     'header' : [ 'procPagesHeaderStyle' ],
     'subHeader' : [],
@@ -40,7 +40,7 @@ const pageContentObject = {
     'sectionCaption' : [ 'gitAboutMePage-sectionCaptionStyle' ],
     'content' : [ 'procPagesScrollbarStyle' ],
     'media' : [ 'procPagesScrollbarStyle' ],
-    'after' : [ 'procPagesInnerAfter' ]
+    'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
   },
   'styleOverrides' : {
     'procPagesNavBlock' : 'procPagesNav_aboutMeStyle',

docs/pages/aboutMe/whatAmI.js

@@ -16,14 +16,14 @@ export const pageListingData = {
       <span class="textBold">Technical Artist</span>; 2D+3D asset optimization, shaders, & pipeline tools
     </div>
     <div class='procPagesAboutMe-skillListStyle'>
-      <span class="ppamSkillListing">Houdini</span>
-      <span class="ppamSkillListing">Maya</span>
-      <span class="ppamSkillListing">Unity</span>
+      <span class="ppamSkillListing">Houdini / VEX</span>
+      <span class="ppamSkillListing">Maya / MEL</span>
+      <span class="ppamSkillListing">Unity / C#</span>
       <span class="ppamSkillListing">Photoshop</span>
 
       <span class="ppamSkillListing">Python</span>
-      <span class="ppamSkillListing">VEX/MEL</span>
-      <span class="ppamSkillListing">C#</span>
+      <span class="ppamSkillListing">PyQT</span>
+      <span class="ppamSkillListing">GLSL</span>
       <span class="ppamSkillListing">JavaScript</span>
     </div>
 

docs/pages/blog.js

@@ -19,7 +19,7 @@ const pageContentObject = {
   'subHeader' : '',
   'pageStyles' : {
     'block' : ['procPagesContentStyle', 'gitBlogPageStyle'],
-    'before' : [ 'procPagesInnerBefore' ],
+    'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
     'parent' : [ 'procPagesParentStyle', 'gitBlogPageParentStyle', 'procPagesLayoutTripleStyle' ],
     'header' : [ 'procPagesHeaderStyle' ],
     'headerLine' : [ 'gitBlogPage-headerLine' ],
@@ -35,7 +35,7 @@ const pageContentObject = {
     'sectionCaption' : [ 'gitBlogPage-sectionCaptionStyle' ],
     'content' : [ 'gitBlogPageScrollbarStyle' ],
     'media' : [ 'gitBlogPageScrollbarStyle' ],
-    'after' : [ 'procPagesInnerAfter' ]
+    'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
   },
   'styleOverrides' : {
     'procPagesNavBlock' : 'procPagesNav_blogStyle',

docs/pages/makingOf.js

@@ -19,7 +19,7 @@ const pageContentObject = {
   'subHeader' : '',
   'pageStyles' : {
     'block' : [ 'procPagesContentStyle', 'gitReposPageStyle' ],
-    'before' : [ 'procPagesInnerBefore' ],
+    'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
     'parent' : [ 'procPagesParentStyle', 'gitReposPageParentStyle', 'procPagesLayoutTripleStyle' ],
     'header' : [ 'procPagesHeaderStyle' ],
     'headerLine' : [ 'gitReposPage-headerLine' ],
@@ -35,7 +35,7 @@ const pageContentObject = {
     'sectionCaption' : [ 'gitReposPage-sectionCaptionStyle' ],
     'content' : [ 'gitReposPageScrollbarStyle' ],
     'media' : [ 'gitReposPageScrollbarStyle' ],
-    'after' : [ 'procPagesInnerAfter' ]
+    'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
   },
   'styleOverrides' : {
     'procPagesNavBlock' : 'procPagesNav_reposStyle',

docs/pages/projects.js

@@ -39,7 +39,7 @@ const pageContentObject = {
   `,
   'pageStyles' : {
     'block' : ['procPagesContentStyle', 'gitProjectsPageStyle'],
-    'before' : [ 'procPagesInnerBefore' ],
+    'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
     'parent' : [ 'procPagesParentStyle', 'gitProjectsPageParentStyle', 'procPagesLayoutTripleStyle' ],
     'header' : [ 'procPagesHeaderStyle' ],
     'headerLine' : [ 'gitProjectsPage-headerLine' ],
@@ -56,7 +56,7 @@ const pageContentObject = {
     'sectionCaption' : [ 'gitProjectsPage-sectionCaptionStyle' ],
     'content' : [ 'gitProjectsPageScrollbarStyle' ],
     'media' : [ 'gitProjectsPageScrollbarStyle' ],
-    'after' : [ 'procPagesInnerAfter' ]
+    'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
   },
   'styleOverrides' : {
     'procPagesNavBlock' : 'procPagesNav_projectsStyle',

docs/pages/pxlNav.js

@@ -25,7 +25,7 @@ const pageContentObject = {
   'subHeader' : `<span>A javascript player controller & environment manager<span class='procPagesHideWhenThin'>&nbsp;for Three.js</span></span>`,
   'pageStyles' : {
     'block' : ['procPagesContentStyle', 'gitPxlNavPageStyle'],
-    'before' : [ 'procPagesInnerBefore' ],
+    'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
     'parent' : [ 'procPagesParentStyle', 'gitPxlNavPageParentStyle', 'gitPxlNavPageScrollbarStyle', 'procPagesLayoutTripleStyle' ],
     'header' : [ 'procPagesHeaderStyle' ],
     'headerLine' : [ 'gitPxlNav-headerLine' ],
@@ -42,7 +42,7 @@ const pageContentObject = {
     'sectionCaption' : [ 'gitPxlNav-sectionCaptionStyle' ],
     'content' : [ 'gitPxlNavPageScrollbarStyle' ],
     'media' : [ 'gitPxlNavPageScrollbarStyle' ],
-    'after' : [ 'procPagesInnerAfter' ]
+    'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
   },
   'styleOverrides' : {
     'procPagesNavBlock' : 'procPagesNav_pxlNavStyle',

docs/style/procPages/procPages_aboutMeStyle.css

@@ -7,7 +7,7 @@
   z-index: 6;
   overflow: hidden;
   position: fixed;
-  left: max(0px, calc(min(15vw, max(0px, 100vw - 1250px) / 4.5)));
+  left: max( 1vmax, calc(min(15vw, max(0px, 100vw - 1250px) / 4.5)) );
   bottom: 2.5vmin;
 }
 
@@ -64,7 +64,7 @@
 
 
 .gitAboutMePageParentStyle{
-  width: min(100vw, 1100px);
+  width: min( calc(100vw - 2vmax), 1100px);
   height: calc(90vh - 40px);
   display: grid;
   grid-auto-flow: row;
@@ -81,27 +81,11 @@
 }
 
 .gitAboutMePageStyle .procPagesInnerBefore {
-  content : '';
-  border-radius: var(--inner-before-after-radiusBefore);
-  background: transparent;
-  border-width: 0px 2px 2px 2px;
   border-color: #5d5d5d;
-  border-style: solid;
-  height: var(--inner-before-after-height);
-  width: 99.8%;
-  margin-bottom: var(--inner-before-after-margin);
 }
 
 .gitAboutMePageStyle .procPagesInnerAfter {
-  content : '';
-  border-radius: var(--inner-before-after-radiusAfter);
-  background: transparent;
-  border-width: 2px 2px 0px 2px;
   border-color: #5d5d5d;
-  border-style: solid;
-  height: var(--inner-before-after-height);
-  width: 99.8%;
-  margin-top: var(--inner-before-after-margin);
 }
 
 /* -- -- -- */
@@ -183,15 +167,16 @@
   max-width: 1200px;
   justify-self: center;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(45%, 200px), 1fr));
   grid-auto-rows: auto;
   gap: 8px 9px;
   margin-bottom: 10px;
 }
 
 @media screen and (max-width: 500px) {
   .procPagesAboutMe-skillListStyle{
-    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    width: 100%;
+    grid-template-columns: repeat(auto-fit, minmax(min(45%, 100px), 1fr));
   }
 
 }

docs/style/procPages/procPages_blogStyle.css

@@ -103,27 +103,11 @@
 }
 
 .gitBlogPageStyle .procPagesInnerBefore {
-  content : '';
-  border-radius: var(--inner-before-after-radiusBefore);
-  background: transparent;
-  border-width: 0px 2px 2px 2px;
   border-color: #2b0967;
-  border-style: solid;
-  height: var(--inner-before-after-height);
-  width: 99.8%;
-  margin-bottom: var(--inner-before-after-margin);
 }
 
 .gitBlogPageStyle .procPagesInnerAfter {
-  content : '';
-  border-radius: var(--inner-before-after-radiusAfter);
-  background: transparent;
-  border-width: 2px 2px 0px 2px;
   border-color: #2b0967;
-  border-style: solid;
-  height: var(--inner-before-after-height);
-  width: 99.8%;
-  margin-top: var(--inner-before-after-margin);
 }
 
 /* -- -- -- */

docs/style/procPages/procPages_initStyle.css

@@ -14,9 +14,11 @@
 
 @media screen and (max-width: 500px) {
   .gitInitPageStyle{
-    left: 0px;
-    width: 100vw;
+    left: 1vmax;
+    width: calc(100vw - 2vmax);
     max-width: 100vw;
+    justify-self: center;
+    pointer-events: fill;
   }
 }
 
@@ -42,16 +44,7 @@
 }
 
 .gitInitPageStyle .procPagesInnerBefore {
-  content : '';
-  padding-left: 8px;
-  border-radius: var(--inner-before-after-radiusBefore);
-  background: transparent;
-  border-width: 0px 2px 2px 2px;
   border-color: #483107;
-  border-style: solid;
-  height: var(--inner-before-after-height);
-  width: 99.8%;
-  margin-bottom: var(--inner-before-after-margin);
 }
 
 .gitInitPageStyle .procPagesInnerAfter {

docs/style/procPages/procPages_mainStyle.css

@@ -11,6 +11,7 @@
   --procPage-width: calc( 100vw - 6vmax );
   --procPage-mobile-width: calc( 100vw - 2vmax );
   --layout-toggle: 1000px;
+  --max-inner-width: min(calc(100vw - 2.5vmax), 99.8%);
 }
 
 /*  -- -- -- -- -- -- -- -- -- -- -- -- */
@@ -115,10 +116,36 @@ BODY {
   grid-auto-flow: column;
   pointer-events: none;
 }
+
 .gpnhScreenMedia{
 left: calc(max(3.5vw, 50vw - 765px));
 }
 
+
+.procPagesInnerBeforeBase {
+  content : '';
+  border-radius: var(--inner-before-after-radiusBefore);
+  background: transparent;
+  border-width: 0px 2px 2px 2px;
+  border-color: #5d5d5d;
+  border-style: solid;
+  height: var(--inner-before-after-height);
+  width: var(--max-inner-width);
+  margin-bottom: var(--inner-before-after-margin);
+}
+
+.procPagesInnerAfterBase {
+  content : '';
+  border-radius: var(--inner-before-after-radiusAfter);
+  background: transparent;
+  border-width: 2px 2px 0px 2px;
+  border-color: #5d5d5d;
+  border-style: solid;
+  height: var(--inner-before-after-height);
+  width: var(--max-inner-width);
+  margin-top: var(--inner-before-after-margin);
+}
+
 @media (max-width: 400px){
   .gpnhScreenMedia{
     left: 50%;
@@ -139,6 +166,14 @@ left: calc(max(3.5vw, 50vw - 765px));
   .procPagesShowWhenThin{
     display: inherit;
   }
+  
+  .procPagesInnerBeforeBase {
+    border-width: 0px 1px 1px 1px;
+  }
+
+  .procPagesInnerAfterBase {
+    border-width: 1px 1px 0px 1px;
+  }
 }
 
 @media screen and ((max-width: 1000px) or (min-aspect-ratio: 1)) {
@@ -152,12 +187,13 @@ left: calc(max(3.5vw, 50vw - 765px));
 .procPagesNavStyle {
   width: 100vw;
   max-width: 950px;
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
   justify-content: space-around;
-  justify-self: center;
   position: relative;
   z-index: 200;
+  grid-auto-flow: column;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 

docs/style/procPages/procPages_projectsStyle.css

@@ -129,27 +129,11 @@
 }
 
 .gitProjectsPageStyle .procPagesInnerBefore {
-  content : '';
-  border-radius: var(--inner-before-after-radiusBefore);
-  background: transparent;
-  border-width: 0px 2px 2px 2px;
   border-color: #3e5f75;
-  border-style: solid;
-  height: var(--inner-before-after-height);
-  width: 99.8%;
-  margin-bottom: var(--inner-before-after-margin);
 }
 
 .gitProjectsPageStyle .procPagesInnerAfter {
-  content : '';
-  border-radius: var(--inner-before-after-radiusAfter);
-  background: transparent;
-  border-width: 2px 2px 0px 2px;
   border-color: #3e5f75;
-  border-style: solid;
-  height: var(--inner-before-after-height);
-  width: 99.8%;
-  margin-top: var(--inner-before-after-margin);
 }
 
 

docs/style/procPages/procPages_pxlNavStyle.css

@@ -2,7 +2,6 @@
 /* -- -- -- */
 
 .gitPxlNavPageStyle{
-  /*width: var(--procPage-width);*/
   justify-self: center;
   justify-items: center;
   z-index: 2;
@@ -118,27 +117,11 @@
 }
 
 .gitPxlNavPageStyle .procPagesInnerBefore {
-  content : '';
-  border-radius: var(--inner-before-after-radiusBefore);
-  background: transparent;
-  border-width: 0px 2px 2px 2px;
   border-color: #304112;
-  border-style: solid;
-  height: var(--inner-before-after-height);
-  width: 99.8%;
-  margin-bottom: var(--inner-before-after-margin);
 }
 
 .gitPxlNavPageStyle .procPagesInnerAfter {
-  content : '';
-  border-radius: var(--inner-before-after-radiusAfter);
-  background: transparent;
-  border-width: 2px 2px 0px 2px;
   border-color: #304112;
-  border-style: solid;
-  height: var(--inner-before-after-height);
-  width: 99.8%;
-  margin-top: var(--inner-before-after-margin);
 }