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
- Tanaguru contrast finder: “find me the good constrasts, for web accessibility, between to given two colors”
- Colors.lol color pallets
- WebGradients: 180 linear gradients. CSS3 cross-browser code and a .PNG of each gradient.
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
🌸👋🏻 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.
Links
Colors
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
- Usability Geek – Make your UI easier to read
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
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
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.
- 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
