Fixed missing styling and personal picture

3 files changed, 222 insertions, 2 deletions

diff --git a/src/resume-bg-redacted.html b/src/resume-bg-redacted.html
index 5a0eaf0..cd96b82 100644
--- a/src/resume-bg-redacted.html
+++ b/src/resume-bg-redacted.html
@@ -55,7 +55,7 @@
 						</div>
 						</div>
 					</div>
-					<img id="picture-data" src="./16-better-colors.png">
+					<img id="picture-data" src=" ./img/16-better-colors.jpeg">
 				</div>
 			</summary>
 			<section class="info-section">
diff --git a/src/resume-en-redacted.html b/src/resume-en-redacted.html
index 7d7689a..82cc387 100644
--- a/src/resume-en-redacted.html
+++ b/src/resume-en-redacted.html
@@ -55,7 +55,7 @@
 						</div>
 						</div>
 					</div>
-					<img id="picture-data" src="./16-better-colors.png">
+					<img id="picture-data" src="./img/16-better-colors.jpeg">
 				</div>
 			</summary>
 			<section class="info-section">
diff --git a/src/resume-style.css b/src/resume-style.css
new file mode 100644
index 0000000..a982e31
--- /dev/null
+++ b/src/resume-style.css
@@ -0,0 +1,220 @@
+:root {
+  --font-color: #444;
+  --padding: .24in;
+  --picture-size: 10em;
+  --page-margin: 5mm;
+}
+
+* {
+  font-size: 19px;
+  font-family: sans-serif;
+}
+
+hr {
+  width: auto;
+  border: 1px solid rgb(210, 210, 210);
+  margin: .9em 0;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background-color: white;
+}
+
+a, a:visited {
+  font-size: inherit;
+  color: #004080;
+}
+
+/* The whole page */
+
+.page {
+  width: 210mm;
+  height: 297mm;
+  margin: 0 auto;
+}
+
+.content {
+  width: calc(100% - 2 * var(--page-margin));
+  height: calc(100% - 2 * var(--page-margin));
+  border: 3px solid var(--font-color);
+  box-sizing: border-box;
+  padding: var(--padding);
+  margin: var(--page-margin);
+  display: flex;
+  flex-direction: column;
+}
+
+.content > * {
+  width: 100%;
+}
+
+.content > hr, .section-head > hr {
+  border-color: var(--font-color);
+}
+
+/* About/Summary */
+
+#about {
+  display: flex;
+  width: 100%;
+  height: fit-content;
+  position: relative;
+}
+
+#data {
+  flex: 1;
+  height: var(--picture-size);
+  display: flex;
+  flex-direction: column;
+}
+
+#name {
+  font-size: 2.5em;
+  font-weight: bold;
+  margin-bottom: .2em;
+}
+
+#text-data {
+  font-size: .7em;
+  flex: 1;
+  display: flex;
+}
+
+.info {
+  flex: 1;
+  font-size: inherit;
+  display: flex;
+  flex-direction: column;
+}
+
+.info > * {
+  flex: 1;
+}
+
+.stacked-info {
+  font-size: inherit;
+  line-height: 1.3em;
+  margin-top: .8em;
+  border-left: 1px solid var(--font-color);
+  box-sizing: border-box;
+  padding: 0 1em;
+}
+
+.stacked-info:first-child {
+  margin-top: 0;
+}
+
+.stacked-info > b {
+  font-size: inherit;
+}
+
+#picture-data {
+  height: var(--picture-size);
+  width: var(--picture-size);
+}
+
+#picture-data > img {
+  width: var(--picture-size);
+  margin: auto 0;
+}
+
+/* Sections */
+
+.section-head {
+  margin: 0.5em 0;
+  display: flex;
+  align-items: center;
+}
+
+.section-title {
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.section-head > hr {
+  flex: 1;
+  margin-left: 0.5em;
+}
+
+/* Card */
+
+.card {
+  width: 100%;
+  display: flex;
+  margin-bottom: 1em;
+}
+
+.card-title {
+  width: 15%;
+  padding-right: 0.5em;
+}
+
+.card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-content > .card {
+  margin-top: 1em;
+}
+
+.card-content > .card > .card-title {
+  width: 24%;
+}
+
+.card-content > .card:first-child {
+  margin-top: 0;
+}
+
+.card-sub-title {
+  border-left: 3px solid var(--font-color);
+  padding-left: .5em;
+  font-weight: bold;
+  margin-bottom: .3em;
+}
+
+.end-card, .card:last-child {
+  margin-bottom: 0;
+}
+
+/* Rating */
+
+.ratings {
+  width: 100%;
+  border: none;
+  table-layout: fixed;
+  border-collapse: colapse;
+  border-spacing: 0;
+}
+
+.ratings td {
+  padding: 2px 0;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.ratings td:nth-child(2n) {
+  border-right: 1px solid black;
+}
+
+.ratings td:last-child {
+  border-right-width: 0;
+}
+
+/* Proper printing */
+
+@page {
+  size: A4;
+  margin: 5mm;
+}
+@media print {
+  html, body, .page, .content {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+  }
+}