iotcat
/
hexo-theme-volantis
mirror of https://github.com/IoTcat/hexo-theme-volantis.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

update header

Browse Source
i18n
xaoxuu 6 years ago
parent a7c8d7b725
commit 7f88f14b61
1 changed files with 36 additions and 38 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 74
      source/less/_header.less

74
source/less/_header.less
Unescape View File

@ -4,9 +4,8 @@
top:0; top:0;
left:0; left:0;
width:100%; width:100%;
font-size: @header-font-size; font-size: @base-font-size;
line-height: @header-height; line-height: @header-height;
// letter-spacing: .08em;
height: @header-height; height: @header-height;
overflow: hidden; overflow: hidden;
font-family: @title-font-family; font-family: @title-font-family;
@ -15,16 +14,23 @@
} }
.wrapper.sub{ .wrapper.sub{
transform: translateY(-@header-height); transform: translateY(-@header-height);
.logo{
padding-left: 0;
@media(max-width: @on-phone){
padding-left: @gap;
padding-right: @gap/2;
font-size: @base-font-size;
}
}
} }
.nav--main,.nav-sub{ .nav--main,.nav-sub{
height: @header-height; height: @header-height;
} }
background: @theme-bg-nav-header; background: @theme-bg-nav-header;
// padding: 0 @gap;
&, a{ &, a{
.txt-ellipsis; .txt-ellipsis;
height: @header-height; height: @header-height;
line-height: @header-height; line-height: @header-height;
color: @theme-text-in-header; color: @theme-text-in-header;
} }
&:extend(.z-depth-nav); &:extend(.z-depth-nav);
@ -36,11 +42,10 @@
} }
.logo { .logo {
font-size: @header-logo-font-size; padding: 0 @gap;
font-size: @base-font-size * 1.2;
@media(max-width: @on-phone){ @media(max-width: @on-phone){
flex: auto; flex: auto;
padding-left: @gap;
font-size: @header-logo-font-size * .95;
} }
} }
.menu{ .menu{
@ -81,24 +86,22 @@
} }
} }
.switcher{ .switcher{
padding: 0 @gap;
display: none; display: none;
font-size: @header-switcher-font-size; font-size: @base-font-size;
line-height: @header-height - 1*@gap; line-height: @header-height;
& > li{ & > li{
border-radius: @header-height; border-radius: @header-height;
margin-left: 4px; margin-left: 8px;
.enable-trans(); .enable-trans();
svg{
// margin-top:16px; @media(max-width: @on-phone){
} margin-left: 4px;
}
} }
// & > li.s-menu.active {
// transform: rotate(90deg);
// }
@media(max-width: @on-phone){ @media(max-width: @on-phone){
display: flex; display: flex;
padding-right: @gap;
} }
} }
.nav-sub .switcher{ .nav-sub .switcher{
@ -106,13 +109,12 @@
} }
@media (max-width: @on-phone) { @media (max-width: @on-phone) {
font-size: @header-font-size * .9;
.m_search{ .m_search{
width:0; width:0;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
.enable-trans(); .enable-trans();
margin: 0 @gap/2; margin: 0 @gap/2;
} }
&.z_search-open{ &.z_search-open{
.logo{ .logo{
@ -129,8 +131,8 @@
height: @header-height - @gap; height: @header-height - @gap;
width: @side-width; width: @side-width;
line-height: @header-height - @gap; line-height: @header-height - @gap;
margin-top: @gap/2; margin-top: @gap/2;
margin-bottom: @gap/2; margin-bottom: @gap/2;
vertical-align: middle; vertical-align: middle;
.form { .form {
position: relative; position: relative;
@ -147,22 +149,21 @@
width: @header-height - @gap; width: @header-height - @gap;
line-height: @header-height - @gap; line-height: @header-height - @gap;
top: 0; top: 0;
left: @gap; left: @gap/2;
@media(max-width: @on-phone){ font-size: @small-font-size;
left: @gap/2;
}
} }
.input { .input {
display:block; display:block;
font-size: 14px; font-size: @small-font-size;
line-height: @header-height - @gap; line-height: @header-height - @gap;
margin: 0; margin: 0;
width: 100%; width: 100%;
color: fade(@theme-text-in-header, 60%); color: fade(@theme-text-in-header, 60%);
padding: 5px 10px 5px 48px; padding-left: @base-font-size + @gap - 2px;
@media(max-width: @on-phone){ @media(max-width: @on-phone){
padding: 5px 10px 5px 38px; padding-left: @base-font-size + @gap - 2px;
} }
height: @header-height - @gap; height: @header-height - @gap;
line-height: @header-height - @gap; line-height: @header-height - @gap;
font-family: @base-font-family; font-family: @base-font-family;
@ -179,14 +180,11 @@
} }
.set-placeholder({color: fade(@theme-text-in-header, 60%)}); .set-placeholder({color: fade(@theme-text-in-header, 60%)});
&:hover{ &:hover{
// background: fade(white,35%); border: 1px dashed fade(@theme-text-in-header, 60%);
border: 1px dashed @theme-text-in-header;
} }
&:focus { &:focus {
color:@black; color:@black;
// background: white; border: 1px solid fade(@theme-text-in-header, 60%);
border: 1px dashed @theme-text-in-header;
.set-placeholder({color: @black}); .set-placeholder({color: @black});
} }
&:focus ~ .icon{ &:focus ~ .icon{
@ -228,8 +226,8 @@
nav { nav {
padding: @gap/2 0px; padding: @gap/2 0px;
.nav { .nav {
height: @item-height; height: @item-height;
line-height: @item-height; line-height: @item-height;
position: relative; position: relative;
display: block; display: block;
color: @black; color: @black;

Write Preview
Loading…
Cancel
Save