vramdal/gist:4d764aef41bd39e8c96d

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width, height=device-height"/>
    <meta charset="utf-8"/>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            align-content: stretch;
            justify-content: flex-start;
            background: yellow;
        }

        section:target {
            flex: 1 1 auto;
        }

        section:not(:target) article {
            display: none;
        }

        section:not(:target) {
            height: auto;
            flex: 0 1 auto;
        }

        section {
            transition: flex 500ms ease-out;
            border: 1px solid black;
            background-color: green;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            align-content: stretch;
        }

        header {
            padding: 0.2em;
            background-image: linear-gradient(to bottom, black, rgba(100, 100, 100, 128));
            color: white;
            font-size: 12pt;
            font-weight: bold;
            font-family: "American Typewriter", serif;
            cursor: pointer;
            flex: 0 0 auto;
        }

        article {
            width: 100%;
            height: 100%;
            display: block;
            background-color: yellowgreen;
            flex: 1 0 auto;
        }

    </style>


</head>
<body>
<section id="About">
    <header><a href="#About">About</a></header>
    <article>
        This will be about.
    </article>
</section>
<section id="map">
    <header><a href="#map">Map</a></header>
    <article>
        This will be a map.
    </article>
</section>

<section id="talk">
    <header><a href="#talk">Talk</a></header>
    <article>
        This will be talk
    </article>
</section>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width, height=device-height"/>
	<meta charset="utf-8"/>
	<style type="text/css">
	html {
	height: 100%
	}

	body {
	height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-content: stretch;
	justify-content: flex-start;
	background: yellow;
	}

	section:target {
	flex: 1 1 auto;
	}

	section:not(:target) article {
	display: none;
	}

	section:not(:target) {
	height: auto;
	flex: 0 1 auto;
	}

	section {
	transition: flex 500ms ease-out;
	border: 1px solid black;
	background-color: green;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-content: stretch;
	}

	header {
	padding: 0.2em;
	background-image: linear-gradient(to bottom, black, rgba(100, 100, 100, 128));
	color: white;
	font-size: 12pt;
	font-weight: bold;
	font-family: "American Typewriter", serif;
	cursor: pointer;
	flex: 0 0 auto;
	}

	article {
	width: 100%;
	height: 100%;
	display: block;
	background-color: yellowgreen;
	flex: 1 0 auto;
	}

	</style>


	</head>
	<body>
	<section id="About">
	<header><a href="#About">About</a></header>
	<article>
	This will be about.
	</article>
	</section>
	<section id="map">
	<header><a href="#map">Map</a></header>
	<article>
	This will be a map.
	</article>
	</section>

	<section id="talk">
	<header><a href="#talk">Talk</a></header>
	<article>
	This will be talk
	</article>
	</section>

	</body>
	</html>