You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
3.4 KiB
153 lines
3.4 KiB
.cover-wrapper .cover |
|
top: 0 |
|
left: 0 |
|
max-width: 100% |
|
height: 100vh |
|
display: flex |
|
flex-wrap: nowrap |
|
flex-direction: column |
|
align-items: center |
|
align-self: center |
|
align-content: center |
|
color: $color-site-inner |
|
padding: $gap |
|
.cover-body |
|
div.b |
|
margin-top: 8vh |
|
margin-bottom: 8vh |
|
&.half |
|
margin-bottom: -100px |
|
max-height: 640px |
|
min-height: 400px |
|
.cover-body |
|
div.b |
|
margin-top: 10% |
|
margin-bottom: 0 |
|
height: "calc(36vh - %s + 200px)" % $navbar-height |
|
@media screen and (max-width: $device-mobile) |
|
.cover-body |
|
div.a |
|
margin-top: 10% |
|
|
|
.scroll-down |
|
width: 100% |
|
height: 64px |
|
position: absolute |
|
bottom: 0 |
|
text-align: center |
|
cursor: pointer |
|
.scroll-down-effects |
|
color: white |
|
font-size: 24px |
|
line-height: 64px |
|
position: absolute |
|
text-shadow: 0 1px 2px rgba(0, 0, 0, .1) |
|
animation: scroll-down-effect 1.5s infinite |
|
@keyframes scroll-down-effect |
|
0% |
|
top: 0 |
|
opacity: 1 |
|
50% |
|
top: -16px |
|
opacity: .4 |
|
100% |
|
top: 0 |
|
opacity: 1 |
|
|
|
|
|
.cover-wrapper .cover .cover-body |
|
margin: auto |
|
&,div.a,div.b |
|
display: flex |
|
flex-direction: column |
|
align-items: center |
|
justify-content: center |
|
max-width: 100% |
|
.title |
|
font-family: $fontfamily-logo |
|
font-size: $fontsize-large |
|
line-height: 1.2 |
|
.subtitle |
|
font-size: $fontsize-meta |
|
.logo |
|
max-height: 100px |
|
max-width: "calc(100% - 4 * %s)" % $gap |
|
@media screen and (min-height: 1024px) |
|
.title |
|
font-size: $fontsize-large * 1.2 |
|
.subtitle |
|
font-size: $fontsize-meta * 1.2 |
|
.logo |
|
max-height: 150px |
|
.m_search |
|
$iconW = 32px |
|
$iconMargin = 4px |
|
position: relative |
|
max-width: "calc(100% - %s)" % 16px |
|
width: 320px |
|
vertical-align: middle |
|
.form |
|
position: relative |
|
display: block |
|
width: 100% |
|
.icon,.input |
|
trans() |
|
.icon |
|
position: absolute |
|
display:block |
|
line-height: 2.5rem |
|
width: $iconW |
|
top: 0 |
|
left: $iconMargin+1px |
|
color: alpha($color-p, .75) |
|
.input |
|
display: block |
|
height: 2.5rem |
|
width: 100% |
|
box-shadow: none |
|
box-sizing: border-box |
|
font-size: $fontsize-meta |
|
-webkit-appearance: none |
|
padding-left: $iconW + $iconMargin |
|
@media screen and (max-width: $device-mobile) |
|
padding-left: $iconW + $iconMargin |
|
border-radius: 1.4rem |
|
background: alpha($color-card, .6) |
|
backdrop-filter: blur(10px) |
|
border: none |
|
color: $color-text |
|
&:hover |
|
background: alpha($color-card, .8) |
|
&:focus |
|
background: alpha($color-card, 1) |
|
.menu |
|
margin-top: $gap |
|
ul |
|
display: flex |
|
flex-wrap: wrap |
|
align-items: baseline |
|
justify-content: center |
|
li |
|
display: flex |
|
flex-wrap: wrap |
|
align-items: center |
|
padding: 0 |
|
height: auto |
|
ul>li>a |
|
font-size: $fontsize-meta |
|
padding: 2px |
|
margin: 4px |
|
trans() |
|
color: alpha($color-site-inner, .65) |
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) |
|
border-bottom: 2px solid transparent |
|
i |
|
margin-right: 4px |
|
&:hover, &.active, &:active |
|
color: $color-site-inner |
|
border-bottom: 2px solid $color-site-inner |
|
.switcher |
|
& > li |
|
a |
|
&:hover |
|
background: alpha($color-text, .15)
|
|
|