Skip to content

Commit 8acb39b

Browse files
ProcStackProcStack
committed
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 _Soften unselected Section buttons
1 parent 3bb224f commit 8acb39b

16 files changed

+78
-122
lines changed

‎docs/js/pxlRooms/CampfireEnvironment/CampfireEnvironment.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -263,9 +263,11 @@ export class CampfireEnvironment extends RoomEnvironment{
263263

264264
eWisps.setAtlasPath( "sprite_dustLiquid_rgb.jpg", "sprite_dustLiquid_alpha.jpg" );
265265

266+
particleSourcePos = particleSourcePos.clone();
267+
particleSourcePos.y += -2.0; // Raise the ember wisps above the campfire
266268

267269
let emberSettings = eWisps.getSettings();
268-
emberSettings["vertCount"] = 30;
270+
emberSettings["vertCount"] = 17;
269271
emberSettings["pScale"] = 10;
270272
emberSettings["offsetPos"] = particleSourcePos; // Offset center of the system
271273
//emberSettings["fadeOutScalar"] = opacityRolloff;
@@ -277,6 +279,11 @@ export class CampfireEnvironment extends RoomEnvironment{
277279
//emberSettings["offsetPos"] = particleSourcePos;
278280
//emberSettings["wanderInf"] = wanderInfluence;
279281
//emberSettings["wanderFrequency"] = wanderFrequency;
282+
283+
emberSettings["EmberSpread"] = 9.0;
284+
emberSettings["EmberFadeDistance"] = 0.052;
285+
emberSettings["ShiftFromZero"] = 0.65;
286+
emberSettings["MultPosXZ"] = 0.650;
280287

281288
//
282289
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

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const pageContentObject = {
2525
'subHeader' : '',
2626
'pageStyles' : {
2727
'block' : ['procPagesContentStyle', 'gitAboutMePageStyle'],
28-
'before' : [ 'procPagesInnerBefore' ],
28+
'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
2929
'parent' : [ 'procPagesParentStyle', 'gitAboutMePageParentStyle', 'procPagesLockVertical' ],
3030
'header' : [ 'procPagesHeaderStyle' ],
3131
'subHeader' : [],
@@ -40,7 +40,7 @@ const pageContentObject = {
4040
'sectionCaption' : [ 'gitAboutMePage-sectionCaptionStyle' ],
4141
'content' : [ 'procPagesScrollbarStyle' ],
4242
'media' : [ 'procPagesScrollbarStyle' ],
43-
'after' : [ 'procPagesInnerAfter' ]
43+
'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
4444
},
4545
'styleOverrides' : {
4646
'procPagesNavBlock' : 'procPagesNav_aboutMeStyle',

‎docs/pages/aboutMe/whatAmI.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ export const pageListingData = {
1616
<span class="textBold">Technical Artist</span>; 2D+3D asset optimization, shaders, & pipeline tools
1717
</div>
1818
<div class='procPagesAboutMe-skillListStyle'>
19-
<span class="ppamSkillListing">Houdini</span>
20-
<span class="ppamSkillListing">Maya</span>
21-
<span class="ppamSkillListing">Unity</span>
19+
<span class="ppamSkillListing">Houdini / VEX</span>
20+
<span class="ppamSkillListing">Maya / MEL</span>
21+
<span class="ppamSkillListing">Unity / C#</span>
2222
<span class="ppamSkillListing">Photoshop</span>
2323
2424
<span class="ppamSkillListing">Python</span>
25-
<span class="ppamSkillListing">VEX/MEL</span>
26-
<span class="ppamSkillListing">C#</span>
25+
<span class="ppamSkillListing">PyQT</span>
26+
<span class="ppamSkillListing">GLSL</span>
2727
<span class="ppamSkillListing">JavaScript</span>
2828
</div>
2929

‎docs/pages/blog.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const pageContentObject = {
1919
'subHeader' : '',
2020
'pageStyles' : {
2121
'block' : ['procPagesContentStyle', 'gitBlogPageStyle'],
22-
'before' : [ 'procPagesInnerBefore' ],
22+
'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
2323
'parent' : [ 'procPagesParentStyle', 'gitBlogPageParentStyle', 'procPagesLayoutTripleStyle' ],
2424
'header' : [ 'procPagesHeaderStyle' ],
2525
'headerLine' : [ 'gitBlogPage-headerLine' ],
@@ -35,7 +35,7 @@ const pageContentObject = {
3535
'sectionCaption' : [ 'gitBlogPage-sectionCaptionStyle' ],
3636
'content' : [ 'gitBlogPageScrollbarStyle' ],
3737
'media' : [ 'gitBlogPageScrollbarStyle' ],
38-
'after' : [ 'procPagesInnerAfter' ]
38+
'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
3939
},
4040
'styleOverrides' : {
4141
'procPagesNavBlock' : 'procPagesNav_blogStyle',

‎docs/pages/makingOf.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const pageContentObject = {
1919
'subHeader' : '',
2020
'pageStyles' : {
2121
'block' : [ 'procPagesContentStyle', 'gitReposPageStyle' ],
22-
'before' : [ 'procPagesInnerBefore' ],
22+
'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
2323
'parent' : [ 'procPagesParentStyle', 'gitReposPageParentStyle', 'procPagesLayoutTripleStyle' ],
2424
'header' : [ 'procPagesHeaderStyle' ],
2525
'headerLine' : [ 'gitReposPage-headerLine' ],
@@ -35,7 +35,7 @@ const pageContentObject = {
3535
'sectionCaption' : [ 'gitReposPage-sectionCaptionStyle' ],
3636
'content' : [ 'gitReposPageScrollbarStyle' ],
3737
'media' : [ 'gitReposPageScrollbarStyle' ],
38-
'after' : [ 'procPagesInnerAfter' ]
38+
'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
3939
},
4040
'styleOverrides' : {
4141
'procPagesNavBlock' : 'procPagesNav_reposStyle',

‎docs/pages/projects.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const pageContentObject = {
3939
`,
4040
'pageStyles' : {
4141
'block' : ['procPagesContentStyle', 'gitProjectsPageStyle'],
42-
'before' : [ 'procPagesInnerBefore' ],
42+
'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
4343
'parent' : [ 'procPagesParentStyle', 'gitProjectsPageParentStyle', 'procPagesLayoutTripleStyle' ],
4444
'header' : [ 'procPagesHeaderStyle' ],
4545
'headerLine' : [ 'gitProjectsPage-headerLine' ],
@@ -56,7 +56,7 @@ const pageContentObject = {
5656
'sectionCaption' : [ 'gitProjectsPage-sectionCaptionStyle' ],
5757
'content' : [ 'gitProjectsPageScrollbarStyle' ],
5858
'media' : [ 'gitProjectsPageScrollbarStyle' ],
59-
'after' : [ 'procPagesInnerAfter' ]
59+
'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
6060
},
6161
'styleOverrides' : {
6262
'procPagesNavBlock' : 'procPagesNav_projectsStyle',

‎docs/pages/projects/dwitter.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const pageListingData = {
4040
<div class="procPagesSpacer"></div>
4141
4242
<br> I'm running a <span class="textName">recursive</span> function to draw circles over & over,
43-
<br>&nbsp;&nbsp; That are getting smaller as they go down.
43+
<br>&nbsp;&nbsp; That are getting smaller as they go up.
4444
<br>&nbsp;&nbsp; After a short amount of time,
4545
<br>&nbsp;&nbsp;&nbsp;&nbsp; using Tan() to have them fall off the screen.
4646
<br>

‎docs/pages/projects/pxlVisualizer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const pageListingData = {
1313
'content' : `
1414
<a href='https://github.com/ProcStack/pxlVisualizer' class='procPagesRepoLinkStyle' target='_blank'>pxlVisualizer</a> <span class="textDrinkMeAlice textItalic">2019</span>
1515
<br><span class="textBump">Different switchable trippy visuals</span>
16-
<br><span class="textShrink textItalic textName ">Language - <span class="textBold">C++ / OpenFrameWorks</span></span>
16+
<br><span class="textShrink textItalic textName ">Language - <span class="textBold">C++ / OpenFrameWorks & GLSL</span></span>
1717
<div class="pppHBar"></div>
1818
1919
Originally written in Python for PyGame, decided it would be a fun project to learn C++ on.

‎docs/pages/pxlNav.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const pageContentObject = {
2525
'subHeader' : `<span>A javascript player controller & environment manager<span class='procPagesHideWhenThin'>&nbsp;for Three.js</span></span>`,
2626
'pageStyles' : {
2727
'block' : ['procPagesContentStyle', 'gitPxlNavPageStyle'],
28-
'before' : [ 'procPagesInnerBefore' ],
28+
'before' : [ 'procPagesInnerBeforeBase', 'procPagesInnerBefore' ],
2929
'parent' : [ 'procPagesParentStyle', 'gitPxlNavPageParentStyle', 'gitPxlNavPageScrollbarStyle', 'procPagesLayoutTripleStyle' ],
3030
'header' : [ 'procPagesHeaderStyle' ],
3131
'headerLine' : [ 'gitPxlNav-headerLine' ],
@@ -42,7 +42,7 @@ const pageContentObject = {
4242
'sectionCaption' : [ 'gitPxlNav-sectionCaptionStyle' ],
4343
'content' : [ 'gitPxlNavPageScrollbarStyle' ],
4444
'media' : [ 'gitPxlNavPageScrollbarStyle' ],
45-
'after' : [ 'procPagesInnerAfter' ]
45+
'after' : [ 'procPagesInnerAfterBase', 'procPagesInnerAfter' ]
4646
},
4747
'styleOverrides' : {
4848
'procPagesNavBlock' : 'procPagesNav_pxlNavStyle',

‎docs/style/procPages/procPages_aboutMeStyle.css

+6-21
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
z-index: 6;
88
overflow: hidden;
99
position: fixed;
10-
left: max(0px, calc(min(15vw, max(0px, 100vw - 1250px) / 4.5)));
10+
left: max( 1vmax, calc(min(15vw, max(0px, 100vw - 1250px) / 4.5)) );
1111
bottom: 2.5vmin;
1212
}
1313

@@ -18,7 +18,7 @@
1818
color: rgba(237, 237, 237, 0.9);
1919
text-shadow: 1.5px 1.5px 4px rgba(37, 37, 37, 0.632);
2020
background-color: rgba(86, 86, 86, 0.37);
21-
border-color: rgba(192, 192, 192, 0.85) rgba(144, 144, 144, 0.29);
21+
border-color: rgba(192, 192, 192, 0.45) rgba(144, 144, 144, 0.2);
2222
border-style: solid;
2323
}
2424
.gitAboutMePage-sectionNavButtonStyle:hover{
@@ -64,7 +64,7 @@
6464

6565

6666
.gitAboutMePageParentStyle{
67-
width: min(100vw, 1100px);
67+
width: min( calc(100vw - 2vmax), 1100px);
6868
height: calc(90vh - 40px);
6969
display: grid;
7070
grid-auto-flow: row;
@@ -81,27 +81,11 @@
8181
}
8282

8383
.gitAboutMePageStyle .procPagesInnerBefore {
84-
content : '';
85-
border-radius: var(--inner-before-after-radiusBefore);
86-
background: transparent;
87-
border-width: 0px 2px 2px 2px;
8884
border-color: #5d5d5d;
89-
border-style: solid;
90-
height: var(--inner-before-after-height);
91-
width: 99.8%;
92-
margin-bottom: var(--inner-before-after-margin);
9385
}
9486

9587
.gitAboutMePageStyle .procPagesInnerAfter {
96-
content : '';
97-
border-radius: var(--inner-before-after-radiusAfter);
98-
background: transparent;
99-
border-width: 2px 2px 0px 2px;
10088
border-color: #5d5d5d;
101-
border-style: solid;
102-
height: var(--inner-before-after-height);
103-
width: 99.8%;
104-
margin-top: var(--inner-before-after-margin);
10589
}
10690

10791
/* -- -- -- */
@@ -183,15 +167,16 @@
183167
max-width: 1200px;
184168
justify-self: center;
185169
display: grid;
186-
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
170+
grid-template-columns: repeat(auto-fit, minmax(min(45%, 200px), 1fr));
187171
grid-auto-rows: auto;
188172
gap: 8px 9px;
189173
margin-bottom: 10px;
190174
}
191175

192176
@media screen and (max-width: 500px) {
193177
.procPagesAboutMe-skillListStyle{
194-
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
178+
width: 100%;
179+
grid-template-columns: repeat(auto-fit, minmax(min(45%, 100px), 1fr));
195180
}
196181

197182
}

‎docs/style/procPages/procPages_blogStyle.css

+1-17
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
color: rgba(80, 210, 90, 0.8);
1616
text-shadow: 1.5px 1.5px 4px #252525;
1717
background-color: rgba(15, 79, 20, 0.37);
18-
border-color: rgba(25, 220, 30, 0.85) rgba(20, 168, 25, 0.29);
18+
border-color: rgba(25, 220, 30, 0.45) rgba(20, 168, 25, 0.2);
1919
}
2020
.gitBlogPage-sectionNavButtonStyle:hover{
2121
color: rgba(80, 210, 90, 0.9);
@@ -103,27 +103,11 @@
103103
}
104104

105105
.gitBlogPageStyle .procPagesInnerBefore {
106-
content : '';
107-
border-radius: var(--inner-before-after-radiusBefore);
108-
background: transparent;
109-
border-width: 0px 2px 2px 2px;
110106
border-color: #2b0967;
111-
border-style: solid;
112-
height: var(--inner-before-after-height);
113-
width: 99.8%;
114-
margin-bottom: var(--inner-before-after-margin);
115107
}
116108

117109
.gitBlogPageStyle .procPagesInnerAfter {
118-
content : '';
119-
border-radius: var(--inner-before-after-radiusAfter);
120-
background: transparent;
121-
border-width: 2px 2px 0px 2px;
122110
border-color: #2b0967;
123-
border-style: solid;
124-
height: var(--inner-before-after-height);
125-
width: 99.8%;
126-
margin-top: var(--inner-before-after-margin);
127111
}
128112

129113
/* -- -- -- */

‎docs/style/procPages/procPages_initStyle.css

+4-11
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,11 @@
1414

1515
@media screen and (max-width: 500px) {
1616
.gitInitPageStyle{
17-
left: 0px;
18-
width: 100vw;
17+
left: 1vmax;
18+
width: calc(100vw - 2vmax);
1919
max-width: 100vw;
20+
justify-self: center;
21+
pointer-events: fill;
2022
}
2123
}
2224

@@ -42,16 +44,7 @@
4244
}
4345

4446
.gitInitPageStyle .procPagesInnerBefore {
45-
content : '';
46-
padding-left: 8px;
47-
border-radius: var(--inner-before-after-radiusBefore);
48-
background: transparent;
49-
border-width: 0px 2px 2px 2px;
5047
border-color: #483107;
51-
border-style: solid;
52-
height: var(--inner-before-after-height);
53-
width: 99.8%;
54-
margin-bottom: var(--inner-before-after-margin);
5548
}
5649

5750
.gitInitPageStyle .procPagesInnerAfter {

‎docs/style/procPages/procPages_mainStyle.css

+39-3
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
--procPage-width: calc( 100vw - 6vmax );
1212
--procPage-mobile-width: calc( 100vw - 2vmax );
1313
--layout-toggle: 1000px;
14+
--max-inner-width: min(calc(100vw - 2.5vmax), 99.8%);
1415
}
1516

1617
/* -- -- -- -- -- -- -- -- -- -- -- -- */
@@ -115,10 +116,36 @@ BODY {
115116
grid-auto-flow: column;
116117
pointer-events: none;
117118
}
119+
118120
.gpnhScreenMedia{
119121
left: calc(max(3.5vw, 50vw - 765px));
120122
}
121123

124+
125+
.procPagesInnerBeforeBase {
126+
content : '';
127+
border-radius: var(--inner-before-after-radiusBefore);
128+
background: transparent;
129+
border-width: 0px 2px 2px 2px;
130+
border-color: #5d5d5d;
131+
border-style: solid;
132+
height: var(--inner-before-after-height);
133+
width: var(--max-inner-width);
134+
margin-bottom: var(--inner-before-after-margin);
135+
}
136+
137+
.procPagesInnerAfterBase {
138+
content : '';
139+
border-radius: var(--inner-before-after-radiusAfter);
140+
background: transparent;
141+
border-width: 2px 2px 0px 2px;
142+
border-color: #5d5d5d;
143+
border-style: solid;
144+
height: var(--inner-before-after-height);
145+
width: var(--max-inner-width);
146+
margin-top: var(--inner-before-after-margin);
147+
}
148+
122149
@media (max-width: 400px){
123150
.gpnhScreenMedia{
124151
left: 50%;
@@ -139,6 +166,14 @@ left: calc(max(3.5vw, 50vw - 765px));
139166
.procPagesShowWhenThin{
140167
display: inherit;
141168
}
169+
170+
.procPagesInnerBeforeBase {
171+
border-width: 0px 1px 1px 1px;
172+
}
173+
174+
.procPagesInnerAfterBase {
175+
border-width: 1px 1px 0px 1px;
176+
}
142177
}
143178

144179
@media screen and ((max-width: 1000px) or (min-aspect-ratio: 1)) {
@@ -152,12 +187,13 @@ left: calc(max(3.5vw, 50vw - 765px));
152187
.procPagesNavStyle {
153188
width: 100vw;
154189
max-width: 950px;
155-
display: flex;
156-
flex-wrap: wrap;
190+
display: grid;
157191
justify-content: space-around;
158-
justify-self: center;
159192
position: relative;
160193
z-index: 200;
194+
grid-auto-flow: column;
195+
margin-left: auto;
196+
margin-right: auto;
161197
}
162198

163199

0 commit comments

Comments
 (0)