feat: added ca-gov custom css and updated header

[kkoryaka]

No description provided.

[github-actions]

Coverage report

Click to see where and how coverage changed

File	Statements	Missing	Coverage	Coverage (new stmts)	Lines missing
web
settings.py					43-45
wsgi.py
web/core
models.py
web/oauth
admin.py
client.py					9, 16, 22, 44
models.py
session.py					3-29
views.py					7-9, 16-20, 26-37, 42-47, 75-110, 143-148, 159-160
web/oauth/migrations
0001_initial.py					4-5
web/vital_records
urls.py					2, 7
Project Total

This report was generated by python-coverage-comment-action

[thekaveman]

@kkoryaka, is this a copy of a stylesheet from another website? It seems like there are a lot of style rules in here that aren't used / don't target anything in this HTML.

E.g. this site doesn't have a div.header-banner and so this entire rule is not applied

main {
  > div.header-banner {
    overflow: hidden;
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 498"><polygon fill="%23035D85" points="598 -1 -1 -1 -1 243 -1 244 -1 497 98 497 98 497 840 497"/><polygon fill="%23035376" points="1204 -1 598 -1 840 497 949 497 1440 497 1440 -1"/></svg>');
    background-color: var(--color-p2, #046b99);
    background-position: center !important;
    background-size: cover !important;
    display: block;
    position: relative;
    @media (width <= 991px) {
      > div.row {
        flex-direction: column;
      }
    }
  }
}

There are other examples like this in the file.

I have two thoughts:

1. Would it make sense to just link to a stylesheet on another site instead of copying this in? If this is really just a copy of another stylesheet with no customizations, let's just reference it directly.
2. Or would it make more sense to clean up this stylesheet to only those customizations that are needed for this site?

[kkoryaka]

@kkoryaka, is this a copy of a stylesheet from another website? It seems like there are a lot of style rules in here that aren't used / don't target anything in this HTML.

E.g. this site doesn't have a div.header-banner and so this entire rule is not applied

main {
  > div.header-banner {
    overflow: hidden;
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 498"><polygon fill="%23035D85" points="598 -1 -1 -1 -1 243 -1 244 -1 497 98 497 98 497 840 497"/><polygon fill="%23035376" points="1204 -1 598 -1 840 497 949 497 1440 497 1440 -1"/></svg>');
    background-color: var(--color-p2, #046b99);
    background-position: center !important;
    background-size: cover !important;
    display: block;
    position: relative;
    @media (width <= 991px) {
      > div.row {
        flex-direction: column;
      }
    }
  }
}

There are other examples like this in the file.

I have two thoughts:

1. Would it make sense to just link to a stylesheet on another site instead of copying this in? If this is really just a copy of another stylesheet with no customizations, let's just reference it directly.
2. Or would it make more sense to clean up this stylesheet to only those customizations that are needed for this site?

@thekaveman you are right. I cleaned it and left only those styles that currently used and couple of utilities

[thekaveman]

@kkoryaka Sorry to be a stickler. I found some more rules that appear to be unused given our HTML markup.

[thekaveman]

Looks great @kkoryaka, thank you!