# CapstoneDevelopment Charette (0): Testing the formulation of text, color, size, and image variables Dev1: stopped at bug of trying to get variables to stay on click, make it show/hide properly, and trying to get the variable classes not to pile up Dev2: duplicated to Dev 3 right before trying to get rid of skrollr. Bugs from dev1 were all fixed and more variables like color and font were added. Dev 3: got rid of scroll and implemented position: sticky in css for scrolling, which required making the section height longer so the position stuck for longer as well as giving the sticky elements some margins (top/bottom). Changed "phrase header" placeholder in variable state to the actual text of the phrase hovered over. Dev4: delete scroll file. Cleaned up variable function syntax. Make separate variables for image width and height instead of just image size. Link image placement and size variables. Ability to scroll through variable overlay when clicked. Dev5: Change blur toggle. Cleaned up phrase groupings. Started to add line/rectangle dropdown div to each section heading. Rectangle expand when click heading, show explanation working for pledge. show about by clicking landing page title. ease into variable overlay. adjust size and placement option of phrase based on length/size. Dev6: Created empty folders for structure of image and text variables. added more colors on color variables. first attempt (failed) at loading txt file into div (need to use a database i think). Placeholder variable image load. Placeholder article text load from http (through GitHub repository link). consolidate add and remove variable classes into functions. Dev7: delete old comments. got image loading to work with variable between css and javascript. add content for pledge1 phrase. title animation.X on exit overlay for variables. add small title. changed position of article. going to duplicate to dev8 before trying to make article scroll without page scroll. Dev8: article container and scroll. buttons to jump to each one. title becomes clear on hover. content on pledge. Dev9: Change entry to click to about then scroll (the title page is the overlay/stop scroll as opposed to the other way around). Basic scroll hint on about. Add more fonts. Grow/shrink title sequence entry. Captions. Dev10: tried to implement full page -- didn't work so far (3/19 went back to dev9) Dev 11: tried to optimize by using transform translate instead of recalculating top and left -- struggle bc can't do 2 separate transforms on same element (3/19 went back to dev9) --> deleted folder and reduplicated dev9 to dev11 (3/20) --> Successfully changed image and phrase variable placement to transform translate. More colors. Max and min width for section text. Change the way articles appear with side panel expand and scroll. allow user to drag phrase out of the way of article. Dev12: put imgOverlay div within imgContainer div. slow down fade in of variables on hover. title sequence image fading. animated articleBoxPeek. activate container in area smaller than window. Dev13: add scroll indication to about section. change the way the read article layout appears/animation to it. Add "Read More" indication. start making archive. add media query css for mobile device. add bounce on read more button. Dev 14: Fill in all content for all sections. add progress bars/buttons. animate phrase on read more instead of drag. flesh out archive. add source links to all articles. do menu instead of view in archive button. allow to go to about page from anywhere and go back to the section it was on.