markdown-resume-builder/styles.css at main · opensource4you/markdown-resume-builder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
/* NOTE: only for html, not polished */
/* Resume Styles */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  max-width: 900px;
  margin: 15px auto;
  padding: 15px;
  line-height: 1.3;
}

/* Header Section */
.resume-header {
  text-align: center;
  margin-bottom: 10px;
}

.resume-header h1 {
  margin-bottom: 3px;
  margin-top: 0;
  font-size: 1.8em;
  font-weight: 600;
}

.resume-header p {
  font-size: 0.85em;
  margin-top: 3px;
  margin-bottom: 0;
}

.resume-header a {
  color: #0066cc;
  text-decoration: none;
}

.resume-header a:hover {
  text-decoration: underline;
}

/* Section Headings */
h2 {
  border-bottom: 2px solid #333;
  padding-bottom: 2px;
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 1.2em;
}

/* Experience Blocks (Title Line) */
h3.experience-block {
  margin-bottom: 0;      /* Remove bottom margin to sit tight with metadata */
  margin-top: 8px;
  font-size: 1em;
  font-weight: 600;
  padding-right: 180px;  /* Reserve space for the date on the right */
  line-height: 1.2;
  position: relative;
}

h3.experience-block a {
  color: #0066cc;
  text-decoration: none;
}

h3.experience-block a:hover {
  text-decoration: underline;
}

/* Metadata Block Container */
.metadata {
  /* This flex container manages the Subtitle (Left) and Location (Right) */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  position: relative; /* Anchor point for the absolute date */
  width: 100%;
  margin-top: 0;
  margin-bottom: 6px;
}

/* Reset margins for all paragraphs inside metadata */
.metadata p {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

/* ITEM 1: The Date
   (The first paragraph inside metadata)
   Logic: Remove from flex flow (absolute) and pull UP to the H3 line.
*/
.metadata p:nth-of-type(1) {
  position: absolute;
  top: -1.35em; /* Adjust this value if the date is too high/low */
  right: 0;
  text-align: right;
  font-weight: normal;
  color: #333;
  white-space: nowrap;
}

/* ITEM 2: The Subtitle / Company
   (The second paragraph)
   Logic: Sits naturally on the left of the flex container.
*/
.metadata p:nth-of-type(2) {
  text-align: left;
  font-weight: 500;
  color: #000;
  /* Optional: Ensure it doesn't get crushed if location is long */
  flex-shrink: 1;
  padding-right: 10px;
}

/* ITEM 3: The Location
   (The third paragraph)
   Logic: Sits naturally on the right of the flex container.
*/
.metadata p:nth-of-type(3) {
  text-align: right;
  font-style: italic;
  color: #555;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Lists */
ul {
  margin-top: 3px;
  margin-bottom: 5px;
  padding-left: 20px;
}

li {
  margin-bottom: 2px;
}

/* Nested lists */
li ul {
  margin-top: 1px;
  margin-bottom: 1px;
}

li li {
  margin-bottom: 1px;
}

/* Links in content */
a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Summary section spacing */
h2 + ul {
  margin-top: 3px;
}

/* Print styles */
@media print {
  body {
    max-width: 100%;
    margin: 0;
    padding: 15px;
  }
}