css GeneratePress Wordsmith Site CSS

Posted 2021-05-13

/* ===============================
	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%;
	}
}