Table of Contents

Design Elements of My Website

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

Introduction

This post contains my web page design components in alphabetical order. I also included some non-design resources, so that I can reference them easily.

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

Colors: General resources

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


🌸👋🏻 Let’s take this to your inbox. You’ll receive occasional emails about whatever’s on my mind—offensive security, open source, academics, boats, software freedom, you get the idea.


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

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

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

Headers

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

I realized that if I used custom CSS to add spacing to the top of headers, I could modify and standardize the headers on every blog post.

/*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, so that my new CSS code did not 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

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

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.

Portrait of Olivia Gallucci in garden, used in LNP article.

Written by Olivia Gallucci

Olivia is an honors student at the Rochester Institute of Technology. She writes about security, open source software, and professional development.