RobinIsTheBird/index.html

## index.html
<html>
<head>
<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  overflow: hidden;
  background-color: #e0e0d8;
  font-family: Helvetica, sans-serif;
}

.container {
  margin: 2em 0px .5em;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
.menu-bar {
  margin: 0px;
  padding: 0px;
  background-color: #888880;
  color: #fff;
  list-style-type: none;
}
/* menu-bar clear fix */
.menu-bar:before,
.menu-bar:after {
  content: " ";
  display: table;
}
.menu-bar:after {
  clear: both;
}
.menu-bar>li {
  display: block;
  float: left;
}
.menu-bar>li:last-child {
  float: right;
  position: relative;
}
.btn {
  position: relative;
  display: block;
  padding: 1em;
  color: inherit;
  text-decoration: none;
}
li:first-child .btn {
  padding-left: 2em;
  line-height: 1em;
}
li:last-child .btn {
  padding-right: 2em;
  width: 4em;
  height: 1em;
  text-align: right;
}
.dropdown {
  display: none;
}
a.btn:hover {
  background-color: #a8a8a0;
}
/*
 * 1) We need the target to be at the top of the window,
 *    because when the browser navigates to a hash, it scrolls to that hash.
 *    The scrolling causes a jump. Placing the target at the top is the only way to avoid the jump.
 *    If you use a margin to place the colored part below the menu bar, the hash gets moved down
 *    by the margin amount.
 *    If you use border-box and a transparent border, the background bleeds through the border.
 *    :target:before doesn't get selected.
 *    So in order to avoid adding mark-up, we hack the color change with linear-gradient.
 * 2) Gradient breakpoint is
 *    .container<margin-top> +
 *    .btn<padding-top> +
 *    .btn<padding-bottom> +
 *    .btn<line-height>
 */
.dropdown:target {
  display: block;
  position: fixed;
  right: 0px;
  top: 0px;
  padding: 7.1em 2em 2em;
  background: linear-gradient(rgba(168, 168, 160, 0), rgba(168, 168, 160, 0) 5em, rgba(168, 168, 160, 1) 5em, rgba(168, 168, 160, 1) 100%); /* 1, 2 */
}
.close {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 4em;
  height: 2em;
  text-decoration: none;
}
.dropdown:target + .close {
  display: block;
  width: 100%;
  height: 100%;
  background: #a8a8a0;
  color: white;
}
.dropdown:target + .close:before {
  content: "Cancel";
  text-decoration: none;
  display: block;
  padding: 1em;
  color: inherit;
  padding-right: 2em;
  text-align: right;
}
/*
 * 1) Height & max-height are 100% -
 *    .container<margin-top> -
 *    .container<margin-bottom> -
 *    .btn<padding-top> -
 *    .btn<padding-bottom> -
 *    .btn<line-height> -
 *    .main<padding-top> -
 *    .main<padding-bottom>
 */
.main {
  background-color: #f8f8f0;
  margin-left: 2em;
  margin-right: 2em;
  height: calc(100% - 9.5em); /* 1 */
  max-height: calc(100% - 9.5em); /* 1 */
  overflow: auto;
  padding: 1em;
}
</style>
<title>CSS Target Toggle</title>
</head>
<body>
  <div class="container">
    <ul class="menu-bar">
      <li><span class="btn">Left Side</span></li>
      <li>
        <a href="#join" class="join btn">Join!</a>
        <div id="join" class="join dropdown">Registration Form</div>
        <a class="join close" href="#"></a>
      </li>
    </ul>
    <div class="main">// main content here</div>
  </div>
</body>
</html>
	<html>
	<head>
	<style>
	html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 100%;
	max-height: 100%;
	overflow: hidden;
	background-color: #e0e0d8;
	font-family: Helvetica, sans-serif;
	}

	.container {
	margin: 2em 0px .5em;
	box-sizing: border-box;
	height: 100%;
	overflow: hidden;
	}
	.menu-bar {
	margin: 0px;
	padding: 0px;
	background-color: #888880;
	color: #fff;
	list-style-type: none;
	}
	/* menu-bar clear fix */
	.menu-bar:before,
	.menu-bar:after {
	content: " ";
	display: table;
	}
	.menu-bar:after {
	clear: both;
	}
	.menu-bar>li {
	display: block;
	float: left;
	}
	.menu-bar>li:last-child {
	float: right;
	position: relative;
	}
	.btn {
	position: relative;
	display: block;
	padding: 1em;
	color: inherit;
	text-decoration: none;
	}
	li:first-child .btn {
	padding-left: 2em;
	line-height: 1em;
	}
	li:last-child .btn {
	padding-right: 2em;
	width: 4em;
	height: 1em;
	text-align: right;
	}
	.dropdown {
	display: none;
	}
	a.btn:hover {
	background-color: #a8a8a0;
	}
	/*
	* 1) We need the target to be at the top of the window,
	* because when the browser navigates to a hash, it scrolls to that hash.
	* The scrolling causes a jump. Placing the target at the top is the only way to avoid the jump.
	* If you use a margin to place the colored part below the menu bar, the hash gets moved down
	* by the margin amount.
	* If you use border-box and a transparent border, the background bleeds through the border.
	* :target:before doesn't get selected.
	* So in order to avoid adding mark-up, we hack the color change with linear-gradient.
	* 2) Gradient breakpoint is
	* .container<margin-top> +
	* .btn<padding-top> +
	* .btn<padding-bottom> +
	* .btn<line-height>
	*/
	.dropdown:target {
	display: block;
	position: fixed;
	right: 0px;
	top: 0px;
	padding: 7.1em 2em 2em;
	background: linear-gradient(rgba(168, 168, 160, 0), rgba(168, 168, 160, 0) 5em, rgba(168, 168, 160, 1) 5em, rgba(168, 168, 160, 1) 100%); /* 1, 2 */
	}
	.close {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 4em;
	height: 2em;
	text-decoration: none;
	}
	.dropdown:target + .close {
	display: block;
	width: 100%;
	height: 100%;
	background: #a8a8a0;
	color: white;
	}
	.dropdown:target + .close:before {
	content: "Cancel";
	text-decoration: none;
	display: block;
	padding: 1em;
	color: inherit;
	padding-right: 2em;
	text-align: right;
	}
	/*
	* 1) Height & max-height are 100% -
	* .container<margin-top> -
	* .container<margin-bottom> -
	* .btn<padding-top> -
	* .btn<padding-bottom> -
	* .btn<line-height> -
	* .main<padding-top> -
	* .main<padding-bottom>
	*/
	.main {
	background-color: #f8f8f0;
	margin-left: 2em;
	margin-right: 2em;
	height: calc(100% - 9.5em); /* 1 */
	max-height: calc(100% - 9.5em); /* 1 */
	overflow: auto;
	padding: 1em;
	}
	</style>
	<title>CSS Target Toggle</title>
	</head>
	<body>
	<div class="container">
	<ul class="menu-bar">
	<li><span class="btn">Left Side</span></li>
	<li>
	<a href="#join" class="join btn">Join!</a>
	<div id="join" class="join dropdown">Registration Form</div>
	<a class="join close" href="#"></a>
	</li>
	</ul>
	<div class="main">// main content here</div>
	</div>
	</body>
	</html>