feat: update hero, images in landing suport full_size

xiaerfei · Sep 17, 2018 · 20712e3 · 20712e3
1 parent fa5fbd3
commit 20712e3
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 50 deletions.
diff --git a/_layouts/landing.html b/_layouts/landing.html
@@ -73,7 +73,7 @@ <h4>{{ child.title }}</h4>
                       {%- endif -%}
                     </div>
 
-                    {%- if child.image -%}
+                    {%- if child.image and child.image.src -%}
 
                       {%- if child.image.url -%}
                         {%- include snippets/get-nav-url.html path=child.image.url -%}
@@ -82,22 +82,17 @@ <h4>{{ child.title }}</h4>
                         {%- assign _item_image_url = nil -%}
                       {%- endif -%}
 
-                      {%- if child.image.src -%}
-                        {%- include snippets/get-nav-url.html path=child.image.src -%}
-                        {%- assign _item_image_src = __return -%}
-                      {%- else -%}
-                        {%- assign _item_image_src = nil -%}
-                      {%- endif -%}
+                      {%- include snippets/get-nav-url.html path=child.image.src -%}
+                      {%- assign _item_image_src = __return -%}
+
                       {%- if child.image.is_row -%}
                         <div class="mb-5">
                       {%- endif -%}
                           <div class="mx-auto" style="{{ child.image.style }}">
                       {%- if _item_image_url -%}
                             <a href="{{ _item_image_url }}">
                       {%- endif -%}
-                      {%- if _item_image_src -%}
                               <img src="{{ _item_image_src }}"/>
-                      {%- endif -%}
                       {%- if _item_image_url -%}
                             </a>
                       {%- endif -%}
@@ -114,25 +109,46 @@ <h4>{{ child.title }}</h4>
             </div>
           {%- endif -%}
 
-          {%- if _section.image -%}
+      {%- if _section.image.full_width == true -%}
+        </div> {% comment %} end hero__content {% endcomment %}
+      {%- endif -%}
+
+          {%- if _section.image and _section.image.src -%}
+
+            {%- if _section.image.url -%}
+              {%- include snippets/get-nav-url.html path=_section.image.url -%}
+              {%- assign _section_image_url = __return -%}
+            {%- else -%}
+              {%- assign _section_image_url = nil -%}
+            {%- endif -%}
+
+            {%- include snippets/get-nav-url.html path=_section.image.src -%}
+            {%- assign _section_image_src = __return -%}
+
             {%- if _section.image.is_row -%}
               <div class="mb-5">
             {%- endif -%}
-              {%- if child.image.url -%}
-                <a href="{{ child.image.url }}">
-              {%- endif -%}
-                  {%- include snippets/get-nav-url.html path=_section.image.src -%}
-                  {%- assign _url = __return -%}
-                  <img class="hero__cover" src="{{ _url }}" style="{{ _section.image.style }}" />
-              {%- if child.image.url -%}
-                </a>
-              {%- endif -%}
+                <div class="mx-auto" style="{{ _section.image.style }}">
+            {%- if _section_image_url -%}
+                  <a href="{{ _section_image_url }}">
+            {%- endif -%}
+                    {%- if _section.image.full_width == true -%}
+                      <img class="hero__cover hero__cover--full-width" src="{{ _section_image_src }}"/>
+                    {%- else -%}
+                      <img class="hero__cover" src="{{ _section_image_src }}"/>
+                    {%- endif -%}
+            {%- if _section_image_url -%}
+                  </a>
+            {%- endif -%}
+                </div>
             {%- if _section.image.is_row -%}
               </div>
             {%- endif -%}
           {%- endif -%}
 
-        </div>
+      {%- if _section.image.full_width != true -%}
+        </div> {% comment %} end hero__content {% endcomment %}
+      {%- endif -%}
       </section>
   {%- endfor -%}
   </div>

diff --git a/_sass/common/_variables.scss b/_sass/common/_variables.scss
@@ -83,7 +83,7 @@ $z-index: (
 $layout: (
   header-height:          5rem,
   header-height-sm:       3rem,
-  content-max-width:      850px,
+  content-max-width:      950px,
   sidebar-width:          250px,
   sidebar-header-height:  3rem,
   aside-width:            220px,

diff --git a/_sass/common/components/_hero.scss b/_sass/common/components/_hero.scss
@@ -1,14 +1,8 @@
 .hero {
-  padding: map-get($spacers, 5);
   background-position: 50% 50%;
-  @include media-breakpoint-down(lg) {
-    padding: map-get($spacers, 5) map-get($spacers, 3);
-  }
-  @include media-breakpoint-down(md) {
-    padding: map-get($spacers, 4) map-get($spacers, 3);
-  }
   @include flexbox();
-  @include align-items(center);
+  @include flex-direction(column);
+  @include justify-content(center);
   h1 { font-size: map-get($base, font-size-h1-xl); }
   h2 { font-size: map-get($base, font-size-h2-xl); }
   h3 { font-size: map-get($base, font-size-h3-xl); }
@@ -34,12 +28,6 @@
     h6 { font-size: map-get($base, font-size-h6-sm); }
     p  { font-size: map-get($base, font-size); }
   }
-
-  img {
-    display: block;
-    width: 100%;
-    margin: 0 auto;
-  }
   background-size: cover;
 
 }
@@ -60,10 +48,13 @@
 }
 
 .hero__content {
-  width: 100%;
-}
-.hero__cover {
-  max-width: 800px;
+  margin: map-get($spacers, 5);
+  @include media-breakpoint-down(lg) {
+    margin: map-get($spacers, 5) map-get($spacers, 3);
+  }
+  @include media-breakpoint-down(md) {
+    margin: map-get($spacers, 4) map-get($spacers, 3);
+  }
 }
 
 .heros {

diff --git a/_sass/components/_main.scss b/_sass/components/_main.scss
@@ -1,10 +1,13 @@
 .main {
   width: 100%;
   max-width: map-get($layout, content-max-width);
-  padding: 0 2rem;
+  padding: 0 map-get($spacers, 5);
   margin: 0 auto;
   @include media-breakpoint-down(lg) {
-    padding: 0 1rem;
+    padding: 0 map-get($spacers, 4);
+  }
+  @include media-breakpoint-down(md) {
+    padding: 0 map-get($spacers, 3);
   }
 }
 
@@ -13,7 +16,6 @@
     max-width: map-get($layout, content-max-width) + map-get($layout, aside-width);
     @include media-breakpoint-down(lg) {
       max-width: map-get($layout, content-max-width);
-      padding: 0 1rem;
     }
   }
 }

diff --git a/_sass/layout/_landing.scss b/_sass/layout/_landing.scss
@@ -1,6 +1,25 @@
 .layout--landing {
+  .heros {
+    max-width: map-get($layout, content-max-width) * 2;
+    margin-right: auto;
+    margin-left: auto;
+  }
   .hero {
-    padding-bottom: 0;
     background-color: $text-background-color;
+
+    img {
+      display: block;
+      width: 100%;
+      margin: 0 auto;
+    }
+  }
+  .hero__content {
+    margin-bottom: 0;
+  }
+  .hero__cover {
+    max-width: map-get($layout, content-max-width);
+  }
+  .hero__cover--full-width {
+    max-width: none;
   }
 }
diff --git a/docs/landing.html b/docs/landing.html
@@ -15,9 +15,9 @@
       url: /test/
   height: 100vh
   theme: dark
-  background_color: '#111'
+  background_color: "#111"
   background_image:
-    gradient: 'linear-gradient(rgba(240, 0, 150, .4), rgba(104, 0, 208 , .4))'
+    gradient: "linear-gradient(rgba(240, 0, 150, .4), rgba(104, 0, 208 , .4))"
     src: /docs/assets/images/cover2.jpg
 data:
   sections:
@@ -26,7 +26,7 @@
       theme: dark
       image:
         src: /screenshots/TeXt-responsive.png
-      background_color: '#515151'
+      background_color: "#515151"
     - title: Super Customizable
       excerpt: Everything from the menus, sidebars, comments, and more can be configured or set with YAML Front Matter.
       actions:
@@ -36,12 +36,16 @@
       image:
         src: /screenshots/TeXt-layouts.png
         is_row: true
+        full_width: true
+        style: "max-width: 1200px;"
     - title: Skins
       excerpt: TeXt has 6 built-in skins, you can also set up your own skin.
       background_color: transparent
       image:
         src: /screenshots/TeXt-skins.png
         is_row: true
+        full_width: true
+        style: "max-width: 1000px;"
     - title: Enhanced User Experience
       background_color: transparent
       children:
@@ -61,24 +65,24 @@
       actions:
         - text: '<i class="fab fa-github"></i> GitHub'
           url: https://github.com/kitian616/jekyll-TeXt-theme
-      background_color: '#515151'
+      background_color: "#515151"
     - title: Tip Me
       background_color: transparent
       children:
         - title: 'WeChat <i class="fas fa-arrow-down"></i>'
           image:
             src: /docs/assets/images/tip_wechat.jpg
-            style: 'max-width: 200px; max-height: 200px'
+            style: "max-width: 200px; max-height: 200px"
             is_row: true
         - title: 'Alipay <i class="fas fa-arrow-down"></i>'
           image:
             src: /docs/assets/images/tip_alipay.jpg
-            style: 'max-width: 200px; max-height: 200px'
+            style: "max-width: 200px; max-height: 200px"
             is_row: true
         - title: 'PayPal <i class="fas fa-arrow-down"></i>'
           image:
             src: /docs/assets/images/tip_paypal.png
             url: https://www.paypal.me/kitian616
-            style: 'max-width: 200px; max-height: 200px'
+            style: "max-width: 200px; max-height: 200px"
             is_row: true
 ---