afpy.org/sass/style.sass

@import url('https://fonts.googleapis.com/css?family=Hind:300,600,700')
$bkg: #25252d
$header: #1d1e23
$action: #2e5cfd
$action-secondary: #ffcd05
$text: #eaeaea

a
  color: $action-secondary
  font-size: .8em
  font-weight: 700
  text-decoration: none
  text-transform: uppercase
  transition: color 250ms

  &:hover
    color: lighten($action-secondary, 10%)

  &.case-sensitive
    text-transform: none

label
  display: block
  margin: 1em 0
  max-width: 40em
  width: 80%

  input, select, textarea
    background: $bkg
    border: 1px solid
    color: $text
    display: block
    padding: 0.2em
    width: 100%

    &:focus
      border-color: $action-secondary

textarea
  height: 5em

input[type="submit"]
  background: $action
  border: 0
  color: $text
  cursor: pointer
  font-family: 'Hind', sans-serif
  outline: transparent
  padding: 1em 2em
  text-transform: uppercase
  transition: background 250ms
  width: auto

  &:hover
    background: lighten($action, 5%)

.nicEdit-panelContain, .nicEdit-pane
  color: black

  input[type="submit"]
    color: black

code
  background: $header
  border-bottom: 1px solid $action-secondary
  display: block
  padding: 2em

table
  border-collapse: collapse
  margin: 1em 0

  thead, tr:nth-child(even)
    background: $header

  td, th
    padding: 0.3em 1em

iframe
  background: $text
  border: 0
  height: 55em
  width: 100%

img
  display: block
  float: left
  margin: 0.5em 1em 1em 0
  max-height: 10em
  max-width: 80%

body
  background: $bkg
  color: $text
  display: flex
  flex-direction: column
  font-family: 'Hind', sans-serif
  font-size: .9em
  font-weight: 300
  margin: 0
  min-height: 100vh
  padding: 0

header
  background: $header
  box-sizing: border-box
  order: 1
  padding: 0 1em

nav
  align-items: center
  display: flex
  justify-content: center
  min-height: 70px
  order: 0

  ul
    display: flex
    flex-wrap: wrap
    list-style: none
    margin: 0
    padding: 0 calc(4em + 50px)

    li
      &:first-child
        a::before
          content: url(../images/logo.svg)
          left: 3em
          position: absolute
          top: 10px

    a
      color: $text
      display: block
      font-weight: 600
      padding: 1em
      text-decoration: none

    .active a
      color: $action-secondary

main
  box-sizing: border-box
  flex-grow: 1
  margin: 1em auto 0
  max-width: 1200px
  order: 3
  padding: 0 1em
  width: 100%

aside
  background: $header
  margin: 1em auto
  padding: 1em 2em
  width: 80%

footer
  background: $header
  box-sizing: border-box
  margin-top: 2em
  order: 4
  padding: 0 1em

  ul
    display: flex
    justify-content: center
    list-style: none
    padding: 0

    a
      color: inherit
      text-decoration: inherit
      padding: 1em

h1
  color: $action-secondary
  font-weight: 300
  margin: 2em auto
  max-width: 1200px

  &::after
    background: $action-secondary
    content: ''
    display: block
    height: 3px
    width: 30px

  abbr
    display: block

h2
  font-weight: 400

dd
  margin-left: 1em

  p:before
    content: '→ '
    display: inline

time
  display: block

#actualites main, #emplois main, #index-news
  box-sizing: border-box
  display: flex
  flex-wrap: wrap

  article
    background: lighten($bkg, 5%)
    border: 1px solid $bkg
    box-sizing: border-box
    flex: 1 50%
    padding: 2em

    a
      color: $action-secondary
      font-size: .8em
      font-weight: 700
      text-decoration: none
      text-transform: uppercase
      transition: color 250ms

      &:hover
        color: lighten($action-secondary, 10%)

    h2
      flex: 1 100%

    article
      background: lighten($bkg, 5%)
      border: 1px solid $bkg
      box-sizing: border-box
      flex: 1 50%
      padding: 2em

      h2
        font-size: 1.2em
        font-weight: 600

@media screen and (max-width: 640px)
  #actualites main, #emplois main, #index-news
    article
      flex: 1 100%