93 lines
1.7 KiB
CSS
93 lines
1.7 KiB
CSS
|
:root {
|
||
|
|
--lilas-nebuloso: rgba(212,198,212,1);
|
||
|
|
--rosa-neve: rgba(243,239,239,1);
|
||
|
|
--azul-nevoeiro: rgba(199,210,216,1);
|
||
|
|
--bege-areia: rgba(226,216,195,1);
|
||
|
|
--verde-salvia: rgba(138,163,155,1);
|
||
|
|
|
||
|
|
/* Informaçoes da paleta de cores */
|
||
|
|
--primary-color: var(--lilas-nebuloso);
|
||
|
|
--secondary-color: var(--verde-salvia);
|
||
|
|
--accent-color: var(--bege-areia);
|
||
|
|
--background-color: var(--azul-nevoeiro);
|
||
|
|
--text-color: var( --rosa-neve);
|
||
|
|
--secondary-text-color: var(--verde-salvia);
|
||
|
|
|
||
|
|
/*
|
||
|
|
--error-color: var(--slate-gray);
|
||
|
|
--success-color: var(--light-slate-gray);
|
||
|
|
--warning-color: var(--periwinkle);
|
||
|
|
--info-color: var(--ivory);
|
||
|
|
*/
|
||
|
|
|
||
|
|
--font-family: 'Roboto', sans-serif;
|
||
|
|
--heading-margin: 0 0 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
body{
|
||
|
|
font-family: var(--font-family);
|
||
|
|
background: var(--background-color);
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* */
|
||
|
|
/* TOP-BAR */
|
||
|
|
/* */
|
||
|
|
|
||
|
|
|
||
|
|
.top-bar{
|
||
|
|
width: 100%;
|
||
|
|
height: 80px;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
|
||
|
|
background-color: var(--secondary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-bar .branding{
|
||
|
|
flex-grow: 4;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
margin: 5px;
|
||
|
|
|
||
|
|
align-items: center;
|
||
|
|
justify-content: start;
|
||
|
|
}
|
||
|
|
.top-bar .branding img{
|
||
|
|
width: 80px;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
top-bar .branding h1{
|
||
|
|
font: var(--font-family);
|
||
|
|
font-weight: 900;
|
||
|
|
font-size: 36px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.top-bar .menu{
|
||
|
|
flex-grow: 2;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
margin: 5px;
|
||
|
|
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-bar .menu-item{
|
||
|
|
list-style-type: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu .menu-item li {
|
||
|
|
margin-right: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu .menu-item li:last-child {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|