한국어사용자페이지에 Vue.js 적용한 서비스 소개페이지 추가 (#64)

_data/apps.yml

@@ -0,0 +1,4 @@
+- name: Vue.js
+  logo: vue.png
+  url: https://vuejs.org
+  description: 프로그레시브 JavaScript 프레임워크

_includes/header.html

@@ -2,13 +2,13 @@
   <div class="mt2 wrap">
     <div class="measure">
       <a href="{{ site.url }}" class="site-title">{{ site.title }}</a>
-      <nav class="site-nav">
-        {% include navigation.html %}
-      </nav>
-      <div class="clearfix"></div>
       {% if site.show_social_icons %}
         {% include social_links.html %}
       {% endif %}
+      <div class="clearfix"></div>
+      <nav class="site-nav">
+        {% include navigation.html %}
+      </nav>
     </div>
   </div>
 </header>

_includes/navigation.html

@@ -1,11 +1,14 @@
-<a href="https://kr.vuejs.org" target="_blank">가이드</a>
+<a href="https://kr.vuejs.org" target="_blank">공식가이드</a>
+<a href="/">글모음</a>
 {% for page in site.pages %}
     {% if page.tags contains "about" %}
         <a href="{{ page.url }}" >{{ page.title }}</a>
     {% endif %}
-{% endfor %}
-{% for page in site.pages %}
+    {% if page.tags contains "posts" %}
+        <a href="{{ page.url }}" >{{ page.title }}</a>
+    {% endif %}
     {% if page.tags contains "korean" %}
         <a href="{{ page.url }}">{{ page.title }}</a>
     {% endif %}
 {% endfor %}
+<a href="/apps">APP소개</a>

_sass/_apps.scss

@@ -0,0 +1,48 @@
+
+.app-logo-img {
+    width:30px;
+    height:30px;
+}
+
+ul.ul-app {
+    padding: 0;
+    margin: 0;
+}
+
+li.li-app {
+    list-style-type: none;
+}
+
+li.li-app a {
+    display: flex;
+    padding:10px;
+}
+li.li-app a:hover {
+    background-color:#f7f6f6;
+    cursor: pointer;
+}
+
+li.li-app .app-logo-wrap {
+    width: 50px;
+    display: inline-block;
+}
+
+li.li-app .app-logo-wrap img.app-logo-img {
+    width: 100%;
+    height: auto;
+}
+
+li.li-app span.app-name {
+    padding: 0 20px;
+    line-height:48px;
+    vertical-align: bottom;
+}
+
+li.li-app span.app-description {
+    flex: 1;
+    line-height:48px;
+    vertical-align: bottom;
+    white-space:nowrap;
+    text-overflow:ellipsis;
+    overflow: hidden;
+}

_sass/_media-queries.scss

@@ -26,7 +26,7 @@
   }
 
   .site-header .site-nav {
-    float: right;
+    // float: right;
     margin-top: .25rem;
   }
 

apps.html

@@ -0,0 +1,20 @@
+---
+layout: page
+tags: apps
+---
+
+<h2>Vue로 만든 애플리케이션 소개</h2>
+
+<ul class="ul-app">
+{% for app in site.data.apps %}
+    <li class="li-app">
+        <a href="{{ app.url }}" target="_blank">
+            <div class="app-logo-wrap">
+                <img class="app-logo-img" src="/images/apps/{{ app.logo }}">
+            </div>
+            <span class="app-name">{{ app.name }}</span>
+            <span class="app-description">{{ app.description }}</span>
+        </a>
+    </li>
+{% endfor %}
+</ul>

css/pixyll.scss

@@ -33,3 +33,4 @@
 @import 'gists';
 @import 'measure';
 @import 'pagination';
+@import 'apps';