a11y and style updates

seriouslag · Oct 27, 2019 · 8c5a44e · 8c5a44e
1 parent 577cb98
commit 8c5a44e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/src/components/InstagramFeed.vue b/src/components/InstagramFeed.vue
@@ -1,5 +1,5 @@
 <template>
-<aside class="instagram-feed">
+<div class="instagram-feed">
   <template v-if="hasFeed">
     <h2 class="title" aria-label="Latest updates from instagram">Latest updates</h2>
     <div class="columns is-multiline is-centered">
@@ -38,7 +38,7 @@
       </div>
     </div>
   </template>
-</aside>
+</div>
 </template>
 
 <script lang="ts">

diff --git a/src/components/home/About.vue b/src/components/home/About.vue
@@ -1,13 +1,19 @@
 <template>
   <main class="about section columns">
     <div class="column">
-      <spotify-embed />
-      <spotify-player-embed />
-      <aside aria-label="Upcoming scheduled events">
+      <div class="area">
+        <section aria-label="Ultima spotify artist highlight">
+          <spotify-embed />
+        </section>
+        <section aria-label="Ultima spotify album player">
+          <spotify-player-embed />
+        </section>
+      </div>
+      <aside aria-label="Upcoming scheduled events" class="area">
         <event-list v-show="showEvents" @show="showEvents = true" />
       </aside>
     </div>
-    <aside class="column" v-show="showRightColumn" aria-label="Ultima Instagram's feed">
+    <aside class="column area" v-show="showRightColumn" aria-label="Ultima Instagram's feed">
       <instagram-feed v-show="showRightColumn" @show="handleShowRightColumn" />
     </aside>
   </main>

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,8 +1,10 @@
+@charset "utf-8";
+
 $primary: #a25387;
 $navbar-item-hover-background-color: rgba(36,36,36,0.5);
 @import '~bulma/bulma';
 
-* {
+body {
   font-family: 'Roboto', sans-serif;
 }
 
@@ -34,3 +36,13 @@ a {
     color: #234099;
   }
 }
+
+.column {
+  > :first-child {
+    margin: 0;
+  }
+}
+
+.area {
+  margin: 1em .5em;
+}