Feat: Mobile-first theming

public/aura-player-theme.css

+
+/** MATERIAL DESIGN SETTINGS **/
+
 /* Theme colors. */
 :root {
     --mdc-theme-primary: #40b3ff;
@@ -39,9 +42,7 @@
     --mdc-layout-grid-column-width-phone: 72px;
   }
 
-
-
-/*** AURA ICONS ***/
+/** AURA ICONS **/
 
 .aura-icons > div {
   background-image: url(assets/aura-logo.png);
@@ -62,7 +63,7 @@
   color: transparent;
 }
 
-/*** AURA CARDS ***/
+/** AURA CARDS **/
 
 .aura-card {
   margin: 8px;
@@ -74,19 +75,64 @@
   white-space: nowrap;
   overflow: hidden;
 }
-.card-container.detail h2 {
-  font-size: 1.8rem;
+
+
+/** RESPONSIVE SETTINGS **/
+
+/* Custom, iPhone Retina */
+@media only screen and (min-width : 320px) {
+  .card-container h1 {
+    font-size: 1.3rem;
+  }
+  .card-container h2 {
+    font-size: 1.2rem;
+  }
+  .card-container h3 {
+    font-size: 1.0rem;
+  }
+  .card-container h4 {
+    font-size: 0.9rem;
+  }
 }
-.card-container.detail h3 {
-  font-size: 1.6rem;
+
+/* Extra Small Devices, Phones */
+@media only screen and (min-width : 480px) {
 }
 
-/** MISC **/
+/* Small Devices, Tablets */
+@media only screen and (min-width : 768px) {
+  .card-container h1 {
+    font-size: 1.8rem;
+  }
+  .card-container h2 {
+    font-size: 1.5rem;
+  }
+  .card-container h3 {
+    font-size: 1.3rem;
+  }
+  .card-container h4 {
+    font-size: 1.2rem;
+  }
+  .card-container.list .aura-card.category {
+    width: 400px;
+  }
+  .card-container.list:not(.contained) .aura-card.show {
+    width: calc(50% - 32px);
+  }
+  .card-container.detail .aura-card.show .show-image {
+    width: 320px;
+    height: 180px;
+  }
+  .card-container.list:not(.contained) .aura-card.host {
+    width: 280px;
+    height: 280px;
+  }
+}
 
-.mdc-layout-grid {
-  width: 100%;
+/* Medium Devices, Desktops */
+@media only screen and (min-width : 992px) {
 }
 
-.language-key {
-  text-transform: uppercase;
+/* Large Devices, Wide Screens */
+@media only screen and (min-width : 1200px) {
 }
\ No newline at end of file

src/CategoryList.svelte

@@ -45,14 +45,9 @@
 </script>
 
 <style lang="scss">
-
   /* SMUI components need to be selected via global namespace */
-
   * :global(.aura-card.category) {
-    width: 400px;
-    height: 300px;
-    margin: 4px;
-    float: left;
+    height: 270px;
   }
   * :global(.aura-card.category > div) {
     height: 100%;

src/HostList.svelte

@@ -86,19 +86,14 @@
   }
 
   /* SMUI components need to be selected via global namespace */
-
   * :global(.load-more > button) {
     width: 100%;
   }
   * :global(.list .aura-card.host) {
-    min-width: 280px;
-    min-height: 280px;
-    width: 280px;
-    height: 280px;
+    width: 100%;
     margin: 4px;
     float: left;
   }
-
 </style>
 
 <div class="aura-hosts">

src/ShowList.svelte

@@ -115,13 +115,9 @@
 </script>
 
 <style lang="scss">
-
   /* SMUI components need to be selected via global namespace */
-
   * :global(.aura-card.show) {
-    min-width: 320px;
-    min-height: 200px;
-    width: calc(50% - 32px);
+    width: 100%;
     float: left;
   }
   * :global(.show-content) {

src/cards/HostCardBig.svelte

@@ -19,11 +19,12 @@
 
 <style lang="scss">
   /* SMUI components need to be selected via global namespace */
-
+  * :global(.show-list-small) {
+    width: calc(100% - 16px);
+  }
   * :global(.show-list-small .aura-card.show) {
     background-color: var(--mdc-theme-surface);
   }
-
   * :global(.show-list-small .card-media-square) {
     max-width: 72px;
     max-height: 72px;
@@ -99,7 +100,7 @@
         {#if shows}
           <div class="show-section">
             <h2>{labelShows}</h2>
-            <div class="show-list-small card-container list">
+            <div class="show-list-small card-container list contained">
               {#each shows as show}
                 <ShowCardSmall {show} {urlShowDetail} {renderhtml} />
               {/each}

src/cards/ShowCardBig.svelte

@@ -33,19 +33,19 @@
 </script>
 
 <style lang="scss">
-
   /* SMUI components need to be selected via global namespace */
-
   * :global(.header) {
     padding: 1rem 1rem 0 1rem;
   }
   * :global(.subtitle) {
     margin-top: 0;
   }
+  * :global(.image-content) {
+    padding: 0;
+  }
   * :global(.show-image) {
+    width: 100%;
     height: 180px;
-    width: 320px;
-    // background-color: #eee;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
@@ -92,7 +92,6 @@
     padding-right: 8px;
     margin-left: -42px;
   }
-
 </style>
 
 <template>
@@ -158,7 +157,7 @@
 
             {#if hosts}
             <Content class="host-section">
-              <div class="host-list-small card-container list">
+              <div class="host-list-small card-container list contained">
                 {#each hosts as host}
                   <HostCardAvatar {host} {urlHostDetail} {renderhtml} displayOverlay={true} />
                 {/each}
@@ -174,7 +173,7 @@
 
               {#if episodes}
                 <h2 class="title-episode-list">{labelEpisodes}</h2>
-                <div class="episode-list-small card-container list current-episodes">
+                <div class="episode-list-small card-container list contained current-episodes">
                   {#each episodes as episode}
                     <span class={episode.isCurrent ? 'highlight' : ''}>
                       <EpisodeCardSmall

src/common.css

 
+/** Cards **/
+
+.aura-card {
+	float: left;
+	margin: 8px;
+	width: calc(100% - 16px);
+}
+
 /** Buttons **/
 
 button {
@@ -12,20 +20,28 @@ button {
 	display: none;
 }
 
+/** Misc **/
+
+.mdc-layout-grid {
+	width: 100%;
+  }
+
+.language-key {
+	text-transform: uppercase;
+}
+
 /** Loading Spinner **/
 
 .loading {
 	width: 100%;
 	text-align: center;
  }
-
 .aura-spinner {
 	display: inline-block;
 	position: relative;
 	width: 40px;
 	height: 40px;
 }
-
 .aura-spinner div {
 	position: absolute;
 	border: 4px solid gray;
@@ -33,11 +49,9 @@ button {
 	border-radius: 50%;
 	animation: aura-spinner 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 }
-
 .aura-spinner div:nth-child(2) {
 	animation-delay: -0.5s;
 }
-
 @keyframes aura-spinner {
 	0% {
 		top: 18px;