Hi there Arie,
I am sorry that I was unable to reply to your post earlier;
unfortunately I lost internet connection until 11am today.
Your moving of the goal posts does not aggravate me, on the
contrary it actually helps me improve my CSS skills.
Here is my amended code that that seems to address the problem
that was presented by your new goal post position...
Code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
html,body {
height: 100%;
margin: 0;
box-sizing: border-box;
}
*,*::before,
*::after {
box-sizing: inherit;
}
body {
overflow-x: hidden;
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#wrapper {
position: relative;
min-height: 100%;
padding: 4.25em 0.5em 0.5em;
}
#top,
#close {
position: fixed;
top: 1em;
right: 1.5em;
z-index: 1;
padding: 0.5em;
background-color: #000;
border-radius: 0.5em;
color: #fff;
cursor: pointer;
transition: 1.5s ease-in-out;
}
#top::before {
font-size: 2em;
content: '\02261';
}
#close {
z-index: 0;
opacity: 0;
}
#close::before {
font-size: 2em;
content: '\02a2f';
}
#nav {
position: absolute;
top: 0;
right: -100%;
width: 100%; width:50%; /* Arie's latest goal post position */
height: 100%;
padding: 3em 0 1em 0;
border: 1px solid #999;
background-color: #808080;
background-image: linear-gradient( to bottom, #000, #808080 55%, #c0c0c0 );
transition: 1s ease-in-out;
}
#nav ul {
padding: 0;
margin: 0;
list-style: none;
vertical-align: middle;
}
#nav li {
float: left;
width: 50%;
}
#nav ul a {
display: block;
margin: 0.5em 0;
font-size: 1.25em;
color: transparent;
text-align: center;
text-decoration: none;
transition: 1.5s ease-in-out;
}
input {
position: absolute;
left: -999em;
}
#r1:checked ~ #top{
z-index: 0;
}
#r1:checked ~ #nav {
right: 0;
}
#r1:checked ~ #nav #close{
background-color: #f0f0f0;
color: #000;
opacity: 1;
}
#r1:checked ~ #nav ul a {
color: #fff;
}
#content {
max-width: 62.5em;
padding: 3em 2em;
margin: auto;
border-radius: 0.75em;
border: 1px solid #999;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}
@media ( max-width: 30em ) {
#nav li {
float: none;
width: 100%;
}
}
@media ( max-width: 20em ) {
#nav {
width: 100%;
}
}
</style>
</head>
<body>
<div id="wrapper">
<input id="r1" name="r" type="radio">
<label id="top" for="r1"></label>
<div id="nav">
<input id="r2" name="r" type="radio">
<label id="close" for="r2"></label>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="people.html">People</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor
nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis
interdum justo ac justo vehicula consequat. Curabitur et
volutpat nibh. Phasellus rutrum lacus at dolor placerat
feugiat. Morbi porta, sapien nec molestie molestie, odio
magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac
magna sed, pretium commodo odio. Sed porttitor augue velit,
quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum.
Proin molestie lectus consectetur purus aliquam porttitor.
Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p><p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis. Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur tristique varius ullamcorper.
</p>
</div>
<!-- #wrapper --></div>
</body>
</html>
coothead
