html {
scroll-behavior: smooth;
}
/* Make sure that full width blocks are full width, reset the browser margins. */
body {
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
/* Elements */
img {
max-width: 100%;
height: auto;
}
textarea {
clear: both;
display: block;
width: 100%;
}
pre {
white-space: pre-wrap;
}
.wp-site-blocks a {
text-underline-offset: 2px;
}
/* Adjust when the menu button is shown */
@media (max-width: 1000px) {
.wp-site-blocks .site-header .wp-block-navigation__responsive-container {
display: none;
}
.wp-site-blocks .site-header .wp-block-navigation__responsive-container.is-menu-open,
.wp-site-blocks .site-header .wp-block-navigation__responsive-container-open {
display: flex;
}
}
/* Expand the last column in the header to full width on small screens */
@media (min-width: 400px) and (max-width: 781px) {
.wp-site-blocks .site-header .wp-block-column:not(:only-child) {
flex-grow: 1;
}
}
/* Add padding to the menu button */
.wp-site-blocks .site-header .wp-block-navigation__responsive-container-open {
font-size: var(--wp--preset--font-size--normal);
padding: 1rem 2.375em;
}
/* Center the menu button and site title on small screens*/
@media (max-width: 599px) {
.wp-site-blocks .site-header .items-justified-right .wp-block-navigation__responsive-container-open {
margin-left: auto;
margin-right: auto;
}
.wp-site-blocks .site-header .wp-block-site-title {
padding-right: 2.375em; /* The left side already has inline styling */
text-align: center;
font-size: var(--wp--preset--font-size--medium) !important;
}
}
/*
* Site logo can not be centered on the front without this.
* Confirmed that this is still a problem July 2 2021.
* Related issue: https://github.com/WordPress/gutenberg/issues/30406
*/
.wp-block-site-logo.aligncenter {
margin-left: auto;
margin-right: auto;
display: table;
}
/* Comments */
.commentlist,
.children {
list-style: none;
}
.comment-meta .says,
.home .comment-area {
display: none; /* Hide single page comment area on the home page */
}
/* Prevent long titles from overflowing */
.wp-site-blocks h2.wp-block-post-title {
-ms-word-wrap: break-word;
word-wrap: break-word;
}
/* Override the display: inline-block that is set by the the block editor, as it is
causing long titles with links to overflow. */
.wp-site-blocks h2.wp-block-post-title a {
display: initial;
}
/* Sticky header */
.is-style-blockstrap-sticky-header {
position: sticky;
top: 0;
z-index: 1030;
}
/* Move the position down to adjust for the WordPress admin bar */
.admin-bar .is-style-blockstrap-sticky-header {
top: 32px;
}
/* Revert the sticky position on smaller screens */
@media screen and (max-width: 782px) {
.is-style-blockstrap-sticky-header {
position: initial;
}
}
/* Sidebars */
.blockstrap-sidebar-right,
.blockstrap-sidebar-left {
height: 100%;
}
@media (min-width: 782px) {
.blockstrap-has-sidebar-right .wp-block-column:not(:first-child),
.blockstrap-has-sidebar-left .wp-block-column:not(:first-child) {
margin-left: 0;
position: sticky;
}
}
@media ( min-width: 600px ) {
.blockstrap-sidebar-right,
.blockstrap-sidebar-left {
position: sticky;
border-left: 1px solid var(--wp--preset--color--white);
}
.blockstrap-sidebar-left {
position: sticky;
border-right: 1px solid var(--wp--preset--color--white);
}
}
/* Disable https://github.com/WordPress/gutenberg/pull/27995 until
* https://github.com/WordPress/gutenberg/pull/26809.
*/
p:empty:before {
content: none !important;
}
/* Reduce the size of extra large text on small screens. */
@media ( max-width: 600px ) {
body {
--wp--preset--font-size--extra-large: 2rem;
}
}
/*
* Increase padding on smaller screens.
* Temporary solution to avoid text content running up to the edge of the browser window,
* making the text difficult to read.
*/
@media ( max-width: 840px ) {
main > :not(.alignfull),
main .entry-content > :not(.alignfull),
main .entry-content .wp-block-columns.alignfull p {
padding-left: 16px;
padding-right: 16px;
}
}
@media ( max-width: 1200px ) {
.post-template-post-sidebar-right main,
.post-template-post-sidebar-left main,
.page-template-post-sidebar-right main,
.page-template-post-sidebar-left main {
padding: 8px;
}
}
/* skip links */
.bs-skip-links {
z-index: 10000;
left: 50%;
transform: translate(-50%, -150%);
transition: transform 0.3s;
}
.bs-skip-links:focus-within {
transform: translate(-50%, 0%);
}
// temp display class till included in AUI @todo
.d-contents { display: contents;}