refactor: refactor theme style

_config.yml

@@ -14,6 +14,10 @@ style:
   # Theme primary color
   primary_color: "#0066CC"
 
+  hover:
+    scale: false   # scale effect when the mouse hover
+    shadow: true   # shadow effect when the mouse hover
+
   # favicon
   favicon: images/favicon.png
 
@@ -154,12 +158,3 @@ toc:
 
   # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
   expand_all: true
-
-
-# ---------------------------------------------------------------------------------------
-# Magic
-# ---------------------------------------------------------------------------------------
-magic:
-  enable: true
-  scale: false    # scale effect when the mouse hover
-  shadow: false   # shadow effect when the mouse hover

layout/_partial/first-screen.ejs

@@ -0,0 +1,3 @@
+<div class="first-screen-container">
+    黄色的森林分出两条路，我选择人迹更少的那一条，从此决定我一生的道路。
+</div>

layout/_partial/scripts.ejs

@@ -12,7 +12,8 @@
     <% } %>
 <% } %>
 
-<% if (theme.local_search.enable && config.search) { %>
+<!-- theme.local_search.enable && config.search -->
+<% if (theme.local_search.enable) { %>
     <%- js('js/local-search.js') %>
 <% } %>
 

layout/home-content.ejs

@@ -24,7 +24,6 @@
                 <div class="home-article-meta-info-container">
                     <div class="home-article-meta-info">
                         <span><i class="fa fa-pencil-square-o"></i> <%= date(post.date, 'YYYY-MM-DD') %></span>
-                        <% if (theme.magic.enable === true) { %>
                         <% if (post.categories.length && theme.home_article.category.enable === true) { %>
                             <span class="home-article-category"><i class="fa fa-folder"></i>
                                     <ul>
@@ -53,11 +52,8 @@
                                     </ul>
                                 </span>
                         <% } %>
-                        <% } %>
                     </div>
-                    <% if (theme.magic.enable === false) { %>
+
-                        <hr>
-                    <% } %>
                     <a href="<%- url_for(post.path) %>"><%- __('read_more') %> <i class="fa fa-angle-right"></i></a>
                 </div>
             </li>

layout/page.ejs

@@ -1,5 +1,9 @@
 <div class="page-container">
 
+    <% if (is_home()) { %>
+        <%- partial('_partial/first-screen.ejs') %>
+    <% } %>
+
     <header class="page-header">
         <div class="header-progress"></div>
     </header>

source/css/layout/_partial/comment/gitalk.styl

@@ -174,7 +174,7 @@ $gt-size-avatar-mobi := em(32px)
         background-color: var(--background-color)
         color: $gt-color-main
         &:hover
-          background-color: var(--magic-background-color)
+          background-color: var(--second-background-color)
       &-public
         &:hover
           background-color: lighten($gt-color-main, 20%)
@@ -372,7 +372,7 @@ $gt-size-avatar-mobi := em(32px)
       flex: 1
       margin-left: em(20px)
       padding: em(12px) em(16px)
-      background-color: var(--magic-background-color)
+      background-color: var(--second-background-color)
       overflow: auto
       transition: all ease 0.25s
       +mobile()

source/css/layout/_partial/empty-page.styl

@@ -5,10 +5,10 @@
 
   background: var(--background-color);
 
-  magic-container(1.005, 1.01, 30px);
+  ils-container(1.005, 1.01, 30px);
 
   +ils-tablet() {
-    magic-container(1.001, 1.005, 20px);
+    ils-container(1.001, 1.005, 20px);
   }
 
   .empty-page-content {

source/css/layout/_partial/first-screen.styl

@@ -0,0 +1,15 @@
+.first-screen-container {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  text-align: center;
+  padding: 30px;
+  line-height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+  font-weight: bold;
+  overflow: hidden;
+  background: url("/images/bg.svg") center center / cover no-repeat;
+}

source/css/layout/_partial/header.styl

@@ -13,11 +13,8 @@ $header-progress-height = 2.8px;
   justify-content: center;
   background: var(--background-color);
   padding-top: $header-progress-height;
-  transition();
 
-  if (hexo-config('magic.enable') == true) {
+  hover-style(1.02, 1.02);
-    magic-style(1.02, 1.02);
-  }
 
   .header-content {
     width: $main-content-width;
@@ -257,10 +254,6 @@ $header-progress-height = 2.8px;
 
 .header-wrapper-shrink {
 
-  if (hexo-config('magic.enable') == false) {
-    box-shadow: 0 1px 2px var(--border-color);
-  }
-
   .header-content {
 
     .logo-title {

source/css/layout/_partial/tagcloud.styl

@@ -4,7 +4,7 @@
 
   background: var(--background-color);
 
-  magic-container(1.005, 1.01, 30px);
+  ils-container(1.005, 1.01, 30px);
 
   .tagcloud-content {
 

source/css/layout/_partial/tools.styl

@@ -23,11 +23,7 @@ $li-margin-bottom = 12px;
         margin-bottom: 0;
       }
 
-      if (hexo-config('magic.enable') == true) {
+      hover-style(1.1, 1.1);
-        magic-style(1.1, 1.1);
-      } else {
-        border: 1px solid var(--border-color);
-      }
 
       &:hover {
         transition();

source/css/layout/_partial/tools2.styl

@@ -21,11 +21,7 @@ $li-margin-bottom = 12px;
     color: var(--second-text-color);
     z-index: 9999;
 
-    if (hexo-config('magic.enable') == true) {
+    hover-style(1.1, 1.1);
-      magic-style(1.1, 1.1);
-    } else {
-      border: 1px solid var(--border-color);
-    }
 
     &:hover {
       transition();
@@ -62,11 +58,7 @@ $li-margin-bottom = 12px;
         transform: translate3d(0, 0, 0);
       }
 
-      if (hexo-config('magic.enable') == true) {
+      hover-style(1.1, 1.1);
-        magic-style(1.1, 1.1);
-      } else {
-        border: 1px solid var(--border-color);
-      }
 
       &:hover {
         transition();

source/css/layout/archive-content.styl

@@ -3,10 +3,10 @@
 
 .archive-container {
   background: var(--background-color);
-  magic-container(1.005, 1.01, 30px);
+  ils-container(1.005, 1.01, 30px);
 
   +ils-tablet() {
-    magic-container(1.001, 1.005, 20px);
+    ils-container(1.001, 1.005, 20px);
   }
 }
 

source/css/layout/article-content.styl

@@ -5,11 +5,7 @@ $avatarWidth = 46px;
 
 .article-content-container {
 
-  background: var(--background-color);
+  ils-container(1.008, 1.002, 30px);
-
-  if (hexo-config('magic.enable')) {
-    magic-container(1.008, 1.002, 30px);
-  }
 
   .article-title {
     color: var(--second-text-color);
@@ -25,6 +21,7 @@ $avatarWidth = 46px;
     }
   }
 
+
   .article-header {
     position: relative;
     padding-left: $avatarWidth;
@@ -83,8 +80,7 @@ $avatarWidth = 46px;
   }
 
 
-  .article-header,
+  .article-header, .article-header-meta-info {
-  .article-header-meta-info {
     margin-top: 16px;
     +ils-tablet() {
       transform: scale(0.88);
@@ -92,6 +88,7 @@ $avatarWidth = 46px;
     }
   }
 
+
   .article-content {
     margin-top: 30px;
     text-align: justify;

source/css/layout/category-content.styl

@@ -2,15 +2,7 @@
 
 .category-container {
 
-  background: var(--background-color);
+  ils-container(1.02, 1.02, 30px);
-
-  if (hexo-config('magic.enable')) {
-    magic-container(1.02, 1.02, 30px);
-
-    +ils-tablet() {
-      magic-container(1.01, 1.01, 20px);
-    }
-  }
 
   .category-name {
     color: var(--second-text-color);

source/css/layout/category-list.styl

@@ -5,10 +5,10 @@
 
   background: var(--background-color);
 
-  magic-container(1.005, 1.01, 30px);
+  ils-container(1.005, 1.01, 30px);
 
   +ils-tablet() {
-    magic-container(1.001, 1.005, 20px);
+    ils-container(1.001, 1.005, 20px);
   }
 
   .category-list-content {

source/css/layout/common/basic.styl

@@ -29,31 +29,30 @@ html, body {
   margin: 0;
   padding: 0;
   color: var(--normal-text-color);
-  if (hexo-config('magic.enable') == true) {
-    background: var(--magic-background-color);
-  } else {
   background: var(--background-color);
-  }
-
   font-family: $default-font-family;
   font-weight: $default-font-weight;
   font-size: $default-font-size;
   line-height: $default-font-line-height;
 
   +ils-tablet() {
-    font-size: 0.99em;
+    //font-size: 0.99em;
-    line-height: $default-font-line-height - 2px;
+    //line-height: $default-font-line-height - 2px;
+    font-size: $default-font-size * 0.95;
+    line-height: $default-font-line-height * 0.95;
+
   }
 
   +ils-mobile() {
-    font-size: 0.98em;
+    //font-size: 0.98em;
-    line-height: $default-font-line-height - 4px;
+    //line-height: $default-font-line-height - 4px;
+    font-size: $default-font-size * 0.9;
+    line-height: $default-font-line-height * 0.9;
   }
 
 }
 
 
-
 // ============================
 // selection
 // ============================
@@ -106,12 +105,7 @@ button {
   border-radius: 5px;
   padding: 0.5em 1em;
   background: var(--background-color);
-
+  hover-style(1.1, 1.1);
-  if (hexo-config('magic.enable') == true) {
-    magic-style(1.1, 1.1);
-  } else {
-    border: 1px solid var(--border-color);
-  }
 
   &:hover {
     transition();

source/css/layout/common/magic-theme.styl

@@ -1,43 +1,49 @@
 @require "animated.styl"
 
-magic-style(scaleX, scaleY) {
+$ils-container-margin-bottom = 30px;
+$ils-container-border-radius = 5px;
 
-  if (hexo-config('magic.enable') == true) {
+hover-style(scaleX, scaleY) {
 
-    box-shadow: 0 0 2.8px var(--border-color);
   transition();
 
+  box-shadow: 0 1px 8px var(--shadow-color);
+
   &:hover {
 
-      transition();
+    if (hexo-config('style.hover.scale')) {
-
-      if (hexo-config('magic.scale')) {
       transform: scaleX(scaleX) scaleY(scaleY);
     }
 
-      if (hexo-config('magic.shadow')) {
+    if (hexo-config('style.hover.shadow')) {
-        box-shadow: 0 0 10px var(--border-color);
+      box-shadow: 0 2px 16px var(--shadow-hover-color);
     }
   }
 
-  }
 
 }
 
-magic-container(scaleX, scaleY, padding) {
 
+ils-container(scaleX, scaleY, padding) {
+  background: var(--background-color);
   padding: padding;
-  border-radius: 4px;
+  border-radius: $ils-container-border-radius;
-  magic-style(scaleX, scaleY);
+  margin-bottom: $ils-container-margin-bottom;
+
+  hover-style(scaleX, scaleY);
 
   +ils-tablet() {
-    padding: padding - 2px;
+    padding: padding * 0.8;
-    border-radius: 3px;
+    border-radius: $ils-container-border-radius * 0.8;
+    margin-bottom: $ils-container-margin-bottom * 0.8;
+    hover-style(scaleX * 0.8, scaleY * 0.8);
   }
 
   +ils-mobile() {
-    padding: padding - 4px;
+    padding: padding * 0.6;
-    border-radius: 2px;
+    border-radius: $ils-container-border-radius * 0.6;
+    margin-bottom: $ils-container-margin-bottom * 0.6;
+    hover-style(scaleX * 0.6, scaleY * 0.6);
   }
 
 }

source/css/layout/common/markdown.styl

@@ -177,10 +177,8 @@
     }
 
     tr:nth-child(2n) {
-      background-color: var(--magic-background-color);
+      background-color: var(--second-background-color);
     }
-
-
   }
 }
 

source/css/layout/common/variables.styl

@@ -5,16 +5,10 @@
 // ========================================================================
 // layout
 // ========================================================================
-if (hexo-config('magic.enable')) {
+$header-height = 72px; // 头部默认高度
-  $header-height = 72px;                // magic 风格：头部默认高度
-} else {
-  $header-height = 100px;               // normal 风格：头部默认高度
-}
-
 $main-content-width = 62%; // 中间内容区域宽度（PC）
 $main-content-width-tablet = 80%; // 中间内容区域宽度（平板）
 $main-content-width-mobile = 88%; // 中间内容区域宽度（手机）
-
 $header-shrink-height = 56px; // 头部收缩高度
 $circle-button-width = 40px; // tools 圆形工具按钮宽度
 $tools-button-width = 32px; // tools 方形工具按钮宽度
@@ -54,10 +48,10 @@ $z-index-9 = 1009;
 // ========================================================================
 // color
 // ========================================================================
-// normal mode color
+// primary color
 $primary-color = convert(hexo-config("style.primary_color")) || #0066CC;
-$background-color = #fff; // normal 风格 背景颜色
+$background-color = #fff; // light background color
-$magic-background-color = #fafafa; // magic 风格 背景颜色
+$second-background-color = #f2f2f2; // second light background color
 $normal-text-color = #43404d; // 通用文本颜色（默认字体颜色）
 $first-text-color = darken($normal-text-color, 8%); // 第一文本颜色
 $second-text-color = darken($normal-text-color, 4%); // 第二文本颜色
@@ -65,11 +59,13 @@ $third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色
 $fourth-text-color = #eee; // 第四文本颜色
 $border-color = darken($background-color, 30%); // 边框颜色
 $selection-color = lighten($primary-color, 10%); // 文字选中的颜色
+$shadow-color = rgba(0, 0, 0, 0.1);
+$shadow-hover-color = rgba(0, 0, 0, 0.2);
 
 // dark mode color
 $dark-primary-color = $primary-color;
-$dark-background-color = #38373a;
+$dark-background-color = #2f2e31;
-$dark-magic-background-color = #2f2e31;
+$dark-second-background-color = #262628;
 $dark-normal-text-color = #b9b5c2;
 $dark-first-text-color = lighten($dark-normal-text-color, 30%);
 $dark-second-text-color = lighten($dark-normal-text-color, 20%);
@@ -77,6 +73,8 @@ $dark-third-text-color = darken($dark-normal-text-color, 20%);
 $dark-fourth-text-color = #2f2e31;
 $dark-border-color = lighten($dark-background-color, 20%);
 $dark-selection-color = $selection-color;
+$dark-shadow-color = rgba(200, 200, 200, 0.1);
+$dark-shadow-hover-color = rgba(200, 200, 200, 0.2);
 
 
 // ========================================================================
@@ -85,7 +83,7 @@ $dark-selection-color = $selection-color;
 $default-font-family = Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 //$default-font-family = -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial;
 $default-font-size = 15.2px;
-$default-font-line-height = 20px;
+$default-font-line-height = 22px;
 $default-font-weight = 400;
 
 
@@ -94,7 +92,7 @@ $default-font-weight = 400;
 // ========================================================================
 :root {
   --background-color: $background-color;
-  --magic-background-color: $magic-background-color;
+  --second-background-color: $second-background-color;
   --primary-color: $primary-color;
   --first-text-color: $first-text-color;
   --second-text-color: $second-text-color;
@@ -103,12 +101,14 @@ $default-font-weight = 400;
   --normal-text-color: $normal-text-color;
   --border-color: $border-color;
   --selection-color: $selection-color;
+  --shadow-color: $shadow-color;
+  --shadow-hover-color: $shadow-hover-color;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background-color: $dark-background-color;
-    --magic-background-color: $dark-magic-background-color;
+    --second-background-color: $dark-second-background-color;
     --primary-color: $dark-primary-color;
     --first-text-color: $dark-first-text-color;
     --second-text-color: $dark-second-text-color;
@@ -117,13 +117,15 @@ $default-font-weight = 400;
     --normal-text-color: $dark-normal-text-color;
     --border-color: $dark-border-color;
     --selection-color: $dark-selection-color;
+    --shadow-color: $dark-shadow-color;
+    --shadow-hover-color: $dark-shadow-hover-color;
   }
 }
 
 
 .dark-mode {
   --background-color: $dark-background-color;
-  --magic-background-color: $dark-magic-background-color;
+  --second-background-color: $dark-second-background-color;
   --primary-color: $dark-primary-color;
   --first-text-color: $dark-first-text-color;
   --second-text-color: $dark-second-text-color;
@@ -132,11 +134,14 @@ $default-font-weight = 400;
   --normal-text-color: $dark-normal-text-color;
   --border-color: $dark-border-color;
   --selection-color: $dark-selection-color;
+  --shadow-color: $dark-shadow-color;
+  --shadow-hover-color: $dark-shadow-hover-color;
 }
 
+
 .light-mode {
   --background-color: $background-color;
-  --magic-background-color: $magic-background-color;
+  --second-background-color: $second-background-color;
   --primary-color: $primary-color;
   --first-text-color: $first-text-color;
   --second-text-color: $second-text-color;
@@ -145,4 +150,6 @@ $default-font-weight = 400;
   --normal-text-color: $normal-text-color;
   --border-color: $border-color;
   --selection-color: $selection-color;
+  --shadow-color: $shadow-color;
+  --shadow-hover-color: $shadow-hover-color;
 }

source/css/layout/home-content.styl

@@ -6,9 +6,10 @@
   .home-article-list {
 
     .home-article-item {
-
       position: relative;
 
+      ils-container(1.02, 1.02, 30px);
+
       .top-icon {
         position: absolute;
         top: 6px;
@@ -26,22 +27,6 @@
       }
 
 
-      background: var(--background-color);
-
-      if (hexo-config('magic.enable')) {
-
-        magic-container(1.02, 1.02, 30px);
-        margin-bottom: $component-interspace;
-
-        +ils-tablet() {
-          magic-container(1.01, 1.01, 20px);
-          margin-bottom: $component-interspace - 10px;
-        }
-
-      } else {
-        margin-bottom: 70px;
-      }
-
       .home-article-title {
         position: relative;
         font-weight: 600;
@@ -53,45 +38,31 @@
           font-size: 1.3em;
         }
 
+
         +ils-mobile() {
           font-size: 1.2em;
         }
 
+
         margin: 0;
 
-        if (hexo-config('magic.enable')) {
+      }
-          //TODO: ....
 
-        } else {
-          a {
-            color: var(--second-text-color);
-          }
-        }
-      }
 
       .home-article-content {
-
         text-align: justify;
-
-        if (hexo-config('magic.enable') == true) {
         margin: 20px 0;
-        } else {
-          margin: 30px 0;
-        }
         line-height: 2em;
       }
 
+
       .home-article-meta-info-container {
         display: flex;
         justify-content: space-between;
         align-items: center;
         color: var(--third-text-color);
-
-        if (hexo-config('magic.enable') == true) {
         font-size: 1em;
-        } else {
+
-          font-size: 0.9em;
-        }
 
         .home-article-meta-info {
           letter-spacing: 0.5px;
@@ -121,6 +92,7 @@
           }
         }
 
+
         hr {
           border: none;
           flex: 1;

source/css/layout/page.styl

@@ -126,22 +126,16 @@ $page-aside-width = 258px;
     z-index: $z-index-6;
     box-sizing: border-box;
     overflow-y: auto;
-    background: var(--background-color);
+    border-radius: 0 !important;
+    margin-bottom: 0 !important;
+
+    ils-container(1.02, 1.02, 20px);
 
     +ils-tablet() {
       left: 0 !important;
       display: none !important;
     }
 
-    if (hexo-config('magic.enable')) {
-      magic-container(1.02, 1.02, 20px);
-    } else {
-      padding: 20px;
-      border-right: 1px solid var(--border-color);
-    }
-
-    border-radius: 0;
-
     the-transition-ease-out();
   }
 

source/css/layout/tag-content.styl

@@ -3,15 +3,7 @@
 
 .tag-container {
 
-  background: var(--background-color);
+  ils-container(1.02, 1.02, 30px);
-
-  if (hexo-config('magic.enable')) {
-    magic-container(1.02, 1.02, 30px);
-
-    +ils-tablet() {
-      magic-container(1.01, 1.01, 20px);
-    }
-  }
 
   .tag-name {
     color: var(--second-text-color);

source/css/style.styl

@@ -12,6 +12,7 @@
 @import "layout/_partial/footer.styl"
 @import "layout/_partial/paginator.styl"
 @import "layout/_partial/empty-page.styl"
+@import "layout/_partial/first-screen.styl"
 @import "layout/category-list.styl"
 @import "layout/_partial/article-meta-info.styl"
 @import "layout/home-content.styl"

source/images/bg.svg

@@ -0,0 +1,39 @@
+<svg
+  version="1.1"
+  baseProfile="full"
+  width="100%" height="100%"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 1400 800"
+>
+
+  <rect x="1300" y="400" rx="40" ry="40" width="300" height="300" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 1450 550" to="360 1450 550" repeatCount="indefinite" />
+  </rect>
+
+  <path d="M 100 350 A 150 150 0 1 1 400 350 Q400 370 380 370 L 250 370 L 120 370 Q100 370 100 350" stroke="rgb(253, 214, 99)" fill="rgb(253, 214, 99)">
+    <animateMotion path="M 800 -200 L 800 -300 L 800 -200" dur="20s" begin="0s" repeatCount="indefinite" />
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 210 530 ; -30 210 530 ; 0 210 530" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite" />
+  </path>
+
+  <circle cx="200" cy="150" r="20" stroke="#1a73e8" fill="#1a73e8">
+    <animateMotion path="M 0 0 L 40 20 Z" dur="5s" repeatCount="indefinite" />
+  </circle>
+
+  <!-- 三角形 -->
+  <path d="M 165 580 L 270 580 Q275 578 270 570 L 223 483 Q220 480 217 483 L 165 570 Q160 578 165 580" stroke="rgb(238, 103, 92)" fill="rgb(238, 103, 92)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 210 530" to="360 210 530" repeatCount="indefinite" />
+  </path>
+
+  <circle cx="1200" cy="600" r="30" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
+    <animateMotion path="M 0 0 L -20 40 Z" dur="9s" repeatCount="indefinite" />
+  </circle>
+
+  <path d="M 100 350 A 40 40 0 1 1 180 350 L 180 430 A 40 40 0 1 1 100 430 Z" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
+    <animateMotion path="M 140 390 L 180 360 L 140 390" dur="20s" begin="0s" repeatCount="indefinite" />
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 140 390; -60 140 390; 0 140 390" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite" />
+  </path>
+
+  <rect x="400" y="600" rx="40" ry="40" width="100" height="100" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="-30 550 750" to="330 550 750" repeatCount="indefinite" />
+  </rect>
+</svg>

source/js/main.js

@@ -13,4 +13,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
   // init page height handle
   ILS.utils.initPageHeightHandle();
+
+  // init first screen height
+  ILS.utils.initFirstScreenHeight();
 });

source/js/utils.js

@@ -131,7 +131,6 @@ ILS.utils = {
     return dom ? dom.getBoundingClientRect().height : 0;
   },
 
-
   initPageHeightHandle() {
     const h1 = this.getElementHeight('.header-progress');
     const h2 = this.getElementHeight('.page-main-content-top');
@@ -144,4 +143,9 @@ ILS.utils = {
       pb_dom.style.marginTop = (innerHeight - allDomHeight) + 'px';
     }
   },
+
+  initFirstScreenHeight() {
+    const firstScreenDom = document.querySelector('.first-screen-container');
+    firstScreenDom && (firstScreenDom.style.height = window.innerHeight + 'px');
+  },
 }