Add blog

emorihouse · Jul 21, 2018 · 1511069 · 1511069
1 parent 2a519a7
commit 1511069
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 8 deletions.
diff --git a/_includes/blog.html b/_includes/blog.html
@@ -0,0 +1,12 @@
+<div class="row row-eq-height">
+  {% for post in site.posts limit:4 %}
+    <div class="col-md-3 col-sm-6 post">
+      <a href="{{ post.url }}">
+        <img src="{{ post.image }}">
+        <div class="post-title">{{ post.title }}</div>
+      </a>
+    </div>
+  {% endfor %}
+</div>
+
+<a href="{{ base.url }}/blog" class="btn btn-light">ALL POST</a>
diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -1,7 +1,7 @@
 <header class="site-header">
 
   <nav class="navbar navbar-expand-xl navbar-light">
-    <a class="navbar-brand" href="#">emorihouse</a>
+    <a class="navbar-brand" href="/">emorihouse</a>
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -10,19 +10,22 @@
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item">
-          <a class="nav-link" href="#intro">Home</a>
+          <a class="nav-link" href="/#intro">Home</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#about">About</a>
+          <a class="nav-link" href="/#about">About</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#member">Member</a>
+          <a class="nav-link" href="/#member">Member</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#contact">Contact</a>
+          <a class="nav-link" href="/#contact">Contact</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#map">Map</a>
+          <a class="nav-link" href="/#map">Map</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/blog">Blog</a>
         </li>
       </ul>
     </div>

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -20,6 +20,12 @@ <h2 class="area-title">About</h2>
   </div>
 </div>
 
+<!--<div id="blog" class="container-fluid">-->
+  <!--<div class="text-center content">-->
+    <!--{% include blog.html %}-->
+  <!--</div>-->
+<!--</div>-->
+
 <div id="member" class="container-fluid">
   <h2 class="area-title">Member</h2>
 

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -0,0 +1,31 @@
+---
+layout: default
+title: emorihouse
+---
+
+<div class="container-fluid" id="post">
+  <h2 class="page-title text-left">{{page.title}}</h2>
+  <p class="page-date">{{page.date | date: "%Y-%m-%d"}}</p>
+
+  <div class="row page-body">
+    {{page.content}}
+  </div>
+
+  <div class="row page-link">
+    {% if page.next %}
+      <p class="float-left">
+        <a href="{{ page.next.url | relative_url }}">
+          <i class="fas fa-chevron-left fa-2x"></i>
+        </a>
+      </p>
+    {% endif %}
+
+    {% if page.previous %}
+      <p class="text-right link-prev">
+        <a href="{{ page.previous.url | relative_url }}">
+          <i class="fas fa-chevron-right fa-2x"></i>
+        </a>
+      </p>
+    {% endif %}
+  </div>
+</div>
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -91,8 +91,22 @@ a {
   }
 }
 
+
+.page-title {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+  display: inline-block;
+  text-align: center;
+  margin-top: 2em;
+  color: $color-dark;
+  font-weight: 600;
+  font-size: 1.5em;
+  letter-spacing: 2px;
+}
+
 .content {
-  padding: 2em .5em 5em .5em;
+  padding: 1em .5em 3em .5em;
   line-height: 1.8em;
   word-wrap: break-word;
 }
@@ -137,7 +151,7 @@ a {
     width: 100%;
     height: 35em;
     object-fit: cover;
-    opacity: .6;
+    opacity: .75;
   }
 }
 
@@ -293,3 +307,92 @@ a {
     }
   }
 }
+
+#blog {
+  height: 100%;
+  background-color: #ffffff;
+
+  .row {
+    margin-top: 2em;
+  }
+
+  img {
+    width: 100%;
+    height: 10rem;
+    object-fit: cover;
+    background-color: #fff;
+    opacity: 0.9;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  .content {
+    min-height: calc(90vh - 10rem);
+  }
+
+  .post {
+    margin-bottom: 1rem;
+  }
+
+  .post-title {
+    font-size: 1em;
+    font-weight: 600;
+    margin-top: 1em;
+    letter-spacing: 1px;
+  }
+}
+
+#post {
+  background-color: #ffffff;
+  height: 100%;
+  min-height: calc(100vh - 10rem);
+  width: 100%;
+
+  .page-title {
+    position: relative;
+    padding: 0.5rem;
+    display: inline-block;
+    color: $color-dark;
+    font-weight: 600;
+    font-size: 1.5em;
+    letter-spacing: 2px;
+  }
+
+  .page-date {
+    padding-top: 0.5rem;
+    padding-left: 0.5rem;
+    color: #686868;
+  }
+
+  .page-body {
+    display: block;
+    padding: 1.5rem;
+    line-height: 1.7em;
+  }
+
+  .page-link {
+    position: relative;
+    display: block;
+    padding: 2em 1em 1em;
+    margin: 0 auto;
+    line-height: 1.25;
+    background-color: #fff;
+    border: none;
+  }
+
+  img {
+    width: 100%;
+    max-height: 50vh;
+    object-fit: cover;
+  }
+}
+
+.btn {
+  color: #fff;
+  background-color: $color-dark;
+  border-color: $color-dark;
+  border-radius: 0;
+  padding: 1em;
+}
diff --git a/blog/index.html b/blog/index.html
@@ -0,0 +1,21 @@
+---
+layout: default
+title: emorihouse
+---
+
+<div class="container-fluid" id="blog">
+  <h2 class="page-title">Blog</h2>
+
+  <div class="content">
+    <div class="row row-eq-height">
+      {% for post in site.posts %}
+        <div class="col-lg-3 col-md-4 col-sm-6 post">
+          <a href="{{ post.url }}">
+            <img src="{{ post.image }}">
+            <div class="post-title">{{ post.title }}</div>
+          </a>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>