salet/sass/main.scss

@import "mixins";
@import "variables";
// Bootstrap v4 stripped core
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/normalize";
@import "bootstrap/scss/print";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/responsive-embed";
@import "bootstrap/scss/utilities";

body {
  overflow-y: scroll;
  overflow-x: hidden;
  background: $body-bg;
}
#tools_wrapper {
  display: none; // Shown by Javascript
  .ways {
    padding: 0.5em;
  //  @include col(4, 5);
    @include col(9, 10);
    @media (min-width: breakpoint-min(sm)) {
      @include make-col-offset(1);
    }
  }
  .buttons {
    @include col(1, 2);
    button {
      @extend .btn;
      @include button-variant($btn-color, $btn-bg, $btn-color);
      margin-bottom: 1em;
    }
  }
}
#content_wrapper {
  background: $text_background;
  border-radius: 5px;
}
#content {
  @include col(10, 12);
  @media (min-width: breakpoint-min(sm)) {
    @include make-col-offset(1);
  }
  p {
    hyphens: auto;
  }
  padding: 1em;
  ul {
    margin: 0;
    padding: 0 0 0 1em;
  }
  ul.options {
    padding: 0;
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0.7em;
    list-style-type: none;
    border-radius: 4px;
    li {
      padding: 0.5em;
    }
    li:hover {
      cursor: pointer;
    }
    li:last-child {
      border-bottom: none;
    }
  }
  section {
    border-top: 1px dashed #bbb;
  }
  .situation-start {
    border-top: none;
  }
  img.right {
    float: right;
    margin: 1.1em 0 1.1em 1.1em;
  }
  img.left {
    float: left;
    margin: 1.1em 1.1em 1.1em 0;
  }
  h3 {
    text-align: center;
  }
}
#legal {
  @include col(10,12);
  @media (min-width: breakpoint-min(sm)) {
    @include make-col-offset(1);
  }
  margin-top: 1em;
  color: darken($body-color, 10%);
  font-size: smaller;
  display: none; // Shown by Javascript
  #footleft {
    @include make-col();
    @media (min-width: breakpoint-min(sm)) {
      @include make-col-span(10);
    }
    @media (max-width: breakpoint-max(xs)) {
      @include make-col-span(12);
    }
  }
  #footright {
    text-align: right;
    @include make-col();
    @media (min-width: breakpoint-min(sm)) {
      @include make-col-span(2);
    }
    @media (max-width: breakpoint-max(xs)) {
      @include make-col-span(12);
      margin-bottom: 1em;
    }
  }
}

.way {
  color: $waycolor;
  margin-right: 1em;
}
.cycle {
  color: darkgreen;
  border-bottom: darkgreen dashed 1px;
}
hr {
  width: 50%;
  border-color: $body-color;
}