style.css

/*
Theme Name: SB
Theme URI: https://seriouslybonkers.com
Author: Herb Miller
Description: Second Byte: Seriously Bonker's experimental Full Site Editing theme
Requires at least: 5.7
Tested up to: 6.4.3
Requires PHP: 5.6
Version: 0.5.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sb

SB WordPress Theme, (C) Bobbing Wide 2021-2024
SB is distributed under the terms of the GNU GPL.

Some of the styling comes from the original theme - Genesis-SB - Specially Built.
See also theme.json, which started as pretty empty and has
been updated by copying and cobbling values from Fizzie and other experimental FSE themes.

The CSS in this file is basically anything that's needed to style the site for the following reasons:

1. It's not something that can be done in theme.json
2. It's not something that can be done customizing the blocks
3. It might be possible by 1. or 2. but I can't find out how to do it.
4. It could be unnecessary CSS that hasn't yet been identified as unnecessary.

*/


body {
    background-color: #ffffff;
    color: #1A1A2A;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.625;
    margin: 0 0 0 0px;
}

* {
    box-sizing: border-box;
}

header {
    max-width: 1200px;
    margin: 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 10px;
    font-family: Lato, sans-serif;
}
a {
    color: var( --wp--preset--color--link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1.wp-block-site-title {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 6px;
}

h1.wp-block-site-title a {
    color: var(--wp--preset-color-foreground);
}

p.wp-block-site-tagline {
    font-size: 16px;
    margin: 0;
}

header .wp-block-column:not(:first-child) {
    margin-left: 0em;
}

input,
select,
textarea {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #1A1A2A;
    font-size: 18px;
    font-weight: 300;
    padding: 16px;
    width: 100%;
}

.wp-block-search .wp-block-search__inside-wrapper {
    padding-top: 5px;
}


/* # Site Navigation
---------------------------------------------------------------------------------------------------- */

nav.mainmenu {
    margin-bottom: 20px
}
/*

*/
nav nav.wp-block-navigation__container a:hover,
nav nav.wp-block-navigation__container .current-menu-item > a,
nav nav.wp-block-navigation__container .sub-menu .current-menu-item > a:hover {
    color: #ffffff;
}

nav nav .wp-block-navigation__container .wp-block-navigation-link__label {
    font-size: 16px;

}

nav nav .wp-block-navigation-link__container .wp-block-navigation-link__label {
    font-size: 14px;
    color: #333;
}

nav nav .wp-block-navigation__container a {
    background: #328DBD;
    background: linear-gradient(top, rgba(102, 175, 214, 0.6) 0, rgba(54, 150, 201, 0.6) 40%, rgba(34, 96, 129, 0.6) 100%) no-repeat;
    background: -webkit-linear-gradient(top, rgba(102, 175, 214, 0.6) 0, rgba(54, 150, 201, 0.6) 40%, rgba(34, 96, 129, 0.6) 100%) no-repeat;
    background: -moz-linear-gradient(top, rgba(102, 175, 214, 0.6) 0, rgba(54, 150, 201, 0.6) 40%, rgba(34, 96, 129, 0.6) 100%) no-repeat;
    background: -o-linear-gradient(top, rgba(102, 175, 214, 0.6) 0, rgba(54, 150, 201, 0.6) 40%, rgba(34, 96, 129, 0.6) 100%) no-repeat;
    background: -ms-linear-gradient(top, rgba(102, 175, 214, 0.6) 0, rgba(54, 150, 201, 0.6) 40%, rgba(34, 96, 129, 0.6) 100%) no-repeat;
    background: linear-gradient(top, rgba(102, 175, 214, 0.6) 0, rgba(54, 150, 201, 0.6) 40%, rgba(34, 96, 129, 0.6) 100%) no-repeat;
    -svg-background: linear-gradient(top, rgba(102, 175, 214, 0.6) 0, rgba(54, 150, 201, 0.6) 40%, rgba(34, 96, 129, 0.6) 100%) no-repeat;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid rgba(26, 72, 97, 0.6);
    padding: 0 22px;
    margin: 0 auto;
    /* color: #163F55; */
    position: relative;
    /* display: block; */
    min-height: 28px;
    cursor: pointer;
    text-decoration: none;
    /* color: #31454E; */
    line-height: 28px;
    text-align: center;

}


.wp-block-navigation__submenu-container {
    left: -9999px;
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition:    opacity .4s ease-in-out;
    -ms-transition:     opacity .4s ease-in-out;
    -o-transition:      opacity .4s ease-in-out;
    transition:         opacity .4s ease-in-out;
    width: 200px;
    z-index: 99;
    display: block;

    font-size: 16px;
}

.wp-block-navigation__container .sub-menu a {
    background-color: #fff;
    border: 1px solid #eee;
    border-top: none;
    font-size: 14px;

    position: relative;

    overflow: hidden;
    width: 200px;
}

.wp-block-navigation__container .sub-menu .sub-menu {
    margin: -55px 0 0 199px;
}

.wp-block-navigation__container .menu-item:hover {
    position: static;
}

.wp-block-navigation__container .menu-item:hover > .sub-menu {
    left: auto;
    opacity: 1;
}

.wp-block-navigation__container > .first > a {
    padding-left: 0;
}

.wp-block-navigation__container > .last > a {
    padding-right: 0;
}

.wp-block-navigation__container > .right {
    color: #fff;
    float: right;
    list-style-type: none;
    padding: 30px 0;
}

.wp-block-navigation__container > .right > a {
    display: inline;
    padding: 0;
}

.wp-block-navigation__container > .rss > a {
    margin-left: 48px;
}

.wp-block-navigation__container > .search {
    padding: 10px 0 0;
}

.wp-block-navigation ul li {
    padding-right: 10px;
}

.wp-block-navigation ul li a {
    padding: 0 22px !important;
}

.wp-block-navigation.is-vertical ul li a {
    padding-left: 0px !important;
    color: var( --wp--preset--color--link);
}



.wp-block-navigation ul ul a {
    color: #333;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container
{
    padding-left: 22px;
    padding-right: 22px;
}
/*   .nav-primary */
nav nav.wp-block-navigation a:hover,
nav nav.wp-block-navigation .current-menu-item > a,
nav nav.wp-block-navigation .sub-menu .current-menu-item > a:hover {
    background: #467F95;
    background: linear-gradient(top, #6DA5BA 0, #5293AD 27%, #2E5361 100%) no-repeat;
    background: -webkit-linear-gradient(top, #6DA5BA 0, #5293AD 27%, #2E5361 100%) no-repeat;
    background: -moz-linear-gradient(top, #6DA5BA 0, #5293AD 27%, #2E5361 100%) no-repeat;
    background: -o-linear-gradient(top, #6DA5BA 0, #5293AD 27%, #2E5361 100%) no-repeat;
    background: -ms-linear-gradient(top, #6DA5BA 0, #5293AD 27%, #2E5361 100%) no-repeat;
    background: linear-gradient(top, #6DA5BA 0, #5293AD 27%, #2E5361 100%) no-repeat;
    -svg-background: linear-gradient(top, #6DA5BA 0, #5293AD 27%, #2E5361 100%) no-repeat;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #335B6C;
    padding: 0 22px;
    margin: 0 auto;
}

nav nav.wp-block-navigation .has-child>.wp-block-navigation-link__content {
    padding-right: 22px;


}

nav nav.wp-block-navigation .wp-block-navigation-link__content {
    padding-top: 0;
    padding-left: 22px;
    padding-right: 22px;
    padding-bottom: 0px;
    color: #fff;
}

.wp-block-navigation .has-child :where(.submenu-container,.wp-block-navigation-link__container) {
    left: 0em;
    min-width: 215px;
}

.wp-block-navigation:not(.has-background) .submenu-container, .wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link__container {
    border: 0px;
    background: transparent;
    opacity: 1;
}
/* Sidebar styling */
aside {
    font-size: 14px;
    margin: 0;
    margin-left: 40px;
    margin-top: 60px;
}

aside h4 {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 400;
}

aside ul {
    padding-inline-start: 0;
}

aside li {
    list-style-type: none;
}

aside .wp-block-navigation .wp-block-navigation-link__content {
    padding: 0px;
    color: var( --wp--preset--color--link);
}


/* Footer styling */
footer.wp-block-template-part {
    background: #575756 ;
    background: linear-gradient(top, rgba(77, 77, 75, 0.1) 0, rgba(111, 111, 109, 0.18) 90%, rgba(92, 92, 90, 0.07) 90%, rgba(92, 92, 90, 0.07) 100%) no-repeat, url('images/footer.png'), linear-gradient(top, #525251 0, #6A6A68 90%, #5D5D5B 90%, #5D5D5B 100%) no-repeat;
    background: -webkit-linear-gradient(top, rgba(77, 77, 75, 0.1) 0, rgba(111, 111, 109, 0.18) 90%, rgba(92, 92, 90, 0.07) 90%, rgba(92, 92, 90, 0.07) 100%) no-repeat, url('images/footer.png'), -webkit-linear-gradient(top, #525251 0, #6A6A68 90%, #5D5D5B 90%, #5D5D5B 100%) no-repeat;
    background: -moz-linear-gradient(top, rgba(77, 77, 75, 0.1) 0, rgba(111, 111, 109, 0.18) 90%, rgba(92, 92, 90, 0.07) 90%, rgba(92, 92, 90, 0.07) 100%) no-repeat, url('images/footer.png'), -moz-linear-gradient(top, #525251 0, #6A6A68 90%, #5D5D5B 90%, #5D5D5B 100%) no-repeat;
    background: -o-linear-gradient(top, rgba(77, 77, 75, 0.1) 0, rgba(111, 111, 109, 0.18) 90%, rgba(92, 92, 90, 0.07) 90%, rgba(92, 92, 90, 0.07) 100%) no-repeat, url('images/footer.png'), -o-linear-gradient(top, #525251 0, #6A6A68 90%, #5D5D5B 90%, #5D5D5B 100%) no-repeat;
    background: -ms-linear-gradient(top, rgba(77, 77, 75, 0.1) 0, rgba(111, 111, 109, 0.18) 90%, rgba(92, 92, 90, 0.07) 90%, rgba(92, 92, 90, 0.07) 100%) no-repeat, url('images/footer.png'), -ms-linear-gradient(top, #525251 0, #6A6A68 90%, #5D5D5B 90%, #5D5D5B 100%) no-repeat;
    background: linear-gradient(top, rgba(77, 77, 75, 0.1) 0, rgba(111, 111, 109, 0.18) 90%, rgba(92, 92, 90, 0.07) 90%, rgba(92, 92, 90, 0.07) 100%) no-repeat, url('images/footer.png'), linear-gradient(top, #525251 0, #6A6A68 90%, #5D5D5B 90%, #5D5D5B 100%) no-repeat;
    -svg-background: linear-gradient(top, rgba(77, 77, 75, 0.1) 0, rgba(111, 111, 109, 0.18) 90%, rgba(92, 92, 90, 0.07) 90%, rgba(92, 92, 90, 0.07) 100%) no-repeat, url('images/footer.png'), linear-gradient(top, #525251 0, #6A6A68 90%, #5D5D5B 90%, #5D5D5B 100%) no-repeat;
    border-top:1px solid #D2D28E;
    padding: 25px;
    margin:0 auto;
    position: relative;
    color: #FFFFFF;
    font-size: 13px;
    font-family: Tahoma, Arial, Helvetica, Sans-Serif;
    /* text-align: center; */
}

footer.wp-block-template-part {
    color: #e9e9ee;
}

footer.wp-block-template-part a,
footer .wp-block-navigation.is-vertical ul li a {
    color: #e9e9c8;
}


footer.wp-block-template-part input {
    border: 1px solid #333;
}

footer.wp-block-template-part a.button,
footer.wp-block-template-part a:hover {
    color: #fff;
}


/**
 Styling for the main queries on the home page.


.wp-block-query-loop.is-flex-container.is-flex-container.columns-4.sb >li {
        width: 25%;
}

.wp-block-query-loop.is-flex-container li {
    margin-right: 0px;
    margin-bottom: 0px;
}

ul.sb.thumbnail li {
    position: relative;
    padding-bottom: 25%;
    overflow: hidden;

}

ul.sb.thumbnail li h3,
ul.sb.thumbnail li p {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    bottom: 0;
    margin-bottom: 0px;
}
*/

ul.sb.thumbnail li h3 {
    font-weight: 300;
}
/*
ul.sb.thumbnail li:hover h3 {
    z-index: 1;
    background-color: white;
    top: 70%;
}
*/

/**
 * Style the links with padding margin and a border
 */
ul.sb.links li {
display: inline-block;
}

ul.sb.links h4 {
    padding: 0.2em;
    margin: 0.25em;
    border: 1px solid lightgrey;
    font-weight: 300;
}



/**
 Taxonomy terms styling - to make them look like luggage tags with a hole in pointy bit to the left.
 <div class="taxonomy-s-word wp-block-post-terms"><a href="https://s.b/bigram/s-word/seize/" rel="tag">seize</a></div>
 */
.wp-block-post-terms {
    display: inline-block;
}

.wp-block-post-terms a {
    background-color: #767676;
    border-radius: 0 2px 2px 0;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2727272727;
    margin: 2px 4px 2px 10px;
    padding: 3px 7px;
    position: relative;
}

.wp-block-post-terms a:before {
    border-top: 10px solid transparent;
    border-right: 8px solid #767676;
    border-bottom: 10px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
}

.wp-block-post-terms a:after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 4px;
    position: absolute;
    top: 8px;
    left: -2px;
    width: 4px;
}

.entry-footer {
    font-size: 16px;
}

/**
Query pagination
 */
div.wp-block-query-pagination-numbers {
    display: inline-block;
}

a.wp-block-query-pagination-previous,
a.wp-block-query-pagination-next,
.wp-block-query-pagination-numbers a.page-numbers,
.wp-block-query-pagination-numbers span.page-numbers {
    background-color: #333;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 6px 6px;
    display: inline-block;
    font-size: 16px;
}

.wp-block-query-pagination-numbers span.page-numbers.current {
    background-color: #328dbd;
}

.wp-block-query-pagination-numbers span.page-numbers.dots {
    background-color: #fff;
    color: #333;
    padding: 0px;
}

a.wp-block-query-pagination-previous:hover,
a.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-numbers a.page-numbers:hover {
    color: #fff;
    background-color: #328DBD;
}


/**
 Flow the metadates template part onto one line using CSS flex.
  */
.is-style-flexed p,
span.post_modified {
    font-size: var(--wp--preset--font-size--small);
}

.wp-block-post-date,
span.post_modified {
    margin: 0 10px 0 0;
}

div.wp-block-oik-sb-sb-post-edit-block {
    margin: 0 0;
}

.is-style-flexed .wp-block-group {
    display: flex;
    justify-content: flex-start;
}

.is-style-flexed p,
.is-style-griddled p {
    margin: 0 10px 0 0;
}

.wp-block-group.is-style-flexed {
    padding-top: 0px;
    padding-bottom: 0px;
}

@media screen and  (max-width: 782px ) {
    .wp-site-blocks {
        margin: 0px 2%;
    }
}