Merge pull request #89 from rubyuy/improve_show_styles

Improve meetup show styles

Author: jpbalarini

_layouts/meetup.html

@@ -8,7 +8,7 @@
     <main>
       <article id="view-meetup">
           <section>
-              <h2>Host</h2> 
+              <h2>Host</h2>
               <a href="{{ site.data.companies[page.host].url }}">{{ site.data.companies[page.host].name }}</a>
           </section>
 
@@ -20,8 +20,7 @@ <h2>Speakers</h2>
                   <li>
                     {% if site.data.people[speaker].github %}
                       <a href="https://github.com/{{ site.data.people[speaker].github }}">
-                        <img src="https://github.com/{{ site.data.people[speaker].github }}.png?size=30" alt="{{ site.data.people[speaker].name }}" style="border-radius: 50%; width: 30px"/>
-                        {{ site.data.people[speaker].name }}
+                        <img src="https://github.com/{{ site.data.people[speaker].github }}.png?size=30" alt="{{ site.data.people[speaker].name }}" style="border-radius: 50%; width: 30px"/>{{ site.data.people[speaker].name }}
                       </a>
                     {% else %}
                       {{ site.data.people[speaker].name }}
@@ -35,21 +34,23 @@ <h2>Speakers</h2>
           <section>
             <h2>Charlas</h2>
             {% for talk in page.talks %}
-              {% assign speakers = "" | split: ',' %}
-              {% for speaker in talk.speakers %}
-                {% assign speakers = speakers | push: site.data.people[speaker].name %}
-              {% endfor %}
-              <h3><span>{{ talk.title }}</span> - {{ speakers | join: ", " }}</h3>
-              <p>{{ talk.description }}<p>
+              <div class="talk">
+                {% assign speakers = "" | split: ',' %}
+                {% for speaker in talk.speakers %}
+                  {% assign speakers = speakers | push: site.data.people[speaker].name %}
+                {% endfor %}
+                <h3><span>{{ talk.title }}</span> - {{ speakers | join: ", " }}</h3>
+                <p>{{ talk.description }}<p>
 
-              {% if talk.recording %}
-              <div class="keep-aspect-ratio">
-                <iframe src="{{ talk.recording }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-                {% endif %}
+                {% if talk.recording %}
+                <div class="keep-aspect-ratio">
+                  <iframe src="{{ talk.recording }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                  {% endif %}
 
-                {% if talk.slides %}
-                  <iframe src="{{ talk.slides }}" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></br>
-                {% endif %}
+                  {% if talk.slides %}
+                    <iframe src="{{ talk.slides }}" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></br>
+                  {% endif %}
+                </div>
               </div>
             {% endfor %}
           </section>

_sass/application.scss

@@ -1,5 +1,6 @@
 body {
   font-family: 'Syncopate', sans-serif;
+  background-color: #F6EEEC;
 }
 
 h1 {

_sass/view_meetup.scss

@@ -11,6 +11,11 @@
     margin-top: 1.25rem;
     display: flex;
     flex-direction: column;
+    margin-bottom: 3rem;
+
+    &:first-child {
+      margin-top: 4rem;
+    }
   }
 
   a {
@@ -22,7 +27,7 @@
     font-weight: bold;
     font-size: 2.5rem;
   }
-  
+
   h3 {
     margin-bottom: 1rem;
     font-size: 1.25rem;
@@ -47,4 +52,8 @@
       height: 100%;
     }
   }
+
+  .talk {
+    margin-bottom: 2rem;
+  }
 }