.l-wrapper
header.l-header.main-header.content-center Soy el Header
.l-container
main.l-main.main.content-center Content
nav.l-nav.main.nav.content-center Nav
aside.l-aside.main-aside.content-center Aside
footer.l-footer.main-footer.content-center
a(href="https://www.facebook.com/richirrim/", target="_blank") @richirrim
View Compiled
* { box-sizing: border-box; }
:root {
--primary-color: #00bcd4;
--secondary-color: #00838f;
--accent-color: #ffc400;
--text-color: #263238;
--bg-color: #e0f7fa;
}
.content-center {
display: flex;
justify-content: center;
align-items: center;
}
/*---------------------------*\
Variables
\*---------------------------*/
/*---------------------------*\
Layout
\*---------------------------*/
.l-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.l-header { height: 4rem; }
.l-container {
display: flex;
flex-direction: column;
flex-grow: 1;
.l-main { flex-grow: 1; }
.l-nav {
order: -1;
flex-basis: 4rem;
}
.l-aside { flex-basis: 6rem; }
@media screen and (min-width: 600px) {
& { flex-direction: row; }
.l-nav { order: 0; }
.l-nav,
.l-aside { flex-basis: 8rem; }
}
}
.l-footer { height: 6em; }
/*---------------------------*\
Theme
\*---------------------------*/
body {
color: var(--text-color);
background-color: var(--bg-color);
}
.main-header { background-color: var(--primary-color); }
.main,
.main-nav,
.main-aside {
border: .1em solid #eee;
background-color: var(--secondary-color);
}
.main-footer {
color: #fff;
background-color: var(--text-color);
}
.main-footer a:visited { color: var(--accent-color); }
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.