Table of Contents

Website Todo Lists

Todo

Port from Cure Interactive

Toggle
  • Integrate animated winter and valentines backgrounds
  • Add Web Development page - Photo Galleries (Photoswipe, Owl Carousel)
  • Port News pages
  • Port Web Development page - Privacy Policy
  • Port Web Development page - Privacy Policy (Cookie Settings)

Content

Toggle
  • Add Artwork (Drawings, Logos)
  • Add Unreal Engine content
  • Comic illustrate 404 "..you nearly had it.." phrases.
  • Add Web Development page - Custom Context Menu
  • Add Web Development page - Custom Cursor
  • Add Web Development page - Random Color Generator
  • Add Web Development page - Animated Weather Backgrounds

CSS / SASS (SCSS)

Toggle
  • Replace section extra top and bottom padding with thicker borders to preserve visual spacing between section boundry and it's contents.
  • Clear out unneeded comments.
  • Fix bottom of details line going into section bottom padding area.
  • Convert $page_gaps from px to em
  • Convert em to rem where possible
  • Fix padding problems with pre code and .div--content elements.
  • Fix right padding/margin with custom select dropdown arrow. (Found in html_unicode_character_table_and_keyboard.html)
  • Improve address, possibly using hanging indent.
  • Add .x2 variants of arrow_* and anchor images
  • Fix img bottom border, possibly with display: block;.
  • Fix picture > img overflowing.
  • Implement media screen and media print for print friendly styles
  • Add hidden image-preload element with dynamic descendant adding (using gulp-file-include) to preload images using arrays of css background images that can be defined in css files and included on a per-page basis (base + separates).

JavaScript

Toggle
  • Expand musicplayer shuffle functionality
  • Move shared functions to their own files (events.js, classes.js, etc) by using addEventListeners and dispatchEvents such as in contact_form.js -> disabled_shake.js and cookie_notice.js -> frame.js
  • Make resize event for 500ms frame resizes universal (modular) and make it respect conditional jumping when resize is too far or on mobile (also use breakpoint method that needs to be found in one of the files) (current files: chartist.html -> chartist.custom.js, frame.js, contact_form.js, and anything else with a 500 millisecond loop post-resize event.).
  • Make cookie notice shrink close work for any element and have it make the page update in realtime with it.
  • Fix iOS header jitter past viewport top
  • Have 404 page suggest going back a breadcrumb (http://localhost:3000/html/web_development/chartist.html -> http://localhost:3000/html/web_development.html or http://localhost:3000/html/web_development.html -> http://localhost:3000/index.html).
  • incorporate header height in TOC anchor scroll positions
  • Add short page toggle to responsive_cookie_notice.html
  • Fix header sliding delta lag (2.4px when should be 0px)

Gulp

Toggle
  • Combine TOC and breadcrumb modules into one unique personal module.
  • Fix HTML Plumber found unhandled error: Error: Callback called multiple times error.
  • Prevent watching of _* image directories and files
  • Add SVGs to image watch list
  • Finish README.txt sections on what each file has done to it during build process, and what the scripts all do.

Completed

Toggle

Port from Cure Interactive

Toggle
  • Port Web Development page - Debug Console

  • Port Web Development page - Cure Interactive Archive - Web Development Services Will be doing this for the New Cure Interactive Website that will be based on this project.
  • Port Web Development page - Chartist Graphs
  • Port Contact page
  • Port Valentines background (make animated)
  • Port Snowfall background effect
  • Port Password Interface
  • Port Population Lonesome Music (and music player)
  • Port Note Styles
  • Port Parallax Images test
  • Port Backdrop Filer Blur test
  • Port Character Escaper
  • Port Drop Shadows
  • Port Interactive 3D Boxart
  • Port Alert Sytles
  • Port Responsive Cookie Notice
  • Port CSS Styles
  • Port Frame (structure)
  • Port Modernizr
  • Port Grid system

Content

Toggle

  • Add Music Covers Page
  • Add frequency bar visualizer to music player. 1/10 times distortion on iOS, so disabled for it.
  • Add Centered Sections toggle to html_style_test.html

CSS / SASS (SCSS)

Toggle

  • Fix form inner content paddings.
  • Fix details inner content paddings.
  • Remove bottom border radii from the last inner element of content-overflow when overflowed.
  • Globalize padding and margin use for elements vertically contained in boxes
  • Place .div--overflow-inset, section, and .row references in correct locations.
  • Fix table overflowing.
  • Incorporate safe-area-bottom into stickycontent (will require js margin-bottom addition in frame.js).
  • Add hover and active interactive fade styles to summarys.
  • Convert all ::before selectors to :before to enable IE 8 and earlier backwards compatibility.
  • Convert all media queries to mobile-first design (> instead of <=)
  • Fix frame mobile styles.
  • Align .content and #backtotop margins/widths in iOS Safari.
  • Improve margins and paddings for breadcrumbs
  • Fix margin-bottom usage in overflow-box, section and other :last-child instances.
  • Add counters numbering system to headers and table of contents. (4 hours)
  • Make multi-column lis display: inline-block to avoid jittering while resizing. (6-8 hours)

JavaScript

Toggle
  • Switch from element level click events to global click events, where possible.

  • Add shift-click and double-click Details cascade for use in-page and on table of contents (opens or closes all descendant details). (4 hours)

Gulp

Toggle

  • Allow any html content in stickycontent area.
  • Fix CSS _*.scss files not triggering builds for their including parents.
  • Fix HTML _*.html files not triggering builds for their including parents.
  • Clean up installation batch files and other scripts.
  • Add redo_* tasks to gulp.
  • Add mangeling to separate js files.
  • Add minification to separate js files.
  • Include all headers in table of contents and set the deepest ones visibilities via classes to reflect their depth or using * > * direct descendant selectors in CSS.