Add footer to document flow

This commit is contained in:
Brandon 2022-11-11 21:43:40 -08:00 committed by Alex Cabal
parent 537e14122f
commit 5f2339a690

View file

@ -1,16 +1,19 @@
@namespace epub "http://www.idpf.org/2007/ops"; @namespace epub "http://www.idpf.org/2007/ops";
html{
position: relative;
}
body{ body{
font-family: "Georgia", serif; font-family: "Georgia", serif;
font-size: 18px; font-size: 18px;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main{
margin: 8rem auto 3rem; margin: 8rem auto 3rem;
max-width: 55ch; max-width: 55ch;
min-height: calc(100vh - 8rem - 3rem); /* Size of header - body margin */
padding: 0 3rem; padding: 0 3rem;
flex-grow: 1;
} }
body > header{ body > header{
@ -55,13 +58,6 @@ body > header li:first-child > a:hover{
transform: scale(1.025) rotate(1deg); transform: scale(1.025) rotate(1deg);
} }
body > footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
body > footer ul{ body > footer ul{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -72,13 +68,10 @@ body > footer ul{
body > footer li{ body > footer li{
max-width: 40%; max-width: 40%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
body > section[epub|type~="titlepage"], body > main > section[epub|type~="titlepage"],
body > section[epub|type~="halftitlepage"]{ body > main > section[epub|type~="halftitlepage"]{
min-height: auto; min-height: auto;
} }
@ -98,7 +91,7 @@ nav[epub|type~="toc"] ol{
} }
@media(max-width: 65ch){ @media(max-width: 65ch){
body{ main{
padding: 0 2rem; padding: 0 2rem;
} }