Skip to content

Commit

Permalink
refactor: refactor index page
Browse files Browse the repository at this point in the history
  • Loading branch information
@haoziqaq @BeADre
haoziqaq authored and BeADre committed Sep 18, 2022
1 parent 805e8fe commit c675b67
Show file tree
Hide file tree
Showing 3 changed files with 159 additions and 249 deletions.
291 changes: 92 additions & 199 deletions packages/varlet-cli/site/pc/pages/index/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,231 +1,124 @@
.home-page {
position: relative;
width: 100vw;
height: 100vh;
box-sizing: border-box;
min-width: 1200px;
min-height: 460px;
background: var(--site-config-color-home-page-background);
overflow: hidden;
display: flex;
align-items: center;
}

@keyframes fade-in {
@keyframes logo-wave {
0% {
opacity: 0;
transform: translateX(-100%);
transform: translate(8%, 8%);
}


to {
opacity: 1;
transform: translateX(0%);
20% {
transform: translate(-8%, 8%);
}
}

@keyframes slash-1 {
from {
transform: rotate(90deg);
;
40% {
transform: translate(-8%, -8%);
}

to {
transform: rotate(10deg);
60% {
transform: translate(-2%, 8%);
}
}

@keyframes slash-2 {
from {
transform: rotate(90deg);
;
80% {
transform: translate(8%, -8%);
}

to {
transform: rotate(20deg);
100% {
transform: translate(8%, 8%);
}
}

@keyframes slash-3 {
from {
transform: rotate(90deg);
;
.varlet-doc-index {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
box-sizing: border-box;
background: var(--site-config-color-index-page-background);

&__layout {
display: flex;
flex-direction: column;
align-items: center;
padding: 100px;
max-width: 1200px;
}

to {
transform: rotate(30deg);
&__logo {
width: 100%;
height: 100%;
flex-shrink: 0;
z-index: 2;
}
}

@keyframes slash-4 {
from {
transform: rotate(90deg);
;
&__logo-container {
position: relative;
display: flex;
justify-content: center;
width: 160px;
height: 160px;
}

to {
transform: rotate(40deg);
&__logo-background-mask {
position: absolute;
left: -40px;
top: -40px;
bottom: -40px;
right: -40px;
background: var(--site-config-color-index-page-logo-mask-background);
transition: background-color .2s;
filter: blur(45px);
border-radius: 50%;
animation: logo-wave 6s infinite linear;
}
}

@keyframes slash-5 {
from {
transform: rotate(90deg);
;
&__title {
font-size: 54px;
margin-top: 60px;
}

to {
transform: rotate(50deg);
&__description {
width: 700px;
font-size: 16px;
line-height: 28px;
letter-spacing: 1px;
margin-top: 30px;
text-align: center;
color: var(--site-config-color-index-page-second-text-color);
}
}

.slash-box {
position: absolute;
width: 30px;
bottom: -70%;
top: -130%;
right: 52%;
transform-origin: bottom right;
transition: box-shadow 0.5s;
box-shadow: -20px 0 20px var(--site-config-color-home-page-slash);
}
&__link-button-group {
display: flex;
justify-content: space-around;
margin-top: 30px;
}

.box-1 {
animation: slash-1 .75s forwards;
}
&__link-button {
height: 44px;
font-size: 18px;
transition: all .25s;
margin: 0 10px;
}

.box-2 {
animation: slash-2 .75s forwards;
}
&__link-button-text {
margin-right: 4px;
}

.box-3 {
animation: slash-3 .75s forwards;
}
&__features {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 60px;
}

.box-4 {
animation: slash-4 .75s forwards;
}
&__feature {
width: 280px;
margin: 10px;
padding: 20px;
border-radius: 4px;
background: var(--site-config-color-index-page-feature-background);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.box-5 {
animation: slash-5 .75s forwards;
&__feature-description {
color: var(--site-config-color-index-page-second-text-color);
font-size: 14px;
margin-top: 10px;
}
}

.profile-container {
height: 100vh;
padding-left: 10vw;
display: flex;
justify-content: center;
align-items: center;

.container-box {
width: 35vw;
min-width: 500px;

.logo-container {
margin-right: 20px;
}

.button-group {
display: flex;
margin-top: 25px;
align-items: center;
}

.block-button-content {
display: flex;
align-items: center;
}

.common-button {
height: 52px;
font-size: 18px;
transition: all .25s;
animation: fade-in .75s forwards;
}

.extra-button {
flex-shrink: 0;
background-color: var(--site-config-color-home-page-extra-button-background);
}

.github-button {
background-color: var(--site-config-color-home-page-github-button-background);
color: #fff;
}

.primary-button {
background-color: var(--site-config-color-home-page-primary-button-background);
}

.margin-left {
margin-left: 10px;
}

@media all and (max-width: 2560px) {
.description-container {
display: flex;
margin-bottom: 40px;
}

.base-title {
font-size: 110px;
line-height: 72px;
font-weight: 500;
margin-top: 21px;
animation: fade-in .75s forwards;
}

.base-description {
font-size: 20px;
line-height: 38px;
padding-left: 4px;
font-weight: 500;
margin-bottom: 43px;
letter-spacing: 1px;
animation: fade-in .75s forwards;
}

.logo-box {
width: 120px;
height: 120px;
flex-shrink: 0;
margin-right: 30px;
z-index: 2;
}
}

@media all and (max-width: 1920px) {

.description-container {
display: flex;
margin-bottom: 35px;
}

.base-title {
font-size: 84px;
line-height: 72px;
font-weight: 500;
margin-top: 8px;
animation: fade-in .75s forwards;
}

.base-description {
font-size: 16px;
line-height: 28px;
padding-left: 4px;
font-weight: 500;
margin-bottom: 45px;
letter-spacing: 1px;
animation: fade-in .75s forwards;
}

.logo-box {
width: 90px;
height: 90px;
flex-shrink: 0;
margin-right: 25px;
z-index: 2;
}
}
}
}
Loading

0 comments on commit c675b67

Please sign in to comment.