Completely revamped resume. Made code simpler and handle better printing. Added better instructions and images to the resume README.

1 files changed, 204 insertions, 0 deletions

diff --git a/resume/src/style.css b/resume/src/style.css
new file mode 100644
index 0000000..fb4927b
--- /dev/null
+++ b/resume/src/style.css
@@ -0,0 +1,204 @@
+:root {
+  --font-color: #444;
+  --padding: .25in;
+  --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;
+}
+
+/* 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 {
+  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-title {
+  font-weight: bold;
+  margin-bottom: .5em;
+}
+
+/* Card */
+
+.card {
+  width: 100%;
+  display: flex;
+  margin-bottom: 1em;
+}
+
+.card-title {
+  width: 20%;
+  font-weight: bold;
+}
+
+.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: 2px 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;
+  }
+}