Skip to content

Commit 2564700

Browse files
ProcStackProcStack
committed
Accents, CSS, & Formatting
Displaying captions nicer Better split of the section menu and content General formatting of page content
1 parent 67ef720 commit 2564700

20 files changed

+373
-114
lines changed

‎docs/js/ProckStackGitio.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ userSettings['gravity']['Max'] = 15.5; // Max gravity rate
7676
// Target FPS (Frames Per Second)
7777
// Default is - PC = 30 -&- Movile = 30
7878
const targetFPS = {
79-
'PC' : 30,
80-
'Mobile' : 20
79+
'PC' : 45,
80+
'Mobile' : 30
8181
};
8282

8383
// Anti-aliasing level

‎docs/js/pxlPages/ProcPage.js‎

Lines changed: 81 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,11 @@ export class ProcPage {
168168
let img = document.createElement('img');
169169
img.src = mediaData.src;
170170
img.alt = mediaData.alt;
171-
img.classList.add('procPagesMediaImage');
171+
if( this.layout == 'vertical' ){
172+
img.classList.add('procPagesVerticalLockMediaImage');
173+
}else{
174+
img.classList.add('procPagesMediaImage');
175+
}
172176

173177
this.applyStyle( mediaData, img );
174178

@@ -378,9 +382,15 @@ export class ProcPage {
378382

379383
buildPage(){
380384

381-
let setPageType = "block";
382385
let pageContent = document.createElement('div');
383386
pageContent.classList.add('procPagesContentStyle');
387+
if( this.layout == 'triple' ){
388+
pageContent.classList.add('procPagesPlacementTripleStyle');
389+
}else if( this.layout == 'vertical' ){
390+
pageContent.classList.add('procPagesPlacementVerticalStyle');
391+
pageContent.classList.add('procPagesLockVertical');
392+
}
393+
let setPageType = "block";
384394
if( this.pageStyles.hasOwnProperty( setPageType ) && Array.isArray( this.pageStyles[ setPageType ] ) ){
385395
this.pageStyles[ setPageType ].forEach(( style )=>{ pageContent.classList.add(style) });
386396
}
@@ -399,7 +409,9 @@ export class ProcPage {
399409

400410
setPageType = "parent";
401411
let pageInnerContent = document.createElement('div');
402-
pageInnerContent.classList.add('procPagesInnerStyle');
412+
if(this.layout == 'triple'){
413+
pageInnerContent.classList.add('procPagesInnerStyle');
414+
}
403415
this.applyPageStyle( 'parent', pageInnerContent );
404416
pageContent.appendChild( pageInnerContent );
405417

@@ -443,33 +455,32 @@ export class ProcPage {
443455
pageInnerContent.appendChild( pageSubHeader );
444456
}
445457

446-
let pageSections = document.createElement('div');
447-
pageSections.classList.add('procPageSections');
458+
let pageSections = pageInnerContent;
459+
if( false && this.layout == 'triple' ){
460+
pageSections = document.createElement('div');
461+
pageSections.classList.add('procPageSections');
448462

449-
this.applyPageStyle( 'inner', pageSections );
463+
this.applyPageStyle( 'inner', pageSections );
450464

451-
pageInnerContent.appendChild( pageSections );
465+
pageInnerContent.appendChild( pageSections );
466+
}
452467
this.pageSectionsObject = pageSections;
453468

454469
// -- -- -- -- -- --
455470

456471
let pageSectionList;
457472
if( this.layout != 'single' ){
458473
pageSectionList = document.createElement('div');
459-
pageSectionList.classList.add('procPageSectionList');
460-
pageSections.appendChild( pageSectionList );
461-
}
474+
if( this.layout == 'triple' ){
475+
pageSectionList.classList.add('procPageSectionList');
476+
}else if( this.layout == 'vertical' ){
477+
pageSectionList.classList.add('procPageVerticalLockSectionList');
478+
}
462479

463-
// -- -- --
480+
this.applyPageStyle( 'sectionNavList', pageSectionList );
464481

465-
let pageContentView = document.createElement('div');
466-
if( this.layout != 'single' ){
467-
pageContentView.classList.add('procPageContentView');
482+
pageSections.appendChild( pageSectionList );
468483
}
469-
470-
this.applyPageStyle( 'content', pageContentView );
471-
472-
pageSections.appendChild( pageContentView );
473484

474485
// -- -- --
475486

@@ -486,6 +497,20 @@ export class ProcPage {
486497

487498
// -- -- --
488499

500+
let pageContentView = document.createElement('div');
501+
if( this.layout == 'triple' ){
502+
pageContentView.classList.add('procPageContentView');
503+
}else if( this.layout == 'vertical' ){
504+
pageContentView.classList.add('procPageVerticalLockContentView');
505+
}
506+
507+
this.applyPageStyle( 'content', pageContentView );
508+
509+
pageSections.appendChild( pageContentView );
510+
511+
// -- -- --
512+
513+
489514
if( this.layout == 'single' ){
490515
let curKey = Object.keys( this.sectionTitles )[0];
491516
let curSectionData = this.sectionData[curKey];
@@ -567,16 +592,26 @@ export class ProcPage {
567592
});
568593
}
569594

570-
// Triple Layout Section
571-
if( this.layout == "triple" ){
572-
if( this.sectionData[ sectionName ].media.length == 0 ){
595+
let mediaLength = this.sectionData[ sectionName ].media.length;
596+
if( this.layout == "triple" ){ // Triple Layout Section
597+
if( mediaLength == 0 ){
573598
this.pageSectionsObject.classList.remove('procPageNoMediaStyle');
574599
this.mediaViewObject.style.display = "";
575-
}else if( this.sectionData[ sectionName ].media.length == 1 ){
600+
}else if( mediaLength == 1 ){
576601
this.mediaViewObject.style.alignContent = "";
602+
this.mediaViewObject.style.height = "";
603+
}
604+
}else if( this.layout == "vertical" ){ // Vertical locked layout
605+
if( mediaLength == 0 ){
606+
this.pageSectionsObject.classList.remove('procPageNoMediaLockVerticalStyle');
607+
this.mediaViewObject.style.display = "";
608+
}else if( mediaLength == 1 ){
609+
this.mediaViewObject.style.alignContent = "";
610+
this.mediaViewObject.style.height = "";
577611
}
578612
}
579613

614+
580615
this.sectionData[ sectionName ].objects.forEach(( obj )=>{
581616
obj.classList.remove('procPagesSectionActive');
582617
obj.classList.remove('pagesVisOn');
@@ -607,13 +642,25 @@ export class ProcPage {
607642
}
608643

609644

610-
// Triple Layout Section
611-
if( this.layout == "triple" ){
645+
// Modify page's media display
646+
// Vertical center single media
647+
// Hide media area if no media exists for the current section
648+
let mediaLength = this.sectionData[ sectionName ].media.length;
649+
if( this.layout == "triple" ){ // Triple Layout Section
612650
if( this.sectionData[ sectionName ].media.length == 0 ){
613651
this.pageSectionsObject.classList.add('procPageNoMediaStyle');
614652
this.mediaViewObject.style.display = "none";
615653
}else if(this.sectionData[ sectionName ].media.length == 1){
616654
this.mediaViewObject.style.alignContent = "center";
655+
this.mediaViewObject.style.height = "auto";
656+
}
657+
}else if( this.layout == "vertical" ){ // Vertical locked layout
658+
if( mediaLength == 0 ){
659+
this.pageSectionsObject.classList.add('procPageNoMediaLockVerticalStyle');
660+
this.mediaViewObject.style.display = "none";
661+
}else if( mediaLength == 1 ){
662+
this.mediaViewObject.style.alignContent = "center";
663+
this.mediaViewObject.style.height = "auto";
617664
}
618665
}
619666

@@ -622,6 +669,7 @@ export class ProcPage {
622669
obj.classList.add('procPagesSectionActive');
623670
obj.classList.add('pagesVisOn');
624671
obj.classList.remove('pagesVisOff');
672+
obj.scrollTop = 0;
625673
});
626674
}
627675

@@ -675,7 +723,11 @@ export class ProcPage {
675723

676724
if( sectionData.name != '' ){
677725
let sectionTitleDiv = document.createElement('div');
678-
sectionTitleDiv.classList.add('procPagesNavSectionStyle');
726+
if( this.layout == 'triple' ){
727+
sectionTitleDiv.classList.add('procPagesNavSectionStyle');
728+
}else if( this.layout == 'vertical' ){
729+
sectionTitleDiv.classList.add('procPagesVerticalLockNavSectionStyle');
730+
}
679731
sectionTitleDiv.classList.add('procPagesButtonStyle');
680732
sectionTitleDiv.classList.add('procPagesSectionNavColor');
681733

@@ -722,10 +774,13 @@ export class ProcPage {
722774
let captionParent = document.createElement('div');
723775
captionParent.classList.add('procPagesMediaCaptionParentStyle');
724776

777+
this.applyPageStyle( 'sectionCaption', captionParent );
778+
725779
let caption = document.createElement('div');
726780
caption.classList.add('procPagesMediaCaptionStyle');
727781
caption.innerHTML = innerHtml;
728782

783+
729784
captionParent.appendChild( caption );
730785
sectionMedia.appendChild( captionParent );
731786
}
@@ -742,6 +797,7 @@ export class ProcPage {
742797

743798
// -- -- --
744799

800+
745801
applyPageStyle( styleType, obj ){
746802
if( this.pageStyles.hasOwnProperty( styleType ) && Array.isArray( this.pageStyles[ styleType ] ) ){
747803
this.pageStyles[ styleType ].forEach(( style )=>{ style!=''&&obj.classList.add(style) });

‎docs/pages/aboutMe.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,24 @@ const pageContentObject = {
2020
'page' : 'AboutMe',
2121
'title' : 'About Me; Kevin Edzenga',
2222
'theme' : '#656565',
23+
'layout' : 'vertical',
2324
'header' : 'About Me',
2425
'subHeader' : '',
2526
'pageStyles' : {
2627
'block' : ['procPagesContentStyle', 'gitAboutMePageStyle'],
2728
'before' : [ 'procPagesInnerBefore' ],
28-
'parent' : [ 'procPagesParentStyle', 'gitAboutMePageParentStyle' ],
29+
'parent' : [ 'procPagesParentStyle', 'gitAboutMePageParentStyle', 'procPagesLockVertical' ],
2930
'header' : [ 'procPagesHeaderStyle' ],
30-
'subHeader' : [ '' ],
31-
'inner' : [ 'procPagesLayoutTripleStyle' ],
32-
'sectionHeader' : [ '' ],
33-
'sectionNav' : [ '' ],
31+
'subHeader' : [],
32+
'inner' : [],
33+
'sectionHeader' : [],
34+
'sectionNavList' : [ 'gitAboutMePage-sectionNavListStyle' ],
35+
'sectionNav' : [],
3436
'sectionNavButton' : [ 'gitAboutMePage-sectionNavButtonStyle' ],
3537
'sectionNavButtonActive' : [ 'gitAboutMePage-sectionNavButtonAvtiveStyle' ],
36-
'sectionContent' : [ '' ],
37-
'sectionMedia' : [ '' ],
38+
'sectionContent' : [],
39+
'sectionMedia' : [],
40+
'sectionCaption' : [ 'gitAboutMePage-sectionCaptionStyle' ],
3841
'content' : [ 'procPagesScrollbarStyle' ],
3942
'media' : [ 'procPagesScrollbarStyle' ],
4043
'after' : [ 'procPagesInnerAfter' ]

‎docs/pages/aboutMe/aidev.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const pageListingData = {
66
'type' : 'video',
77
'src' : '../pages/aboutMe/images/esnLearning.webm',
88
'alt' : "ESN Horizontal-Vertical Slice",
9-
'style' : 'procPagesImageStyle',
9+
'style' : ['procPagesMediaStyle', 'procPagesLimitWidthStyle', 'setAspectRatio_1'],
1010
'caption' : ["Upper left are videos I made, upper right are 'rates' of learning R-G-B,",
1111
"Red shows known patterns, green are parent edges, & blue are 'less likely' patterns.",
1212
"The bottom are two slices; what the brain thinks its seeing & then predicting."
@@ -16,7 +16,7 @@ export const pageListingData = {
1616
'type' : 'video',
1717
'src' : '../pages/aboutMe/images/learningGradients_84.webm',
1818
'alt' : "ESN Horizontal-Vertical Slice",
19-
'style' : 'procPagesImageStyle',
19+
'style' : ['procPagesMediaStyle', 'procPagesLimitWidthStyle', 'setAspectRatio_1'],
2020
'caption' : ["Different slices from the same ESN, with different input video.",
2121
"Upper left is a video I made the AI's watching, upper right is detecting movement;",
2222
"Lower left is the brain's wrinkles, lower right is predicted movement."
@@ -26,7 +26,7 @@ export const pageListingData = {
2626
'type' : 'image',
2727
'src' : '../pages/aboutMe/images/learningGradients_84_brainSlice.png',
2828
'alt' : "Custom ESN Learning Gradients",
29-
'style' : 'procPagesImageStyle',
29+
'style' : ['procPagesImageStyle', 'procPagesLimitWidthStyle', 'setAspectRatio_1'],
3030
'caption' : ["A slice of the ESN's brain by frame 101 of watching the X pattern video."]
3131
}
3232
],
@@ -84,7 +84,7 @@ export const pageListingData = {
8484
8585
8686
<br>Since I didn't have a good use case for the ESN in Python,
87-
<br>&nbsp;&nbsp; I built a similar ESM through C# in Unity to operate NPC's ability to learning player habbits.
87+
<br>&nbsp;&nbsp; I built a similar ESN through C# in Unity to operate NPC's ability to learning player habbits.
8888
<br>The logic is pretty simple, so running by CPU is fine for now,
8989
<br>&nbsp;&nbsp; I'll likely look to move it to GPU in the future, if need be.
9090
<br>I set it up to learn less often when the player is in another room.

‎docs/pages/aboutMe/filmWork.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const pageListingData = {
66
'type' : 'youtube',
77
'src' : 'er4E9K_4jpU',
88
'alt' : 'Blue Sky Studios film reel',
9-
'style' : 'procPagesMediaStyle'
9+
'style' : ['procPagesMediaStyle', 'procPagesLimitWidthStyle']
1010
}
1111
],
1212
'content' : `

‎docs/pages/aboutMe/plushies.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,27 @@ export const pageListingData = {
66
'type' : 'image',
77
'src' : '../pages/aboutMe/images/plushies_YearReview_2024_Overview.jpg',
88
'alt' : "The plushies I made in 2024",
9-
'style' : 'procPagesImageStyle',
9+
'style' : ['procPagesImageStyle', 'procPagesLimitWidthStyle'],
1010
'caption' : ["My 2024 year in plushies!"],
1111
},
1212
{
1313
'type' : 'image',
1414
'src' : '../pages/aboutMe/images/pl_uvToFabricPattern.jpg',
1515
'alt' : "Houdini screenshot of Daryll getting flattened",
16-
'style' : 'procPagesImageStyle'
16+
'style' : ['procPagesImageStyle', 'procPagesLimitWidthStyle']
1717
},
1818
{
1919
'type' : 'image',
2020
'src' : '../pages/aboutMe/images/a04_DaryllTheDuck_A_main.jpg',
2121
'alt' : "Daryll the 'Rubber Duckie'",
22-
'style' : 'procPagesImageStyle',
22+
'style' : ['procPagesImageStyle', 'procPagesLimitWidthStyle'],
2323
'caption' : ["Daryll all done!"],
2424
},
2525
{
2626
'type' : 'image',
2727
'src' : '../pages/aboutMe/images/FrankTheFish_n_Pinky.jpg',
2828
'alt' : "Frank the Fish on his Pinky Flamingotube!",
29-
'style' : 'procPagesImageStyle',
29+
'style' : ['procPagesImageStyle', 'procPagesLimitWidthStyle'],
3030
'caption' : ["Frank The Fish chillin' out on his Flamingotube"]
3131
}
3232
],

‎docs/pages/aboutMe/whoAmI.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const pageListingData = {
66
'type' : 'youtube',
77
'src' : 'trt9dGUYevs',
88
'alt' : 'Technical Art Reel 2024',
9-
'style' : 'procPagesMediaStyle'
9+
'style' : ['procPagesMediaStyle', 'procPagesLimitWidthStyle'],
1010
}
1111
],
1212
'content' : `

‎docs/pages/blog.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,18 @@ const pageContentObject = {
2020
'pageStyles' : {
2121
'block' : ['procPagesContentStyle', 'gitBlogPageStyle'],
2222
'before' : [ 'procPagesInnerBefore' ],
23-
'parent' : [ 'procPagesParentStyle', 'gitBlogPageParentStyle' ],
23+
'parent' : [ 'procPagesParentStyle', 'gitBlogPageParentStyle', 'procPagesLayoutTripleStyle' ],
2424
'header' : [ 'procPagesHeaderStyle' ],
25-
'subHeader' : [ '' ],
26-
'inner' : [ 'procPagesLayoutTripleStyle' ],
27-
'sectionHeader' : [ '' ],
28-
'sectionNav' : [ '' ],
25+
'subHeader' : [],
26+
'inner' : [],
27+
'sectionHeader' : [],
28+
'sectionNavList' : [ 'gitBlogPage-sectionNavListStyle' ],
29+
'sectionNav' : [],
2930
'sectionNavButton' : [ 'gitBlogPage-sectionNavButtonStyle' ],
3031
'sectionNavButtonActive' : [ 'gitBlogPage-sectionNavButtonAvtiveStyle' ],
31-
'sectionContent' : [ '' ],
32-
'sectionMedia' : [ '' ],
32+
'sectionContent' : [],
33+
'sectionMedia' : [],
34+
'sectionCaption' : [ 'gitBlogPage-sectionCaptionStyle' ],
3335
'content' : [ 'gitBlogPageScrollbarStyle' ],
3436
'media' : [ 'gitBlogPageScrollbarStyle' ],
3537
'after' : [ 'procPagesInnerAfter' ]

‎docs/pages/init.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const pageContentObject = {
2525
'block' : ['procPagesContentStyle', 'gitInitPageStyle'],
2626
'parent' : [ 'procPagesParentStyle', 'gitInitPageParentStyle' ],
2727
'header' : [ 'procPagesHeaderStyle' ],
28-
'inner' : [ 'procPagesLayoutTripleStyle' ],
28+
'inner' : [],
2929
'content' : [ 'procPagesScrollbarStyle', 'gitInitPageWidthStyle' ],
3030
'media' : [ 'procPagesScrollbarStyle' ]
3131
},

0 commit comments

Comments
 (0)