style.scss

/*!
  Theme Name: ehbo vereniging Berkenwoude
  Author: R.O.B. Monhemius
  Description: Dit is een template voor ehbo vereniging Berkenwoude.
  Version: 1.3.0
  License: Exclusive Licence for 'EHBO Vereniging Berkenwoude'
*/

// CSS VARIABLES

// breakpoints
$nav-breakpoint: 500px;

// Colors
$color-1: #134E8B;
$color-2: rgb(255, 245, 230);
$color-3: #F3FAFA;

$box-shadow-1: 4px 5px 3px rgba(0,0,0,0.5);
$box-shadow-2: 0px 3px 3px rgba(0,0,0,0.5);
$box-shadow-3: 0px 10px 10px rgba(0,0,0,0.5);

$font-1: 'Montserrat', sans-serif;
// Margins
$block-margin: 1rem;

$container-max-width: 960px;
$max-text-width: 700px;


// GENERAL CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.1;
	font-family: $font-1;
  font-size: 16px;
	color: $color-1;
  background: linear-gradient( rgba($color-2, 0.97), rgba($color-2, 0.97) ), url( ./images/background-image.png );
  background-attachment: fixed;
}
// paragraph
p{
  margin-bottom: $block-margin;
	line-height: 1.5;
	text-align: justify;
}
em{
	font-style: italic;
}
// lists
ol, ul {
	list-style: none;
	line-height: 1.5;
	text-align: justify;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	width: 100%;
	border: 2px solid $color-1;
	margin-bottom: 1rem;
	border-collapse: collapse;
	border-spacing: 0;
	box-shadow: $box-shadow-1;
	thead{
		>tr{
			background-color: $color-1;
			color: $color-2;
			>th{
				padding: 5px;
				font-weight: bold;
			}
		}
	}
	tbody>tr{
		height: 1rem;
		background-color: white;
		>td{
			padding: 5px;
		}
	}
	tbody>tr:nth-child(odd){
		background-color: $color-3;
	}
}


// GUTENBERG STYLING: COMMON BLOCKS
// figcaption
figcaption{
  font-style: italic;
  margin-bottom: $block-margin;
}
// ul
ul{
  list-style: disc;
  padding-left: 24px;
  margin-bottom: $block-margin;
}
// blockquote
blockquote.wp-block-quote{
	display: block;
	margin-bottom: $block-margin;
	padding: 0.6rem 0.5rem 0.1rem 0.6rem;
	border-left: 3px dashed rgba(256,256,256,0.3);
	background-color: rgba(256,256,256,0.1);
	font-style: italic;
}
// heading
h1{
	margin: 0 0 $block-margin 0;
	text-transform: uppercase;
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
}
h2{
  margin: 2rem 0 $block-margin 0;
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
}
h3{
  font-size: 1.6rem;
  margin: 2rem 0 $block-margin 0;
	text-align: center;
}
h4{
  font-size: 1.4rem;
  margin: 2rem 0 $block-margin 0;
	text-align: center;
}
h5{
  font-size: 1.2rem;
  margin: 2rem 0 $block-margin 0;
	text-align: center;
}
h6{
  font-size: 1.0rem;
  margin: 2rem 0 $block-margin 0;
	text-align: center;
}

// image
.wp-block-image{
  margin-bottom: $block-margin;
}
.wp-block-image img{
  height: auto;
  margin-bottom: $block-margin;
}
.wp-block-image figcaption{
	margin-top: 0px;
  margin-bottom: $block-margin;
}

// cover image
.wp-block-cover{
  margin-bottom: $block-margin;
}
// image gallery
.wp-block-gallery .blocks-gallery-item{
  margin: 0px;
}
// video
.wp-block-video{
  margin-bottom: $block-margin;
}
// audio
.wp-block-audio figcaption{
  margin-bottom: $block-margin;
}
// files
.wp-block-file{
	display: flex;
	align-items: center;
  margin-bottom: $block-margin;
}
.wp-block-file>a{
	flex: 1 1 auto;
	padding-right: 10px;
}
.wp-block-file>a.wp-block-file__button{
	flex: 0 0 auto;
	margin-left: 0px;
}

// BODY
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

// HEADER

header{
	position: fixed;
  z-index: 100;
	top: 0px;
	width: 100%;
	height: 50px;
}

@media( max-width: $nav-breakpoint ) {
  header{
		box-shadow: $box-shadow-3;
    background-color: $color-1;
    cursor: pointer;
    i.toggle-icons {
      position: absolute;
      right: 10px;
      top: 10px;
      pointer-events: none;
      color: $color-2;
      font-size: 30px;
    }
    nav {
      position: fixed;
      top: 50px;
      bottom: 0px;
      width: 100%;
      background-image: linear-gradient( rgba($color-1, 0.95 ), rgba( $color-1, 0.95) ), url(./images/help-man.png);
      background-repeat: no-repeat;
      background-position: 120% 110%;
      background-size: auto auto, 250px auto;
      ul {
        height: 100%;
        padding: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        li {
          display: flex;
          flex: 0 1 0;
          a {
            flex: 1 0 0;
            padding: 1rem;
            color: $color-2;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.3rem;
            opacity: 0.8;
            transition: opacity 500ms;
          }
          a:hover {
            opacity: 1;
            transition: opacity 500ms;
          }
        }
        li.current-menu-item>a {
          opacity: 1;
        }
        li.current-menu-item>a:hover {
          text-decoration: none;
          cursor: default;
        }
      }
    }
  }
  header.closed {
    transition: height 500ms;
    nav {
      right: -100vw;
      transition: right 500ms;
    }
  }
  header.opened {
    height: 100vh;
    transition: height 500ms;
    nav {
      right: 0px;
      transition: right 500ms;
    }
  }
}
@media( min-width: calc( $nav-breakpoint + 1px ) ) {
  header{
		box-shadow: $box-shadow-3;
    background-color: $color-1;
    i.toggle-icons {
      display: none;
      pointer-events: none;
    }
    nav{
      height: 100%;
      max-width: $container-max-width;
      margin: auto;
      ul{
        height: 100%;
        padding: 0px;
        display: flex;
        justify-content: space-around;
        li {
          display: block;
          height: 100%;
					flex: 1 0 0;
          a {
            display: flex;
            height: 100%;
            padding: 0px 5px;
            align-items: center;
            justify-content: center;
            color: $color-2;
            text-decoration: none;
            text-align: center;
            font-weight: bold;
            font-size: 1.2rem;
            opacity: 0.7;
          }
          a:hover {
            opacity: 1;
            transition: opacity 500ms;
          }
        }
        li.current-menu-item>a {
          opacity: 1;
        }
        li.current-menu-item>a:hover {
          text-decoration: none;
          cursor: default;
        }
      }
    }
  }
}

// MAIN ( details in subsections like homepage )
main{
  flex: 1 0 auto;
  box-sizing: border-box;
  width: 100%;
  margin-top: 50px;
  align-self: center;
}

section {
	padding: 4rem 1rem;
}

// FOOTER
footer {
  flex: 0 0 auto;
  box-sizing: border-box;
  background-color: $color-1;
  color: $color-2;
  div.container {
    max-width: $container-max-width;
    padding: 10px;
    margin: auto;
    display: flex;
    flex-direction: column;
    letter-spacing: 0.05em;
    .contact-info {
      text-align: center;
      font-size: 8px;
      margin-bottom: 20px;
      a{
        color: $color-2;
      }
    }
    .disclaimer {
      text-align: center;
      font-size: 8px;
      margin: 0px;
    }
  }
}

// HOMEPAGE
body.home>main {
  p {
    text-align: center;
  }
  section.featured-items {
    background: $color-2;
    border-top: 5px solid $color-1;
    border-bottom: 5px solid $color-1;
    box-shadow: $box-shadow-2;
  }

	// MODULE ASSOCIATIONS
	.associations {
	  display: flex;
	  justify-content: center;
	  flex-wrap: wrap-reverse;
    column-gap: 10px;
	  a{
      position: relative;
			box-shadow: inset -10px -10px 10px #134e8b88;
	    height: 100px;
	    width: 100px;
	    padding: 25px;
	    margin: 0px;
	    border-radius: 50%;
	    background-color: white;
	    text-align: center;
      &:after {
        content: '';
        position: absolute;
        bottom: -4%;
        left: 25%;
        width: 90%;
        height: 30%;
        border-radius: 50%;
        z-index: -1;
        background: rgba(0,0,0,0.5);
        box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
      }
	    img {
	      height: 100px;
	    }
	  }
	}
}

// SINGLE
body.single>main>article{
	max-width: $max-text-width;
	padding: 2rem 10px;
	margin: auto;
	h1 {
		margin-bottom: 1rem;
		text-transform: uppercase;
	}
}

// MODULE: max-text-width
.max-text-width {
	max-width: $max-text-width;
	margin-left: auto;
	margin-right: auto;
}

// MODULE: max-container-width
section.max-container-width {
	max-width: $container-max-width;
	margin: auto;
}

// MODULE: SECTION HEADER
.section-header {
	margin-bottom: 1rem;
	text-transform: uppercase;
}


// MODULE FEATURED ITEMS
ul.featured-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0px;
	margin: auto;
}

// MODULE: CARD
.card{
	display: flex;
	width: 250px;
	border-top: 5px solid $color-1;
	border-bottom: 5px solid $color-1;
	box-shadow: $box-shadow-1;
	margin: 20px 10px;
	a {
		flex: 1;
		text-decoration: none;
		display:  grid;
		grid-template-rows: 250px 1fr;
		h2.title{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px;
			border-top: 5px solid $color-1;
			margin: 0px;
			background-color: white;
			font-size: 16px;
			font-weight: bold;
			color: $color-1;
		}
	}
}

// FEATURE: CENTER
.centered {
	text-align: center;
}

//Contact form 7 form with class .main-form
.wp-block-contact-form-7-contact-form-selector.main-form form {
  background: linear-gradient( 45deg, $color-1, lighten( $color-1, 10% ) );
  border-radius: 1rem;
  margin: 1rem;
  padding: 1rem;
  color: $color-2;
  label {
    font-size: 1rem;
  }
  input, textarea {
    font-size: 1rem;
    box-sizing: border-box;
    border-radius: 0.25rem;
    padding: 0.25rem;
    width: 100%;
    font-family: $font-1;
  }
  input[type="submit"] {
    display: block;
    border-radius: 100px;
    width: 200px;
    color: $color-1;
    font-weight: bold;
  }
}

@media( min-width: calc( $nav-breakpoint + 1px ) ) { 
  .wp-block-contact-form-7-contact-form-selector.main-form form { 
    input[type="submit"] {
      float: right;
    }
  }
}

@media( max-width: $nav-breakpoint ) { 
  .wp-block-contact-form-7-contact-form-selector.main-form form { 
    input[type="submit"] {
      margin: auto;
    }
  }
}