New version of hello-friend-ng-clone

themes/hello-friend-ng-clone/assets/scss/_single.scss

@@ -44,14 +44,19 @@
   &-cover {
     border-radius: 8px;
     margin: 40px -50px;
-    width: 860px;
-    max-width: 860px;
+    width: $max-width;
+    max-width: $max-width;
     @media #{$media-size-tablet} {
       margin: 20px 0;
       width: 100%;
     }
   }
 
+  &-excerpt {
+    color: grey;
+    font-style: italic;
+  }
+
   &-info {
     margin-top: 30px;
     font-size: 0.8rem;
@@ -86,6 +91,17 @@
     }
   }
 
+  &-audio {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 20px;
+
+    audio {
+      width: 90%;
+    }
+  }
+
   .flag {
     border-radius: 50%;
     margin: 0 5px;
@@ -105,18 +121,34 @@
       text-align: center;
       margin: 0 auto;
       padding: 5px 10px;
-      background: $light-background;
-      color: $light-color-secondary;
       font-size: 0.8rem;
       text-transform: uppercase;
       text-decoration: none;
       letter-spacing: 0.1em;
       z-index: 1;
+      // Default
+      background: $light-background;
+      color: $light-color-secondary;
 
-      .dark-theme & {
+      @media (prefers-color-scheme: dark) {
         background: $dark-background;
         color: $dark-color-secondary;
       }
+    
+      @media (prefers-color-scheme: light) {
+        background: $light-background;
+        color: $light-color-secondary;
+      }
+    
+      [data-theme=dark] & {
+        background: $dark-background;
+        color: $dark-color-secondary;
+      }
+    
+      [data-theme=light] & {
+        background: $light-background;
+        color: $light-color-secondary;
+      }
     }
 
     hr {
@@ -146,7 +178,6 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: $light-background-secondary;
   font-size: 1rem;
   font-weight: 600;
   border-radius: 8px;
@@ -154,11 +185,25 @@
   padding: 0;
   cursor: pointer;
   appearance: none;
+  // Default
+  background: $light-background-secondary;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-background-secondary;
   }
 
+  @media (prefers-color-scheme: light) {
+    background: $light-background-secondary;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-secondary;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-secondary;
+  }
+
   + .button {
     margin-left: 10px;
   }