[new feature]landing page section(card, normal) added

landing page section(card, normal) added #3
and doc pagination link order bug fix #5

6 files changed, 234 insertions, 6 deletions

diff --git a/assets/sass/abstracts/_variables.scss b/assets/sass/abstracts/_variables.scss
index 851d64c..b59062c 100644
--- a/assets/sass/abstracts/_variables.scss
+++ b/assets/sass/abstracts/_variables.scss
@@ -21,7 +21,7 @@ $code-font-stack: Consolas,
               Courier, 
               monospace !default;
 
-$z-indexes: ("drawer", "modal", "dropdown", "navbar", "header", "gtt", "clipboard", "grid", "search-btn", "search", "menu", "content", "footer", "taxo", "toc", "gallery-mask");
+$z-indexes: ("drawer", "modal", "dropdown", "navbar", "header", "gtt", "clipboard", "grid", "search-btn", "search", "menu", "content", "footer", "taxo", "toc", "gallery-mask", "section-title", "highlight");
 
 $breakpoints: (
   'xs': 0,
diff --git a/assets/sass/base/_helpers.scss b/assets/sass/base/_helpers.scss
index e25282a..4a19e1c 100644
--- a/assets/sass/base/_helpers.scss
+++ b/assets/sass/base/_helpers.scss
@@ -20,6 +20,11 @@
   @include flexbox();
 }
 
+.flexcolumn {
+  @include flexbox();
+  @include flex-direction(column);
+}
+
 .jc-center {
   @include justify-content(center);
 }
diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss
index ede495d..ee38ef7 100644
--- a/assets/sass/components/_button.scss
+++ b/assets/sass/components/_button.scss
@@ -2,8 +2,6 @@
   border: none;
   outline: none;
   padding: 0.75rem;
-  margin-top: 2.5rem;
-  margin-right: 0.5rem;
   border-radius: 0.25rem;
   text-decoration: none;
   cursor: pointer;
diff --git a/assets/sass/components/_section.scss b/assets/sass/components/_section.scss
new file mode 100644
index 0000000..53a6ef4
--- /dev/null
+++ b/assets/sass/components/_section.scss
@@ -0,0 +1,214 @@
+.section {

+  &__card {

+    padding: 1rem 0.75rem 2rem 0.75rem;

+    position: relative;

+

+    @media only screen and (max-width: 960px) {

+      [data-mobile="false"] {

+        display: none;

+      }

+    }

+

+    @media only screen and (min-width: 960px) {

+      [data-mobile="true"] {

+        display: none;

+      }

+    }

+

+    &--header {

+      position: relative;

+      margin: 2rem 0;

+

+      @include flexbox();

+    }

+

+    &--title {

+      z-index: z('section-title');

+      font-weight: 700;

+      font-family: $title-font;

+    }

+

+    &--subtitle {

+      font-weight: bold;

+      font-family: $title-font;

+      margin-bottom: 1.5rem;

+      text-align: center;

+    }

+

+    &--main {

+      padding: 0.5rem 0;

+      @include flexbox();

+    }

+

+    &--item {

+      width: 33.33%;

+      text-decoration: none;

+

+      @include flex-grow(1);

+

+      &:not(:first-child):not(:last-child) {

+        margin: 0 1rem;

+      }

+

+      &:first-child {

+        margin: 0 1rem 0 0;

+      }

+

+      &:last-child {

+        margin: 0 0 0 1rem;

+      }

+    }

+

+    &--img {

+      margin: auto;

+      display: block;

+

+      &-wrapper {

+        width: 100%;

+        margin-bottom: 1rem;

+      }

+    }

+

+    &--content {

+      margin-bottom: 0.75rem;

+      font-size: 1.125rem;

+      word-wrap: break-word;

+    }

+

+    @media only screen and (max-width: 960px) {

+      &--item {

+        width: 100%;

+        margin: 0.5rem 0 2rem 0 !important;

+

+        @include flexbox();

+      }

+

+      &--main {

+        @include flexbox();

+        @include flex-direction(column);

+        @include align-items(flex-start);

+      }

+

+      &--subtitle {

+        text-align: left;

+      }

+

+      &--img {

+        display: inline-block;

+        width: 100%;

+

+        &-wrapper {

+          min-width: 112px;

+          max-width: 112px;

+          margin-right: 1rem;

+        }

+      }

+

+      &--content {

+        margin-bottom: 1.5rem;

+      }

+    }

+  }

+

+  &__normal {

+    position: relative;

+

+    @include flexbox();

+

+    &--content {

+      margin-bottom: 0.75rem;

+      font-size: 1.125rem;

+      word-wrap: break-word;

+    }

+

+    &--subtitle {

+      font-weight: bold;

+      font-family: $title-font;

+      margin: 2rem 0;

+    }

+

+    &--img {

+      width: 100%;

+      min-width: 100px;

+      height: 100%;

+

+      &-wrapper {

+        margin: auto 0;

+        padding: 0 1rem;

+

+        &[data-position="left"] {

+          margin-right: 5rem;

+        }

+

+        &[data-position="right"] {

+          margin-left: 5rem;

+        }

+      }

+    }

+

+    @media only screen and (max-width: 600px) {

+      @include flex-direction(column);

+

+      &--img {

+        &-wrapper {

+          &[data-position="left"] {

+            margin: 0 2rem;

+          }

+

+          &[data-position="right"] {

+            margin: 0 2rem;

+          }

+        }

+      }

+    }

+  }

+

+  &__highlight {

+    z-index: z('highlight');

+    position: absolute;

+    left: 0;

+    bottom: -0.25rem;

+    width: 100%;

+    height: 20px;

+  }

+

+  &__btn {

+    width: 100%;

+    cursor: pointer;

+    border: none;

+    outline: none;

+    border-radius: 0.25rem;

+

+    @include on-event {

+      border: 1px solid white;

+    }

+

+    &--micro {

+      height: 20px;

+      font-size: 14px;

+      line-height: 14px;

+    }

+

+    &--mini {

+      height: 24px;

+      font-size: 15px;

+      line-height: 15px;

+    }

+

+    &--small {

+      height: 28px;

+      font-size: 16px;

+    }

+

+    &--medium {

+      height: 32px;

+      font-size: 17px;

+      line-height: 17px;

+    }

+

+    &--large {

+      height: 36px;

+      font-size: 18px;

+    }

+  }

+}
\ No newline at end of file
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 7cf133a..e721f91 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -37,6 +37,7 @@ $light-link-hover-color: {{ .Site.Data.color.light_link_hover_color }};
 @import 'components/expand';
 @import 'components/bgcolor';
 @import 'components/tag';
+@import 'components/section';
 
 @import 'layout/grid';
 @import 'layout/footer';
diff --git a/assets/sass/pages/_home.scss b/assets/sass/pages/_home.scss
index 12dcd2d..a1f7f49 100644
--- a/assets/sass/pages/_home.scss
+++ b/assets/sass/pages/_home.scss
@@ -1,7 +1,7 @@
 .home {
   &__landing {
     width: 100%;
-    height: 600px;
+    min-height: 500px;
     
     @include flexbox();
     @include align-items(center);
@@ -16,9 +16,10 @@
     }
 
     &--txt {
-      margin: 0.5rem;
+      margin: 2.5rem 0.5rem;
       .title {
-        font-size: 44px;
+        font-size: 56px;
+        font-weight: 900;
         font-family: $title-font;
       }
 
@@ -34,6 +35,15 @@
     &--link {
       text-decoration: none !important;
     }
+
+    &--btn {
+      margin-top: 2.5rem;
+      margin-right: 0.5rem;
+    }
+
+    &--btn2 {
+      margin: 0.5rem;
+    }
   }
 
   &__social {