aboutsummaryrefslogtreecommitdiff
path: root/resume-v1.1/src/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'resume-v1.1/src/style.css')
-rw-r--r--resume-v1.1/src/style.css217
1 files changed, 217 insertions, 0 deletions
diff --git a/resume-v1.1/src/style.css b/resume-v1.1/src/style.css
new file mode 100644
index 0000000..82c6e1c
--- /dev/null
+++ b/resume-v1.1/src/style.css
@@ -0,0 +1,217 @@
+
+: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 var(--font-color);
+ 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%;
+}
+
+/* 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;
+ }
+}