95 lines
1.5 KiB
CSS
95 lines
1.5 KiB
CSS
.header {
|
|
display: flow-root;
|
|
position: fixed;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
background: linear-gradient(90deg, rgba(88, 158, 165, 1) 0%, rgba(29, 78, 137, 1) 42%);
|
|
border-radius: 0 0 30px 30px;
|
|
z-index: 200;
|
|
padding: 16px 0;
|
|
top: 0;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
width: max-content;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
gap: 40px;
|
|
}
|
|
|
|
.content span {
|
|
font-size: 13pt;
|
|
color: var(--defaultColor);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.parent {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logoContent {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.logo {
|
|
width: 50px;
|
|
/* height: 50px; */
|
|
}
|
|
|
|
.logo img {
|
|
width: 120%;
|
|
height: 120%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.logoTxt {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.logoTxt h1 {
|
|
width: max-content;
|
|
font-size: 15pt;
|
|
color: var(--defaultColor);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.logoContent h1:last-child {
|
|
font-size: 17pt;
|
|
}
|
|
|
|
|
|
/* responsive */
|
|
|
|
@media screen and (min-width:360px) and (max-width:601px) {
|
|
|
|
.content,
|
|
.logoContent {
|
|
display: none;
|
|
}
|
|
|
|
.header {
|
|
border-radius: 0 0 15px 15px;
|
|
padding: 16px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width:601px) and (max-width:1024px) {
|
|
|
|
.content,
|
|
.logoContent {
|
|
display: none;
|
|
}
|
|
|
|
.header {
|
|
border-radius: 0 0 15px 15px;
|
|
padding: 16px;
|
|
}
|
|
} |