305 lines
7.0 KiB
CSS
305 lines
7.0 KiB
CSS
:root {
|
|
/* 顏色 */
|
|
--color-background: #ffffff;
|
|
--color-text-primary: #000000;
|
|
--color-text-secondary: #565656;
|
|
--color-text-link: #333333;
|
|
--color-border: #e8e8e8;
|
|
--color-shadow: rgba(0, 0, 0, 0.05);
|
|
--color-shadow-hover: rgba(0, 0, 0, 0.1);
|
|
--color-active-background: #f0f0f0;
|
|
|
|
/* 社交媒體顏色 */
|
|
--color-instagram: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
|
|
--color-twitter: #14171A;
|
|
--color-linkedin: #0077B5;
|
|
--color-website: #333333;
|
|
--color-youtube: #FF0000;
|
|
--color-blog: #FF5722;
|
|
|
|
/* 動畫設置 */
|
|
--animation-duration: 0.5s;
|
|
--animation-timing-function: ease-out;
|
|
|
|
/* 佈局 */
|
|
--border-radius: 20px;
|
|
--padding-large: 40px;
|
|
--padding-medium: 30px;
|
|
--gap: 26px;
|
|
}
|
|
|
|
/* 全局樣式 */
|
|
body {
|
|
font-family: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
background-color: var(--color-background);
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 載入動畫 */
|
|
.loading {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--color-background);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
transition: opacity 0.5s ease-out;
|
|
}
|
|
|
|
.loading.hide {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 3px solid var(--color-border);
|
|
border-top: 3px solid var(--color-text-primary);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* 主容器 */
|
|
.container {
|
|
background-color: var(--color-background);
|
|
border-radius: var(--border-radius);
|
|
max-width: 1600px;
|
|
min-height: 800px;
|
|
width: 100%;
|
|
display: flex;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity var(--animation-duration) var(--animation-timing-function),
|
|
transform var(--animation-duration) var(--animation-timing-function);
|
|
}
|
|
|
|
.container.show {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* 個人資料區塊 */
|
|
.profile-section {
|
|
flex: 1;
|
|
padding: var(--padding-large);
|
|
background-color: var(--color-background);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.profile-content {
|
|
max-width: 500px;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity var(--animation-duration) var(--animation-timing-function),
|
|
transform var(--animation-duration) var(--animation-timing-function);
|
|
}
|
|
|
|
.profile-content.show {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.profile-pic {
|
|
width: 184px;
|
|
height: 184px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
.profile-pic:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
h1 {
|
|
color: var(--color-text-primary);
|
|
font-weight: 700;
|
|
font-size: 44px;
|
|
margin-bottom: 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
.bio {
|
|
color: var(--color-text-secondary);
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
margin-bottom: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
/* 連結區塊 */
|
|
.links-section {
|
|
flex: 2;
|
|
padding: var(--padding-large);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.links {
|
|
margin-bottom: var(--padding-large);
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.link {
|
|
background-color: var(--color-background);
|
|
border-radius: 24px;
|
|
border: 1px solid var(--color-border);
|
|
box-shadow: 0 5px 15px var(--color-shadow);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
color: var(--color-text-link);
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
padding: 20px;
|
|
aspect-ratio: 1 / 1;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity var(--animation-duration) var(--animation-timing-function),
|
|
transform var(--animation-duration) var(--animation-timing-function),
|
|
box-shadow 0.15s ease,
|
|
background-color 0.15s ease;
|
|
}
|
|
|
|
.link.show {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.link:hover {
|
|
box-shadow: 0 7px 20px var(--color-shadow-hover);
|
|
}
|
|
|
|
.link:active {
|
|
transform: scale(0.95);
|
|
background-color: var(--color-active-background);
|
|
box-shadow: 0 2px 10px var(--color-shadow);
|
|
transition: transform 0.15s ease,
|
|
background-color 0.15s ease,
|
|
box-shadow 0.15s ease;
|
|
}
|
|
|
|
.link-icon {
|
|
font-size: 40px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.link-title {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 社交媒體連結顏色 */
|
|
.link-instagram .link-icon { background: var(--color-instagram); -webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;}
|
|
.link-twitter .link-icon { color: var(--color-twitter); }
|
|
.link-linkedin .link-icon { color: var(--color-linkedin); }
|
|
.link-website .link-icon { color: var(--color-website); }
|
|
.link-youtube .link-icon { color: var(--color-youtube); }
|
|
.link-blog .link-icon { color: var(--color-blog); }
|
|
|
|
/* 連結的階梯式動畫 */
|
|
.link:nth-child(1) { transition-delay: calc(var(--animation-duration) * 0.2); }
|
|
.link:nth-child(2) { transition-delay: calc(var(--animation-duration) * 0.4); }
|
|
.link:nth-child(3) { transition-delay: calc(var(--animation-duration) * 0.6); }
|
|
.link:nth-child(4) { transition-delay: calc(var(--animation-duration) * 0.8); }
|
|
.link:nth-child(5) { transition-delay: calc(var(--animation-duration) * 1.0); }
|
|
.link:nth-child(6) { transition-delay: calc(var(--animation-duration) * 1.2); }
|
|
|
|
.link:hover,
|
|
.link:active {
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
/* 圖片區塊 */
|
|
.images-section {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.image {
|
|
background-color: var(--color-background);
|
|
border-radius: 24px;
|
|
box-shadow: 0 5px 15px var(--color-shadow);
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding-top: 100%;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.image img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.image:hover {
|
|
z-index: 1;
|
|
transform: scale(1.3);
|
|
border: none;
|
|
}
|
|
|
|
/* 響應式設計 */
|
|
@media (max-width: 768px) {
|
|
:root {
|
|
--gap: 18px; /* 在较小的屏幕上缩小gap */
|
|
}
|
|
.container {
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.profile-section,
|
|
.links-section {
|
|
width: 100%;
|
|
padding: var(--padding-medium);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.profile-section {
|
|
padding-top: 50px;
|
|
}
|
|
|
|
.profile-content {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.profile-pic {
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
|
|
.links,
|
|
.images-section {
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
}
|
|
}
|