<div class="ui-chronology">
<ol>
<li value="0" aria-hidden="true"><i>Best Picture</i></li>
<li value="1972">
<article>
<img src="https://assets.stoumann.dk/img/1972.jpg" alt="The Godfather">
<h4>The Godfather</h4>
<small>A powerful crime saga following the Corleone family's rise and near fall within organized crime</small>
<img src="https://assets.stoumann.dk/img/laurels.svg" alt="Laurels" height="50" width="50" class="laurels">
</article>
</li>
<li value="1973">
<article>
<img src="https://assets.stoumann.dk/img/1973.jpg" alt="The Sting">
<h4>The String</h4>
<small>A captivating story of two con men who team up to pull off the ultimate revenge scheme against a mob boss.</small>
</article>
</li>
<li value="1974">
<article>
<img src="https://assets.stoumann.dk/img/1974.jpg" alt="The Godfather 2">
<h4>The Godfather 2</h4>
<small>A masterful continuation and prequel to the Corleone family saga, blending present-day power struggles with Vito Corleone's early years.</small>
</article>
</li>
<li value="0" aria-hidden="true"><i></i></li>
</ol>
<ol>
<li value="0" aria-hidden="true"><i></i></li>
<li value="1977">
<article>
<img src="https://assets.stoumann.dk/img/1977.jpg" alt="Annie Hall">
<h4>Annie Hall</h4>
<small>A witty romantic comedy exploring the quirky relationship between a neurotic comedian and an aspiring singer.</small>
</article>
</li>
<li value="1976">
<article>
<img src="https://assets.stoumann.dk/img/1976.jpg" alt="Rocky">
<h4>Rocky</h4>
<small>An inspirational tale of an underdog boxer who gets a once-in-a-lifetime chance to fight for the heavyweight championship.</small>
</article>
</li>
<li value="1975">
<article>
<img src="https://assets.stoumann.dk/img/1975.jpg" alt="One Flew Over The Cuckoo's Nest">
<h4>One Flew Over The Cuckoo's Nest</h4>
<small>A compelling drama about a rebellious patient in a mental institution who challenges the oppressive nurse in charge.</small>
</article>
</li>
<li value="0" aria-hidden="true"><i></i></li>
</ol>
<ol>
<li value="0" aria-hidden="true"><i></i></li>
<li value="1978">
<article>
<img src="https://assets.stoumann.dk/img/1978.jpg" alt="The Deer Hunter">
<h4>The Deer Hunter</h4>
<small>A harrowing depiction of the impact of the Vietnam War on a group of friends from a small industrial town.</small>
<img src="https://assets.stoumann.dk/img/laurels.svg" alt="Laurels" height="50" width="50" class="laurels">
</article>
</li>
<li value="1979">
<article>
<img src="https://assets.stoumann.dk/img/1979.jpg" alt="Kramer vs. Kramer">
<h4>Kramer vs. Kramer</h4>
<small>A touching drama about a father who must raise his son alone after his wife leaves, only to face a custody battle when she returns.</small>
</article>
</li>
<li value="1980">
<article>
<img src="https://assets.stoumann.dk/img/1980.jpg" alt="Ordinary People">
<h4>Ordinary People</h4>
<small>A poignant story of a family's struggle to cope with the aftermath of a tragic accident and their journey towards healing.</small>
<img src="https://assets.stoumann.dk/img/laurels.svg" alt="Laurels" height="50" width="50" class="laurels">
</article>
<li value="0" aria-hidden="true"><i></i></li>
</ol>
<ol>
<li value="0" aria-hidden="true"><i></i></li>
<li value="1983">
<article>
<img src="https://assets.stoumann.dk/img/1983.jpg" alt="Terms of Endearment">
<h4>Terms of Endearment</h4>
<small>A heartwarming drama about the complex relationship between a mother and daughter, spanning three decades of love, loss, and laughter.</small>
</article>
</li>
<li value="1982">
<article>
<img src="https://assets.stoumann.dk/img/1982.jpg" alt="Gandhi">
<h4>Gandhi</h4>
<small>An epic biographical film that chronicles the life of Mahatma Gandhi, the leader of the non-violent resistance movement against British colonial rule in India.</small>
</article>
</li>
<li value="1981">
<article>
<img src="https://assets.stoumann.dk/img/1981.jpg" alt="Chariots of Fire">
<h4>Chariots of Fire</h4>
<small>An inspiring true story of two British athletes who overcome personal and societal challenges to compete in the 1924 Olympics.</small>
</article>
</li>
<li value="0" aria-hidden="true"><i></i></li>
</ol>
<ol>
<li value="0" aria-hidden="true"><i></i></li>
<li value="1984">
<article>
<img src="https://assets.stoumann.dk/img/1984.jpg" alt="Amadeus">
<h4>Amadeus</h4>
<small>An imaginative retelling of the life of Wolfgang Amadeus Mozart, as seen through the eyes of his envious rival, Antonio Salieri.</small>
<img src="https://assets.stoumann.dk/img/laurels.svg" alt="Laurels" height="50" width="50" class="laurels">
</article>
</li>
<li value="1985">
<article>
<img src="https://assets.stoumann.dk/img/1985.jpg" alt="Out of Africa">
<h4>Out of Africa</h4>
<small>A sweeping romantic drama based on the memoirs of Danish author Karen Blixen, who lived in Kenya and fell in love with a British hunter.</small>
</article>
</li>
<li value="1986">
<article>
<img src="https://assets.stoumann.dk/img/1986.jpg" alt="Platoon">
<h4>Platoon</h4>
<small>A gritty and realistic portrayal of the Vietnam War, focusing on the experiences of a young soldier caught in the conflict.</small>
<img src="https://assets.stoumann.dk/img/laurels.svg" alt="Laurels" height="50" width="50" class="laurels">
</article>
</li>
<li value="0" aria-hidden="true"><i></i></li>
</ol>
<ol>
<li value="0" aria-hidden="true"><i></i></li>
<li value="1989">
<article>
<img src="https://assets.stoumann.dk/img/1989.jpg" alt="Driving Miss Daisy">
<h4>Driving Miss Daisy</h4>
<small>A heartwarming tale of the decades-long friendship between an elderly Jewish widow and her African American chauffeur.</small>
</article>
</li>
<li value="1988">
<article>
<img src="https://assets.stoumann.dk/img/1988.jpg" alt="Rain Man">
<h4>Rain Man</h4>
<small>A heartwarming drama about the relationship between two brothers, one of whom is an autistic savant, as they embark on a cross-country road trip.</small>
</article>
</li>
<li value="1987">
<article>
<img src="https://assets.stoumann.dk/img/1987.jpg" alt="The Last Emperor">
<h4>The Last Emperor</h4>
<small>An epic biographical film that chronicles the life of Puyi, the last Emperor of China, from his ascent to the throne as a child to his abdication and exile.</small>
</article>
</li>
<li value="0" aria-hidden="true"><i></i></li>
</ol>
<ol>
<li value="0" aria-hidden="true"><i></i></li>
<li value="1990">
<article>
<img src="https://assets.stoumann.dk/img/1990.jpg" alt="Dances with Wolves">
<h4>Dances with Wolves</h4>
<small>An epic Western film that follows the journey of a Union Army lieutenant who befriends a tribe of Lakota Sioux Indians.</small>
</article>
</li>
<li value="1991">
<article>
<img src="https://assets.stoumann.dk/img/1991.jpg" alt="The Silence of the Lambs">
<h4>The Silence of the Lambs</h4>
<small>A chilling psychological thriller about an FBI trainee who seeks the help of a brilliant but deranged psychiatrist to catch a serial killer.</small>
</article>
</li>
<li value="1992">
<article>
<img src="https://assets.stoumann.dk/img/1992.jpg" alt="Unforgiven">
<h4>Unforgiven</h4>
<small>A gritty Western film that deconstructs the myth of the Old West by following an aging outlaw who comes out of retirement for one last job.</small>
</article>
</li>
<li value="0" aria-hidden="true"><i></i></li>
</ol>
</div>:where(.ui-chronology) {
--ui-chronology-bdrs: 50%;
--ui-chronology-bdw: 12px;
--ui-chronology-connect: 48px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
row-gap: 1ch;
ol {
display: grid;
grid-template-rows: var(--ui-chronology-connect) 1fr 1fr 1fr var(--ui-chronology-connect);
margin: 0;
padding: 0;
/* ODD COLUMNS */
&:nth-of-type(odd) {
li[value="0"] {
&:last-of-type { /* Bottom Left Corner */
&::before {
border-block-width: 0 var(--ui-chronology-bdw);
border-inline-width: var(--ui-chronology-bdw) 0;
border-end-start-radius: var(--ui-chronology-bdrs);
justify-self: end;
}
i {
border-block-end: var(--ui-chronology-bdw) solid var(--CanvasText);
}
}
}
/* FIRST COLUMN ONLY */
&:first-of-type {
li[value="0"]:first-of-type {
&::before { display: none; } /* Hide Top Left Corner */
i { grid-column: span 2; } /* Headline */
}
}
&:not(:first-of-type) {
li[value="0"] {
&:first-of-type { /* Top Left Corner: Reverse */
&::before {
border-block-width: var(--ui-chronology-bdw) 0;
border-inline-width: 0 var(--ui-chronology-bdw);
border-start-end-radius: var(--ui-chronology-bdrs);
justify-self: start;
}
}
}
}
&:last-of-type li[value="0"]:last-of-type i {
width: calc(100% - var(--ui-chronology-bdw));
}
/* Round dot at the end of the last list */
&:last-of-type li[value="0"]:last-of-type i::after {
aspect-ratio: 1;
background-color: var(--CanvasText);
border-radius: 50%;
content: "";
inset-inline-end: calc(0px - (1 * var(--ui-chronology-bdw)));
inset-block-end: calc(0px - (1.5 * var(--ui-chronology-bdw)));
position: absolute;
width: calc(2 * var(--ui-chronology-bdw));
}
}
/* EVEN COLUMNS */
&:nth-of-type(even) {
li[value="0"] {
&:first-of-type { /* Top Left Corner */
&::before {
border-block-width: var(--ui-chronology-bdw) 0;
border-inline-width: var(--ui-chronology-bdw) 0;
border-start-start-radius: var(--ui-chronology-bdrs);
justify-self: end;
}
i {
border-block-start: var(--ui-chronology-bdw) solid var(--CanvasText);
}
}
&:last-of-type { /* Bottom Left Corner: Reverse */
&::before {
border-block-width: 0 var(--ui-chronology-bdw);
border-inline-width: 0 var(--ui-chronology-bdw);
border-end-end-radius: var(--ui-chronology-bdrs);
justify-self: start;
}
}
}
}
}
li {
display: grid;
grid-template-columns: max-content 1fr;
&::before { /* Vertical line */
content: "";
background: var(--CanvasText);
grid-area: 1 / 1;
margin-inline: auto;
width: var(--ui-chronology-bdw);
}
&::after { /* Year */
align-self: start;
background-color: var(--CanvasText);
border-radius: .175em;
color: Canvas;
content: attr(value);
font-size: clamp(1.5rem, 0.2857rem + 2.2857vw, 2rem);
font-weight: 900;
grid-area: 1 / 1;
padding-inline: .5ch;
width: 5ch;
}
&[value="0"] { /* Empty: Connecting lists, Wavy Lines */
&::after { content: '';}
&::before {
background: #0000;
border-style: solid;
margin: 0;
width: calc(50% + (var(--ui-chronology-bdw) / 2));
}
i {
color: var(--ui-chronology-headline-c, silver);
font-size: clamp(1.5rem, 0.7857rem + 2.2857vw, 2.5rem);
font-style: normal;
font-weight: 900;
letter-spacing: -0.033em;
line-height: 1;
position: relative;
text-transform: uppercase;
}
}
article {
align-self: start;
margin: 2ch 1ch 0 1ch;
line-height: 1.2;
}
h4 {
font-weight: 700;
margin-block: .5ch 0;
}
small {
display: inline-block;
line-height: 1.5;
max-width: 40ch;
}
}
/* RWD */
@media (max-width : 400px) {
row-gap: 0;
ol {
display: flex;
flex-wrap: wrap;
li { flex: 0 0 100%; }
li[value="0"] { display: none; }
&:nth-of-type(odd) li { flex-direction: column-reverse; }
}
}
}
/* Basics */
*, *::before, *::after {
box-sizing: border-box;
}
body {
--CanvasText: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 85%));
background-color: Canvas;
color: var(--CanvasText);
color-scheme: light dark;
font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
font-size: clamp(1rem, 0.8661rem + 0.4286vw, 1.1875rem);
line-height: 1.5;
margin-inline: auto;
padding-inline: 2ch;
text-rendering: optimizeLegibility;
}
:where(h1, h2, h3, h4) {
font-family: inherit;
line-height: 1.3;
text-wrap: balance;
}
:where(img) {
font-style: italic;
height: auto;
max-width: 100%;
}
.laurels {
display: block;
filter: invert(1) brightness(0.85);
margin: 1ch auto;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.