Open lukefretwell opened 6 years ago
To review:
search replace colors:
// Variables
// --------------------------------------------------
$light-weight: 300!default;
$regular-weight: 400!default;
$medium-weight: 700!default;
$bold-weight: 900!default;
$gray-warm-dark: #494440!default;
$gray-warm-light: #e4e2e0!default;
$gray-cool-light: #aeb0b5!default;
// Social
$gray-social: #5b616b!default;
$blue-facebook: #3C5A99!default;
$blue-twitter: #1DA1F2!default;
$red-googleplus: #DD4B39!default;
$blue-linkedin: #0077B5!default;
$pink-flickr: #ff0084!default;
$red-youtube: #ff0000!default;
$red-pinterest: #bd081c!default;
$orange-rss: #f26522!default;
$pink-dribbble: #ea4c89!default;
$blue-vimeo: #1ab7ea!default;
$blue-wordpress: #21759b!default;
// Brand warning (default yellow)
$brand-warning: #fdb81e !default;
// Cards
$card-max-width: none !default;
$card-spacer-x: 1.25rem !default;
$card-spacer-y: .75rem !default;
$card-border-width: .1rem !default;
$card-border-radius: .25rem !default;
$card-border-color: #d6d7d9 !default;
$card-border-radius-inner: ($card-border-radius - $card-border-width) !default;
$card-cap-bg: #f1f1f1 !default;
$font-weight-h1: 900!default;
$font-weight-h2: 700!default;
$font-weight-h3: 700!default;
$font-weight-h4: 700!default;
$font-weight-h5: 700!default;
$font-weight-h6: 700!default;
//** Default background color used for all tables.
$table-bg: transparent !default;
//** Background color used for `.table-striped`.
$table-bg-accent: #f1f1f1 !default;
//** Background color used for `.table-hover`.
$table-bg-hover: #e4e2e0 !default;
$table-bg-active: $table-bg-hover !default;
//** Border color for table and cell borders.
$table-border-color: #d6d7d9 !default;
$btn-default-color: #323a45 !default;
$btn-default-bg: #fff !default;
$btn-default-border: #323a45 !default;
//== Forms
//
//##
//** `<input>` background color
$input-bg: #fff !default;
//** `<input disabled>` background color
$input-bg-disabled: $gray-lighter !default;
//** Text color for `<input>`s
$input-color: $gray !default;
//** `<input>` border color
$input-border: #5b616b !default;
// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
//** Default `.form-control` border radius
$input-border-radius: $border-radius-base !default;
//** Large `.form-control` border radius
$input-border-radius-large: $border-radius-large !default;
//** Small `.form-control` border radius
$input-border-radius-small: $border-radius-small !default;
//** Border color for inputs on focus
$input-border-focus: #323a45 !default;
//** Placeholder text color
$input-color-placeholder: #5b616b !default;
//** Default `.form-control` height
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 4) !default;
//** Large `.form-control` height
$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 4) !default;
//** Small `.form-control` height
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 4) !default;
$legend-color: $gray-dark !default;
$legend-border-color: #e4e2e0 !default;
//** Background color for textual input addons
$input-group-addon-bg: $gray-lighter !default;
//** Border color for textual input addons
$input-group-addon-border-color: $input-border !default;
//** Disabled cursor for form controls and buttons.
$cursor-disabled: not-allowed !default;
Would be great to talk through this custom CSS I have on our site (and help until today) to see what should be incorporated into main styles:
/* Headings */
h1, h2, h3, h4, h5, h6, .h3, .h2, .h4, .h1 {
font-weight: 900;
letter-spacing: -.01em;
}
/* Navigation */
.nav-logo img, .hide-site-name img.logo {
max-width: 175px !important;
}
/* Quote */
.jumbotron:not(.jumbotron-image), .nav-contain .nav-pills li.active a, .btn-primary {
background-color: #0071BC !important;
border-color: #0071BC !important;
}
.widget-proudcity-custom-quote-title h1 {
font-size: 50px;
margin-top: 0 !important;
}
.quote-menu {
background-color: #f1f1f1;
border: 1px solid #e4e2e0;
border-radius: 3px;
padding: 20px 10px 0px 10px !important;
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.quote-menu .navbar-nav>li>a {
padding: 6px 12px !important;
margin-right: 10px;
}
.help-block {
display: block;
margin-top: 15px;
margin-bottom: 10px;
color: #212121;
}
.panel-grid-cell:only-child .so-panel {
margin-bottom: 0 !important;
}
hr.hidden-print {
margin-top: 0px;
margin-bottom: 0px;
border: 0;
border-top: 1px solid #fff;
}
.quote-hero h1 {
padding-bottom: 20px;
padding-top: 30px;
}
.jumbotron-header-container {
background-color: #205493;
}
.jumbotron.jumbotron-inverse .jumbotron-bg {
background: rgba(0, 113, 188,.8);
}
.jumbotron a, .jumbotron a:visited {
color: #fff;
text-decoration: underline;
}
.jumbotron a:hover {
color: #fff;
text-decoration: none;
}
/* People */
.people {
text-align: center;
}
.people img {
max-width: 150px;
margin-bottom: 20px;
border-radius: 50%;
}
/* Images */
.img-border img {
border: 10px solid #f1f1f1;
border-radius: 10px;
margin-bottom: 20px;
padding: 10px;
}
.govtech img {
max-width: 175px;
}
.seals img {
max-width: 110px;
}
.partner-horiz img {
max-width: 195px;
margin-bottom: 10px;
margin-top: 10px;
}
.partner-circle img {
max-width: 110px;
margin-bottom: 10px;
margin-top: 10px;
}
/* Icons */
.icon .fa {
color: #0071BC;
font-size: 50px;
}
.icon h2 {
margin-bottom: 0;
margin-top: 0;
}
/* fix for agency sizes alex 4/25 */
.card-wrap.agency h3,
.card-wrap.agency .h3
{
font-weight: 400;
font-size: 20px;
line-height: 1.5;
}
@media screen and (max-width: 779px) {
.card-wrap.agency h3,
.card-wrap.agency .h3
{
font-size: 15px;
}
}
/* Help */
.help {
background: #0071BC;
margin-bottom: 40px;
margin-top: 40px;
padding: 30px 0 50px 0;
}
.help a, .help a:visited, .help, .help h2 {
color: #fff;
}
.help a, .help a:visited {
text-decoration: underline;
}
.help a, .help a:visited {
text-decoration: underline;
}
.help .fa {
color: #fff;
font-size: 70px;
padding-top: 40px;
}
/* Apps */
.apps {
text-align: center;
}
.apps img {
border: 1px solid #f1f1f1;
border-radius: 5px;
width: 100%;
max-width: 125px;
}
.apps h3 {
font-size: 15px;
}
.apps .panel-grid-cell {
background: #f1f1f1;
margin-bottom: 20px;
padding: 10px;
}
/* Plans */
.plan {
border: 1px solid #d6d7d9;
border-radius: 3px;
padding: 10px;
margin-bottom: 20px;
}
/* Table */
table {
border: 1px solid #f1f1f1;
width: 100%;
}
th {
text-align: left;
}
th, td {
padding: 15px;
text-align: left;
}
tr:nth-child(even) {background-color: #f1f1f1;}
/* Media */
.media {
margin-bottom: 2em;
}
.media img {
border: 1px solid #f1f1f1;
}
/* Forms */
.formWrap, .formButtonWrap {
margin: 0 !important;
padding: 0 !important;
}
Would be great to create a standard CSS style (class="more") for the 'More' link, so that gives it more space but also we can better standardize the UI. At minimum, think we should wrap it in a
tag. I also like the right arrow HTML as a default after the text (see below how I added it, but would be great to just show without having to add there).
Front end:
Admin:
Merging here: https://github.com/proudcity/wp-proudcity/issues/1290
I think the events date box CSS could be cleaned up to match the custom styles.
Suggested CSS updates:
.date-box {
background: #0071bc; (OR CUSTOM PRIMARY COLOR)
border-color: #0071bc; (OR CUSTOM PRIMARY COLOR)
border-radius: 5px;
color: #ffffff;
}
If there are cards below one another, there's not much vertical space. Think it would be great to add a little more margin space.
Suggested CSS update:
.card-columns>* {
margin-bottom: 20px;
}
Example:
The jumbotron CSS needs some slight clean-up.
Not suggested CSS, just for reference during UX call discussion:
.jumbotron h1 {
font-size: 45px;
}
.jumbotron-header-container {
background-color: #205493;
background-image: url("https://storage.googleapis.com/proudcity/alpha/uploads/2019/01/help-jumbo.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.jumbotron.jumbotron-inverse .jumbotron-bg {
background: rgba(0, 113, 188,.8);
color: #ffffff;
}
.lead, .jumbotron p {
font-size: 20px;
font-weight: 400;
}
.jumbotron p {
padding-top: 20px;
}
.jumbotron a, .jumbotron a:visited {
color: #fff;
text-decoration: underline;
}
.jumbotron a:hover {
color: #fff;
text-decoration: none;
}
I thought this was addressed, but looks like it's still showing.
Can we get the subnav 'on' CSS to display the primary customized color?
See here: https://www.townoffairfax.org/guide-to-public-meetings/
@aschmoe can we have the card-wrap
color text default to the default body text color?
See here: https://proudcity.com/california
Screenshot:
change jumbotron .lead class to: font-weight: 400;
For consideration/discussion:
/* Cards */
.card-block {
padding: 20px 10px;
}
.card-block .fa {
padding-bottom: 10px;
padding-top: 10px;
}
.card-block .h4, a.card-btn {
color: #0071BC;
}
For review/discussion/consideration:
/* Secondary */
.secondary {
background: #0071BC;
margin: 20px 0 50px 0;
padding: 20px 0;
}
.secondary h2, .secondary a, .secondary a:visited {
color: #ffffff;
}
.widget-proud-icon-set .card-wrap {
color: #0071BC;
margin: 10px 0;
}
.widget-proud-icon-set .card-wrap a, .widget-proud-icon-set .card-wrap a:visited {
color: #0071BC;
}
.card-wrap {
color: #0071BC;
}
Accordion:
/* Accordion */
.accordion {
margin-bottom: 2.5rem;
margin-top: 2.5rem;
}
Update font size on main:
main p, main li {
font-size: 1.9rem;
}
For consideration/review/discussion:
.media img {
border-radius: 5px;
}
/* HTML */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: 900;
}
main p, main li {
font-size: 1.9rem;
}
img {
width: 100%;
}
.lead, .jumbotron p {
font-weight: 400;
}
I ran example through the W3C Validation Service and am posting the results here so we can review and document relevant fixes we need to make:
http://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fexample.proudcity.com%2Fwidgets%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en