refactor: 将内联 CSS 样式分离为独立的 resume.css 文件
This commit is contained in:
+340
@@ -0,0 +1,340 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Microsoft YaHei", Arial, sans-serif;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #222222;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
width: 794px;
|
||||||
|
min-height: 1123px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px 36px;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.header {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #222222;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #222;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 18px;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.position-line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.website-line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section */
|
||||||
|
.section {
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #4478DF;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border-left: 3px solid #4478DF;
|
||||||
|
background-color: #EEF3FF;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Education */
|
||||||
|
.edu-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edu-school {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edu-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #4478DF;
|
||||||
|
border: 1px solid #4478DF;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 1px 5px;
|
||||||
|
margin-left: 6px;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edu-major {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #888;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edu-degree {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #888;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edu-date {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #888;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edu-items {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 2px 20px;
|
||||||
|
margin-left: 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #252525;
|
||||||
|
line-height: 1.45;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edu-items li {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Honors */
|
||||||
|
.honor-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.honor-content {
|
||||||
|
color: #222;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.honor-name {
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.honor-badge {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 52px;
|
||||||
|
text-align: right;
|
||||||
|
margin-left: 8px;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-link {
|
||||||
|
color: #4478DF;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-left: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.honor-date {
|
||||||
|
color: #888;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-left: 12px;
|
||||||
|
min-width: 56px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Experience */
|
||||||
|
.exp-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exp-company {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #222;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exp-date {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #888;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exp-sub {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #888;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exp-items {
|
||||||
|
margin-left: 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #252525;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exp-items li {
|
||||||
|
list-style-type: disc;
|
||||||
|
margin-left: 6px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Project */
|
||||||
|
.proj-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proj-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proj-date {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #888;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proj-sub {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #888;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proj-link {
|
||||||
|
color: #4478DF;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proj-intro {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #252525;
|
||||||
|
margin-left: 12px;
|
||||||
|
line-height: 1.45;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proj-work-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #222;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proj-work-items {
|
||||||
|
margin-left: 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #252525;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proj-work-items li {
|
||||||
|
list-style-type: decimal;
|
||||||
|
margin-left: 12px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Skills */
|
||||||
|
.skill-items {
|
||||||
|
margin-left: 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #252525;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-items li {
|
||||||
|
list-style-type: disc;
|
||||||
|
margin-left: 6px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SVG Icons */
|
||||||
|
.svg-icon {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
fill: #4478DF;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 5px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Company Logo */
|
||||||
|
.company-logo {
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-logo.small {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-logo.icpc {
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-logo.hust {
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-logo.qiniu {
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Print styles - force background colors to display */
|
||||||
|
@media print {
|
||||||
|
* {
|
||||||
|
-webkit-print-color-adjust: exact !important;
|
||||||
|
print-color-adjust: exact !important;
|
||||||
|
color-adjust: exact !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
+1
-342
@@ -4,348 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>何朝晖 - 简历</title>
|
<title>何朝晖 - 简历</title>
|
||||||
<style>
|
<link rel="stylesheet" href="resume.css">
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: "Microsoft YaHei", Arial, sans-serif;
|
|
||||||
background: #ffffff;
|
|
||||||
color: #222222;
|
|
||||||
line-height: 1.4;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page {
|
|
||||||
width: 794px;
|
|
||||||
min-height: 1123px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 20px 36px;
|
|
||||||
background: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header */
|
|
||||||
.header {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 800;
|
|
||||||
color: #222222;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #222;
|
|
||||||
line-height: 1.45;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-line {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 18px;
|
|
||||||
margin-bottom: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.position-line {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.website-line {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Section */
|
|
||||||
.section {
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #4478DF;
|
|
||||||
padding: 3px 10px;
|
|
||||||
border-left: 3px solid #4478DF;
|
|
||||||
background-color: #EEF3FF;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Education */
|
|
||||||
.edu-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: baseline;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edu-school {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edu-badge {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #4478DF;
|
|
||||||
border: 1px solid #4478DF;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 1px 5px;
|
|
||||||
margin-left: 6px;
|
|
||||||
vertical-align: middle;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edu-major {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #888;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edu-degree {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #888;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edu-date {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #888;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edu-items {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 2px 20px;
|
|
||||||
margin-left: 12px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #252525;
|
|
||||||
line-height: 1.45;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edu-items li {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Honors */
|
|
||||||
.honor-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.45;
|
|
||||||
}
|
|
||||||
|
|
||||||
.honor-content {
|
|
||||||
color: #222;
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.honor-name {
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.honor-badge {
|
|
||||||
display: inline-block;
|
|
||||||
min-width: 52px;
|
|
||||||
text-align: right;
|
|
||||||
margin-left: 8px;
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cert-link {
|
|
||||||
color: #4478DF;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-left: 8px;
|
|
||||||
font-size: 13px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.honor-date {
|
|
||||||
color: #888;
|
|
||||||
white-space: nowrap;
|
|
||||||
margin-left: 12px;
|
|
||||||
min-width: 56px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Experience */
|
|
||||||
.exp-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
margin-bottom: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exp-company {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #222;
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exp-date {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #888;
|
|
||||||
white-space: nowrap;
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exp-sub {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #888;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exp-items {
|
|
||||||
margin-left: 12px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #252525;
|
|
||||||
line-height: 1.45;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exp-items li {
|
|
||||||
list-style-type: disc;
|
|
||||||
margin-left: 6px;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Project */
|
|
||||||
.proj-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: baseline;
|
|
||||||
margin-bottom: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proj-name {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proj-date {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #888;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proj-sub {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #888;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proj-link {
|
|
||||||
color: #4478DF;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proj-intro {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #252525;
|
|
||||||
margin-left: 12px;
|
|
||||||
line-height: 1.45;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proj-work-title {
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #222;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proj-work-items {
|
|
||||||
margin-left: 12px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #252525;
|
|
||||||
line-height: 1.45;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proj-work-items li {
|
|
||||||
list-style-type: decimal;
|
|
||||||
margin-left: 12px;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Skills */
|
|
||||||
.skill-items {
|
|
||||||
margin-left: 12px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #252525;
|
|
||||||
line-height: 1.45;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-items li {
|
|
||||||
list-style-type: disc;
|
|
||||||
margin-left: 6px;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* SVG Icons */
|
|
||||||
.svg-icon {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
fill: #4478DF;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-right: 5px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Company Logo */
|
|
||||||
.company-logo {
|
|
||||||
height: 16px;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-logo.small {
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-logo.icpc {
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-logo.hust {
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-logo.qiniu {
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Print styles - force background colors to display */
|
|
||||||
@media print {
|
|
||||||
* {
|
|
||||||
-webkit-print-color-adjust: exact !important;
|
|
||||||
print-color-adjust: exact !important;
|
|
||||||
color-adjust: exact !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="page">
|
<div class="page">
|
||||||
|
|||||||
Reference in New Issue
Block a user