Download raw (5.7 KB)

/*agenda*/

.agenda .wrapper > h1 {
  display: none;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/*event content*/
.event span {
  display: block;
}

.event a {
  padding-left: 2.1rem;
  position: relative;
}

.event a:hover {
  /*color: var(--jaune);*/
  -webkit-filter: brightness(61%);
          filter: brightness(61%);
}

.event a::before {
  content: '←';
  display: inline-block;
  position: absolute;
  font-family: var(--picto);
  font-size: 32px;
  line-height: 0;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  margin-left: -2rem;
  top: 8px;
}

.event_date {
  font-family: var(--serif);
}

.event_title {
  font-size: 12vw;
  line-height: 1;
  margin: 1.5rem 0 1rem 0;
}

.event_content {
  padding: 0;
}

.event_time {
  margin-top: 1rem;
}

.sidebar .event_content {
  display: none;
}

/*style block*/
.event,
.event.permanent,
.event_content_wrapper {
  position: relative;
}

.event,
.event.permanent {
  display: block;
  margin: 1rem 0 0 1rem;
}

/*block color*/
.events .event:before,
.sidebar .event:before {
  border-bottom: 1rem solid var(--vert);
  border-right: 1rem solid transparent;
}

.events .event:after,
.sidebar .event:after {
  border-right: 1rem solid var(--vert);
}

.events .event.permanent:before,
.sidebar .event.permanent:before {
  border-bottom: 1rem solid var(--gris);
  border-right: 1rem solid transparent;
}

.events .event.permanent:after,
.sidebar .event.permanent:after {
  border-right: 1rem solid var(--gris);
}

/*style inner-wrapper*/
.events .event .event_content_wrapper,
.sidebar .event .event_content_wrapper {
  max-width: 100%;
  height: 100%;
  background: var(--vert);
  padding: 1rem;
  float: none;
}

.events .event.permanent .event_content_wrapper,
.sidebar .event.permanent .event_content_wrapper  {
  background: var(--gris);
  border: none;
}

/*illustrations*/
.agenda .event .event_content_wrapper::after,
.agenda .event .event_content_wrapper::before {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
}

.agenda .event .event_content_wrapper::before {
  display: none;
}

.agenda .event .event_content_wrapper::after {
  position: absolute;
  background-position-x: right;
  bottom: -16px;
  right: -16px;
  /*left: 0;*/
  left: 50%;
  z-index: 10;
}

/*classes de dessins*/
div[class*="corniche"]::before {
  display: block !important;
  background-repeat: no-repeat;
  margin-bottom: 1rem;
  border: 2px solid;
  height: 329px;
}

.corniche_face::before{
  background-image: url(../../images/jerome/plantes+archi/random/corniche-face.svg);
  max-height: 202px;
}

.corniche_profil::before{
  background-image: url(../../images/jerome/plantes+archi/random/corniche-profil.svg);
  background-position: top right;
  max-height: 245px;
}

div[class*="fleur"]::after {
  height: 230px;
}

.fleur_paquerette::after{
  background-image: url(../../images/jerome/plantes+archi/random/fleur-paquerette.svg);
  max-height: 125px;
  right: -80px !important;
}

.fleur_violette::after{
  background-image: url(../../images/jerome/plantes+archi/random/fleur-violette.svg);
  max-height: 125px;
}

div[class*="plante"]::after {
  height: 160px;
}

.plante_blanche1::after{
  background-image: url(../../images/jerome/plantes+archi/random/plante-blanche01.svg);
  height: 250px !important;
}

.plante_blanche2::after{
  background-image: url(../../images/jerome/plantes+archi/random/plante-blanche02.svg);
  height: 250px !important;
  bottom: -9px !important;
  right: -64px !important;
}

.plante_epilobe1::after{
  background-image: url(../../images/jerome/plantes+archi/random/plante-epilobe01.svg);
  max-height: 75px;
}

.plante_epilobe2::after{
  background-image: url(../../images/jerome/plantes+archi/random/plante-epilobe02.svg);
  height: 300px !important;
}

.plante_epilobe3::after{
  background-image: url(../../images/jerome/plantes+archi/random/plante-epilobe03.svg);
  height: 200px !important;
}

.plante_epilobe4::after{
  background-image: url(../../images/jerome/plantes+archi/random/plante-epilobe04.svg);
  height: 250px !important;
  bottom: -4px !important;
  right: 16px !important;
}

.plante_feuille::after {
  background-image: url(../../images/jerome/plantes+archi/random/plante-feuilles.svg);
  height: 300px !important;
  right: -64px !important;
}

.plante_fougere::after {
  background-image: url(../../images/jerome/plantes+archi/random/plante-fougere.svg);
  height: 200px !important;
}

.plante_haute::after{
  background-image: url(../../images/jerome/plantes+archi/random/plante-haute.svg);
  height: 230px !important;
  bottom: 0 !important;
}

.plante_plate::after {
  background-image: url(../../images/jerome/plantes+archi/random/plante-plate.svg);
  -webkit-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
  bottom: -32px !important;
  right: -60px !important;
}

.plante_rouge::after {
  background-image: url(../../images/jerome/plantes+archi/random/plante-rouge.svg);
  height: 250px !important;
  right: -64px !important;
}

@media (min-width: 48rem) {
  .events {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
  }

  .agenda .event.block:after {
    top: 1%;
  }

  .agenda .event.block.permanent:after {
    top: 2%;
  }

  .sidebar .event_date, 
  .sidebar .event_title,
  .agenda .wrapper h1,
  .agenda .wrapper h2 {
    font-size: 38px;
  }

  .agenda .wrapper h2 {
    font-family: var(--serif);
  }

  .agenda .wrapper a,
  .agenda .wrapper p,
  .agenda .wrapper span {
    font-size: 18px;
  }
}

@media (min-width: 50rem) {
  .events {
    -ms-grid-columns: 33% 33% 33%;
    grid-template-columns: 33% 33% 33%;
  }

  .agenda .wrapper a,
  .agenda .wrapper p,
  .agenda .wrapper span {
    font-size: 18px;
  }
}