SethTrowbridge/devo-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

flexbox filler experiment

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-09 10:27:43 -04:00
parent f394e363c8
commit ae21e31f83
1 changed files with 73 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
index.html
View File

@ -28,13 +28,7 @@ section
box-sizing: border-box; box-sizing: border-box;
padding:50px; padding:50px;
} }
nav
{
position:fixed;
right:50px;
bottom:50px;
z-index:10;
}
h2 h2
{ {
width:500px; width:500px;
@ -272,13 +266,79 @@ h2[data-spy='true']::before, h2[data-spy='true']::after
</script> </script>
</head> </head>
<body> <body>
<style>
.Filler
{
display: flex;
width:50%;
}
.Part
{
flex:1;
height:100px;
background:red;
}
.Part.Middle
{
flex:0 0 auto;
background:orange;
}
</style>
<div class="Filler">
<div class="Part Cap Top"></div>
<div class="Part Middle">Random content</div>
<div class="Part Cap Bottom"></div>
</div>
<style>
nav
{
position: fixed;
top:50px;
right: 0px;
width: 200px;
z-index:10;
height: 600px;
background:white;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
border-left:10px solid black;
}
nav ul
{
margin:0;
padding:0;
text-align:right;
}
nav::before, nav::after
{
content:" ";
display:block;
width:50px;
height:50px;
background:black;
position:absolute;
left:0;
}
nav::before
{
top:-25px;
}
nav::after
{
bottom:-25px;
}
</style>
<nav> <nav>
<a href="#top" >Top</a> <ul>
<a href="#order">Order</a> <li><a href="#top" >Top</a></li>
<a href="#video">Video</a> <li><a href="#order">Order</a></li>
<a href="#about">About</a> <li><a href="#video">Video</a></li>
<a href="#specs">Specs</a> <li><a href="#about">About</a></li>
<a href="#email">Sign-up</a> <li><a href="#specs">Specs</a></li>
<li><a href="#email">Sign-up</a></li>
</ul>
</nav> </nav>
<section id="order"> <section id="order">