Design Elements of My Website

boat floating on water, used in a post about web page design

This post contains my web page design components. :)

Buttons

Start: blue #6cd0fa
Middle: purple #9896f0
End: pink #ff6ec7

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

/* 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%);
}

Device Specific Changes

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

Resting: blue #0081cc
Hover: green #32b883

Example: www.oliviagallucci.com

.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

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

  • Example

Start: light blue #e7f0fd
End: blue #accbee

  • Example

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

  • Example

Spacing

Old news

I used to use this in the “Additional CSS class(es)” field for every list because I did not know you could apply changes to every block in theme’s custom CSS. I do not recommend this.

.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 horizontal 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

Note Boxes

Grey: #d2e1ee

Example

Blue: #accbee

Example

/* Change site title black */
.site-brand a {
	color: black;
}

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

Non-design

Security

Despite being a security student, I am unsure what the rules and implications are for finding, copying, analyzing, or exploiting information found using these tools. 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.

SEO

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