initial: basic colors, boxes, and block formatting

2026-02-16 23:15:02 +01:00
commit 9d5fc8ee70
2 changed files with 93 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CV</title>
+        <link rel="stylesheet" href="main.css" />
+    </head>
+    <body>
+        <div id="left-panel"></div>
+        <div id="right-panel">
+            <h1>David Madl MSc</h1>
+            <h2>Roles</h2>
+            <!--
+            <div class="block">
+                <p>Hello world: Lorem ipsum dolor sit amet, consecteur amet elit, even more text, and even even more text that is overfilling the page with stuff that nobody needs except for the people who make a layout</p>
+            </div>
+            -->
+            <div class="block">
+                <h3><span class="t">Performance Engineer, triscon IT-Services GmbH</span> <span></span class="d">(2023&NoBreak;&ndash;&NoBreak;2025)</span></h3>
+                <p>Hello world: Lorem ipsum dolor sit amet, consecteur amet elit, even more text, and even even more text that is overfilling the page with stuff that nobody needs except for the people who make a layout</p>
+            </div>
+        </div>
+    </body>
+</html>
--- a/main.css
+++ b/main.css
@@ -0,0 +1,70 @@
+@page {
+    size: 21.0cm 29.7cm;
+    margin: 0;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Leelawadee UI';
+    font-size: 12pt;
+    font-weight: 200;
+
+    /* print background and images */
+    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */
+    color-adjust: exact !important;                 /* Firefox 48 – 96 */
+    print-color-adjust: exact !important;           /* Firefox 97+, Safari 15.4+ */
+}
+
+#left-panel {
+    float: left;
+    width: 6.7cm;
+    height: 29.7cm;
+    background: rgb(185,205,229);
+}
+
+#right-panel {
+    margin-left: 6.7cm;
+    padding: 2.5cm 1cm;
+}
+
+/* CV heading */
+h1 {
+    font-size: 18pt;
+    font-weight: 500;
+}
+
+/* Section heading */
+h2 {
+    float: right;
+    color: white;
+    font-weight: bold;
+    background: rgb(37,54,97);
+    display: block;
+    left: 100%;
+    padding: 5pt 8pt 8pt 8pt;
+    padding-right: 1cm;
+    width: 4cm; /* - margin-right => 5 cm */
+    /* ends up 53 x 11.6 mm in print */
+    text-align: right;
+    margin-right: -1cm;
+    margin-top: 0pt; /* like -h2.padding-top + div.block.padding-top, to align text baseline with panel content */
+    font-size: 13pt;
+}
+
+h3 {
+    font-weight: normal;
+    margin-bottom: 8pt;
+}
+
+h3 span.t {
+    font-weight: 800;
+}
+
+div.block {
+    padding: 8pt 0;
+}
+
+div.block p {
+    line-height: 1.4;
+}