お知らせ一覧　横1段　ラベル可変

お知らせ一覧　

さっと「お知らせ一覧」が書けなかったのでまとめてみた。

ラベルの文字の長さが変わっても対応できるぞぃ。

リンクは、日付もラベルを押しても詳細に飛ぶようになってる。

HTML のコード

<ul class="areaNews__newsList newsList">
  <li class="newsList__newsItem newsItem">
    <a class="newsItem__newsLink newsLink" href="">
      <div class="newsLink__date">
        1915-XX-XX
      </div><!-- .newsLink__date -->
      <div class="newsLink__areaLabel ">
        <div class=" newsLink__label label--bright5">
          新思潮波
        </div><!-- .newsLink__label -->
      </div><!-- .newsLink__areaLabel -->
      <div class="newsLink__title">
        芥川龍之介先生、「羅生門」を発表
      </div><!-- .newsLink__title -->
    </a><!-- .newsItem__newsLink -->
  </li><!-- newsList__newsItem -->
  <li class="newsList__newsItem newsItem">
    <a class="newsItem__newsLink newsLink" href="">
      <div class="newsLink__date">
        1911-XX-XX
      </div><!-- .newsLink__date -->
      <div class="newsLink__areaLabel">
        <div class="newsLink__label label--bright3">
          白樺派
        </div><!-- .newsLink__label -->
      </div><!-- .newsLink__areaLabel -->
      <div class="newsLink__title">
        有島武郎先生、「或る女」を発表
      </div><!-- .newsLink__title -->
    </a><!-- .newsItem__newsLink -->
  </li><!-- newsList__newsItem -->
  <li class="newsList__newsItem newsItem">
    <a class="newsItem__newsLink newsLink abel--bright5" href="">
      <div class="newsLink__date">
        1906-XX-XX
      </div><!-- .newsLink__date -->
      <div class="newsLink__areaLabel">
         <div class="newsLink__label label--bright1">
            高踏派
         </div><!-- .newsLink__label -->
       </div><!-- .newsLink__areaLabel -->
       <div class="newsLink__title">
          夏目漱石先生、「坊ちゃん」を発表
       </div><!-- .newsLink__title -->
     </a><!-- .newsItem__newsLink -->
   </li><!-- newsList__newsItem -->
   <li class="newsList__newsItem newsItem">
     <a class="newsItem__newsLink newsLink" href="">
       <div class="newsLink__date">
         1888-09-08
       </div><!-- .newsLink__date -->
       <div class="newsLink__areaLabel">
         <div class="newsLink__label label--bright5">
           速報
         </div><!-- .newsLink__label -->
       </div><!-- .newsLink__areaLabel -->
       <div class="newsLink__title">
         ドイツ留学をされていた森鴎外先生は、
         石黒田軍医監に従い7月5日にベルリンを出発、
         本日無事に横浜に到着されました。
         同時に陸軍医学者教官に任命されました。
       </div><!-- .newsLink_title -->
     </a><!-- .newsItem__newsLink -->
   </li><!-- newsList__newsItem -->
   <li class="newsList__newsItem newsItem">
     <a class="newsItem__newsLink newsLink" href="">
       <div class="newsLink__date">
         1887-XX-XX
       </div><!-- .newsLink__date -->
       <div class="newsLink__areaLabel">
         <div class="newsLink__label label--bright5">
           写実主義
         </div><!-- .newsLink__label -->
       </div><!-- .newsLink__areaLabel -->
       <div class="newsLink__title">
          二葉亭四迷先生、「浮雲」を発表
       </div><!-- .newsLink_title -->
     </a><!-- .newsItem__newsLink -->
   </li><!-- newsList__newsItem -->
 </ul><!-- .areaNews__newsList -->

CSS の コード

/*セクション ニュース
/* ============================================ */
.newsList {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.newsItem {
  border-bottom: 1px solid #707070;
  margin-bottom: 20px;
}

.newsLink {
  display: flex;
  align-items: flex-start;

  @include mixin.responsive(sm) {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    .newsLink__title {
      text-decoration: underline;
    }
  }


  .newsLink__date {
    margin-right: 17px;
    white-space: nowrap;
    padding-top: 3px;
  }

  &__areaLabel {
    flex: 0 0 100px;
    justify-content: center;
    margin-right: 20px;
    margin-bottom: 12px;
    text-align: center;
  }

  &__label {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.08em;

  }

  &__title {
    padding-top: 3px;
    margin-right: auto;
    padding-bottom: 12px;
    line-height: calc(20 / 16);
    letter-spacing: 0px;

    @include mixin.responsive(sm) {
      width: 100%;
    }
  }
}

.label--bright5 {
  background-color: variable.$bright5_color;
}

.label--bright3 {
  background-color: variable.$bright3_color;
}

.label--bright1 {
  background-color: variable.$bright1_color;
}