/*style*/
head {display: block;}
head * {display: none;}
/*style*/
/* style contenteditable
, trebuchet, geneva, sans-serif;
*/
html {
/*background-color: #eeeee8; */
font-family: trebuchet, geneva, sans-serif;
}
body {
background-color: white; /* #deded8 */
margin: 0;
}
article, aside, footer, header {
padding: 0.5rem;
box-sizing: border-box;
}
header {
background-color: gray; /* #333 */
/*height: 2em;*/
color: #ccc;
text-align: center;
border-bottom: 1px solid;
}
aside {
/* background: linear-gradient(to bottom, white 50%, #deded8 80%); */
}
/* left column default navigation values */
nav {
display: flex;
/*margin-left: 3px;*/
/*padding: 0 0 0 9; */
}
main nav {
flex-flow: column;
background: linear-gradient(to bottom, #ccc 50%, #deded8 80%);
}
nav a {
text-align: center;
background: #ccc;
color: black;
}
nav a:hover {
outline: 1px solid #bbb;
color: red;
text-decoration: underline;
}
main nav a {
line-height: 3;
border-bottom: #aaa solid 1px;
margin-bottom: 1px;
margin-left: 0px;
}
/* f o o t e r */
footer nav a {
margin: 0 5px;
padding: 5px 0;
text-decoration: none;
flex: auto;
}
footer {
color: white;
background-color: #333;
}
footer p {
text-align: center;
}
footer p a {
color: #aaa;
}
/* larger screen */
@media screen and (min-width: 30rem)
{
body {
max-width: 75rem;
margin: auto;
}
main {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
article {
flex: 60%;
}
main nav,
aside {
flex: 20%;
}
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header, footer {
flex: 0 0 content;
}
main {
flex: 1;
}
/*</style>*/
/*
flex sticky hdr / ftr
STICKY FTR :
footer, header, main {...
header, footer {...
<style type="text/css">
header, main {
padding: 10px; box-sizing: border-box;
}
style
*/
|
Download
