Last active
March 20, 2022 16:04
-
-
Save zephyrmike/928e837fdb0a30a8017d63ee5cfa78d9 to your computer and use it in GitHub Desktop.
GP&GB Course CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* adds letter spacing to the main navigation */ | |
.main-navigation a { | |
letter-spacing: 1px; | |
} | |
/* adds rounded corners to the GeneratePress blog archive photo & post featured image*/ | |
.featured-image img, | |
.post-image img { | |
border-radius: 8px; | |
} | |
/* custom class to style the blog post header date and author text */ | |
.post-meta-style { | |
font-size: 16px; | |
font-weight: 600; | |
text-transform: uppercase; | |
letter-spacing: 2px; | |
} | |
/* adds a drop shadow to the GenerateBlocks containers - must type drop-shadow in the container's Additional CSS class(es) field */ | |
.drop-shadow { | |
box-shadow: 0px 0px 20px rgba(200, 200, 200, 0.2); | |
} | |
/* adds border radius to the top left and right corners of an image block - must type round-top-corners img in the Additional CSS class(es) field */ | |
.round-top-corners img { | |
border-radius: 8px 8px 0px 0px; | |
} | |
/* adds a button to the navigation - must add nav-button to the menu items CSS class field */ | |
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a { | |
color: rgba(72, 45, 112, 1); | |
border: 3px; | |
border-style: solid; | |
line-height: 36px; | |
border-radius: 2px; | |
margin-left: 20px; | |
transition: all 0.6s ease 0s; | |
} | |
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a:hover { | |
color: rgba(72, 45, 112, 0.8); | |
} | |
/* bonus video - header element gradient overlay */ | |
.gradient-overlay { | |
position: relative; | |
} | |
.gradient-overlay:after { | |
content: ""; | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
background: linear-gradient( | |
120deg, | |
rgba(92, 121, 255, 0.9) 0%, | |
rgba(76, 221, 242, 0.8) 100% | |
); | |
} | |
.gradient-overlay .inside-page-hero { | |
z-index: 1; | |
position: relative; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment