+ <% if (is_home()) { %>
+ <%- partial('_partial/first-screen.ejs') %>
+ <% } %>
+
diff --git a/source/css/layout/_partial/comment/gitalk.styl b/source/css/layout/_partial/comment/gitalk.styl
index 478e3cc..df2bff5 100644
--- a/source/css/layout/_partial/comment/gitalk.styl
+++ b/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()
diff --git a/source/css/layout/_partial/empty-page.styl b/source/css/layout/_partial/empty-page.styl
index bfe4c28..8a92b13 100644
--- a/source/css/layout/_partial/empty-page.styl
+++ b/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 {
diff --git a/source/css/layout/_partial/first-screen.styl b/source/css/layout/_partial/first-screen.styl
new file mode 100644
index 0000000..1afcb86
--- /dev/null
+++ b/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;
+}
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index df1620e..a3fc775 100644
--- a/source/css/layout/_partial/header.styl
+++ b/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) {
- magic-style(1.02, 1.02);
- }
+ hover-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 {
diff --git a/source/css/layout/_partial/tagcloud.styl b/source/css/layout/_partial/tagcloud.styl
index 796e8ce..9a1886d 100644
--- a/source/css/layout/_partial/tagcloud.styl
+++ b/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 {
diff --git a/source/css/layout/_partial/tools.styl b/source/css/layout/_partial/tools.styl
index e620bc4..0654a7a 100644
--- a/source/css/layout/_partial/tools.styl
+++ b/source/css/layout/_partial/tools.styl
@@ -23,11 +23,7 @@ $li-margin-bottom = 12px;
margin-bottom: 0;
}
- if (hexo-config('magic.enable') == true) {
- magic-style(1.1, 1.1);
- } else {
- border: 1px solid var(--border-color);
- }
+ hover-style(1.1, 1.1);
&:hover {
transition();
diff --git a/source/css/layout/_partial/tools2.styl b/source/css/layout/_partial/tools2.styl
index 59b4219..ce80fad 100644
--- a/source/css/layout/_partial/tools2.styl
+++ b/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) {
- magic-style(1.1, 1.1);
- } else {
- border: 1px solid var(--border-color);
- }
+ hover-style(1.1, 1.1);
&:hover {
transition();
@@ -62,11 +58,7 @@ $li-margin-bottom = 12px;
transform: translate3d(0, 0, 0);
}
- if (hexo-config('magic.enable') == true) {
- magic-style(1.1, 1.1);
- } else {
- border: 1px solid var(--border-color);
- }
+ hover-style(1.1, 1.1);
&:hover {
transition();
diff --git a/source/css/layout/archive-content.styl b/source/css/layout/archive-content.styl
index b6b6de0..1f031cb 100644
--- a/source/css/layout/archive-content.styl
+++ b/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);
}
}
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index fb3f453..5ba068f 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -5,11 +5,7 @@ $avatarWidth = 46px;
.article-content-container {
- background: var(--background-color);
-
- if (hexo-config('magic.enable')) {
- magic-container(1.008, 1.002, 30px);
- }
+ ils-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-meta-info {
+ .article-header, .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;
diff --git a/source/css/layout/category-content.styl b/source/css/layout/category-content.styl
index c8fcde3..c83ad5b 100644
--- a/source/css/layout/category-content.styl
+++ b/source/css/layout/category-content.styl
@@ -2,15 +2,7 @@
.category-container {
- background: var(--background-color);
-
- if (hexo-config('magic.enable')) {
- magic-container(1.02, 1.02, 30px);
-
- +ils-tablet() {
- magic-container(1.01, 1.01, 20px);
- }
- }
+ ils-container(1.02, 1.02, 30px);
.category-name {
color: var(--second-text-color);
@@ -29,4 +21,4 @@
margin-bottom: $component-interspace;
border-bottom: 1px solid var(--border-color);
}
-}
\ No newline at end of file
+}
diff --git a/source/css/layout/category-list.styl b/source/css/layout/category-list.styl
index b64e5f3..285d4c0 100644
--- a/source/css/layout/category-list.styl
+++ b/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 {
diff --git a/source/css/layout/common/basic.styl b/source/css/layout/common/basic.styl
index d1b0d58..7f0b9a7 100644
--- a/source/css/layout/common/basic.styl
+++ b/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);
- }
-
+ 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;
- line-height: $default-font-line-height - 2px;
+ //font-size: 0.99em;
+ //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;
- line-height: $default-font-line-height - 4px;
+ //font-size: 0.98em;
+ //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);
-
- if (hexo-config('magic.enable') == true) {
- magic-style(1.1, 1.1);
- } else {
- border: 1px solid var(--border-color);
- }
+ hover-style(1.1, 1.1);
&:hover {
transition();
diff --git a/source/css/layout/common/magic-theme.styl b/source/css/layout/common/magic-theme.styl
index 3bdc139..59627e9 100644
--- a/source/css/layout/common/magic-theme.styl
+++ b/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();
+ transition();
- &:hover {
+ box-shadow: 0 1px 8px var(--shadow-color);
- transition();
+ &:hover {
- if (hexo-config('magic.scale')) {
- transform: scaleX(scaleX) scaleY(scaleY);
- }
-
- if (hexo-config('magic.shadow')) {
- box-shadow: 0 0 10px var(--border-color);
- }
+ if (hexo-config('style.hover.scale')) {
+ transform: scaleX(scaleX) scaleY(scaleY);
}
+ if (hexo-config('style.hover.shadow')) {
+ 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;
- magic-style(scaleX, scaleY);
+ border-radius: $ils-container-border-radius;
+ margin-bottom: $ils-container-margin-bottom;
+
+ hover-style(scaleX, scaleY);
+ils-tablet() {
- padding: padding - 2px;
- border-radius: 3px;
+ padding: padding * 0.8;
+ 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;
- border-radius: 2px;
+ padding: padding * 0.6;
+ border-radius: $ils-container-border-radius * 0.6;
+ margin-bottom: $ils-container-margin-bottom * 0.6;
+ hover-style(scaleX * 0.6, scaleY * 0.6);
}
}
diff --git a/source/css/layout/common/markdown.styl b/source/css/layout/common/markdown.styl
index 1d9e3ad..b6242a9 100644
--- a/source/css/layout/common/markdown.styl
+++ b/source/css/layout/common/markdown.styl
@@ -133,7 +133,7 @@
font-size: 1.2em;
font-weight: 500;
line-height: 1.12em;
-
+
+ils-tablet() {
font-size: 1.1em;
line-height: 1.02em;
@@ -177,10 +177,8 @@
}
tr:nth-child(2n) {
- background-color: var(--magic-background-color);
+ background-color: var(--second-background-color);
}
-
-
}
}
diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl
index 56d26f3..a5d601e 100644
--- a/source/css/layout/common/variables.styl
+++ b/source/css/layout/common/variables.styl
@@ -5,28 +5,22 @@
// ========================================================================
// layout
// ========================================================================
-if (hexo-config('magic.enable')) {
- $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 方形工具按钮宽度
-$component-interspace = 40px; // 组件/模块的间隔值（PC）
-$component-interspace-tablet = 30px; // 组件/模块的间隔值（平板）
-$component-interspace-mobile = 20px; // 组件/模块的间隔值（手机）
+$header-height = 72px; // 头部默认高度
+$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 方形工具按钮宽度
+$component-interspace = 40px; // 组件/模块的间隔值（PC）
+$component-interspace-tablet = 30px; // 组件/模块的间隔值（平板）
+$component-interspace-mobile = 20px; // 组件/模块的间隔值（手机）
// ========================================================================
// 媒体查询
// ========================================================================
-$media-max-width = 760px; // 媒体查询最大宽度 (平板)
-$media-max-width-mobile = 480px; // 媒体查询最大宽度（手机）
+$media-max-width = 760px; // 媒体查询最大宽度 (平板)
+$media-max-width-mobile = 480px; // 媒体查询最大宽度（手机）
ils-tablet()
@media (max-width: $media-max-width)
@@ -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 风格 背景颜色
-$magic-background-color = #fafafa; // magic 风格 背景颜色
+$background-color = #fff; // light background color
+$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-magic-background-color = #2f2e31;
+$dark-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;
}
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index d2ae674..5785972 100644
--- a/source/css/layout/home-content.styl
+++ b/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;
- }
+ margin: 20px 0;
line-height: 2em;
}
+
.home-article-meta-info-container {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--third-text-color);
+ font-size: 1em;
- 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;
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index 78ac963..849b31b 100644
--- a/source/css/layout/page.styl
+++ b/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();
}
diff --git a/source/css/layout/tag-content.styl b/source/css/layout/tag-content.styl
index abfd46f..44c3336 100644
--- a/source/css/layout/tag-content.styl
+++ b/source/css/layout/tag-content.styl
@@ -3,15 +3,7 @@
.tag-container {
- background: var(--background-color);
-
- if (hexo-config('magic.enable')) {
- magic-container(1.02, 1.02, 30px);
-
- +ils-tablet() {
- magic-container(1.01, 1.01, 20px);
- }
- }
+ ils-container(1.02, 1.02, 30px);
.tag-name {
color: var(--second-text-color);
@@ -30,4 +22,4 @@
margin-bottom: $component-interspace;
border-bottom: 1px solid var(--border-color);
}
-}
\ No newline at end of file
+}
diff --git a/source/css/style.styl b/source/css/style.styl
index e22c65b..c170306 100644
--- a/source/css/style.styl
+++ b/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"
diff --git a/source/images/bg.svg b/source/images/bg.svg
new file mode 100644
index 0000000..f576b34
--- /dev/null
+++ b/source/images/bg.svg
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/source/js/main.js b/source/js/main.js
index 67bd37c..32dfe67 100644
--- a/source/js/main.js
+++ b/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();
});
diff --git a/source/js/utils.js b/source/js/utils.js
index 837185d..7926469 100644
--- a/source/js/utils.js
+++ b/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');
+ },
}