diff --git a/README.md b/README.md index b122d0d..4fadfa3 100644 --- a/README.md +++ b/README.md @@ -29,9 +29,11 @@ random, colorful, and more CPU efficient. It was really fun to tweak various variables in the script and see how the animation reacted. It didn't take much tweaking to get the lines to appear like lightning flashing in the distant background, or like cracks splitting the -screen, or like growing forest of sprouting trees. A future project may involve -putting the magic up on its own webpage and add UI dials to allow anyone to -change these variables in realtime. +screen, or like growing forest of sprouting trees. + +You can play around with these variables yourself on the [/magic +page](http://www.hallada.net/magic) which has sliders for tweaking the +animations in realtime. ##Layout & CSS## I use a [grid system devised by Adam Kaplan](http://www.adamkaplan.me/grid/) and @@ -105,6 +107,20 @@ desktop, use `hide-desktop` instead. ``` +I had an issue with displaying elements on desktop that had the class +"hide-mobile", so you can add the following classes to make sure they redisplay +in the right display type correctly: + +* `hide-mobile-block` +* `hide-mobile-inline-block` +* `hide-mobile-inline` +* `hide-deskop-block` +* `hide-desktop-inline-block` +* `hide-desktop-inline` + +I could add more for each `display` property, but I'm trying to find a better +way of fixing this without adding these second classes. + Another note: I use [box-sizing (as suggested by Paul Irish)](http://www.paulirish.com/2012/box-sizing-border-box-ftw/), which I think makes dealing with sizing elements a lot more sane. diff --git a/css/main.css b/css/main.css index 4a8172d..dfd4821 100755 --- a/css/main.css +++ b/css/main.css @@ -158,17 +158,15 @@ img { width: auto; max-width: 100%; height: auto; } .hide-mobile { display: none; } -.hide-desktop-inline-block { - display: inline-block; -} -.hide-desktop-block { - display: block; -} +.hide-desktop-inline-block { display: inline-block } +.hide-desktop-block { display: block } +.hide-desktop-inline { display: inline } @media (min-width: 40rem) { .hide-desktop { display: none } .hide-mobile-inline-block { display: inline-block } .hide-mobile-block { display: block } + .hide-mobile-inline { display: inline } } /*****************************************************************************/