st-marcel-d-urfe.fr/assets/styles/main.sass

// VARIABLE
$font-size: 18px

$vert: #04874b
$orange: #f0833c
$grey: #e5e5e5
$color-primary: black
$color-secondary: white

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

@import "./reset"
@import "./html"
@import "./header"

img
  display: block

  &.round
    border-radius: 100%

.maire
  padding-bottom: 3rem
  img
    margin: 0 auto

// CONTAINER

.icons
  width: 50px

.container
  max-width: $size-lg
  margin: 0 auto
  padding: 0 1rem

// content

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

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

  a
    color: $color-primary

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

  h1
    text-align: center
    text-transform: uppercase
    color: $vert
    margin: 0 1rem 1rem
    padding: 1rem
    font-size: 2.5rem
    word-wrap: anywhere
    @media screen and (max-width: $size-sm)
      font-size: 1.2rem
      margin: 0

    strong
      font-size: 3.5rem
      @media screen and (max-width: $size-sm)
        font-size: 1.8rem

  h2
    font-size: 2rem
    @media screen and (max-width: $size-sm)
      font-size: 1.1rem

  h3
    font-size: 1.8rem
    @media screen and (max-width: $size-sm)
      font-size: 1rem

  h4
    font-size: 1.6rem
    @media screen and (max-width: $size-sm)
      font-size: .9rem

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

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


      $size-la-une: 220px
      $size-news: 100px
      .post
        display: flex
        flex-wrap: nowrap
        margin-bottom: 2rem

        @media screen and (max-width: $size-sm)
          flex-direction: column
          justify-content: center
          align-items: center
        .picture
          width: $size-news
          height: $size-news
          background: $orange
          flex-shrink: 0
          @media screen and (max-width: $size-sm)
            margin-bottom: 1rem

        &.last

          .picture
            width: $size-la-une
            height: $size-la-une
            @media screen and (max-width: $size-sm)
              width: 100%
              overflow: hidden
              margin: 0
              img
                width: 100%
          .details
            padding: 20px
            background: $grey
            height: $size-la-une
            overflow: hidden
            text-overflow: ellipsis
            @media screen and (max-width: $size-sm)
              height: inherit
        .details
          padding: 0 1rem
          height: $size-news
          max-width: 100%
          overflow: hidden
          @media screen and (max-width: $size-sm)
            height: inherit
            text-align: center

          span
            font-size: .8rem
            display: block
          h2
            font-size: 1.4rem
            font-weight: bold
            margin: .6rem 0
            white-space: nowrap
            overflow: hidden
            text-overflow: ellipsis
          h3
            font-size: 1.1rem
            font-weight: bold
            margin: 0
            white-space: nowrap
            overflow: hidden
            text-overflow: ellipsis

          .text
            font-size: .8rem
            overflow: hidden
            text-overflow: ellipsis
            width: 100%
            padding-top: 6px

            p
              margin: 0



    .opening
      background: $orange
      width: 30%
      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: 40%
      @media screen and (max-width: $size-md)
        width: 100%
        margin: 0
        background-position-x: 120%
        background-size: 50%

      h2
        font-size: 1.4rem
        margin: 1rem 0
        font-weight: bold

      h3
        margin: 1rem 0 .4rem
        font-size: 1.2rem
        font-weight: bold

      p
        font-size: .8rem

        &:last-child
          margin-bottom: 0

      a
        color: white

// FOOTER

.explain
  text-align: center
  font-size: .6rem
  background-color: $vert
  color: white

  a
    color: white

.footer
  background: $vert
  color: white
  padding: 2rem 0

  .icons
    height: 30px
    width: 30px
    margin: 1rem 0 .5rem .5rem

  a
    color: white
    display: inline-block

  .container
    display: flex
    @media screen and (max-width: $size-md)
      flex-wrap: wrap
      justify-content: center
    @media screen and (max-width: $size-sm)
      flex-direction: column

  .address
    text-align: right
  .logo
    width: 20%
    @media screen and (max-width: $size-md)
      order: -1
      width: 100%
    img
      margin: 0 auto 1rem
  .horaire,
  .address
    width: 40%
    padding: 1rem

    @media screen and (max-width: $size-sm)
      width: 100%
      text-align: center
      padding: 1rem 0 0

  h3
    font-size: 1.3rem
    margin: 0 0 .7rem
    font-weight: bold

  p
    margin: 0
    line-height: 1.1rem

#content .commissions
  h3, h4
    color: $vert

#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: $vert
      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: 645px
  margin-left: auto
  margin-right: auto