thallada/thallada.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updating README, add inline hide-desktop/mobile

Browse Source
This commit is contained in:
Tyler Hallada 2015-01-13 15:15:24 -05:00
parent 80ada77254
commit 61b8ceea80
2 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@ -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.

10
css/main.css
View File

@ -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 }
}
/*****************************************************************************/