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
- 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
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
- Usability Geek – Make your UI easier to read
Note Boxes
Grey: #d2e1ee
Example
Blue: #accbee
Example
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;
}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.
- 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