cremeaux/assets/styles/main.sass

$size-xs: 480px
$size-sm: 600px
$size-md: 840px
$size-lg: 960px
$size-xl: 1280px

@import "./reset"
@import "./fonts"
@import "./header"
@import "./footer"
@import "./posts"
@import "./print"
@import "./css-masonry"

body
  --color-green: #04874B
  --color-blue: #586994
  --color-orange: #D14200
  --color-purple: #4C1036
  --color-grey: #E8E9ED
  --color-primary: black
  --color-secondary: white

  color: var(--color-primary)
  background-color: var(--color-secondary)

.open-button, .close-button
  border-radius: 0
  border: 1px solid white
  padding: .2rem .5rem
  cursor: pointer

  &:hover
    color: white

li
  padding-bottom: .3rem


.md p
  img
    margin: 3rem auto
  &:first-child img
    margin: 0 auto 3rem
  &:last-child img
    margin: 3rem auto 0
  &:first-child:last-child img
    margin: 0 auto

.grand
  margin: 1rem calc((960px - 650px) / 2 * -1)
  @media screen and (max-width: $size-lg)
    margin: 1rem calc((960px - 650px) / 3 * -1)
  @media screen and (max-width: $size-md)
    margin: 1rem -2rem
  @media screen and (max-width: $size-sm)
    margin: 1rem -1rem
  @media screen and (max-width: $size-xs)
    margin: 1rem -.5rem

.round
  border-radius: 100%

// CONTAINER

.icons
  width: 30px

.container
  max-width: $size-xl
  margin: 0 auto
  padding: 0 1rem
  @media screen and (max-width: $size-xs)
    padding: 0 .5rem

// content

#content
  margin-top: -10vh
  min-height: 50vh

  .hero
    margin: auto

  @media screen and (max-width: $size-md)
    min-height: inherit

  a
    color: var(--color-primary)

  > .container
    background-color: white
    padding: 1rem
    position: relative
    @media screen and (max-width: $size-sm)
      margin: 0
      padding: 1rem
    @media screen and (max-width: $size-xs)
      padding: .5rem

  .containerGrid
    display: flex
    @media screen and (max-width: $size-md)
      flex-direction: column
    .actus
      width: 75%
      @media screen and (max-width: $size-md)
        width: 100%
    .infos
      width: 25%
      @media screen and (max-width: $size-md)
        width: 100%
        padding-left: 0
      padding: 7rem 0 0 1rem
      display: block

  .infos
    display: flex
    @media screen and (max-width: $size-md)
      flex-direction: column
    .news, .opening
      min-height: 500px
      margin: 1rem

    .news
      width: 75%
      display: flex
      flex-direction: column
      @media screen and (max-width: $size-xl)
        width: 70%
      @media screen and (max-width: $size-md)
        width: 100%
        margin: 0

    .opening
      background: var(--color-orange)
      width: 25%
      padding: 20px
      color: white
      background-image: url(/icons/horloge.svg)
      background-repeat: no-repeat
      background-position: center -50px
      background-size: 70%
      @media screen and (max-width: $size-xl)
        width: 30%
      @media screen and (max-width: $size-md)
        width: 100%
        margin: 0
        background-position-x: 120%
        background-size: 50%

      h2
        margin: 1rem 0

      h3
        margin: 1rem 0 .4rem
        text-transform: inherit

      p
        margin-top: 0

      p:last-child
        margin-bottom: 0

      a
        color: white

.actu + #content
  margin-top: -4rem
  @media screen and (max-width: $size-md)
    .container


.nouveautes
  border: 1px solid black
  padding: 20px

  ul
    padding-left: 1rem

.opening2
  background: var(--color-orange)
  margin-top: 2rem
  margin-bottom: 2rem
  padding: 20px
  color: white
  background-image: url(/icons/horloge.svg)
  background-repeat: no-repeat
  background-position: center -50px
  background-size: 70%
  @media screen and (max-width: $size-md)
    background-position-x: 120%
    background-size: 50%

  h2
    margin: 1rem 0

  h3
    margin: 1rem 0 .4rem
    text-transform: inherit

  p
    margin-top: 0

  p:last-child
    margin-bottom: 0

  a
    color: white

.news
  aside h2
    text-align: center
  > small
    display: block
    text-align: center

hr
  margin: 3rem auto
  border: 1px dashed var(--color-green)
  @media screen and (max-width: $size-xs)
    margin: 2rem auto
// FOOTER

.explain
  text-align: center
  font-size: .6rem
  background-color: var(--color-green)
  color: white

  a
    color: white

#content .conseilmunicipal
  display: flex
  flex-wrap: wrap
  justify-content: center

  .person
    margin: 1rem
    width: 250px
    text-align: center
    .card-image
      margin-bottom: 1rem

    h2
      color: var(--color-green)
      font-size: 1.1rem
      padding: 0
      margin: 0 0 .3rem

    h3
      font-size: 1rem
      padding: 0
      margin: 0

    .card-body
      font-size: .9rem

.md
  max-width: 1024px
  margin-left: auto
  margin-right: auto
  @media screen and (max-width: $size-sm)
    padding: 0

.obfuscate:before
  content: attr(data-param2)
  unicode-bidi: bidi-override
  direction: rtl

  &.at
    content: attr(data-param4) "\002E" attr(data-param3) "\0040" attr(data-param2)

details > summary
  cursor: pointer
  padding: .5rem 0

#content .cards
  margin: 0 -1rem
  padding: 0
  list-style-type: none
  display: flex
  flex-wrap: wrap
  justify-content: center
  .card
    flex: 0 0 calc(100% * 3 / 12)
    border: 1px solid var(--color-purple)
    margin: 1rem
    padding: 1rem
    border-radius: 4px
    text-align: center
    display: flex
    align-items: center
    justify-content: center
    color: white

    h2
      text-transform: none
      padding: 0
      margin: 0
      font-size: 1.2rem

    &:hover
      box-shadow: none
      color: var(--color-purple)
      background-color: white

blockquote
  font-size: 1em
  margin-top: 50px !important
  margin-bottom: 50px !important
  font-family: Open Sans
  font-style: italic
  color: #555555
  padding: 1.5rem
  border-left: 8px solid var(--color-green)
  line-height: 1.4
  background: var(--color-grey)

  position: relative

  & > :first-child
    margin-top: 0
    padding-top: 0

  & > :last-child
    margin-bottom: 0
    padding-bottom: 0

  &::before
    font-family: Arial
    content: "\201C"
    color: var(--color-green)
    font-size: 10rem
    position: absolute
    left: 1rem
    top: 2rem
    opacity: .5
    line-height: 0

  @media screen and (max-width: $size-sm)
    padding: 1rem

blockquote span
  display: block
  color: #333333
  font-style: normal
  font-weight: bold
  margin-top: 1em

.bandeau
  margin: 0;
  font-size: 1rem;
  margin-top: -.5rem;
  text-align: center;
  font-weight: bold;

#content .bandeau, #content .bandeau a
  color: #e00000;