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

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

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,

assets/sass/base/_helpers.scss

@@ -20,6 +20,11 @@
   @include flexbox();
 }
 
+.flexcolumn {
+  @include flexbox();
+  @include flex-direction(column);
+}
+
 .jc-center {
   @include justify-content(center);
 }

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;

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;
+    }
+  }
+}

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';

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 {

layouts/partials/header/site-header.html

@@ -2,11 +2,11 @@
   <header class="header home__banner--wrapper">
     <div class="divider">
       <div class="lmr">
-        <div class="home__banner">
-          {{ if $.Param "updatesBanner" }}
+        {{ if $.Param "updatesBanner" }}
+          <div class="home__banner">
             {{ ($.Param "updatesBanner") | markdownify }}
-          {{ end }}
-        </div>
+          </div>
+        {{ end }}
       </div>
     </div>
   </header>

layouts/partials/main/component/pagination-single.html

@@ -2,36 +2,36 @@
 <div class="grow"></div>
 <nav class="pagination-single">
   {{ if eq ($.Param "languagedir") "rtl" }}
-    {{ with .NextInSection }}
+    {{ with .PrevInSection }}
       <a href="{{ .Permalink }}" title="{{ .Title }}" class="pagination-single__right">
         <div class="pagination-single__icon">
           {{ partial "svgs/arrow-forward.svg" (dict "width" 22 "height" 22) }}
         </div>
-        <div class="pagination-single__right-title">{{ .Title }}</div>
+        <div class="pagination-single__left-title">{{ .Title }}</div>
       </a>
     {{ end }}
     <div class="grow"></div>
-    {{ with .PrevInSection }}
+    {{ with .NextInSection }}
       <a href="{{ .Permalink }}" title="{{ .Title }}" class="pagination-single__left">
-        <div class="pagination-single__left-title">{{ .Title }}</div>
+        <div class="pagination-single__right-title">{{ .Title }}</div>
         <div class="pagination-single__icon">
           {{ partial "svgs/arrow-back.svg" (dict "width" 22 "height" 22) }}
         </div>
       </a>
     {{ end }}
   {{ else }}
-    {{ with .PrevInSection }}
+    {{ with .NextInSection }}
       <a href="{{ .Permalink }}" title="{{ .Title }}" class="pagination-single__left">
         <div class="pagination-single__icon">
           {{ partial "svgs/arrow-back.svg" (dict "width" 22 "height" 22) }}
         </div>
-        <div class="pagination-single__left-title">{{ .Title }}</div>      
+        <div class="pagination-single__right-title">{{ .Title }}</div>
       </a>
     {{ end }}
     <div class="grow"></div>
-    {{ with .NextInSection }}
-      <a href="{{ .Permalink }}" title="{{ .Title }}" class="pagination-single__right">      
-        <div class="pagination-single__right-title">{{ .Title }}</div>
+    {{ with .PrevInSection }}
+      <a href="{{ .Permalink }}" title="{{ .Title }}" class="pagination-single__right">
+        <div class="pagination-single__left-title">{{ .Title }}</div>
         <div class="pagination-single__icon">
           {{ partial "svgs/arrow-forward.svg" (dict "width" 22 "height" 22) }}
         </div>

layouts/partials/main/home.html

@@ -1,10 +1,6 @@
 <div class="mid">
   <main class="main">
-    <div class="divider">
-      <div class="lmr">
-        {{ partial "main/landing/home-landing.html" . }}
-        {{ partial "main/landing/home-social.html" . }}
-      </div>
-    </div>
+    {{ partial "main/landing/home-landing.html" . }}
   </main>
+  {{ partial "main/landing/home-sections.html" . }}
 </div>

layouts/partials/main/landing/home-landing.html

@@ -1,36 +1,67 @@
 <div class="divider">
   <div class="lmr">
     <div class="home__landing">
-      <div class="home__landing--img">
-        <img src="{{ $.Param "landingImage" | relURL }}" alt="Site Landing Page image">
-      </div>
-      <div class="home__landing--txt">
-        {{ if $.Param "landingTitle" }}
-          {{ range $.Param "landingTitle" }}
-          <div class="title" style="{{ with $.Param "titleColor" }}color:{{ . }}{{ end }};">
-            {{ . }}
-          </div>
+      {{ if $.Param "landingImage" }}
+        <div class="home__landing--img">
+          <img src="{{ $.Param "landingImage" | relURL }}" alt="Site Landing Page image">
+        </div>
+        <div class="home__landing--txt">
+          {{ if $.Param "landingTitle" }}
+            {{ range $.Param "landingTitle" }}
+            <div class="title" style="{{ with $.Param "titleColor" }}color:{{ . }}{{ end }};">
+              {{ . }}
+            </div>
+            {{ end }}
           {{ end }}
-        {{ end }}
-          {{ if $.Param "spaceBetweenTitleText" }}
-            <div style="height: {{ $.Param "spaceBetweenTitleText" }}px"></div>
+            {{ if $.Param "spaceBetweenTitleText" }}
+              <div style="height: {{ $.Param "spaceBetweenTitleText" }}px"></div>
+            {{ end }}
+          {{ if $.Param "landingText" }}
+            {{ range $.Param "landingText" }}
+              <div class="text" style="{{ with $.Param "textColor" }}color:{{ . }}{{ end }};">
+                {{ . }}
+              </div>
+            {{ end }}
+          {{ end }}
+
+          {{ range .Params.buttons }}
+            <a href="{{ .link }}" target="{{ if in .link "http" }}_blank{{ else }}_self{{ end }}" rel="noreferrer" class="home__landing--link">
+              <button class="button home__landing--btn" aria-label="{{ .text }}" data-color="{{ with .color }}{{ . }}{{ end }}">
+                {{ .text }}
+              </button>
+            </a>
           {{ end }}
-        {{ if $.Param "landingText" }}
-          {{ range $.Param "landingText" }}
-            <div class="text" style="{{ with $.Param "textColor" }}color:{{ . }}{{ end }};">
+        </div>
+      {{ else }}
+        <div class="home__landing--txt">
+          {{ if $.Param "landingTitle" }}
+            {{ range $.Param "landingTitle" }}
+            <div class="title" style="{{ with $.Param "titleColor" }}color:{{ . }}{{ end }};">
               {{ . }}
             </div>
+            {{ end }}
           {{ end }}
-        {{ end }}
-
-        {{ range .Params.buttons }}
-        <a href="{{ .link }}" target="{{ if in .link "http" }}_blank{{ else }}_self{{ end }}" rel="noreferrer" class="home__landing--link">
-          <button class="button" aria-label="{{ .text }}" data-color="{{ with .color }}{{ . }}{{ end }}">
-            {{ .text }}
-          </button>
-        </a>
-        {{ end }}
-      </div>
+            {{ if $.Param "spaceBetweenTitleText" }}
+              <div style="height: {{ $.Param "spaceBetweenTitleText" }}px"></div>
+            {{ end }}
+          {{ if $.Param "landingText" }}
+            {{ range $.Param "landingText" }}
+              <div class="text" style="{{ with $.Param "textColor" }}color:{{ . }}{{ end }};">
+                {{ . }}
+              </div>
+            {{ end }}
+          {{ end }}
+        </div>
+        <div class="flexcolumn">
+          {{ range .Params.buttons }}
+            <a href="{{ .link }}" target="{{ if in .link "http" }}_blank{{ else }}_self{{ end }}" rel="noreferrer" class="home__landing--link">
+              <button class="button home__landing--btn2" aria-label="{{ .text }}" data-color="{{ with .color }}{{ . }}{{ end }}">
+                {{ .text }}
+              </button>
+            </a>
+          {{ end }}
+        </div>
+      {{ end }}
     </div>
   </div>
 </div>

layouts/partials/main/landing/home-sections.html

@@ -0,0 +1,15 @@
+{{ range .Params.sections }}
+  <section style="background-color: {{ .bgcolor }};">
+    <div class="divider">
+      <div class="lmr">
+        {{ if eq .type "card" }}
+          {{ partial "main/landing/section-card.html" . }}
+        {{ else if eq .type "normal" }}
+          {{ partial "main/landing/section-normal" . }}
+        {{ else }}
+          {{ printf "%#v" "Not supported type" }}
+        {{ end }}
+      </div>
+    </div>
+  </section>
+{{ end }}

layouts/partials/main/landing/section-card.html

@@ -0,0 +1,66 @@
+{{ $headerFontSize := 32 }}
+<div class="section__card" style="color: {{ .color | default "#fff" }}">
+  {{ with .header }}
+    {{ $headerFontSize = .fontSize }}
+    {{ $header := . }}
+    <header class="section__card--header">
+      {{ with .title }}
+        <h2 class="section__card--title" style="font-size:{{ $header.fontSize }}px; color:{{ $header.color | default "#fff" }};">{{ . }}</h2>
+      {{ end }}
+      {{ with .hlcolor }}
+        <div class="section__highlight" style="width: {{ $header.width | default "220" }}px; background-color: {{ . | default "transparent" }};"></div>
+      {{ end }}
+    </header>
+  {{ end }}
+  {{ with .description }}
+    <div class="section__card--main section__card--content" style="color: {{ $.color | default "#fff" }};">
+      {{ . | markdownify }}
+    </div>
+  {{ end }}
+  {{ with .cards }}
+    <div class="section__card--main">
+      {{ range . }}
+        {{ $card := . }}
+        <div class="section__card--item">
+          {{ with .image }}
+            <div class="section__card--img-wrapper">
+              <img data-src="{{ . | relURL }}" alt="{{ $card.subtitle | default "section image" }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload section__card--img"/>
+            </div>
+          {{ end }}
+          <div class="section__card--submain">
+            {{ with .subtitle }}
+              <div class="section__card--subtitle" style="font-size:{{ with $headerFontSize }}{{ sub (int .) 4 }}px;{{ end }} color:{{ $card.color | default "#fff" }}; text-align: {{ $card.subtitlePosition | default "center" }}">
+                {{ . }}
+              </div>
+            {{ end }}
+            {{ with .description }}
+              <div class="section__card--content" style="color: {{ $card.color | default "#fff" }};">
+                {{ . | markdownify }}
+              </div>
+            {{ end }}
+            {{ with .button }}
+              <a href="{{ .link }}" class="section__card--item" target="{{ .target }}" rel="{{ if eq .target "_blank" }}noreferrer{{ end }}" data-mobile="true">
+                <button class="section__btn section__btn--{{ .size }}" style="background-color: {{ .bgcolor | default "#000" }}; color: {{ .color | default "#fff" }};">{{ .name }}</button>
+              </a>
+            {{ end }}
+          </div>
+        </div>
+      {{ end }}
+    </div>
+  {{ end }}
+  {{ with .cards }}
+    <div class="section__card--main" data-mobile="false">
+      {{ range . }}
+        {{ if .button }}
+          {{ with .button }}
+            <a href="{{ .link }}" class="section__card--item" target="{{ .target }}" rel="{{ if eq .target "_blank" }}noreferrer{{ end }}">
+              <button class="section__btn section__btn--{{ .size }}" style="background-color: {{ .bgcolor }}; color: {{ .color }};">{{ .name }}</button>
+            </a>
+          {{ end }}
+        {{ else }}
+          <div class="section__card--item"></div>
+        {{ end }}
+      {{ end }}
+    </div>
+  {{ end }}
+</div>

layouts/partials/main/landing/section-normal.html

@@ -0,0 +1,48 @@
+{{ $headerFontSize := 32 }}
+<div class="section__card" style="color: {{ .color | default "#fff" }}">
+  {{ with .header }}
+    {{ $headerFontSize = .fontSize }}
+    {{ $header := . }}
+    <header class="section__card--header">
+      {{ with .title }}
+        <h2 class="section__card--title" style="font-size:{{ $header.fontSize }}px; color:{{ $header.color | default "#fff" }};">{{ . }}</h2>
+      {{ end }}
+      {{ with .hlcolor }}
+        <div class="section__highlight" style="width: {{ $header.width | default "220" }}px; background-color: {{ . | default "transparent" }};"></div>
+      {{ end }}
+    </header>
+  {{ end }}
+  {{ with .body }}
+    <div class="section__normal">
+      {{ $body := . }}
+      {{ if or (eq .imagePosition "left") (not .imagePosition) }}
+        {{ with .image }}
+          <div class="section__normal--img-wrapper" data-position="{{ $body.imagePosition | default "left" }}">
+            <img data-src="{{ . | relURL }}" alt="{{ $body.subtitle | default "section image" }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload section__normal--img"/>
+          </div>
+        {{ end }}
+      {{ end }}
+
+      <div>
+        {{ with .subtitle }}
+          <div class="section__normal--subtitle" style="font-size:{{ with $headerFontSize }}{{ sub (int .) 4 }}px;{{ end }} color:{{ $body.color | default "#fff" }}; text-align: {{ $body.subtitlePosition | default "center" }}">
+            {{ . }}
+          </div>
+        {{ end }}
+        {{ with .description }}
+          <div class="section__normal--content" style="color: {{ $.color | default "#fff" }};">
+            {{ . | markdownify }}
+          </div>
+        {{ end }}
+      </div>
+
+      {{ if eq .imagePosition "right" }}
+        {{ with .image }}
+          <div class="section__normal--img-wrapper" data-position="{{ $body.imagePosition }}">
+            <img data-src="{{ . | relURL }}" alt="{{ $body.subtitle | default "section image" }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload section__normal--img"/>
+          </div>
+        {{ end }}
+      {{ end }}
+    </div>
+  {{ end }}
+</div>