roleplay.css/scss/_global.scss

/* --- 02. GLOBAL ELEMENTS --- */

/*
 * Le style des "grandes parties".
 * Cela permet de définir les différents éléments qui composeront la page totale
 *
 */

// A modifier pour customiser le style facilement :

$background-color: get-color("skyblue");
$sidebar-size:300px;
$max-size: 1600px;
$wrapper-padding: $baselinerem * 3;

// Mixins

@mixin row() {
  max-width: $max-size;
  margin: auto;
}

@mixin row-grid() {
  @include row();

  @include xl {
    display: grid;
    grid-template-rows: auto;
    row-gap: $baselinerem;
    column-gap: $baselinerem * 2;
  }

}


/* 02.1 - Wrapper et page totale */

#wrapper {
    background-image: url("img/header.png"), url("img/back2.png"), url("img/back.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
	background-attachment: scroll, scroll, scroll;
   	background-position: top center, top center, top center;
   	background-repeat: no-repeat, repeat-y , repeat ;


  padding-left:$wrapper-padding/2;
  padding-right:$wrapper-padding/2;

  @include rwd(1300px) {
    padding-left:$wrapper-padding;
    padding-right:$wrapper-padding;
  }
}
/* Alt background for smaller screen */

@media screen and (max-width: 1199px) {
	#wrapper {
        background-image: url("img/header_small.png"), url("img/back2_small.png"), url("img/back_alt.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
        background-attachment: scroll, scroll, scroll;
        background-position: top center, top center, top center;
        background-repeat: no-repeat, repeat-y , repeat ;
    }
}


#global-area {
  @include row-grid();
  &.index-layout {
    grid-template-columns: auto $sidebar-size;
    grid-template-areas: "main sidebar";
  }
}

/* 02.1 - Header */

#page-header {
  @include row();
}

header h1 {
    border-style:none !important;
    color:#FFF;
    font-weight:700;
    font-size:5.4rem;
    font-style:oblique;
    padding-bottom:0px;
    margin:auto;
    text-align:center;
    line-height: 7.5rem;
    margin-bottom: 1.5rem;
}

.navbar {
  box-shadow: $large-shadow;
  @include borders();
  border-left: 0;
  border-right: 0;
  ul {
    padding-bottom:0;
  }
  @include li-no-margin();

    &.navbar-transparent {
        border: none;
        box-shadow: none;
        background-color:transparent;
    }
}

.dropdown-menu {
  box-shadow: $narrow-shadow, $inset-shadow;
}

/* 02.2 - Main Area */

#page-main {
  max-width:100%;
}

/* 02.3 - Footer */

#page-footer {
  margin-top: $baselinerem;
  @include row();
  padding-left:$wrapper-padding;
  padding-right:$wrapper-padding;
}

/* social media */

ul.social {
    font-size:1.5em;
    padding:0;
    margin:auto;
    margin-bottom: $baselinerem;
    text-align:center;
  li {
    margin:0;
    list-style: none;
    display: inline;
    a {
      color:#FFFFFF;
      background-color:#000000;
      padding:0.3em;
      padding-left:0.36em;
      padding-right:0.36em;
      vertical-align:middle;
      border-radius:100%;
      &:hover {
        color:#000;
        background-color:#FFF
      }
    }
  }
}