fix: move new styling into scss files

public/css/style.css

@@ -162,6 +162,16 @@ div.pp_default .pp_close:hover {
   list-style: none;
 }
 
+.ad-prefix {
+  width: 100%;
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  text-align: center;
+  color: #666;
+}
+
 .header {
   height: 111px;
 }
@@ -172,7 +182,7 @@ div.pp_default .pp_close:hover {
 .header .logo img {
   height: 95px;
 }
-.header .advertisement {
+.header ins[data-revive-zoneid] {
   float: right;
   width: 728px;
   height: 90px;
@@ -190,7 +200,7 @@ div.pp_default .pp_close:hover {
   .header .logo {
     float: none;
   }
-  .header .advertisement {
+  .header ins[data-revive-zoneid] {
     float: none;
   }
 }
@@ -778,6 +788,11 @@ div.pp_default .pp_close:hover {
   color: #fff;
 }
 
+.article-iframe {
+  width: 100%;
+  aspect-ratio: 1;
+}
+
 .box_header {
   border-bottom: 1px solid #efefef;
   padding-right: 20px;
@@ -942,6 +957,13 @@ div.pp_default .pp_close:hover {
   color: #282828;
 }
 
+ins[data-revive-zoneid="2"] {
+  width: 100%;
+  height: 275px;
+  margin: 11px auto 50px auto;
+  background-color: #efefef;
+}
+
 @media (max-width: 768px) {
   .sidebar {
     width: 100%;
@@ -1204,6 +1226,19 @@ div.pp_default .pp_close:hover {
   font-size: 30px;
 }
 
+.box.featured .sentence, .post_container .post_body .sentence {
+  font-size: 12px;
+  font-style: italic;
+  line-height: 1.3;
+  text-align: right;
+  color: #585858;
+  display: block;
+  width: 100%;
+}
+.box.featured .sentence span, .post_container .post_body .sentence span {
+  padding: 0 5px;
+}
+
 .post_container {
   max-width: 1170px;
   margin: 0 auto;
@@ -1231,20 +1266,6 @@ div.pp_default .pp_close:hover {
 .post_container .post_body h3 {
   font-size: 15px;
 }
-.post_container .post_body .sentence,
-.box.featured .sentence {
-  font-size: 12px;
-  font-style: italic;
-  line-height: 1.3;
-  text-align: right;
-  color: #585858;
-  display: block;
-  width: 100%;
-}
-.post_container .post_body .sentence span,
-.box.featured .sentence span {
-  padding: 0 5px;
-}
 .post_container .post_body blockquote {
   border-left: 3px solid #5ba8f4;
   margin-left: 0;
@@ -1309,19 +1330,7 @@ div.pp_default .pp_close:hover {
   color: #ED1C24;
 }
 
-.post_tags {
+#schedule .onair, .post_tags li a {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  height: 31px;
-  margin: 20px 0;
-}
-.post_tags li {
-  float: left;
-  margin-right: 10px;
-}
-.post_tags li a,
-#schedule .onair {
   display: block;
   width: 4rem;
   padding: 6px 15px 7px;
@@ -1336,18 +1345,36 @@ div.pp_default .pp_close:hover {
   text-transform: uppercase;
 }
 
-#schedule a {
+.post_tags {
-  text-decoration: none;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  height: 31px;
+  margin: 20px 0;
+}
+.post_tags li {
+  float: left;
+  margin-right: 10px;
 }
 @keyframes tilt-shaking {
-    0% { transform: rotate(0deg); }
+  0% {
-   25% { transform: rotate(5deg); }
+    transform: rotate(0deg);
-   50% { transform: rotate(0deg); }
+  }
-   75% { transform: rotate(-5deg); }
+  25% {
-  100% { transform: rotate(0deg); }
+    transform: rotate(5deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+  75% {
+    transform: rotate(-5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
 }
-.onair {
+#schedule a {
-  animation: tilt-shaking 1s linear infinite;
+  text-decoration: none;
 }
 #schedule .program-title {
   font-family: Montserrat, serif;
@@ -1387,6 +1414,9 @@ div.pp_default .pp_close:hover {
 #schedule .no-results span, #schedule .loading span {
   margin-right: 10px;
 }
+#schedule .onair {
+  animation: tilt-shaking 1s linear infinite;
+}
 
 .page_container {
   max-width: 1170px;
@@ -1476,6 +1506,90 @@ div.pp_default .pp_close:hover {
   margin: 10px 20px 0 0;
 }
 
+.podcast-player .content {
+  border: solid 1px #333;
+  border-radius: 5px;
+  padding: 0.4rem;
+}
+
+.audioplayer .waveform {
+  cursor: pointer;
+  position: relative;
+}
+.audioplayer .hover {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  pointer-events: none;
+  height: 100%;
+  width: 0;
+  mix-blend-mode: overlay;
+  background: rgba(255, 255, 255, 0.5);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.audioplayer .waveform:hover .hover {
+  opacity: 1;
+}
+.audioplayer .time,
+.audioplayer .duration {
+  position: absolute;
+  z-index: 11;
+  top: 50%;
+  margin-top: -1px;
+  transform: translateY(-50%);
+  font-size: 11px;
+  background: rgba(0, 0, 0, 0.75);
+  padding: 2px;
+  color: #ddd;
+}
+.audioplayer .time {
+  left: 0;
+}
+.audioplayer .duration {
+  right: 0;
+}
+.audioplayer .audio-controls {
+  width: 100%;
+  justify-content: center;
+  display: flex;
+}
+.audioplayer .audio-controls .btn {
+  padding-left: 0;
+  padding-right: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-transform: none;
+}
+@media (max-width: 720px) {
+  .audioplayer .audio-controls .btn label {
+    display: none;
+  }
+}
+.audioplayer .audio-controls .btn.btn-play {
+  flex: 50% 1 0;
+}
+.audioplayer .volume-controls {
+  display: flex;
+}
+.audioplayer .volume-controls .volume-slider {
+  flex: 100% 1 1;
+}
+.audioplayer .audio-controls .btn,
+.audioplayer .volume-controls .btn-toggle-mute {
+  flex: 100px 1 1;
+  padding: 10px 0 10px 0;
+  background: #5ba8f4;
+  border-radius: 5px;
+  border-color: solid 1px #0f259d;
+  color: white;
+  font-family: Nunito, serif;
+  text-align: center;
+  text-decoration: none;
+}
+
 .footer_container {
   font-family: Montserrat, serif;
   font-size: 14px;
@@ -1663,115 +1777,4 @@ a, a:hover, a:active {
   }
 }
 
-.podcast-player .content {
-  border: solid 1px #333;
-  border-radius: 5px;
-  padding: 0.4rem;
-}
-
-.article-iframe {
-  width: 100%;
-  aspect-ratio: 1;
-}
-
 /*# sourceMappingURL=style.css.map */
-
-.audioplayer .waveform {
-  cursor: pointer;
-  position: relative;
-}
-
-.audioplayer .hover {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 10;
-  pointer-events: none;
-  height: 100%;
-  width: 0;
-  mix-blend-mode: overlay;
-  background: rgba(255, 255, 255, 0.5);
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.audioplayer .waveform:hover .hover {
-  opacity: 1;
-}
-
-.audioplayer .time,
-.audioplayer .duration {
-  position: absolute;
-  z-index: 11;
-  top: 50%;
-  margin-top: -1px;
-  transform: translateY(-50%);
-  font-size: 11px;
-  background: rgba(0, 0, 0, 0.75);
-  padding: 2px;
-  color: #ddd;
-}
-
-.audioplayer .time {
-  left: 0;
-}
-
-.audioplayer .duration {
-  right: 0;
-}
-
-.audioplayer .audio-controls {
-  width: 100%;
-  justify-content: center;
-  display: flex;
-}
-
-.audioplayer .audio-controls .btn {
-  padding-left: 0;
-  padding-right: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-transform: none;
-}
-
-@media(max-width:720px) {
-  .audioplayer .audio-controls .btn label {
-      display: none;
-  }
-}
-
-.audioplayer .audio-controls .btn.btn-play {
-  flex: 50% 1 0;
-}
-
-.audioplayer .volume-controls {
-  display: flex;
-}
-
-.audioplayer .volume-controls .volume-slider {
-  flex: 100% 1 1;
-}
-
-.audioplayer .audio-controls .btn,
-.audioplayer .volume-controls .btn-toggle-mute {
-  flex: 100px 1 1;
-  padding: 10px 0px 10px 0px;
-  background: #5ba8f4;
-  border-radius: 5px;
-  border-color: solid 1px #0f259d;
-  color: white;
-  font-family: Nunito, serif;
-  text-align: center;
-  text-decoration: none;
-}
-
-.ad-prefix {
-  width: 100%;
-  font-family: Nunito, serif;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 3.17;
-  text-align: center;
-  color: #666;
-}

resources/assets/sass/base/_base.scss

@@ -5,6 +5,7 @@
 @use "../components/pretty_photo";
 @use "../components/cookie";
 @use "../components/list";
+@use "../components/banners";
 
 @use "../layout";
 

resources/assets/sass/components/_banners.scss

@@ -0,0 +1,9 @@
+.ad-prefix {
+  width: 100%;
+  font-family: Nunito, serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 3.17;
+  text-align: center;
+  color: #666;
+}

resources/assets/sass/components/_main_news.scss

@@ -61,7 +61,8 @@
 
       .post_details {
         @include reset-list;
-
+        display: flex;
+        gap: 3px;
         .category a {
           padding: 6px 11px 7px;
           border-radius: 3px;
@@ -105,3 +106,8 @@
     }
   }
 }
+
+.article-iframe {
+  width: 100%;
+  aspect-ratio: 1;
+}

resources/assets/sass/components/_media.scss

@@ -0,0 +1,91 @@
+.audioplayer {
+  .waveform {
+    cursor: pointer;
+    position: relative;
+  }
+
+  .hover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 10;
+    pointer-events: none;
+    height: 100%;
+    width: 0;
+    mix-blend-mode: overlay;
+    background: rgba(255, 255, 255, 0.5);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  .waveform:hover .hover {
+    opacity: 1;
+  }
+
+  .time,
+  .duration {
+    position: absolute;
+    z-index: 11;
+    top: 50%;
+    margin-top: -1px;
+    transform: translateY(-50%);
+    font-size: 11px;
+    background: rgba(0, 0, 0, 0.75);
+    padding: 2px;
+    color: #ddd;
+  }
+
+  .time {
+    left: 0;
+  }
+
+  .duration {
+    right: 0;
+  }
+
+  .audio-controls {
+    width: 100%;
+    justify-content: center;
+    display: flex;
+  }
+
+  .audio-controls .btn {
+    padding-left: 0;
+    padding-right: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-transform: none;
+  }
+
+  @media(max-width: 720px) {
+    .audio-controls .btn label {
+      display: none;
+    }
+  }
+
+  .audio-controls .btn.btn-play {
+    flex: 50% 1 0;
+  }
+
+  .volume-controls {
+    display: flex;
+  }
+
+  .volume-controls .volume-slider {
+    flex: 100% 1 1;
+  }
+
+  .audio-controls .btn,
+  .volume-controls .btn-toggle-mute {
+    flex: 100px 1 1;
+    padding: 10px 0 10px 0;
+    background: #5ba8f4;
+    border-radius: 5px;
+    border-color: solid 1px #0f259d;
+    color: white;
+    font-family: Nunito, serif;
+    text-align: center;
+    text-decoration: none;
+  }
+}

resources/assets/sass/components/_podcast_item.scss

@@ -12,3 +12,9 @@
   float: left;
   margin: 10px 20px 0 0;
 }
+
+.podcast-player .content {
+  border: solid 1px #333;
+  border-radius: 5px;
+  padding: 0.4rem;
+}

resources/assets/sass/components/_post.scss

@@ -1,6 +1,20 @@
 @use "../abstracts/mixin" as *;
 @use "../abstracts/variables" as *;
 
+%sentence {
+  font-size: 12px;
+  font-style: italic;
+  line-height: 1.3;
+  text-align: right;
+  color: $text-description-color;
+  display: block;
+  width: 100%;
+
+  span {
+    padding: 0 5px;
+  }
+}
+
 .post_container {
   @include container;
   @media (min-width: 768px) {
@@ -30,17 +44,11 @@
     }
 
     .sentence {
-      font-size: 12px;
+      @extend %sentence
-      font-style: italic;
+    }
-      line-height: 1.3;
-      text-align: right;
-      color: $text-description-color;
-      display: block;
-      width: 100%;
 
-      span {
+    @at-root .box.featured .sentence {
-        padding: 0 5px;
+      @extend %sentence
-      }
     }
 
     blockquote {
@@ -106,6 +114,22 @@
     }
   }
 }
+
+%post-tags-link {
+  display: block;
+  width: 4rem;
+  padding: 6px 15px 7px;
+  border-radius: 3px;
+  background-image: linear-gradient(to left, #0d1ca3, #45aaf8);
+  font-family: Nunito, serif;
+  font-size: 10px;
+  font-weight: bold;
+  text-align: center;
+  color: $text-inverted-color;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
 .post_tags {
   @include reset-list;
   height: 31px;
@@ -116,17 +140,11 @@
     margin-right: 10px;
 
     a {
-      display: block;
+      @extend %post-tags-link
-      padding: 6px 15px 7px;
+    }
-      border-radius: 3px;
+
-      background-image: linear-gradient(to left, #0d1ca3, #45aaf8);
+    @at-root #schedule .onair {
-      font-family: Nunito, serif;
+      @extend %post-tags-link
-      font-size: 10px;
-      font-weight: bold;
-      text-align: center;
-      color: $text-inverted-color;
-      text-decoration: none;
-      text-transform: uppercase;
     }
   }
 }

resources/assets/sass/components/_schedule.scss

@@ -1,6 +1,14 @@
 @use "../abstracts/mixin" as *;
 @use "../abstracts/variables" as *;
 
+@keyframes tilt-shaking {
+    0% { transform: rotate(0deg); }
+   25% { transform: rotate(5deg); }
+   50% { transform: rotate(0deg); }
+   75% { transform: rotate(-5deg); }
+  100% { transform: rotate(0deg); }
+}
+
 #schedule {
   a {
     text-decoration: none;
@@ -32,4 +40,8 @@
       margin-right: 10px;
     }
   }
+
+  .onair {
+    animation: tilt-shaking 1s linear infinite;
+  }
 }

resources/assets/sass/layout/_podcast.scss

@@ -1 +1,2 @@
 @use "../components/podcast_item";
+@use "../components/media";