119 lines
2.5 KiB
CSS
119 lines
2.5 KiB
CSS
.program__sections {
|
|
margin-top: var(--block-space);
|
|
margin-bottom: var(--space-10);
|
|
grid-column: 2 / -2;
|
|
}
|
|
.program__topic-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.program__topic-link {
|
|
display: block;
|
|
font-family: var(--text);
|
|
font-weight: var(--text-semi-bold);
|
|
font-size: 0.8rem;
|
|
text-decoration: none;
|
|
padding: 0.5em 0.75em;
|
|
border: 0.15em solid var(--black);
|
|
margin-right: var(--space-2);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.program__topic-link:hover,
|
|
.program__topic-link:focus,
|
|
.program__topic-link--active {
|
|
color: var(--white);
|
|
background-color: var(--black);
|
|
}
|
|
.program__download-link {
|
|
display: inline-block;
|
|
}
|
|
|
|
.program__chapters-wrapper {
|
|
--bg-color: var(--green);
|
|
position: relative;
|
|
margin-bottom: var(--space-10);
|
|
padding-bottom: var(--space-15);
|
|
}
|
|
.program__chapters-wrapper::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: calc(-0.5 * var(--diagonal));
|
|
left: 0;
|
|
width: 100%;
|
|
height: calc(100% + var(--diagonal));
|
|
clip-path: polygon(
|
|
0% calc(var(--diagonal) / 2 + 20%),
|
|
100% 20%,
|
|
100% calc(100% - calc(var(--diagonal) / 2)),
|
|
0% 100%
|
|
);
|
|
background: var(--bg-color);
|
|
z-index: 1;
|
|
}
|
|
.program__chapters-wrapper > * {
|
|
z-index: 1;
|
|
}
|
|
|
|
.program__chapters {
|
|
grid-column: 2 / -2;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
grid-gap: var(--space-5);
|
|
}
|
|
|
|
p.program__chapter-label {
|
|
font-family: var(--text);
|
|
font-weight: var(--text-semi-bold);
|
|
margin-bottom: var(--space-2);
|
|
color: var(--green);
|
|
}
|
|
|
|
p + .program__chapter-label {
|
|
margin-top: var(--space-10);
|
|
}
|
|
|
|
.program__chapter {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1.5rem;
|
|
background-color: var(--white);
|
|
border: 4px solid var(--black);
|
|
text-decoration: none;
|
|
}
|
|
.program__chapter .program__read-more {
|
|
align-self: flex-start;
|
|
margin-top: auto;
|
|
font-family: var(--text);
|
|
font-weight: var(--text-bold);
|
|
border-bottom: 0.15em solid currentColor;
|
|
}
|
|
@media (min-width: 500px) {
|
|
.program__chapter p,
|
|
.program__chapter .program__read-more {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
.program__follow-up {
|
|
display: grid;
|
|
row-gap: var(--space-15);
|
|
margin-top: var(--space-10);
|
|
margin-bottom: var(--space-20);
|
|
grid-column: 2 / -2;
|
|
}
|
|
|
|
.program__follow-up .button {
|
|
display: inline-block;
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
.program__follow-up {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
column-gap: var(--space-10);
|
|
}
|
|
}
|