Skip to content

Commit

Permalink
Merge pull request #27 from cagov/jbum-styling-review
Browse files Browse the repository at this point in the history 
Several styling fixes
  • Loading branch information
@jbum
jbum authored Jan 16, 2024
2 parents 4163994 + 17009f1 commit d53349d
Show file tree
Hide file tree
Showing 7 changed files with 228 additions and 211 deletions.
17 changes: 10 additions & 7 deletions docs/pages/content-design/principles.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,17 @@ headericon: star
<p class="text-lead">Great content takes work. The good news is that anyone can do it.</p>

These 7 principles contain strategies and tips to help you write excellent content.
<div class="arrow-list">

* [Focus on user needs and services](/content-design/principles/focus-on-user-needs-services/)
* [Meet your audience where they are](/content-design/principles/meet-your-audience-where-they-are/)
* [Build in accessibility from the start](/content-design/principles/build-accessibility-from-start/)
* [Be concise](/content-design/principles/be-concise/)
* [Write in plain language](/content-design/principles/write-in-plain-language/)
* [Write with a conversational and official voice](/content-design/principles/write-with-conversational-official-voice/)
* [Organize content strategically](/content-design/principles/organize-content-strategically/)
* [Focus on user needs and services](/content-design/principles/focus-on-user-needs-services/)<span class="angle-bracket"> </span>
* [Meet your audience where they are](/content-design/principles/meet-your-audience-where-they-are/)<span class="angle-bracket"> </span>
* [Build in accessibility from the start](/content-design/principles/build-accessibility-from-start/)<span class="angle-bracket"> </span>
* [Be concise](/content-design/principles/be-concise/)<span class="angle-bracket"> </span>
* [Write in plain language](/content-design/principles/write-in-plain-language/)<span class="angle-bracket"> </span>
* [Write with a conversational and official voice](/content-design/principles/write-with-conversational-official-voice/)<span class="angle-bracket"> </span>
* [Organize content strategically](/content-design/principles/organize-content-strategically/)<span class="angle-bracket"> </span>

</div>

## Our inspiration

Expand Down
12 changes: 6 additions & 6 deletions docs/pages/how-to-use.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,46 +12,46 @@ Here are our recommendations for how to use each type of resource on the Hub.
<div class="howtouse-tile">
<div class="howtouse-tile-header">
<div class="header-icon header-star">&nbsp;</div>
<h2>Standards and principles</h2>
<h4>Standards and principles</h4>
</div>
<div class="howtouse-tile-copy interim">They’re the big ideas that guide ODI’s work. If you’re new to a topic, standards and principles are a good place to start.</div>
<hr/>
</div>
<div class="howtouse-tile">
<div class="howtouse-tile-header">
<div class="header-icon header-book">&nbsp;</div>
<h2>Guides and playbooks</h2>
<h4>Guides and playbooks</h4>
</div>
<div class="howtouse-tile-copy interim">These offer details about how to implement a standard or best practice. They can include step-by-step instructions to achieve a goal. Use the guides and playbooks when doing work to achieve a great outcome.</div>
<hr/>
</div>
<div class="howtouse-tile">
<div class="howtouse-tile-header">
<div class="header-icon header-ribbon">&nbsp;</div>
<h2>Training</h2>
<h4>Training</h4>
</div>
<div class="howtouse-tile-copy interim"> Our training gives you access to best practices in innovation. They’re a great way to improve your knowledge and skills so you can deliver better services.</div>
<hr/>
</div>
<div class="howtouse-tile">
<div class="howtouse-tile-header">
<div class="header-icon header-bookmark">&nbsp;</div>
<h2>Recommended reading</h2>
<h4>Recommended reading</h4>
</div>
<div class="howtouse-tile-copy interim">ODI is always researching how to deliver great services. We save our favorite articles and tools to reference them in our work. Our recommended reading is a good way to dive into a topic and expand your knowledge.</div>
<hr/>
</div>
<div class="howtouse-tile">
<div class="howtouse-tile-header">
<div class="header-icon header-templates">&nbsp;</div>
<h2>Templates</h2>
<h4>Templates</h4>
</div>
<div class="howtouse-tile-copy">We often make templates to streamline our work. Take our templates and use them to make your work easier. Feel free to change them to fit your department.</div>
</div>
<div class="howtouse-tile">
<div class="howtouse-tile-header">
<div class="header-icon header-paper">&nbsp;</div>
<h2>Papers</h2>
<h4>Papers</h4>
</div>
<div class="howtouse-tile-copy">We share the details about how we got things done in papers. If you want to learn exactly how we did something, read papers about our projects.</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions docs/site/_includes/layouts/homepage-layout.njk
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% extends "layouts/index.njk" %}
{% block content %}
<div id="page-container" class="page-container-ds">
<div class="breadcrumb" aria-label="Breadcrumb" role="region">
{# <div class="breadcrumb" aria-label="Breadcrumb" role="region">
<a class="crumb" href="https://ca.gov" title="CA.gov">CA.gov</a>
<span class="crumb separator">/</span>
<a class="crumb" href="/" title="Innovation Hub">Innovation Hub</a>
Expand All @@ -11,13 +11,13 @@
{% endif %}
<span class="crumb separator">/</span>
<span class="crumb current">{{ title | safe }}</span>
</div>
</div> #}

<main id="body-content" class="cagov-main">
<article id="post-{{ page.fileSlug }}" class="cagov-article with-single-column-wide">
<h1 class="page-title">
{# <h1 class="page-title">
{{ title | safe }}
</h1>
</h1> #}
<div class="cagov-content">
<div class="homepage-top-block">
<h1 class="page-title">Tips and tools for working better</h1>
Expand Down
2 changes: 1 addition & 1 deletion docs/site/homepage.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ layout: homepage-layout
<div class="content-grid-wrapper">
<a class="tile-link" href="/data/forecasting-community-water-system-outages/">
<div class="content-tile">
<div class="content-tile-header header-star"><span class="title-card-header-label">Papers</span></div>
<div class="content-tile-header header-paper"><span class="title-card-header-label">Papers</span></div>
<div class="content-tile-title">Forecasting community water system outages</div>
<p>How ODI forecasted the impact of drought on community water systems
</p>
Expand Down
211 changes: 207 additions & 4 deletions docs/src/css/sass/ds-site-global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ div.howtouse-tile-copy.interim {
min-height: 10rem;
}

div.howtouse-tile h2 {
div.howtouse-tile h4 {
font-size: 23px;
font-weight: 700px;
color:black;
Expand Down Expand Up @@ -341,9 +341,6 @@ hr.homepage-divider {
margin-top: 24px;
border: 1px solid #C7D6E4;
}
div.homepage-top-block {
padding: 48px 0 0 0;
}
div.featured-content-band {
background: #ECF1F6;
}
Expand Down Expand Up @@ -396,3 +393,209 @@ div.leftright-nav-container {
background-position: right -4px center;
}
}

/* site specific overrides */
a.btn-primary.external-link {
background-color: var(--primary-color, #00315f);
color: var(--white, #fff);
border-color: var(--primary-color, #00315f);
&:hover {
background-color: var(--primary-dark-color, #003484);
border-color: var(--primary-dark-color, #003484);
}
padding-left: 16px;
padding-right: 44px;
background-image: url(/img/ext-link-icon.png);
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 20px;
}
#skip-to-content {
margin-top: -1px;
}

div.official-header {
background-color: #00315f; // var(--primary-dark-color, #00315f);
color:white;
}
div.site-header {
background-color: var(--odi-brand, #f5f8fb);
}

.breadcrumb {
font-size: 18px; /* calc(.875rem + var(--ratio)); */
background: #fff;
padding: 0.625rem;
margin-left: 1rem;
}

/* this looks like it should be part of breadcrumb, not having it is a bug */
@media only screen and (max-width: 992px) {
.breadcrumb {
display: none;
}
}

h1.page-title {
font-family: var(--org-name-dept-font, "Noto Serif", serif);
font-size: 47px;
font-weight: var(--org-name-dept-font-weight, 700);
color: var(--page-title-color, #0D4F8C);
margin: 0 0 0 0;
padding: 0 0 var(--s-3) 0;
}

h2 {
font-family: var(--org-name-dept-font, "Noto Serif", serif);
color: var(--page-title-color, #0D4F8C);
font-size: 37px;
}

cagov-site-navigation {
.container {
padding-top: var(--s-1, 0.5rem);
padding-bottom: var(--s-1, 0.5rem);
}
}

div.par-scores-container {
padding: 1rem;
margin: 1rem 0;
}

cagov-page-feedback {

.feedback-form.cagov-stack {
background: #00315f; // var(--primary-dark-color, #003484)!important
}
h2.feedback-form-label {
background: #00315f!important; // var(--primary-dark-color, #003484)!important
}
}


main.cagov-main {
div.blockquote-container {
background-color: white;
padding: 16px 16px;
margin: 16px 0px;
div.blockquote-body {
border-left: 3px solid #E3881B;
padding: 8px 16px;
div.blockquote-header {
margin-bottom: 16px;
}
div.blockquote-content {
font-size: 14px;
p {
margin-bottom: 0.75rem;
}
ol {
li {
p {
margin-bottom: 0px;

}
}
}
}
}
}
}

div.twocolumn-table {
table {
thead {
background-color: #FAFAFA;
th {
border: 1px solid #C7D6E4;
width: 50%;
font-size: 18px;
}
}
tbody {
background-color: white;
td {
font-size: 14px;
border: 1px solid #C7D6E4;
width: 50%;
}
}
}
}

div.runofshow-table {
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
thead {
background-color: #FAFAFA;
th {
border: 1px solid #C7D6E4;
font-size: 18px;
font-weight: 700;
padding: 16px;
vertical-align: top;
div.description {
padding-top: 8px;
font-size: 14px;
font-weight: 400;
}
}
}
tbody {
background-color: white;
td {
padding: 16px;
font-size: 14px;
border: 1px solid #C7D6E4;
border-collapse: collapse;
}
}
}
}

section.site-footer {
div.container {
padding-left: 48px;
background-image: url(/img/odi-logo.png);
background-repeat: no-repeat;
background-size: 32px;
background-position: left center;

}
}

footer {
div.container {
padding-left: 0px;
}
.cagov-logo {
padding-right: 14px;
}
}

cagov-page-feedback {
&.cagov-mb-2 {
margin-top: 4rem;
margin-bottom: 4rem;
}
}

div.arrow-list {
ul {
list-style-type: none;
li {
margin-bottom: var(--s-1);
// width: auto;
span.angle-bracket {
padding-right: 24px;
background-image: url(/img/right-angle-bracket-icon.png);
background-repeat: no-repeat;
background-size: 24px;
background-position: right -4px center;
}
}
}
}
Loading

0 comments on commit d53349d

Please sign in to comment.