+ AcrylicStyle.com Site Changelog + [7/21/13 - ???] -Updated the offline feature. The site now stores every page offline, and the code will double check for updates on it's own (when you load the site, if there's an update it will automatically download it and refresh). -The like, follow and +1 buttons in the menu now load when you mouse over the menu button, instead of load when the page does (it makes the site a lot faster on start up). On mobile these buttons don't load at all (for both speed and usability). -The JavaScript code I wrote is now asynchronous on new browsers and deferred on old ones. What this means is on new browsers the JavaScript loads when the site loads instead of forcing the rest of the site to wait till it's done, and on old browsers it loads when the site is done loading. -The background of the menu only animates if your browser supports requestAnimationFrame, which in simple terms is a feature that pushes the browser to 60 Frames Per Second to make the animation smooth. It'll also drop back to 0 FPS if the menu is closed or if you go to another tab or window while the menu is still open. -The menu now displays a scrollbar if your screen is too short. -The image in the header scrolls with the page. This is just an aesthetic change and this doesn't work on mobile, not that it can't, it's just pointless because of how most mobile browsers handle scrolling. -The scrollbars now have their own style when viewed on Chrome or Safari (or any supporting WebKit browser). -The scrollbars share the site colors when viewed on Internet Explorer. -The site now shows a fallback design if your browser doesn't support features we use. For emphasis on how great this is, the fallback works on the Sony PSP browser. -Internet Explorer 8 and below now displays the fallback design. If users want to see the proper site they must upgrade or install Google Chrome Frame. -Added a spiffy loading screen for browsers that support the non-fallback design (the site loads so fast that you probably will never see it). -I've returned the options section, the color picker now changes the menu background and you now have the option to disable the menu animation. The background color is also imported from the original background settings. -The site now caches almost everything, so the site should be increasingly faster than before. Bugs I'm aware of: -Sometimes when opening up the menu, one or two (or more) of the menu items may not slide out. I've made a temporary fix. Just move your mouse around the page and they should fix themselves. -On pages that don't have a large amount of stuff underneath the header, the box with the content isn't at the bottom. I'm working on a solution for this right now. -The blog won't have infinite scrolling in the end. It uses too many resources (bandwidth, CPU, etc...). -The scrollbar doesn't show up on the blog, I've no idea why. -You can scroll sideways in the menu on some mobile browsers (namely iOS), I'm not sure if there's a fix for this (it's not serious anyways). -Content boxes show up black on the PS3 browser, not sure why. -I still haven't come up with what the blog posts should look like. -The site acts crazy on the Nintendo Wii browser, I don't know why but I feel very compelled to fix this. -Sometimes the background settings on the old site becomes dominant over the new options page. I won't fix this as it's a waste of time. -The blog demo doesn't adhere to the settings on the option page, this is because it doesn't have an "acrylicstyle.com" URL, there's no fix for this, this is a browser security feature. [7/21/13 - 5:38pm] -The error page now knows when you're offline or not (every page does actually). [7/23/13 - 1:44am] -Just updated the code to only load fonts from Google when needed (aka Internet Explorer 9 and below), so now for major up to date browsers, fonts are only loaded from the offline cache (saving bandwidth and time). This also helps devices like the Nintendo Wii and Sony PSP from being slowed down by useless HTTP requests. -Also added the option to disable 3D effects. [7/27/13 - 12:25am] -Added IE11 live tile support. [7/29/13 - 6:08pm] -Removed the background on the menu button (trying to make it feel like it's not in the way) and increased the amount of space to click it by a tiny bit. -Added a new button style. -Changed the textbox style. -Added a new checkbox style for the options page (they now look like switches instead of checkboxes). [7/22/13 - 10:05pm] -Updated the offline refresh code to guarantee that it loads updates to the site from our server. [7/23/13 - 6:36pm] -Dropping AddThis from the site as it's too slow. [7/28/13 - 10:53pm] -Like, Tweet and +1 buttons are now rendered directly by Facebook, Twitter and Googles code and not AddThis making the site a lot faster. -Also the menu now uses the CSS Transition standard instead of the Animation standard for when the menu items slide in. This is a downgrade somewhat but will ensure that menu items stop disappearing for no reason. [7/29/13 - 12:35pm] -Created a page to fix appcache errors if necessary (do not share this ever). http://acrylicstyle.com/fix.html The code for this will be stored in our index page (the one at http://acrylicstyle.com/) when the new update comes around. [7/29/13 - 4:51pm] -Just added a neat 3d scrolling animation to the blog section (Doesn't slow things down either). [7/30/13 - 2:47am] -Put the Like, Follow and +1 buttons back in the menu (for the sake of promo). They're using the codes from Facebook, Twitter and Google now so they load way faster than before (they used to slow the site down a bit due to AddThis). [7/31/13 - 1:06am] -Fixed some error where Opera wouldn't load the site. Opera Mini sadly still has this error (I might just remove the loading screen altogether). [7/31/13 - 2:01pm] -Doing a last minute overhaul of a lot of the code, lol. Created a few unimportant bugs in the process, fixing them as I go along, but all in all the site should be a bit faster. [7/31/13 - 11:41pm] -Updated the AppCache fixer to look spiffy. http://acrylicstyle.com/fix.html (again don't share) [8/9/13 - 9:37pm] -Updated the animations to require 3D support in order to work (just a cheap way of weeding out the new browsers/computers from the old). -Also removed some minor fallback animations to keep old browsers that support CSS animations speedy. [8/18/13 - 6:46pm] -Updated the Options to now use HTML5 local storage instead of cookies. Now the settings won't expire every 365 days, and the site is a bit faster. This breaks support for the settings on blog.acrylicstyle.com for now as it's a different domain but I've a fix for that which will use an iframe down the line. [8/21/13 - 2:01am] -Just updated the server side code so that browsers cache our CSS file for a month outside of the offline features. So older browsers like Internet Explorer 8 and below and browsers that don't support HTML5 AppCache will keep our CSS file stored offline for a month, which will make the site faster and save us bandwidth. [8/23/13 - 8:16pm] -Made some small tweaks to the animation code. Now no animations are shown at all unless your browser supports 3D transforms. -Currently trying to figure out how to fix an error with the PS3 browser that keeps the first post from being shown. [8/23/13 - 10:03pm] -Updated the music page with And-Y's "Y.U.P." along with updated the player to show off our newer music. [8/26/13 - 1:53pm] -Added follow buttons to the About page like how we used to have it. [8/28/13 - 12:16am] -Updated the server side code that caches our CSS file for a month to cache almost everything for a month and cache the HTML pages for a far smaller amount of time (since they're updated more often). This means that those banner images will now be cached, speeding up our site by a lot and saving a ton more bandwidth. Also this type of caching works on all browsers, not just ones with offline support. [9/21/13 - 3:32pm] -Updated the music page (added Elliott). -Transferred the localStorage (used for the options page) to an iframe (to later set things up for the blog section to read it). [9/22/13 - 1:41am] -Done some work on http://acrylicstyle.com/widget.html This will power the Windows Vista/7 and Mac OS X widgets from now on (along with others whenever applicable). It'll let me free my hands from having to package updates every time. [10/2/13 - 4:09am] -Temporarily disabled the options features to better prepare to use postMessage with localStorage and to avoid any experience ruining glitches for users until the code is done. -Fixed visual glitch that allowed large images to fall off of the screen (especially helpful for mobile users). -Added a slight delay to some code that opens and closes the menu extremely quickly before the user gets to use the site. -Updated the iOS icon for iOS7 (it's now just the logo by itself). -Updated the meta tags for sharing to now just use the logo by itself and not the iOS icon. -Updated the CSS code to limit the width of all iframes. -Updated the Blogger code to defer more links and elements (currently only supported in IE11). -Added "language" attribute to script tags (this attribute was depreciated in browsers years ago, just added it in case it'd matter for legacy support). [10/2/13 - 1:40pm] -Updated the JavaScript to detect changes in the AppCache and refresh a bit earlier. [10/4/13 - 8:45pm] -Added a search bar to the blog and to http://acrylicstyle.com/app/ [10/5/13 - 5:28pm] -Changed the code so that the first post on a page doesn't animate (to not confuse users). [10/6/13 - 3:22am] -Changed the CSS code to hide the social widgets in the menu when offline. -Added the search bar to every page. -Changed the code for outdated browsers to go to #bump instead of #close in the URL. [10/6/13 - 4:25pm] -Updated the CSS code to always show the scrollbar in IE10+. This keeps it from hovering slightly over the search button. [10/10/13 - 6:08pm] -Updated the CSS code to fix the search bar in WebKit and Blink browsers and I've updated the JavaScript code to permit scrolling in the menu. -Also some of the site code now uses the brand new CSS Flexbox feature. It's not really ironed out yet, but it's there. October 10, 2013 at 6:08pm · Like [10/11/13 - 1:16am] -The menu animation on the site should be smoother thanks to "requestAnimationFrame", the previous code wasn't written correctly. -Also changed the underlying code that runs a bunch of the animations, so those should work better now. [10/11/13 - 1:54am] -Just (literally just) updated the code to allow users of outdated browsers to be able to use the search function. -Also fixed an issue with clicking the title for these users also. [10/11/13 - 7:52pm] -Fixed a glitch in the PSP browser that made the search button too wide. -Added a link to our RSS Feed to our about page. -Updated the search box to make all searches directly under blog.acrylicstyle.com/search which should fix an issue with Firefox. -Resubmitted our Firefox OS app to the Mozilla Marketplace. [10/13/13 - 6:36pm] -Added some code that uses CSS @Supports to check if the browser is modern and then displays a loading screen over the site until everything is ready. [10/18/13 - 4:10pm] -Just submitted our website to the Amazon App Store. -Also republished our app to the Mozilla Marketplace (https://marketplace.firefox.com/app/acrylicstyle/). [10/22/13 - 6:50pm] -Added code to make the fullscreen web app on iOS not open links in a separate browser, still more work is needed to ensure this. [10/24/13 - 6:34am] -Next year (2014), I may remove all WebKit prefixed transitions and transforms from the CSS on the site. What this means is that any version of Safari before Mavericks or iOS 7 may not display animations or 3D effects (There is still Safari 6.1 for Mountain Lion which adds some of the features that Safari 7 on Mavericks does, but seeing as Mavericks is free I won't bother with any testing. If they care about animations and 3D, they can update.) This will also remove animations and 3D effects in the Android browser (4.4 and higher may still work), WebOS browser (I'm unsure about Open WebOS), Blackberry Browser (newer updates may be different), Dolphin Browser, and more. The site will still work, users will just lose out on those small details. [10/25/13 - 12:32pm] -Updated the icon font (Font Awesome) to version 4.0.0. This just gives us more icons to work with, makes the files smaller saving bandwidth, space and increasing speed, and I think it may look a bit better than before (not sure). [11/6/13 - 11:46am] -Disabled the ability to zoom on mobile browsers. This makes the buttons faster as the browser doesn't have to guess if you're going to double tab to zoom into something, it also makes things easier by keeping users from accidentally zooming in and out. For disabled people that need this as an accessibility function, I'm confident that they can just use the built in accessibility features in iOS, Android and others to make up for the lack of double tap or pinch to zoom. All in all, this just makes the site a little bit faster on mobile. [11/9/13 - 1:44am] -Updated the site so users running Android 2.3 (and maybe lower) now see the Lobster Two font on the site and will have it stored offline. -This update will also store the font I use to display the icons offline for that userbase so now there aren't any weird visual issues when opening the site without a connection. It'll make the site take longer to load for everyone, but it won't be a noticeable change and the offline features should make them negligible anyways. In the long term I'll remove this, I'm just waiting for the Gingerbread marketshare to drop really low first. [11/26/13 - 2:58am] -Returned the ability to zoom on mobile browsers in case people used it, but still removed the 300 millisecond delay that comes with clicking on something by using -ms-touch-action and touch-action on IE10 and 11 and width=device-width on Chrome 32. So in IE10, 11 and Chrome 32 this delay doesn't exist at all (now I'm just waiting for Firefox and Safari to join in). [11/26/13 - 4:54am] -Added this code: http://www.thecssninja.com/javascript/pointer-events-60fps To improve scrolling performance on desktop browsers. [1/13/14 - 8:13am] -Since DeShay's host (the server we host AcrylicStyle.com on) provides PHP support, I'll be transitioning the site over to a PHP back end instead of just raw HTML. This will make it a lot easier to update in the future. [1/13/14 - 10:12am] -http://acrylicstyle.com/home/index.php Already began working on it. There shouldn't be any noticeable differences as that's the goal. [1/13/14 - 10:47am] -lol, I work faster than I think. I'm done, the new backend is running now. [1/20/14 - 8:06am] -I set up a backup server powered by Google App Engine (http://app.acrylicstyle.com/). This is just in case anything goes wrong with DeShay's server. There are currently quite a few bugs (all due to my lack of inexperience with AppEngine) but they'll be sorted out over time. Also don't share this, I don't mind if anyone sees it, but I don't want people using it full time as it has bandwidth limits. [1/21/14 - 12:14pm] -Made one tiny tweak to the menu buttons to keep the server from making one small redirect (making things a bit faster and putting less stress on the server). -Added a 196px icon for Android devices that have an utterly ridiculous screen resolution. -Updated the Font Awesome icon font from version 4.0.0 to 4.0.3. -Updated the CSS code to accommodate the new Font Awesome update. -Fixed something stupid I did to the CSS code that kept users from being able to scroll up and down in the menu if their screens were too small. [1/22/14 - 8:44am] -Just removed the 3d rotation icon animation in the menu when hovering over items as it'd cause the whole menu to jump in Chrome (and presumably Safari). [2/30/14 - 5:24pm] -Just made the site even faster, I added redirect headers to the PHP code so when you go to the home page or click to go to the blog it switches to the proper page in an instant. [2/7/14 - 1:10pm] -Added an icon for the Kik browser (more info here: https://gigaom.com/2014/02/05/kik-messenger-embeds-a-browser-in-its-app-letting-users-share-web-content/). [2/10/14 - 4:20pm] -Working on a new index page which you can find here: http://acrylicstyle.com/index2.php It's currently broken as hell, the overall goal is to replace the "/home" in the url with nothing. Just a plain old "/" by itself. But I want it to use the PHP files that automate many features of the site so that the homepage doesn't have to be edited separately from everything else. [2/12/14 - 10:33am] -Finally got around to making an SVG version of the Acrylic Style background! (http://acrylicstyle.com/pattern.svg) I used Inkscape and a PSD plugin to do it (since I had already made it in vectors via PSD format). (http://www.inkscape.org/, http://pernsteiner.org/inkscape/psd_import/) It'll still be a while before I can do this with the logo, sadly the Inkscape PSD plugin doesn't support "Layer Strokes" and I relied on that to make the outline, so when loaded in Inkscape all you get are the X's and nothing else. [2/12/14 - 11:39am] -Added the SVG background to the site with a proper PNG fallback for outdated browsers. [2/17/14 - 12:17am] -OK, we now officially have an .SVG logo (Http://AcrylicStyle.com/logo.svg). Thank Ford as he used Illustrator (and I think Photoshop) to convert it to a vector format (.ai). I later did a 2nd conversion into an .SVG format that would look good on every browser using Inkscape. So far it looks good on everything but the Android browser on versions 4.0 to 4.3 but I can fix that with no problem. [2/17/14 - 12:18am] -Added the SVG logo to the site by dropping the IMG tag in favor of a DIV that inserts the logo via CSS. People that see the SVG logo must be on a browser that supports SVG images as a background and multiple backgrounds or else it falls back to the PNG version. [2/17/14 - 12:19am] -Updated the SVG logo to simplify the code, to make it easier for someone to edit in Inkscape and to make the file take up less space. [2/17/14 - 12:32am] -Added the background animation seen in the menu to the search section at the top of the site just for uniformity. -Gave credit to Kevin Brown and Ford4D in the metadata of the SVG logo, also gave credit to Kevin in the SVG background metadata. -Wrapped the title in the menu in an H1 tag so that the title stands out more on an old browser like the Sony PSP browser. -Added the SVG logo as a favicon for the few browsers that support SVG as a favicon. -Added support for the relogo standard (http://relogo.org/) now that we've a proper SVG logo to support it. -Dropped all files in the appcache meant to support older browsers that have appcache support (such as the Android browser), from now on I'm only coding offline support for up-to-date browsers, all others will get [mostly] the same experience as browsers without appcache support. [2/18/14 - 4:54am] -Fixed the menu background animation so that it stops jumping. [2/18/14 - 3:51pm] -Simplified the SVG logo's code even further. [2/18/14 - 11:11pm] -Fixed the error where the X's in the logo wouldn't show up on iOS. -Had to remove some Base64 code displaying a PNG file that was used as a mask. Apparently Safari doesn't support Base64 SVG masks. I thought this would also fix the issue with the Android browser where the X's spill out of the logo, but alas it doesn't (I might drop the use of masks altogether in the logo and just crop each X that spills out of the image to fit properly for the sake of compatibility with Android and any old browsers). [2/19/14 - 5:09am] -Changed the year in the footers to 2014. [2/21/14 - 3:38pm] -Simplified the SVG logo and background even futher, they're both now under 10KB in size. [2/23/14 - 2:56pm] -Fixed something stupid I did where the PNG fallbacks weren't transparent. -Removed the code for Popular Posts from the Blog as it would show up on mobile without explanation. -Changed the Disqus settings so that the comment section looks good on a black background. -Changed the SVG logo and background to Inkscape SVGs as I found it's compatible will all conforming browsers and for some reason is smaller than normal SVG in some instances. -Made it so the menu and search buttons display their names on hover. [2/23/14 - 9:34pm] -Made a small tweak to the CSS code just in case we ever have to or just decide to migrate our blog over to Wordpress. -Currently building a Wordpress theme in addition. [2/28/14 - 7:34pm] -Updated http://acrylicstyle.com/fix.html to not have any styling so that my work doesn't constantly hamper the ability to use it. [3/2/14 - 3:59pm] -Changed the way my offline reporting code works. Instead of there being an .online and .offline class in the CSS, now it just adds data-connection="offline" to the HTML tag if the user is offline. It just makes the code stand out less and weeds out old browsers that don't need to support this. [3/22/14 - 12:45am] -Updated the Chrome web app to version 2.1, sporting the updated logo, support for any future sub-domains we may create, some preparations for the store section, and set the minimum version of Chrome to 30. -Added a .webp favicon to the site. Not sure if it works, but it's there. [3/26/14 - 5:22am] -Added Web Slice support for Internet Explorer 8 and up (just because I could). [4/2/14 - 3:27am] -Resized the SVG pattern to 60x60 pixels so that we don't have to resize it in CSS. This'll increase compatibility with browsers that support SVG in CSS but not CSS background resizing. -Updated to Normalize 3.0.1 in the CSS code. [4/2/14 - 7:11pm] -Compressed the SVG background pattern form 11.1KB to 2.2KB. [4/3/14 - 9:37pm] -Added the Acrylic Style logo next to the Menu button to attract more attention for it (it also animates a bit). [4/4/14 - 8:27pm] -Updated the SVG logo so that it shows up properly in the pre-KitKat Android browser and in Chrome for Google TV (and I'm assuming other old browsers that support SVG). [4/4/14 - 9:00pm] -Compressed the SVG logo from 33.8KB to 17.0KB. Also resized it to 128x128 pixels. [4/5/14 - 7:07pm] -Fixed an error that caused the loading screen to not show up. -Updated the loading screen to just use the same element for the logo as the other areas to make updating the logo in each area easier and universal. [4/6/14 - 5:02pm] -Removed the button press effect from the Menu and Search buttons, I just felt like I was doing too much there. [4/11/14 - 1:54pm] -Moved the web widget code to http://AcrylicStyle.com/widget/ incase we ever switch from a PHP backend. -Fixed the error causing the web widget to not display images. -Also updated the Windows Gadget, Mac OS X widget and Windows XP active desktop widget to use the web widget from now on so we have one central place to update everything. [4/14/14 - 11:34pm] -Updated the SVG logo even further to fix an issue with the transparent border and compress it in size. It's now 12.0KB. [4/28/14 - 10:54pm] -Took a step back with compressing the SVG logo due to compatibility problems when viewed in Nautilus on Ubuntu Linux (and likely other OSes/Platforms/Applications). The file is now 13.1KB (which isn't much of an increase really, I've just been ridiculous). [5/12/14 - 3:04pm] -Updated the logo in the menu and loading screen to not trip up any accessibility features in web browsers (good update for handicapped users). [5/23/14 - 6:27pm] -Added the CSS will-change attribute to some parts of the site. It tells the browser that a specific part of the site is destined to update or animate so that it knows to be ready to not have things appear jumpy. It doesn't yet work in the current version of Chrome (35), but it's shipping in the next version (36) so I felt now would be a good time to be prepared. [5/25/14 - 12:29am] -Updated the live tiles on Windows 8 to support more sizes. [5/25/14 - 4:31pm] -Updated our Font Awesome installation to version 4.1.0 [7/3/14 - 1:18pm] -Updated our AppCache to reflect the new Font Awesome version (it wasn't storing the icons offline), also minified our JavaScript code so now it takes up less space. http://AcrylicStyle.com/script.min.js The original is still at http://AcrylicStyle.com/script.js [7/16/14 - 6:10am] -Thanks to the will-change feature I added back in May, our site is now faster in the newest version of Google Chrome. [8/19/14 - 11:01pm] -Temporarily switched over to our Google AppEngine server since DeShay's server is down. [9/1/14 - 10:39pm] -Added a Google+ follow button to the menu and updated the +1 button to link to AcrylicStyle.com instead of our Google+ page (also made this update on the About page). This is all because Google removed the +1 button from Google+ pages, so it's irrelevant now. [9/1/14 - 11:25pm] -Added CORS headers to file types on AppEngine to allow these files to be used by the blog. [9/30/14 - 9:19pm] -Replaced the Font Awesome "hamburger menu icon" in favor of just building one in HTML and CSS (after all it's just 3 white rectangles). This will help to display the icon on browsers that don't support css custom fonts. [10/10/14 - 5:39am] -Added a web application manifest for Chrome 39 on Android (and other browsers in the future). -Fixed the menu open animation issue where it'd jump around unless you were scrolled all of the way to the top in Chrome and Safari. -If you scrolled down in the menu and then closed it, it would jump to the top and then close. I reworked the code behind that so it now does this after the animation is over (so you don't see it), providing a smoother experience. [10/10/14 - 10:45am] -Updated the button and hump buttons on the site to be simpler (no more 3D zoom stuff). -Also experimenting with Google's Material Design ripple effect on some of the buttons (peep it on the front page). [10/10/14 - 7:19pm] -Updated the buttons yet again to add a subtle shadow. [10/10/14 - 11:28pm] -Added a little bit of JavaScript to automatically add the ripple effect to all buttons on the site (had to do it manually initially). [10/11/14 - 12:08am] -Updated the CORS settings to support HTML imports on the blog (the ripple now shows up on the blog). -Updated the JavaScript code to only add the ripple on browsers that support HTML imports. -Updated the CSS code to keep the text in the buttons white at all times. [10/12/14 - 9:23pm] -Updated the navigation menu to add the ripples to the buttons. -Updated the hidden appcache.html iframe to have the lazyload attribute incase any browsers support it. [10/16/2014 - ???] -Added site changelog to the server itself -Updated buttons to animate background color -Updated W3C manifest to not restrict app to landscape orientation -Uploaded BlueL SVG and PNG logos. [12/11/2014 - 9:35am] -Added the theme-color meta tag for Chrome in Android 5.0 (I actually did this ages ago [before Google even announced what this did in Chrome lol] but I forgot to add it to the changelog, so here it is). [1/27/2015 - 1:30pm] -Removed the mention of Google Chrome Frame from the upgrade browser dialog, since it's not being offered anymore. -Removed from the header as I didn't know what it did until now and honestly even though they're not a thing anymore, I don't mind Smart Tags. :) [1/28/2015 - 11:02pm] -Added some code to check if the site is currently visible so I can have it pause animations when the user is looking at another tab (currently using this on the loading icon and menu background animations). [2/1/2015 - 4:22pm] -Added some extra code to make sure "#cache" doesn't mess any user interactions up. -Added some extra code to stop animations when the site isn't visible. -Updated Normalize CSS to v3.0.2. -Fixed an issue with attribute selectors (put "==" instead of just "="). [2/3/2015 - 1:50am] -Added unprefixed grayscale filter to the CSS for the logo hover effect in the menu, for Firefox 35+. -Added Service Workers register code to Script.js for future proofing the site (for when we get around to switching over to HTTPS/SPDY). -Created a alt-appcache.html for the Service Worker to serve instead of appcache.html when active. -Built the Service Worker file to be usable now. [2/8/2015 - 7:18pm] -Updated app.html (which I forgot was a thing) to just redirect to /app/ -Compressed logo.svg and pattern-opacity.svg to be even smaller in size now. You may check out the old files at logo_old.svg, logo_old2.svg, logo-art.svg and pattern-opacity_old.svg respectively. [2/8/2015 - 9:25pm] -Updated the index.html files in every folder (which I also forgot were things) to just redirect to their parent folders (also made them smaller in size). -Removed the IE conditional comments from the tag and instead placed them on the tag. Explanation here: https://github.com/h5bp/html5-boilerplate/issues/1187 -Removed the nav-closed and search-closed classes from the tag, since not all browsers can display the fancy menu and search bar. -Updated script.js to add the nav-closed and search-closed classes to the tag for browsers that can display the fancy menu and search bar. -Removed the doctype and HTML tag from the top of ever .php file and instead placed them in header.php. -Added code to header.php that adds the appcache manifest based on the URL of the page. -Updated the main /index.php to use header.php instead of it's own header. -Removed the white space in the AppCache backup code. -Updated the footer to say 2015 instead of 2014. [2/11/2015 - 10:50pm] -Replaced the ripple animation with a new experimental one that doesn't require web components (based on this http://tympanus.net/codrops/2015/02/11/subtle-click-feedback-effects/). This should also make the site more lightweight as it lowers the amount of requests needed to load it (the animation will need some work though to match the buttons). Also added this animation to #navicon and #searchicon. [2/11/2015 - 11:28pm] -Removed the paper-ripple code from the CSS, HTML and JavaScript. -Removed the .raised class from the CSS as it wasn't being used. [2/12/2015 - 10:21pm] -Updated upgrade.php to use // instead of http:// to be less protocol specific. -Updated the footer to use PHP to display the current year instead of updating it manually every time. Updated the footer in the menu to do the same thing. -Removed the paper-ripple tags from the menu buttons. -Updated the blog code to reflect all of these changes. -Update redirect.html a lot! (Inline SVG logo, new updated behaviours, the works...) [2/18/2015 - 10:48pm] -Updated Video.js in http://AcrylicStyle.com/video to v4.12 and added the VLC video.js plugin and the Dash.js plugin with Dash.js itself (also added the JS files to the Silverlight and Java plugins, just missing the .xap and .jar files). [2/18/2015 - 11:08pm] -Added a Base meta tag to http://AcrylicStyle.com/video because for some reason it wouldn't load any files relatively linked, and also for guaranteeing that any and all links clicked in the player open in a new window. -Added a language attribute to the script tag that loads the custom video player code I wrote for adding pseudo-backwards compatibility to the player in the future. -Moved IE conditional tags from the HTML tag to the BODY tag (peep "2/8/2015 - 9:25pm" to understand). -Removed a lot of unnecessary whitespace from the video player code. -Removed the itemscope and itemtype attributes from the HTML tag in the video player. -Removed from the video player (peep "1/27/2015 - 1:30pm" to see why). -At some point I updated the HTML5Shiv library to 3.7.2, I don't know when I did it but I thought it's worth mentioning here. -Updated Font Awesome to version 4.3.0 (WOFF2!). -Added the WOFF2 mime-type to the server. -Added the proper WOFF mime-type to the server ("font-woff" not "x-font-woff"). [3/6/2015 - 10:08am] -Authenticated with Bing Webmaster Tools using BingSiteAuth.xml. [3/8/2015 - 10:45pm] -Added a Links section at http://AcrylicStyle.com/links. -Added an AppsFuel verification meta tag to the header. [3/8/2015 - 10:45pm] -Updated the Links section. [3/23/2015 - 11:56pm] -Updated the Links section. -Updated the AppCache to cache the .jpg images on the front and about pages. [3/25/2015 - 12:12pm] -Updated the Links section. -Updated the AppCache to cache the .jpg image on the error page. -Updated the web app manifest to include gcm_sender_id, gcm_user_visible_only and related_applications. -Updated the service worker to be aligned with the AppCache. [4/4/2015 - 7:41am] -Updated the CSS to only add will-change to an element if the page is currently being viewed, menu is open or being hovered over. [4/4/2015 - 9:15pm] -Added an "X" to the #close element to make things more clear for users. -Removed the paper-ripple element from the #close element. [4/4/2015 - 11:48pm] -Remove the paper-ripple elements from the menu and search buttons. -Updated the CSS to stop the navicon and searchicon from displaying the text when hovered (the tooltips should cover this for desktop users). [4/5/2015 - 3:00am] -Replaced the submit input tag in the search bar with a button tag instead (for styling). -Placed a large search icon within the new search button. -Fixed the CSS cursors on the loading screen and on the navicon. [4/5/2015 - 8:04am] -Added a closing bracket to the min-width 768px @media styles. -Added the current search bar text size to the 768px @media styles and changed the default size to be smaller to accomodate smaller screens. -Adjusted the sizes of the search bar and button for smaller screens. [4/5/2015 - 8:30am] -Added all of the above changes to http://blog.acrylicstyle.com/ [4/5/2015 - 12:30pm] -Added a redirect for old blog links to be moved to http://blog.acrylicstyle.com/ (doesn't yet work with specific blog posts or pages) [4/5/2015 - 3:50pm] -Added custom error responses (still uses /error/ via a redirect that just adds a hash with the specific error at the end of the URL to allow HTML, CSS and JavaScript to handle the message to the user). -Made a few small tweaks to the /error/ page (clarified who Moses is, and made the Facebook link protocol agnostic and removed the www from it). -Added a static file directory at /static/. [4/5/2015 - 7:40pm] -Completed the code for the old blog redirect (needs updating to be more specific, but it works as of now). [4/5/2015 - 10:35pm] -Made the blog redirect code more specific to the URLs that need it. -Changed appcache.html to /data/ to remove it from being tied down to being a static file. [4/10/2015 - 7:08pm] -Re-added /app/ to the server side code. [4/12/2015 - 5:09pm] -Added server side code to guarantee a trailing slash on the big sections of the site (home, about, blog, music, team, store). [4/15/2015 - 3:54pm] -Fixed whatever was causing /widget/ to not show up. -Updated the blog to align with the changes. -Removed the +1 button from the menu to reduce clutter and encourage people to follow Acrylic Style on Google+. [4/15/2015 - 11:25pm] -Updated the app manifest to only use high-res icons. -Fixed the size 228x228 favicon meta tag in the header (I think this is for Opera Coast which is why I'm even bothering). -Compressed the normalize.css part of style.css. -Added a small tweak to the appcache for /widget/. -Removed the redirect header from / to /home/ in favor of JavaScript and the meta refresh tag as the other way sometimes gets in the way of sites reading the meta tags. -Added an auto trailing slash to /app. [4/16/2015 - 7:45am] -Project Maelstrom test. [4/17/2015 - 1:15am] -Removed the "Go Back" button from /error/ when offline. [4/18/2015 - 7:42am] -Set the AppCache to provide slash redirects. -Set the AppCache when offline to send / to /home/ instead of /error/. -Set /data/ to install the service worker if on https. -Returned the PHP redirect header to /. [4/19/2015 - 9:53pm] -Added png and svg custom design QR Code images to the site. -Added the QR Code images to /links/. [5/1/2015 - 2:04am] -Added meta msapplication-cortanavcd to the header (barely even understand it). -Added vcd.xml for the Cortana meta tag to the root folder. -Added lang to the web app manifest. [5/1/2015 - 10:48am] -Updated the email address on robots.txt to HughIsaacs@AcrylicStyle.com. -Updated the OpenSearch XML file to a new name "acrylicstyle-opensearchdescription.xml" from "AcrylicStyleSearch.xml". -Updated the redirect in /data/ when not in an iframe to send the viewer to http://blog.acrylicstyle.com/. -....changelog unfinished [5/13/2015 - 9:06pm] -Updated /team/ to link to TheBlueL.com and 4DFoundation.org. -Updated /links/. -Added aac support to the server. -Added a "half-nav" class for browsers that don't support the full scope of the purpose of the "nav" class, but still enough for a basic JavaScript menu (commented out for now until the CSS code is done). [5/28/2015 - 10:03pm] -Redordered the meta tags so that the theme_color tag comes earler so that it's one of the first things set by Chrome mobile and other browsers. -Added a style attribute to the HTML tag that sets a background color for when the site is being loaded. [6/7/2015 - 2:28am] -Updated /links/. [6/9/2015 - 4:43am] -Added some tweaks to improve /app/ on iOS and a redirect to /home/ if loaded standalone. [6/9/2015 - 7:38am] -Updated the SVG favicon link tag in favor of Safari 9.0. [6/13/2015 - 1:52am] -Fixed a small problem with script.js (related to iOS standalone code). -Added some CSS code to prepare for switching the #navicon and #searchicon over to SVG images (with PNG fallback). [6/16/2015 - 11:59am] -Added /play/ to the site, a quick redirect to the front page video or song (may change the redirect reason in the future). [6/25/2015 - 1:07pm] -Added a rel="mask-icon" for a future Safari update. -Changed the sizes attribute of the favicon.ico link elements to 16x16, removing 32x32 and 128x128 isn't true as those attributes apply as well but this will change the behavior on browsers like Chrome to have them use the PNG instead. [7/3/2015 - 6:15pm] -Removed margin-left from the transition-property under "#menu section a" as it wasn't being used. -Removed the animation properties from "#menu section a:hover span" as they weren't being used. [7/4/2015 - 11:41pm] -Added suggestions to the Open Search XML file if the user types in "a" (I'll tweak this to later respond to anything the user types). -Returned margin-left to the transition-property under "#menu section a" as I realize it was for the hover animation. [7/10/2015 - 7:10am] -Updated /links/. [7/13/2015 - 1:19pm] -Updated the SVG mask icon for Safari 9, to use a black and transparent only logo as according to Apple's specs. [7/14/2015 - 5:36pm] -Updated logo.svg to be even smaller (because I'm crazy). 11KB to 8.55KB. -Finally made /team/ happen (after forever and a day). [7/18/2015 - 7:05am] -Updated the Tumblr follow widget on /about/. [7/20/2015 - 2:02am] -Replaced /icon.png with the 228x228 version. -Removed all .png icons in the header in favor of just using /icon.png since it now covers all needed sizes. -Deleted icon.webp -Renamed icon196.webp to icon.webp to take the place of the old one. -Reordered the icon link tags to prioritize the non-Safari specific SVG icon. [7/20/2015 - 8:09am] -Commented out two param tags in /acrylicstyle-opensearchdescription.xml. -Removed one of the favicon.ico image tags in /acrylicstyle-opensearchdescription.xml. -Added rel="results" to the URL tag in /acrylicstyle-opensearchdescription.xml. -Added a Query tag to /acrylicstyle-opensearchdescription.xml. [7/31/2015 - 9:46am] -Added an SVG icon to the web app manifest. -Removed .half-nav from the css code. -Removed .half-nav from the JavaScript code. -Added styles for .nav-opened and .search-opened for browsers that don't have 3D transforms, page visibility and requestAnimationFrame (basically half-nav without the new class). -Removed the requestAnimationFrame and page visibility dependencies for the site to switch from .no-nav to .nav (now it only needs support for JavaScript events and font face via Modernizr, the font face dependency is to keep Opera Mini and old browsers with event support out). -Rearranged the JavaScript code so that it switches from .no-nav to .nav a lot earlier. -Now storing /options/ offline by default in favor of the Chrome app. -Added link rel="preconnect" tags to the header for making things faster. -Reordered the link and script tags in the header so that /script.js loads before /style.css and /font-awesome.min.css. -Added link rel="subresource" and rel="prefetch" tags to load /script.js and /style.css faster. -Added a rel="prerender" tag to load /logo.svg earlier in Chrome and other supporting browsers. -Added a link to https://ly3t.bandcamp.com/ under /store/ for now. [8/2/2015 - 2:08pm] -Added PHP Variables to change the meta tags for the title, description, image and URL for links on social media sites and other sites/apps. -Made the poster image on /app/ draggable for IE9 pinned sites. -Added Opera Mini user agent detection since it supports JavaScript that we can't use (will change later to progressive enhancement somehow). -Made it so that .not-ready now requires .nav. -Rearranged the JavaScript some more so that .nav happens even earlier. [8/3/2015 - 11:46am] -Added -ms-overflow-style: -ms-autohiding-scrollbar; to the body in CSS to autohide the scrollbar in IE and Edge. -Changed the @supports requirements surrounding .js.nav.not-ready #loading to be animation-name and transform to block Opera Mini. [8/4/2015 - 7:55am] -Removed all traces of .half-nav that I could find. -Switched #navicon and #searchicon over to use inline SVG images. -Changed all instances of .icon (something I was going to use but didn't) over to focus on inline SVG images. -Added a color PHP variable for affecting the background-color on the HTML tag, theme-color and other elements. -Set the color PHP variable for all pages. [8/5/2015 - 6:56am] -Added a CSS filter drop shadow to the SVG images under #navicon and #searchicon to keep them inline with the way they looked via icon fonts. -Updated the CSS code to set overflow: hidden on #menu when .nav-closed to keep the scrollbar from showing up when the menu isn't open on PS Vita. -Removed requestAnimationFrame polyfill. -Updated the IE CSS scrollbar code to also include the proprietary unprefixed versions. -Added requestAnimationFrame to the .search-opened animation. -Removed preventDefault from #navicon, #searchicon, #close and #header and instead just stuck with return false to fix the issue with the buttons on IE9. -Replaced the icon in the search submit button with an inline SVG image. -Added styling for the placeholder text in the search box. -Updated the JavaScript code for the appCache to handle updates better. -Replaced the envelope icon next to the "ContactUs@AcrylicStyle.com" link in the menu with an inline SVG image. -Replaced the icons in the buttons in "#menu section" with inline SVG images. -Replaced the "X" in #close with an inline SVG image. -Set all of the ".icon svg" and ".icon svg path" fill colors to inherit. -Set a fill color for all anchor tags in all states (:hover, :visited, :focus). -Moved /error/ specific CSS code to be inline in /error/. -Created an HTML page with a VML version of the logo, at /static/logo-vml.html (I'll save it in .vml format later). [8/6/2015 - 7:47am] -Updated #loading to not have a border-radius (not sure why it did have one in the first place). -Updated .logo to use IE's proprietary filter for rendering PNG files for alpha-transparency. -Updated all elements that have a background-image to not display it when on IE6 and below due to the lack of PNG transparency. -Moved the link tag for /acrylicstyle-webapp.json to appear on all pages now instead of just /app/ since it declares a start page (mobile-web-app-capable and apple-mobile-web-app capable are still stuck on /app/ as it makes adding a redirect easier). -Added /acrylicstyle-webapp.json to the AppCache and Service Worker to make it possible to place the app-like experience on the homescreen while offline. -Changed the distance of #navicon and #searchicon from the top when in iOS fullscreen web app mode to 20px. -Changed the distance of #navicon and #searchicon from the top when in iOS fullscreen web app mode to 20px. [8/7/2015 - 7:50am] -Removed cache.appcache in favor of /appcache/. -Created versionno.php to easily update the version number across different pages and files. -Updated the header to use versionno.php in a query on several files to fix the issue with AppCache not updating certain files. [8/8/2015 - 8:05am] -Updated HTML5shiv. -Fixed an issue with the icon on the button for the team section in the menu not having a color when hovered over. [8/9/2015 - 6:39pm] -Added JSON+LD to the header. -Updated the Blogger template. -Updated script.js to stop the hash URLs from going through on #navicon, #searchicon and #close and also still accounting for IE9. -Added schema to more elements on the site. [8/10/2015 - 8:28pm] -Removed font awesome from the site as it's not needed any more and to lighten the load time and amount of data this site uses. Will still be using the font awesome icons, just converted into SVG format. -Deleted /maelstrom/, moved code to /test/. -Removed drop shadow filter from #navicon and #searchicon as it made them disappear in Firefox. -Added JSON+LD data to every post on the blog. [8/12/2015 - 6:19pm] -Added some styles for SVG Use tags in styles.css. -Added a platform query to the web slice for future adjustments. -Updated AcrylicStyle.prs to go to /app/ for future adjustments. -Added a link to AcrylicStyle.prs in /app/ when viewed on a PSP. -Moved the SVG files from /svg/ to /assets/svg/. [8/17/2015 - 2:12am] -Added the EOT Lobster Two font to /widget/ for the Webslice. -Updated the JavaScript in /widget/ to add data-platform for letting the CSS detect the platform query. -Updated the application cache code in /widget/. -Added link subresource and preconnect to /widget/. -Added theme-color to /widget/. -Added meta viewport, mobileoptimized and handheldfriendly to /widget/ just incase it's viewed on a mobile browser. -Added CSS styles for opera speed dial in /widget/. [8/18/2015 - 8:19pm] -Added id="icon" to all of the SVG files used on the site from /assets/svg/. -Added #icon to the xlink:href values on all of the use tags on the site. [8/23/2015 - 7:28pm] -Set to store several SVG icons offline as it's easier to control the caching of them this way. -Added icon.png as the last fallback to .logo just in case the site is viewed in a browser that supports offline browsing but not SVG background images (or SVG in general). [8/24/2015 - 11:55pm] -Updated favicon.ico (you likely won't notice a difference, it's smaller in size now though at 36KB from 94KB). [9/1/2015 - 2:14pm] -Added theme_color and background_color to /acrylicstyle-webapp.json to specify these colors on inital load when the web app is installed. -Changed /acrylicstyle-webapp.json to /acrylicstyle.webmanifest to keep up with the current spec. -Added the .webmanifest mime type to the server. -Updated /acrylicstyle.webapp to use the new appcache (/appcache/). -Added a fake file extension for Open Search Description files to have the proper mime type (.opensearchxml). -Set the server to upload opensearch.xml with the correct mime type (application/opensearchdescription+xml). -Compressed /lost.jpg from 256KB to 72KB. -Compressed /asmg.jpg from 320KB to 88KB. -Moved all of the cover images (including /lost.jpg and /asmg.jpg) to /assets/jpg/. -Now storing /assets/jpg/cover.jpg offline in the appcache and service worker. -Set /assets/jpg/cover.jpg as the cover for /app/ and /options/. -Cleaned up a spot of a color difference on a turquoise "X" at the center of the image. -Added a redirect from /options to /options/ (somehow missed the slash redirect for it). -Added Lobster Two .otf and .woff2 fonts to the site. -Updated the CSS code for the Lobster Two font to add the .otf font, the .woff2 font and load local fonts if possible. -Added expiration headers to all of the image and font formats on the site. -Added unicode-range to the font face. [9/2/2015 - 7:45am] -Fixed the issue with custom scrollbars not showing up in Chrome, Safari, Opera and Internet Explorer. -Cleaned up the CSS code (removed last references to Font Awesome as a font). -Removed some redundant CSS code related to embedded content in blog posts. -Removed all single line comments from the CSS code. [9/6/2015 - 6:49pm] -Updated Google Analytics to the new analytics.js (from ga.js) to take advantage of the universal analytics platform. -Removed some unused commented out code in /data/ to lighten it's size. -Set the color variable on /about/ to the regular one. -Moved the Google Analytics to be inline JavaScript instead of in /script.js. [9/7/2015 - 4:38pm] -Added more links to /links/. [9/8/2015 - 7:49am] -Changed the cover in /links/ to /assets/jpg/cover.jpg. [9/9/2015 - 7:01pm] -Dropped the old Safari 9 pinned site icon syntax in favor of the rel='mask-icon' one. -Added a Firefox Social API Widget to /test/ for testing. [9/10/2015 - 8:41pm] -Added a meta version tag to the header with a version number so I can keep track of the updates (also added data-version to the HTML tag for code purposes if the meta tag isn't sufficient). [9/12/2015 - 12:32pm] -Updated Modernizr script to v3. -Added more detections to the Modernizr script. -Switched to using /modernizr-custom.js from /modernizr.custom.as.js. -Removed the added page visibility test for Modernizr from /script.js. -Moved the data-version attribute on the HTML tag to the end of the tag to be more visible. -Added /modernizr-custom.js to /appcache/. -Removed /modernizr.custom.as.js from /appcache/. -Added a new PHP variable for the cover images (will later be used in meta tags). -Removed role="search" from the search form. [9/13/2015 - 2:27pm] -Switched some of the inline SVG element CSS code from using .svg to .inlinesvg. -Added /logo.webp to /acrylicstyle.webmanifest. -Added /logo.png, /icon.png and /icon196.png to /acrylicstyle.webapp. -Added redirects from /index.html and /index.htm to /home/. [9/14/2015 - 12:21am] -Updated /links/. -Updated the PHP Variable code to fix all errors with them. -Compressed /pattern-opacity60.png down from 5.4KB to 3KB. -Compressed /pattern-opacity.png down from 5KB to 4.30KB. -Made /pattern-opacity.webp which is 4KB. -Added all of the above "pattern-opacity" images to every class, element and ID in the CSS that uses /pattern-opacity60.png. [9/17/2015 - 8:19am] -Added og:image:type, og:image:width and og:image:height meta tags to the site. -Added new PHP variables for the above meta tags. [9/18/2015 - 7:46am] -Updated /links/ (finally added Periscope and Medium links). [9/20/2015 - 11:06am] -Updated /links/ (removed duplicate Medium link, added Flipboard link). -THE RETURN OF FONT AWESOME!!! (Yeah, SVG Use didn't work out). -Added HTML-only social share buttons to every blog post (under the Facebook, Twitter and Google+ social widget buttons). -Updated the code on the Twitter widget button in the blog posts to fallback to a link to share the post (instead of the general share URL). [9/21/2015 - 2:36pm] -Updated the width and height attributes on the inline SVG tags to be 10 by 10 pixels, for the rare case where the site's HTML tag has the classes .no-nav and .no-js and somehow the SVG tags own CSS code doesn't load properly. -Added two new HTML-only social share buttons, Pocket and ShareThis. -Added Crosswalk attributes to /acrylicstyle.webmanifest. [9/22/2015 - 11:14pm] -Set theme_color on /acrylicstyle.webapp. -Added /app/ to the /appcache/. -Added all of the non-woff fonts to the NETWORK section of /appcache/. [9/27/2015 - 10:55am] -Set .nav #menu footer to use CSS transform instead of margin-left for it's animation to make it "jank free". -Removed width transition from #navicon and #searchicon. -Removed z-index change from #search to stop it from disappearing before being closed. -Added transform: translate3d(0, 0, 0) to elements that lacked it and may need it. -Removed .post animation CSS code. -Deleted quite a bit of commented out code in /script.js making the file size smaller. [10/1/2015 - 10:05am] -Added #blogbuttons element to provide a button linking to only posts tagged ASMG and to the highlight post. -Made /highlightbuttonjs to provide a PHP and JS script that when linked to on an external site links to the highlight post. -Added some styles to /style.css for .status-msg-wrap, .status-msg-body and .status-msg-border on the blog. [10/3/2015 - 7:30am] -Added shrink-to-fit: no to meta viewport for iOS 8. [10/13/2015 - 8:43am] -Super minor tweaks to /opensearch.xml (hoping this helps fix the Firefox error). -Separated the variables from header.php. -Created a 2nd PHP file for variables controlling /highlightbuttonjs and /play/. -Updated /play/ to use the new variables. -Updated /highlightbuttonjs to use the new variables. -Updated /blog/ to use the new variables. -Updated /store/ to link to "ASMGSHOP" posts instead of L-Y3Ts Bandcamp (more flexible this way). -Set all .fa elements to disappear when on a browser that doesn't support @fontface. -Moved redirect JavaScript and Meta refresh code to header.php. [10/15/2015 - 9:15am] -Updated /serviceworker.js, /acrylicstyle.webmanifest and /acrylicstyle.webapp to all update their version numbers with versionno.php. -Moved /highlightbuttonjs to /highlightbutton.js [10/16/2015 - 12:10am] -Added expiration headers to the new PHP files, plus cleaned up their code. -Deleted some unused stuff. -Removed Crosswalk attributes from /acrylicstyle.webmanifest (t'was keeping the web manifest from working in Chrome for Android). -Cleaned up /site-changelog.txt (this file ^_^). [10/31/15 - 12:27am] -Updated Modernizr to 3.2.0. -Updated HTML5Shiv to 3.7.3. -Updated /style.css to use .requestanimationframe instead of .raf. [11/1/15 - 9:52am] -Added the site version number to /credits/. [11/9/15 - 11:45pm] -Updated /links/. [11/11/15 - 11:11pm] -Updated /appcache/ to store the images for the current home page ("Dream Eater" by Mark Pheonix). [11/25/15 - 8:45pm] -Added two new highlight variables for the cover image and the thumbnail image. -Updated /serviceworker.js and /appcache/ to automatically add the highlight cover and thumbnail images. -Updated the header to add rel="home". -Added role="img" to the SVG tags within #navicon and #searchicon. -Also added role="presentation" to the path tags within the SVG tags within #navicon and #searchicon (within, within, within). [11/26/15 - 9:46pm] -Added an SVG filter fallback for the drop shadow CSS filter on #navicon and #searchicon. [12/3/15 - 12:59pm] -Added aria-controls attributes to #navicon and #searchicon. -Updated script.js to add aria-expanded attributes to #menu and #search. -Uncommented the div element surrounding #search with the role="search" attribute added to it. -Added font-display: swap to the Lobster Two @font-face in /style.css to allow for any text using that font to display before the font is even loaded (this will work in a future version of Chrome). [12/4/15 - 8:50pm] -Tweaked /app/ to load /gears_init.js from the proper location (for providing an installable web app on older browsers with Google Gears installed or on Android 1.5). -Fixed an issue where /gears_init.js wasn't loading. -Updated /gears_init.js to be cached for an extremely long time since it'll never update. [12/10/15 - 12:07pm] -Removed Google+ classes and div from /links/. -Added Pocket to /links/. [12/16/15 - 6:41pm] -Added an SVG Filter drop-shadow to #navicon and #searchicon for non-WebKit browsers (needs tweaking to display properly). -Set the expiration date on all fonts (with the exception of SVG fonts) to 365 days. [12/20/15 - 3:00pm] -Removed some old code related to the post animations in /style.css. -Added a .operamini CSS class to the root via JavaScript (/script.js) for styling elements if Opera Mini is being used (mainly for things that Opera Mini doesn't really support like @font-face). -Set /style.css to hide all font-awesome elements from Opera Mini. -Set a .jpeg and .gif fallback to any element that uses our pattern background for older browsers. [12/21/15 - 2:38pm] -Updated the PlayStation Network link in /links/ to go to http://my.playstation.com/ instead of the forums. -Updated /links/ to remove all of the unnecessary Google+ code and to put the IMG tag within the links themselves. -Updated /style.css to remove one of the CSS URL filters, for some reason it made #navicon and #searchicon invisible on Firefox and other browsers. [12/26/15 - 8:05pm] -Changed our Modernizr 3.0.2 build to place the .cssscrollbar class on the tag to get our custom WebKit scrollbars to show again. -Changed the style on the submit button within #search for older browsers like Internet Explorer 8 and below. -Removed some Internet Explorer 7 and below specific code that removed the background so that the .jpeg and .gif fallback backgrounds show. [1/2/16 - 4:15pm] -Updated Font Awesome to version 4.5.0 [1/6/16 - 8:40am] -Added "display-mode: standalone" media query to the CSS. [1/13/16 - 8:54pm] -Updated /logo.svg to have a viewBox and a title. -Added a link to http://bluel.bigcartel.com/ from /store/. -Updated /links/. [1/14/16 - 9:31pm] -Updated our iOS app code to use [data-ios-standalone="true"] instead of [data-standalone="true"], had to make the ios distinction to not confuse it with the W3C web app "display-mode: standalone". [1/24/16 - 10:08pm] -Updated /links/. -Added social links in the footer. -Moved the upgrade dialog to the footer. -Removed the cursor code from the footer. -Change upgrade.php to middle.php for context reasons. [1/24/16 - 10:08pm] -Changed how all of the code pertaining to CSS will-change works. Now when #navicon or #searchicon are hovered over, a data-will-change attribute is added to the HTML element and set to "true" when not it's set to "false". All CSS using will-change now relies on this attribute to not kill the battery life on the users device. This also applies when #navicon or #searchicon are clicked. [1/28/16 - 3:21pm] -Removed all -webkit prefixed CSS calc code from the site as it's only needed to support a far outdated version of Safari these days. Also set .pagevisibility on every element that uses CSS calc to ensure that the mentioned old Safari version doesn't clash with this new code. -Used to have "-ms-overflow-style: -ms-autohiding-scrollbar" set on the body of the site. Changed to just "scrollbar" in favor of always showing the scrollbar for both usability and to show off the custom scrollbar colors (for the flex). -Created /old_style.css as a fallback incase the below change doesn't work out. -Removed all -webkit- prefixed keyframe, animation, transition, transform and backface-visibility attributes as they're no longer needed in Safari as of version 9.0 (9.1 is currently the newest version) and to reduce the size and complexity of the CSS code. [1/28/16 - 4:02pm] - v1.84.0 -Commented out #universe flexbox code. -Removed the 2D .loading animation code as it wasn't being used. -Changed the keyframe animation name "loadingthreed" to just "loading". -Moved almost all of the animation, 3D transforms and will-change code to an @supports declaration to keep old browsers from applying them. -Moved #upgrade into the menu at the bottom, as it'll show up in the same spot on browsers that need to upgrade anyways if placed there (as their menu will be 100% width and atop everything regardless). -Changed the text in #upgrade to not discourage the user from viewing the site in their browser of choice anyways while still encouraging that they upgrade (e.g. "For the best experience..."). [1/31/16 - 7:51pm] - v1.84.1 -Changed the width of .fb-like to fit the button. -Updated /app/ to tell the user to install the app. Also updated /app/ to add inline installation buttons for browsers that support them. -Moved some of the code from header.php to middle.php. -Moved the cover pic to middle.php instead of from the respective pages. -Moved some installable app code from header.php to /app/. [2/9/16 - 1:42pm] - v1.84.7 -Removed the Modernizr, page visibility and requestAnimationFrame requirement to display WebKit CSS Scrollbars. -Removed CSS Calc / Scrollbar code form #menu:hover, was originally for adjusting the width as the scrollbar was only shown in the menu on :hover, wasn't being used anymore. -Removed #menu:hover code altogether, was redundant code, wasn't doing what it originally did anymore. -Removed -webkit-image-set from .logo as it was redundant. -Removed #loading from the footer.php and instead set it to be created on the fly in JavaScript. -Set /script.js to delete #loading when the site is ready. -Set the requestAnimationFrame calls in menuopen() and searchopen() to stop at the transitionend events of #menu and #search respectively. -Set the bgani animation on #menu and #search to only stop after the transitionend events of #menu and #search respectively. [2/10/16 - 12:25am] - v1.84.22 -Created a step() function for requestanimationframe to use, instead of menuopen() and searchopen(). -Created bganion() and bganioff() functions to be able to use removeEventListener on the transitionend events on #menu and #search. -Updated all CSS code for .svg to target .inlinesvg instead as .svg isn't being used anymore (both due to the Modernizr reduction and the check literally wasn't being used anywhere else on the site). -Created /webkit-style.css with the @media (-webkit-transform-3d) media query for providing WebKit specific animations. It's a temporary terrible thing I'm doing. -Added @import CSS code to /style.css to import /webkit-style.css if @media (-webkit-transform-3d) is supported. Commented out for now. -Modified the code for #blogbuttons to change shape for small screens. -Updated the blog code to catch up with the regular site code. [2/23/16 - 2:23pm] - v1.84.23 -Added some JavaScript to /app/ to check if the site is running standalone to redirect to the home page, as a "just in case" measure. -Uploaded /AcrylicStyle.mobileconfig for making it easy to install the site on iOS devices (it's an old one I made ages ago, I need to make a newer one in the future). [2/29/16 - 11:59pm] - v1.84.29 -Version number bumped up to 1.84.29 because I could and because it's a Leap Day. -Added Segoe UI and 'Segoe UI Symbol' to the end of every font-family property in /style.css to enable Emoji on the site in Windows 7 and up. -Added a @font-face declaration for an 'emoji' font. It just loads the emoji fonts from the local system (no web font yet, uploaded the "Symbola" font to /fonts/ anyways just in case). [3/8/16 - 8:55am] -Added an appVersion variable to /serviceworker.js that always gets it's value from versionno.php. [4/1/16 - 1:49pm] -Added index.torrent and test.torrent to /other/ for future BitTorrent/WebTorrent related stuff. -Added a rel="serviceworker" link tag to the header for future browsers. [4/5/16 - 11:53pm] -Updated serviceworker.js for smoother updates. [4/13/16 - 11:58pm] -Added code for Facebook and Google+ comments for a test run in the future (just have to remove the Disqus widget to enable them). -Updated Font Awesome to version 4.6.1. -Updated Facebook script to the newest version (which I think is version 2.6). -Updated serviceworker.js to use the global site version number as apart of the cache name to update the cache every time the site is updated. -Added a background sync feature to serviceworker.js and script.js that refreshes the cache if there's a new update. -Removed "importScripts('serviceworker-cache-polyfill.js');" from serviceworker.js as it's not needed anymore. [4/14/16 - 6:50pm] -Updated AppCache and Service Worker to cache fonts with "4.6.1" in their query. [4/15/16 - 10:34pm] -Brought /options/ back from the dead! Sort of. -Added postMessage API use to both /script.js and /data/ to enable storing settings within /options/ in localStorage (still working out the kinks). -Switched to CloudFlare for the HTTPS support. -Changed /data/ iframe ID to #data. -Switched the rel=logo meta tag to a relative URL (might remove it altogether as that attempt at a standard seems to have ended). -HTTPS also means that our Service Worker is finally in use! -Added a redirect from HTTP to HTTPS in /script.js. [4/18/16 - 12:02am] -Updated the HTTPS redirect to check for AppCache or Service Worker support first as IE9 on Xbox 360 for some reason can't view the site encrypted. -Added a JavaScript refresh to /data/ that happens every 50000 seconds (13+ hours). -Added a Meta refresh to /data/ that happens every 50000 seconds (13+ hours). -Updated the Chrome hosted app to default to HTTPS, also added /data/ as a background page (a forgotten API for hosted apps) so that the AppCache and Service Worker are both installed when the app is installed. [4/19/16 - 7:05am] -Changed short_name in /acrylicstyle.webmanifest to "Acrylic Style" from "AcrylicStyle". -Updated Chrome Web Store app to v.2.6 which sets the background page to https://AcrylicStyle.com/data/#background from https://AcrylicStyle.com/data/ (Reasons here: https://web.archive.org/web/20140211072317/https://developers.google.com/chrome/apps/docs/background?csw=1). [4/21/16 - 7:02am] -Changed the front page and highlight to Mark's Pheonix Down mixtape. -Switched over to Facebook comment box and like button syncing. -Also added the Google+ comment box to the site. -Wrapped the Blogger comments and backlinks in a span with a .blogger_comments class on it and set /style.css to hide it, to favor Facebook and Google+ commenting instead. -Set highlightbutton.js to be stored in AppCache and Service Worker cache. [4/23/16 - 12:14am] -Added AcrylicStyleRedirect.torrent to /other/. -Added the files in AcrylicStyleRedirect.torrent to /other/ also to act as web seeds (AcrylicStyle.desktop, AcrylicStyle.webloc, AcrylicStyle.desktop.url and index.html). [4/24/16 - 6:03pm] -v1.85.19 -Added rel='preload' for /data/ and logo.svg/ -Switched the .logo elements in middle.php and navigation.php for IMG tags with the .logo class as we have srcset now and this will make the image display properly in older browsers. -Updated /style.css to not stretch out #bump .poster and instead just let it use it's normal height and width (if it's too big it'll scale down though). -Added #bumppattern to act as a pattern background for #bump .poster. -Updated the Chrome Web Store app to v2.6.2, which sets the background page as https://acrylicstyle.com/data/?chrome_background_page=1#background instead of https://acrylicstyle.com/data/#background (just incase the server side of things needs to handle something related to this). [4/26/16 - 6:52pm] -Removed the background images and background adjustment code from .logo in /style.css and instead put them under .logo.icon. -Changed the loading image from a tag to an tag in /script.js due to the changes to .logo -Updated /music/ to have the SoundCloud widget load via HTTPS instead of HTTP. -Changed code on /app/ to have the install buttons use inline-block for the display style instead of block, allowing it to be centered easily. -Added alt-text to the bump image, taken from the title of the page. [5/6/16 - 6:44pm] -Updated /links/. [5/30/16 - 4:13pm] -Updated /links/. -Added the proper mime type for .pkpass files. -Added two test .pkpass files. /AcrylicStyle.pkpass and /AcrylicStyle2.pkpass. [7/2/16 - 8:11pm] -Updated /links/. [7/11/16 - 1:48pm] -Updated our Facebook app to point the canvas app to /fb/canvas/ and the page tab to /fb/tab/. [7/12/16 - 9:01am] -Fixed the cover not showing up on /error/. [7/13/16 - 12:38am] -v1.85.50 -Updated our Facebook app pages /fb/canvas/ and /fb/tab/ to display a link and image along with Facebook like and share buttons and the comment section for whatever the highlight post is. -Updated our Facebook app pages /fb/canvas/ and /fb/tab/ to have their own stylesheet partially mimicking Facebook's style to blend in. -Updated variables.php to inclide a new "nostyle" variable for turning off style.css on pages that need the header but not the look of the rest of the site. -Updated header.php to use the "nostyle" variable to remove the /style.css and /font-awesome.min.css stylesheets, and the subresource and prefetch tags pointing to /style.css. -Set "nostyle" on /fb/canvas/ and /fb/tab/. [7/24/16 - 11:37pm] -Returned the Service Worker to working condition. -Set the "related_applications" section of the Android manifest to link to our Android app in the Play store (set "prefer_related_applications" to false though). [7/25/16 - 7:47am] -Fixed the height problem with the footer. [8/26/16 - 7:57am] -Added AppCache manifest to /fb/tab/ and /fb/canvas/. [9/2/16 - 7:12am] -Added RSS link to navigation.php. [9/15/16 - 10:46am] -Updated /script.js to not redirect to https:// on blog.AcrylicStyle.com. -Updated headers to allow http://blog.AcrylicStyle.com/ to load files instead of https://. [9/19/16 - 11:08am] -v1.85.66 -Removed Font Awesome from header.php, AppCache and the Service Worker. -Replaced Font Awesome icons in the footer with inline SVG elements with the .icon class. -Replaced the Font Awesome icons in the share bar in blog posts with inline SVG elements with the .icon class. [9/21/16 - 6:10pm] -Fixed the issue with the blog section being cut off on mobile. [9/23/16 - 4:13pm] -Updated Normalize.css to 4.2.0. -Updated the font-family on body in style.css to include more default system fonts (namely for iOS, macOS, Ubuntu, Chrome OS and Android). -Updated the font-family on every element in style.css that has "Lobster Two" as it's set font to not have fallback fonts (so that these elements will just fallback to the ones set by body). -Removed font-family from #navicon and #searchicon, so that it doesn't use "Lobster Two" and so that it uses the fonts set by body. [9/27/16 - 12:09pm] -Updated /links/. [9/28/16 - 3:55pm] -Added /background/ for our Chrome App to use instead of /data/, which redirects to "about:blank" after the Service Worker installs to avoid blocking future Service Worker updates while the app is running in the background. -Returned /serviceworker.js back to the old code since the new Chrome app won't block it anymore. -Updated /serviceworker.js to use /LobsterTwo-Regular-webfont.woff2 instead of /LobsterTwo-Regular-webfont.woff as all browsers with Service Worker support right now support WOFF2. -Updated /appcache/ to use /LobsterTwo-Regular-webfont.woff2 instead of /LobsterTwo-Regular-webfont.woff as I don't care if older browsers have a pretty font when offline. [10/5/16 - 3:57pm] -Removed normalize.css from /style.css. [10/11/16 - 2:28am] -Added Twitter to /links/ (somehow didn't have it in there this whole time). -Added caption font to the font-family of body in /style.css. [10/14/16 - 12:27am] -Updated /style.css a lot. --Added -webkit-tap-highlight-color property to .button to hide the tap highlight seeing as it has a style for :active. --Removed some styles that caused jank (site still isn't "jank free" but we're getting there). --Placed some CSS transitions behind a CSS4 hover media query to block mobile browsers from displaying these animations unnecessarily (also placed "not hover" fallbacks where needed). [10/19/16 - 11:58am] -Updated the Service Worker to display /error/ when it can't grab a page from the server. [10/20/16 - 2:33pm] -v1.86.10 -Added a new share button to the share bar under blog posts that uses the experimental navigator.share API and falls back to an Android intent that falls back to a ShareThis link in the style of Paul Kinlan's blog (https://paul.kinlan.me/navigator.share/). -Added code to the Service Worker to handle foreign fetch events so that http://blog.AcrylicStyle.com uses less bandwidth and data. -Updated the loading screen code to use the full URL to the images instead of relative ones so that it displays properly on http://blog.AcrylicStyle.com. -Updated /script.js to redirect http://blog.AcrylicStyle.com to https://blog.AcrylicStyle.com so that it takes advatage of SPDY, HTTP/2 and web APIs that require secure URLs. -Added code to /style.css to break long words (helpful on small screens). -Removed the code on the site that prevented scrolling while the site was loading. -Changed the loading overlay to not block the user from interacting with the site while it's loading (now it's just a small box in the bottom left corner). --Also threw in a nice "jank free" animation for the loading overlay for fun. -Added Google Chrome Origin Trial meta tag for Foreign Fetch to header.php. -Added Google Chrome Original Trial HTTP header for Foreign Fetch to several file types and items on our site. -Added Service Worker HTTP header to several file types and items on our site. [10/21/16 - 12:42pm] -Changed /script.js to load the social media widgets far later than in the beginning of everything else. -Folded the functionality of /highlightbutton.js into /script.js to have one less HTTP request and switched from using document.write to .innerHTML for performance. -Updated /script.js to execute it's code on either DOMContentLoaded or Load, whichever it can get at the time. [10/23/16 - 3:41pm] -Replaced the Facebook, Twitter and Google+ widgets in the menu with regular old links to the respective pages (with fancy styling to boot). [10/25/16 - 12:25pm] -Added site-enter and site-exit transitions for Internet Explorer 10 and below because why not? (already had page-enter and page-exit). -Updated /script.js to only load the Facebook, Twitter and Google+ JavaScript APIs if there were widgets on the page to render. [10/28/16 - 1:30am] -3 years later, I've re-added flexbox code to the site (for the elements within #main). Now behind an @supports rule and not using any vendor prefixes. -Added IMG tags with the SVG equivalent of the Font Awesome icons to the main pages of the site. [10/30/16 - 2:04pm] -Moved loading dialog to the right so that it doesn't block the menu. -Added StumbleUpon to the share bar. -Reordered the footer links. -Updated Mark's Twitter link in /team/. -Fixed the issue on /credits/ where the cover image wasn't showing. -Deleted #bumppattern from the HTML and CSS. -Set the cover image as a background image on #bump and set the background-size to cover. [11/1/16 - 2:50am] -Updated /script.js to remove the Twitter JavaScript library as it doesn't provide much beyond the HTML tweet button. -Removed the standard Twitter tweet button in favor of our HTML one as the JavaScript library was removed. -Updated /script.js to load the Facebook and Google Plus JavaScript libraries separately. -Added the social-button styles to the Facebook, Twitter and Google Plus HTML share buttons. -Added "share" and "tweet" texts respectively to the Facebook, Twitter and Google Plus HTML share buttons. [11/2/16 - 1:30pm] -Added code using the Intersection Observer API to /script.js to only load the Facebook Like and Google +1 buttons and the Facebook comments link and box when scrolled into view, fallsback to just loading everything as it used to if Intersection Observer isn't available. -Updated /script.js to execute it's code on the first second possible (along with Load nad DomContentLoaded like previously set). -Removed the Opera Mini check from the code (for now). -Moved the https checking code into startup() and altered it so that it runs in non-Chrome browsers. -Updated the loading dialogue code to not use innerHTML and instead appendChild and others for rendering the respective elements. -Updated the code for the highlight buttons to have an HTML only fallback that links to /play/ but doesn't display the title and also updated the JavaScript code to only change the text and href of that link to the correct info. -Updated /script.js to load version 2.8 of the Facebook JavaScript library. [11/3/16 - 7:45pm] -Updated /script.js to check to see whether or not the page has loaded before executing it's code. -Replaced the SVG images on the main page with inline SVG elements instead of IMG tags. -Swapped out instances of defer="true" on non-script elements with lazyload="1" for IE11 and Edge. -Updated the shadows on the icons in #navicon and #searchicon to use SVG images as their shadows instead of filters so that they show up on older browsers and to reduce jank. -Updated the styling on anchor tags to switch the underline to solid when hovered or focused. -Added fallback text via desc tags to inline SVG elements in the share bar, the footer and the menu (still not enough for a lot of browsers as many like about their inline SVG support). -Updated the Android check in the share button code to also check to make sure the browser isn't Trident or Edge as Windows Phones lie about being Android for compatibility (aka because a lot of web devs suck at their jobs). -Updated /widget/ to be more inline with the rest of the site. [11/6/16 - 3:13am] -Upped the height of #close to 200% so that it doesn't "jump" when you scroll down in Chrome mobile (hard to explain). -Updated #search to animate transform: scaleY instead of height to make the site more "jank-free". -Set /serviceworker.js to store / and /home/ offline (for now). -Added the SVG namespace to /style.css in hope that it actually does something. [11/7/16 - 1:39am] -Removed /highlightbutton.js from AppCache and the Service Worker as it wasn't being used anymore. -Added a border to the bump image as it sometimes blended in visually with the background version making it difficult to truly see the image. [11/8/16 - 4:53am] -Fixed an issue with /serviceworker.js where it wasn't caching the highlight images. -Updated #bump to default to using the highlight thumbnail progressively enhancing (via srcset) to using the larger image. -Updated the IMG tag in #bump to have an alt text where provided. -Added a CSSOM Smooth Scroll Polyfill since Firefox is currently the only browser that supports this and it looks and feels a bit odd when the site jumps to the top to open the search bar. [11/13/16 - 12:34pm] -Updated /style.css for when the site is standalone on iOS (app mode). -Updated /script.js for /options/ (migrated a lot of inline JavaScript from /options/ over to /script.js) now /options/ works but doesn't save any data (can't get that to work yet). -Updated the apple-touch-icon for iOS users (and annoyingly this updates it for a wide variety of non-Apple OSes). -Updated our W3C manifest with favicon.ico, a 512px icon, LTR setting and removed the ManifoldJS specific stuff. [11/14/16 - 2:50am] -Updated our W3C Manifest for WebAPK support (a feature coming to a future version of Chrome for Android). -More updates for /style.css for when the site is standalone on iOS (app mode). -Updated /app/ to provide a startup image on iOS (splash screen). -Updated /style.css in attempt to center the logo in #menu in the PSP browser (my attempt failed). -Fixed the issue where the buttons in #menu restricted scrolling. -Added pointer events for #navicon, #searchicon, #close and #header. [11/16/16 - 2:18am] -v1.87.60 -Updated /style.css to use the transform property on #close to have it animate with the rest of the site when the #menu or #search is opened, to create a smoother animation experience. [11/17/16 - 8:30pm] -v1.88.32 -Removed a touchstart event that was set on the entire page to make click events activate more quickly. This likely isn't needed anymore as all up to date browsers have reduced the click delay. -Removed code from /script.js that would trigger an unnecessary refresh after /serviceworker.js was installed. -Centered and enlarged the “X” within #close when search-opened (attempted to do the same for nav-opened, will fix it later). -Updated /script.js to render the YouTube subscribe button, Google+ follow button and Google sign-in button. -Removed the code that set data-will-change from /script.js and instead replaced it with :hover events and sibling selectors on the elements that benefit from CSS will-change as the old way was too broad and had many elements readying for something that wasn't happening. -Removed the transition delay from #close, #search and #universe (so #search now opens faster). -Updated /script.js to place the attribute data-closing=”true” on the HTML element when the menu is closing, and remove it once closed. -Updated /style.css to re-add the transition delay to #close and #universe when data-closing=”true” is on the HTML element. -Updated /script.js to set focus on #search when #searchicon is pressed. -Updated /script.js to remove focus on #search and set the disabled attribute on it when #close is pressed. -Set role=”search” on #search and removed the surrounding DIV as the standards have updated to allow role=”search” on forms. -Added Google sign-in meta tags to header.php. -Added a noscript variable to variables.php for pages that don't want to use /script.js. -Added PHP code to header.php that checks to see if it's a specific page before adding the inline AppCache JavaScript code. -Added a Google sign-in button to /options/ complete with a display of the users profile pic (with their name as the alt and title attributes) and a sign out button. -Updated the default color button in /options/ to trigger the change event on the color picker, so now the default color button actually works beyond the color picker. -Updated /script.js to provide a close button function, so now when #close is clicked or ESC is pressed the site checks to see what classes are set on the HTML element and acts accordingly, instead of always firing the menuclose() and searchclose() functions. [11/25/16 - 4:10pm] -Made a color setting change function in /script.js for anything to use. -Made a background animation setting change function in /script.js for anything to use. -Updated /script.js to now set aria-hidden true or false on #search and #menu depending on if they're open or closed. [12/4/16 - 11:18pm] -v1.89.14 -Had #menu-wrap and #menu swap places for accessibility, SEO and semantics. -Created .bganipat elements to provide a jank free background animation for #menu and #search (because of the way I did this, the background isn't apart of the "door swing" animation anymore, but I kind of prefer this). [12/5/16 - 1:30am] -Replaced the .bganipat elements with one unified #bganipat element that acts as the background for everything. -Wrapped the #bganipat element in a #bganibox element with position fixed and overflow set to hidden to keep #bganipat from messing with scrolling. -Set #bganipat and #bganibox to show on .nav at all times, even when the animation is turned off. -Set /script.js to only update the background color of #bganibox now. [12/12/16 - 1:42pm] -Removed the catch all code in /style.css for styling textarea and input elements as it wasn't necessary and is a bad idea in the long run (better off just using classes). -Made the width and height of #bganibox 200% to account for times when certain browsers hide the UI when scrolling exposing what's behind certain elements (this keeps #bganibox within view, keeping everything looking normal). -Created an options button for simply going to /options/. -Wrapped the Like and +1 buttons within spans with the class .widgetbox set on them for the future incase I decide to set position: sticky on them to keep them within view or something. -Moved the animation code for the menu buttons into the @supports rule used for all jank animations. -Created some new jank free animation code for the menu buttons that's placed within the @supports rule used for all jank-free animations. -Moved the RSS link in the menu footer to be next to the social buttons and set .button, .social-button and .rss-social-button on it to have it fit right in with the rest (.rss-social-button is new and is being used to set the orange color on it). -Changed the element for #universe to main so that Blogger stops butchering the site and removing the footer along with it's own widgets (as I wrote that I think I just discovered the root of the problem and it's probably in /script.js). -Updated the footer to not provide the dotted underline on links, have more space and a black and white Acrylic Style logo at the bottom that acts as a link to /credits/. -Set -webkit-touch-callout: none on #navicon, #searchicon and #close under .nav so that they don't bring up a link dialog when held down on WebKit and Blink browsers. [12/17/16 - 2:37pm] -Updated /style.css to remove the outline on the search box when focused. -Updated the Internet Explorer and Edge tile icons to better suit Windows 8, 8.1 and 10. -Updated /script.js to only return the pointerdown events on #navicon, #searchicon, #close and #header on a left click, right clicks [or whatever the equivalent to right clicking is on the device] no longer trigger the event. -Fixed the issue where clicking the title in the menu would set #close in the addressbar. -Updated the look and feel of the WebKit scrollbars in /style.css to better suit the site design. -Updated /script.js to change the elements created in randomizepostcolors() to spans instead of divs (this may fix our Blogger footer issue), it also now adds role="presentation" and aria-hidden="true" to them. -Changed the fill attribute of the SVG icon in the button in #search to #000 for browsers that support inline SVG but not .nav. -Removed the code in /style.css that made elements with the class .icon only show if Modernizr could detect inline SVG support. [12/20/16 - 9:55pm] -Removed cursor: pointer from all styles in /style.css due to realizing how that makes users (including myself) think they can right click and open whatever it is in a new tab (The source of my realization: https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b). -Set cursor: default on #navicon, #searchicon, #close and .nav #menu-wrap header a when under .nav to highlight that these elements won't act as links. -Returned Twitters JavaScript library back to /script.js in favor of embedded content (tweets, videos, moments, timelines, grids, etc...) and the follow button. [12/24/16 - 10:22pm] -Changed the front page and highlight to Mark's "The E Before The O" LP. -Added the cereal "X's" background to all elements with the classes .button and .hump at the same time. -Added the cereal "X's" background to all elements with the class .social-button. -Updated the look of blockquote elements in posts. -Added a background-image of a loading GIF, APNG and animated SVG for Facebook comment widgets. -Updated the look of H2 elements in posts to highlight sections (later I'll make this into a class or something instead of styling the element itself, this is just for now). [12/25/16 - 11:20am] -Updated Modernizr to provide detects for Animated PNG, SMIL and SVG as an IMG tag source. -Updated /style.css to check for APNG or SVG+SMIL support before setting the SVG or APNG background for the loading image on Facebook comment widgets. [12/28/16 - 12:58am] -v1.89.62 -Updated Modernizr to provide a detect for animated webp. -Updated /style.css to add a webp background as the loading image on Facebook comment widgets if animated webp is supported in the browser. -Updated /style.css to provide a style for Details and Summary tags. -Updated /style.css to set the cursor to default when a Summary tag has the .button class on it. -Removed the use of Modernizr.fontface from /script.js which was used to block Opera Mini from switching to .nav, instead switched to a more explicit Opera Mini block (!window.operamini). -Updated /script.js to startfb(), startgp() and starttw() in .no-nav browsers (it'll be up to Facebook, Google and Twitter whether or not the APIs work). -Changed the order of things in startup() in /script.js to switch classes to .nav earlier to not confuse users (we'll need a better solution in the future). [1/1/17 - 1:00pm] -v1.89.63 -Updated the Blogger code to display 2017 at the bottom of the site instead of 2016. -iframe, embed, object resize -fb tab and canvas css -img.icon background-color -blockquote and details text color -svg icon colors for white posts [1/18/17 - 3:25pm] -v1.89.75 -Added aria-current="page" to the links in the menu, complete with styling, adding a "◆" after the element if the user is currently on the corresponding page. -The Acrylic Style header in the menu now goes to /home/ when clicked instad of closing the menu. -Hash URLs now redirect to their equivalent action on load (#menu now opens the menu, #search opens search, etc...). -Updated /style.css to set pointer-events to none on #universe if nav-opened or search-opened. -Updated /style.css to add the non-standard nav-index, -moz-user-input and -moz-user-focus properties on all elements hidden or obstructed from the user within #universe, #search or #menu to avoid letting users focus those elements with the keyboard. -aria-hidden, tabindex="-1" and hidden attributes set on #universe -detabinator [1/24/17 - 1:37pm] -v1.89.76 -Wrapped the detabinator code in something that checks to see if ES6 classes are supported or not, if not detabinator doesn't run (sadly for accessibility). -Updated the code in /style.css that added the non-standard nav-index, -moz-user-input and -moz-user-focus properties to all elements to now only focus on "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex] and [contenteditable]" elements (should improve performance). [1/24/17 - 1:37pm] -v1.89.79 -Removed detabinator code in favor of something I wrote myself (probably is slower but has far less errors so it's a win IMO). -Changed width of #menu-wrap to 100% and changed the width of #menu to take on the widths that menu-wrap used to take (based on media queries). -Began work on CSS Grid based code for auto-adjusting the width of #menu when opened (does nothing for now). -Messed up something with the menu animation, runs super fast on desktop now, normal on mobile. -Slapped on a crappy animation for the details element (no way to do this smoothly and performant). -Moved the JavaScript code that would redirect /app/ to /home/ in iOS Standalone mode to /app/ itself, since it's never used anywhere else. [2/19/2017 - 12:18pm] -Returned the click event to #navicon, #searchicon and #close for browsers with Pointer Event support for keyboard accessibility support. -Removed outline: 0 or outline: none from all elements in /style.css. [2/26/2017 - 10:35am] -Updated /script.js to use TransitionEnd events instead of setTimeout for setting and removing the data-closing attribute from HTML and for running the bganioff() function. -Updated /script.js to only run the bganion() function if requestAnimationFrame is available in the browser. -Commented out a few jank animations from /style.css. -Removed class="button" from #options-button. -Added text-transform: uppercase to #options-button in /style.css. [3/5/2017 - 12:39pm] -Updated several styles for elements within #menu under .no-nav in /style.css. -Added tabindex="-1" to #close to keep it from being keyboard focusable in .no-nav. -Fixed the issue with the header opacity animation in #menu on small screens in /style.css. -Added a delay to the header opacity animation in #menu in /style.css. [3/9/2017 - 12:54am] -Added .comments-link - - [4/2/2017 - 12:51pm] -prefers-reduced-motion [6/19/2017 - 12:40am] -Added a "Copy URL" button to each blog post. -Added a read-only textarea element in each blog post with the class .url-box and the URL in it for copying incase JavaScript Clipboard access isn't available (not fully setup yet in /script.js). -Updated /style.css to check if the site is running standalone either in the iOS proprietary way or the standardized @media query way to decide whether to display .url-box or not. -Updated Modernizr to version 3.5.0. [7/27/2017 - 3:23pm] -Added /.well-known/dat for Dat site support in Beaker Browser. -Changed some URLs in the HTML code to properly accomodate the Dat site. -Changed the Search URL protocol from "//" to "https://". [9/15/2017 - 7:25pm] -Added "viewport-fit=cover" to the Viewport meta tag for the iPhone X running iOS 11 (and hopefully other devices). -Added top: constant(safe-area-inset-top) to #navicon and #searchicon for the iPhone X running iOS 11 (and hopefully other devices). [10/30/2017 - 11:14am] -meta application tags for Chinese browsers -no pull-to-refresh in standalone -Switched constant(safe-area-inset-top) to env() and max() declarations behind a @supports. [12/3/2017 - 8:55pm] -Updated .fb-comments to set the cursor to "wait" or "loading" until loaded. -Updated .fb-like to set a loading animation as it's background and set the cursor to "wait" or "loading" until loaded. -Updated .fb-like and .fb-comments to show the .gif background-image for loading if APNG, animated WebP and/or SMIL in SVG aren't detected as supported in Modernizr to save data use since .gif takes up the most data. [1/7/2018 - 10:13pm] -Removed Google Analytics (more specifically, I commented it out). [4/3/2018 - 11:06pm] -Updated the Facebook Like Button NoScript tag to just provide a link to the Like button instead of an Iframe to prevent tracking. -Updated /script.js to not require HTTPS for the Service Worker, incase of protocols like dat:// that may get Service Worker support in the future. -Removed all of the Google sign-in code we weren't using. My plans for that have changed. -Removed all code for the Google +1 button since it technically doesn't exist anymore (acts as a share button now). [4/11/2018 - 12:14am] -v1.89.85 -All Facebook content is now click-to-run. -All code for customizing the interface was removed. -All code for rendering Google widgets was removed. [4/13/2018 - 1:07am] -v1.90.1 -Copy button on posts works now (need to code some sort of "Link copied" notification feature). -Share button on posts now sets background color to green when the Web Share API is available. -Footer now doesn't provide a background color, in favor of displaying whatever #main has set. -#main now uses the site background purple and also has the X pattern set. -#navicon and #searchicon now don't rely on Mondernizr's inline SVG support detection and instead use the attributes of their SVG elements to display fallback content (still need to clean up the CSS code here). [4/13/2018 - 11:01pm] -v1.90.2 -Added a http to https redirect to /script.js, within startup(). [4/23/2018 - 10:39am] -Added a README.md file to the site (says nothing right now). [6/3/2018 - 7:54pm] -Added a new page, /donate/ for Beaker Browser users (and possibly other browsers too). It doesn't actually link to any donation page/feature or whatever (it instead encourages people to buy music), it's just to fill the void of not having a donation page. [6/17/2018 - 11:24pm] -v1.90.8 -Added the as attribute to all the preload links that lacked it. -Replaced the defer="true" attribute on all of the non-script link elements with lazyload="1" (a hold over from the IE platform preview). -Added a preload link element for /script.js. -Switched the Atom and RSS links to the HTTPS URL. -Updated /opensearch.xml to use https instead of http in all of the URLs within the file. -Updated serachsuggestions.json to use https instead of http in all of the URLs within the file. [7/1/2018] -Added the #AcrylicStyle hashtag to the Facebook and Twitter share buttons on the blog. [7/9/2018] -Made changes based on the Google Lighthouse test. -Added the allow attribute to the /data/ iframe with feature policies that block stuff we aren't using. -Added an empty title attribute to the /data/ iframe. [10/22/2018] -Switched from Facebook's code for rendering their like button to our own custom code that sets lazyload and sandbox attributes on the iframe. [11/29/2018] -Added "allow-same-origin" to the sandbox attribute of the like button iframes (Note: This with "allow-scripts" makes the sandboxing attribute kind of useless as they could remove it). -Added code to auto-load the comments widget if the "fb_comment_id" query is in the URL, so that it can show the linked comment. [12/21/2018] -Updated style.css to style the GDPR notice on Blogger to fit the style of everything else on our site. [1/1/2019] -Removed the "G+ Follow" button from navigation.php as Google+ is being shut down this year. Replaced it with a YouTube Subscribe button. -Updated style.css to drop .gp-social-button in favor of .yt-social-button. -Updated /style.css to support @media (prefers-color-scheme: dark) to provide dark mode support on our site in supporting browsers (right now just Safari). [1/29/2019] -Updated /team/ to use everyone's public names. -Updated /style.css to set prexifed user-select attributes everywhere user-select is used. -Updated /style.css to set the width on .icon to auto, so that it doesn't get messy on browsers that fallback to text. -Subdomains have been updated on the DNS to link to tags on the blog (for example http://Jupiter.AcrylicStyle.com/). [2/1/2019] -Updated header.php to add meta supported-color-schemes to let the user agent know we provide a dark mode. [2/18/2019] -Updated header.php to preload the woff2 version of the Lobster Two font and style.css. [6/25/2019] -Updated /style.css and /script.js to acknowledge the prefers-reduced-motion @media query to disable all CSS transitions, animations and smooth scrolling (both CSS scroll-behavior and JavaScript smooth scrolling). [7/23/2019] -Updated /script.js to only switch to HTTPS if the browser supports the Fetch API to leave out old browsers like the Android 2.3 browser that may not support up to date security protocols like TLS 1.3. [1/20/2020] -v1.91.0 -Updated Modernizr to 3.6.0 and reduced it to only doing image support detection (APNG, animated WebP, SMIL). -Added a isSecureContext check to /script.js for Service Worker installation. -Added the async, defer and lazyload attributes to the Twitter script when loaded by /script.js. -Updated the HTTPS redirect code in /script.js to not check for Service Worker support as browsers won't even display support for the API if not in a secure context. -Added several maskable icons to /acrylicstyle.webmanifest. [2/15/2020] -v1.91.4 -Updated /style.css to automatically add relevant icons to specific site links with the .hump and .button classes on them (so we don't have to add them manually in blog posts anymore). [4/17/2020] -Updated the web app manifest to contain shortcuts. [2/12/2021] -Updated /music/ to HTML lazyload all images (both the EdgeHTML way and the newer Chromium way). -Updated the images on /music/ to all be the same size (400x400). -Added Kelly Grinz's newest album to /music/. -Updated /style.css to support more link types for displaying icons on Tidal and Amazon hump buttons.