Skip to content

Commit

Permalink
Updated styling on homepage tiles.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jbum
jbum committed Dec 20, 2023
1 parent 1d33539 commit 2ef00ed
Show file tree
Hide file tree
Showing 8 changed files with 27 additions and 35 deletions.
33 changes: 8 additions & 25 deletions docs/site/homepage.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,7 @@ description: This system makes it easy to build digital services that meet the n
<div class="content-grid-wrapper">
<a class="tile-link" href="/human-centered-design/innovation-skills-accelerator/">
<div class="content-tile">
<div class="content-tile-header header-ribbon"><span class="content-title-icon"><svg width="20" height="20" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7234 8.83506C20.7234 13.3768 17.0416 17.0586 12.4999 17.0586C7.95817 17.0586 4.27637 13.3768 4.27637 8.83506C4.27637 4.29333 7.95817 0.611526 12.4999 0.611526C17.0416 0.611526 20.7234 4.29333 20.7234 8.83506ZM12.4999 13.9336C15.3157 13.9336 17.5984 11.6509 17.5984 8.83506C17.5984 6.01922 15.3157 3.73653 12.4999 3.73653C9.68406 3.73653 7.40137 6.01922 7.40137 8.83506C7.40137 11.6509 9.68406 13.9336 12.4999 13.9336Z" fill="#523D9D"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2657 20.0154V13.9335H7.14075V22.826C7.14075 23.3933 7.44822 23.916 7.94404 24.1916C8.43985 24.4673 9.04612 24.4525 9.52795 24.1531L12.6362 22.2216L15.7444 24.1531C16.2262 24.4525 16.8325 24.4673 17.3283 24.1916C17.8241 23.916 18.1316 23.3933 18.1316 22.826V13.9335H15.0066V20.0154L13.4609 19.0548C12.9559 18.741 12.3165 18.741 11.8115 19.0548L10.2657 20.0154Z" fill="#523D9D"/>
</svg></span><span class="title-card-header-label">Training</span></div>
<div class="content-tile-header header-ribbon"><span class="title-card-header-label">Training</span></div>
<div class="content-tile-title">Innovation Skills Accelerator</div>
<p>A 15-unit, self-paced course available to all State of California staff
</p>
Expand All @@ -47,47 +44,37 @@ description: This system makes it easy to build digital services that meet the n
<div class="content-grid-wrapper">
<a class="tile-link" href="/content-design/principles/">
<div class="content-tile">
<div class="content-tile-header header-star"><span class="content-title-icon"><svg width="20" height="20.8" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5002 1.57619C13.7296 1.57619 14.8448 2.297 15.3496 3.41795L17.09 7.28244L21.3032 7.74347C22.5253 7.8772 23.5554 8.71504 23.9353 9.88425C24.3152 11.0535 23.9743 12.3368 23.0642 13.1633L19.9267 16.0127L20.7901 20.1621C21.0406 21.3657 20.5621 22.6044 19.5675 23.327C18.5729 24.0496 17.247 24.1219 16.1798 23.5118L12.5002 21.4083L8.82073 23.5118C7.75343 24.1219 6.42757 24.0496 5.43298 23.327C4.43839 22.6044 3.95989 21.3657 4.21035 20.1621L5.07382 16.0127L1.93629 13.1633C1.0262 12.3368 0.685272 11.0535 1.06517 9.88425C1.44507 8.71504 2.47521 7.8772 3.69729 7.74347L7.91046 7.28244L9.65087 3.41795C10.1557 2.297 11.2709 1.57619 12.5002 1.57619ZM10.0262 10.1946L4.03722 10.8499L8.49723 14.9004L7.26981 20.7988L12.5002 17.8087L17.7307 20.7988L16.5032 14.9004L20.9633 10.8499L14.9742 10.1946L12.5002 4.70119L10.0262 10.1946Z" fill="#A35F0E"/>
</svg></span><span class="title-card-header-label">Standards and principles</span></div>
<div class="content-tile-header header-star"><span class="title-card-header-label">Standards and principles</span></div>
<div class="content-tile-title">Content design principles</div>
<p>ODI’s 7 keys for writing great content, including ways to implement them
</p>
</div></a>

<a class="tile-link" href="/content-design/plain-language-equity-standard/">
<div class="content-tile">
<div class="content-tile-header header-star"><span class="content-title-icon"><svg width="20" height="20.8" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5002 1.57619C13.7296 1.57619 14.8448 2.297 15.3496 3.41795L17.09 7.28244L21.3032 7.74347C22.5253 7.8772 23.5554 8.71504 23.9353 9.88425C24.3152 11.0535 23.9743 12.3368 23.0642 13.1633L19.9267 16.0127L20.7901 20.1621C21.0406 21.3657 20.5621 22.6044 19.5675 23.327C18.5729 24.0496 17.247 24.1219 16.1798 23.5118L12.5002 21.4083L8.82073 23.5118C7.75343 24.1219 6.42757 24.0496 5.43298 23.327C4.43839 22.6044 3.95989 21.3657 4.21035 20.1621L5.07382 16.0127L1.93629 13.1633C1.0262 12.3368 0.685272 11.0535 1.06517 9.88425C1.44507 8.71504 2.47521 7.8772 3.69729 7.74347L7.91046 7.28244L9.65087 3.41795C10.1557 2.297 11.2709 1.57619 12.5002 1.57619ZM10.0262 10.1946L4.03722 10.8499L8.49723 14.9004L7.26981 20.7988L12.5002 17.8087L17.7307 20.7988L16.5032 14.9004L20.9633 10.8499L14.9742 10.1946L12.5002 4.70119L10.0262 10.1946Z" fill="#A35F0E"/>
</svg></span><span class="title-card-header-label">Standards and principles</span></div>
<div class="content-tile-header header-star"><span class="title-card-header-label">Standards and principles</span></div>
<div class="content-tile-title">Plain language equity standard</div>
<p>Our recommendations for how to help everyone understand content
</p>
</div></a>

<a class="tile-link" href="/content-design/odi-style-guide/">
<div class="content-tile">
<div class="content-tile-header header-book"><span class="content-title-icon"><svg width="20" height="20" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.78375 3.93865C5.96266 3.54334 9.31679 4.12205 12.5039 5.61776C15.6828 4.12205 19.041 3.54332 22.2199 3.93865L22.8394 4.01609V19.4134L22.0446 19.3156C19.0328 18.9406 15.8458 19.5234 12.8217 21.0069L12.781 21.0273L12.5283 21.1781L12.4998 21.1658L12.4631 21.1822L12.2023 21.0191L12.1819 21.011C9.15788 19.5275 5.97082 18.9447 2.95493 19.3196L2.1602 19.4174V4.01607L2.78375 3.93863V3.93865ZM11.7947 6.8445C9.10082 5.60147 6.2724 5.05944 3.57848 5.27543V17.828C6.27646 17.6324 9.10079 18.1296 11.7947 19.2708V6.84452V6.8445ZM13.2089 6.8445V19.2707C15.5279 18.2845 17.8917 17.7873 20.2474 17.7873C20.6427 17.7873 21.038 17.8036 21.4252 17.8321V5.27951C18.7313 5.05944 15.8988 5.60147 13.2089 6.8445Z" fill="#C24629" stroke="#C24629" stroke-width="1.25" stroke-linejoin="round"/>
</svg></span><span class="title-card-header-label">Guides and playbooks</span></div>
<div class="content-tile-header header-book"><span class="title-card-header-label">Guides and playbooks</span></div>
<div class="content-tile-title">ODI’s style guide</div>
<p>How we keep our writing consistent, including the reasons for our choices
</p>
</div></a>

<a class="tile-link" href="/content-design/plain-language-checklist/"><div class="content-tile">
<div class="content-tile-header header-book"><span class="content-title-icon"><svg width="20" height="20" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.78375 3.93865C5.96266 3.54334 9.31679 4.12205 12.5039 5.61776C15.6828 4.12205 19.041 3.54332 22.2199 3.93865L22.8394 4.01609V19.4134L22.0446 19.3156C19.0328 18.9406 15.8458 19.5234 12.8217 21.0069L12.781 21.0273L12.5283 21.1781L12.4998 21.1658L12.4631 21.1822L12.2023 21.0191L12.1819 21.011C9.15788 19.5275 5.97082 18.9447 2.95493 19.3196L2.1602 19.4174V4.01607L2.78375 3.93863V3.93865ZM11.7947 6.8445C9.10082 5.60147 6.2724 5.05944 3.57848 5.27543V17.828C6.27646 17.6324 9.10079 18.1296 11.7947 19.2708V6.84452V6.8445ZM13.2089 6.8445V19.2707C15.5279 18.2845 17.8917 17.7873 20.2474 17.7873C20.6427 17.7873 21.038 17.8036 21.4252 17.8321V5.27951C18.7313 5.05944 15.8988 5.60147 13.2089 6.8445Z" fill="#C24629" stroke="#C24629" stroke-width="1.25" stroke-linejoin="round"/>
</svg></span><span class="title-card-header-label">Guides and playbooks</span></div>
<div class="content-tile-header header-book"><span class="title-card-header-label">Guides and playbooks</span></div>
<div class="content-tile-title">Plain language checklist</div>
<p>Our detailed guide for making sure content is in plain language
</p>
</div></a>

<a class="tile-link" href="/content-design/recommended-reading/"><div class="content-tile">
<div class="content-tile-header header-bookmark"><span class="content-title-icon"><svg width="20" height="20.8" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 5.75H8.5V17.6578L11.1431 15.9497C11.969 15.416 13.031 15.416 13.8569 15.9497L16.5 17.6578V5.75ZM19 22.25L12.5 18.0494L6 22.25V4.36765C6 3.75404 6.52165 3.25 7.16589 3.25H17.8275C18.4652 3.25 18.9934 3.75404 18.9934 4.36765H19V22.25Z" fill="#006C58"/>
</svg></span><span class="title-card-header-label">Recommended reading</span></div>
<div class="content-tile-header header-bookmark"></span><span class="title-card-header-label">Recommended reading</span></div>
<div class="content-tile-title">Recommended reading: content design</div>
<p>Articles, guides, and tools to learn more about content design
</p>
Expand All @@ -103,18 +90,14 @@ description: This system makes it easy to build digital services that meet the n

<div class="content-grid-wrapper">
<a class="tile-link" href="/product-management/run-of-show/"><div class="content-tile">
<div class="content-tile-header header-templates"><span class="content-title-icon"><svg width="20" height="20.8" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.70361 4.85376C3.3229 4.85376 2.20361 5.97305 2.20361 7.35376V19.1462C2.20361 20.5269 3.3229 21.6462 4.70361 21.6462H20.2965C21.6772 21.6462 22.7965 20.5269 22.7965 19.1462V7.35376C22.7965 5.97305 21.6772 4.85376 20.2965 4.85376H4.70361ZM4.70361 7.35376H20.2965V10.7919H4.70361V7.35376ZM4.70361 13.2919V19.1462H8.36938V13.2919H4.70361ZM14.1311 19.1462H10.8694V13.2919H14.1311V19.1462ZM16.6311 19.1462H20.2965V13.2919H16.6311V19.1462Z" fill="#5E5E6A"/>
</svg></span><span class="title-card-header-label">Templates</span></div>
<div class="content-tile-header header-templates"><span class="title-card-header-label">Templates</span></div>
<div class="content-tile-title">Run-of-show</div>
<p>How to keep things organized in the lead up to a launch, announcement, or update
</p>
</div></a>
<a class="tile-link" href="/product-management/product-craft-accessibility/">
<div class="content-tile">
<div class="content-tile-header header-bookmark"><span class="content-title-icon"><svg width="20" height="20.8" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 5.75H8.5V17.6578L11.1431 15.9497C11.969 15.416 13.031 15.416 13.8569 15.9497L16.5 17.6578V5.75ZM19 22.25L12.5 18.0494L6 22.25V4.36765C6 3.75404 6.52165 3.25 7.16589 3.25H17.8275C18.4652 3.25 18.9934 3.75404 18.9934 4.36765H19V22.25Z" fill="#006C58"/>
</svg></span><span class="title-card-header-label">Recommended reading</span></div>
<div class="content-tile-header header-bookmark"><span class="title-card-header-label">Recommended reading</span></div>
<div class="content-tile-title">Product craft: accessibility</div>
<p>Videos, guides, and presentations about how to help everyone access information
</p>
Expand Down
Binary file added docs/src/assets/img/tile-icon-book.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/src/assets/img/tile-icon-bookmark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/src/assets/img/tile-icon-ribbon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/src/assets/img/tile-icon-star.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/src/assets/img/tile-icon-template.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 17 additions & 8 deletions docs/src/css/sass/ds-site-global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,27 +74,36 @@ div.content-tile-header {
font-size: 14px;
border: 1px solid ;
font-weight: 400;
height: 33px;
height: 26px;
padding-right:12px;
padding-top:6px;
border-radius:8px;
display: inline-block;
position: relative;
background-image: url(/img/tile-icon-star.png);
background-repeat: no-repeat;
background-size: 24px;
background-position: left 4px center;
padding-left: 32px;
}
span.content-title-icon {
padding-left: 4px;
padding-right: 6px;
overflow: hidden;
}
span.title-card-header-label {
vertical-align:top;
vertical-align:middle;
}

div.header-ribbon { background-color: #EFECF8; border: 1px solid #D7D1ED; }
div.header-star { background-color: #FAECDA; border: 1px solid #F4CEA1; }
div.header-book { background-color: #FDEAE5; border: 1px solid #F7CBBE; }
div.header-bookmark { background-color: #E1F1EE; border: 1px solid #8BC7BD; }
div.header-templates { background-color: #EDEDEF; border: 1px solid #D4D4D7; }
div.header-ribbon { background-color: #EFECF8; border: 1px solid #D7D1ED;
background-image: url(/img/tile-icon-ribbon.png); }
div.header-star { background-color: #FAECDA; border: 1px solid #F4CEA1;
background-image: url(/img/tile-icon-star.png); }
div.header-book { background-color: #FDEAE5; border: 1px solid #F7CBBE;
background-image: url(/img/tile-icon-book.png); }
div.header-bookmark { background-color: #E1F1EE; border: 1px solid #8BC7BD;
background-image: url(/img/tile-icon-bookmark.png); }
div.header-templates { background-color: #EDEDEF; border: 1px solid #D4D4D7;
background-image: url(/img/tile-icon-template.png); }

div.content-tile-title {
font-family: "Public Sans";
Expand Down
4 changes: 2 additions & 2 deletions docs/src/css/sass/ds-site-overrides.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ div.site-header {

h1.page-title {
font-family: var(--org-name-dept-font, "Noto Serif", serif);
font-size: var(--org-name-dept-font-size, 47px);
font-size: 54px;
font-weight: var(--org-name-dept-font-weight, 700);
color: var(--page-title-color, #0D4F8C);
margin: 0 0 0 0;
Expand All @@ -51,7 +51,7 @@ h1.page-title {
h2 {
font-family: var(--org-name-dept-font, "Noto Serif", serif);
color: var(--page-title-color, #0D4F8C);
font-size: 37px;
font-size: 48px;
}

cagov-site-navigation {
Expand Down

0 comments on commit 2ef00ed

Please sign in to comment.