cremeaux/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-xl
  margin: 0 auto
  padding: 0 1rem

// content

#content
  margin-top: -10vh

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

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

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

  .container.news
    padding: 1rem 5rem
    @media screen and (max-width: $size-sm)
      padding: 0 1rem
.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
        overflow: hidden
        @media screen and (max-width: $size-sm)
          height: inherit
          text-align: center

        a
          color: black
        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

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

  .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
  .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.5rem
    margin-top: 0
    font-weight: bold

  p
    margin: 0
    line-height: 1.3rem