kypflug/media queries

## media queries
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Media Queries Level 4 Demo</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #efefef;
            font-family: 'Segoe UI';
            font-size: 20px;
            color: #333;
        }
        #container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
        }
        header, footer {
            background: #808080;
            margin: 8px;
            color: #fff;
            transition: padding 0.5s;
        }
        header {
            padding: 16px;
        }
        h1 {
            margin: 0;
            padding: 0;
            transition: font-size 0.5s;
        }
        #primary {
            display: flex;
            flex-flow: row nowrap;
            flex: 1;
        }

        aside {
            width: 20%;
        }
        aside > ul {
            list-style-type: none;
            margin: 0 8px 0 8px;
            padding: 0;
            display: block;
        }

        aside > ul > li {
            display: block;
            clear: both;
            background: #00215a;
            padding: 8px;
            margin-bottom: 8px;
            transition: padding 0.5s;
        }
        aside > ul > li:hover {
            background: #d8c38e;
        }
        aside > ul > li > a {
            text-decoration: none;
            font-weight: bold;
            color: #d8c38e;
        }
        aside > ul > li:hover > a {
            color: #00215a;
        }

        article {
            background: #fff;
            flex: 1;
            padding: 16px;
            margin-right: 8px;
        }

        footer {
            padding: 16px;
            transition: padding 0.5s;
        }
        footer > p {
            margin: 0;
            padding: 0;
        }

        p#supports {
            font-size: 2.0em;
            color: #ff6a00;
        }

        p#supports > span {
            display: none;
        }

        @media (pointer:coarse) {
            p#supports > span#pointer-coarse {
                display: inline;
            }
        }
        @media (pointer:fine) {
            p#supports > span#pointer-fine {
                display: inline;
            }
        }
        @media (hover:on-demand) {
            p#supports > span#hover-ondemand {
                display: inline;
            }
        }
        @media (hover:hover) {
            p#supports > span#hover-hover {
                display: inline;
            }
        }
        @media (any-pointer:coarse) {
            p#supports > span#any-pointer-coarse {
                display: inline;
            }
        }
        @media (any-pointer:fine) {
            p#supports > span#any-pointer-fine {
                display: inline;
            }
        }
        @media (any-hover:on-demand) {
            p#supports > span#any-hover-ondemand {
                display: inline;
            }
        }
        @media (any-hover:hover) {
            p#supports > span#any-hover-hover {
                display: inline;
            }
        }

        @media (pointer:coarse) {
            aside ul li {
                padding: 16px;
                font-size: 2.0em;
            }
            header {
                padding: 24px;
                background: #d8c38e;
            }
            header h1 {
                font-size: 2.0em;
                color: #00215a;
            }
            footer {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div id="container">
        <header>
            <h1>Media Queries Level 4</h1>
        </header>
        <div id="primary">
            <aside role="navigation">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Group#1</a></li>
                    <li><a href="#">Group#2</a></li>
                    <li><a href="#">Group#3</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </aside>
            <article>
                <h2>pointer and hover</h2>
                <p>Unplug your mouse (or try this page from a phone or tablet) and watch how the page changes!</p>
                <p id="supports">
                    This device supports:
                    <span id="pointer-coarse">(pointer:coarse)</span>
                    <span id="pointer-fine">(pointer:fine)</span>
                    <span id="hover-ondemand">(hover:on-demand)</span>
                    <span id="hover-hover">(hover:hover)</span>
                    <span id="any-pointer-coarse">(any-pointer:coarse)</span>
                    <span id="any-pointer-fine">(any-pointer:fine)</span>
                    <span id="any-hover-ondemand">(any-hover:on-demand)</span>
                    <span id="any-hover-hover">(any-hover:hover)</span>
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget velit tempus, viverra eros vel, pretium dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa magna, iaculis a ante fringilla, vehicula convallis sem. Sed mollis lorem sed dolor pulvinar, eu suscipit felis lacinia. Morbi sit amet venenatis magna, at viverra orci. Nam eget vehicula ipsum. Praesent iaculis orci id pulvinar aliquam. Mauris dictum sit amet diam a porttitor. Nam eget viverra augue. Maecenas volutpat imperdiet risus et eleifend. Morbi tempor, odio vel blandit varius, ante ante viverra mauris, id facilisis urna augue eu metus.</p>
            </article>
        </div>
        <footer>
            <p>Footer</p>
        </footer>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Media Queries Level 4 Demo</title>
	<style>
	body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #efefef;
	font-family: 'Segoe UI';
	font-size: 20px;
	color: #333;
	}
	#container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column nowrap;
	}
	header, footer {
	background: #808080;
	margin: 8px;
	color: #fff;
	transition: padding 0.5s;
	}
	header {
	padding: 16px;
	}
	h1 {
	margin: 0;
	padding: 0;
	transition: font-size 0.5s;
	}
	#primary {
	display: flex;
	flex-flow: row nowrap;
	flex: 1;
	}

	aside {
	width: 20%;
	}
	aside > ul {
	list-style-type: none;
	margin: 0 8px 0 8px;
	padding: 0;
	display: block;
	}

	aside > ul > li {
	display: block;
	clear: both;
	background: #00215a;
	padding: 8px;
	margin-bottom: 8px;
	transition: padding 0.5s;
	}
	aside > ul > li:hover {
	background: #d8c38e;
	}
	aside > ul > li > a {
	text-decoration: none;
	font-weight: bold;
	color: #d8c38e;
	}
	aside > ul > li:hover > a {
	color: #00215a;
	}

	article {
	background: #fff;
	flex: 1;
	padding: 16px;
	margin-right: 8px;
	}

	footer {
	padding: 16px;
	transition: padding 0.5s;
	}
	footer > p {
	margin: 0;
	padding: 0;
	}

	p#supports {
	font-size: 2.0em;
	color: #ff6a00;
	}

	p#supports > span {
	display: none;
	}

	@media (pointer:coarse) {
	p#supports > span#pointer-coarse {
	display: inline;
	}
	}
	@media (pointer:fine) {
	p#supports > span#pointer-fine {
	display: inline;
	}
	}
	@media (hover:on-demand) {
	p#supports > span#hover-ondemand {
	display: inline;
	}
	}
	@media (hover:hover) {
	p#supports > span#hover-hover {
	display: inline;
	}
	}
	@media (any-pointer:coarse) {
	p#supports > span#any-pointer-coarse {
	display: inline;
	}
	}
	@media (any-pointer:fine) {
	p#supports > span#any-pointer-fine {
	display: inline;
	}
	}
	@media (any-hover:on-demand) {
	p#supports > span#any-hover-ondemand {
	display: inline;
	}
	}
	@media (any-hover:hover) {
	p#supports > span#any-hover-hover {
	display: inline;
	}
	}

	@media (pointer:coarse) {
	aside ul li {
	padding: 16px;
	font-size: 2.0em;
	}
	header {
	padding: 24px;
	background: #d8c38e;
	}
	header h1 {
	font-size: 2.0em;
	color: #00215a;
	}
	footer {
	display: none;
	}
	}
	</style>
	</head>
	<body>
	<div id="container">
	<header>
	<h1>Media Queries Level 4</h1>
	</header>
	<div id="primary">
	<aside role="navigation">
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Group#1</a></li>
	<li><a href="#">Group#2</a></li>
	<li><a href="#">Group#3</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
	</aside>
	<article>
	<h2>pointer and hover</h2>
	<p>Unplug your mouse (or try this page from a phone or tablet) and watch how the page changes!</p>
	<p id="supports">
	This device supports:
	<span id="pointer-coarse">(pointer:coarse)</span>
	<span id="pointer-fine">(pointer:fine)</span>
	<span id="hover-ondemand">(hover:on-demand)</span>
	<span id="hover-hover">(hover:hover)</span>
	<span id="any-pointer-coarse">(any-pointer:coarse)</span>
	<span id="any-pointer-fine">(any-pointer:fine)</span>
	<span id="any-hover-ondemand">(any-hover:on-demand)</span>
	<span id="any-hover-hover">(any-hover:hover)</span>
	</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget velit tempus, viverra eros vel, pretium dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa magna, iaculis a ante fringilla, vehicula convallis sem. Sed mollis lorem sed dolor pulvinar, eu suscipit felis lacinia. Morbi sit amet venenatis magna, at viverra orci. Nam eget vehicula ipsum. Praesent iaculis orci id pulvinar aliquam. Mauris dictum sit amet diam a porttitor. Nam eget viverra augue. Maecenas volutpat imperdiet risus et eleifend. Morbi tempor, odio vel blandit varius, ante ante viverra mauris, id facilisis urna augue eu metus.</p>
	</article>
	</div>
	<footer>
	<p>Footer</p>
	</footer>
	</div>
	</body>
	</html>