Page Spacing & FireFox

ProcStack · ProcStack · commit 8acb39b05964 · 2025-03-25T01:30:46.000-04:00
_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 &amp; Skill Columns

_WhatAmI skills were fitting to a single column once in a while, auto-fit instead
_Reordered my skills some / added to
_Soften unselected Section buttons
diff --git a/docs/js/pxlRooms/CampfireEnvironment/CampfireEnvironment.js b/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);
diff --git a/docs/pages/aboutMe.js b/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',
diff --git a/docs/pages/aboutMe/whatAmI.js b/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>
 
diff --git a/docs/pages/blog.js b/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',
diff --git a/docs/pages/makingOf.js b/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',
diff --git a/docs/pages/projects.js b/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',
diff --git a/docs/pages/projects/dwitter.js b/docs/pages/projects/dwitter.js
@@ -40,7 +40,7 @@ export const pageListingData = {
     <div class="procPagesSpacer"></div>
     
     <br> I'm running a <span class="textName">recursive</span> function to draw circles over & over,
-    <br>&nbsp;&nbsp; That are getting smaller as they go down.
+    <br>&nbsp;&nbsp; That are getting smaller as they go up.
     <br>&nbsp;&nbsp; After a short amount of time,
     <br>&nbsp;&nbsp;&nbsp;&nbsp; using Tan() to have them fall off the screen.
     <br>
diff --git a/docs/pages/projects/pxlVisualizer.js b/docs/pages/projects/pxlVisualizer.js
@@ -13,7 +13,7 @@ export const pageListingData = {
   'content' : `
     <a href='https://github.com/ProcStack/pxlVisualizer' class='procPagesRepoLinkStyle' target='_blank'>pxlVisualizer</a> <span class="textDrinkMeAlice textItalic">2019</span>
     <br><span class="textBump">Different switchable trippy visuals</span>
-    <br><span class="textShrink textItalic textName ">Language - <span class="textBold">C++ / OpenFrameWorks</span></span>
+    <br><span class="textShrink textItalic textName ">Language - <span class="textBold">C++ / OpenFrameWorks & GLSL</span></span>
     <div class="pppHBar"></div>
     
     Originally written in Python for PyGame, decided it would be a fun project to learn C++ on.
diff --git a/docs/pages/pxlNav.js b/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',
diff --git a/docs/style/procPages/procPages_aboutMeStyle.css b/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;
 }
 
@@ -18,7 +18,7 @@
   color: rgba(237, 237, 237, 0.9);
   text-shadow: 1.5px 1.5px 4px rgba(37, 37, 37, 0.632);
   background-color: rgba(86, 86, 86, 0.37);
-  border-color: rgba(192, 192, 192, 0.85) rgba(144, 144, 144, 0.29);
+  border-color: rgba(192, 192, 192, 0.45) rgba(144, 144, 144, 0.2);
   border-style: solid;
 }
 .gitAboutMePage-sectionNavButtonStyle:hover{
@@ -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));
   }
   
 }
diff --git a/docs/style/procPages/procPages_blogStyle.css b/docs/style/procPages/procPages_blogStyle.css
@@ -15,7 +15,7 @@
   color: rgba(80, 210, 90, 0.8);
   text-shadow: 1.5px 1.5px 4px #252525;
   background-color: rgba(15, 79, 20, 0.37);
-  border-color: rgba(25, 220, 30, 0.85) rgba(20, 168, 25, 0.29);
+  border-color: rgba(25, 220, 30, 0.45) rgba(20, 168, 25, 0.2);
 }
 .gitBlogPage-sectionNavButtonStyle:hover{
   color: rgba(80, 210, 90, 0.9);
@@ -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);
 }
 
 /* -- -- -- */
diff --git a/docs/style/procPages/procPages_initStyle.css b/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 {
diff --git a/docs/style/procPages/procPages_mainStyle.css b/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;
 }
 
 
diff --git a/docs/style/procPages/procPages_projectsStyle.css b/docs/style/procPages/procPages_projectsStyle.css
diff --git a/docs/style/procPages/procPages_pxlNavStyle.css b/docs/style/procPages/procPages_pxlNavStyle.css
diff --git a/docs/style/procPages/procPages_reposStyle.css b/docs/style/procPages/procPages_reposStyle.css
