Skip to content

Commit

Permalink
Merge pull request #62 from stack-wuh/feat-sass
Browse files Browse the repository at this point in the history 
Feat sass
  • Loading branch information
@stack-wuh
stack-wuh committed Dec 18, 2021
2 parents 6bd2f16 + a253e32 commit 2946ff9
Show file tree
Hide file tree
Showing 6 changed files with 270 additions and 242 deletions.
9 changes: 7 additions & 2 deletions components/audio/useAudio.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,8 +301,13 @@ const useAudio = (
}

if (audioRef && audioRef.canplay) {
const { canplay } = audioRef
dispatch({ type: 'STATUS', payload: { ...state, canplay } })
const { canplay, muted } = audioRef
const mutedStatus = muted ? 'open' : 'close'

dispatch({
type: 'STATUS',
payload: { ...state, canplay, muted, mutedStatus },
})
}
}, [audioRef, ops.traceList.length])

Expand Down
21 changes: 14 additions & 7 deletions styles/home.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,20 +37,23 @@ $name: 'ww_home';

img {
transform: scale3d(1, 1, 1);
transition: var(--transition-base);
transition: transform .5s var(--transition-linear);
}

&:hover {
& .lf img {
transform: scale3d(1.3, 1.3, 1.3) rotateZ(-6deg);
transition: var(--transition-base);
transition: transform .5s var(--transition-linear);

}

& .title,
& .description {
transform: translateX(10px);
transition: var(--transition-base);
transition-delay: .1s;
transition-property: transform, background-size, color;
transition-timing-function: var(--transition-linear);
transition-duration: .5s;
transition-delay: .3s;
}

& .title {
Expand All @@ -59,7 +62,6 @@ $name: 'ww_home';
}

outline: 1px solid var(--color-primary-2);
transition: var(--transition-base);
}

&::before {
Expand Down Expand Up @@ -97,8 +99,11 @@ $name: 'ww_home';
font-size: var(--font-size-medium);
margin-bottom: 0;
margin-top: 0;
color: inherit;
line-height: var(--line-height-medium);
transition: var(--transition-base);
transition-property: background-size, transform, color;
transition-timing-function: var(--transition-linear);
transition-duration: .5s;

&:hover {
text-decoration: underline;
Expand All @@ -110,7 +115,9 @@ $name: 'ww_home';
margin-top: var(--margin-base);
font-size: 13px;
line-height: 21px;
transition: var(--transition-base);
transition-property: background-size, transform, color;
transition-timing-function: var(--transition-linear);
transition-duration: .5s;
}
}
}
198 changes: 104 additions & 94 deletions styles/layout.css
View file
Original file line number Diff line number Diff line change
@@ -1,156 +1,166 @@
.layout {
position: relative;
width: 100%;
padding-top: 5.33rem;
box-sizing: border-box;
overflow: hidden;
transition:
width .5s cubic-bezier(0.075, 0.82, 0.165, 1),
height .5s cubic-bezier(0.075, 0.82, 0.165, 1),
border-radius .5s cubic-bezier(0.075, 0.82, 0.165, 1);
position: relative;
width: 100%;
padding-top: 5.33rem;
box-sizing: border-box;
overflow: hidden;
transition-property: width, height, border-radius;
transition-timing-function: var(--transition-ease);
transition-duration: 0.8s;
transition-delay: 0.5s;
}

.layout .app-root {
display: flex;
position: relative;
flex-direction: column;
display: flex;
position: relative;
flex-direction: column;
}

.layout header.header {
width: 100%;
height: 5rem;
box-sizing: border-box;
position: fixed;
top: 0;
z-index: 999;
width: 100%;
height: 5rem;
box-sizing: border-box;
position: fixed;
top: 0;
z-index: 999;
}

.layout footer.footer {
width: inherit;
height: 6.66rem;
box-sizing: border-box;
width: inherit;
height: 6.66rem;
box-sizing: border-box;
}

.layout main.main-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 1.5rem;
margin: 0 auto;
min-height: calc(100vh - 13.66rem);
transition: width .5s ease-in;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 1.5rem;
margin: 0 auto;
min-height: calc(100vh - 13.66rem);
transition-property: width, min-height, padding;
transition-duration: 0.8s;
transition-delay: 0.5s;
transition-timing-function: var(--transition-linear);
overflow: hidden;
}

.layout .main-nav {
width: 180px;
margin-right: 1.66rem;
position: relative;
transition: var(--transition-base);
width: 180px;
margin-right: 1.66rem;
position: relative;
transition-property: transform, margin-right;
transition-timing-function: var(--transition-linear);
transition-duration: 0.8s;
}

.layout .main-nav nav {
/* position: fixed; */
width: 180px;
height: 60vh;
max-height: 60vh;
width: 180px;
height: 60vh;
max-height: 60vh;
}

.layout .main-aside {
width: 160px;
transition: var(--transition-base);
width: 160px;
transition: transform var(--transition-ease),
visibility var(--transition-linear), opacity var(--transition-linear);
}

.layout-mobile footer.footer {
height: 5rem;
height: 5rem;
}

.layout .main {
flex: 1 0 auto;
width: 560px;
flex: 1 0 auto;
width: 560px;
}

.layout .mobile-main {
padding: 0 1.33rem;
padding-bottom: 0.66rem;
padding: 0 1.33rem;
padding-bottom: 0.66rem;
}

.layout .tablet-main {
padding: 0 1.33rem;
padding-bottom: 0.66rem;
padding: 0 1.33rem;
padding-bottom: 0.66rem;
}

.layout .is-pc {
width: 1076px;
width: 1076px;
}

.layout .config>* {
transition: var(--transition-base);
.layout .config > * {
transition: var(--transition-base);
}

.layout .background {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: url(../public/images/redux_mbox.webp) center center repeat;
background-attachment: fixed;
opacity: 0.15;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: url(../public/images/redux_mbox.webp) center center repeat;
background-attachment: fixed;
opacity: 0.15;
}

@media screen and (max-width: 979px) {
.layout .main-nav {
visibility: hidden;
position: absolute;
z-index: -1;
opacity: 0;
transform: translateX(-1000%);
transition: var(--transition-base);
}

.layout .main-aside {
visibility: hidden;
position: absolute;
opacity: 0;
}
.layout .main-nav {
position: absolute;
opacity: 0;
z-index: -1;
transform: translateX(-200%);
transition-property: transform, opacity;
transition-timing-function: var(--transition-ease-in);
transition-duration: 0.5s;
transition-delay: 2s;
}

.layout .main-aside {
visibility: hidden;
position: absolute;
opacity: 0;
}
}


/** Transition Line **/
.transition-line {
background: linear-gradient(90deg, #ffec3d, #0ebeff);
background-size: 0 3px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: 1s all;
background: linear-gradient(90deg, #ffec3d, #0ebeff);
background-size: 0 3px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: 1s all;
}

.transition-line:hover {
background-size: 100% 3px;
background-size: 100% 3px;
}

.transition-text {
background: linear-gradient(90deg, var(--color-primary-5), var(--color-primary-3));
background-size: 0 100px;
background-repeat: no-repeat;
background-position: 0 100%;
background-clip: text;
color: inherit;
transition: .5s all linear;
background: linear-gradient(
90deg,
var(--color-primary-5),
var(--color-primary-3)
);
background-size: 0 100px;
background-repeat: no-repeat;
background-position: 0 100%;
background-clip: text;
color: inherit;
transition: 0.5s all linear;
}

.transition-text:hover {
background-size: 100% 100%;
color: transparent;
background-size: 100% 100%;
color: transparent;
}

/** Base Layout 基础布局 **/
.page {
width: inherit;
height: inherit;
padding: 4em;
min-height: 100vh;
box-sizing: border-box;
background-color: var(--background-color-primary);
}
width: inherit;
height: inherit;
padding: 4em;
min-height: 100vh;
box-sizing: border-box;
background-color: var(--background-color-primary);
}
8 changes: 5 additions & 3 deletions styles/post.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1105,16 +1105,18 @@ $name: ww_post__;
color: var(--color-base-8);
font-size: calc(var(--font-size-base) + 2px);
line-height: calc(var(--font-size-base) + 10px);
transition: var(--transition-base);
transition-property: color, font-size, line-height;
transition-timing-function: var(--transition-ease-in);
transition-duration: .5s;

a {
color: var(--color-link);
text-decoration: underline;
transition: color .5s ease;
transition: color .5s var(--transition-ease);

&:hover {
color: var(--color-default);
transition: color .5s ease;
transition: color .5s var(--transition-ease);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion styles/reset.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ body,
font-weight: 400;
box-sizing: border-box;
scroll-behavior: smooth;
transition: background-color 0.5s ease;
transition: background-color 0.5s var(--transition-ease);
}

* {
Expand Down
Loading

2 comments on commit 2946ff9

@vercel
Copy link

@vercel vercel bot commented on 2946ff9 Dec 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deployment failed with the following error:

The most recent charge for your active payment method has failed. Please update it here: https://vercel.com/teams/163m/settings/billing.

@vercel
Copy link

@vercel vercel bot commented on 2946ff9 Dec 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

wuh-site – ./

wuh-site-wuh131420-foxmailcom.vercel.app
wuh-site-git-main-wuh131420-foxmailcom.vercel.app
wuh-site.vercel.app

Please sign in to comment.