deuxfleurs-website/static/css/home.css

/*GESTION DE LA GRILLE DE LA PAGE PRINCIPALE */
main {
  grid-area: main-row-debut / main-col-start / main-row-fin / main-col-sep 12;

  display: grid;
  grid-template-columns: [col-start] repeat(12, calc(100% / 12) [col-sep]);
  grid-template-rows:
    [row-start] auto [jardin-end]
    repeat(3, var(--big_margin) [title-start] auto [title-end] var(--med_margin) [illu-start] auto [illu-end] auto [illu-extended-end] var(--med_margin) [txt-start] auto [txt-end])
    var(--big_margin)
    [title-start-contact] auto [title-end-contact]
    var(--med_margin)
    [txt-start-contact] auto [txt-end-contact] auto [cal-end-contact] /* au lieu de mettre auto on pourrait mettre 100px ici pour avoir les 2 cadres de la même taille*/
  ;
}

div#jardin {
  background-color: var(--jardin);
  grid-area: row-start / col-start / jardin-end / col-sep 12;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

div#jardin p {
  display: flex;
  justify-content: center;
}

h2#infras {
  background-color: var(--infras);
  grid-area: title-start 1 / col-sep 1 / title-end 1 / col-sep 12;
}

div#rennes {
  background-color: var(--rennes);
  grid-area: illu-start 1 / col-sep 1 / illu-end 1 / col-sep 6;
  overflow: hidden;
  /*height: 450px;*/
}

div#orsay {
  background-color: var(--orsay);
  grid-area: illu-start 1 / col-sep 6 / illu-end 1 / col-sep 11;
  overflow: hidden;
  /*height:450px;*/
}

p#txt_infras {
  background-color: var(--txt_infras);
  grid-area: txt-start 1 / col-sep 1 / txt-end 1 / col-sep 7;
}

h2#outils {
  background-color: var(--outils);
  grid-area: title-start 2 / col-sep 1 / title-end 2 / col-sep 12;
}

section#liste_outils {
  background-color: var(--liste_outils);
  grid-area: illu-start 2 / col-sep 7 / illu-end 2 / col-sep 11;
}

section#liste_outils > a > div > p {
  text-align: center;
}

section#liste_outils > a {
  /*display: contents;*/
  color: black;
  text-decoration: none;
}

section#liste_outils > a:hover {
  color: darkgreen;
}

div#txt_outils {
  background-color: var(--txt_outils);
  grid-area: txt-start 2 / col-sep 1 / txt-end 2 / col-sep 7;
}

h2#valeurs {
  background-color: var(--valeurs);
  grid-area: title-start 3 / col-sep 1 / title-end 3 / col-sep 12;
}

div#ronce {
  background-color: var(--ronce);
  grid-area: illu-start 3 / col-sep 2 / illu-end 3 / col-sep 10;
  padding: 0.5rem;
  filter: grayscale(100%);
  border: 1px dashed black;
  transition: filter 0.15s ease 0s;
}

div#ronce:hover {
  filter: none;
}

section#liste_valeurs {
  background-color: var(--liste_valeurs);
  grid-area: txt-start 3 / col-sep 2 / txt-end 3 / col-sep 10;
}

h2#connaissance {
  background-color: var(--connaissance);
  grid-area: title-start-contact / col-sep 1 / title-end-contact / col-sep 12;
}

div#txt_connaissance {
  background-color: var(--txt_connaissance);
  grid-area: txt-start-contact / col-sep 1 / txt-end-contact / col-sep 6;
}

div#calendrier {
  background-color: var(--calendrier);
  grid-area: txt-start-contact / col-sep 7 / txt-end-contact / col-sep 10;
  overflow: hidden;
}

.mois_actuel,
.mois_suivant {
  overflow: hidden;
}

/*GESTION DE LA GRILLE LISTE DE NOS VALEURS*/

section#liste_valeurs {
  /*on ne peut pas faire plusieurs opérations en même temps dans calc, il faut un calc par opération*/
  --demie-goutiere: calc(var(--small_margin) / 2);
  --valeurs_width: calc(50% - var(--demie-goutiere));
  display: grid;
  grid-template-columns:
    [col2-start] var(--valeurs_width) [col2-mid-left] /*bloc de gauche*/
    var(--small_margin) /*goutière*/
    [col2-mid-right] var(--valeurs_width) [col2-end]; /*bloc de droite*/
  grid-template-rows:
    [line1-start] auto [line1-end]
    var(--small_margin)
    [line2-start] auto [line2-end]
    var(--small_margin)
    [suivre-start] auto [suivre-end]
  ;
}

p#coop {
  background-color: var(--lightgrey);
  grid-area: line1-start / col2-start / line1-end / col2-mid-left;
  text-align: center;
}

p#autonomie {
  background-color: var(--lightgrey);
  grid-area: line1-start / col2-mid-right / line1-end / col2-end;
}

p#solidarite {
  background-color: var(--lightgrey);
  grid-area: line2-start / col2-start / line2-end / col2-mid-left;
}

p#liberte {
  background-color: var(--lightgrey);
  grid-area: line2-start / col2-mid-right / line2-end / col2-end;
}

p#suivre {
  background-color: var(--lightgrey);
  grid-area: suivre-start / col2-start / suivre-end / col2-end;
  text-align: center;
}

#coop,
#autonomie,
#solidarite,
#liberte {
  padding: 2rem;
  border: 1px dashed black;
  text-align: center;
}

section#liste_outils {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  row-gap: 1rem;
}

section#liste_outils > a > div {
  overflow: hidden;
}

div#ordinateur {
  background-color: var(--lightgrey);
  grid-area: illu-start 2 / col-start / illu-end 2 / col-sep 7;
}

div#discussion {
  background-color: var(--lightgrey);
  grid-area: line1-start / col-start / line1-end / col-mid-left;
}

div#visio {
  background-color: var(--lightgrey);
  grid-area: line2-start / col-start / line2-end / col-mid-left;
}

div#sites-web {
  background-color: var(--lightgrey);
  grid-area: line3-start / col-start / line3-end / col-mid-left;
}

div#emails {
  background-color: var(--lightgrey);
  grid-area: line1-start / col-mid-right / line1-end / col-end;
}

div#collaboration {
  background-color: var(--lightgrey);
  grid-area: line2-start / col-mid-right / line2-end / col-end;
}

div#blog {
  background-color: var(--lightgrey);
  grid-area: line3-start / col-mid-right / line3-end / col-end;
}

/*GESTION DES MEDIA QUERIES*/

/*Tablettes et petits ordinateurs*/
@media (max-width: 1500px) and (min-width: 801px) {
  h2#infras {
    grid-area: title-start 1 / col-sep 1 / title-end 1 / col-sep 12;
  }

  h2#outils {
    grid-area: title-start 2 / col-sep 1 / title-end 2 / col-sep 12;
  }

  h2#valeurs {
    grid-area: title-start 3 / col-sep 1 / title-end 3 / col-sep 12;
  }

  h2#connaissance {
    grid-area: title-start-contact / col-sep 1 / title-end-contact / col-sep 12;
  }

  div#rennes {
    grid-area: illu-start 1 / col-sep 2 / illu-end 1 / col-sep 6;
    margin-right: 0.5rem;
  }

  div#orsay {
    grid-area: illu-start 1 / col-sep 6 / illu-end 1 / col-sep 10;
    margin-left: 0.5rem;
  }

  div#rennes,
  div#orsay {
    border: 1px solid black;
    border-radius: 5px;
  }

  div#rennes pre.center,
  div#orsay pre.center {
    margin-top: -5px;
    margin-bottom: -5px;
  }

  div#orsay pre.center {
    justify-content: center;
  }

  p#txt_infras {
    background-color: var(--txt_infras);
    grid-area: txt-start 1 / col-sep 2 / txt-end 1 / col-sep 10;
  }

  div#txt_outils {
    background-color: var(--txt_outils);
    grid-area: txt-start 2 / col-sep 2 / txt-end 2 / col-sep 10;
  }

  div#txt_connaissance {
    grid-area: txt-start-contact / col-sep 2 / txt-end-contact / col-sep 10;
  }

  div#txt_connaissance ul {
    padding-left: 0px;
    list-style-position: inside;
  }

  div#ordinateur {
    grid-area: illu-start 2 / col-sep 1 / illu-end 2 / col-sep 11;
    overflow: hidden;
  }

  section#liste_outils {
    background-color: var(--liste_outils);
    grid-area: illu-end 2 / col-sep 1 / illu-extended-end 2 / col-sep 11;
    margin-top: var(--med_margin);
  }

  section#liste_outils {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 1rem;
    column-gap: 1rem;
  }

  div#discussion {
    background-color: var(--lightgrey);
    grid-area: line1-start / col-tiers1-start / line1-end / col-tiers1-end;
    overflow: hidden;
  }

  div#emails {
    background-color: var(--lightgrey);
    grid-area: line1-start / col-tiers2-start / line1-end / col-tiers2-start;
  }

  div#visio {
    background-color: var(--lightgrey);
    grid-area: line1-start / col-tiers3-start / line1-end / col-tiers3-end;
    overflow: hidden;
  }

  div#sites-web {
    background-color: var(--lightgrey);
    grid-area: line2-start / col-tiers1-start / line2-end / col-tiers1-end;
    overflow: hidden;
  }

  div#collaboration {
    background-color: var(--lightgrey);
    grid-area: line2-start / col-tiers2-start / line2-end / col-tiers2-end;
  }

  div#blog {
    background-color: var(--lightgrey);
    grid-area: line2-start / col-tiers3-start / line2-end / col-tiers3-end;
  }

  div#ronce {
    grid-area: illu-start 3 / col-sep 1 / illu-end 3 / col-sep 11;
  }

  div#calendrier {
    margin-top: var(--med_margin);
    grid-area: txt-end-contact / col-sep 1 / cal-end-contact / col-sep 11;
    display: flex;
    justify-content: center;
  }

  #mois_actuel,
  #mois_suivant {
    overflow: hidden;
  }

  #mois_actuel {
    margin-bottom: 0px;
    margin-right: 2rem;
  }
}

/*Smartphones*/
@media (max-width: 800px) {
  h2#infras {
    grid-area: title-start 1 / col-start / title-end 1 / col-sep 12;
  }

  h2#outils {
    grid-area: title-start 2 / col-start / title-end 2 / col-sep 12;
  }

  h2#valeurs {
    grid-area: title-start 3 / col-start / title-end 3 / col-sep 12;
  }

  h2#connaissance {
    grid-area: title-start-contact / col-start / title-end-contact / col-sep 12;
  }

  div#jardin {
    grid-area: row-start / col-sep 1 / jardin-end / col-sep 11;
  }

  nav#menu {
    position: fixed;
    width: 100%;
    right: 0px;
    bottom: 0px;
    padding-bottom: 1rem;
    background-color: --day-background;
    z-index: 1;
    border-top: black 1px dashed;
  }

  nav#menu ul {
    list-style: none;
    flex-direction: row;
    display: flex;
    justify-content: space-evenly;
    padding: 0px;
    margin: 0px;
    width: 100%;
  }

  div#txt_connaissance ul {
    padding-left: 0px;
    list-style-position: inside;
    margin-bottom: var(--med_margin);
  }

  .icone > pre {
    font-size: 0.8rem;
  }

  #illustration-accueil > pre.center {
    font-size: 0.85rem;
  }

  div#orsay {
    display: none;
  }

  div#rennes {
    grid-area: illu-start 1 / col-sep 1 / illu-end 1 / col-sep 11;
    border: 1px solid black;
    border-radius: 5px;
  }

  div#rennes pre {
    margin-top: -5px;
    margin-bottom: -5px;
  }

  pre {
    font-size: 0.95rem;
  }

  #txt_infras,
  #txt_outils,
  #txt_connaissance {
    text-align: left;
    hyphens: none;
    margin-top: 0;
    hyphens: none;
    word-spacing: -2px;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    margin-top: 0;
  }

  p#txt_infras {
    background-color: var(--txt_infras);
    grid-area: txt-start 1 / col-sep 1 / txt-end 1 / col-sep 11;
  }

  div#txt_outils {
    background-color: var(--txt_outils);
    grid-area: txt-start 2 / col-sep 1 / txt-end 2 / col-sep 11;
  }

  div#txt_connaissance {
    grid-area: txt-start-contact / col-sep 1 / txt-end-contact / col-sep 11;
  }

  div#ordinateur {
    display: none;
  }

  section#liste_outils {
    display: block;
  }

  section#liste_outils {
    grid-area: illu-start 2 / col-start / illu-end 2 / col-sep 12;
    font-size: 1rem;
  }

  section#liste_outils pre {
    font-size: 1rem;
  }

  section#liste_outils > a > div {
    margin-bottom: 1rem;
  }

  div#ronce {
    grid-area: illu-start 3 / col-sep 1 / illu-end 3 / col-sep 11;
    border: none;
    padding: 0px;
  }

  #coop,
  #autonomie,
  #solidarite,
  #liberte {
    padding: 1rem;
    margin: 0px;
  }

  #suivre {
    margin-top: 2rem;
  }

  section#liste_valeurs {
    grid-area: txt-start 3 / col-sep 1 / txt-end 3 / col-sep 11;
  }

  section#liste_valeurs .description {
    display: none;
  }

  div#calendrier {
    grid-area: txt-end-contact / col-sep 1 / cal-end-contact / col-sep 11;
    display: none;
  }

  div#calendrier > pre.center {
    justify-content: center;
  }

  footer pre.center {
    font-size: 0.85rem;
  }

  #liens {
    text-align: center;
    margin-bottom: 12rem;
  }
}

/* En vrac */
div#calendrier > pre.center {
  justify-content: right;
}

#calendrier #mois_actuel {
  margin-bottom: 1rem;
}

#mois_actuel,
#mois_suivant {
  text-align: center;
}

#txt_connaissance li {
  margin-bottom: 1rem;
}

#txt_connaissance p {
  margin-top: 0px;
}

#txt_infras,
#txt_outils,
#txt_connaissance {
  line-height: 1.3rem;
  text-align: justify;
  text-justify: inter-character;
  hyphens: auto;
  word-spacing: -2px;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  margin-top: 0;
}