refactor(page auteur): avatar + layout + read also

eko · Jun 16, 2017 · 5fc6487 · 5fc6487
1 parent 715da66
commit 5fc6487
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 28 deletions.
diff --git a/_includes/author_link.html b/_includes/author_link.html
@@ -1,6 +1,6 @@
 <!-- _includes/author_link.html -->
 {% for author in site.authors %}
   {% if author.login == include.login %}
-   - <a class="author-link" href="/authors/{{author.login}}">{{author.login}}</a>
+   - par <a class="author-link" href="/authors/{{author.login}}">{{author.login}}</a>
    {% endif %}
 {% endfor %}
diff --git a/_layouts/author.html b/_layouts/author.html
@@ -3,30 +3,38 @@
 ---
 
 <article>
-  <header>
-     <img src="/img/authors/{{page.login}}.jpg" style="max-width: 180px"/>
-      <h1 class="title">{{ page.name }}</h1>
-      <div class="author-social">
-          <ul>
-            {% include icons.html data=page %}
-        </ul>
-      </div>
-  </header>
+    <header class="page-heading">
+        <div class="avatar">
+            <img class="avatar-img" src="/img/authors/{{page.login}}.jpg"/>
+        </div>
+        <h1 class="page-heading-title">{{ page.name }}</h1>
+        <div class="author-social">
+            <ul>
+                {% include icons.html data=page %}
+            </ul>
+        </div>
+    </header>
 
-    <section class="post-content">
-      {{ content }}
-    </section>
-    <h3>Derniers articles :</h3>
-    <div class="posts">
-    {% for post in site.posts %}
-        {% if post.author == page.login %}
-        <div>
-              <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">
-                  {{ post.title }}
-              </a>
+    <section class="slice">
+        <div class="container post-content">
+            {{ content }}
         </div>
-        {% endif %}
-    {% endfor %}
-    </div>
+    </section>
 
+    <section class="slice">
+        <div class="read-also container">
+            <h3 class="read-also-title">Derniers articles :</h3>
+            <ul class="posts read-also-list">
+                {% for post in site.posts %}
+                {% if post.author == page.login %}
+                <li class="read-also-item">
+                    <a class="read-also-link" href="{{ post.url | prepend: site.baseurl }}">
+                        {{ post.title }}
+                    </a>
+                </li>
+                {% endif %}
+                {% endfor %}
+            </ul>
+        </div>
+    </section>
 </article>
diff --git a/_sass/includes/_author.scss b/_sass/includes/_author.scss
@@ -6,16 +6,15 @@
         line-height: 1.5;
         text-align: center;
     }
+
     li {
         display: inline;
-        margin-right: 0.4em;
+        margin-right: 0.4rem;
     }
+
     @media (max-width: 1100px) {
         ul {
             display: inline-block;
-            float: left;
-            padding-top: $padding-small;
-            text-align: left;
             width: 100%;
         }
     }

diff --git a/_sass/objects/_avatar.scss b/_sass/objects/_avatar.scss
@@ -0,0 +1,16 @@
+.avatar {
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    position: relative;
+    overflow: hidden;
+    margin: 0 auto;
+
+    &-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: auto;
+    }
+}