dev/scss/main/announcements.scss

@charset "utf-8";
@use "../util";
@use "../base/colors";
@use "../base/icons";
@use "../base/lengths";
@use "../base/mixins";

section#announcements {
  background-color: colors.$ids-green-2;
  mix-blend-mode: soft-light;
  padding: 1em;
  padding-right: 2em;
  border-radius: lengths.$standard-border-radius;
  border-left: 5px solid colors.$ids-green-1;
  height: 20rem;
  overflow-y: scroll;
  font-size: .8rem;
  width: 100%;

  h3 {
    font-size: 1rem;
  }

  dt {
    // float: left;
    // clear: left;
    // width: 15ex;
    // text-align: right;
    text-align: left;
    font-weight: bold;
    float: none;
    width: auto;
    padding-bottom: .2em;
  }
  
  dd.maintenance > h4::after {
    @include mixins.icon-font;
    color: colors.$ids-pink-1;
    content: " " + icons.$fa-warn;
  }
  
  dd {
    // margin: 0 1ex 0 16ex;
    margin-left: 1em;
    padding: 0 0 0.5em 1em;
    > p { 
      max-width: 80ex;
      margin-block-start: 0ex;
    }

    > h4 {
      margin-block-start: 0ex;
      margin-block-end: 0.33ex;
    }
  }
}

@media all and (max-width: 42.5em) {
  section#announcements {
    dt {
      // text-align: left;
      // float: none;
      // width: auto;
      // padding-bottom: .2em;
    }
    dd {
      // margin-left: 1em;
    }
  }
}