body,
html {
margin: 0;
padding: 0;
font-optical-sizing: auto;
scroll-behavior: smooth;
scroll-padding-top: 2em;
background: #ffffff;
}
body {
position: relative;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 12 6 6;
text-wrap: balance;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
img {
max-width: 100%;
height:auto;
} main {
padding-top: 2rem;
&>* {
margin-inline: max(calc((100vw - var(--wp--style--global--content-size)) / 2), 2em);
}
&>h2 {
margin-left: max(calc((100vw - var(--wp--style--global--content-size)) / 2), 50px);
}
&>.alignwide {
margin-inline: max(calc((100vw - var(--wp--style--global--wide-size)) / 2), 2em);
}
&>.alignfull {
margin-inline: 0;
}
&>.aligncenter {
margin-inline: auto;
}
}
header {
position: sticky;
top: 0;
display: grid;
grid-template-columns: auto 1.5rem;
gap: 1em;
padding: 2em max(calc((100vw - var(--wp--style--global--content-size)) / 2), 2em);
background: #ffffff;
z-index: 999;
align-items: center;
&>div>img {
height: auto;
width: 200px;
}
& .main-menu-container {
display: none;
& a {
display: inline-block;
padding-bottom: .4em;
text-decoration: none;
line-height: 1em;
}
& ul {
list-style-type: none;
margin: 0;
padding: 0;
}
}
& form {
display: grid;
grid-template-columns: 4fr 1fr;
gap: 0.5em;
&:hover {
input[type=text] {
border-bottom: 2px solid black;
}
}
& input[type=text] {
border: 0;
padding: 0.5em;
border-bottom: 2px solid white;
&:focus-visible {
border: 0;
}
}
}
& #search {
display: block;
width: 1.5rem;
height: 1.5rem;
background: url(//wbderuimte.nl/wp-content/themes/wbderuimte2024/images/search.svg) no-repeat;
background-size: contain;
color: transparent;
transition: opacity .15s;
border: 0;
cursor: pointer;
}
& #openmenu {
display: block;
width: 2rem;
height: 2rem;
background: url(//wbderuimte.nl/wp-content/themes/wbderuimte2024/images/menu.svg) no-repeat;
background-size: contain;
color: transparent;
transition: transform .15s;
}
& .search-desktop {
display: none;
}
}
form{
&#searchform {
border-bottom: 1px solid var(--wp--preset--color--black);
padding-bottom:2rem;
display: flex;
}
& input, select, button{
font-family: var(--wp--preset--font-family--lynstoneweb);
font-size: var(--wp--preset--font-size--default);
border: 2px solid var(--wp--preset--color--black);
padding: .5rem 1rem;
}
& input[type="submit"]{
padding-inline: 2rem;
background: var(--wp--preset--color--black);
color: var(--wp--preset--color--white);
cursor: pointer;
}
}
#pagination {
margin-top: 2em;
& .page-numbers {
border: 2px solid black;
padding: 0.25em 0.5em;
text-decoration: none;
&.current {
color: white;
background: black;
}
&.dots{
border: 0;
padding-inline: 0;
}
}
}
body.open-mobile-menu {
height: 100dvh;
overflow: hidden; header .main-menu-container {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100dvh;
width: 100dvw;
padding-bottom: 80px;
margin-top: calc(clamp(50px, 10vw, 170px) + 1.5rem);
background: #ffffff;
overflow: auto;
&>ul>li {
padding: 2em 2em 0 2em;
&>a {
font-weight: 600;
}
& ul {
padding-left: 1em;
}
}
}
header #search {
opacity: 0;
}
header #openmenu {
transform: rotate(90deg) translateY(0);
}
}
footer {
margin-top: 2em;
padding-top: 2em;
padding-bottom: 2em;
background-color: var(--wp--preset--color--blauw);
color: var(--wp--preset--color--wit);
& a {
color: var(--wp--preset--color--wit) !important;
text-decoration: none;
}
&>div {
display: grid;
grid-template-columns: 1fr 1fr;
;
&>* {
margin-inline: max(calc((100vw - var(--wp--style--global--content-size)) / 2), 2em);
}
}