clok layout

ZACHARIAgs · Jul 5, 2022 · 4fd4ff5 · 4fd4ff5
1 parent 9168b52
commit 4fd4ff5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/components/NowPlaying.vue b/src/components/NowPlaying.vue
@@ -19,14 +19,14 @@
     </div>
     <div v-else class="now-playing" :class="getNowPlayingClass()">
       <h1 class="now-playing__idle-heading">
-      <div class="hour">{{hours}}</div>
-      <div class="dots">:</div>
-      <div class="min">{{minutes}}</div>
+      <div class="now-playing__hour">{{hours}}</div>
+      <div class="now-playing__dots">:</div>
+      <div class="now-playing__min">{{minutes}}</div>
       </h1>
-      <h2 class="DateTime">
-      <div class="hour">{{weekday}}</div>
-      <div class="day">{{day}}</div>
-      <div class="month">{{month}}</div>
+      <h2 class="now-playing__date">
+      <div class="now-playing__hour">{{weekday}}</div>
+      <div class="now-playing__day">{{day}}</div>
+      <div class="now-playing__month">{{month}}</div>
       </h2>
     </div>
   </div>

diff --git a/src/styles/components/now-playing.scss b/src/styles/components/now-playing.scss
@@ -69,12 +69,14 @@
   &__idle-heading {
     width: 100%;
     text-align: center;
+    display: flex;
     flex-flow: row nowrap;
 
   }
 
   &__date {
     width: 100%;
+    display: flex;
     flex-flow: row nowrap;
     justify-content: center;
   }