156 lines
2.8 KiB
CSS
156 lines
2.8 KiB
CSS
|
|
/*---------------------------------------------*/
|
|
/*SKELETON*/
|
|
/*the position, size, and orientation of all elements without style or spaces*/
|
|
body, body * {
|
|
display: flex;
|
|
/*by default all elements are verticals*/
|
|
flex-direction: column;
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
/*default font-size for rem*/
|
|
font-size: var(--base-font-size);
|
|
}
|
|
body {
|
|
background-color: var(--color-back-base);
|
|
}
|
|
nav {
|
|
flex-direction: row;
|
|
/*we have to set the height to use the height % for childs elements*/
|
|
height: calc(var(--nav-height) + 1px);
|
|
z-index: 10;
|
|
position: relative;
|
|
}
|
|
.container_main {
|
|
flex-direction: row;
|
|
}
|
|
.container_main > * {
|
|
margin: 0px auto;
|
|
}
|
|
aside.aside_left {
|
|
top: calc(var(--nav-height) + 1px);
|
|
height: calc(100vh - var(--nav-height) - 1px);
|
|
background-color: var(--color-back-base);
|
|
}
|
|
main {
|
|
background-color: var(--color-back-base);
|
|
min-height: calc(100vh - 1px - var(--nav-height) - var(--footer-height));
|
|
}
|
|
aside.aside_right {
|
|
background-color: var(--color-back-base);
|
|
}
|
|
footer {
|
|
height: var(--footer-height);
|
|
}
|
|
footer iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
/*---------------------------------------------*/
|
|
/*DESIGN KEYWORDS*/
|
|
/* contains elements oriented vertically (default) or horizontally*/
|
|
.vertical {
|
|
flex-direction: column;
|
|
}
|
|
/* horizontal is only in web version, it becomes vertical in mobile design*/
|
|
.horizontal {
|
|
flex-direction: row;
|
|
}
|
|
/* self position of elements to the left, the right, or the center of their container*/
|
|
.right {
|
|
margin-right: 0px;
|
|
margin-left: auto;
|
|
text-align: right;
|
|
}
|
|
.left > * {
|
|
margin-left: 0px;
|
|
}
|
|
.center {
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
text-align: center;
|
|
}
|
|
.sticky {
|
|
position: -webkit-sticky; /*safari*/
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
/* RESPONSIVE DESIGNi */
|
|
|
|
@media only screen and (max-width: 1000px) {
|
|
html {
|
|
font-size: var(--small-font-size);
|
|
}
|
|
.container_main {
|
|
flex-direction: column;
|
|
}
|
|
.container_main > * {
|
|
margin: 20px;
|
|
}
|
|
.aside_left {
|
|
position: relative;
|
|
}
|
|
/*NAVBAR*/
|
|
nav.navbar {
|
|
flex-direction: column;
|
|
height: auto;
|
|
}
|
|
.navbar .nav_left a {
|
|
display: none;
|
|
display: flex;
|
|
margin-left: 0px;
|
|
width: 100%;
|
|
}
|
|
.navbar .nav_left a p {
|
|
margin-left: 20px;
|
|
}
|
|
.navbar .nav_right {
|
|
display: none;
|
|
display: flex;
|
|
}
|
|
.navbar .nav_left a#nav_logo {
|
|
display: flex;
|
|
margin-bottom: 40px;
|
|
width: auto;
|
|
}
|
|
.navbar .nav_left {
|
|
flex-direction: column;
|
|
height: auto;
|
|
}
|
|
.navbar .nav_right {
|
|
margin: 20px 0px;
|
|
}
|
|
/*burger menu*/
|
|
nav.navbar::before {
|
|
content: "";
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 10px;
|
|
width: 26px;
|
|
height: 14px;
|
|
border-top: 2px solid lightgrey;
|
|
border-bottom: 2px solid lightgrey;
|
|
cursor: pointer;
|
|
}
|
|
nav.navbar::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 18px;
|
|
width: 26px;
|
|
height: 2px;
|
|
border-top: 2px solid lightgrey;
|
|
pointer-events: none;
|
|
}
|
|
/*MAIN*/
|
|
main {
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
|
|
|