Olivia A. Gallucci

Like how this site looks? Here are the colors, fonts, and custom CSS behind it, ready to copy into your own WordPress site. Sections are mostly in alphabetical order, and I also keep a few security and SEO tools at the bottom for my own reference. Think of this page as my web page design notebook.

Background colors

Light theme white: #ffffff

Dark theme black-grey: #212121

Buttons

Start: blue #6cd0fa
Middle: purple #9896f0
End: pink #ff6ec7
Angle: 150deg (top left to bottom right, a little steeper than diagonal)

Hover: solid pastel purple #ddb8ff with black text (12.4:1 contrast). The pale ombre buttons (#ccebff to #e7ccff) use the same hover. Only the colors change, so round buttons stay round and square ones stay square.

You can set this as a default in custom-CSS like:

/* add ombre background to all buttons unless otherwise styled */
button {
  background: linear-gradient(150deg, rgb(108, 208, 250) 0%, rgb(152, 150, 240) 51%, rgb(255, 110, 199) 100%);
}

/* add ombre background to all buttons unless otherwise styled */
button {
  background: linear-gradient(135deg, rgb(108, 208, 250) 0%, rgb(152, 150, 240) 50%, rgb(255, 110, 199) 100%);
}

Color resources for web page design

• Tanaguru contrast finder: “find me the good constrasts, for web accessibility, between to given two colors”
• Colors.lol color palettes
• WebGradients: 180 linear gradients. CSS3 cross-browser code and a .PNG of each gradient.
• WebAIM contrast checker: checks two colors against the WCAG AA and AAA ratios. It’s how I caught the old green hover.

Device-specific changes

• Media Queries for Standard Devices by Chris Coyier
  • Has specifications for common devices like iPhone, Google Pixel, Kindle Fire, and some laptops
• Using Media Queries with Custom CSS by WordPress
• Example: Hide Image in Mobile View with CSS by Stacey Corrin

Remove item on mobile

/* remove image on mobile */ 
@media only screen and (max-width : 800px) {
	.remove-mobile {
		display: none; 
	}
}

Font

Text: Libre Baskerville, size 14
Links: Libre Baskerville, size 14, semi-bold

Links

Colors

Resting: blue #0081cc

Menu hover (light mode): blue #134aa5 with an underline

Menu hover (dark mode): light blue #6cd0fa on #212121

The underline matters: my custom CSS removes link underlines everywhere (see Remove underline), so color alone would be the only hover cue. Adding it back on hover helps people who can’t see the color change.

Example: www.oliviagallucci.com

My theme’s design plugin sets its own hover color, so these rules start with html:root body. That makes them more specific than the plugin’s rules, so they win without editing the plugin.

/* menu links: blue + underline on hover and keyboard focus */
html:root body header .wp-block-navigation-item__content:is(:hover, :focus-visible) {
  color: #134aa5 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* menu links in dark mode */
html:root body.dark header .wp-block-navigation-item__content:is(:hover, :focus-visible) {
  color: #6cd0fa !important;
}

/* buttons on either ombre (bright or pale): solid pastel purple, black text.
 * Only colors change, so round buttons stay round and square ones stay square.
 * The gradient class list is repeated on purpose: it raises specificity so this
 * rule beats other hover rules for buttons. */
html:root body :is(.wp-block-button__link, .wp-block-search__button):is(.has-custom-color-1-gradient-background, .has-custom-color-2-gradient-background):is(.has-custom-color-1-gradient-background, .has-custom-color-2-gradient-background):is(:hover, :focus-visible) {
  background: #ddb8ff !important;
  color: #000 !important;
}

.olivia-blue-link a {
  color: #0081cc !important;
  font-weight: bold;
}
.olivia-blue-link a:hover {
  color: #32b883 !important;
  font-weight: bold;
}

Remove underline

/* Remove link underline */
a {
	text-decoration: none !important;
}

Lists

Ombre

I often use ombre background on lists.

Start: blue #ccebff
End: purple #e7ccff
Ombre type: linear

Start: light blue #e7f0fd
End: blue #accbee

Start: light green #D4FC79
End: darker green #00D184E6
Note: I removed this color scheme from my blog 8 August 2022.

Spacing

.olivia-spacing {
 line-height: 1.8;
}

This applies the spacing to every list on my website unless I specified otherwise in the custom CSS of the individual block:

/* change the amount of vertical space between each line.
 * this is what you would change if you wanted your text to 
 * appear double spaced for MLA formatting */
ol, ul {
	line-height: 1.8em;
}

Usability in web page design

• Usability Geek – Make your UI easier to read

Headers

When I changed WordPress themes, I had to fix the spacing above every header (H2 through H5). I did it on every blog post to get the look I wanted.

Then I realized custom CSS could add that spacing to the top of headers for me. It standardizes the headers on every blog post at once.

/*Add spacing of 25px on top of headings in single posts */

.single-post h2:not(.wp-block-post-title) {
  padding-top: 25px;
}

.single-post h3, .single-post h4 {
	padding-top: 25px;
	margin-bottom: -10px !important;
}

This solution also meant that I would never need to add a spacer block when dealing with headers. Unfortunately, I had to remove the spacer blocks from all of my blog posts. Otherwise, my new CSS code would mess up the look.

I highly recommend using CSS instead of using the spacer block, which is often repetitive and impractical.

Note boxes

Grey: #d2e1ee

Blue: #accbee

Site header

/* Change site title black */
.site-brand a {
	color: black;
}
/* change site title hover color to blue */ 
.site-brand a:hover {
	color: #0081cc !important;
}

Security

I’m not sure of the rules for using these tools on sites you don’t own. That includes finding, copying, analyzing, or exploiting the information they turn up. I am by no means a security expert, but I recently began poking at my website. It is interesting!

As a result, please be careful using them on sites you don’t own. For general WordPress security matters, you can contact its bounty programs: WordPress and Automattic.

• Broken Link Checker
• Security Headers: Check HTTP security headers
• Reqbin: View HTML, HTTP requests, and other info on a web page
• Burp Suite and WP Scan are other tools, but I have not used them yet.

SEO

I recently started using these. I am not an SEO expert, nor do I know if these even work well.

• WordStream Keyword Tool
  • Website Keywords: Find the Best Keywords for Your Website

OG Health & Fitness

• Blue 1 = #08225A

• Blue 2 = #134AA5

Blue 2 also does double duty on the main site as the menu hover color.

Offensive Services

• Red 1 = #C60F0F – back base color

• Red 2 = #CF2E2E – Website red for readable text

• Red 3 = #871515

• Red 4 = #A31111

• Red 5 = #990000 – used on hey there page

• Red 6 = #B91C1C