10  Aangepaste CSS

Dit is de css die gebruikt wordt voor het standaard format GMJV. Zie het bestand custom.css.

/*Open Sans importeren */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
/*TODO input ontwerper mbt lettertypen & kleuren verwerken*/

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
}

/* Bijvoorbeeld: De div's voorblad_gemeentenaam en voorblad_datum zitten IN de div voorblad_achtergrond CSS bij de elementen IN de overkoepelende
div bepaald de positie van die elementen relatief aan het het grotere plaatje. Positie kan aangepast worden dmv "top" & "left".
*/

  .voorblad_achtergrond {
    position: relative;  
  }

  .voorblad_resultaten{
    position: absolute;
    top: 52%;
    left: 20%;
    z-index: 10;
    font-size: 42px;
    font-weight: 800;
    color: #012C17;
  }
  
  .voorblad_campagne{
    position: absolute;
    top: 72%;
    left: 5%;
    z-index: 10;
    font-size: 28px;
    font-weight: bold;
    color: #012C17;
  }
  
  .voorblad_monitor{
    position: absolute;
    top: 78%;
    left: 5%;
    z-index: 10;
    font-size: 28px;
    font-weight: bold;
    color: #007E48;
  }
  
  .voorblad_gemeentenaam{
    position: absolute;
    top: 90%;
    left: 5%;
    z-index: 10;
    font-size: 23px;
    font-weight: bold;
    color: #012C17;
  }
  
  .voorblad_datum{
    position: absolute;
    top: 90%;
    left: 70%;
    z-index: 10;
    font-size: 23px;
    font-weight: bold;
    color: #012C17;
  }
  
  .pagina_header_titel{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 5%;
    left: 2%;
    z-index: 10;
    font-size: 24px;
    color: white;
  }
  
/*H1 eigenschappen*/
  h1 {
    page-break-before: always; /* Iedere H1 maakt een pagebreak. relevant voor pdf uitdraai */
    font-size: 32px;
    color: white;
    background-color: #007E48;
    padding: 15px;
  }
  
/*css om het mogelijk te maken icoontjes aan headers toe te voegen*/
  .h1-icoon h1 {
    /* om te zorgen dat er plaatje met relatieve positie overheen geprojecteerd kan worden
    position: relative;
    /* moet ook een offest vanaf links zijn zodat de plaatjes ruimte krijgen*/
    position: relative;
    text-indent: 80px;
  }
  
/*Plaatsing van header icons*/
  h1 > .img-fluid, h1 > svg {
    width: 10%;
    position: absolute;
    top: -13%;
    left: -5%;
    z-index: 10;
  }
  
/*Plaatje niet laten zien in table of contents*/
  #TOC .img-fluid {
    display: none; 
  }
  
/* Layout inhoudsopgave titel aanpassen*/
  #toc-title {
    color: #007E48;
    font-size: 23px;
    font-weight: bold;
  }
  
/* Layout inhoudsopgave aanpassen*/
  .sidebar {
    color: #012C17;
    font-size: 14px;
  }
  
/*Lijntje dat tussen tekstblokken geplaatst kan worden*/
  .tussenlijn {
    border-bottom: 1px solid #86B443;
  }

/* achtergrondkleur class voor tekstvelden*/
  .achtergrondkleur {
    background-color: #F7F7DB;
    color: #012C17;
    padding: 20px;
  }

/* class voor titels*/
  .titel {
    color: #002c17;
    font-size: 21px;
    font-weight: bold;
  }
  
/* class voor inleiding*/
  .inleiding {
    color: #002c17;
    font-size: 19px;
    font-weight: bold;
  }