65 lines
997 B
CSS
65 lines
997 B
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
|
|
|
:root {
|
|
--background-dark: #21252b;
|
|
--background: #282c34;
|
|
--background-light: #323842;
|
|
--foreground: #abb2bf;
|
|
--foreground-light: #d4d8df;
|
|
--foreground-lighter: #f6f7f9;
|
|
--red: #e06c75;
|
|
--green: #98c379;
|
|
--yellow: #e5c07b;
|
|
--blue: #61afef;
|
|
--purple: #c678dd;
|
|
--cyan: #56b6c2;
|
|
}
|
|
|
|
h1,
|
|
body,
|
|
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
height: 100%;
|
|
font-family: Roboto;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
header {
|
|
background-color: var(--blue);
|
|
color: var(--background);
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
aside {
|
|
height: calc(100% - 20px);
|
|
width: 20%;
|
|
border-right: 1px solid;
|
|
margin: 10px;
|
|
|
|
}
|
|
|
|
section {
|
|
height: calc(100% - 20px);
|
|
width: 80%;
|
|
margin: 10px;
|
|
}
|