From 61b8ceea80bc458ec2e82cd32482e1896aea5a5b Mon Sep 17 00:00:00 2001
From: Tyler Hallada <tyler@hallada.net>
Date: Tue, 13 Jan 2015 15:15:24 -0500
Subject: [PATCH] Updating README, add inline hide-desktop/mobile

---
 README.md    | 22 +++++++++++++++++++---
 css/main.css | 10 ++++------
 2 files changed, 23 insertions(+), 9 deletions(-)

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.
 </div>
 ```
 
+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 }
 }
 
 /*****************************************************************************/