Skip to content

Commit

Permalink
feat: added ca-gov custom css and updated header (#9)
Browse files Browse the repository at this point in the history
  • Loading branch information
kkoryaka authored Jan 28, 2025
2 parents 954d09f + 925412e commit 091acd4
Show file tree
Hide file tree
Showing 2 changed files with 213 additions and 19 deletions.
87 changes: 68 additions & 19 deletions web/core/templates/core/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -65,38 +65,77 @@
<div id="skip-to-content">
<a href="#main-content">Skip to Main Content</a>
</div>
<div class="utility-header">
<!-- Utility header structural component -->
<div class="utility-header" data-nosnippet>
<div class="container">
<div class="flex-row">
<div class="social-media-links">
<div class="header-cagov-logo">
<a href="https://ca.gov">
<span class="sr-only">CA.gov</span>
<span class="ca-gov-logo-svg"></span>
</a>
<div class="social-media-links align-items-start">
<div class="official-collapsible-content">
<button type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOficial"
aria-expanded="false"
aria-controls="collapseOficial"
class="btn-official mt-1 gray-900 color-black-hover">
<span class="underline">Official California website</span>
<span class="ca-gov-icon-caret-up" aria-hidden="true"></span>
<span class="ca-gov-icon-caret-down" aria-hidden="true"></span>
</button>
<div class="collapse" id="collapseOficial">
<div class="font-size-13 gray-900 p-y ps-1 pe-2">
<span class="bold">California government websites use .ca.gov</span>
<br />
A .ca.gov website is part of California’s government.
</div>
</div>
</div>
<p class="official-tag">
<span class="desktop-only">Official website of the</span>
State of California
</p>
</div>
<div class="settings-links">
<a href="{% url 'core:index' %}">About</a>
<a href="{% url 'core:index' %}">Contact</a>
<div class="settings-links ms-auto align-items-start pt-2">
<a href="{% url 'core:index' %}"
class="m-l-0 underline cursor-pointer"
lang="es"
hreflang="es"
translate="no"
rel="alternate">Español</a>
<a href="{% url 'core:index' %}"
lang="ko"
hreflang="ko"
translate="no"
rel="alternate"
class="underline cursor-pointer">한국어</a>
<a href="{% url 'core:index' %}"
lang="tl"
hreflang="tl"
translate="no"
rel="alternate"
class="underline cursor-pointer">Tagalog</a>
<a href="{% url 'core:index' %}"
lang="vi"
hreflang="vi"
translate="no"
rel="alternate"
class="underline cursor-pointer">Tiếng Việt</a>
<a href="{% url 'core:index' %}"
lang="zh-hant"
hreflang="zh-hant"
translate="no"
rel="alternate"
class="underline cursor-pointer">繁體中文</a>
<a class="translate notranslate pos-rel top-minus-2"
href="https:www.ca.gov/translate/"><span class="ca-gov-icon-globe" aria-hidden="true"></span><span class="sr-only">Translate</span></a>
</div>
</div>
</div>
</div>
<!-- header branding with light gray background -->
<!-- Site header (branding) structural component -->
<div class="section-default">
<div class="branding">
<div class="header-organization-banner">
<a href="{% url 'core:index' %}">
<div class="logo-assets">
<div class="logo-text">
<span class="logo-state">State of California</span>
<span class="logo-dept">Digital Disaster Recovery Center</span>
</div>
<img src="https://cdn.cdt.ca.gov/cdt/cagov/cagov-lockup/cagov-lockup-flag/cagov-lockup-flag-gradient/cagov-lockup-flag-gradient.svg"
class="logo-img"
alt="CA.gov official logo" />
</div>
</a>
</div>
Expand All @@ -122,6 +161,16 @@
</div>
</div>
<div class="navigation-search full-width-nav container">
<div id="head-search" class="search-container featured-search">
<div class="d-block d-lg-none">
<a href="{% url 'core:index' %}"
class="drawer-logo-link first-level-link">
<img src="https://cdn.cdt.ca.gov/cdt/cagov/cagov-lockup/cagov-lockup-flag/cagov-lockup-flag-gradient/cagov-lockup-flag-gradient.svg"
alt="CA.gov official logo"
class="drawer-logo mb-4" />
</a>
</div>
</div>
<!-- navigation types -->
<nav id="navigation"
class="main-navigation dropdown"
Expand Down
145 changes: 145 additions & 0 deletions web/static/css/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
@font-face {
font-family: "Public Sans";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v18/ijwTs572Xtc6ZYQws9YVwnNDTJPax8s3JimW3w.woff2)
format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "Public Sans";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v18/ijwTs572Xtc6ZYQws9YVwnNDTJLax8s3JimW3w.woff2)
format("woff2");
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Public Sans";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v18/ijwTs572Xtc6ZYQws9YVwnNDTJzax8s3Jik.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v18/ijwRs572Xtc6ZYQws9YVwnNIfJ7QwOk1Fig.woff2)
format("woff2");
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/publicsans/v18/ijwRs572Xtc6ZYQws9YVwnNGfJ7QwOk1.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
header {
> div.utility-header {
background-color: #f5f9fa;
> div.container > div.flex-row {
> div.social-media-links
> div.official-collapsible-content
> button.btn-official {
border: none;
font-size: 0.875rem;
background: transparent;
text-align: left;
text-wrap: nowrap;
&[aria-expanded="true"] {
> span.ca-gov-icon-caret-up {
display: inline-block;
}
> span.ca-gov-icon-caret-down {
display: none;
}
}
&[aria-expanded="false"] {
> span.ca-gov-icon-caret-up {
display: none;
}
> span.ca-gov-icon-caret-down {
display: inline-block;
}
}
}
@media (width <= 770px) {
flex-direction: column !important;
> div.settings-links {
margin-left: 0 !important;
justify-content: flex-start;
> a {
margin-left: 0;
margin-right: 1rem;
font-size: 0.8rem;
}
}
}
@media (width <= 350px) {
> div.social-media-links {
flex-direction: column;
}
}
}
}
> div.section-default > div.branding > div.header-organization-banner {
display: flex;
margin-right: 0;
padding-top: 1rem;
padding-bottom: 1rem;
> a > div.logo-assets {
> img.logo-img {
max-height: 60px;
height: 60px;
aspect-ratio: 18/5;
}

@media (width <= 991px) {
> img.logo-img {
max-height: 50px;
}
}
}
@media (width <= 575px) {
margin-right: 15%;
> a > div.logo-assets {
> img.logo-img {
max-height: 50px;
}
}
}
}
> div.mobile-controls > div.main-nav-icons {
top: -5rem;
> button.toggle-menu {
margin-top: 1rem;
}
}
> div.navigation-search {
> div.search-container > div.d-block > a.drawer-logo-link {
outline-offset: -3px;
> img.drawer-logo {
width: 232px;
filter: brightness(0) invert(1);
aspect-ratio: 18/5;
}
}
}
}

0 comments on commit 091acd4

Please sign in to comment.