Commit 680ab3f8 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Style timeline list. Rename grids for easier reuse.

parent d3bc9e7a
......@@ -158,11 +158,13 @@ body {
/* grid (19 cols) : margin 17 columns of same width margin */
--grid-columns-main: minmax(1.5rem, 1fr) repeat(17, minmax(auto, 3.264705882rem)) minmax(1.5rem, 1fr);
/* a subgrid based on the main grid but without margins */
--grid-columns-subgrid: repeat(17, minmax(auto, 3.264705882rem));
/* a subgrid list based on the main grid but without margins and minus far right col */
--grid-columns-subgrid-list: repeat(16, minmax(auto, 3.264705882rem));
/* subgrid for blobs */
--grid-columns-subgrid-blob: repeat(14, minmax(auto, 3.264705882rem));
--grid-columns-17-cols: repeat(17, minmax(auto, 3.264705882rem));
/* a subgrid list based on the main grid but only filling 16 columns */
--grid-columns-16-cols: repeat(16, minmax(auto, 3.264705882rem));
/* a subgrid list based on the main grid but only filling 15 columns */
--grid-columns-15-cols: repeat(15, minmax(auto, 3.264705882rem));
/* a subgrid list based on the main grid but only filling 14 columns */
--grid-columns-14-cols: repeat(14, minmax(auto, 3.264705882rem));
}
h1, h2, h3, h4, h5, h6 {
......@@ -369,7 +371,7 @@ main * {
background: #E9EEFB;
grid-column: 2 / 19; /* centred */
display: grid;
grid-template-columns: var(--grid-columns-subgrid);
grid-template-columns: var(--grid-columns-17-cols);
margin: -2em 0 1.5em 0;
padding: 1.5em 0;
z-index: 2; /* pull in front of feature */
......@@ -396,7 +398,7 @@ main * {
ul.blobs {
grid-column: 2 / 19; /* centred */
display: grid;
grid-template-columns: var(--grid-columns-subgrid);
grid-template-columns: var(--grid-columns-17-cols);
margin: 3em 0 2em 0;
}
......@@ -405,7 +407,7 @@ ul.blobs li {
list-style-type: none;
margin-bottom: 1em;
display: grid;
grid-template-columns: var(--grid-columns-subgrid-blob);
grid-template-columns: var(--grid-columns-14-cols);
grid-template-rows: repeat(3, auto);
}
......@@ -452,14 +454,14 @@ ol.emphasised-numbers {
grid-column: 2 / 19; /* centred */
counter-reset: emphasised-numbers-counter; /* custom numbering in :before "content" */
display: grid;
grid-template-columns: var(--grid-columns-subgrid);
grid-template-columns: var(--grid-columns-17-cols);
}
ol.emphasised-numbers li {
counter-increment: emphasised-numbers-counter; /* increment numbers on this list */
grid-column: 1 / 17; /* align left to left margin, align right to main text */
display: grid;
grid-template-columns: var(--grid-columns-subgrid-list);
grid-template-columns: var(--grid-columns-16-cols);
list-style-type: none;
margin: 0 0 1em 0;
position: relative; /* enables us to position pseudo selectors on this element */
......@@ -490,6 +492,63 @@ ol.emphasised-numbers li h3 {
margin-bottom: 0.5em; /* less margin than on other h3s so there’s less distance to the text below */
}
ul.timeline {
margin-top: 1em;
margin-left: 0;
padding: 0;
}
ul.timeline li {
border-left: 0.075rem solid #A4B8B6;
display: grid;
grid-template-columns: var(--grid-columns-15-cols);
margin-bottom: 0;
}
ul.timeline li * {
grid-column: 1 / 16;
}
ul.timeline li h3 {
display: grid;
grid-template-columns: var(--grid-columns-15-cols);
position: relative; /* position pseudo elements in context */
}
ul.timeline li:first-of-type h3 {
margin-top: 0;
}
ul.timeline h3 * {
grid-template-columns: 2 / 15;
}
ul.timeline li h3:before {
background: #C7D4CC;
border-radius: 50%;
content: "";
display: block;
height: 1.5em;
line-height: 1.5em;
margin-left: -0.75em; /* pull over the line */
text-align: center;
width: 1.5em;
}
ul.timeline li p {
grid-column: 2 / 15;
}
ul.timeline li p:last-of-type {
border-bottom: 0.075rem solid #A4B8B6;
padding-bottom: 1.5em;
}
ul.timeline li:last-of-type p:last-of-type {
border: none;
padding-bottom: 0.5em;
}
aside.fund-us {
background: #AFE1E8;
color: #154652;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment