102 lines
1.9 KiB
Plaintext
102 lines
1.9 KiB
Plaintext
|
.header {
|
||
|
|
width:100%;
|
||
|
|
height:80rem/@baseFontSize;
|
||
|
|
background-color: @colorBar;
|
||
|
|
font-size:20rem/@baseFontSize;
|
||
|
|
padding:0 80rem/@baseFontSize;
|
||
|
|
position:fixed;
|
||
|
|
top:0;
|
||
|
|
left:0;
|
||
|
|
line-height:80rem/@baseFontSize;
|
||
|
|
border-bottom:2px solid #fff;
|
||
|
|
a {
|
||
|
|
transition: all 0.3s ease !important;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: @colorFontHover !important;
|
||
|
|
text-decoration: none !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.header-menu,.header-search {
|
||
|
|
cursor:pointer;
|
||
|
|
display:none;
|
||
|
|
position:absolute;
|
||
|
|
top:0;
|
||
|
|
span {
|
||
|
|
font-size:30rem/@baseFontSize;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.header-menu {
|
||
|
|
left:20rem/@baseFontSize;
|
||
|
|
}
|
||
|
|
.header-search {
|
||
|
|
right:20rem/@baseFontSize;
|
||
|
|
}
|
||
|
|
.header-title {
|
||
|
|
a {
|
||
|
|
font-size:25rem/@baseFontSize;
|
||
|
|
.header-subtitle {
|
||
|
|
font-size:20rem/@baseFontSize;
|
||
|
|
transition: all .3s ease;
|
||
|
|
}
|
||
|
|
&:hover .header-subtitle {
|
||
|
|
color:@colorFontHover;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (min-width:750px) {
|
||
|
|
.header-title {
|
||
|
|
display:inline-block;
|
||
|
|
float:left;
|
||
|
|
a {
|
||
|
|
color:#fff;
|
||
|
|
.header-subtitle {
|
||
|
|
color:#fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.header-navbar {
|
||
|
|
float:right;
|
||
|
|
li {
|
||
|
|
float:left;
|
||
|
|
a {
|
||
|
|
padding:0 10rem/@baseFontSize;
|
||
|
|
color:#fff;
|
||
|
|
}
|
||
|
|
//a:hover {
|
||
|
|
// color:@colorFontHover;
|
||
|
|
//}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (max-width:750px) {
|
||
|
|
.header-menu,.header-search {
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
.header-title {
|
||
|
|
text-align:center;
|
||
|
|
a {
|
||
|
|
color:#fff;
|
||
|
|
.header-subtitle {
|
||
|
|
color:#fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.header-navbar {
|
||
|
|
display:none;
|
||
|
|
line-height:40rem/@baseFontSize;
|
||
|
|
position:absolute;
|
||
|
|
top:80rem/@baseFontSize;
|
||
|
|
left:0;
|
||
|
|
li {
|
||
|
|
padding:0 20rem/@baseFontSize;
|
||
|
|
a {
|
||
|
|
color:#fff;
|
||
|
|
}
|
||
|
|
//a:hover {
|
||
|
|
// color:@colorFontHover;
|
||
|
|
//}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|