Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
GP Sites - WordSmith CSS
/* ===============================
SITE HEADER
=============================== */
/* hide topbar on mobile */
@media (max-width: 768px) {
.top-bar {
display: none;
}
}
/* lightweight social icon spacing and transparency */
.lsi-social-icons li a, .lsi-social-icons li a:hover {
padding: 4px 8px !important;
}
/* rule under top bar */
.top-bar {
border-bottom: solid 1px rgba(136,136,136,0.5);
}
/* navigation top and bottom rules */
#site-navigation {
border-top: solid 1px rgba(136,136,136,0.5);
border-bottom: solid 1px rgba(136,136,136,0.5);
}
/* center align text in menus */
.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
text-align: center;
}
/* mobile slideout menu top padding */
#generate-slideout-menu {
padding-top: 20px;
}
/* ===============================
HOME PAGE HEADER
=============================== */
/* home hero headline */
.hero-header {
font-size: 70px;
line-height: 1.3em;
text-shadow: 1px 1px 2px rgba(20, 20, 20, 0.4);
}
/* home hero mobile headline */
@media (max-width: 768px) {
.hero-header {
font-size: 50px;
line-height: 1.1em;
}
}
/* home hero sub headline */
.hero-text {
font-size: 22px;
text-shadow: 1px 1px 2px rgba(20, 20, 20, 0.4);
}
/* home hero rule */
hr.hero-rule {
width: 80px;
height: 4px;
background-color:#ffffff;
margin: 20px auto 30px auto;
}
/* mobile hero top and bottom padding */
@media( max-width: 480px ) {
.page-header-content-container {
padding-top: 60px;
padding-bottom: 80px;
}
}
/* ===============================
BLOG POSTS
=============================== */
/* blog posts width */
body.single .site.grid-container {
max-width: 800px;
}
/* ===============================
BUTTON STYLING
=============================== */
/* gp, mailchimp and ninja forms button styling */
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
padding: 14px 20px;
margin-top: 10px;
border-radius: 0px;
transition: all 0.6s ease 0s;
}
/* ===============================
MAILCHIMP AND NINJA FORMS
=============================== */
/* mailchimp and ninja forms input styling */
input[type="text"], input[type="email"], textarea {
border: 4px solid;
border-color: #e2e2e2;
background-color: #ffffff;
padding: 16px;
}
/* ninja forms hide required message and asterisk */
.nf-form-fields-required, .ninja-forms-req-symbol {
display: none;
}
/* mailchimp form width */
.mc4wp-form input[type=submit], .mc4wp-form-fields input[type="email"] {
text-align: center;
width: 100%;
}
/* ===============================
WP FEATHERLIGHT
=============================== */
/* wp featherlight responsive columns */
.gallery .gallery-item,
.gallery-columns-2 .gallery-item:nth-child(2n+1),
.gallery-columns-3 .gallery-item:nth-child(3n+1),
.gallery-columns-4 .gallery-item:nth-child(4n+1) {
clear: none;
}
/* wp featherlight tablet columns */
@media (max-width: 768px) {
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item {
max-width: 50%;
}
}
/* wp featherlight mobile columns */
@media only screen and (max-width: 480px) {
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item {
max-width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment