style.css

/* 定义全局色板 */
:root {
    --primary-color: #71b3dd;
    --primary-dark-color: #4489b5;
    --text-color-gray: #8b979f;
    --text-color-light-gray: #c1c7cb;
    --text-color-dark-gray: #5a6f7c;
}

/* 全局样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-color-dark-gray);
}

.container {
    width: 210mm; /* A4纸宽度 */
    margin: auto;
    padding: 20mm;
    box-shadow: 0px 10px 20px 5px lightgrey;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 头部样式 */
h1 {
    text-align: center;
    color: var(--primary-dark-color);
}

h2 {
    color: var(--primary-dark-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

h3 {
    margin-top: 10px;
    color: var(--primary-dark-color);
}

h4 {
    margin-top: 5px;
    color: var(--text-color-dark-gray);
}

h5 {
    margin-top: 5px;
    font-style: italic;
    color: var(--text-color-gray);
}

/* 信息内容样式 */
.info-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 基本信息样式 */
.basic-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.basic-info .content {
    flex: 3;
}

.basic-info aside {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.basic-info img {
    width: 100px;
    height: 100/0.618px;
    border-radius: 40%;
    object-fit: cover;
}

/* 各个部分样式 */
.education, .work-exp, .projects, .skills {
    padding: 10px 0;
}

ul {
    padding-left: 20px;
}

ul li {
    margin-bottom: 10px;
}

/* 页脚样式 */
footer {
    text-align: center;
    padding: 10px 0;
}

footer ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

footer ul li {
    margin: 0 10px;
}

footer .fab {
    color: var(--primary-color);
    font-size: 24px;
}

/* 鼠标悬停效果 */
h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, div p:hover {
    color: var(--primary-color);
}

/* 打印样式 */
@media print {
    body, .container {
        box-shadow: none;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
    }

    h2, h3, h4, h5, p {
        page-break-after: avoid; /* 避免元素后分页 */
    }

    .container {
        page-break-before: always; /* 页面开始前分页 */
    }
}

/* 分页样式 */
.page-break {
    page-break-before: always; /* 强制分页 */
}