Создание макета резюме из двух столбцов с золотым сечением и временной шкалой в HTML/CSS. ⇐ CSS

[Anonymous]

Я пытаюсь создать макет из двух столбцов для раздела опыта моего резюме в HTML/CSS. Левый столбец должен быть выровнен по правому краю, а правый — по левому краю, с соотношением 1:фи^2 (золотое сечение). Правый столбец должен содержать заголовок (например, «Должность»), подзаголовок (например, «Ответственность») и произвольный текст (обычно маркированный). Левый столбец должен иметь заголовок (например, «Компания»), подзаголовок (например, «Местоположение») и временную шкалу с датами начала и окончания. Я хочу, чтобы дата начала была совмещена с последней строкой текста в правом столбце. Кроме того, мне нужна тонкая цветная линия, разделяющая два столбца, с кружком на линии рядом с датами начала и окончания.
Я пробовал использовать сетку, гибкую, абсолютную, и относительное расположение для достижения желаемого макета. Мне удалось отобразить дату начала в нижней части левого столбца с помощью сетки и получить соотношение столбцов желаний, но я борюсь с временной шкалой. Я использую псевдоэлементы ::before и ::after для создания временной шкалы, как показано в таких примерах, как этот, этот, этот и этот. Однако это портит макет, и я не смог заставить его работать. Ниже я включил свои спагетти HTML и CSS и в настоящее время неработающий код.
cv_template.html






[*]


{{ name }} CV





{{ name }}
{{ position_applying_for }}


Education
{{ education.degree }}
{{ education.university }}, {{ education.years }}



Experience


Skynet

San Francisco

Mar 2014



Jan 2019





Chief Architect Engineer

Mind Control Infrastructure

• cool stuff.
• even cooler stuff.
• this i didn't really do, but i ran out of thing to say, and i didn't want to stop at just two.

cv_template.css
ul {
hyphens: auto;
/* Enables automatic hyphenation */
overflow-wrap: break-word;
/* Allows for long words to be broken for better hyphenation */
}

html {
lang: en;
/* Ensure a language is set for correct hyphen patterns */
font-size: 12pt;
/* Set the base font size to 12pt */
}

:root {
--golden-ratio: 1.618;
/* Define the golden ratio as a CSS variable */
--halfstep: 1.272;
/* Equal to square root of golden-ratio */
--quarterstep: 1.128;
/* Equal to square root of square root of scale factor */
--eighthstep: 1.06;
/* Equal to square root of quarterstep */
}

@media print,
screen and (min-width: 210mm) {

html,
body {
width: 210mm;
max-width: 210mm;
height: 297mm;
max-height: 297mm;
padding: 0;
margin: 0;
}
}

body {
font-family: 'Lato', sans-serif;
border: 1px solid black;
font-size: 1rem;
/* Use the base font size */
}

header {
background-color: #4CAF50;
color: white;
padding: 1em;
text-align: center;
margin: 0;
width: 100%;
}

h1 {
margin: 0;
font-size: calc(1rem * var(--golden-ratio) * var(--golden-ratio) * var(--golden-ratio));
/* Use the golden ratio for h1 font size */
}

h2 {
font-size: calc(1rem * var(--golden-ratio));
color: #4CAF50;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: calc(1em/var(--golden-ratio)/var(--golden-ratio));
}

h2 i {
font-size: calc(1em/var(--halfstep));
}

section {
margin: 2em;
font-size: 1rem;
/* Use the base font size */
}

.experience {
margin-bottom: 2em;
}

.experience .section-header {
margin-bottom: 1em;
/* Add margin to separate the header from the content */
}

.two-columns {
display: grid;
grid-template-columns: calc(100% / (1 + var(--golden-ratio) * var(--golden-ratio))) 1fr;
gap: calc(1em * var(--golden-ratio));
align-items: stretch;
/* Ensure both columns stretch to the full height of the tallest content */
}

.right-column {
text-align: left;
}

.left-column {
display: grid;
grid-template-rows: auto auto 1fr auto;
text-align: right;
}

.timeline {
position: relative;
border-left: 2px solid #4CAF50;
margin-left: 20px;
padding-left: 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
}

.event {
display: flex;
align-items: center;
margin-bottom: 20px;
position: relative;
}

.dot {
width: 12px;
height: 12px;
background-color: #4CAF50;
border-radius: 50%;
position: absolute;
left: -6px;
/* Center the dot on the line */
}

p {
margin: 0;
padding-left: 20px;
/* Adjust space between text and timeline line */
color: #333;
}


Подробнее здесь: https://stackoverflow.com/questions/791 ... n-html-css