css GeneratePress的自定义CSS

Posted 2021-05-13

<pre><code>
CSS
</code></pre>

/////* GeneratePress CSS */////

@media (max-width: 768px) {
/* CSS in here for mobile only */
}

@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
}

@media (min-width: 1025px) {
/* CSS in here for desktop only */
}

@media (max-width: 992px) {
	.main-navigation .menu-toggle,
	.main-navigation .mobile-bar-items,
	.sidebar-nav-mobile:not(#sticky-placeholder) {
		display: block;
	}
	
	<p class="page-subtitles">{{custom_field.subtitle}}</p>

.page-subtitles {
	font-size: 22px;
	font-family: 'Roboto Condensed';
	line-height: 1.4;
}
	
/* full height hero minus header */
.page-hero {
min-height: calc(100vh - 200px);
}

	.main-navigation ul,
	.gen-sidebar-nav {
		display: none;
	}

	[class*="nav-float-"] .site-header .inside-header > * {
		float: none;
		clear: both;
	}
}

/////

/* define svg  logo height */
.header-image {
height: 60px;
   }
   
   /* Hero */
.generate-content-header {
    background-position: center bottom;
}

/* offset header for full height image */
.fl-row-full-height .fl-row-content-wrap {
    min-height: calc(100vh - 282px);
}

/* page header background bottom align */

.generate-content-header {
background-position: center bottom;
}

/* border around entire site */
@media (min-width: 768px) {
body {
border: 14px solid #fff;
}
}

/* center menu items on mobile */
.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
text-align: center;
}

/* add letter spacing to menu */
.main-navigation a, .menu-toggle {
letter-spacing: 0.5px;
}

/* navigation top and bottom rules */
#site-navigation {
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
}

/* change dropdown menu width */
.main-navigation ul ul {
width: 240px;
}

/* dropdown menu fit to text */
.main-navigation ul ul {
    width: auto;
    white-space: nowrap;
}

/* header rules */
hr.left-rule {
width: 100px;
height: 2px;
background-color:#644E5B;
margin: 5px 0px 30px 0px;
}


<div class="hide-on-mobile">
content
</div>

/* center footer widgets */
.inside-footer-widgets {
    text-align: center;
}

/* add a shadow behind text or images */
.text-shadow {
text-shadow: 1px 1px 2px rgba(20, 20, 20, 0.9);
}

/* topbar ghost button */
<p class="topbar-text">Call To Action<a class="button ghost" href="#">Button Text</a></p>

.topbar-text {
font-size: 18px;
color: #ffffff;
letter-spacing: 2px;
margin: 5px 10px 5px 10px;
}

/* solid button styling */
.button.solid {
    background-color: #C96567; 
    color: #ffffff; 
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
}

.button.solid:hover {
    background-color: #9E5A63;
    color: #ffffff; 
}

/* ghost button styling */

.button.ghost,
.button.ghost:visited, 
.button.ghost:focus  {
    color: #C96567;
    background: transparent;
    border: 3px solid #C96567;
	  padding: 10px 20px;
    border-radius: 0px;
}

.button.ghost:hover,
.button.ghost:active {
    color: #9E5A63;
    background: transparent;
    border: 3px solid #9E5A63;
}

<a class="button ghost" href="URL">Button Text</a>

/* inset hover effect */
box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.5);


/* blockquote styling */
blockquote {
max-width: 700px;
text-align: left;
margin: 30px;
padding: 20px;
font-size: 20px;
color: #c96567;
}

/* header phone number */
.phone-header {
font-size:14px;
letter-spacing: 1px;
margin: 5px 25px 5px 20px;
color: #C96567;

}
/* phone fa icon */
.fa-mobile {
	padding-right: 6px;
	font-size: 20px;
}

/* GeneratePress widget layout tweaks & alignments for 3 columns */
@media (min-width:1025px) {
  .footer-widgets .footer-widget-1 {
    text-align: left;
    width: 25%;
  }
  .footer-widgets .footer-widget-2 {
    text-align: left;
    width: 40%;
  }
  .footer-widgets .footer-widget-3 {
    text-align: right;
    width: 35%;
  }
}
@media (min-width:768px) AND (max-width:1024px) {
  .footer-widgets .footer-widget-1,
  .footer-widgets .footer-widget-2,
  .footer-widgets .footer-widget-3 {
    clear: none !important;
    float: left;
    width: 33.3333%;
  }
}
@media (max-width:768px) {
  .footer-widgets .widget {
    float: none;
    margin: 0 auto;
    max-width: 400px;
    padding: 60px 20px 0 20px;
    text-align: center;
  }
}

.main-navigation .main-nav ul ul li a {
    font-size: 14px;
}
.main-navigation .main-nav ul ul ul li a {
    font-size: 12px;
}

/* background color box links */
.home-links {
	font-size: 22px;
	background: #f7f7f7;
	line-height: 1.5;
	text-align: center;
	font-weight: 400;
	padding: 50px;
		transition: all 0.6s ease 0s;
	display: block;
	margin-bottom: 5px;
}

.home-links:hover {
	background: rgba(250,250,250,0.5);
	color: #888888;
	transition: all 0.6s ease 0s;
}

.inside-grid-column {
    padding: 0 15px;
	margin-bottom: 0px;
}