feat(#9): improve slide author for real use case

Author: peterpeterparker

src/components/slides/deckdeckgo-slide-author/deckdeckgo-slide-author.scss

@@ -1,16 +1,15 @@
 @import "../deckdeckgo-slides";
 
 div.deckgo-slide {
-  flex-flow: row wrap;
+  flex-flow: row;
 
   padding: 0;
   width: 100vw;
 }
 
 div.deckgo-slide-author {
-  flex: 1;
-
   height: 100%;
+  width: 50%;
 
   display: flex;
   align-items: var(--slide-author-align, inherit);
@@ -27,8 +26,7 @@ div.deckgo-slide-author {
 
     img {
       border-radius: 50%;
-      width: var(--slide-author-img-size, 16rem);
-      height: var(--slide-author-img-size, 16rem);
+      width: var(--slide-author-img-size, 80%);
     }
   }
 
@@ -41,10 +39,26 @@ div.deckgo-slide-author {
 
     div.deckgo-slide-author-social {
       display: grid;
-      grid-template-columns: 30% 30% 30%;
+      grid-template-columns: 50% 50%;
       grid-gap: 10px;
 
       padding-top: var(--slide-author-social-padding-top, 32px);
     }
   }
 }
+
+@media(min-width: 992px) {
+  div.deckgo-slide-author {
+    &.deckgo-slide-author-start {
+      width: calc(100% / 3 * 1);
+    }
+
+    &.deckgo-slide-author-end {
+      width: calc(100% / 3 * 2);
+
+      div.deckgo-slide-author-social {
+        grid-template-columns: 30% 30% 30%;
+      }
+    }
+  }
+}

src/components/slides/deckdeckgo-slide-author/deckdeckgo-slide-author.tsx

@@ -39,12 +39,12 @@ export class DeckdeckgoSlideAuthor implements DeckdeckgoSlide {
       <div class="deckgo-slide-author deckgo-slide-author-end">
         <slot name="author"></slot>
         <div class="deckgo-slide-author-social">
-          <slot name="social-link-a"></slot>
-          <slot name="social-link-b"></slot>
-          <slot name="social-link-c"></slot>
-          <slot name="social-link-d"></slot>
-          <slot name="social-link-e"></slot>
-          <slot name="social-link-f"></slot>
+          <slot name="social-link"></slot>
+          <slot name="social-link"></slot>
+          <slot name="social-link"></slot>
+          <slot name="social-link"></slot>
+          <slot name="social-link"></slot>
+          <slot name="social-link"></slot>
         </div>
       </div>
     </div>;

src/components/social/deckdeckgo-social/deckdeckgo-social.scss

@@ -0,0 +1,11 @@
+a {
+  color: inherit;
+  text-decoration: inherit;
+
+  display: flex;
+  align-items: center;
+}
+
+::slotted([slot="icon"]) {
+  margin-right: 8px;
+}

src/index.html

@@ -26,17 +26,17 @@ <h2>David Dal Busco</h2>
       <p>Organizer of the Ionic Zürich <a href="https://www.meetup.com/Ionic-Zurich">Meetup</a></p>
       <p>Zürich, Switzerland</p>
     </div>
-    <div slot="social-link-a">
+    <div slot="social-link">
       <deckgo-social twitter="daviddalbusco">
         <img slot="icon" src="https://deckdeckgo.com/assets/img/deckdeckgo.png" style="width: 20px; vertical-align: middle;"/>
         twitter
       </deckgo-social>
     </div>
-    <div slot="social-link-b"><deckgo-social linkedin="david-dal-busco/">linkedin</deckgo-social></div>
-    <div slot="social-link-c"><deckgo-social medium="david.dalbusco">medium</deckgo-social></div>
-    <div slot="social-link-d"><deckgo-social github="peterpeterparker">github</deckgo-social></div>
-    <div slot="social-link-e"><deckgo-social full-url="https://forum.ionicframework.com/u/reedrichards/summary">forum</deckgo-social></div>
-    <div slot="social-link-f"><deckgo-social full-url="https://stackoverflow.com/users/5404186/peter-parker">stackoverflow</deckgo-social></div>
+    <div slot="social-link"><deckgo-social linkedin="david-dal-busco/">linkedin</deckgo-social></div>
+    <div slot="social-link"><deckgo-social medium="david.dalbusco">medium</deckgo-social></div>
+    <div slot="social-link"><deckgo-social github="peterpeterparker">github</deckgo-social></div>
+    <div slot="social-link"><deckgo-social full-url="https://forum.ionicframework.com/u/reedrichards/summary">forum</deckgo-social></div>
+    <div slot="social-link"><deckgo-social full-url="https://stackoverflow.com/users/5404186/peter-parker">stackoverflow</deckgo-social></div>
   </deckgo-slide-author>
 
   <deckgo-slide-content reveal="true">