style.css

/**
Theme Name: Het Groene Doel
Theme URI: https://github.com/ejoweb/hetgroenedoel/
Author: Erik Joling
Author URI: https://www.ejoweb.nl/
Description: WordPress blokkenthema voor Het Groene Doel Zwolle
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.4
Version: 0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hgd
*/

/**
 * Common variables
 * 
 * var(--wp--style--root--padding-top);
 * var(--wp--style--root--padding-bottom);
 * var(--wp--style--root--padding-right);
 * var(--wp--style--root--padding-left);
 * 
 * var(--wp--preset--spacing--50)
 * 
 * var(--wp--custom--border-radius--medium)
 * var(--wp--custom--border-radius--large)
 * 
 * var(--wp--preset--color--primary)
 * var(--wp--preset--color--secondary)
 */



/* -------------------------------- GENERAL -------------------------------- */

/*
 * Smooth scroll when `to top`-link is clicked
 */
html {
    scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {

}

/* Remove default padding from heading */
h1.has-background, 
h2.has-background, 
h3.has-background, 
h4.has-background, 
h5.has-background, 
h6.has-background {
    padding: 0;
    box-sizing: border-box;
}

/* Cover block */
.wp-block-cover {
/*    overflow: hidden;
    padding: var(--wp--style--root--padding-top)
             var(--wp--style--root--padding-left);*/
}

.wp-block-cover h1 {
    margin: 0;
}

/* -------------------------------- CONTEXT -------------------------------- */

/** 
 * Site container 
 */

.wp-site-blocks {
	padding-top: 0;
    padding-bottom: 0;
    /*display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;*/
}

.wp-site-blocks > * + * {
    margin-block-start: 0;
}

/**
 * Site header 
 */

header {
    position: relative;
    overflow: hidden;
}

/* Header bottom size */
header > .wp-block-group {
    padding-bottom: calc(var(--wp--preset--spacing--50) * 4);
}

/* Header top bar */
header #top-bar {
    position: absolute;
    z-index: 999;
    width: 100%;
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
}

header #top-bar:before {
    position: absolute;
    z-index: -1;
    content: '';
    display: inline-block;
    margin-top: -2240px;
    margin-right: -1080px;
    border-radius: 1200px;
    height: 2400px;
    width: 2400px;
/*    background: var(--wp--preset--color--secondary);*/
}


/* Logo */
header .wp-block-site-logo {
    position: relative;
    z-index: 99;
}

header .wp-block-site-logo:before {
    position: absolute;
    z-index: -1;
    content: '';
    display: inline-block;
    margin-top: -1100px;
    margin-left: -890px;
    border-radius: 999px;
    height: 1200px;
    width: 1200px;
    background: var(--wp--preset--color--tertiary);
}

header .wp-block-site-logo img {
    border-radius: 0;
}




/**
 * Site main 
 */

main {
    position: relative;
}

/* Overlap banner with header */
main .wp-block-cover.alignwide:first-child  {
    margin-block-start: calc(var(--wp--preset--spacing--50) * -4);
}

main > .entry-content.alignfull {
    margin-left: 0;
    margin-right: 0;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    color: var(--wp--preset--color--primary);
}


/**
 * Site footer 
 */

footer {
    overflow: hidden;
    position: relative;
}

footer > .wp-block-group.has-primary-background-color {
}

footer > .wp-block-group.has-primary-background-color:before {
    position: absolute;
    z-index: 0;
    content: '';
    display: inline-block;
    bottom: -2000px;
    right: -1240px;
    border-radius: 1200px;
    height: 2400px;
    width: 2400px;
    background: var(--wp--preset--color--tertiary);
}

footer > .wp-block-group.has-primary-background-color > * {
    position: relative;
}



/* ------------------------------ BREAKPOINTS ------------------------------- */

/* Breakpoint for tiny screens */
@media screen and (max-width: 480px) {

    body {
/*        --wp--style--root--padding-top: 1.5rem;
        --wp--style--root--padding-bottom: 1.5rem;
        --wp--style--root--padding-left: 1.5rem;
        --wp--style--root--padding-right: 1.5rem;*/
    }
}

/* Breakpoint for  */
@media screen and (min-width: 600px) {
       
    /* Logo */
    header .wp-block-site-logo {

    }

    

}

/* Breakpoint for  */
@media screen and (min-width: 960px) {

}

/* ------------------------------- TEMPLATES -------------------------------- */


/* -------------------------------- CUSTOM ---------------------------------- */

/* Image-button */
.image-button-2 { position: relative; }
.image-button-2 > .wp-block-image img {
    aspect-ratio: 21/9 !important;
}
.image-button-2 > .wp-block-buttons { 
    position: absolute;
    right: 0;
    bottom: 0;
}

/* Gallery overlap */
.wp-block-gallery--overlap {

}

.wp-block-gallery--overlap > figure + figure {
    margin-left: calc( var(--wp--style--block-gap) * -4 ) !important;
    opacity: 0.8;
}