mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-15 22:28:10 +08:00
e39539fa08
- Reduces the default width from 1600px to 1200px of the web page and reduce the size of various elements and text. This fixes the problem that I designed the website assuming everyone is viewing from the same 2560px wide screen as I used to design it, which is a bad assumption. Most websites are around the 1200px mark. - Removes the use of the EB Garamond font, replacing more headers with a bold Inter instead, leaving only Bona Nova for h1 headers at the tops of pages (except the home page, which might have further revamp soon). - Adds nice flavor graphics to a redesigned volunteer page. - Cleans up and organizes the Zola templating code and CSS style sheets. - Improves image carousel to fade out images when dragged past the start or end.
89 lines
2.2 KiB
SCSS
89 lines
2.2 KiB
SCSS
#roadmap {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.roadmap {
|
|
margin: auto;
|
|
margin-top: 20px;
|
|
padding: 0 16px;
|
|
|
|
.feature-icons {
|
|
flex-direction: column;
|
|
gap: 0;
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
|
|
.feature-icon {
|
|
position: relative;
|
|
padding-left: calc(16px + 8px);
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
background: #ddd;
|
|
}
|
|
|
|
&:first-of-type::before {
|
|
bottom: 0;
|
|
height: 50%;
|
|
}
|
|
|
|
&:last-of-type::before {
|
|
top: 0;
|
|
height: 50%;
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: calc((24px - 4px) / -2);
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
&[data-year]::after {
|
|
content: attr(data-year);
|
|
width: auto;
|
|
line-height: 1.4;
|
|
text-indent: 28px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
&.complete::after {
|
|
background: var(--color-seaside);
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="%2316323f"><polygon points="6.69 14.57 0 9 1.8 6.84 6.32 10.61 13.83 1.43 16 3.2 6.69 14.57" /></svg>');
|
|
background-repeat: no-repeat;
|
|
background-position: 4px center;
|
|
}
|
|
|
|
&.ongoing::after {
|
|
background: var(--color-lemon);
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="%2316323f"><path d="m8,2c3.31,0,6,2.69,6,6s-2.69,6-6,6-6-2.69-6-6,2.69-6,6-6m0-2C3.58,0,0,3.58,0,8s3.58,8,8,8,8-3.58,8-8S12.42,0,8,0h0Zm2.83,9.41l-1.83-1.83v-2.59c0-.55-.45-1-1-1s-1,.45-1,1v3c0,.13.03.26.08.38.05.12.12.23.22.33l2.12,2.12c.2.2.45.29.71.29s.51-.1.71-.29c.39-.39.39-1.02,0-1.41Z" /></svg>');
|
|
background-repeat: no-repeat;
|
|
background-position: 4px center;
|
|
}
|
|
|
|
&:not(.complete, .ongoing)::after {
|
|
background: #ddd;
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="%23fff"><circle cx="8" cy="8" r="8" /></svg>');
|
|
background-repeat: no-repeat;
|
|
background-position: 4px center;
|
|
}
|
|
|
|
&.heading {
|
|
background: none;
|
|
|
|
h3 {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|