433 lines
7.9 KiB
CSS
433 lines
7.9 KiB
CSS
/* 响应式样式 - 遵循设计规范中的断点 */
|
|
|
|
/* 超大屏幕 (>= 1200px) */
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: var(--container-xl);
|
|
}
|
|
|
|
.hero__title {
|
|
font-size: var(--font-size-6xl);
|
|
}
|
|
}
|
|
|
|
/* 大屏幕 (1024px - 1199px) */
|
|
@media (max-width: 1199px) {
|
|
.container {
|
|
max-width: var(--container-lg);
|
|
}
|
|
|
|
.hero__title {
|
|
font-size: var(--font-size-5xl);
|
|
}
|
|
|
|
.about__content {
|
|
gap: var(--spacing-12);
|
|
}
|
|
}
|
|
|
|
/* 平板端 (768px - 1023px) */
|
|
@media (max-width: 1023px) {
|
|
.container {
|
|
max-width: var(--container-md);
|
|
padding: 0 var(--spacing-4);
|
|
}
|
|
|
|
/* 导航栏 - 汉堡菜单 */
|
|
.navbar__toggle {
|
|
display: flex;
|
|
}
|
|
|
|
.navbar__menu {
|
|
position: fixed;
|
|
top: 70px;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: var(--color-primary);
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: var(--spacing-8) 0;
|
|
box-shadow: var(--shadow-lg);
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all var(--transition-normal);
|
|
z-index: var(--z-dropdown);
|
|
}
|
|
|
|
.navbar__menu.active {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.navbar__item {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.navbar__link {
|
|
display: block;
|
|
padding: var(--spacing-4) 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.navbar__link.active::after {
|
|
display: none;
|
|
}
|
|
|
|
/* Hero 模块 */
|
|
.hero .container {
|
|
grid-template-columns: 1fr;
|
|
text-align: center;
|
|
gap: var(--spacing-12);
|
|
}
|
|
|
|
.hero__content {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.hero__actions {
|
|
justify-content: center;
|
|
}
|
|
|
|
.hero__image-placeholder {
|
|
width: 250px;
|
|
height: 250px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* 关于模块 */
|
|
.about__content {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-12);
|
|
}
|
|
|
|
.about__avatar {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.about__avatar-icon {
|
|
font-size: 5rem;
|
|
}
|
|
|
|
/* 技能模块 */
|
|
.skills__categories {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
/* 项目模块 */
|
|
.projects__grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
}
|
|
|
|
/* 联系模块 */
|
|
.contact__content {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-12);
|
|
}
|
|
}
|
|
|
|
/* 移动端 (<= 767px) */
|
|
@media (max-width: 767px) {
|
|
.container {
|
|
padding: 0 var(--spacing-4);
|
|
}
|
|
|
|
/* 通用样式 */
|
|
.section__title {
|
|
font-size: var(--font-size-3xl);
|
|
}
|
|
|
|
.section__subtitle {
|
|
font-size: var(--font-size-base);
|
|
margin-bottom: var(--spacing-8);
|
|
}
|
|
|
|
/* Hero 模块 */
|
|
.hero {
|
|
padding-top: 60px;
|
|
}
|
|
|
|
.hero__title {
|
|
font-size: var(--font-size-4xl);
|
|
}
|
|
|
|
.hero__subtitle {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
|
|
.hero__description {
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
.hero__actions {
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.hero__image-placeholder {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.hero__icon {
|
|
font-size: 6rem;
|
|
}
|
|
|
|
/* 关于模块 */
|
|
.about {
|
|
padding: var(--spacing-16) 0;
|
|
}
|
|
|
|
.about__avatar {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
.about__avatar-icon {
|
|
font-size: 4rem;
|
|
}
|
|
|
|
.about__name {
|
|
font-size: var(--font-size-2xl);
|
|
}
|
|
|
|
.about__position {
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
/* 技能模块 */
|
|
.skills {
|
|
padding: var(--spacing-16) 0;
|
|
}
|
|
|
|
.skills__category {
|
|
padding: var(--spacing-6);
|
|
}
|
|
|
|
/* 项目模块 */
|
|
.projects {
|
|
padding: var(--spacing-16) 0;
|
|
}
|
|
|
|
.projects__grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.project__image {
|
|
height: 180px;
|
|
}
|
|
|
|
.project__icon {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
/* 联系模块 */
|
|
.contact {
|
|
padding: var(--spacing-16) 0;
|
|
}
|
|
|
|
.contact__form {
|
|
padding: var(--spacing-6);
|
|
}
|
|
|
|
/* 页脚 */
|
|
.footer {
|
|
padding: var(--spacing-8) 0;
|
|
}
|
|
|
|
.footer__nav {
|
|
flex-direction: column;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
.footer__back-to-top {
|
|
bottom: var(--spacing-4);
|
|
right: var(--spacing-4);
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: var(--font-size-base);
|
|
}
|
|
}
|
|
|
|
/* 超小屏幕 (<= 480px) */
|
|
@media (max-width: 480px) {
|
|
.container {
|
|
padding: 0 var(--spacing-3);
|
|
}
|
|
|
|
/* Hero 模块 */
|
|
.hero__title {
|
|
font-size: var(--font-size-3xl);
|
|
}
|
|
|
|
.hero__subtitle {
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
.hero__image-placeholder {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
.hero__icon {
|
|
font-size: 4rem;
|
|
}
|
|
|
|
/* 按钮 */
|
|
.btn {
|
|
padding: var(--spacing-3) var(--spacing-6);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
/* 关于模块 */
|
|
.about__timeline {
|
|
padding-left: var(--spacing-6);
|
|
}
|
|
|
|
.timeline__item::before {
|
|
left: calc(-1 * var(--spacing-6) - 5px);
|
|
}
|
|
|
|
/* 技能模块 */
|
|
.skills__category-title {
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
/* 项目模块 */
|
|
.project__content {
|
|
padding: var(--spacing-6);
|
|
}
|
|
|
|
.project__title {
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
.project__links {
|
|
flex-direction: column;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
/* 联系模块 */
|
|
.contact__item {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
.contact__social-links {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* 打印样式 */
|
|
@media print {
|
|
.navbar,
|
|
.hero__scroll-indicator,
|
|
.footer__back-to-top,
|
|
.contact__form,
|
|
.btn {
|
|
display: none !important;
|
|
}
|
|
|
|
body {
|
|
color: #000;
|
|
background: #fff;
|
|
}
|
|
|
|
.container {
|
|
max-width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.hero,
|
|
.about,
|
|
.skills,
|
|
.projects,
|
|
.contact {
|
|
padding: 1cm 0;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.section__title {
|
|
color: #000;
|
|
}
|
|
|
|
.section__title::after {
|
|
background-color: #000;
|
|
}
|
|
|
|
a {
|
|
color: #000;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.hero__image-placeholder,
|
|
.about__avatar,
|
|
.project__image-placeholder {
|
|
border: 1px solid #ccc;
|
|
background: #f5f5f5 !important;
|
|
}
|
|
|
|
.hero__icon,
|
|
.about__avatar-icon,
|
|
.project__icon {
|
|
color: #666 !important;
|
|
}
|
|
|
|
.skill__progress {
|
|
background: #666 !important;
|
|
}
|
|
}
|
|
|
|
/* 高对比度模式 */
|
|
@media (prefers-contrast: high) {
|
|
:root {
|
|
--color-text-primary: #000000;
|
|
--color-text-secondary: #333333;
|
|
--color-highlight: #ff0000;
|
|
}
|
|
|
|
body {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.navbar {
|
|
background-color: #ffffff;
|
|
border-bottom: 2px solid #000000;
|
|
}
|
|
|
|
.hero {
|
|
background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
|
|
}
|
|
|
|
.skill__progress {
|
|
background: #000000 !important;
|
|
}
|
|
}
|
|
|
|
/* 减少动画 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
.hero__image-placeholder {
|
|
animation: none;
|
|
}
|
|
|
|
.hero__scroll-indicator {
|
|
animation: none;
|
|
}
|
|
} |